Radyo Preview Tasarım v2

PC'de radyo tıklanınca sağ sidebar gösterimi (Gerçek Verilerle)

Düzeltme: Radio tablosundaki gerçek alanlar kullanıldı. "Tür" field'i YOK, yanlış bilgi kaldırıldı!

Basit Anlatım (Herkes İçin)

Şu anda: Ana sayfa veya /radios sayfasında bir radyoya tıkladığınızda direkt çalmaya başlıyor. Sağ tarafta hiçbir şey gösterilmiyor.

Yapılacak: PC/tablet kullanıcıları radyoya tıkladığında:

✅ Radyo çalmaya başlayacak (şu anki gibi)
✅ Sağ sidebar otomatik açılacak (mobilde kapalı kalacak)
✅ Sağ sidebar'da radyonun görseli, adı, "Canlı Yayın" etiketi görünecek
✅ Radyo açıklaması (varsa) gösterilecek
✅ Kullanıcı hangi radyonun çaldığını görebilecek

Neden önemli? PC kullanıcıları radyo çalarken hangi radyonun çaldığını göremiyordu. Şimdi sağ tarafta güzel bir kart ile görecekler.

Teknik Detaylar (Geliştiriciler İçin)

📊 Radio Model Alanları:

radio_id (primary key)

title (JSON - çoklu dil)

slug (JSON - çoklu dil)

description (longText - nullable - çoklu dil)

media_id (Thumbmaker logo)

is_featured (boolean)

is_active (boolean)

genre_id (❌ YOK! Radio'nun tür field'i yok)

🔗 Radio Relationships:

sectors() - Many-to-many (muzibu_radio_sector)
playlists() - HasPlaylistDistribution trait

📁 Etkilenen Dosyalar:

sidebar-right.blade.php
muzibu-store.js
play-helpers.js

⚙️ Çalışma Mantığı:

Kullanıcı radio card'a tıklar
Cihaz kontrolü: window.innerWidth >= 768
$store.sidebar.showRadioPreview(radioData) çağrılır
Sağ sidebar rightSidebarVisible = true
Radio preview template render edilir
Radyo çalmaya başlar

Tasarım Mockup (Gerçek Verilerle)

Öncesi (Şu An)

Sağ sidebar boş

Radyo çalarken hiçbir bilgi gösterilmiyor

Sonrası (Yeni Tasarım - Gerçek Alanlarla)

Radio

Radyo Ankara

Canlı Yayın

Şu an çalıyor

Radyo Ankara

Türkiye'nin en popüler radyo istasyonlarından biri. Güncel haberler, müzik ve eğlence programları.

Durum Canlı Yayın

Tasarım Özellikleri (Gerçek Veriler):

Radio Type Badge: "Radio" label gösterilir
Radio Title: radio.getTranslated('title')
Radio Cover: radio.getFirstMediaUrl('hero')
Description: radio.getTranslated('description') (varsa göster)
Canlı Yayın Badge: Animasyonlu pulse efekti
Favorite Button: is_favorited('radio', radio.radio_id)
Tür/Genre: Radio'nun genre field'i YOK! (Gösterilmeyecek)
Sectors: Gösterilmeyecek (preview'da gereksiz detay)

Yapılacaklar (Adım Adım)

1

Sidebar Store Güncelleme

muzibu-store.js içine showRadioPreview() fonksiyonu ekle

public/themes/muzibu/js/muzibu-store.js

2

Play Helper Güncelleme

playRadio() fonksiyonuna cihaz kontrolü ve preview trigger ekle

public/themes/muzibu/js/player/features/play-helpers.js

3

Sidebar Template Güncelleme

sidebar-right.blade.php'ye Radio preview template ekle

resources/views/themes/muzibu/components/sidebar-right.blade.php

4

Test & Cache Temizleme

PC'de radyo tıklayıp preview alanının açıldığını kontrol et

php artisan view:clear && php artisan responsecache:clear

Önemli Notlar

Mobil: Preview alanı açılMAYACAK (zaten sidebar mobilde gizli)
PC/Tablet: Sadece window.innerWidth >= 768px için çalışacak
Veriler: Radio model'den gerçek alanlar kullanılacak (title, description, cover)
Genre/Tür: Radio'nun genre field'i YOK! Gösterilmeyecek.
Şarkılar: Hiçbir değişiklik yapılmayacak (sadece radyolar için)
Playlist/Album: Mevcut preview sistemi aynen çalışmaya devam edecek

🤖 Claude Code tarafından oluşturuldu • 12 Ocak 2026 • v2 (Düzeltilmiş)