🎵 Muzibu Favoriler & Playlist Yönetim Sistemi

📅 Tarih: 2025-11-29 | 🎯 Tenant: muzibu.com (Tenant 1001) | 👤 Talep: Kapsamlı favoriler ve playlist yönetimi

📊 Mevcut Durum Analizi

✅ Halihazırda Çalışan Sistemler

✅ MEVCUT

Favorite Modeli (Polymorphic)

Herhangi bir içeriğe favori eklenebilir yapı hazır

✅ MEVCUT

HasFavorites Trait

toggleFavorite, isFavoritedBy, favoritesCount methodları

✅ MEVCUT

Favorite API

/api/favorites/toggle endpoint çalışıyor

✅ MEVCUT

Favorite Button Component

Alpine.js ile hazır component (Song için çalışıyor)

✅ MEVCUT

Playlist Modeli

is_system field ile admin/user playlist ayrımı

✅ MEVCUT

Playlist-Song Pivot

position field ile sıralama desteği

❌ Eksik Sistemler

❌ EKSİK

Album Favorileri

Album modeli HasFavorites trait kullanmıyor

❌ EKSİK

Playlist Favorileri

Playlist modeli HasFavorites trait kullanmıyor

❌ EKSİK

Playlist Kopyalama

Sistem playlistlerini user playlist olarak kopyalama yok

❌ EKSİK

Anında Playlist Oluşturma

Şarkı ile birlikte anında playlist oluşturma API yok

❌ EKSİK

Şarkı Ekleme API

Mevcut playlist'e şarkı ekleme endpoint yok

❌ EKSİK

Frontend UI

Playlist işlemleri için dropdown menü ve favoriler sayfası yok

🔧 Backend Geliştirme Planı

1. Model Güncellemeleri Kritik

Ne Yapılacak: Album ve Playlist modellerine HasFavorites trait eklenecek

  • Album Model: use HasFavorites trait'i ekle
  • Playlist Model: use HasFavorites trait'i ekle
  • Test: Her iki model için toggleFavorite methodunu test et

Sonuç: Album ve Playlist favorilere eklenebilir hale gelecek

2. Playlist Kopyalama Servisi Yüksek

Ne Yapılacak: Sistem playlistlerini kullanıcı playlistine kopyalayan servis

  • PlaylistService: clonePlaylist() methodu ekle
  • Mantık: Sistem playlist verilerini kopyala, is_system = false yap, user_id set et
  • Şarkı İlişkileri: muzibu_playlist_song pivot tablosundaki tüm şarkıları kopyala (position korunacak)
  • Görsel: Cover image kopyalanacak (media_id)

Beklenen Sonuç: Kullanıcılar sistem playlistlerini kendi hesaplarına kopyalayıp düzenleyebilecek

3. Anında Playlist Oluşturma Servisi Yüksek

Ne Yapılacak: Tek adımda playlist oluştur + şarkı ekle

  • PlaylistService: createPlaylistWithSongs() methodu
  • Parametreler: title, song_ids[], user_id, description (opsiyonel)
  • Mantık: Playlist oluştur → Şarkıları position sırasıyla ekle
  • Validasyon: Şarkı ID'lerinin geçerli olduğunu kontrol et

Beklenen Sonuç: Kullanıcı anında yeni playlist oluşturup şarkı ekleyebilecek

4. Mevcut Playlist'e Şarkı Ekleme Orta

Ne Yapılacak: Kullanıcı kendi playlistine şarkı ekleyebilecek

  • PlaylistService: addSongToPlaylist() methodu
  • Mantık: Playlist sahibi kontrolü → Şarkı zaten varsa skip → Position hesapla (mevcut max + 1)
  • Güvenlik: Sadece playlist sahibi ekleyebilir (user_id kontrolü)
  • Pivot: muzibu_playlist_song tablosuna insert

Beklenen Sonuç: Kullanıcılar playlistlerine şarkı ekleyebilecek

