Fix

Author: switz

index.html

@@ -87,8 +87,8 @@
       const getStatusClass = (status, isActive = false) => {
         const base = 'ml-2 font-mono text-xs';
         if (isActive) return `${base} text-green-400`;
-        if (status === 'LOADED') return `${base} text-blue-400`;
-        if (status === 'LOADING') return `${base} text-yellow-400`;
+        if (status?.includes('LOADED')) return `${base} text-blue-400`;
+        if (status?.includes('LOADING')) return `${base} text-yellow-400`;
         return `${base} text-gray-400`;
       };
 
@@ -181,23 +181,32 @@
           onEnded: () => updateState({ isPlaying: false })
         });
 
+        // Add metadata to tracks
         player.tracks.forEach((track, idx) => {
           track.metadata = METADATA[idx];
         });
 
-        updateState({ tracks: player.tracks });
+        // Update state with tracks immediately
+        updateState({ tracks: [...player.tracks] });
+        
         player.setVolume(0.7);
         player.play();
 
+        // Debug
+        console.log('Player initialized with tracks:', player.tracks.length);
+        console.log('State tracks:', state().tracks.length);
+
         if (player.currentTrack) onTrackChange(player.currentTrack);
       });
 
       onCleanup(() => player?.cleanUp());
 
       // Computed values
-      const s = state();
-      const currentMeta = s.currentTrack?.metadata || {};
-      const trackTitle = currentMeta.title || `Track ${s.trackIdx + 1}`;
+      const trackTitle = () => {
+        const s = state();
+        const currentMeta = s.currentTrack?.metadata || {};
+        return currentMeta.title || `Track ${s.trackIdx + 1}`;
+      };
 
       return html`
         <div class="max-w-4xl mx-auto p-4">
@@ -268,7 +277,7 @@ <h3 class="text-lg font-semibold mb-3 flex items-center">
               <i class="fas fa-list-music mr-2"></i> Playlist
             </h3>
             <div class="space-y-1">
-              ${() => state().tracks.map((track, idx) => {
+              ${() => (state().tracks || []).map((track, idx) => {
                 const meta = track.metadata || {};
                 const isActive = state().trackIdx === idx;
                 const isCurrentlyPlaying = isActive && state().isPlaying;
@@ -311,7 +320,7 @@ <h3 class="text-lg font-semibold mb-3 flex items-center">
               </div>
               <div>
                 <span class="text-gray-400">Current Track:</span>
-                <span class="ml-2 font-mono">${() => `${state().trackIdx + 1} / ${state().tracks.length}`}</span>
+                <span class="ml-2 font-mono">${() => `${state().trackIdx + 1} / ${(state().tracks || []).length}`}</span>
               </div>
               <div>
                 <span class="text-gray-400">Playback Mode:</span>