🐛 BUG ANALİZİ 25 Aralık 2025

Genre Tıklama Sonrası Overlay Sorunu

Ana sayfadaki tür kutularına tıklandığında overlay gelme ve istenmeyen müzik çalma sorununun analizi

📝 Basit Anlatım (Herkes İçin)

Sorun Nedir?

Ana sayfada müzik türlerine (Rock, Pop, Jazz vb.) tıkladığınızda, sayfanın üstüne bir katman geliyor ve ardından sayfanın her yerine tıkladığınızda müzik çalmaya başlıyor.

Neden Oluyor?

Tür kutusuna tıkladığınızda sağ taraftaki sidebar (kenar çubuğu) "önizleme modu"na geçiyor ve o türün şarkılarını gösteriyor. Ancak iki sorun var:

  • Overlay (Katman) Sorunu: Sidebar önizleme moduna geçtiğinde, tüm sayfa üzerine şeffaf bir katman geliyor gibi görünebilir.
  • İstenmeyen Tıklama: Tür kutusundaki "Çal" butonunun event'i제대로 durdurulmadığı için, kart tıklandığında hem sidebar açılıyor hem de play eventi tetikleniyor olabilir.

Ne Yapılmalı?

Genre kutusundaki tıklama olaylarını düzeltmemiz ve sidebar preview açıldığında overlay'in제대로 çalışmasını sağlamamız gerekiyor.

🔧 Teknik Detaylar (Geliştiriciler İçin)

📁 Etkilenen Dosyalar:

  • resources/views/components/muzibu/genre-quick-card.blade.php
  • resources/views/themes/muzibu/components/sidebar-right.blade.php
  • public/themes/muzibu/js/muzibu-store.js (sidebar store)
  • public/themes/muzibu/css/muzibu-layout.css

🐛 Sorun Analizi:

1. Event Bubbling Sorunu

genre-quick-card.blade.php:48-53
Tüm kart div'ine @click eventi var → sidebar.showPreview() çağırıyor

genre-quick-card.blade.php:77-82
Play butonu @click.stop ile event'i durdurmaya çalışıyor ama $dispatch('play-genre') ile yeni event fırlatıyor.

2. Sidebar Preview Z-Index

Sidebar preview mode'a geçtiğinde, sağ taraftaki sidebar içeriği değişiyor ancak overlay/backdrop yok. Kullanıcı "sayfanın üstüne katman geliyor" diyorsa, muhtemelen sidebar'ın içeriği sayfanın üstünü kaplayacak şekilde genişliyor olabilir veya CSS z-index sorunu var.

3. Click Event Propagation

Play butonuna tıklandığında @click.stop eventi durdurmalı ancak $dispatch() ile yeni bir event fırlatıldığı için bu event tüm sayfada dinlenebilir ve her tıklamada tetiklenebilir.

🔍 Kod İncelemesi:

genre-quick-card.blade.php - Line 37-83

<div class="genre-card group ..."
     @click="$store.sidebar.showPreview('genre', {{ $genreId }}, {...})">

    <!-- Play Button - Line 77-82 -->
    <button @click.stop="$dispatch('play-genre', { genreId: {{ $genreId }} })">
        <i class="fas fa-play"></i>
    </button>
</div>

⚠️ @click.stop parent event'i durduruyor AMA $dispatch() ile yeni global event fırlatıyor!

🎯 Root Cause (Kök Neden):

Muhtemel Senaryo:

  1. Kullanıcı genre kutusuna tıklıyor
  2. Sidebar preview mode açılıyor (şarkı listesi gösteriliyor)
  3. Sidebar içeriği değişiyor ve kullanıcı bunu "overlay" olarak algılıyor
  4. Play butonu tıklandığında play-genre eventi dispatch ediliyor
  5. Bu event global olduğu için, herhangi bir yerde dinlenebilir
  6. Eğer global bir listener varsa, sayfanın her yerine tıklandığında tetiklenebilir

💡 Çözüm Önerileri

1

Play Button Event'ini Düzelt

Play butonunda $dispatch() kullanmak yerine direkt playGenres() fonksiyonunu çağır.

❌ ŞU ANDA (Yanlış):

@click.stop="$dispatch('play-genre', { genreId: {{ $genreId }} })"

✅ DÜZELTME:

@click.stop.prevent="playGenres({{ $genreId }})"
2

Desktop'ta Sidebar Preview Disable Et

Ana sayfadaki genre kutularında sidebar preview yerine direkt genre detay sayfasına yönlendir. Preview özelliği sadece liste sayfalarında (genres, playlists, albums) kullanılsın.

✅ DÜZELTME:

genre-quick-card.blade.php'de :preview="false" kullan veya @click eventi kaldır
3

Event Listener Kontrolü

play-genre eventini dinleyen global listener var mı kontrol et. Eğer varsa, bu listener'ı kaldır veya sadece belirli elemanlarda dinle.

⚠️ KONTROL ET:

document.addEventListener('play-genre', ...) veya @play-genre.window

🧪 Test Adımları

  1. Ana sayfayı aç: https://muzibu.com/
  2. Browser console'u aç (F12)
  3. Bir genre kutusuna tıkla (ör: "Pop")
  4. Console'da hangi event'lerin tetiklendiğini kontrol et
  5. Sidebar'ın preview mode'a geçip geçmediğini kontrol et
  6. Sayfanın farklı yerlerine tıklayarak müzik çalıp çalmadığını test et
  7. Play butonuna tıkladığında event'in제대로 durdurulup durdurulmadığını kontrol et

Sonuç & Önerilen Eylem

Sorunun Kök Nedeni:

Genre kutusundaki play butonunun $dispatch() ile global event fırlatması ve muhtemelen bir yerde bu eventi dinleyen global listener'ın olması.

Öncelikli Düzeltme:

Çözüm 1: Play button event'ini düzelt - $dispatch() yerine direkt playGenres() kullan.

Düzeltme yapmadan önce kullanıcı onayı bekleniyor.