← Tüm Özelliklere Dön

➕ Add to Queue

🔴 MEVCUT SORUN

Kod satır 1310-1313: addToQueue() sadece toast gösteriyor!

// ❌ PLACEHOLDER
addToQueue(type, id) {
    this.showToast('Queue\'ya eklendi!', 'success');
    // TODO: Gerçek implementasyon
}

✅ ÇÖZÜM

API'den şarkı/albüm/playlist fetch et ve queue'ya ekle!

💻 İmplementasyon

1. Add to Queue (Tek Şarkı)

async addToQueue(type, id) {
    try {
        if (type === 'song') {
            // Tek şarkı ekle
            const response = await fetch(`/api/muzibu/songs/${id}`);
            const song = await response.json();

            this.queue.push(song);
            this.showToast(`"${song.song_title.tr}" queue'ya eklendi`, 'success');

            console.log('➕ Song added to queue:', song.song_title);
        }
        else if (type === 'album') {
            // Albümdeki tüm şarkıları ekle
            await this.addAlbumToQueue(id);
        }
        else if (type === 'playlist') {
            // Playlist'teki tüm şarkıları ekle
            await this.addPlaylistToQueue(id);
        }
    } catch (error) {
        console.error('Add to queue failed:', error);
        this.showToast('Queue\'ya eklenemedi', 'error');
    }
}

2. Add Album to Queue

async addAlbumToQueue(albumId) {
    try {
        const response = await fetch(`/api/muzibu/albums/${albumId}`);
        const album = await response.json();

        // Albümdeki şarkıları queue'ya ekle
        album.songs.forEach(song => {
            this.queue.push(song);
        });

        this.showToast(
            `${album.songs.length} şarkı queue'ya eklendi (${album.album_title.tr})`,
            'success'
        );

        console.log('➕ Album added to queue:', album.album_title, album.songs.length, 'songs');
    } catch (error) {
        console.error('Add album to queue failed:', error);
        this.showToast('Albüm eklenemedi', 'error');
    }
}

3. Add Playlist to Queue

async addPlaylistToQueue(playlistId) {
    try {
        const response = await fetch(`/api/muzibu/playlists/${playlistId}`);
        const playlist = await response.json();

        // Playlist'teki şarkıları queue'ya ekle
        playlist.songs.forEach(song => {
            this.queue.push(song);
        });

        this.showToast(
            `${playlist.songs.length} şarkı queue'ya eklendi (${playlist.playlist_title.tr})`,
            'success'
        );

        console.log('➕ Playlist added to queue:', playlist.playlist_title, playlist.songs.length, 'songs');
    } catch (error) {
        console.error('Add playlist to queue failed:', error);
        this.showToast('Playlist eklenemedi', 'error');
    }
}

4. UI - Add to Queue Butonu

<!-- Şarkı kartında -->
<button @click="addToQueue('song', song.song_id)"
        class="text-gray-400 hover:text-white"
        title="Queue'ya Ekle">
    <i class="fas fa-plus"></i>
</button>

<!-- Albüm sayfasında -->
<button @click="addToQueue('album', album.album_id)"
        class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg">
    <i class="fas fa-plus"></i> Queue'ya Ekle
</button>

<!-- Playlist sayfasında -->
<button @click="addToQueue('playlist', playlist.playlist_id)"
        class="bg-green-500 hover:bg-green-600 text-black px-4 py-2 rounded-lg font-bold">
    <i class="fas fa-plus"></i> Tümünü Queue'ya Ekle
</button>

5. Context Menu (Right Click)

<!-- Şarkı kartı üzerine sağ tık -->
<div @contextmenu.prevent="showContextMenu($event, song)"
     class="song-card">
    <!-- ... song card içeriği -->
</div>

<!-- Context menu -->
<div x-show="contextMenuVisible"
     x-transition
     :style="`left: ${contextMenuX}px; top: ${contextMenuY}px`"
     class="fixed bg-gray-900 rounded-lg shadow-xl border border-gray-700 py-2 z-50">

    <button @click="addToQueue('song', contextMenuSong.song_id); contextMenuVisible = false"
            class="w-full text-left px-4 py-2 hover:bg-gray-800">
        <i class="fas fa-plus mr-2"></i> Queue'ya Ekle
    </button>

    <button @click="playSong(contextMenuSong.song_id); contextMenuVisible = false"
            class="w-full text-left px-4 py-2 hover:bg-gray-800">
        <i class="fas fa-play mr-2"></i> Şimdi Çal
    </button>

    <button @click="toggleFavorite(contextMenuSong.song_id); contextMenuVisible = false"
            class="w-full text-left px-4 py-2 hover:bg-gray-800">
        <i class="fas fa-heart mr-2"></i> Favorilere Ekle
    </button>
</div>

🎯 Kullanım Senaryoları

Senaryo 1: Albüm Keşfi

Senaryo 2: Playlist Mix

✅ Avantajlar

🚀 İleri Seviye: Play Next

// Queue'nun başına ekle (sonraki çalacak)
addToQueueNext(type, id) {
    // ... şarkıyı/albümü fetch et

    // Queue'nun başına ekle (currentIndex + 1)
    this.queue.splice(this.queueIndex + 1, 0, ...songs);

    this.showToast('Sonraki sırada çalınacak', 'success');
}

← Tüm Özelliklere Dön