🎵 Muzibu Player - Implementation Plan

📅 Tarih: 2025-11-28 | 🎯 Tenant: muzibu.com (1001) | 👤 Planlama: Claude AI

68% Complete Player Focus

📊 Mevcut Durum Analizi

📁 Player Dosya Yapısı

Konum: public/themes/muzibu/js/player/muzibu-player.js

Boyut: 2,040 satır (81KB)

Fonksiyon Sayısı: 39

Sorun: Monolitik yapı - modülerleştirme gerekiyor

✅ Tamamlanmış Özellikler (17/37)

✓ TAMAMLANDI

🔊 Howler.js 2.2.4

Web Audio API, MP3/OGG/WAV/WebM desteği, html5: true, pool size: 5

✓ TAMAMLANDI

📡 HLS.js Streaming

Adaptive bitrate, enableWorker: true, Safari native fallback aktif

✓ TAMAMLANDI

🔀 Crossfade Sistemi

6 saniye otomatik, 1 saniye manuel, dual audio element desteği

✓ TAMAMLANDI

📋 Queue Yönetimi

Drag & drop sıralama, sonraki 3 şarkı prefetch

✓ TAMAMLANDI

🔊 Volume Kontrol

Slider, mute toggle, Howler+HLS senkronizasyonu

✓ TAMAMLANDI

🔁 Repeat Modları

Off, All, One - cycleRepeat() fonksiyonu mevcut

✓ TAMAMLANDI

🔀 Shuffle

playRandomSongs() - 50 popüler şarkı rastgele

✓ TAMAMLANDI

📱 Responsive Design

Mobil player bar, queue panel, sidebar optimizasyonu

✓ TAMAMLANDI

🏷️ Album/Playlist/Genre

playAlbum(), playPlaylist() fonksiyonları aktif

✓ TAMAMLANDI

🔄 HLS Conversion Jobs

ConvertToHLSJob, ProcessBulkSongHLSJob arka planda çalışıyor

✓ TAMAMLANDI

⏱️ 30-Second Preview

Guest + Non-premium kullanıcılar için 30 saniye preview

✓ TAMAMLANDI

💎 Premium System

Premium üyelik kontrolü, isPremium() backend integration

🔴 Kritik Sorunlar

⚠️ GÜVENLİK AÇIĞI: Stream Endpoint Public Erişilebilir

Kullanıcılar browser console üzerinden direkt stream URL'lerini çıkarabilir!

Hedef: 6-Layer Security System

Layer 1: Rate Limiting
IP ve token bazlı rate limiting (Sanctum + Laravel Rate Limiter)
Layer 2: Bearer Token Auth
Sanctum token authentication, her stream request için zorunlu
Layer 3: Subscription Verification
Backend'de premium kontrolü, aktif subscription validasyonu
Layer 4: Signed URLs
5 dakika expiry, IP-locked, Laravel Signed URL kullanımı
Layer 5: HLS + AES-128 Encryption
HLS stream'leri AES-128 ile şifrelenmiş, key rotation
Layer 6: Device Fingerprinting
FingerprintJS Pro, maksimum 3 cihaz sınırı

🔧 MONOLİTİK PLAYER DOSYASI

2,040 satırlık tek dosya - bakım ve geliştirme zorluğu

Hedef: Modüler yapıya geçiş (8-10 ayrı dosya)

❌ isLiked() Fonksiyon Hatası

Alpine.js context'inde isLiked() fonksiyonu erişilemiyor

Çözüm: Global scope'da tanımla veya Alpine.js data'ya ekle

🎯 Yapılacaklar Listesi (Player Odaklı)

Faz 1: Kritik Düzeltmeler (Yüksek Öncelik)

1.1 - isLiked() Fonksiyon Hatası Düzeltme
Alpine.js context'inde erişilebilir hale getir
Dosya: muzibu-player.js
Süre: 15 dakika
1.2 - 500 Internal Server Error (Song Stream)
/api/muzibu/songs/{id}/stream endpoint debug
Dosya: SongStreamController.php
Süre: 30 dakika

Faz 2: Player Modülerleştirme (Orta Öncelik)

2.1 - Core Player Logic Ayrıştırma
Howler.js ve HLS.js wrapper'larını ayrı dosyalara taşı
Hedef Dosyalar:
- player/core/howler-manager.js (~200 satır)
- player/core/hls-manager.js (~150 satır)
- player/core/crossfade.js (~180 satır)
2.2 - Queue Yönetimi Ayrıştırma
Queue logic ve UI'ı ayrı modül olarak
Hedef Dosya: player/features/queue-manager.js (~250 satır)
2.3 - Auth Modals Ayrıştırma
Login/Register/Forgot modals ayrı component
Hedef Dosya: player/features/auth-manager.js (~300 satır)
2.4 - Favorites/Likes Sistem
Like/unlike fonksiyonlarını ayrı modül
Hedef Dosya: player/features/favorites-manager.js (~120 satır)

Faz 3: Security Katmanları (Kritik Öncelik)

