bug fixes

app.py

@@ -13,6 +13,8 @@ import mutagen.mp3
 import mutagen.flac
 import mutagen.oggvorbis
 from werkzeug.utils import secure_filename
+import logging
+import base64
 
 app = Flask(__name__, static_folder='static')
 # Create a temporary directory for uploads
@@ -27,6 +29,10 @@ FILE_LIFETIME = timedelta(hours=1)  # Files will be deleted after 1 hour
 # Store file creation times
 file_timestamps = {}
 
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
 def allowed_file(filename):
     return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
@@ -46,30 +52,66 @@ def extract_metadata(filepath):
             'artist': 'Unknown Artist',
             'album': None,
             'genre': None,
-            'date': None
+            'date': None,
+            'artwork': None
         }
 
         # Get the original filename without timestamp prefix and extension
         original_filename = os.path.splitext(os.path.basename(filepath))[0]
         if '_' in original_filename:
-            # Remove timestamp prefix (YYYYMMDD_HHMMSS_)
             original_filename = '_'.join(original_filename.split('_')[2:])
        
         try:
             # Handle MP3 files
             if isinstance(audio, mutagen.mp3.MP3):
                 try:
-                    id3 = EasyID3(filepath)
+                    # Try to get ID3 tags first
+                    if audio.tags:
+                        id3 = audio.tags
+                    else:
+                        # If no tags exist, try to create them
+                        id3 = mutagen.id3.ID3(filepath)
+                    
+                    # Get basic metadata
                     metadata.update({
-                        'title': id3.get('title', [''])[0],
-                        'artist': id3.get('artist', ['Unknown Artist'])[0],
-                        'album': id3.get('album', [''])[0],
-                        'genre': id3.get('genre', [''])[0],
-                        'date': id3.get('date', [''])[0]
+                        'title': str(id3.get('TIT2', [''])[0]) if 'TIT2' in id3 else '',
+                        'artist': str(id3.get('TPE1', ['Unknown Artist'])[0]) if 'TPE1' in id3 else 'Unknown Artist',
+                        'album': str(id3.get('TALB', [''])[0]) if 'TALB' in id3 else '',
+                        'genre': str(id3.get('TCON', [''])[0]) if 'TCON' in id3 else '',
+                        'date': str(id3.get('TDRC', [''])[0]) if 'TDRC' in id3 else ''
                     })
-                except:
-                    metadata['title'] = original_filename
-            
+                    
+                    # Extract artwork - try different APIC frame keys
+                    apic_keys = ['APIC:', 'APIC:Cover', 'APIC:Front Cover', 'APIC']
+                    for key in apic_keys:
+                        if key in id3:
+                            artwork = id3[key]
+                            if artwork and artwork.data:
+                                logger.info(f"Found artwork in {key} frame")
+                                metadata['artwork'] = {
+                                    'mime': artwork.mime,
+                                    'data': base64.b64encode(artwork.data).decode('utf-8')
+                                }
+                                break
+                    
+                    if not metadata['artwork']:
+                        logger.info("No artwork found in ID3 tags")
+                        
+                except Exception as e:
+                    logger.error(f"Error reading ID3 tags: {str(e)}")
+                    # Fallback to EasyID3 if ID3 fails
+                    try:
+                        easy_id3 = EasyID3(filepath)
+                        metadata.update({
+                            'title': easy_id3.get('title', [''])[0],
+                            'artist': easy_id3.get('artist', ['Unknown Artist'])[0],
+                            'album': easy_id3.get('album', [''])[0],
+                            'genre': easy_id3.get('genre', [''])[0],
+                            'date': easy_id3.get('date', [''])[0]
+                        })
+                    except:
+                        metadata['title'] = original_filename
+
             # Handle FLAC files
             elif isinstance(audio, mutagen.flac.FLAC):
                 metadata.update({
@@ -79,6 +121,14 @@ def extract_metadata(filepath):
                     'genre': audio.tags.get('GENRE', [''])[0] if audio.tags and 'GENRE' in audio.tags else None,
                     'date': audio.tags.get('DATE', [''])[0] if audio.tags and 'DATE' in audio.tags else None
                 })
