Tamamlandı

Muzibu Mobile Player Bug Fix

29 Aralık 2025 - muzibu.com

Basit Anlatım (Herkes İçin)

Ne vardı? Mobilde müzik çalarken iki sorun yaşanıyordu:

  • Sorun 1: Şarkıyı durdurup tekrar başlatınca, şarkı kaldığı yerden değil baştan başlıyordu
  • Sorun 2: 3 nokta menüsünde şarkıyı ileri/geri alma özelliği yoktu

Ne yapıldı?

  • Artık şarkıyı durdurup devam ettirdiğinizde kaldığı yerden devam ediyor
  • 3 nokta menüsüne parmakla sürüklenebilen ilerleme çubuğu eklendi
  • Menü artık aşağı kaydırarak kapatılabiliyor (swipe-to-dismiss)
  • Time badge artık kalan süreyi gösteriyor
  • İlerleme çubuğu daha büyük ve kullanımı kolay hale getirildi

Sonuç: Mobil müzik deneyimi çok daha akıcı!

Teknik Detaylar (Geliştiriciler İçin)

Bug #1: Safari Native HLS Pause/Resume

Şarkı durdurup devam ettirince baştan başlıyordu

Sorun:

  • Safari'de HLS.js kullanılmıyor, native HLS kullanılıyor
  • Native HLS'de this.hls = null
  • togglePlayPause() fonksiyonunda else if (this.hls) kontrolü Safari'de false dönüyordu
  • Bu yüzden playSongFromQueue() çağrılıyordu → şarkı baştan yükleniyordu

Çözüm:

  • this.isHlsStream flag'i Safari Native'de de true
  • Yeni kontrol eklendi: else if (this.isHlsStream && this.currentSong)
  • Audio element varsa ve src doluysa, direkt audio.play() çağrılıyor
player-core.js:711-737

Feature: Mobile Progress Bar

3 dots menüsüne touch-draggable progress bar eklendi

Özellikler:

  • Parmakla sürüklenebilir (touch-draggable)
  • Anlık görsel feedback (sürüklerken zaman güncellenir)
  • Şarkıya göre değişen gradient renk
  • Büyük touch area (py-3 -my-3)
  • Kalın progress track (h-2.5)
  • Büyük drag handle (w-5 h-5 + border)
  • Handle sürüklenirken büyüyor (scale-125)
  • Tabular nums font (tabular-nums)

Dikkat Edilen Noktalar:

  • touchUsed flag - touch sonrası click event'i engeller
  • touch-none CSS - browser varsayılan davranışlarını devre dışı
  • seekTime ayrı değişken - sürükleme sırasında geçici pozisyon
  • pointer-events-none child elementlerde
  • $el.querySelector('.progress-track') ile doğru element referansı
player.blade.php:146-175

Feature: Swipe-to-Dismiss

Menü aşağı kaydırarak kapatılabiliyor

Implementasyon:

  • Handle bar eklendi (üstte w-10 h-1 bg-zinc-600)
  • Header alanı swipe zone olarak ayarlandı
  • startY, currentY, isDragging state'leri
  • Sürükleme sırasında transform + opacity animasyonu
  • 60px'den fazla kaydırılırsa menü kapanıyor
:style="isDragging && currentY > 0 ?
  `transform: translateY(${currentY}px); opacity: ${1 - currentY/150}` : ''"
player.blade.php:127-139

Feature: Kalan Süre Badge

Time badge artık kalan süreyi gösteriyor

Önceki:

x-text="formatTime(currentTime)"

Yeni:

x-text="duration > 0 ? formatTime(Math.max(0, duration - currentTime)) : '0:00'"

Bu değişiklik hem mobile hem desktop player'da uygulandı.

player.blade.php:77, 244

Değiştirilen Dosyalar

MODIFIED
public/themes/muzibu/js/player/core/player-core.js

Safari Native HLS pause/resume fix (satır 711-737)

MODIFIED
resources/views/themes/muzibu/components/player.blade.php

Mobile progress bar, swipe-to-dismiss, kalan süre badge, handle bar, büyük touch area

Mobile Menu Yapısı (Son Hali)

┌ Handle Bar w-10 h-1 bg-zinc-600
├ Header (Swipe Zone) Şarkı adı + Sanatçı
├ Progress Bar Touch-draggable, gradient
└ Menu Items Favoriler, Sıradakiler, Playlist'e Ekle

Test Kontrol Listesi