Storage Sistemi - Sayfa Yenilenme Akışı

Hızlı Özet

~30ms

Initial Load (Placeholder)

~2s

Full Load (API Data)

0ms

Blocking Time (Non-Blocking)

Timeline: Sayfa Yenilendiğinde Ne Olur?

T+0ms Sayfa Başladı

Player initialize ediliyor, ilk fonksiyon çağrısı

// Player init
Alpine.data('player', function() {
    return {
        init() {
            this.loadQueueState();  // ← İlk çağrı
        }
    }
})

T+10ms localStorage Okuma

Kaydedilmiş state localStorage'dan okunuyor

// localStorage'dan oku
saved = safeStorage.getItem('muzibu_queue_state');

// Örnek veri:
{
    "queueIds": [123, 456, 789, 101, 202],
    "shuffle": true,
    "repeatMode": "all",
    "volume": 75,
    "playContext": {
        "type": "album",
        "id": 42,
        "name": "Rock Hits"
    }
}

Eğer localStorage boşsa:

Temiz başlangıç yapılır, hiçbir şey yüklenmez

T+15ms Ayarlar Geri Yüklendi

Kullanıcı tercihleri anında uygulanıyor

// User preferences hemen uygula
this.shuffle = true;        // ← Shuffle modu aktif
this.repeatMode = 'all';    // ← Tekrar: Tüm şarkılar
this.volume = 75;           // ← Ses seviyesi %75

console.log('💾 Settings restored', {
    shuffle: true,
    repeat: 'all',
    volume: 75
});

UI Görünümü:

Shuffle AÇIK

Repeat ALL

Volume 75%

T+20ms Context Geri Yüklendi

Oynatma bağlamı (hangi albüm/genre) restore ediliyor

// Play context'i geri yükle
muzibuStore.setPlayContext({
    type: 'album',
    id: 42,
    name: 'Rock Hits'
});

// Bu ne işe yarar?
// → Şarkı bitince bir sonraki şarkıyı bilir
// → Infinite loop sistemi için gerekli

T+25ms Queue Placeholder

Queue ID'lerinden placeholder'lar anında oluşturuluyor

// Placeholder songs oluştur
this.queue = queueIds.map(id => ({
    song_id: id,
    song_title: { tr: 'Yükleniyor...' },
    artist_title: { tr: '' },
    album_cover: null,
    _placeholder: true
}));

console.log('📋 Queue IDs found: 5 - Loading song info');

UI'da Anında Görünür:

Yükleniyor...

T+30ms Background Fetch Başladı

API istekleri background'da başlatılıyor (NON-BLOCKING)

// Background'da çalışır, sayfa render'ını bloklamaz!
this.loadQueueSongData([123, 456, 789, 101, 202]);

// Auto-save tekrar aktif
this._isRestoringState = false;

Instant Feedback:

Sayfa hemen kullanılabilir, API beklenmez!

T+200ms API İstekleri

Her şarkı için API'den bilgi çekiliyor (max 10 şarkı)

// Her şarkı için ayrı istek
for (const songId of [123, 456, 789, 101, 202]) {
    const response = await fetch(`/api/muzibu/songs/${songId}`);
    const song = await response.json();

    // Song data:
    {
        id: 123,
        title: { tr: "Bohemian Rhapsody" },
        artist_title: { tr: "Queen" },
        album_cover: "12345",
        duration: "5:55"
    }
}

T+2000ms Tamamlandı

Tüm şarkı bilgileri yüklendi, queue güncellendi

// Queue'yu gerçek data ile güncelle
this.queue = loadedSongs;  // 5 şarkı

console.log('✅ Queue song data loaded: 5');

UI Güncellendi (Gerçek Data):

Bohemian Rhapsody

Queen • 5:55

Stairway to Heaven

Led Zeppelin • 8:02

Hotel California

Eagles • 6:30

Geri Yüklenir

Volume (Ses Seviyesi)

0-100 arası değer korunur

T+15ms

Shuffle (Karıştır)

Açık/kapalı durumu saklanır

T+15ms

Repeat Mode

off / all / one modu korunur

T+15ms

Play Context

Hangi albüm/genre bağlamı

T+20ms

Queue IDs

Sadece ID'ler (stream URL yok)

T+25ms

Geri Yüklenmez

Current Song

Stream URL expire olur

❌

Current Time

Hatalı pozisyon hatası

❌

Is Playing

Otomatik play yapılmaz

❌

Queue Index

Hangi şarkıda olduğu saklanmaz

❌

Performance Metrikleri

~30ms

Initial Load

Placeholder anında

~2s

Full Load

Tüm şarkı data

Max 10

API İstekleri

Performance limit

0ms

Blocking Time

Non-blocking

Kullanıcı Deneyimi

1 Normal Kullanım

✅ Ses seviyesi %75 (kaydedilen değer)

✅ Shuffle AÇIK (kaydedilen mod)

✅ Repeat "Tüm Şarkılar" (kaydedilen mod)

✅ Queue'da 5 şarkı görünür

❌ Hiçbir şarkı çalmıyor (temiz başlangıç)

→ Kullanıcı Play'e basınca context'ten devam eder

2 Hata Durumu (API Fail)

⚠️ API 500 döndürdü (sunucu hatası)

✅ Placeholder'lar korunur ("Yükleniyor...")

✅ Sayfa çalışmaya devam eder

✅ Kullanıcı context'ten çalabilir

→ Sayfa crash etmez, graceful degradation

3 localStorage Yok (Private Mode)

⚠️ localStorage access denied

✅ Default değerler kullanılır

✅ Volume: 100, Shuffle: false

✅ Sayfa normal çalışır

→ Graceful fallback, hata vermez