+                
+                # Extract artwork from pictures
+                if audio.pictures:
+                    picture = audio.pictures[0]
+                    metadata['artwork'] = {
+                        'mime': picture.mime,
+                        'data': base64.b64encode(picture.data).decode('utf-8')
+                    }
             
             # Handle OGG files
             elif isinstance(audio, mutagen.oggvorbis.OggVorbis):
@@ -89,18 +139,30 @@ def extract_metadata(filepath):
                     'genre': audio.get('genre', [''])[0] if 'genre' in audio else None,
                     'date': audio.get('date', [''])[0] if 'date' in audio else None
                 })
+                
+                # Extract artwork if available (some OGG files store artwork in metadata)
+                if 'METADATA_BLOCK_PICTURE' in audio:
+                    try:
+                        picture_data = base64.b64decode(audio['METADATA_BLOCK_PICTURE'][0])
+                        picture = mutagen.flac.Picture(picture_data)
+                        metadata['artwork'] = {
+                            'mime': picture.mime,
+                            'data': base64.b64encode(picture.data).decode('utf-8')
+                        }
+                    except:
+                        pass
             
             # If title is not found or empty, use original filename
             if not metadata['title']:
                 metadata['title'] = original_filename
                 
         except Exception as e:
-            app.logger.error(f"Error reading tags: {str(e)}")
+            logger.error(f"Error reading tags: {str(e)}")
             metadata['title'] = original_filename
             
         return metadata
     except Exception as e:
