📝 Plan Özeti (Herkes İçin)
Ne Yapacağız?
Muzibu'da şarkı, albüm, sanatçı gibi şeyleri gösteren "hazır parçalar" yapacağız.
Mesela bir albüm kartı var - bunu her yerde aynı şekilde göstermek için tek bir parça kodlayacağız.
Neden Gerekli?
Şu anda albüm kartı 15 farklı sayfada farklı kodlanmış. Bir yerde değişiklik yapınca 15 yeri değiştirmek gerekiyor.
Hazır parça yaparsan → Sadece 1 yerde değiştirirsin, otomatik her yere yansır.
📦 Kaç Parça Yapacağız?
Şarkı Parçası
Kart Parçası
(albüm, sanatçı vb.)
Popup Parçası
(sağ tık menü vb.)
Toplam
ŞARKI PARÇALARI (5 adet)
Şarkılar farklı yerlerde farklı görünüyor - her biri için ayrı parça
1. Şarkı Satırı (song-row)
Liste halinde şarkı gösterme - albüm içinde, playlist içinde
📍 Nerede Kullanılır?
- • Albüm detay sayfasında şarkı listesi
- • Playlist detay sayfasında şarkı listesi
- • Favoriler sayfasında (liste modu)
🎨 Nasıl Görünür?
💻 Kod Örneği
<!-- KULLANIM -->
<x-muzibu.song-row
:song="$song"
:index="1"
:showCover="true"
:showArtist="true"
/>
<!-- DOSYA: song-row.blade.php -->
<div class="flex items-center gap-3 p-2 hover:bg-white/5 rounded group">
{{-- Sıra No / Play Icon --}}
<span class="w-6 text-center text-slate-500">
<span class="group-hover:hidden">{{ $index }}</span>
<i class="fas fa-play hidden group-hover:block text-white"></i>
</span>
{{-- Kapak Resmi --}}
@if($showCover)
<img src="{{ $song->cover }}" class="w-10 h-10 rounded">
@endif
{{-- Şarkı Adı + Sanatçı --}}
<div class="flex-1">
<div class="text-white">{{ $song->title }}</div>
@if($showArtist)
<div class="text-slate-400 text-sm">{{ $song->artist->name }}</div>
@endif
</div>
{{-- Süre --}}
<span class="text-slate-500">{{ $song->duration }}</span>
{{-- Sağ Tık Menü --}}
<button class="opacity-0 group-hover:opacity-100">⋮</button>
</div>🖱️ Sağ Tıklayınca Ne Çıkar?
2. Şarkı Kartı (song-card)
Kare şekilde büyük kapak resmi - grid görünümü
📍 Nerede Kullanılır?
- • Favoriler sayfasında (grid modu)
- • Anasayfada "Popüler Şarkılar"
- • Arama sonuçlarında
🎨 Nasıl Görünür?
💻 Kod Örneği
<!-- KULLANIM -->
<x-muzibu.song-card :song="$song" />
<!-- DOSYA: song-card.blade.php -->
<div class="group cursor-pointer">
{{-- Kapak Resmi (Kare) --}}
<div class="relative aspect-square bg-slate-800 rounded-lg overflow-hidden mb-3">
<img src="{{ $song->cover }}" class="w-full h-full object-cover">
{{-- Play Butonu (Hover'da Görünür) --}}
<button class="absolute bottom-2 right-2 w-12 h-12 bg-muzibu-coral rounded-full
flex items-center justify-center opacity-0 group-hover:opacity-100
transition transform translate-y-2 group-hover:translate-y-0">
<i class="fas fa-play text-white"></i>
</button>
{{-- 3 Nokta Menü (Hover'da Görünür) --}}
<button class="absolute top-2 right-2 opacity-0 group-hover:opacity-100">
<i class="fas fa-ellipsis-v text-white"></i>
</button>
</div>
{{-- Şarkı Bilgileri --}}
<h3 class="text-white font-semibold mb-1 truncate">{{ $song->title }}</h3>
<p class="text-slate-400 text-sm truncate">{{ $song->artist->name }}</p>
</div>3. Sıra Parçası
Çalma sırası overlay'inde küçük şarkı kartı
4. Sidebar Parçası
Sağ sidebar'da önizleme şarkı satırı
5. Detay Sayfası
Tek şarkı detay sayfası (isteğe bağlı)
ALBÜM & PLAYLIST PARÇALARI (5 adet)
Albüm ve Playlist benzer görünüyor - aynı parçaları kullanacaklar
Kart Parçası
Ne İşe Yarar?
Albüm veya Playlist'i kare kart şeklinde gösterir. Anasayfa grid'lerinde, albüm listesinde kullanılır.
Nasıl Görünür?
Kod Örneği
<x-muzibu.album-card :album="$album" />
<x-muzibu.playlist-card :playlist="$playlist" />
{{-- Aynı tasarım, farklı veri --}}Detay Sayfası Parçası
Ne İşe Yarar?
Albüm/Playlist detay sayfasında büyük kapak + bilgiler. Altında şarkı listesi gösterilir.
Nasıl Görünür?
Kod Örneği
<x-muzibu.album-hero :album="$album" />
{{-- Altında şarkı listesi --}}
@foreach($album->songs as $song)
<x-muzibu.song-row :song="$song" />
@endforeachEKSTRA: Playlist Hızlı Erişim Kartı
Ne İşe Yarar?
Anasayfada Spotify tarzı yatay playlist kartları (2x4 grid).
Nasıl Görünür?
Kod Örneği
<!-- Anasayfa 2x4 grid -->
<div class="grid grid-cols-2 gap-3">
@foreach($playlists->take(8) as $playlist)
<x-muzibu.playlist-quick-card
:playlist="$playlist"
/>
@endforeach
</div>SANATÇI, TÜR, SEKTÖR PARÇALARI (6 adet)
Hepsi benzer yapıda - kart + detay sayfası
Sanatçı (Artist)
Fark Ne?
Fotoğraf yuvarlak gösterilir (circular)
Görünüm
Kod
<x-muzibu.artist-card
:artist="$artist"
/>Tür (Genre)
Fark Ne?
Resim yok, gradient arkaplan + emoji/ikon
Görünüm
Kod
<x-muzibu.genre-card
:genre="$genre"
/>Sektör (Sector)
Fark Ne?
Türe benzer ama farklı renkler/ikonlar
Görünüm
Kod
<x-muzibu.sector-card
:sector="$sector"
/>RADYO (1 adet)
Sadece kart - detay sayfası yok, tıklayınca direkt çalar
Ne İşe Yarar?
Radyo kanalını gösterir. Tıklayınca canlı yayını başlatır.
Detay Sayfası Var mı?
❌ YOK!
Radyo'ya tıklayınca direkt çalmaya başlayacak. Detay sayfasına gerek yok.
Kod Örneği
<!-- Radyo kartı tıklayınca çalar -->
<x-muzibu.radio-card
:radio="$radio"
@click="playRadio({{ $radio->id }})"
/>
<!-- radio-card.blade.php -->
<div class="group cursor-pointer">
<div class="aspect-square bg-slate-800 rounded-lg
relative overflow-hidden">
<img src="{{ $radio->logo }}">
{{-- PLAY butonu --}}
<div class="absolute inset-0 bg-black/50
flex items-center justify-center
opacity-0 group-hover:opacity-100">
<i class="fas fa-play text-white text-4xl"></i>
</div>
</div>
<h3 class="text-white mt-2">{{ $radio->name }}</h3>
</div>SAĞ TIK MENÜ (1 Evrensel Parça)
Her şeyde aynı menü kullanılacak - içindekiler değişecek
Nasıl Çalışır?
- Desktop: Sağ tık yapınca menü açılır
- Mobile: 500ms basılı tut → titreşim + menü açılır
- İçerik: Tıklanan şeye göre farklı seçenekler
Kod Nasıl Kullanılır?
<!-- Şarkı kartına ekle -->
<div @contextmenu.prevent="
showContextMenu($event, 'song', {{ $song->id }})
">
Şarkı kartı...
</div>
<!-- Albüm kartına ekle -->
<div @contextmenu.prevent="
showContextMenu($event, 'album', {{ $album->id }})
">
Albüm kartı...
</div>Menüde Ne Çıkar?
Şarkı için:
Albüm için:
Playlist için:
POPUP VE OVERLAY PARÇALARI (10 adet)
Ekranın üstüne çıkan pencereler ve paneller
Popup Pencereler (Modals)
Puan Verme Popup'ı
Şarkıya 1-5 yıldız puan vermek için
Playlist Seçme Popup'ı
"Playlist'e ekle" tıklayınca hangi playlist'e eklenecek seçmek için
Yeni Playlist Popup'ı
Yeni playlist oluşturmak için
Yan Paneller (Overlays)
Çalma Sırası Paneli
Sağdan açılır - şu an çalan + sıradakiler
Sırada: Şarkı 2, 3, 4...
Şarkı Sözleri Paneli
Şarkı çalarken sözleri gösterir
HANGİ SIRADA YAPILACAK?
Önemli olandan başlayacağız
İLK AŞAMA (4-5 gün)
En çok kullanılan parçalar - önce bunlar
Şarkı Parçaları (5)
- ✓ Şarkı Satırı
- ✓ Şarkı Kartı
- ✓ Sıra Parçası
- ✓ Sidebar Parçası
- ✓ Sağ Tık Menü
Albüm & Playlist (4)
- ✓ Albüm Kartı
- ✓ Albüm Detay
- ✓ Playlist Kartı
- ✓ Playlist Detay
İKİNCİ AŞAMA (2-3 gün)
Sanatçı, Tür, Sektör
- ✓ Sanatçı Kartı + Detay
- ✓ Tür Kartı + Detay
- ✓ Sektör Kartı + Detay
ÜÇÜNCÜ AŞAMA (2-3 gün)
Radyo, Popup'lar, Ekstra özellikler
Basit Parçalar
- ✓ Radyo Kartı
- ✓ Favoriler Grid
- ✓ Arama Sonuçları
Popup & Paneller
- ✓ Puan Verme
- ✓ Playlist Seçme
- ✓ Çalma Sırası Paneli
- ✓ Şarkı Sözleri Paneli
TOPLAM SÜRE
~27 parça kodlanacak
HEMEN BAŞLAMAK İÇİN
Yeni Git Branch Aç
git checkout -b feature/muzibu-components
Component Klasörü Oluştur
resources/views/components/muzibu/
İlk Parçayı Yap
song-row.blade.php ile başla - En çok kullanılan parça
Test Et
Albüm detay sayfasında (albums/show.blade.php) şarkı listesinde dene