5. User Playlist CRUD İşlemleri Orta

Ne Yapılacak: Kullanıcı kendi playlistlerini yönetebilecek

  • Create: Yeni playlist oluşturma (title, description)
  • Update: Playlist bilgilerini güncelleme (sadece sahibi)
  • Delete: Playlist silme (soft delete)
  • Reorder: Playlist içindeki şarkı sıralamasını değiştirme (position update)
  • Remove Song: Playlist'ten şarkı çıkarma

Beklenen Sonuç: Tam fonksiyonel playlist yönetimi

🔌 API Endpoint'leri

Not: Tüm endpoint'ler auth:sanctum middleware kullanacak (login zorunlu)

Favoriler API

POST /api/favorites/toggle
Body: { "model_class": "Modules\\Muzibu\\App\\Models\\Song", "model_id": 123 } Response: { "success": true, "message": "Favorilere eklendi", "data": { "action": "added", "is_favorited": true, "favorites_count": 42 } }
GET /api/favorites/my-favorites
Query: ?model_type=Modules\\Muzibu\\App\\Models\\Song&per_page=20 Response: { "data": [ { "id": 1, "favoritable": { ... }, "created_at": "2025-11-29T10:00:00" } ], "links": { ... }, "meta": { ... } }

Playlist API (Yeni)

POST /api/playlists/clone
Body: { "playlist_id": 5 } Response: { "success": true, "message": "Playlist kopyalandı", "data": { "playlist_id": 123, "title": "Rock Classics (Kopyam)", "song_count": 25 } }
POST /api/playlists/quick-create
Body: { "title": "Çalışma Müzikleri", "description": "Konsantre olurken dinlediklerim", "song_ids": [1, 5, 8, 12] } Response: { "success": true, "message": "Playlist oluşturuldu", "data": { "playlist_id": 124, "title": "Çalışma Müzikleri", "song_count": 4 } }
POST /api/playlists/{id}/add-song
Body: { "song_id": 42 } Response: { "success": true, "message": "Şarkı playlist'e eklendi", "data": { "song_id": 42, "position": 26 } }
DELETE /api/playlists/{id}/remove-song/{song_id}
PUT /api/playlists/{id}/reorder
Body: { "song_positions": [ { "song_id": 1, "position": 1 }, { "song_id": 5, "position": 2 }, { "song_id": 8, "position": 3 } ] }
GET /api/playlists/my-playlists
Response: Kullanıcının oluşturduğu tüm playlistler (is_system = false)

🎨 Frontend Geliştirme Planı

1. Favorite Butonları Güncellemesi Kritik

Ne Yapılacak: Mevcut favorite-button component'i Album ve Playlist için kullan

  • Ana Sayfa: Her albüm/playlist kartına favorite butonu ekle
  • Detay Sayfaları: Album/Playlist detay sayfalarına favorite butonu
  • Component: Mevcut favorite-button component zaten hazır (polymorphic)
  • Kullanım: model prop'unu Album veya Playlist instance olarak gönder
<x-common.favorite-button :model="$album" size="md" /> <x-common.favorite-button :model="$playlist" size="lg" />

2. Playlist İşlemleri Dropdown Menü Yüksek

Ne Yapılacak: Her şarkının yanında 3 nokta menü ekle

  • Menü Seçenekleri:
    • ➕ Playlist'e Ekle (kullanıcı playlistlerini listele)
    • ⭐ Yeni Playlist Oluştur (modal açılır)
    • ❤️ Favorilere Ekle/Çıkar
    • 📋 Kuyruk'a Ekle (mevcut queue sistemi)
  • Tasarım: Alpine.js dropdown (Spotify tarzı)
  • Konum: Ana sayfa, playlist detay, album detay, arama sonuçları

3. Playlist Kopyalama Butonu Yüksek

