optimizations

static/player.js

@@ -3,10 +3,14 @@ let isPlaying = false;
 let playlist = [];
 let currentView = 'all';
 let playlists = JSON.parse(localStorage.getItem('playlists')) || {};
-let currentPlaylist = null;
 let currentLyrics = null;
 let isPlayingPlaylist = false;
 
+// Add these cache objects at the top of the file
+const ALBUM_CACHE = new Map();
+const ARTIST_CACHE = new Map();
+let lastStructureUpdate = 0;
+
 const audioPlayer = document.getElementById('audio-player');
 const playBtn = document.getElementById('play-btn');
 const prevBtn = document.getElementById('prev-btn');
@@ -19,6 +23,16 @@ const durationSpan = document.getElementById('duration');
 // Add this constant at the top of the file
 const DEFAULT_COVER = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNlOWVjZWYiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgc3R5bGU9ImZvbnQtZmFtaWx5OiBBcmlhbDsgZm9udC1zaXplOiAyMHB4OyBmaWxsOiAjNmM3NTdkOyBkb21pbmFudC1iYXNlbGluZTogbWlkZGxlOyB0ZXh0LWFuY2hvcjogbWlkZGxlOyI+Tm8gQWxidW0gQXJ0PC90ZXh0Pjwvc3ZnPg==';
 
+// Add this function to check if we need to rebuild caches
+function shouldRebuildCaches() {
+    const now = Date.now();
+    if (now - lastStructureUpdate > 5000) { // Only rebuild every 5 seconds max
+        lastStructureUpdate = now;
+        return true;
+    }
+    return false;
+}
+
 // Fetch music structure from the server
 fetch('/api/music-structure')
     .then(response => response.json())
@@ -268,95 +282,110 @@ function switchView(view) {
     }
 }
 
