bug fixes

static/css/style.css

@@ -1143,4 +1143,34 @@ canvas {
 [data-theme="dark"] .playlist-item.active .track-artwork {
     border-color: var(--primary-color);
     background: rgba(76, 175, 80, 0.1);
+}
+
+/* Add these styles */
+.upload-progress-container {
+    width: 100%;
+    max-width: 600px;
+    margin: 20px auto;
+    display: none; /* Will be shown when upload starts */
+}
+
+.progress {
+    width: 100%;
+    height: 20px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background-color: #4CAF50;
+    color: white;
+    text-align: center;
+    line-height: 20px;
+    transition: width 0.3s ease;
+}
+
+/* Show progress container during upload */
+.uploading .upload-progress-container {
+    display: block;
 }

static/js/main.js

@@ -1263,116 +1263,53 @@ function setupPlaylistControls() {
     });
 }
 
-// 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;
+// Add this function to handle file size validation
+function validateFiles(files) {
+    const maxFileSize = 200 * 1024 * 1024; // 200MB
+    const maxTotalSize = 500 * 1024 * 1024; // 500MB total
+    let totalSize = 0;
+    
+    for (const file of files) {
+        if (file.size > maxFileSize) {
+            throw new Error(`File ${file.name} is too large. Maximum size is 200MB`);
         }
+        totalSize += file.size;
     }
     
-    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%';
+    if (totalSize > maxTotalSize) {
+        throw new Error(`Total file size (${Math.round(totalSize/1024/1024)}MB) exceeds maximum allowed (500MB)`);
     }
-    
-    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);
+// Modify your file handling function
+async function handleFiles(files) {
+    try {
+        // Show upload container
+        document.body.classList.add('uploading');
         
-        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);
-                });
+        // Validate files
+        validateFiles(files);
+        
+        // Update progress bar to 0
+        updateProgressBar(0);
+        
+        // Upload files
+        const results = await uploadFiles(files);
+        
+        // Process results
+        for (const result of results) {
+            if (result.success) {
+                // Handle successful upload
+                addTrackToPlaylist(result);
+            } else {
+                console.error(`Failed to upload ${result.filename}: ${result.error}`);
             }
-        } else {
-            console.error('Upload failed:', data.error);
-            showError(data.error || 'Upload failed');
         }
     } catch (error) {
-        console.error('Upload error:', error);
-        showError('Error uploading files');
+        alert(error.message || 'Upload failed');
     } finally {
-        if (uploadProgress) {
-            uploadProgress.classList.remove('visible');
-        }
+        // Hide upload container
+        document.body.classList.remove('uploading');
     }
 }
 
@@ -1445,4 +1382,56 @@ function setupVolumeControl() {
 document.addEventListener('DOMContentLoaded', () => {
     // ... other initialization code ...
     setupVolumeControl();
-});
+});
+
+function updateProgressBar(percent) {
+    const progressBar = document.querySelector('.progress-bar');
+    if (progressBar) {
+        progressBar.style.width = `${percent}%`;
+        progressBar.textContent = `${Math.round(percent)}%`;
+    }
+}
+
+async function uploadFiles(files) {
+    const formData = new FormData();
+    let totalSize = 0;
+    let uploadedSize = 0;
+
+    // Calculate total size
+    for (const file of files) {
+        totalSize += file.size;
+        formData.append('files[]', file);
+    }
+
+    try {
+        const response = await fetch('/upload', {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'Accept': 'application/json',
+            },
+            onUploadProgress: (progressEvent) => {
+                const percent = (progressEvent.loaded / totalSize) * 100;
+                updateProgressBar(percent);
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+        updateProgressBar(100);
+        
+        // Handle the upload response
+        if (result.success) {
+            return result.files;
+        } else {
+            throw new Error(result.error || 'Upload failed');
+        }
+    } catch (error) {
+        console.error('Upload error:', error);
+        updateProgressBar(0);
+        throw error;
+    }
+}

templates/index.html

@@ -54,11 +54,10 @@
                     <p>or click to browse</p>
                     <span class="file-types">Supports MP3, WAV, OGG, FLAC</span>
                 </div>
-                <div class="upload-progress">
-                    <div class="progress-bar">
-                        <div class="progress-fill"></div>
+                <div class="upload-progress-container">
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                     </div>
-                    <div class="progress-text">0%</div>
                 </div>
                 <div id="file-name"></div>
             </div>