3.1 - Rate Limiting Implementation
Laravel RateLimiter + Redis kullanımı
Dosyalar:
- app/Http/Middleware/StreamRateLimit.php (YENİ)
- routes/api.php (GÜNCELLE)
Kurallar: 100 request/hour per IP, 500/hour per user
3.2 - Signed URLs + Expiry
Laravel Signed URL kullanımı, 5 dakika TTL
Dosya: SongStreamController.php
Method: URL::temporarySignedRoute()
3.3 - Device Fingerprinting
FingerprintJS Pro integration, max 3 cihaz
Frontend: player/security/fingerprint.js (YENİ)
Backend: Modules/Muzibu/app/Services/DeviceFingerprintService.php (YENİ)
Migration: GEREK YOK (mevcut users tablosu yeterli)
3.4 - HLS AES-128 Encryption
FFmpeg ile HLS stream'leri şifrele
Dosya: ConvertToHLSJob.php (GÜNCELLE)
Key Storage: Redis (key rotation her 24 saatte)

Faz 4: Gelişmiş Özellikler (Düşük Öncelik)

4.1 - WaveSurfer.js Waveform Görselleştirme
Şarkı dalga formu görsel, seek interaktif
Library: WaveSurfer.js 7.x
Dosya: player/features/waveform.js (YENİ)
4.2 - 10-Band Equalizer
Web Audio API Equalizer, preset'ler (Rock, Pop, Jazz, vb.)
Dosya: player/features/equalizer.js (YENİ)
4.3 - Volume Normalization (ReplayGain)
-14 LUFS target, automatic gain adjustment
Backend: FFmpeg loudnorm filter
Dosya: ConvertToHLSJob.php (GÜNCELLE)

⚙️ Teknik Detaylar

Önerilen Dosya Yapısı (Modüler)

                
public/themes/muzibu/js/
├── muzibu-store.js (Alpine global store)
├── player/
│   ├── core/
│   │   ├── howler-manager.js      (Howler.js wrapper)
│   │   ├── hls-manager.js         (HLS.js wrapper)
│   │   ├── crossfade.js           (Crossfade logic)
│   │   └── audio-engine.js        (Unified audio interface)
│   ├── features/
│   │   ├── queue-manager.js       (Queue + drag&drop)
│   │   ├── auth-manager.js        (Login/Register modals)
│   │   ├── favorites-manager.js   (Like/unlike)
│   │   ├── waveform.js            (WaveSurfer.js)
│   │   └── equalizer.js           (10-band EQ)
│   ├── security/
│   │   ├── fingerprint.js         (FingerprintJS)
│   │   └── signed-url.js          (URL signing)
│   └── muzibu-player.js           (Main orchestrator, ~400 satır)
├── ui/
│   ├── muzibu-theme.js
│   └── muzibu-toast.js
└── utils/
    └── muzibu-cache.js
                
            

Backend Dosya Yapısı

                
Modules/Muzibu/app/
├── Http/
│   ├── Controllers/
│   │   └── Api/
│   │       ├── SongStreamController.php (MEVCUT - GÜNCELLE)
│   │       └── FavoritesController.php  (MEVCUT)
│   └── Middleware/
│       ├── StreamRateLimit.php          (YENİ)
│       └── DeviceLimitCheck.php         (YENİ)
├── Services/
│   ├── DeviceFingerprintService.php     (YENİ)
│   └── StreamSecurityService.php        (YENİ)
└── Jobs/
    ├── ConvertToHLSJob.php              (MEVCUT - GÜNCELLE)
    └── ProcessBulkSongHLSJob.php        (MEVCUT)
                
            

Migration İhtiyacı

✅ Migration GEREK YOK!

Mevcut users tablosu yeterli.

Device fingerprint Redis'te saklanacak (geçici data).

Premium kontrolü mevcut subscriptions tablosu ile yapılıyor.

🎯 Öncelik Sırası (Execution Order)

Sıra	Görev	Öncelik	Süre	Bağımlılık
1	isLiked() fonksiyon hatası düzeltme	URGENT	15 dk	Yok
2	500 Server Error debug (Stream endpoint)	URGENT	30 dk	Yok
3	Rate Limiting implementation	URGENT	1 saat	Yok
4	Signed URLs + Expiry	URGENT	45 dk	#3
5	Player modülerleştirme (Core)	HIGH	3 saat	Yok
6	Queue Manager ayrıştırma	MEDIUM	1.5 saat	#5
7	Device Fingerprinting	URGENT	2 saat	Yok
8	HLS AES-128 Encryption	URGENT	2 saat	#4
9	WaveSurfer.js integration	LOW	2 saat	#5
10	10-Band Equalizer	LOW	3 saat	#5

🎬 Sonuç & Sonraki Adımlar

📊 Özet

Toplam Görev: 10

Kritik/Urgent: 5 görev (~6.5 saat)

Orta Öncelik: 3 görev (~4.5 saat)

Düşük Öncelik: 2 görev (~5 saat)

Tahmini Toplam Süre: 16 saat

İlk 3 Adım (Hemen Başlanacak)

1. isLiked() Fonksiyon Hatası
Şu anda player çalışıyor ama like butonları hatalı
2. Stream Endpoint 500 Error
Şarkı çalma kısmen çalışmıyor, debug gerekli
3. Rate Limiting
Security'nin ilk katmanı, hemen uygulanmalı

⚠️ Önemli Notlar

Migration OLUŞTURMAYACAĞIZ (mevcut tablolar yeterli)
Tenant-Aware: Sadece Tenant 1001 (muzibu.com) için aktif
Users tablosuna DOKUNMAYACAĞIZ
Modülerleştirme AŞAMALI yapılacak (player çalışır durumda kalacak)
Her özellik için TEST yapılacak