+// Optimize renderAlbumView
 function renderAlbumView() {
-    const albums = {};
-    playlist.forEach(track => {
-        if (track.metadata) {
-            // Create a unique key combining album name and artist to prevent mixing different albums
-            const albumName = track.metadata.album || 'Unknown Album';
-            const artistName = track.metadata.artist || 'Unknown Artist';
-            const albumKey = `${albumName}___${artistName}`;
-
-            if (!albums[albumKey]) {
-                albums[albumKey] = {
-                    name: albumName,
-                    artist: artistName,
-                    artwork: track.metadata.artwork || DEFAULT_COVER,
-                    tracks: []
-                };
+    if (shouldRebuildCaches()) {
+        ALBUM_CACHE.clear();
+        playlist.forEach(track => {
+            if (track.metadata) {
+                const albumName = track.metadata.album || 'Unknown Album';
+                const artistName = track.metadata.artist || 'Unknown Artist';
+                const albumKey = `${albumName}___${artistName}`;
+
+                if (!ALBUM_CACHE.has(albumKey)) {
+                    ALBUM_CACHE.set(albumKey, {
+                        name: albumName,
+                        artist: artistName,
+                        artwork: track.metadata.artwork || DEFAULT_COVER,
+                        tracks: []
+                    });
+                }
+                ALBUM_CACHE.get(albumKey).tracks.push(track);
             }
-            albums[albumKey].tracks.push(track);
-        }
-    });
+        });
+    }
 
     const container = document.getElementById('view-container');
-    container.innerHTML = `
-        <div class="album-grid">
-            ${Object.values(albums).map(album => `
+    const albumsHtml = Array.from(ALBUM_CACHE.values())
+        .map(album => {
+            const escapedName = escapeHtml(album.name);
+            const escapedArtist = escapeHtml(album.artist);
+            return `
                 <div class="album-card">
                     <div class="album-art-container">
                         <img class="album-art" src="${album.artwork}" onerror="this.src='${DEFAULT_COVER}'">
-                        <button class="play-overlay" onclick="playAlbum('${escapeHtml(album.name)}', '${escapeHtml(album.artist)}')">
+                        <button class="play-overlay" onclick="playAlbum('${escapedName}','${escapedArtist}')">
                             <i class="fas fa-play"></i>
                         </button>
                     </div>
-                    <div class="album-info" onclick="showAlbumTracks('${escapeHtml(album.name)}', '${escapeHtml(album.artist)}')">
-                        <h3>${escapeHtml(album.name)}</h3>
+                    <div class="album-info" onclick="showAlbumTracks('${escapedName}','${escapedArtist}')">
+                        <h3>${escapedName}</h3>
                         <p>${album.artist}</p>
                         <p>${album.tracks.length} tracks</p>
                     </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
+                </div>`;
+        }).join('');
+
+    container.innerHTML = `<div class="album-grid">${albumsHtml}</div>`;
 }
 
+// Optimize renderArtistView
 function renderArtistView() {
-    const artists = {};
-    playlist.forEach(track => {
-        if (track.metadata) {
-            const artistName = track.metadata.artist || 'Unknown Artist';
-            if (!artists[artistName]) {
-                artists[artistName] = {
-                    name: artistName,
-                    artwork: track.metadata.artwork || DEFAULT_COVER,
-                    tracks: []
-                };
-            }
-            artists[artistName].tracks.push(track);
-            // Use the first track's artwork as artist image if we don't have it yet
-            if (!artists[artistName].artwork && track.metadata.artwork) {
-                artists[artistName].artwork = track.metadata.artwork;
+    if (shouldRebuildCaches()) {
+        ARTIST_CACHE.clear();
+        playlist.forEach(track => {
+            if (track.metadata) {
+                const artistName = track.metadata.artist || 'Unknown Artist';
+                if (!ARTIST_CACHE.has(artistName)) {
+                    ARTIST_CACHE.set(artistName, {
+                        name: artistName,
+                        artwork: track.metadata.artwork || DEFAULT_COVER,
+                        tracks: []
+                    });
+                }
+                const artist = ARTIST_CACHE.get(artistName);
+                artist.tracks.push(track);
+                if (!artist.artwork && track.metadata.artwork) {
+                    artist.artwork = track.metadata.artwork;
+                }
             }
-        }
-    });
+        });
+    }
 
     const container = document.getElementById('view-container');
-    container.innerHTML = `
-        <div class="artist-grid">
-            ${Object.values(artists).map(artist => `
+    const artistsHtml = Array.from(ARTIST_CACHE.values())
+        .map(artist => {
+            const escapedName = escapeHtml(artist.name);
+            return `
                 <div class="artist-card">
                     <div class="artist-art-container">
-                        <img class="artist-image" src="${artist.artwork}" alt="${artist.name}">
-                        <button class="play-overlay" onclick="playArtist('${artist.name}')">
+                        <img class="artist-image" src="${artist.artwork}" onerror="this.src='${DEFAULT_COVER}'" alt="${escapedName}">
+                        <button class="play-overlay" onclick="playArtist('${escapedName}')">
                             <i class="fas fa-play"></i>
                         </button>
                     </div>
-                    <div class="artist-info" onclick="showArtistTracks('${artist.name}')">
-                        <h3>${artist.name}</h3>
+                    <div class="artist-info" onclick="showArtistTracks('${escapedName}')">
+                        <h3>${escapedName}</h3>
                         <p>${artist.tracks.length} tracks</p>
                     </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
+                </div>`;
+        }).join('');
+
+    container.innerHTML = `<div class="artist-grid">${artistsHtml}</div>`;
+}
+
+// Optimize track filtering functions
+function getAlbumTracks(albumName, artistName) {
+    const albumKey = `${albumName}___${artistName}`;
+    return ALBUM_CACHE.get(albumKey)?.tracks || [];
+}
+
+function getArtistTracks(artistName) {
+    return ARTIST_CACHE.get(artistName)?.tracks || [];
 }
 
 function showAlbumTracks(albumName, artistName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.album === albumName &&
-        track.metadata?.artist === artistName
-    );
+    const tracks = getAlbumTracks(albumName, artistName);
     
     const container = document.getElementById('view-container');
     const viewTitle = document.getElementById('view-title');
@@ -400,9 +429,7 @@ function showAlbumTracks(albumName, artistName) {
 }
 
 function showArtistTracks(artistName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.artist === artistName
-    );
+    const tracks = getArtistTracks(artistName);
     renderTrackList(tracks, `Artist: ${artistName}`);
 }
 
@@ -896,11 +923,7 @@ function showNotification(message) {
 
 // Add these new functions to handle playing albums and artists
 function playAlbum(albumName, artistName) {
-    const albumTracks = playlist.filter(track => 
-        track.metadata?.album === albumName && 
-        track.metadata?.artist === artistName
-    );
-    
+    const albumTracks = getAlbumTracks(albumName, artistName);
     if (albumTracks.length > 0) {
         currentPlaylist = {
             name: albumName,
@@ -917,19 +940,15 @@ function playAlbum(albumName, artistName) {
 }
 
 function playArtist(artistName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.artist === artistName
-    );
+    const tracks = getArtistTracks(artistName);
     if (tracks.length > 0) {
-        // Create a temporary playlist for the artist
         currentPlaylist = {
             name: artistName,
-            tracks: tracks
+            tracks: [...tracks]
         };
         isPlayingPlaylist = true;
         
-        // Play the first track
-        const mainPlaylistIndex = playlist.indexOf(tracks[0]);
+        const mainPlaylistIndex = playlist.findIndex(track => track.path === tracks[0].path);
         if (mainPlaylistIndex !== -1) {
             playTrack(mainPlaylistIndex);
             showNotification(`Playing artist: ${artistName}`);