🎨 TASARIM TASLAK 5 Ocak 2026

Twitter Tarzı Hover Volume Control

Ses butonuna hover yapınca yukarı doğru açılan dikey volume slider tasarımı

Basit Anlatım (Herkes İçin)

Ne yapacağız?
Şu anda player'da ses kontrolü yan tarafa yatay olarak uzanıyor. Bunu Twitter'daki gibi yapacağız: Ses simgesine fareyle gelince yukarı doğru dikey bir çubuk çıkacak, oradan sesi ayarlayabileceksiniz.

🎯 Kullanıcı Deneyimi:

  • Fare ses butonunun üstünde değilken → Slider gizli
  • Fare ses butonuna gelince → Yukarı doğru smooth slider açılır
  • Slider'da sürükle → Ses seviyesi değişir
  • Fare çekilince → Slider smooth kapanır

Neden daha iyi?
Yer tasarrufu! Player bar'da ses çubuğu yer kaplamayacak, sadece gerektiğinde görünecek. Daha temiz ve modern bir görünüm.

Teknik Detaylar (Geliştiriciler İçin)

📁 Değiştirilecek Dosya:

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

Desktop Player bölümü (satır ~281-304)

⚙️ Teknoloji:

  • Alpine.js x-data ile hover state yönetimi
  • Tailwind CSS transitions (smooth açılma/kapanma)
  • Vertical range slider (yukarı doğru)
  • Absolute positioning (player bar üstünde hover)

🎨 Hover Mantığı:

@mouseenter="showVolumeSlider = true"
@mouseleave="showVolumeSlider = false"

Tasarım Seçenekleri

Seçenek 1: Minimal Tasarım

Hover Yok (Gizli)

Hover Var (Görünür)

60%

Avantajları: Basit, hızlı implement, temiz görünüm

Seçenek 2: Gradient & Animasyonlu (Önerilen)

Hover Yok

Hover Var (Gradient)

75

Avantajları: Modern görünüm, gradient renk geçişi (şarkı rengine uyumlu), glow efekti, smooth animasyon

Muzibu'nun mevcut gradient sistemiyle uyumlu (şarkıya göre renk değişimi)

Animasyon Özellikleri

Açılma Animasyonu

  • Süre: 200ms
  • Efekt: Opacity 0→1 + Scale 0.95→1
  • Yön: Aşağıdan yukarı (transform translateY)
  • Easing: ease-out (smooth başlangıç)

Kapanma Animasyonu

  • Süre: 150ms
  • Efekt: Opacity 1→0 + Scale 1→0.95
  • Yön: Yukarıdan aşağı (reverse)
  • Easing: ease-in (smooth bitiş)

Kullanıcı Etkileşimi

🖱️ Mouse İşlemleri:

✓
Hover In:

Slider açılır (200ms smooth)

✓
Hover Out:

Slider kapanır (150ms smooth)

✓
Click Slider:

Direkt o noktaya atlama

✓
Drag Handle:

Smooth sürükleme

⚠️ Önemli Notlar:

  • Slider açıkken mouse slider üstüne geçerse kapanmaz (hover area genişletilir)
  • Volume değişikliği anında uygulanır (debounce yok)
  • Mute butonuna tıklama slider'ı etkilemez (bağımsız çalışır)
  • Z-index yüksek tutulur (diğer elementlerin üstünde görünsün)

Uygulama Adımları (Onay Sonrası)

1
Mevcut horizontal slider'ı kaldır

player.blade.php → Volume Control bölümündeki w-20 div'i çıkar

2
Vertical hover slider ekle

Alpine.js x-show ile hover state, absolute positioning yukarı doğru

3
Gradient renklendirme

Mevcut color_hues sistemini kullan (şarkıya göre dinamik renk)

4
Smooth transitions ekle

Tailwind x-transition ile açılma/kapanma animasyonu

5
Test & cache clear

npm run prod + view clear + test hover interaction

Karar Zamanı

Hangi tasarım seçeneğini uygulayalım?

Seçenek 1: Minimal

Basit, hızlı, standart görünüm

Seçenek 2: Gradient (Önerilen)

Modern, Muzibu gradient sistemiyle uyumlu, animasyonlu

Önerilen Mevcut sistemle uyumlu

Benim önerim: Seçenek 2 (Gradient & Animasyonlu) - Muzibu'nun mevcut tasarım diliyle perfect uyum sağlar, şarkıya göre dinamik renk değişimi güzel duracak.