css update mobile

app.py

@@ -14,7 +14,7 @@ import mutagen.flac
 import mutagen.oggvorbis
 from werkzeug.utils import secure_filename
 
-app = Flask(__name__)
+app = Flask(__name__, static_folder='static')
 # Create a temporary directory for uploads
 TEMP_UPLOAD_DIR = tempfile.mkdtemp()
 app.config['UPLOAD_FOLDER'] = TEMP_UPLOAD_DIR
@@ -206,6 +206,9 @@ def upload_file():
                 'error': 'Invalid file type'
             })
 
+    # Debug log to check the response
+    app.logger.debug(f"Upload response: {results}")
+
     return jsonify({
         'success': True,
         'files': results

static/css/style.css

@@ -886,4 +886,105 @@ input[type="file"] {
     display: block;
     opacity: 1;
     transform: translateY(0);
+}
+
+/* Add these styles for the visualization type dropdown */
+.viz-type-dropdown {
+    position: fixed;
+    top: 60px;
+    right: -200px;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    border-radius: 8px;
+    padding: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: right 0.3s ease;
+    z-index: 99;
+    width: 200px;
+}
+
+.viz-type-dropdown.visible {
+    right: 16px;
+}
+
+.viz-type-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.viz-type-options button {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    padding: 8px 16px;
+    text-align: left;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    width: 100%;
+}
+
+.viz-type-options button:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.viz-type-options button.active {
+    background: var(--primary-color);
+    color: white;
+}
+
+/* Update mobile styles */
+@media screen and (max-width: 768px) {
+    .header-controls {
+        gap: 4px;
+    }
+
+    .header-btn {
+        width: 32px;
+        height: 32px;
+    }
+
+    .viz-type-dropdown {
+        top: 50px;
+        width: calc(100% - 32px);
+        right: -100%;
+    }
+
+    .viz-type-dropdown.visible {
+        right: 16px;
+    }
+}
+
+/* Fix the main content positioning */
+.main-content {
+    position: fixed;
+    top: 60px; /* Adjust based on header height */
+    right: -420px;
+    width: 400px;
+    max-height: calc(100vh - 180px); /* Adjust for header and player */
+    z-index: 10;
+    overflow: visible;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 16px;
+    box-sizing: border-box;
+}
+
+/* Update the mobile layout */
+@media screen and (max-width: 768px) {
+    .main-content {
+        width: 100%;
+        right: -100%;
+        padding: 8px;
+    }
+
+    .main-content.visible {
+        right: 0;
+    }
+
+    .playlist-container,
+    .upload-area {
+        margin: 0;
+        border-radius: 8px;
+    }
 }

static/js/main.js

@@ -276,22 +276,30 @@ async function handleFiles(files) {
         const data = await response.json();
         
         if (data.success) {
-            playlist = data.files.map(file => ({
+            // Debug log to check the response
+            console.log('Upload response:', data);
+            
+            playlist = data.files.filter(file => file.success).map(file => ({
                 name: file.filename,
                 url: file.filepath,
                 metadata: file.metadata
             }));
             
+            // Debug log to check the playlist
+            console.log('Created playlist:', playlist);
+            
             createPlaylist();
-            if (playlist.length > 0) {
+            if (playlist.length > 0 && playlist[0].url) {
                 playTrack(0);
+            } else {
+                showError('No valid tracks were uploaded');
             }
         } else {
-            showError(data.error);
+            showError(data.error || 'Upload failed');
         }
     } catch (error) {
-        showError('Error uploading files');
         console.error('Upload error:', error);
+        showError('Error uploading files');
     }
 }
 
@@ -528,7 +536,7 @@ function updateNowPlayingInfo() {
 
 // Play selected track
 function playTrack(index) {
-    if (index < 0 || index >= playlist.length) return;
+    if (!playlist || index < 0 || index >= playlist.length) return;
     
     currentTrackIndex = index;
     const track = playlist[index];
@@ -537,33 +545,39 @@ function playTrack(index) {
         initAudio();
     }
 
+    if (!track || !track.url) {
+        console.error('Invalid track or track URL');
+        showError('Invalid track data');
+        return;
+    }
+
     // Update playlist UI
     document.querySelectorAll('.playlist-item').forEach((item, i) => {
         item.classList.toggle('active', i === index);
     });
 
     // Enable controls
-    document.getElementById('play-pause').disabled = false;
-    document.querySelector('.previous-btn').disabled = false;
-    document.querySelector('.next-btn').disabled = false;
+    const playPauseBtn = document.getElementById('play-pause');
+    const prevBtn = document.querySelector('.previous-btn');
+    const nextBtn = document.querySelector('.next-btn');
+
+    if (playPauseBtn) playPauseBtn.disabled = false;
+    if (prevBtn) prevBtn.disabled = false;
+    if (nextBtn) nextBtn.disabled = false;
 
     // Update audio source and play
     audioElement.src = track.url;
     audioElement.play()
         .then(() => {
             isPlaying = true;
-            document.getElementById('play-pause').innerHTML = '<i class="fas fa-pause"></i>';
-            updateNowPlayingInfo();
-
-            // Add event listeners for time updates if not already added
-            if (!audioElement.onended) {
-                audioElement.addEventListener('timeupdate', updateTimeDisplay);
-                audioElement.addEventListener('ended', handleTrackEnd);
+            if (playPauseBtn) {
+                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
             }
+            updateNowPlayingInfo();
         })
         .catch(error => {
             console.error('Error playing track:', error);
-            showError('Error playing track');
+            showError('Error playing track: ' + error.message);
         });
 }
 
@@ -574,39 +588,85 @@ function setupToggleHandlers() {
     const playlistContainer = document.querySelector('.playlist-container');
     const uploadToggleBtn = document.querySelector('.upload-toggle-btn');
     const playlistToggleBtn = document.querySelector('.playlist-toggle-btn');
+    const vizTypeBtn = document.querySelector('.viz-type-btn');
+    const vizTypeDropdown = document.querySelector('.viz-type-dropdown');
+    const vizTypeOptions = document.querySelectorAll('.viz-type-options button');
 
     // Show playlist by default
-    mainContent.classList.add('visible');
-    playlistContainer.classList.add('visible');
-    playlistToggleBtn.classList.add('active');
+    mainContent?.classList.add('visible');
+    playlistContainer?.classList.add('visible');
+    playlistToggleBtn?.classList.add('active');
 
     uploadToggleBtn?.addEventListener('click', () => {
-        const isVisible = uploadArea.classList.contains('visible');
+        const isVisible = uploadArea?.classList.contains('visible');
         
         // Hide playlist if it's visible
-        playlistContainer.classList.remove('visible');
-        playlistToggleBtn.classList.remove('active');
+        playlistContainer?.classList.remove('visible');
+        playlistToggleBtn?.classList.remove('active');
         
         // Toggle upload area
-        uploadArea.classList.toggle('visible');
-        uploadToggleBtn.classList.toggle('active');
+        uploadArea?.classList.toggle('visible');
+        uploadToggleBtn?.classList.toggle('active');
         
         // Show/hide main content
-        mainContent.classList.toggle('visible', !isVisible || playlistContainer.classList.contains('visible'));
+        mainContent?.classList.toggle('visible', !isVisible || playlistContainer?.classList.contains('visible'));
     });
 
     playlistToggleBtn?.addEventListener('click', () => {
-        const isVisible = playlistContainer.classList.contains('visible');
+        const isVisible = playlistContainer?.classList.contains('visible');
         
         // Hide upload area if it's visible
-        uploadArea.classList.remove('visible');
-        uploadToggleBtn.classList.remove('active');
+        uploadArea?.classList.remove('visible');
+        uploadToggleBtn?.classList.remove('active');
         
         // Toggle playlist
-        playlistContainer.classList.toggle('visible');
-        playlistToggleBtn.classList.toggle('active');
+        playlistContainer?.classList.toggle('visible');
+        playlistToggleBtn?.classList.toggle('active');
         
         // Show/hide main content
-        mainContent.classList.toggle('visible', !isVisible || uploadArea.classList.contains('visible'));
+        mainContent?.classList.toggle('visible', !isVisible || uploadArea?.classList.contains('visible'));
+    });
+
+    // Handle visualization type button click
+    vizTypeBtn?.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent document click from immediately closing
+        vizTypeDropdown?.classList.toggle('visible');
+        vizTypeBtn?.classList.toggle('active');
+        
+        // Close other dropdowns
+        uploadArea?.classList.remove('visible');
+        uploadToggleBtn?.classList.remove('active');
+        playlistContainer?.classList.remove('visible');
+        playlistToggleBtn?.classList.remove('active');
+    });
+
+    // Handle visualization type selection
+    vizTypeOptions?.forEach(button => {
+        button.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent document click from closing dropdown
+            const type = button.dataset.type;
+            
+            // Update active state
+            vizTypeOptions.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+            
+            // Update visualization
+            visualizationType = type;
+            createVisualization();
+            
+            // Close dropdown
+            vizTypeDropdown?.classList.remove('visible');
+            vizTypeBtn?.classList.remove('active');
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (vizTypeBtn && vizTypeDropdown && 
+            !vizTypeBtn.contains(e.target) && 
+            !vizTypeDropdown.contains(e.target)) {
+            vizTypeDropdown.classList.remove('visible');
+            vizTypeBtn.classList.remove('active');
+        }
     });
 }

templates/index.html

@@ -22,6 +22,9 @@
             <button class="header-btn playlist-toggle-btn" title="Show playlist">
                 <i class="fas fa-list"></i>
             </button>
+            <button class="header-btn viz-type-btn" title="Change visualization">
+                <i class="fas fa-cube"></i>
+            </button>
             <button class="header-btn theme-btn" title="Toggle theme">
                 <i class="fas fa-moon"></i>
             </button>
@@ -97,18 +100,20 @@
                     <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
                 </div>
             </div>
-
-            <select id="visualization-type">
-                <option value="bars">Circular Bars</option>
-                <option value="sphere">Sphere</option>
-                <option value="particles">Particles</option>
-            </select>
         </div>
     </div>
 
     <div class="error-toast"></div>
     <div class="tooltip"></div>
 
+    <div class="viz-type-dropdown">
+        <div class="viz-type-options">
+            <button data-type="bars" class="active">Circular Bars</button>
+            <button data-type="sphere">Sphere</button>
+            <button data-type="particles">Particles</button>
+        </div>
+    </div>
+
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 </body>
 </html>