Favori İkonları Geç Yükleniyor

Muzibu Frontend - Kalp İkonları Yükleme Sorunu

Favori Sistemi Alpine.js Store Performance

📝 Basit Anlatım (Herkes İçin)

Sorun Nedir?

Muzibu'da şarkı, albüm veya playlist kartlarının üzerine geldiğinizde (hover) sağ üstte iki ikon çıkıyor:

  • 3 nokta (menu) → Anında görünüyor ✅
  • Kalp (favori) → Geç yükleniyor, bazen boş kalıyor ❌

Kullanıcı deneyimi açısından kötü görünüyor: "Bu şarkı favorimde mi değil mi?" sorusu yanıtsız kalıyor.

Neden Oluyor?

Sistem favori listesini yüklemeyi unutuyor!

Şu anki durum (Yanlış):

  1. Sayfa açılıyor → Favori listesi BOŞ
  2. Kartların üzerine geliyorsunuz → İkonlar görünüyor ama YANLIŞ (boş kalp)
  3. API'den veri gelmeden önce sayfa render ediliyor

Nasıl Düzeltilecek?

Sistem açılırken otomatik olarak favori listesini yükleyeceğiz:

Düzeltme sonrası (Doğru):

  1. Sayfa açılıyor → API'den favori listesi çekiliyor
  2. Favori listesi yüklendi → İkonlar DOĞRU görünüyor (dolu/boş kalp)
  3. Kullanıcı kartın üzerine geldiğinde → Doğru durum anında görünüyor

Sonuç: 3 nokta ve kalp ikonu aynı anda, anında görünecek!

🔧 Teknik Detaylar (Geliştiriciler İçin)

Kök Neden (Root Cause)

favorites.js dosyasında loadFavorites() metodu tanımlanmış ama hiçbir zaman çağrılmıyor!

📁 public/themes/muzibu/js/player/features/favorites.js:140-158

async loadFavorites() {
    try {
        const response = await fetch('/api/favorites/list', {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.getAttribute('content') || ''
            }
        });

        if (response.ok) {
            const data = await response.json();
            if (data.success && Array.isArray(data.data)) {
                this.favorites = data.data; // ← Buraya gelmiyor!
            }
        }
    } catch (error) {
        console.error('Failed to load favorites:', error);
    }
}

Sorun:

  • Store initialize olurken favorites: [] boş array ile başlıyor
  • loadFavorites() metodu hiçbir event listener veya init fonksiyonunda çağrılmıyor
  • Blade template'lerde $store.favorites.isFavorite() çağrıldığında her zaman false dönüyor

Şu Anki Akış (Hatalı)

1

Sayfa yükleniyor

Alpine.js initialize oluyor

2

Favorites store oluşturuluyor

⚠️ favorites: [] boş array

3

Blade template render ediliyor

Card'larda x-bind:class="$store.favorites.isFavorite(...)" çalışıyor

4

İkonlar render ediliyor

❌ Tüm kalpler far fa-heart (boş) olarak render ediliyor

loadFavorites() asla çağrılmıyor!

Store'da favorites sonsuza kadar boş kalıyor

Kod Analizi

📁 resources/views/components/muzibu/song-card.blade.php:119-126

<!-- Favorite Button -->
<button x-on:click.stop.prevent="$store.favorites.toggle('song', {{ $song->id }})"
        class="w-8 h-8 bg-black/60 hover:bg-black/80 rounded-full"
        x-bind:class="$store.favorites.isFavorite('song', {{ $song->id }}) ? 'text-muzibu-coral' : ''">
    <i class="text-sm"
       x-bind:class="$store.favorites.isFavorite('song', {{ $song->id }}) ? 'fas fa-heart' : 'far fa-heart'"></i>
</button>

$store.favorites.isFavorite() her zaman false dönüyor çünkü favorites array'i boş!

📁 public/themes/muzibu/js/player/features/favorites.js:8-10

Alpine.store('favorites', {
    favorites: [],  // ← BOŞ başlıyor, hiç dolmuyor!
    loading: false,
    // ...
});

📁 public/themes/muzibu/js/player/features/favorites.js:91-93

isFavorite(type, id) {
    return this.favorites.includes(`${type}-${id}`);
    // favorites = [] → Her zaman false!
}

Çözüm

Alpine.js store initialize olduktan hemen sonra loadFavorites() metodunu çağırmalıyız.

✅ Düzeltilmiş Kod (favorites.js sonuna eklenecek)

// Alpine.js initialized sonrası favori listesini otomatik yükle
document.addEventListener('alpine:initialized', () => {
    const favoritesStore = Alpine.store('favorites');

    // Auth user varsa favorileri yükle
    if (window.muzibuPlayerConfig?.isLoggedIn) {
        favoritesStore.loadFavorites();
    }
});

Neden Bu Çözüm?

  • alpine:initialized eventi ile Alpine.js tamamen hazır olduktan sonra çalışıyor
  • Auth user kontrolü ile gereksiz API call önleniyor (guest user'lar için)
  • Async loading ile sayfa render'ı bloklanmıyor
  • İlk render'da favori durumu doğru gösterilecek

Düzeltme Sonrası Akış (Doğru)

1

Sayfa yükleniyor

Alpine.js initialize oluyor

2

Favorites store oluşturuluyor

favorites: [] boş başlıyor

3

Alpine initialized eventi

✅ loadFavorites() otomatik çağrılıyor!

4

API'den favori listesi geldi

✅ favorites = ['song-123', 'album-45', ...]

5

Alpine reactivity devrede

✅ İkonlar otomatik güncelleniyor (dolu/boş kalp)

Kullanıcı hover yapıyor

✅ Kalp ikonları DOĞRU durumda anında görünüyor!

Değiştirilecek Dosyalar

public/themes/muzibu/js/player/features/favorites.js

Dosyanın sonuna alpine:initialized event listener eklenecek