Tek şarkı tıklansa bile albümle hareket eder, sonsuz kuyruk hiyerarşisi ile müzik hiç bitmez
Ne Değişecek?
🎵 Tek Şarkı Tıklasan Bile Albüm Çalar
Şu anda: Tek şarkıya tıkladığında sadece o şarkı çalar, biter.
Yeni: Tek şarkıya tıkladığında o şarkının albümü baştan çalar, album bitince benzeri müzikler devam eder (sonsuz).
👁️ Hangi Şarkı Çalıyor Belli Olacak
Çalan şarkının satırı renkli, animasyonlu gösterilecek (Spotify gibi).
Bonus: Albüm adı da gösterilecek (şu anda sadece şarkı adı var).
♾️ Müzik Hiç Bitmez
Album bitince → Aynı türdeki (Jazz, Pop vb.) şarkılar devam eder → O da bitmez, başa sarar.
Örnek: "Bir Zamanlar" şarkısına tıkladın → "Gece Yolcuları" albümü çalar → Album biter → Jazz şarkıları çalar (sonsuz).
📻 Radyolar Farklı Çalışır
Radyolarda album mantığı yok, direkt sonsuz devam eder.
Örnek: "Jazz Radyo" → Jazz şarkıları sonsuz döngüde.
Level 3 (Top): Search, Popular, Favorites, Artist, Playlist
↓
Level 2 (Middle): Album
↓
Level 1 (Bottom - Infinite): Genre ♾️
Referans: Context-Based Infinite Queue
Kullanıcı tek şarkıya tıkladığında:
album_id çek{type: 'album', id: album_id}⚠️ ÖNEMLİ: Album bitince tekrar album ÇALMASIN! Direkt Genre'ye geç.
Radyo tıklandığında:
{type: 'radio', id: radio_id} → Direkt infinite loop (No album step)
Radyo kendi içinde sonsuz döner, hiyerarşiye gitmez.
✅ Eklenenler:
Örnek Görünüm:
🎵 Bir Zamanlar
Gece Yolcuları
💡 NOT: Artist name YOK (sistem tek artist), sadece album adı eklenecek.
✅ Eklenenler:
Active State Örneği:
✅ Eklenenler:
✅ Özellikler:
⚡ Radyolarda album mantığı YOK! Tıklandığında direkt sonsuz çalar.
Visual:
• Row background: coral gradient
• Index → Animated waveform icon
• Song name: coral color + bold
CSS Classes:
bg-muzibu-coral/10 border-l-4 border-muzibu-coral
Visual:
• Badge: "🎵 Çalıyor"
• Cover: coral glow shadow
• Card: subtle border glow
CSS Classes:
shadow-xl shadow-muzibu-coral/30
Visual:
• Badge: "♾️ Çalıyor"
• Icon: pulse animation
• Background: animated gradient
CSS Animation:
animate-pulse
<div class="song-row group"
data-song-id="42"
data-album-id="12"
data-genre-id="9"
data-context-type="song">
<div class="index">1</div>
<img src="cover.jpg" class="cover">
<div class="song-info">
<h3 class="song-name">Bir Zamanlar</h3>
<!-- YENİ: Album adı -->
<p class="album-name text-slate-400">Gece Yolcuları</p>
</div>
<div class="duration">3:45</div>
<div class="actions">...</div>
</div><div class="album-card"
data-album-id="12"
data-context-type="album">
<div class="cover-wrapper">
<!-- YENİ: Playing badge -->
<span class="playing-badge hidden">🎵 Çalıyor</span>
<img src="album-cover.jpg">
<button class="play-btn">▶</button>
</div>
<h3>Gece Yolcuları</h3>
</div><div class="radio-card"
data-radio-id="5"
data-genre-id="9"
data-context-type="radio">
<div class="cover-wrapper">
<!-- Infinite badge -->
<span class="infinite-badge">♾️ Sonsuz</span>
<span class="playing-badge hidden">📻 Çalıyor</span>
<img src="radio-icon.jpg">
<button class="play-btn">▶</button>
</div>
<h3>Jazz Radyo</h3>
</div>function playSong(songElement) {
const songId = songElement.dataset.songId;
const albumId = songElement.dataset.albumId;
const genreId = songElement.dataset.genreId;
// YENİ: Auto-set album context
if (albumId) {
setPlayContext({
type: 'album',
id: albumId,
genreId: genreId,
nextContext: {type: 'genre', id: genreId} // Album bitince genre
});
}
// Play albümü baştan (not from clicked song!)
playAlbumFromStart(albumId);
// Update visual indicators
updatePlayingIndicators(songId, albumId);
}
function playRadio(radioElement) {
const radioId = radioElement.dataset.radioId;
const genreId = radioElement.dataset.genreId;
// Radyo: Direkt infinite loop (no album step)
setPlayContext({
type: 'radio',
id: radioId,
genreId: genreId,
infinite: true // Sonsuz döngü
});
playRadioInfinite(radioId, genreId);
}