-        app.logger.error(f"Error extracting metadata: {str(e)}")
+        logger.error(f"Error extracting metadata: {str(e)}")
         return {
             'title': os.path.splitext(os.path.basename(filepath))[0].split('_', 2)[-1],
             'artist': 'Unknown Artist'
@@ -149,14 +211,21 @@ def request_entity_too_large(error):
 
 @app.route('/upload', methods=['POST'])
 def upload_file():
+    logger.info('Upload request received')
+    
     if 'files[]' not in request.files:
+        logger.warning('No files in request')
         return jsonify({'success': False, 'error': 'No files uploaded'}), 400
     
     files = request.files.getlist('files[]')
+    logger.info(f'Received {len(files)} files')
+    
     if not files or all(file.filename == '' for file in files):
+        logger.warning('No selected files')
         return jsonify({'success': False, 'error': 'No selected files'}), 400
 
     if len(files) > app.config['MAX_FILES']:
+        logger.warning(f'Too many files: {len(files)}')
         return jsonify({
             'success': False,
             'error': f"Maximum {app.config['MAX_FILES']} files can be uploaded at once"
@@ -164,6 +233,7 @@ def upload_file():
 
     results = []
     for file in files:
+        logger.info(f'Processing file: {file.filename}')
         if file and allowed_file(file.filename):
             try:
                 filename = secure_filename(file.filename)
@@ -172,10 +242,12 @@ def upload_file():
                 
                 filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
                 file.save(filepath)
+                logger.info(f'File saved: {filepath}')
                 
                 file_timestamps[filename] = datetime.now()
                 
                 if not os.path.exists(filepath):
+                    logger.error(f'Failed to save file: {filepath}')
                     results.append({
                         'filename': file.filename,
                         'success': False,
@@ -183,8 +255,8 @@ def upload_file():
                     })
                     continue
                 
-                # Extract metadata
                 metadata = extract_metadata(filepath)
+                logger.info(f'Metadata extracted: {metadata}')
                     
                 results.append({
                     'filename': file.filename,
@@ -193,22 +265,21 @@ def upload_file():
                     'metadata': metadata
                 })
             except Exception as e:
-                app.logger.error(f"Upload error for {file.filename}: {str(e)}")
+                logger.error(f'Upload error for {file.filename}: {str(e)}')
                 results.append({
                     'filename': file.filename,
                     'success': False,
                     'error': 'Server error during upload'
                 })
         else:
+            logger.warning(f'Invalid file type: {file.filename}')
             results.append({
                 'filename': file.filename,
                 'success': False,
                 'error': 'Invalid file type'
             })
 
-    # Debug log to check the response
-    app.logger.debug(f"Upload response: {results}")
-
+    logger.info(f'Upload complete. Results: {results}')
     return jsonify({
         'success': True,
         'files': results

static/css/style.css

@@ -440,14 +440,27 @@
 .track-artwork {
     width: 48px;
     height: 48px;
+    min-width: 48px;
     border-radius: var(--radius-md);
     background: var(--surface-light);
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--surface-light);
+}
+
+.track-artwork i {
+    font-size: 1.5rem;
     color: var(--text-secondary);
 }
 
+.track-artwork img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 .music-controls {
     display: flex;
     align-items: center;
@@ -491,13 +504,18 @@
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
+    width: 120px;
+    padding: 1rem;
     background: var(--surface-color);
-    padding: 0.75rem;
+    border: 1px solid var(--surface-light);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
     opacity: 0;
     visibility: hidden;
     transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .volume-control:hover .volume-slider-container {
@@ -506,6 +524,54 @@
     transform: translateX(-50%) translateY(-8px);
 }
 
+/* Volume slider track */
+.volume-slider-container .volume-track {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background: var(--surface-light);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+/* Volume progress bar */
+.volume-progress {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--primary-color);
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+/* Volume handle */
+.volume-handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    background: var(--primary-color);
+    border: 2px solid white;
+    border-radius: 50%;
+    box-shadow: var(--shadow-sm);
+    pointer-events: none;
+}
+
+/* Volume input range styling */
+#volume {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+
 /* Keyboard shortcuts */
 .keyboard-shortcuts {
     position: fixed;
@@ -840,4 +906,241 @@ canvas {
     top: 0;
     left: 0;
     z-index: 1;
+}
+
+/* Add these styles for the no-tracks message */
+.no-tracks-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.no-tracks-message i {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.no-tracks-message p {
+    margin: 0 0 1rem 0;
+}
+
+.no-tracks-message .upload-btn {
+    padding: 0.5rem 1rem;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.no-tracks-message .upload-btn:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+}
+
+/* Style the file input and upload button */
+#audio-upload {
+    display: none;  /* Hide the default input */
+}
+
+.upload-content .upload-btn,
+.no-tracks-message .upload-btn {
+    padding: 0.75rem 1.5rem;
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.upload-content .upload-btn:hover,
+.no-tracks-message .upload-btn:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+}
+
+/* Fix dark mode control buttons */
+[data-theme="dark"] .control-btn {
+    background: var(--surface-light);
+    color: var(--text-primary);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .control-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme="dark"] .control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Fix volume button styling */
+.volume-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--surface-light);
+    color: var(--text-primary);
+    border: 1px solid var(--surface-light);
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.volume-btn:hover {
+    background: var(--surface-light);
+    transform: translateY(-2px);
+}
+
+/* Dark mode volume button */
+[data-theme="dark"] .volume-btn {
+    background: var(--surface-light);
+    color: var(--text-primary);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .volume-btn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Volume slider improvements */
+.volume-slider-container {
+    width: 120px;
+    padding: 1rem;
+    background: var(--surface-color);
+    border: 1px solid var(--surface-light);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Volume progress bar */
+.volume-progress {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    background: var(--primary-color);
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+/* Volume handle */
+.volume-handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    background: var(--primary-color);
+    border: 2px solid white;
+    border-radius: 50%;
+    box-shadow: var(--shadow-sm);
+    pointer-events: none;
+}
+
+/* Volume input range styling */
+#volume {
+    width: 100%;
+    -webkit-appearance: none;
+    background: transparent;
+    cursor: pointer;
+}
+
+#volume::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    background: var(--surface-light);
+    border-radius: 2px;
+    border: none;
+}
+
+#volume::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 0;
+    width: 0;
+}
+
+#volume::-moz-range-track {
+    width: 100%;
+    height: 4px;
+    background: var(--surface-light);
+    border-radius: 2px;
+    border: none;
+}
+
+#volume::-moz-range-thumb {
+    height: 0;
+    width: 0;
+    border: none;
+}
+
+/* Playlist item artwork */
+.playlist-item .track-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+}
+
+.playlist-item .track-number {
+    width: 24px;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.playlist-item .track-artwork {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+}
+
+/* Active track styling */
+.playlist-item.active .track-artwork {
+    border-color: var(--primary-color);
+}
+
+.playlist-item.active .track-artwork i {
+    color: var(--primary-color);
+}
+
+/* Now playing info artwork */
+.now-playing-info .track-artwork {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    border-radius: var(--radius-md);
+}
+
+.now-playing-info .track-artwork i {
+    font-size: 1.75rem;
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .track-artwork {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .playlist-item.active .track-artwork {
+    border-color: var(--primary-color);
+    background: rgba(76, 175, 80, 0.1);
 }

static/js/main.js

@@ -527,6 +527,7 @@ function setupOrbitControls() {
 
 // Enhanced file upload handling
 function setupUploadHandlers() {
+    console.log('Setting up upload handlers...');
     const uploadArea = document.getElementById('upload-area');
     const fileInput = document.getElementById('audio-upload');
     const uploadProgress = document.querySelector('.upload-progress');
@@ -539,107 +540,34 @@ function setupUploadHandlers() {
         return;
     }
 
+    // Add logging for drag and drop events
     uploadArea.addEventListener('dragover', (e) => {
         e.preventDefault();
         uploadArea.classList.add('dragover');
+        console.log('File being dragged over upload area');
     });
 
     uploadArea.addEventListener('dragleave', () => {
         uploadArea.classList.remove('dragover');
+        console.log('File drag left upload area');
     });
 
     uploadArea.addEventListener('drop', (e) => {
         e.preventDefault();
         uploadArea.classList.remove('dragover');
+        console.log('Files dropped:', e.dataTransfer.files.length, 'files');
         handleFiles(e.dataTransfer.files);
     });
 
     uploadArea.addEventListener('click', () => {
+        console.log('Upload area clicked, triggering file input');
         fileInput.click();
     });
 
     fileInput.addEventListener('change', (e) => {
+        console.log('Files selected:', e.target.files.length, 'files');
         handleFiles(e.target.files);
     });
-
-    // Enhanced file upload with progress
-    async function handleFiles(files) {
-        if (!files || files.length === 0) {
-            showError('No files selected');
-            return;
-        }
-
-        if (!audioContext) {
-            try {
-                initAudio();
-            } catch (error) {
-                console.error('Failed to initialize audio:', error);
-                showError('Failed to initialize audio system');
-                return;
-            }
-        }
-        
-        const formData = new FormData();
-        Array.from(files).forEach(file => {
-            formData.append('files[]', file);
-        });
-
-        // Show upload progress if elements exist
-        if (uploadProgress && progressFill && progressText) {
-            uploadProgress.classList.add('visible');
-            progressFill.style.width = '0%';
-            progressText.textContent = '0%';
-        }
-        
-        try {
-            const response = await fetch('/upload', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
-            const data = await response.json();
-            
-            if (data.success) {
-                showSuccess('Files uploaded successfully');
-                
-                // Filter successful uploads and create playlist
-                const successfulFiles = data.files.filter(file => file.success);
-                if (successfulFiles.length === 0) {
-                    showError('No files were uploaded successfully');
-                    return;
-                }
-
-                // Add originalIndex to each track
-                playlist = successfulFiles.map((file, index) => ({
-                    name: file.filename,
-                    url: file.filepath,
-                    metadata: file.metadata,
-                    originalIndex: index
-                }));
-                
-                createPlaylist();
-                if (playlist.length > 0) {
-                    playTrack(0);
-                }
-            } else {
-                showError(data.error || 'Upload failed');
-            }
-        } catch (error) {
-            console.error('Upload error:', error);
-            showError('Error uploading files');
-        } finally {
-            // Hide upload progress if elements exist
-            if (uploadProgress && progressFill && progressText) {
-                uploadProgress.classList.remove('visible');
-                progressFill.style.width = '0%';
-                progressText.textContent = '0%';
-            }
-        }
-    }
 }
 
 // Enhanced toast notifications with null checks
@@ -1027,8 +955,25 @@ function updateVisualization(dataArray) {
 // Create playlist UI
 function createPlaylist() {
     const tracksList = document.querySelector('.tracks-list');
+    const noTracksMessage = document.querySelector('.no-tracks-message');
+    
+    // Clear existing tracks
     tracksList.innerHTML = '';
     
+    if (!playlist || playlist.length === 0) {
+        // Show no tracks message if playlist is empty
+        if (noTracksMessage) {
+            noTracksMessage.style.display = 'flex';
+        }
+        return;
+    }
+    
+    // Hide no tracks message if we have tracks
+    if (noTracksMessage) {
+        noTracksMessage.style.display = 'none';
+    }
+    
+    // Create track elements
     playlist.forEach((track, index) => {
         const metadata = track.metadata || {};
         const duration = metadata.duration ? formatTime(metadata.duration) : '0:00';
@@ -1040,6 +985,12 @@ function createPlaylist() {
         trackElement.innerHTML = `
             <div class="track-info">
                 <span class="track-number">${index + 1}</span>
+                <div class="track-artwork">
+                    ${metadata.artwork ? 
+                        `<img src="data:${metadata.artwork.mime};base64,${metadata.artwork.data}" alt="Album artwork">` :
+                        '<i class="fas fa-music"></i>'
+                    }
+                </div>
                 <div class="track-content">
                     <div class="track-title">
                         ${title}
@@ -1066,6 +1017,7 @@ function updateNowPlayingInfo() {
         
         const nowPlayingTitle = document.querySelector('.now-playing-title');
         const nowPlayingArtist = document.querySelector('.now-playing-artist');
+        const trackArtwork = document.querySelector('.now-playing-info .track-artwork');
         
         if (nowPlayingTitle) {
             nowPlayingTitle.textContent = metadata.title || track.name;
@@ -1078,6 +1030,12 @@ function updateNowPlayingInfo() {
             }
             nowPlayingArtist.textContent = artistInfo;
         }
+        
+        if (trackArtwork) {
+            trackArtwork.innerHTML = metadata.artwork ? 
+                `<img src="data:${metadata.artwork.mime};base64,${metadata.artwork.data}" alt="Album artwork">` :
+                '<i class="fas fa-music"></i>';
+        }
     }
 }
 
@@ -1303,4 +1261,188 @@ function setupPlaylistControls() {
         isRepeatActive = !isRepeatActive;
         repeatBtn.classList.toggle('active', isRepeatActive);
     });
-}
+}
+
+// Update handleFiles to append new tracks
+async function handleFiles(files) {
+    console.log('Handling files:', files.length, 'files');
+    
+    if (!files || files.length === 0) {
+        console.warn('No files selected');
+        showError('No files selected');
+        return;
+    }
+
+    if (!audioContext) {
+        try {
+            console.log('Initializing audio context...');
+            initAudio();
+        } catch (error) {
+            console.error('Failed to initialize audio:', error);
+            showError('Failed to initialize audio system');
+            return;
+        }
+    }
+    
+    const formData = new FormData();
+    Array.from(files).forEach(file => {
+        console.log('Adding file to upload:', file.name);
+        formData.append('files[]', file);
+    });
+
+    // Show upload progress
+    const uploadProgress = document.querySelector('.upload-progress');
+    const progressFill = uploadProgress?.querySelector('.progress-fill');
+    const progressText = uploadProgress?.querySelector('.progress-text');
+    
+    if (uploadProgress && progressFill && progressText) {
+        uploadProgress.classList.add('visible');
+        progressFill.style.width = '0%';
+        progressText.textContent = '0%';
+    }
+    
+    try {
+        console.log('Starting file upload...');
+        const response = await fetch('/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log('Upload response:', data);
+        
+        if (data.success) {
+            console.log('Files uploaded successfully');
+            showSuccess('Files uploaded successfully');
+            
+            const successfulFiles = data.files.filter(file => file.success);
+            console.log('Successful uploads:', successfulFiles.length, 'files');
+            
+            if (successfulFiles.length === 0) {
+                console.warn('No files were uploaded successfully');
+                showError('No files were uploaded successfully');
+                return;
+            }
+
+            // Get the next index for new tracks
+            const startIndex = playlist.length;
+
+            // Create new track objects
+            const newTracks = successfulFiles.map((file, index) => ({
+                name: file.filename,
+                url: file.filepath,
+                metadata: file.metadata,
+                originalIndex: startIndex + index
+            }));
+
+            // Append new tracks to existing playlist
+            playlist = [...playlist, ...newTracks];
+            
+            console.log('Updated playlist:', playlist);
+            createPlaylist();
+            
+            // Only start playing if nothing is currently playing
+            if (playlist.length > 0 && !isPlaying) {
+                console.log('Playing first track...');
+                playTrack(0);
+            }
+            
+            // Enable player controls
+            document.querySelectorAll('.control-btn').forEach(btn => {
+                btn.disabled = false;
+            });
+
+            // Highlight currently playing track if any
+            if (currentTrackIndex >= 0) {
+                document.querySelectorAll('.playlist-item').forEach((item, i) => {
+                    item.classList.toggle('active', i === currentTrackIndex);
+                });
+            }
+        } else {
+            console.error('Upload failed:', data.error);
+            showError(data.error || 'Upload failed');
+        }
+    } catch (error) {
+        console.error('Upload error:', error);
+        showError('Error uploading files');
+    } finally {
+        if (uploadProgress) {
+            uploadProgress.classList.remove('visible');
+        }
+    }
+}
+
+// Update volume control functions
+function setupVolumeControl() {
+    const volumeBtn = document.querySelector('.volume-btn');
+    const volumeSlider = document.getElementById('volume');
+    const volumeProgress = document.querySelector('.volume-progress');
+    const volumeHandle = document.querySelector('.volume-handle');
+
+    if (!volumeBtn || !volumeSlider || !volumeProgress || !volumeHandle) {
+        console.error('Volume control elements not found');
+        return;
+    }
+
+    // Initialize volume
+    let currentVolume = localStorage.getItem('volume') || 0.5;
+    updateVolume(currentVolume);
+
+    // Update volume on slider change
+    volumeSlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        updateVolume(value);
+    });
+
+    // Update volume on button click (mute/unmute)
+    volumeBtn.addEventListener('click', () => {
+        if (audioElement) {
+            if (audioElement.volume > 0) {
+                // Store current volume before muting
+                localStorage.setItem('previousVolume', audioElement.volume);
+                updateVolume(0);
+            } else {
+                // Restore previous volume or default to 0.5
+                const previousVolume = localStorage.getItem('previousVolume') || 0.5;
+                updateVolume(previousVolume);
+            }
+        }
+    });
+
+    function updateVolume(value) {
+        // Update audio element
+        if (audioElement) {
+            audioElement.volume = value;
+        }
+
+        // Update UI
+        volumeProgress.style.width = `${value * 100}%`;
+        volumeHandle.style.left = `${value * 100}%`;
+        volumeSlider.value = value;
+
+        // Update button icon
+        const icon = volumeBtn.querySelector('i');
+        if (icon) {
+            if (value === 0) {
+                icon.className = 'fas fa-volume-mute';
+            } else if (value < 0.5) {
+                icon.className = 'fas fa-volume-down';
+            } else {
+                icon.className = 'fas fa-volume-up';
+            }
+        }
+
+        // Save volume to localStorage
+        localStorage.setItem('volume', value);
+    }
+}
+
+// Add to initialization
+document.addEventListener('DOMContentLoaded', () => {
+    // ... other initialization code ...
+    setupVolumeControl();
+});

templates/index.html

@@ -129,9 +129,11 @@
                     <i class="fas fa-volume-up"></i>
                 </button>
                 <div class="volume-slider-container">
-                    <div class="volume-progress"></div>
-                    <div class="volume-handle"></div>
-                    <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
+                    <div class="volume-track">
+                        <div class="volume-progress"></div>
+                        <div class="volume-handle"></div>
+                        <input type="range" id="volume" min="0" max="1" step="0.01" value="0.5">
+                    </div>
                 </div>
             </div>
         </div>