live progress

webui/index.html

@@ -73,6 +73,9 @@
                             <span class="total-time" id="total-time">0:00</span>
                         </div>
                         <div class="progress-bar-container">
+                            <div class="progress-track">
+                                <div class="progress-fill" id="progress-fill"></div>
+                            </div>
                             <input type="range" class="progress-bar" id="progress-bar" min="0" max="100" value="0" step="0.1">
                         </div>
                     </div>

webui/static/script.js

@@ -520,11 +520,14 @@ function clearTrack() {
     
     // Reset progress bar and time displays
     const progressBar = document.getElementById('progress-bar');
+    const progressFill = document.getElementById('progress-fill');
     if (progressBar) {
         progressBar.value = 0;
-        progressBar.style.setProperty('--progress-percent', '0%');
         delete progressBar.dataset.seeking;
     }
+    if (progressFill) {
+        progressFill.style.width = '0%';
+    }
     
     const currentTimeElement = document.getElementById('current-time');
     const totalTimeElement = document.getElementById('total-time');
@@ -580,7 +583,10 @@ function handleProgressBarChange(event) {
         audioPlayer.currentTime = newTime;
         
         // Update visual progress immediately
-        event.target.style.setProperty('--progress-percent', `${progress}%`);
+        const progressFill = document.getElementById('progress-fill');
+        if (progressFill) {
+            progressFill.style.width = `${progress}%`;
+        }
         
         // Update time displays immediately
         const currentTimeElement = document.getElementById('current-time');
@@ -592,7 +598,10 @@ function handleProgressBarChange(event) {
         // Reset progress bar to current position
         const actualProgress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
         event.target.value = actualProgress;
-        event.target.style.setProperty('--progress-percent', `${actualProgress}%`);
+        const progressFill = document.getElementById('progress-fill');
+        if (progressFill) {
+            progressFill.style.width = `${actualProgress}%`;
+        }
     }
 }
 
@@ -1019,10 +1028,13 @@ function updateAudioProgress() {
     
     // Update progress bar
     const progressBar = document.getElementById('progress-bar');
+    const progressFill = document.getElementById('progress-fill');
     if (progressBar && !progressBar.dataset.seeking) {
         progressBar.value = progress;
-        // Update CSS custom property for visual progress fill
-        progressBar.style.setProperty('--progress-percent', `${progress}%`);
+        // Update visual progress fill
+        if (progressFill) {
+            progressFill.style.width = `${progress}%`;
+        }
     }
     
     // Update time display
@@ -1044,9 +1056,12 @@ function onAudioEnded() {
     
     // Reset progress to beginning
     const progressBar = document.getElementById('progress-bar');
+    const progressFill = document.getElementById('progress-fill');
     if (progressBar) {
         progressBar.value = 0;
-        progressBar.style.setProperty('--progress-percent', '0%');
+    }
+    if (progressFill) {
+        progressFill.style.width = '0%';
     }
     
     const currentTimeElement = document.getElementById('current-time');

webui/static/style.css

@@ -362,9 +362,31 @@ body {
 .progress-bar-container {
     position: relative;
     width: 100%;
+    height: 20px;
+}
+
+.progress-track {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: #4f4f4f;
+    border-radius: 2px;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.progress-fill {
+    height: 100%;
+    background: #1db954; /* Green accent color */
+    border-radius: 2px;
+    width: 0%;
+    transition: width 0.1s ease;
 }
 
 .progress-bar {
+    position: relative;
     width: 100%;
     height: 20px;
     background: transparent;
@@ -372,12 +394,13 @@ body {
     cursor: pointer;
     -webkit-appearance: none;
     appearance: none;
+    z-index: 2;
 }
 
 .progress-bar::-webkit-slider-track {
     width: 100%;
     height: 3px;
-    background: linear-gradient(to right, #1db954 0%, #1db954 var(--progress-percent, 0%), #4f4f4f var(--progress-percent, 0%), #4f4f4f 100%);
+    background: transparent;
     border-radius: 2px;
 }
 
@@ -408,7 +431,7 @@ body {
 .progress-bar::-moz-range-track {
     width: 100%;
     height: 3px;
-    background: linear-gradient(to right, #1db954 0%, #1db954 var(--progress-percent, 0%), #4f4f4f var(--progress-percent, 0%), #4f4f4f 100%);
+    background: transparent;
     border-radius: 2px;
     border: none;
 }