css update

static/js/main.js

@@ -325,7 +325,10 @@ function setupPlayerControls() {
     prevBtn.addEventListener('click', playPrevious);
     nextBtn.addEventListener('click', playNext);
     volumeSlider.addEventListener('input', updateVolume);
+    
+    // Add both input and change events for the seek slider
     seekSlider.addEventListener('input', seekTo);
+    seekSlider.addEventListener('change', seekTo);
 
     // Add keyboard controls
     document.addEventListener('keydown', (e) => {
@@ -339,10 +342,20 @@ function setupPlayerControls() {
         }
     });
 
-    // Update time display
+    // Update time display more frequently
     if (audioElement) {
+        // Remove existing listeners first
+        audioElement.removeEventListener('timeupdate', updateTimeDisplay);
+        audioElement.removeEventListener('loadedmetadata', updateTimeDisplay);
+        audioElement.removeEventListener('ended', handleTrackEnd);
+        
+        // Add listeners
         audioElement.addEventListener('timeupdate', updateTimeDisplay);
+        audioElement.addEventListener('loadedmetadata', updateTimeDisplay);
         audioElement.addEventListener('ended', handleTrackEnd);
+        
+        // Force initial update
+        updateTimeDisplay();
     }
 }
 
@@ -389,8 +402,15 @@ function updateVolume(e) {
 // Seek to position
 function seekTo(e) {
     if (audioElement && audioElement.duration) {
-        const time = (e.target.value / 100) * audioElement.duration;
+        const seekSlider = document.querySelector('.seek-slider');
+        const progress = document.querySelector('.progress');
+        const time = (seekSlider.value / 100) * audioElement.duration;
+        
         audioElement.currentTime = time;
+        progress.style.width = `${seekSlider.value}%`;
+        
+        // Force time display update
+        updateTimeDisplay();
     }
 }
 
@@ -403,14 +423,24 @@ function updateTimeDisplay() {
     const seekSlider = document.querySelector('.seek-slider');
     const progress = document.querySelector('.progress');
 
-    const current = formatTime(audioElement.currentTime);
-    const total = formatTime(audioElement.duration);
-    const progressPercent = (audioElement.currentTime / audioElement.duration) * 100;
+    // Only update if duration is available and not NaN
+    if (audioElement.duration && !isNaN(audioElement.duration)) {
+        const current = formatTime(audioElement.currentTime);
+        const total = formatTime(audioElement.duration);
+        const progressPercent = (audioElement.currentTime / audioElement.duration) * 100;
 
-    currentTime.textContent = current;
-    totalTime.textContent = total;
-    seekSlider.value = progressPercent;
-    progress.style.width = `${progressPercent}%`;
+        // Update current time display
+        if (currentTime) currentTime.textContent = current;
+        
+        // Update total time display
+        if (totalTime) totalTime.textContent = total;
+        
+        // Update slider and progress bar
+        if (seekSlider && !seekSlider.matches(':active')) { // Only update if user isn't dragging
+            seekSlider.value = progressPercent;
+            progress.style.width = `${progressPercent}%`;
+        }
+    }
 }
 
 // Format time in MM:SS
@@ -559,8 +589,20 @@ function playTrack(index) {
     if (prevBtn) prevBtn.disabled = false;
     if (nextBtn) nextBtn.disabled = false;
 
+    // Remove any existing event listeners before adding new ones
+    audioElement.removeEventListener('loadedmetadata', updateTimeDisplay);
+    audioElement.removeEventListener('timeupdate', updateTimeDisplay);
+    
+    // Add event listeners
+    audioElement.addEventListener('loadedmetadata', updateTimeDisplay);
+    audioElement.addEventListener('timeupdate', updateTimeDisplay);
+    
     // Update audio source and play
     audioElement.src = track.url;
+    
+    // Force an initial time display update
+    setTimeout(updateTimeDisplay, 100);
+
     audioElement.play()
         .then(() => {
             isPlaying = true;
@@ -568,6 +610,7 @@ function playTrack(index) {
                 playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
             }
             updateNowPlayingInfo();
+            updateTimeDisplay(); // Update time display immediately after play starts
         })
         .catch(error => {
             console.error('Error playing track:', error);