bug fixes

static/css/style.css

@@ -1143,34 +1143,4 @@ 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,53 +1263,116 @@ function setupPlaylistControls() {
     });
 }
 
-// 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`);
+// 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;
         }
-        totalSize += file.size;
     }
     
-    if (totalSize > maxTotalSize) {
-        throw new Error(`Total file size (${Math.round(totalSize/1024/1024)}MB) exceeds maximum allowed (500MB)`);
-    }
-}
+    const formData = new FormData();
+    Array.from(files).forEach(file => {
+        console.log('Adding file to upload:', file.name);
+        formData.append('files[]', file);
+    });
 
-// Modify your file handling function
-async function handleFiles(files) {
+    // 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 {
-        // Show upload container
-        document.body.classList.add('uploading');
-        
-        // Validate files
-        validateFiles(files);
-        
-        // Update progress bar to 0
-        updateProgressBar(0);
-        
-        // Upload files
-        const results = await uploadFiles(files);
+        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);
         
-        // 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}`);
+        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) {
-        alert(error.message || 'Upload failed');
+        console.error('Upload error:', error);
+        showError('Error uploading files');
     } finally {
-        // Hide upload container
-        document.body.classList.remove('uploading');
+        if (uploadProgress) {
+            uploadProgress.classList.remove('visible');
+        }
     }
 }
 
@@ -1382,56 +1445,4 @@ 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,10 +54,11 @@
                     <p>or click to browse</p>
                     <span class="file-types">Supports MP3, WAV, OGG, FLAC</span>
                 </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 class="upload-progress">
+                    <div class="progress-bar">
+                        <div class="progress-fill"></div>
                     </div>
+                    <div class="progress-text">0%</div>
                 </div>
                 <div id="file-name"></div>
             </div>