offline track

server/static/index.html

@@ -1249,6 +1249,30 @@
       };
     }
 
+    function seekTimelineToQualitySample(sample) {
+      if (!sample) return;
+      const slider = document.getElementById('timeSlider');
+      const steps = Math.max(1, qualitySamplesCache.length - 1);
+      if (sample.stepIndex != null) {
+        if (timelineUseProgress) {
+          slider.value = String(Math.round((sample.stepIndex / steps) * timelineSpanMs));
+        } else if (sample.t != null) {
+          slider.value = String(Math.max(
+            0,
+            Math.min(Math.round((sample.t - overlapMin) * 1000), timelineSpanMs)
+          ));
+        }
+      } else if (sample.progress != null && timelineUseProgress) {
+        slider.value = String(Math.round(sample.progress * timelineSpanMs));
+      } else if (sample.t != null) {
+        slider.value = String(Math.max(
+          0,
+          Math.min(Math.round((sample.t - overlapMin) * 1000), timelineSpanMs)
+        ));
+      }
+      updateTimelineAt(timelineCursor());
+    }
+
     function redrawQualityDistHighlight() {
       if (!dualTracksActive) return;
       const distCanvas = document.getElementById('qualityDistCanvas');
@@ -1266,7 +1290,10 @@
       }
       qualitySamplesCache = buildQualitySamples();
       const distCanvas = document.getElementById('qualityDistCanvas');
-      QualityViz.attachInteractions(distCanvas, () => redrawQualityDistHighlight());
+      QualityViz.attachInteractions(distCanvas, {
+        onMeterStepChange: () => redrawQualityDistHighlight(),
+        onSamplePick: (sample) => seekTimelineToQualitySample(sample),
+      });
       QualityViz.drawQualityDistChart(
         distCanvas, qualitySamplesCache, qualityColor, qualityChartOptions());
       panel?.classList.add('visible');