Bug Fix

Radyo Favori Butonu Düzeltme

Radyo çalarken sağ sütundaki favori butonunun çalışmaması sorunu

Basit Anlatım

Sorun Neydi?

Bir radyo çalmaya başladığında, ekranın sağ tarafında radyo bilgilerinin gösterildiği bir bölüm açılıyor. Bu bölümün sağ üst köşesinde bir kalp ikonu (favorilere ekle butonu) var. Bu butona tıklandığında:

  • Radyo favorilere eklenmiyordu
  • Hiçbir şey olmuyordu
  • Buton tepki vermiyordu

Neden Oluyordu?

Buton tıklandığında bir mesaj (event) gönderiyordu ama bu mesajı dinleyen kimse yoktu. Yani buton "favorilere ekle!" diye bağırıyordu ama dinleyen yoktu.

Ayrıca butonun ikonu (kalp dolu/boş) değişmiyordu çünkü yanlış veriyi kontrol ediyordu.

Nasıl Düzeltildi?

  1. Event Listener Eklendi: Butonun gönderdiği mesajı dinleyen bir sistem eklendi
  2. İkon Sistemi Düzeltildi: Butonun ikonu artık doğru veriyi kontrol ediyor
  3. Player Bar Korundu: Alt bardaki favori butonu olduğu gibi kaldı (şarkılar için)

Sonuç

Artık bir radyo çaldığında, sağ sütundaki favori butonuna tıklayınca:

  • ✓ Radyo favorilere eklenecek/çıkarılacak
  • ✓ Kalp ikonu anında değişecek (dolu/boş)
  • ✓ Bildirim mesajı gösterilecek
  • ✓ Alt bardaki favori butonu şarkılar için çalışmaya devam edecek

Teknik Detaylar

Problem Analizi

sidebar-right.blade.php:196

@click="$dispatch('toggle-favorite-entity', { type: ..., id: ... })"

Event dispatch ediliyor ancak listener yok.

sidebar-right.blade.php:198-199

:class="$store.sidebar.previewInfo?.is_favorite ? ... : ..."

Static değer kontrol ediliyor, reactive değil.

Uygulanan Çözümler

FIX #1 Event Listener Eklendi

📁 resources/views/themes/muzibu/layouts/app.blade.php

❌ Önce:

@play-all-playlists.window="..."

✅ Sonra:

@play-all-playlists.window="..."
@toggle-favorite-entity.window="
  if ($event.detail?.type && $event.detail?.id && $store.favorites) {
    $store.favorites.toggle($event.detail.type, $event.detail.id);
  }
"

Açıklama: Window seviyesinde event listener eklendi. Bu listener tüm toggle-favorite-entity event'lerini yakalar ve $store.favorites.toggle() fonksiyonunu çağırır.

FIX #2 Reactive State Binding (Preview Mode)

📁 resources/views/themes/muzibu/components/sidebar-right.blade.php:196-199

❌ Önce (Static):

:class="$store.sidebar.previewInfo?.is_favorite ? 'text-muzibu-coral' : 'text-white'"

✅ Sonra (Reactive):

:class="$store.favorites?.isFavorite($store.sidebar.previewInfo?.type?.toLowerCase(), $store.sidebar.previewInfo?.id) ? 'text-muzibu-coral' : 'text-white'"

Açıklama: Buton artık $store.favorites.isFavorite() reactive fonksiyonunu kontrol ediyor. Bu fonksiyon favoriler array'i değiştiğinde otomatik güncellenir.

FIX #3 Reactive State Binding (Detail Page)

📁 resources/views/themes/muzibu/components/sidebar-right.blade.php:730-733

❌ Önce (Static):

:class="$store.sidebar.entityInfo?.is_favorite ? 'text-muzibu-coral' : 'text-white'"

✅ Sonra (Reactive):

:class="$store.favorites?.isFavorite($store.sidebar.entityInfo?.type?.toLowerCase(), $store.sidebar.entityInfo?.id) ? 'text-muzibu-coral' : 'text-white'"

Açıklama: Detail page için de aynı düzeltme uygulandı.

Değiştirilen Dosyalar

resources/views/themes/muzibu/layouts/app.blade.php
+7 satır
resources/views/themes/muzibu/components/sidebar-right.blade.php
2 satır değişti

Test Senaryosu

  1. 1. Bir radyo çalıştır
  2. 2. Sağ sütunda radyo preview açılır
  3. 3. Sağ üstteki kalp ikonuna tıkla
  4. 4. Beklenen Sonuç:
    • Radyo favorilere eklenir
    • Kalp ikonu anında dolar (fas fa-heart)
    • Toast bildirimi görünür
    • Tekrar tıklayınca favorilerden çıkar ve ikon boşalır

Notlar

Alpine.js Reactivity: $store.favorites array'i Alpine.js tarafından reactive yapılır. isFavorite() fonksiyonu her çağrıldığında güncel array state'ini kontrol eder.

Event-Driven Architecture: Alpine.js event system kullanılarak component'ler arası loose coupling sağlandı. Sidebar component event dispatch eder, app layout listener ile yakalayıp store'u günceller.

Backward Compatibility: Player bar'daki favori butonu (şarkılar için) değiştirilmedi. Sadece sidebar'daki radyo favori butonu düzeltildi.

29 Ocak 2026 • Muzibu.com.tr