ARAŞTIRMA FIX UYGULAND

Player Autoplay Fix

Şarkı kendiliğinden çalmaya başlıyor - Analiz ve Çözüm

26 Aralık 2025 - Claude AI

🔴 Problem

Kullanıcı hiçbir yere tıklamadan şarkı/radyo kendiliğinden çalmaya başlıyor.

  • • /radios sayfasına gidince radio otomatik çalıyor
  • • Ekran açık bile değilken şarkı başlıyor
  • • 2-3 tab açık, başka tab'dayken müzik çalıyor

📝 Basit Anlatım (Herkes İçin)

Ne oluyordu? Sayfa değişirken (SPA navigasyonu) mouse'un altındaki içerik değişiyor. Eğer mouse bir radyo kartının üzerine denk gelirse, tıklama olayı yanlışlıkla tetikleniyordu.

Ayrıca: Birden fazla tab açıkken, arka plandaki tab'da da olaylar tetiklenebiliyordu - müzik oradan çalıyordu.

Ne yaptık? Sayfa değiştikten sonra 200ms boyunca tıklamaları engelleyen bir koruma ekledik. Ayrıca arka plandaki tab'ların müzik başlatmasını engelledik.

🔧 Teknik Detaylar (Geliştiriciler İçin)

Console Log Analizi

204→ 🚀 SPA Navigation: /radios
218→ ✅ Page loaded: /radios
221→ 🎵 playContent called: type=radio, id=7
222→ 🎵 HLS DEBUG... autoplay: true

Sayfa yüklendikten hemen sonra playContent çağrılmış. Kullanıcı tıklamamış ama click event tetiklenmiş.

Kök Neden: Click Bleeding

  1. Kullanıcı sidebar'daki /radios linkine tıkladı
  2. Mouse button hâlâ basılı iken SPA DOM'u değiştirdi
  3. Yeni DOM'da mouse pozisyonunda radio kartı #7 vardı
  4. Mouse release → click event bu karta tetiklendi
  5. Radyo çalmaya başladı!

Çoklu Tab Sorunu

BroadcastChannel API kullanılmıyor - tab'lar arası koordinasyon yok.

  • • 3 tab açık = 3 bağımsız player instance
  • • Arka plandaki tab'da event tetiklenince o tab'ın player'ı çalıyor
  • • Kullanıcı başka tab'a bakıyor, müzik arka plandan geliyor

📁 Yapılan Değişiklikler

spa-router.js

public/themes/muzibu/js/player/features/spa-router.js

+ // 🛡️ CLICK PROTECTION
+ lastNavigationTime: 0,
+ clickProtectionMs: 200,
+
+ isClickProtected() {
+     const elapsed = Date.now() - this.lastNavigationTime;
+     return elapsed < this.clickProtectionMs;
+ }

// DOM değişiminden sonra:
+ MuzibuSpaRouter.lastNavigationTime = Date.now();

play-helpers.js

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

- window.playContent = async function(type, id) {
+ window.playContent = async function(type, id, options = {}) {
+     const isUserInitiated = options.userInitiated ?? true;
+
+     // 🛡️ CLICK PROTECTION: SPA sonrası 200ms koruma
+     if (isUserInitiated && window.MuzibuSpaRouter?.isClickProtected?.()) {
+         console.warn('🛡️ playContent BLOCKED: Click protection');
+         return;
+     }
+
+     // 🛡️ BACKGROUND TAB PROTECTION
+     if (isUserInitiated && document.hidden) {
+         console.warn('🛡️ playContent BLOCKED: Tab in background');
+         return;
+     }

⚡ Koruma Mantığı

Click Protection

  • ✅ SPA navigasyonu sonrası 200ms koruma
  • ✅ Bu sürede playContent engellenir
  • ✅ Yanlış tıklama sorununu çözer

Background Tab Protection

  • ✅ Arka plandaki tab'da playContent engellenir
  • ✅ Sadece user-initiated için geçerli
  • ✅ Sistem geçişleri (next song) etkilenmez

🔍 Hâlâ Araştırılacak

Kullanıcı "aktif tab'da bile kendiliğinden başladı" dedi. Bu durumda:

  • • Stack trace ile playContent'in nereden çağrıldığı tespit edilmeli
  • • Alpine.js init sırasında bir şey tetikleniyor olabilir
  • • Hover/mouseenter event'i yanlışlıkla click'e dönüşüyor olabilir

Debug için:

console.trace() ile stack trace alınabilir