Tasarım & Performans Analizi

Dinamik Player Arkaplan Sistemi

Şarkı ismine göre otomatik gradient renk üretimi

27 Aralık 2025 - Muzibu.com.tr

Basit Anlatım (Herkes İçin)

Ne istiyoruz? Müzik çalarda her şarkı çaldığında, arkaplan rengi o şarkıya özel bir renge dönüşsün. "Yaz Geldi" şarkısı çalarken turuncu-sarı tonları, "Kış Masalı" çalarken mavi-mor tonları gibi.

Nasıl çalışacak? Şarkının adından matematiksel bir formülle renk hesaplanacak. Aynı şarkı her zaman aynı rengi üretecek - tutarlılık garantisi.

Neden önemli? Her şarkının kendi "kimliği" olacak. Kullanıcı bir süre sonra rengi görünce hangi şarkı çaldığını tahmin edebilecek. Görsel deneyim zenginleşecek.

İki Yaklaşım Karşılaştırması

Yaklaşım 1: Client-Side Hash

JavaScript'te anlık hesaplama

Veritabanı değişikliği yok
Migration gerektirmez
Anında devreye girer
Her şarkı değişiminde hesaplama
Admin'de önizleme zor

Performans:

~0.1ms / şarkı

ÖNERİLEN

Yaklaşım 2: DB'de Saklama

color_hash kolonu ile kalıcı

Bir kere hesapla, sonsuza kadar kullan
API response'ta hazır gelir
Admin'de önizleme kolay
Manuel override imkanı
Migration gerekli (1 kolon)

Performans:

0ms (zaten çekiliyor)

Hash Algoritması Mantığı

Adım Adım:

  1. Şarkı adını al: "Yaz Geldi"
  2. Karakterleri sayısal değere çevir
  3. Toplam değeri 360'a böl (Hue açısı)
  4. HSL renk formatı oluştur
  5. İkinci renk için +40° ekle (gradient)

Örnek Çıktılar:

"Yaz Geldi" → Sarı-Yeşil
"Kış Masalı" → Mavi-Mor
"Aşk Şarkısı" → Kırmızı-Turuncu
"Deniz Kenarı" → Turkuaz-Mavi

Teknik Detaylar (Geliştiriciler İçin)

Veritabanı Değişikliği:

-- muzibu_songs tablosu

ALTER TABLE muzibu_songs

ADD COLUMN color_hash VARCHAR(50)

DEFAULT NULL;

Örnek değer: "45,80,50" (hue, saturation, lightness)

Dosya Konumları:

  • Modules/Muzibu/app/Models/Song.php
  • database/migrations/tenant/
  • public/themes/muzibu/js/player/core/player-core.js
  • resources/views/themes/muzibu/components/player.blade.php

Hibrit Yaklaşım (En İyisi)

İkisinin avantajlarını birleştir:

  1. DB'de color_hash kolonu ekle
  2. Yeni şarkı eklendiğinde otomatik hesapla (Model Observer)
  3. Mevcut şarkılar için batch job çalıştır (1 kere)
  4. Admin'de manuel override imkanı sun (opsiyonel)
  5. Client-side'da fallback: DB'de yoksa JS'te hesapla

Akış:

Şarkı yükle color_hash var mı? Evet → Kullan | Hayır → JS hesapla

Görsel Önizleme (Player Arkaplan)

Mevcut Durum (Sabit)

Her şarkıda aynı turuncu-pembe gradient

Yeni Sistem (Dinamik)

Her şarkıya özel benzersiz renk

Performans Karşılaştırması

Metrik Client-Side DB'de Saklama
Hash Hesaplama Süresi ~0.1ms / şarkı 0ms (önceden hesaplı)
API Response Boyutu Değişmez +~15 byte / şarkı
Initial Load JS parse gerekli Hazır veri
Tutarlılık Algoritmaya bağlı %100 garantili
Manuel Override Zor Kolay (Admin'den)

Sonuç: DB'de saklama daha performanslı

Özellikle 1000+ şarkı için client-side hesaplama bile çok hızlı (~100ms), ama DB'den gelen hazır veri 0ms. Ayrıca manuel override ve admin önizleme için DB şart.

Uygulama Planı (Onay Sonrası)

1

Migration Oluştur

color_hash VARCHAR(50) kolonu ekle

2

Model Observer Ekle

Yeni şarkı kaydında otomatik hash hesapla

3

Batch Job Çalıştır

Mevcut tüm şarkılar için color_hash hesapla

4

API Response Güncelle

Şarkı verisine color_hash ekle

5

Player JS Güncelle

color_hash'i gradient CSS'e dönüştür

6

(Opsiyonel) Admin Override

Şarkı düzenleme sayfasına renk seçici ekle

Karar Noktaları

1. Hangi yaklaşımı tercih ediyorsun?

A) Sadece Client-Side B) DB + Client Fallback (Önerilen) C) Sadece DB

2. Admin'de manuel renk seçimi olsun mu?

Bazı özel şarkılar için elle renk belirleyebilirsin

3. Gradient yerine solid renk mi, yoksa gradient mı?

Solid
Gradient
3 Renkli