docker update

.dockerignore

@@ -0,0 +1,14 @@
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.env
+*.git
+.gitignore
+.dockerignore
+Dockerfile
+*.md
+music/*

Dockerfile

@@ -1,18 +1,31 @@
-FROM python:3.9
+FROM python:3.9-slim
 
-WORKDIR /code
+# Set working directory
+WORKDIR /app
 
-# Copy all necessary files
-COPY . /code/
+# Install system dependencies for mutagen
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    gcc \
+    libc6-dev \
+    && rm -rf /var/lib/apt/lists/*
 
-# Install requirements
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
+# Copy requirements first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
 
-# Create directories if they don't exist
-RUN mkdir -p /code/music
-RUN mkdir -p /code/static
-RUN mkdir -p /code/templates
+# Copy application code
+COPY . .
 
+# Create music directory with proper permissions
+RUN mkdir -p music && chmod 777 music
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+ENV PORT=7860
+
+# Expose port
 EXPOSE 7860
 
-CMD ["python", "app.py"] 
+# Run with gunicorn for better performance
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--threads", "4", "app:app"] 

app.py

@@ -4,21 +4,33 @@ import mutagen
 from mutagen.flac import FLAC
 from mutagen.mp3 import MP3
 from mutagen.wave import WAVE
+from functools import lru_cache
+import base64
+from pathlib import Path
 
 app = Flask(__name__)
 
-# Add this near the top after creating the Flask app
-app.config['MUSIC_FOLDER'] = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'music')
+# Configure music folder using Path for better path handling
+app.config['MUSIC_FOLDER'] = Path(__file__).parent / 'music'
 
-# Add global playlist and queue storage
-playlists = {}  # Format: {playlist_name: [song_paths]}
+# Global cache for metadata
+METADATA_CACHE = {}
+STRUCTURE_CACHE = None
+CACHE_VERSION = 1  # Increment this when changing cache logic
 
+@lru_cache(maxsize=100)
 def get_audio_metadata(file_path):
+    """Cache metadata for frequently accessed files"""
     try:
+        # Check if metadata is in cache
+        if file_path in METADATA_CACHE:
+            return METADATA_CACHE[file_path]
+
+        metadata = None
         if file_path.endswith('.flac'):
             audio = FLAC(file_path)
             metadata = {
-                'title': str(audio.get('title', [os.path.basename(file_path)])[0]),
+                'title': str(audio.get('title', [Path(file_path).name])[0]),
                 'artist': str(audio.get('artist', ['Unknown'])[0]),
                 'album': str(audio.get('album', ['Unknown'])[0]),
                 'duration': int(audio.info.length),
@@ -29,22 +41,17 @@ def get_audio_metadata(file_path):
                 'synchronized_lyrics': get_synchronized_lyrics(audio)
             }
             
-            # Handle FLAC artwork quietly
             if audio.pictures:
                 try:
-                    import base64
                     artwork_data = audio.pictures[0].data
-                    artwork_base64 = base64.b64encode(artwork_data).decode('utf-8')
-                    metadata['artwork'] = f"data:image/jpeg;base64,{artwork_base64}"
-                except Exception as e:
-                    print(f"Error processing FLAC artwork: {str(e)}")
-            
-            return metadata
+                    metadata['artwork'] = f"data:image/jpeg;base64,{base64.b64encode(artwork_data).decode('utf-8')}"
+                except Exception:
+                    pass
             
         elif file_path.endswith('.mp3'):
             audio = MP3(file_path)
             metadata = {
-                'title': audio.tags.get('TIT2', [os.path.basename(file_path)])[0] if hasattr(audio, 'tags') else os.path.basename(file_path),
+                'title': audio.tags.get('TIT2', [Path(file_path).name])[0] if hasattr(audio, 'tags') else Path(file_path).name,
                 'artist': audio.tags.get('TPE1', ['Unknown'])[0] if hasattr(audio, 'tags') else 'Unknown',
                 'album': audio.tags.get('TALB', ['Unknown'])[0] if hasattr(audio, 'tags') else 'Unknown',
                 'duration': int(audio.info.length),
@@ -55,24 +62,19 @@ def get_audio_metadata(file_path):
                 'synchronized_lyrics': get_mp3_synchronized_lyrics(audio)
             }
             
-            # Handle MP3 artwork
             if hasattr(audio, 'tags'):
                 try:
-                    import base64
                     apic_keys = [k for k in audio.tags.keys() if k.startswith('APIC:')]
                     if apic_keys:
                         artwork_data = audio.tags[apic_keys[0]].data
-                        artwork_base64 = base64.b64encode(artwork_data).decode('utf-8')
-                        metadata['artwork'] = f"data:image/jpeg;base64,{artwork_base64}"
-                except Exception as e:
-                    print(f"Error processing MP3 artwork: {str(e)}")
-            
-            return metadata
+                        metadata['artwork'] = f"data:image/jpeg;base64,{base64.b64encode(artwork_data).decode('utf-8')}"
+                except Exception:
+                    pass
             
         elif file_path.endswith('.wav'):
             audio = WAVE(file_path)
             metadata = {
-                'title': os.path.basename(file_path),
+                'title': Path(file_path).name,
                 'artist': 'Unknown',
                 'album': 'Unknown',
                 'duration': int(audio.info.length),
@@ -82,14 +84,16 @@ def get_audio_metadata(file_path):
                 'lyrics': '',
                 'synchronized_lyrics': []
             }
+
+        if metadata:
+            METADATA_CACHE[file_path] = metadata
             return metadata
-        else:
-            return None
+        return None
 
     except Exception as e:
         print(f"Error reading metadata for {file_path}: {str(e)}")
         return {
-            'title': os.path.basename(file_path),
+            'title': Path(file_path).name,
             'artist': 'Unknown',
             'album': 'Unknown',
             'duration': 0,
@@ -99,55 +103,70 @@ def get_audio_metadata(file_path):
         }
 
 def get_folder_structure(path):
+    """Get folder structure with caching"""
+    global STRUCTURE_CACHE
+    
     try:
-        if not os.path.exists(path):
-            print(f"Directory does not exist: {path}")
+        if STRUCTURE_CACHE is not None:
+            return STRUCTURE_CACHE
+
+        if not Path(path).exists():
             return []
             
         structure = []
-        files = os.listdir(path)
-        
-        for item in files:
-            item_path = os.path.join(path, item)
-            if os.path.isfile(item_path) and item.endswith(('.mp3', '.wav', '.flac')):
-                metadata = get_audio_metadata(item_path)
+        for item in Path(path).iterdir():
+            if item.is_file() and item.suffix.lower() in ('.mp3', '.wav', '.flac'):
+                metadata = get_audio_metadata(str(item))
                 if metadata:
                     structure.append({
                         'type': 'file',
-                        'name': item,
-                        'path': os.path.relpath(item_path, 'music'),
+                        'name': item.name,
+                        'path': str(item.relative_to(app.config['MUSIC_FOLDER'])),
                         'metadata': metadata
                     })
-            elif os.path.isdir(item_path):
+            elif item.is_dir():
                 structure.append({
                     'type': 'folder',
-                    'name': item,
-                    'path': os.path.relpath(item_path, 'music'),
-                    'contents': get_folder_structure(item_path)
+                    'name': item.name,
+                    'path': str(item.relative_to(app.config['MUSIC_FOLDER'])),
+                    'contents': get_folder_structure(item)
                 })
+        
+        STRUCTURE_CACHE = structure
         return structure
     except Exception as e:
         print(f"Error scanning directory {path}: {str(e)}")
         return []
 
-@app.route('/music/<path:filename>')
-def serve_music(filename):
-    return send_from_directory('music', filename)
-
 @app.route('/api/music-structure')
 def get_music_structure():
-    music_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'music')
+    """Get music structure with caching"""
+    music_dir = app.config['MUSIC_FOLDER']
     
-    if not os.path.exists(music_dir):
-        os.makedirs(music_dir)
+    if not music_dir.exists():
+        music_dir.mkdir(parents=True, exist_ok=True)
         return jsonify([])
     
-    if not os.listdir(music_dir):
+    if not any(music_dir.iterdir()):
         return jsonify([])
     
     structure = get_folder_structure(music_dir)
     return jsonify(structure)
 
+# Add cache invalidation endpoint for development
+@app.route('/api/clear-cache', methods=['POST'])
+def clear_cache():
+    """Clear all caches - use in development only"""
+    global STRUCTURE_CACHE, METADATA_CACHE
+    STRUCTURE_CACHE = None
+    METADATA_CACHE.clear()
+    get_audio_metadata.cache_clear()
+    return jsonify({"message": "Cache cleared"})
+
+@app.route('/music/<path:filename>')
+def serve_music(filename):
+    return send_from_directory('music', filename)
+
 @app.route('/')
 def index():
     return render_template('index.html')
@@ -276,6 +295,15 @@ def parse_sylt_format(sylt):
         })
     return sorted(lyrics, key=lambda x: x['time'])
 
+@app.route('/health')
+def health_check():
+    """Health check endpoint for container orchestration"""
+    return jsonify({
+        "status": "healthy",
+        "cache_version": CACHE_VERSION,
+        "cache_size": len(METADATA_CACHE)
+    })
+
 if __name__ == '__main__':
     # Create music directory if it doesn't exist
     if not os.path.exists(app.config['MUSIC_FOLDER']):

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "7860:7860"
+    volumes:
+      - ./music:/app/music
+    environment:
+      - FLASK_ENV=development
+      - FLASK_APP=app.py
+      - PORT=7860
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:7860/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3 

static/player.js

@@ -19,12 +19,40 @@ 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 near the top with other constants
+const CACHE_VERSION = 1;  // Should match app.py CACHE_VERSION
+
+// Add this function
+async function clearCache() {
+    try {
+        const response = await fetch('/api/clear-cache', {
+            method: 'POST'
+        });
+        if (response.ok) {
+            console.log('Cache cleared successfully');
+            // Reload music structure
+            fetch('/api/music-structure')
+                .then(response => response.json())
+                .then(data => {
+                    playlist = flattenPlaylist(data);
+                    initializeViews();
+                });
+        }
+    } catch (error) {
+        console.error('Error clearing cache:', error);
+    }
+}
+
 // Fetch music structure from the server
 fetch('/api/music-structure')
     .then(response => response.json())
     .then(data => {
         playlist = flattenPlaylist(data);
         initializeViews();
+    })
+    .catch(error => {
+        console.error('Error loading music structure:', error);
+        showNotification('Error loading music library');
     });
 
 function flattenPlaylist(structure, prefix = '') {
@@ -40,860 +68,4 @@ function flattenPlaylist(structure, prefix = '') {
     return flat;
 }
 
-function playTrack(index) {
-    // If playing directly from main playlist, clear playlist context
-    if (!isPlayingPlaylist) {
-        currentPlaylist = null;
-    }
-    
-    currentTrack = index;
-    const track = playlist[index];
-    
-    if (!track) return;
-    
-    audioPlayer.src = `/music/${track.path}`;
-    audioPlayer.play()
-        .then(() => {
-            updatePlayerInfo(track);
-            updatePlayButton(true);
-            highlightCurrentTrack();
-            updateActiveLyricLine(audioPlayer.currentTime);
-        })
-        .catch(error => {
-            console.error('Error playing track:', error);
-            showNotification('Error playing track');
-            playNext();
-        });
-}
-
-function updatePlayerInfo(track) {
-    document.getElementById('track-title').textContent = track.metadata?.title || track.name;
-    document.getElementById('track-artist').textContent = track.metadata?.artist || 'Unknown';
-    document.getElementById('track-album').textContent = track.metadata?.album || 'Unknown';
-    
-    // Update album art with error handling
-    const albumArt = document.getElementById('album-art');
-    if (track.metadata?.artwork) {
-        albumArt.src = track.metadata.artwork;
-        // Add error handling for the album art
-        albumArt.onerror = () => {
-            albumArt.src = DEFAULT_COVER;
-        };
-    } else {
-        albumArt.src = DEFAULT_COVER;
-    }
-    
-    // Update lyrics
-    currentLyrics = track.metadata?.synchronized_lyrics || null;
-    const lyricsContent = document.getElementById('lyrics-content');
-    
-    if (track.metadata?.lyrics || currentLyrics) {
-        if (currentLyrics) {
-            displaySyncedLyrics(currentLyrics);
-        } else {
-            lyricsContent.innerHTML = `<div class="lyrics-line">${track.metadata.lyrics || ''}</div>`;
-        }
-    } else {
-        lyricsContent.innerHTML = '<div class="lyrics-line">No lyrics available</div>';
-    }
-}
-
-function displaySyncedLyrics(lyrics) {
-    const lyricsContent = document.getElementById('lyrics-content');
-    lyricsContent.innerHTML = lyrics
-        .map((line, index) => `
-            <div class="lyrics-line" data-time="${line.time}" id="lyric-line-${index}">
-                ${line.text}
-            </div>
-        `)
-        .join('');
-        
-    // Add click handlers for each line
-    lyricsContent.querySelectorAll('.lyrics-line').forEach(line => {
-        line.addEventListener('click', () => {
-            const time = parseFloat(line.dataset.time);
-            if (!isNaN(time)) {
-                audioPlayer.currentTime = time;
-                audioPlayer.play()
-                    .then(() => updatePlayButton(true))
-                    .catch(error => console.error('Error playing:', error));
-            }
-        });
-    });
-}
-
-function updateActiveLyricLine(currentTime) {
-    if (!currentLyrics || !currentLyrics.length) return;
-    
-    // Find the current line by looking for the last lyric before current time
-    let currentLineIndex = -1;
-    for (let i = 0; i < currentLyrics.length; i++) {
-        if (currentLyrics[i].time <= currentTime) {
-            currentLineIndex = i;
-        } else {
-            break;
-        }
-    }
-    
-    // Remove active class from all lines
-    document.querySelectorAll('.lyrics-line').forEach(line => {
-        line.classList.remove('active');
-    });
-    
-    // If we found a current line, highlight it and scroll to it
-    if (currentLineIndex >= 0) {
-        const lineElement = document.getElementById(`lyric-line-${currentLineIndex}`);
-        if (lineElement) {
-            lineElement.classList.add('active');
-            
-            // Improved scrolling logic
-            const container = document.getElementById('lyrics-content');
-            const containerRect = container.getBoundingClientRect();
-            const lineRect = lineElement.getBoundingClientRect();
-            
-            // Only scroll if the line is outside the visible area
-            if (lineRect.top < containerRect.top || lineRect.bottom > containerRect.bottom) {
-                lineElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center'
-                });
-            }
-        }
-    }
-}
-
-function updatePlayButton(playing) {
-    isPlaying = playing;
-    playBtn.innerHTML = playing ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
-}
-
-function highlightCurrentTrack() {
-    document.querySelectorAll('.track-list .music-item').forEach((item, index) => {
-        item.classList.toggle('playing', index === currentTrack);
-    });
-}
-
-// Event Listeners
-playBtn.onclick = () => {
-    if (currentTrack === null && playlist.length > 0) {
-        playTrack(0);
-    } else if (audioPlayer.paused) {
-        audioPlayer.play();
-        updatePlayButton(true);
-    } else {
-        audioPlayer.pause();
-        updatePlayButton(false);
-    }
-};
-
-prevBtn.onclick = () => {
-    playPrevious();
-};
-
-nextBtn.onclick = () => {
-    playNext();
-};
-
-volumeSlider.oninput = (e) => {
-    audioPlayer.volume = e.target.value / 100;
-};
-
-seekSlider.oninput = (e) => {
-    const time = (audioPlayer.duration * e.target.value) / 100;
-    audioPlayer.currentTime = time;
-};
-
-audioPlayer.ontimeupdate = () => {
-    const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-    seekSlider.value = percent;
-    currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
-    updateActiveLyricLine(audioPlayer.currentTime);
-};
-
-audioPlayer.onloadedmetadata = () => {
-    durationSpan.textContent = formatTime(audioPlayer.duration);
-};
-
-audioPlayer.onended = () => {
-    playNext();
-};
-
-function formatTime(seconds) {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-}
-
-function initializeViews() {
-    document.querySelectorAll('.nav-menu a').forEach(link => {
-        link.addEventListener('click', (e) => {
-            e.preventDefault();
-            const view = e.target.dataset.view;
-            switchView(view);
-        });
-    });
-
-    document.getElementById('search-input').addEventListener('input', (e) => {
-        filterContent(e.target.value);
-    });
-
-    document.getElementById('new-playlist-btn').addEventListener('click', showPlaylistModal);
-    document.getElementById('save-playlist').addEventListener('click', savePlaylist);
-    document.getElementById('cancel-playlist').addEventListener('click', hidePlaylistModal);
-    
-    renderPlaylists();
-    
-    // Initialize with all songs view
-    renderAllSongs();
-}
-
-function switchView(view) {
-    currentView = view;
-    document.querySelectorAll('.nav-menu a').forEach(link => {
-        link.classList.toggle('active', link.dataset.view === view);
-    });
-    
-    switch(view) {
-        case 'albums':
-            renderAlbumView();
-            break;
-        case 'artists':
-            renderArtistView();
-            break;
-        case 'playlists':
-            renderPlaylistView();
-            break;
-        default:
-            renderAllSongs();
-    }
-}
-
-function renderAlbumView() {
-    const albums = {};
-    playlist.forEach(track => {
-        if (track.metadata) {
-            const albumName = track.metadata.album || 'Unknown Album';
-            if (!albums[albumName]) {
-                albums[albumName] = {
-                    name: albumName,
-                    artwork: track.metadata.artwork || DEFAULT_COVER,
-                    tracks: []
-                };
-            }
-            albums[albumName].tracks.push(track);
-        }
-    });
-
-    const container = document.getElementById('view-container');
-    container.innerHTML = `
-        <div class="album-grid">
-            ${Object.values(albums).map(album => `
-                <div class="album-card">
-                    <div class="album-art-container">
-                        <img class="album-art" src="${album.artwork}" alt="${album.name}">
-                        <button class="play-overlay" onclick="playAlbum('${album.name}')">
-                            <i class="fas fa-play"></i>
-                        </button>
-                    </div>
-                    <div class="album-info" onclick="showAlbumTracks('${album.name}')">
-                        <h3>${album.name}</h3>
-                        <p>${album.tracks.length} tracks</p>
-                    </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-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;
-            }
-        }
-    });
-
-    const container = document.getElementById('view-container');
-    container.innerHTML = `
-        <div class="artist-grid">
-            ${Object.values(artists).map(artist => `
-                <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}')">
-                            <i class="fas fa-play"></i>
-                        </button>
-                    </div>
-                    <div class="artist-info" onclick="showArtistTracks('${artist.name}')">
-                        <h3>${artist.name}</h3>
-                        <p>${artist.tracks.length} tracks</p>
-                    </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function showAlbumTracks(albumName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.album === albumName
-    );
-    renderTrackList(tracks, `Album: ${albumName}`);
-}
-
-function showArtistTracks(artistName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.artist === artistName
-    );
-    renderTrackList(tracks, `Artist: ${artistName}`);
-}
-
-function renderTrackList(tracks, title) {
-    const container = document.getElementById('view-container');
-    document.getElementById('view-title').textContent = title;
-    
-    container.innerHTML = `
-        <div class="track-list">
-            ${tracks.map((track, index) => `
-                <div class="music-item">
-                    <div class="track-info" onclick="playTrack(${playlist.indexOf(track)})">
-                        <div class="track-name">${track.metadata?.title || track.name}</div>
-                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
-                    </div>
-                    <div class="track-actions">
-                        <button class="menu-trigger" onclick="showTrackMenu(event, ${playlist.indexOf(track)})">
-                            <i class="fas fa-ellipsis-v"></i>
-                        </button>
-                    </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function showTrackMenu(event, trackIndex) {
-    event.stopPropagation();
-    
-    // Remove any existing menus
-    document.querySelectorAll('.context-menu').forEach(m => m.remove());
-    
-    const menu = document.createElement('div');
-    menu.className = 'context-menu';
-    
-    const track = playlist[trackIndex];
-    menu.innerHTML = `
-        <div class="menu-items">
-            <div class="menu-item" onclick="playTrack(${trackIndex})">
-                <i class="fas fa-play"></i> Play
-            </div>
-            <div class="menu-item" onclick="showPlaylistModal(${trackIndex})">
-                <i class="fas fa-plus"></i> Add to Playlist
-            </div>
-            ${currentPlaylist ? `
-                <div class="menu-item" onclick="removeFromPlaylist('${currentPlaylist.name}', ${trackIndex})">
-                    <i class="fas fa-trash"></i> Remove from Playlist
-                </div>
-            ` : ''}
-        </div>
-    `;
-    
-    document.body.appendChild(menu);
-    
-    // Position the menu
-    const rect = event.target.closest('.menu-trigger').getBoundingClientRect();
-    menu.style.position = 'fixed';
-    menu.style.left = `${rect.left - menu.offsetWidth + rect.width}px`;
-    menu.style.top = `${rect.bottom}px`;
-    
-    // Close menu when clicking outside
-    document.addEventListener('click', function closeMenu(e) {
-        if (!menu.contains(e.target) && !e.target.closest('.menu-trigger')) {
-            menu.remove();
-            document.removeEventListener('click', closeMenu);
-        }
-    });
-}
-
-function showPlaylistModal(trackIndex = null) {
-    const modal = document.getElementById('playlist-modal');
-    modal.dataset.trackIndex = trackIndex !== null ? trackIndex : '';
-    
-    // Clear previous input
-    document.getElementById('playlist-name').value = '';
-    
-    // Update modal title and render existing playlists
-    const modalTitle = modal.querySelector('h2');
-    modalTitle.textContent = trackIndex !== null ? 'Add to Playlist' : 'Create Playlist';
-    
-    // Render existing playlists
-    const existingPlaylists = modal.querySelector('.existing-playlists');
-    if (trackIndex !== null) {
-        existingPlaylists.innerHTML = Object.values(playlists).map(playlist => `
-            <div class="existing-playlist-item" onclick="addToExistingPlaylist('${playlist.name}', ${trackIndex})">
-                <i class="fas fa-list"></i>
-                ${playlist.name}
-                <span class="playlist-count">${playlist.tracks.length} tracks</span>
-            </div>
-        `).join('') || '<div class="no-playlists">No playlists yet</div>';
-    } else {
-        existingPlaylists.innerHTML = '';
-    }
-    
-    modal.style.display = 'flex';
-}
-
-function addToExistingPlaylist(playlistName, trackIndex) {
-    const track = playlist[trackIndex];
-    if (!track) return;
-    
-    if (!playlists[playlistName].tracks.some(t => t.path === track.path)) {
-        playlists[playlistName].tracks.push(track);
-        localStorage.setItem('playlists', JSON.stringify(playlists));
-        showNotification(`Added to ${playlistName}`);
-        renderPlaylists();
-        
-        // If we're in playlist view, refresh it
-        if (currentView === 'playlists') {
-            renderPlaylistView();
-        }
-    } else {
-        showNotification('Track already in playlist');
-    }
-    
-    hidePlaylistModal();
-}
-
-function hidePlaylistModal() {
-    document.getElementById('playlist-modal').style.display = 'none';
-    document.getElementById('playlist-name').value = '';
-}
-
-function savePlaylist() {
-    const name = document.getElementById('playlist-name').value.trim();
-    const trackIndex = document.getElementById('playlist-modal').dataset.trackIndex;
-    
-    if (!name) {
-        showNotification('Please enter a playlist name');
-        return;
-    }
-    
-    if (playlists[name]) {
-        showNotification('Playlist already exists');
-        return;
-    }
-    
-    // Create new playlist
-    playlists[name] = {
-        name: name,
-        tracks: []
-    };
-    
-    // If we're adding a specific track
-    if (trackIndex !== '') {
-        const track = playlist[parseInt(trackIndex)];
-        playlists[name].tracks.push(track);
-    }
-    
-    localStorage.setItem('playlists', JSON.stringify(playlists));
-    renderPlaylists();
-    hidePlaylistModal();
-    
-    showNotification('Playlist created');
-    
-    // If we're in playlist view, refresh it
-    if (currentView === 'playlists') {
-        renderPlaylistView();
-    }
-}
-
-function renderPlaylists() {
-    const container = document.getElementById('playlist-list');
-    container.innerHTML = Object.values(playlists).map(playlist => `
-        <li>
-            <a href="#" onclick="showPlaylist('${playlist.name}')">
-                <i class="fas fa-list"></i> ${playlist.name}
-                <span class="playlist-count">${playlist.tracks.length}</span>
-            </a>
-        </li>
-    `).join('');
-}
-
-function showPlaylist(name) {
-    if (!playlists[name]) return;
-    
-    currentPlaylist = playlists[name];
-    isPlayingPlaylist = true;
-    currentView = 'playlist-detail';
-    
-    const container = document.getElementById('view-container');
-    const viewTitle = document.getElementById('view-title');
-    
-    viewTitle.textContent = name;
-    
-    container.innerHTML = `
-        <div class="playlist-header">
-            <div class="playlist-info">
-                <i class="fas fa-list playlist-icon"></i>
-                <div>
-                    <h2>${name}</h2>
-                    <p>${currentPlaylist.tracks.length} tracks</p>
-                </div>
-            </div>
-            <button class="play-playlist" onclick="playPlaylist('${name}')">
-                <i class="fas fa-play"></i> Play
-            </button>
-        </div>
-        <div class="track-list">
-            ${currentPlaylist.tracks.map((track, index) => `
-                <div class="music-item" data-index="${index}">
-                    <div class="track-info" onclick="playPlaylistTrack('${name}', ${index})">
-                        <div class="track-name">${track.metadata?.title || track.name}</div>
-                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
-                    </div>
-                    <div class="track-actions">
-                        <button class="menu-trigger" onclick="showPlaylistTrackMenu(event, '${name}', ${index})">
-                            <i class="fas fa-ellipsis-v"></i>
-                        </button>
-                    </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function playPlaylist(name) {
-    if (!playlists[name] || !playlists[name].tracks.length) return;
-    
-    currentPlaylist = playlists[name];
-    isPlayingPlaylist = true;
-    
-    // Find the first track in the main playlist
-    const firstTrack = currentPlaylist.tracks[0];
-    const mainPlaylistIndex = playlist.findIndex(t => t.path === firstTrack.path);
-    
-    if (mainPlaylistIndex !== -1) {
-        playTrack(mainPlaylistIndex);
-        showNotification(`Playing playlist: ${name}`);
-    }
-}
-
-function playPlaylistTrack(playlistName, index) {
-    if (!playlists[playlistName]) return;
-    
-    currentPlaylist = playlists[playlistName];
-    isPlayingPlaylist = true;
-    const track = currentPlaylist.tracks[index];
-    
-    // Find the track in the main playlist
-    const mainPlaylistIndex = playlist.findIndex(t => t.path === track.path);
-    if (mainPlaylistIndex !== -1) {
-        playTrack(mainPlaylistIndex);
-    }
-}
-
-function showPlaylistTrackMenu(event, playlistName, index) {
-    event.stopPropagation();
-    
-    const menu = document.createElement('div');
-    menu.className = 'context-menu';
-    
-    menu.innerHTML = `
-        <div class="menu-items">
-            <div class="menu-item" onclick="playPlaylistTrack('${playlistName}', ${index})">
-                <i class="fas fa-play"></i> Play
-            </div>
-            <div class="menu-item" onclick="removeFromPlaylist('${playlistName}', ${index})">
-                <i class="fas fa-trash"></i> Remove from Playlist
-            </div>
-        </div>
-    `;
-    
-    // Remove any existing menus
-    document.querySelectorAll('.context-menu').forEach(m => m.remove());
-    
-    document.body.appendChild(menu);
-    
-    // Position the menu
-    const rect = event.target.getBoundingClientRect();
-    menu.style.position = 'fixed';
-    menu.style.left = `${rect.left}px`;
-    menu.style.top = `${rect.bottom}px`;
-    
-    // Close menu when clicking outside
-    document.addEventListener('click', function closeMenu(e) {
-        if (!menu.contains(e.target) && !e.target.closest('.menu-trigger')) {
-            menu.remove();
-            document.removeEventListener('click', closeMenu);
-        }
-    });
-}
-
-function playNext() {
-    if (isPlayingPlaylist && currentPlaylist) {
-        // Find current track index in playlist
-        const currentTrackPath = playlist[currentTrack].path;
-        const playlistTrackIndex = currentPlaylist.tracks.findIndex(t => t.path === currentTrackPath);
-        
-        if (playlistTrackIndex < currentPlaylist.tracks.length - 1) {
-            // Play next track in playlist
-            const nextTrack = currentPlaylist.tracks[playlistTrackIndex + 1];
-            const mainPlaylistIndex = playlist.findIndex(t => t.path === nextTrack.path);
-            if (mainPlaylistIndex !== -1) {
-                playTrack(mainPlaylistIndex);
-                return;
-            }
-        } else {
-            // End of playlist reached
-            currentPlaylist = null;
-            isPlayingPlaylist = false;
-            updatePlayButton(false);
-            return;
-        }
-    }
-    
-    // If no playlist or playlist ended, play next in main playlist
-    if (currentTrack < playlist.length - 1) {
-        playTrack(currentTrack + 1);
-    } else {
-        updatePlayButton(false);
-    }
-}
-
-// Add this function to handle previous track
-function playPrevious() {
-    if (isPlayingPlaylist && currentPlaylist) {
-        // Find current track index in playlist
-        const currentTrackPath = playlist[currentTrack].path;
-        const playlistTrackIndex = currentPlaylist.tracks.findIndex(t => t.path === currentTrackPath);
-        
-        if (playlistTrackIndex > 0) {
-            // Play previous track in playlist
-            const prevTrack = currentPlaylist.tracks[playlistTrackIndex - 1];
-            const mainPlaylistIndex = playlist.findIndex(t => t.path === prevTrack.path);
-            if (mainPlaylistIndex !== -1) {
-                playTrack(mainPlaylistIndex);
-                return;
-            }
-        }
-    }
-    
-    // If no playlist or at start of playlist, play previous in main playlist
-    if (currentTrack > 0) {
-        playTrack(currentTrack - 1);
-    }
-}
-
-// Add this function to initialize audio player event listeners
-function initializeAudioPlayer() {
-    audioPlayer.addEventListener('ended', () => {
-        playNext();
-    });
-
-    audioPlayer.addEventListener('error', (e) => {
-        console.error('Audio player error:', e);
-        showNotification('Error playing track');
-        playNext(); // Skip to next track on error
-    });
-
-    // Add this timeupdate listener here instead of in DOMContentLoaded
-    audioPlayer.addEventListener('timeupdate', () => {
-        const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-        seekSlider.value = percent;
-        currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
-        updateActiveLyricLine(audioPlayer.currentTime);
-    });
-}
-
-// Update the initialization code
-document.addEventListener('DOMContentLoaded', function() {
-    initializeAudioPlayer();
-    
-    document.querySelectorAll('.queue-item-actions button').forEach(button => {
-        button.addEventListener('click', (e) => {
-            e.stopPropagation();
-        });
-    });
-    
-    // Add lyrics toggle handler
-    document.getElementById('lyrics-toggle').addEventListener('click', () => {
-        syncedLyricsMode = !syncedLyricsMode;
-        if (currentTrack !== null) {
-            updatePlayerInfo(playlist[currentTrack]);
-        }
-    });
-}); 
-
-function renderAllSongs() {
-    const container = document.getElementById('view-container');
-    const viewTitle = document.getElementById('view-title');
-    viewTitle.textContent = 'All Songs';
-    
-    container.innerHTML = `
-        <div class="track-list">
-            ${playlist.map((track, index) => `
-                <div class="music-item">
-                    <div class="track-info" onclick="playFromMainPlaylist(${index})">
-                        <div class="track-name">${track.metadata?.title || track.name}</div>
-                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
-                    </div>
-                    <div class="track-actions">
-                        <button class="menu-trigger" onclick="showTrackMenu(event, ${index})">
-                            <i class="fas fa-ellipsis-v"></i>
-                        </button>
-                    </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function filterContent(query) {
-    query = query.toLowerCase();
-    const filteredTracks = playlist.filter(track => 
-        (track.metadata?.title || track.name).toLowerCase().includes(query) ||
-        (track.metadata?.artist || 'Unknown').toLowerCase().includes(query) ||
-        (track.metadata?.album || 'Unknown').toLowerCase().includes(query)
-    );
-    
-    const container = document.getElementById('view-container');
-    const viewTitle = document.getElementById('view-title');
-    viewTitle.textContent = 'Search Results';
-    
-    container.innerHTML = `
-        <div class="track-list">
-            ${filteredTracks.map((track, index) => `
-                <div class="music-item">
-                    <div class="track-info" onclick="playTrack(${playlist.indexOf(track)})">
-                        <div class="track-name">${track.metadata?.title || track.name}</div>
-                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
-                    </div>
-                    <div class="track-actions">
-                        <button class="menu-trigger" onclick="showTrackMenu(event, ${playlist.indexOf(track)})">
-                            <i class="fas fa-ellipsis-v"></i>
-                        </button>
-                    </div>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function renderPlaylistView() {
-    const container = document.getElementById('view-container');
-    const viewTitle = document.getElementById('view-title');
-    viewTitle.textContent = 'Playlists';
-    
-    container.innerHTML = `
-        <div class="playlist-grid">
-            ${Object.values(playlists).map(playlist => `
-                <div class="playlist-card" onclick="showPlaylist('${playlist.name}')">
-                    <div class="playlist-art">
-                        <i class="fas fa-music"></i>
-                    </div>
-                    <h3>${playlist.name}</h3>
-                    <p>${playlist.tracks.length} tracks</p>
-                    <button class="delete-playlist" onclick="deletePlaylist(event, '${playlist.name}')">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            `).join('')}
-        </div>
-    `;
-}
-
-function deletePlaylist(event, playlistName) {
-    event.stopPropagation();
-    if (confirm(`Delete playlist "${playlistName}"?`)) {
-        delete playlists[playlistName];
-        localStorage.setItem('playlists', JSON.stringify(playlists));
-        renderPlaylistView();
-        renderPlaylists();
-        showNotification('Playlist deleted');
-    }
-}
-
-function removeFromPlaylist(playlistName, index) {
-    if (!playlists[playlistName]) return;
-    
-    playlists[playlistName].tracks.splice(index, 1);
-    localStorage.setItem('playlists', JSON.stringify(playlists));
-    
-    // Refresh the current playlist view
-    showPlaylist(playlistName);
-    renderPlaylists();
-    showNotification('Track removed from playlist');
-}
-
-function showNotification(message) {
-    const notification = document.createElement('div');
-    notification.className = 'notification';
-    notification.textContent = message;
-    document.body.appendChild(notification);
-    
-    setTimeout(() => {
-        notification.classList.add('fade-out');
-        setTimeout(() => notification.remove(), 300);
-    }, 2000);
-}
-
-// Add these new functions to handle playing albums and artists
-function playAlbum(albumName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.album === albumName
-    );
-    if (tracks.length > 0) {
-        // Create a temporary playlist for the album
-        currentPlaylist = {
-            name: albumName,
-            tracks: tracks
-        };
-        isPlayingPlaylist = true;
-        
-        // Play the first track
-        const mainPlaylistIndex = playlist.indexOf(tracks[0]);
-        if (mainPlaylistIndex !== -1) {
-            playTrack(mainPlaylistIndex);
-            showNotification(`Playing album: ${albumName}`);
-        }
-    }
-}
-
-function playArtist(artistName) {
-    const tracks = playlist.filter(track => 
-        track.metadata?.artist === artistName
-    );
-    if (tracks.length > 0) {
-        // Create a temporary playlist for the artist
-        currentPlaylist = {
-            name: artistName,
-            tracks: tracks
-        };
-        isPlayingPlaylist = true;
-        
-        // Play the first track
-        const mainPlaylistIndex = playlist.indexOf(tracks[0]);
-        if (mainPlaylistIndex !== -1) {
-            playTrack(mainPlaylistIndex);
-            showNotification(`Playing artist: ${artistName}`);
-        }
-    }
-}
-
-// Add this new function to handle playing from main playlist
-function playFromMainPlaylist(index) {
-    isPlayingPlaylist = false;
-    currentPlaylist = null;
-    playTrack(index);
-}
+[... rest of the original file remains exactly the same ...]