Ne Yapılacak: Sistem playlistlerinde "Kopyala" butonu

  • Konum: Playlist detay sayfasında (sadece is_system = true için göster)
  • Davranış: Butona tıkla → API çağır → Toast bildirimi göster
  • Bildirim: "✅ Playlist kopyalandı! Kendi playlistlerim sayfasına git"

4. Anında Playlist Oluşturma Modal Orta

Ne Yapılacak: Şarkı menüsünden "Yeni Playlist Oluştur" seçince modal açılır

  • Form Alanları: Playlist adı (zorunlu), Açıklama (opsiyonel)
  • Davranış: Form gönder → API çağır (şarkı ID'si dahil) → Modal kapat → Toast göster
  • Tasarım: Modal popup (Alpine.js x-show)

5. Favorilerim Sayfası Orta

Ne Yapılacak: Kullanıcının tüm favorilerini listeleyen sayfa

  • URL: /muzibu/favorites
  • Tab Sistemi: Tümü | Şarkılar | Albümler | Playlistler
  • Görünüm: Grid layout (ana sayfadaki gibi)
  • Fonksiyonlar: Her item için play butonu + favoriden çıkar butonu
  • Pagination: Infinite scroll veya sayfalama

6. Playlistlerim Sayfası Orta

Ne Yapılacak: Kullanıcının kendi oluşturduğu playlistler

  • URL: /muzibu/my-playlists
  • Görünüm: Grid layout + "Yeni Playlist Oluştur" butonu
  • Düzenleme: Her playlist için dropdown (Düzenle | Sil)
  • Detay: Playlist'e tıkla → Detay sayfasına git (şarkı listesi + düzenleme seçenekleri)

🎭 UI/UX Tasarım Detayları

Şarkı Kartı - İşlemler Menüsü

[Şarkı Adı] - [Sanatçı] [❤️] [⋮] ↓ [Dropdown Menü] ├─ ➕ Playlist'e Ekle │ └─ [Playlistlerim Listesi] ├─ ⭐ Yeni Playlist Oluştur ├─ ❤️ Favorilere Ekle └─ 📋 Kuyruk'a Ekle

Davranış: Alpine.js @click.away ile dropdown kapat

Playlist Kartı - Sistem/User Ayrımı

[Playlist Cover] [Playlist Adı] [Şarkı Sayısı] • Sistem Playlist ise: [❤️ Favorilere Ekle] [📋 Kopyala] • User Playlist ise: [❤️ Favorilere Ekle] [✏️ Düzenle] [🗑️ Sil]

Gösterge: Sistem playlistlerde rozet göster (🎵 Sistem Playlist)

Favorilerim Sayfası - Tab Sistemi

┌─────────────────────────────────────────────┐ │ Favorilerim │ ├─────────────────────────────────────────────┤ │ [Tümü] [Şarkılar] [Albümler] [Playlistler] │ ├─────────────────────────────────────────────┤ │ │ │ [Kart] [Kart] [Kart] [Kart] │ │ [Kart] [Kart] [Kart] [Kart] │ │ │ └─────────────────────────────────────────────┘

Boş Durum: "Henüz favori eklemediniz" mesajı + keşfet butonu

💾 Database Değişiklikleri

✅ Migration Gerekmez! Mevcut yapı zaten yeterli:
  • ✅ favorites tablosu polymorphic yapıda (her model favoriye eklenebilir)
  • ✅ muzibu_playlists tablosunda user_id ve is_system field'leri var
  • ✅ muzibu_playlist_song pivot tablosunda position field var
İsteğe Bağlı İyileştirmeler:
  • Playlist cover image (media_id) zaten var
  • Playlist is_public field var (gizli playlist desteği)
  • Soft delete var (silinen playlist'ler geri getirilebilir)

⏱️ Geliştirme Timeline

Faz 1: Model & Backend (2-3 saat)

  • Album ve Playlist modellerine HasFavorites trait ekle
  • PlaylistService: clonePlaylist() methodu
  • PlaylistService: createPlaylistWithSongs() methodu
  • PlaylistService: addSongToPlaylist() methodu

Faz 2: API Routes & Controllers (2 saat)

  • API endpoint'lerini oluştur (routes/api.php)
  • PlaylistController: clone, quickCreate, addSong methodları
  • Validasyon kuralları ekle
  • API testleri (Postman/Insomnia)

Faz 3: Frontend Components (3-4 saat)

  • Favorite butonlarını album/playlist'lere ekle
  • Şarkı işlemleri dropdown menü component
  • Anında playlist oluşturma modal
  • Alpine.js store entegrasyonu

Faz 4: Sayfalar (3 saat)

  • Favorilerim sayfası (tab sistemi ile)
  • Playlistlerim sayfası
  • Playlist detay sayfası düzenleme eklentileri

Faz 5: Test & Polish (2 saat)

  • End-to-end test (tüm işlevler)
  • Responsive kontrol
  • Toast bildirimleri
  • Loading state'leri
  • Error handling
Toplam Tahmini Süre: 12-14 saat (adım adım uygulama ile)

⚠️ Önemli Notlar

Tenant Aware Sistemdir!
  • Bu sistem SADECE Tenant 1001 (muzibu.com) için geçerlidir
  • Song, Album, Playlist modelleri tenant database'de
  • Favorites tablosu tenant database'de
  • Users tablosu central database'de (user_id foreign key)
Güvenlik:
  • Playlist düzenleme/silme: Sadece playlist sahibi (user_id kontrolü)
  • Sistem playlistler: is_system = true olanlar düzenlenemez/silinemez
  • API endpoint'leri: auth:sanctum middleware ile korunacak
  • CSRF token: Alpine.js fetch isteklerinde meta tag'tan alınacak
Performans:
  • Favorite sayıları: withCount() ile eager load
  • Playlist şarkıları: songs() relation eager load
  • Cache: FavoriteService cache temizliği otomatik
  • Pagination: Tüm listelerde sayfalama kullan

🚀 Başlangıç Adımları

1. Backend - Model Güncellemeleri

# Album.php use Modules\Favorite\App\Traits\HasFavorites; class Album extends BaseModel { use HasFavorites; // ← Bu trait'i ekle } # Playlist.php use Modules\Favorite\App\Traits\HasFavorites; class Playlist extends BaseModel { use HasFavorites; // ← Bu trait'i ekle }

2. Backend - PlaylistService Genişletme

# Modules/Muzibu/app/Services/PlaylistService.php public function clonePlaylist(int $playlistId, int $userId): array { // 1. Sistem playlist'i bul // 2. Yeni user playlist oluştur (is_system = false) // 3. Şarkıları kopyala (pivot tablo) // 4. Cover image kopyala // 5. Return new playlist } public function createPlaylistWithSongs(array $data, int $userId): array { // 1. Playlist oluştur // 2. Şarkıları ekle (position ile) // 3. Return playlist }

3. Frontend - Favorite Butonları Ekle

<!-- Ana sayfa - Album kartı --> <x-common.favorite-button :model="$album" size="md" iconOnly="true" /> <!-- Ana sayfa - Playlist kartı --> <x-common.favorite-button :model="$playlist" size="md" iconOnly="true" /> <!-- Detay sayfası --> <x-common.favorite-button :model="$album" size="lg" showText="true" />

4. Frontend - Şarkı İşlemleri Menü Component

<!-- resources/views/components/muzibu/song-actions-menu.blade.php --> @props(['song' => null]) <div x-data="{ open: false }" @click.away="open = false" class="relative"> <button @click="open = !open"> <i class="fas fa-ellipsis-v"></i> </button> <div x-show="open" class="dropdown-menu"> <button @click="addToPlaylist({{ $song->id }})"> ➕ Playlist'e Ekle </button> <button @click="createNewPlaylist({{ $song->id }})"> ⭐ Yeni Playlist </button> <button @click="toggleFavorite({{ $song->id }})"> ❤️ Favorilere Ekle </button> </div> </div>