queue-overlay.blade.php x-for döngüsü düzeltme planı
Müzik çalar kuyruğunda (queue overlay) aynı şarkı birden fazla kez eklendiğinde veya bazı şarkıların kimlik numarası (ID) eksik olduğunda, sistem karışıyor ve liste düzgün görüntülenemiyor. Bu durum özellikle şarkı sıralaması değiştirilirken sorunlara yol açıyor.
song_id birden fazla item'da kullanılıyor
song?.song_id bazen undefined dönüyor
queue-overlay.blade.php
resources/views/themes/muzibu/components/
player-core.js
public/themes/muzibu/js/player/core/
Mevcut fonksiyon sadece null/undefined filtreliyor. Duplicate song_id'leri de filtrelemeli.
Mevcut Kod:
cleanQueue(songs) {
if (!Array.isArray(songs)) return [];
return songs.filter(song =>
song !== null &&
song !== undefined &&
typeof song === 'object'
);
}Yeni Kod:
cleanQueue(songs) {
if (!Array.isArray(songs)) return [];
const seen = new Set();
return songs.filter(song => {
if (!song || typeof song !== 'object')
return false;
const id = song.song_id || song.id;
if (!id || seen.has(id)) return false;
seen.add(id);
return true;
});
}Ne Yapacak: Queue'ya eklenen şarkılar arasında duplicate varsa, sadece ilkini tutacak.
Unique key için index'i de dahil ederek her zaman benzersiz key garantisi sağla.
Mevcut:
:key="song?.song_id ||
('queue-fallback-' + index)"Yeni:
:key="'queue-' + index + '-' +
(song?.song_id || 'x')"Neden: Index her zaman unique, song_id opsiyonel. Bu kombinasyon asla duplicate olamaz.
Sortable.js DOM değişikliği yapıyor, sonra Alpine de yapıyor - çakışma oluyor. Mevcut fix'i güçlendir.
onEnd: (evt) => {
$refs.queueList.classList.remove('queue-dragging');
if (evt.oldIndex === evt.newIndex) return;
// Sortable'ın DOM değişikliğini geri al
// ... mevcut kod ...
// Queue güncellemesini microtask'a taşı
queueMicrotask(() => {
const movedSong = queue[evt.oldIndex];
const newQueue = [...queue];
newQueue.splice(evt.oldIndex, 1);
newQueue.splice(evt.newIndex, 0, movedSong);
// ... queueIndex güncelleme ...
queue = newQueue;
});
}
Alternatif: requestAnimationFrame kullanarak DOM senkronizasyonunu güvence altına al.