From 1dc3f4505b57779052af0fbb7789027b2457c114 Mon Sep 17 00:00:00 2001
From: apt-get <me@apt-get.xyz>
Date: Mon, 16 Mar 2026 23:21:00 +0100
Subject: [PATCH] fix seeking problems due to progress bar width inconsistency

---
 src/routes/streams/[stream_id]/Player.svelte | 29 +++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/routes/streams/[stream_id]/Player.svelte b/src/routes/streams/[stream_id]/Player.svelte
index 955cf02..05ba916 100644
--- a/src/routes/streams/[stream_id]/Player.svelte
+++ b/src/routes/streams/[stream_id]/Player.svelte
@@ -102,7 +102,7 @@
     });
 
     function seek(event, bounds) {
-        let x = event.pageX - bounds.left;
+        let x = event.clientX - bounds.left;
         return Math.min(Math.max(x / bounds.width, 0), 1);
     }
 
@@ -144,11 +144,6 @@
         }
     }
 
-    function seekAudio(event) {
-        if (!songBar) return;
-        audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
-    }
-
     function updateSeekVisual(event) {
         if (!songBar) return;
         pendingSeekTime = seek(event, songBar.getBoundingClientRect()) * duration;
@@ -162,7 +157,7 @@
         muted = false;
     }
 
-    function formatSeconds(totalSeconds) {
+    function formatSeconds(totalSeconds, forceHours = false) {
         if (isNaN(totalSeconds)) return 'No Data';
         totalSeconds = parseInt(totalSeconds, 10);
         var hours = Math.floor(totalSeconds / 3600);
@@ -171,18 +166,22 @@
 
         return [hours, minutes, seconds]
             .map((v) => (v < 10 ? '0' + v : v))
-            .filter((v, i) => v !== '00' || i > 0)
+            .filter((v, i) => v !== '00' || i > 0 || forceHours)
             .join(':');
     }
 
     function seekTooltip(event) {
         if (!inlineTooltip) {
             let tooltipBounds = tooltip.getBoundingClientRect();
-            tooltipX = Math.min(event.pageX + 10, innerWidth - tooltipBounds.width);
+            tooltipX = Math.min(event.clientX + 10, innerWidth - tooltipBounds.width);
             tooltipY = Math.min(songBar.offsetTop - 30, innerHeight - tooltipBounds.height);
         }
         let bounds = songBar.getBoundingClientRect();
-        let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
+        let seekValue = ((event.clientX - bounds.left) * duration) / bounds.width;
+        updateTooltipText(seekValue);
+    }
+
+    function updateTooltipText(seekValue: number) {
         if (!ctx.current) return;
         let trackArray = ctx.current.tracks[ctx.getSongAtTime(seekValue)];
         seekTrack = trackArray[1] + ' - ' + trackArray[2];
@@ -228,6 +227,8 @@
     onmouseup={() => {
         if (seeking && pendingSeekTime != null) {
             audio.currentTime = pendingSeekTime;
+            currentTime = pendingSeekTime;
+            updateTooltipText(pendingSeekTime);
             pendingSeekTime = null;
         }
         seeking = volumeSeeking = false;
@@ -252,14 +253,13 @@
             bind:this={songBar}
             value={seeking && pendingSeekTime != null ? pendingSeekTime : (currentTime || 0)}
             max={duration}
-            onmousedown={() => (seeking = true)}
+            onmousedown={(e) => { seeking = true; updateSeekVisual(e); }}
             onmouseenter={() => (showTooltip = true)}
             onmouseleave={() => (showTooltip = false)}
-            onclick={seekAudio}
             style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
             class="song-progress"
         ></progress>
-        <div class="control-times">{formatSeconds(currentTime)}/{formatSeconds(duration)}</div>
+        <div class="control-times">{formatSeconds(currentTime, duration >= 3600)}/{formatSeconds(duration)}</div>
         <button
             style="--icon-color:{iconColor}"
             class="material-icons"
@@ -350,6 +350,9 @@
     .control-times {
         margin: auto;
         margin-right: 5px;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+        min-width: max-content;
     }
 
     .tooltip {