Radyo Preview Tasarım

PC'de radyo tıklanınca sağ sidebar gösterimi

Amaç: Mobil olmayan cihazlarda (PC/tablet) radyo tıklanınca sağ sidebar preview alanında radyo bilgilerini göstermek.

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
  • ✅ 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)

📁 Etkilenen Dosyalar:

  • sidebar-right.blade.php (Radio preview template eklenecek)
  • muzibu-store.js (Sidebar store'a radio preview logic)
  • play-helpers.js (playRadio fonksiyonuna preview trigger)

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

  1. Kullanıcı radio card'a tıklar
  2. Cihaz kontrolü: window.innerWidth >= 768 (mobil değilse)
  3. $store.sidebar.showRadioPreview(radioData) çağrılır
  4. Sağ sidebar rightSidebarVisible = true olur
  5. Preview area'da radio template render edilir
  6. Radyo çalmaya başlar

🎯 Alpine Store Değişiklikleri:

// muzibu-store.js içinde sidebar store
sidebar: {
    previewMode: false,
    previewInfo: null,
    rightSidebarVisible: false,

    // YENİ: Radio preview fonksiyonu
    showRadioPreview(radioData) {
        this.previewMode = true;
        this.rightSidebarVisible = true;
        this.previewInfo = {
            type: 'Radio',
            id: radioData.radio_id,
            title: radioData.title,
            cover: radioData.cover || null,
            is_favorite: radioData.is_favorite || false
        };
    }
}

Tasarım Mockup (Sağ Sidebar Preview)

Öncesi (Şu An)

Sağ sidebar boş

Radyo çalarken hiçbir bilgi gösterilmiyor

Sonrası (Yeni Tasarım)

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ı ile sizlerle.

Tür

Pop

Durum

Canlı

Tasarım Özellikleri:

  • Mevcut playlist/album preview tasarımıyla tutarlı
  • Radyo cover'ı büyük gösterim (256px yükseklik)
  • Gradient overlay ile profesyonel görünüm
  • "Canlı Yayın" badge'i ile radyo statüsü
  • Favorilere ekleme butonu (mevcut sistemle uyumlu)
  • Play/Pause toggle butonu (radyo kontrolü)
  • Animasyonlu pulse efekti "Canlı" göstergesi için

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

npm run prod && php artisan view:clear

Önemli Notlar

🤖 Claude Code tarafından oluşturuldu • 12 Ocak 2026