feat: show last played songs in web ui

pkg/web/static/app.js

@@ -5,6 +5,8 @@ const statusText = document.getElementById('status-text');
 const nowPlaying = document.getElementById('now-playing');
 const notPlaying = document.getElementById('not-playing');
 const lastUpdate = document.getElementById('last-update');
+const songHistory = document.getElementById('song-history');
+const historyList = document.getElementById('history-list');
 
 // Song info elements
 const coverArt = document.getElementById('cover-art');
@@ -75,6 +77,15 @@ function updateUI(data) {
         updateSongInfo(data.currentSong);
     }
     
+    // Update song history if available
+    if (data.songHistory && data.songHistory.length > 0) {
+        updateSongHistory(data.songHistory, data.currentSong);
+        songHistory.classList.remove('hidden');
+    } else {
+        // No history available
+        songHistory.classList.add('hidden');
+    }
+    
     // Update last update time
     if (data.updateTime) {
         const updateDate = new Date(data.updateTime);
@@ -122,4 +133,67 @@ function updateSongInfo(song) {
 
 function formatDate(date) {
     return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+// Update the song history list
+function updateSongHistory(songs, currentSong) {
+    // Clear the current list
+    historyList.innerHTML = '';
+    
+    // Show history even when nothing is playing
+    
+    // Start from the first song
+    const startIndex = 0;
+    
+    // If no songs are available after filtering current one, show a message
+    if (songs.length === 0) {
+        const li = document.createElement('li');
+        li.className = 'history-item history-empty';
+        li.textContent = 'No song history available yet';
+        historyList.appendChild(li);
+        return;
+    }
+    
+    // Add each song to the history list
+    for (let i = startIndex; i < songs.length; i++) {
+        const song = songs[i];
+        if (!song) continue;
+        
+        // Skip if this song is the same as the currently playing song
+        if (currentSong && song.id === currentSong.id) continue;
+        
+        const li = document.createElement('li');
+        li.className = 'history-item';
+        
+        // Create cover art
+        const img = document.createElement('img');
+        if (song.coverArt) {
+            img.src = `/cover/${song.coverArt}`;
+        } else {
+            img.src = DEFAULT_COVER_ART;
+        }
+        img.alt = 'Cover';
+        img.className = 'history-cover';
+        
+        // Create song details
+        const details = document.createElement('div');
+        details.className = 'history-details';
+        
+        const title = document.createElement('div');
+        title.className = 'history-title';
+        title.textContent = song.title || 'Unknown Title';
+        
+        const artist = document.createElement('div');
+        artist.className = 'history-artist';
+        artist.textContent = song.artist || 'Unknown Artist';
+        
+        // Assemble the elements
+        details.appendChild(title);
+        details.appendChild(artist);
+        
+        li.appendChild(img);
+        li.appendChild(details);
+        
+        historyList.appendChild(li);
+    }
 }