🎵 Muzibu Player - Refactor & Optimization Plan

public/themes/muzibu/js/player/
├── core/
│   ├── audio-engine.js         # Howler.js + HLS.js wrapper
│   ├── crossfade.js            # Crossfade logic
│   └── stream-security.js      # Token + signed URL
├── features/
│   ├── queue-manager.js        # Queue operations
│   ├── favorites.js            # Like/unlike
│   ├── volume-control.js       # Volume + mute
│   ├── repeat-shuffle.js       # Repeat/shuffle modes
│   └── spa-navigation.js       # History API
├── ui/
│   ├── player-ui.js            # Progress bar, buttons
│   ├── queue-ui.js             # Drag & drop
│   └── modals.js               # Auth, limits modals
└── utils/
    ├── api-client.js           # Fetch wrapper
    ├── formatters.js           # Time, duration
    └── debounce.js             # Performance utils

// public/themes/muzibu/js/player-store.js
document.addEventListener('alpine:init', () => {
    Alpine.store('player', {
        // Audio state
        isPlaying: false,
        currentSong: null,
        currentTime: 0,
        duration: 0,
        volume: 0.8,
        isMuted: false,

        // Queue state
        queue: [],
        queueIndex: 0,

        // Playback state
        repeatMode: 'off', // off|all|one
        isShuffled: false,
        isCrossfading: false,

        // User state
        isLoggedIn: false,
        isPremium: false,

        // Methods (delegated to modules)
        play() { playerCore.play() },
        pause() { playerCore.pause() },
        next() { queueManager.next() },
        prev() { queueManager.prev() }
    });
});

// Dual audio system - exactly as currently working
class AudioEngine {
    constructor() {
        this.howl = null;          // Current Howler instance
        this.howlNext = null;      // Next track for crossfade
        this.hlsPlayer = null;     // HLS.js instance
        this.hlsPlayerNext = null; // Next HLS for crossfade
        this.audioElement = document.getElementById('hlsAudio');
        this.audioElementNext = document.getElementById('hlsAudioNext');
    }

    // Load with automatic format detection
    async loadSong(streamUrl, streamType) {
        if (streamType === 'hls') {
            return this.loadHLS(streamUrl);
        } else {
            return this.loadHowler(streamUrl);
        }
    }

    loadHowler(url) {
        this.howl = new Howl({
            src: [url],
            html5: true,
            pool: 5,
            volume: Alpine.store('player').volume,
            onplay: () => this.onPlayCallback(),
            onend: () => this.onEndCallback(),
            onload: () => this.onLoadCallback()
        });
        return this.howl;
    }

    loadHLS(url) {
        if (!Hls.isSupported()) {
            // Safari native HLS
            this.audioElement.src = url;
            return;
        }

        this.hlsPlayer = new Hls({
            enableWorker: true,
            lowLatencyMode: false
        });

        this.hlsPlayer.loadSource(url);
        this.hlsPlayer.attachMedia(this.audioElement);
    }

    // Crossfade to next track
    crossfade(nextUrl, nextType, duration = 6000) {
        // Implementation matches current crossfade logic
    }
}

// Laravel Sanctum token generation
Route::middleware(['auth:sanctum'])->group(function() {
    Route::get('/songs/{id}/stream', [SongStreamController::class, 'stream']);
});

// Frontend: Add token to requests
fetch(`/api/muzibu/songs/${songId}/stream`, {
    headers: {
        'Authorization': `Bearer ${window.userToken}`,
        'X-Requested-With': 'XMLHttpRequest'
    }
});

// Backend - generate signed URL
public function generateSignedStreamUrl($songId, $userId) {
    $timestamp = time();
    $ipAddress = request()->ip();
    $secret = config('app.stream_secret');

    $signature = hash_hmac('sha256',
        "{$songId}:{$userId}:{$timestamp}:{$ipAddress}",
        $secret
    );

    return url("/api/muzibu/songs/{$songId}/stream?" . http_build_query([
        't' => $timestamp,
        'u' => $userId,
        's' => $signature
    ]));
}

// Frontend kullanımı
const signedUrl = await fetch(`/api/muzibu/songs/${songId}/signed-url`).json();
audioEngine.loadSong(signedUrl.url, signedUrl.type);

// routes/api.php
Route::middleware('throttle:60,1')->group(function() {
    Route::get('/songs/{id}/stream', ...);
    Route::post('/songs/{id}/track-progress', ...);
});

// FFmpeg HLS conversion with encryption
ffmpeg -i input.mp3 \
  -hls_key_info_file keyinfo.txt \
  -hls_time 10 \
  -hls_list_size 0 \
  -hls_segment_filename 'segment_%03d.ts' \
  output.m3u8

// keyinfo.txt format:
// key_url
// key_file_path
// initialization_vector

// js/player/features/waveform.js
import WaveSurfer from 'wavesurfer.js';

const wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: '#1db954',
    progressColor: '#ffffff',
    height: 80,
    responsive: true
});

// Sync with Howler.js
howl.on('play', () => wavesurfer.play());
howl.on('pause', () => wavesurfer.pause());
howl.on('seek', (pos) => wavesurfer.seekTo(pos));

// Backend precalculation
use ColorThief\ColorThief;

$dominantColor = ColorThief::getColor($albumCoverPath);
$palette = ColorThief::getPalette($albumCoverPath, 5);

// DB'ye kaydet
$song->update([
    'theme_color' => "rgb({$dominantColor[0]}, {$dominantColor[1]}, {$dominantColor[2]})"
]);

// Frontend kullanımı
document.body.style.setProperty('--player-accent', song.theme_color);

class Equalizer {
    constructor(audioContext) {
        this.context = audioContext;
        this.bands = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000];
        this.filters = this.createFilters();
    }

    createFilters() {
        return this.bands.map((freq, i) => {
            const filter = this.context.createBiquadFilter();
            filter.type = (i === 0) ? 'lowshelf' :
                         (i === this.bands.length - 1) ? 'highshelf' :
                         'peaking';
            filter.frequency.value = freq;
            filter.Q.value = 1;
            filter.gain.value = 0;
            return filter;
        });
    }

    setBand(index, gain) {
        this.filters[index].gain.value = gain;
    }
}