Add click and drag support to progress bar

2 files changed, 39 insertions, 1 deletions

diff --git a/docs/play/player.js b/docs/play/player.js
index 796debe..6e01ce5 100644
--- a/docs/play/player.js
+++ b/docs/play/player.js
@@ -124,6 +124,7 @@ const dom = {
   stepNum: document.getElementById("stepNum"),
   totalSteps: document.getElementById("totalSteps"),
   progress: document.getElementById("progressFill"),
+  progressTrack: document.querySelector(".controls__progress"),
   progressText: document.getElementById("progressText"),
   prevBtn: document.getElementById("prevBtn"),
   nextBtn: document.getElementById("nextBtn"),
@@ -159,6 +160,31 @@ dom.nextBtn.addEventListener("click", () => {
   if (currentStep < steps.length - 1) goToStep(currentStep + 1);
 });
 
+function progressClick(e) {
+  if (steps.length < 2) return;
+  const rect = dom.progressTrack.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const pct = Math.max(0, Math.min(1, x / rect.width));
+  const idx = Math.round(pct * (steps.length - 1));
+  goToStep(idx);
+}
+
+dom.progressTrack.addEventListener("click", progressClick);
+
+dom.progressTrack.addEventListener("mousedown", function (e) {
+  e.preventDefault();
+  progressClick(e);
+  function onMove(ev) {
+    progressClick(ev);
+  }
+  function onUp() {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  }
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+});
+
 document.addEventListener("keydown", (e) => {
   if (e.key === "ArrowRight" || e.key === " " || e.key === "Enter") {
     e.preventDefault();
diff --git a/docs/play/style.css b/docs/play/style.css
index 7a6f27d..5e51114 100644
--- a/docs/play/style.css
+++ b/docs/play/style.css
@@ -306,7 +306,18 @@ body {
     height: 4px;
     background: var(--progress-bg);
     border-radius: 2px;
-    overflow: hidden;
+    overflow: visible;
+    cursor: pointer;
+    position: relative;
+}
+
+.controls__progress::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: -10px;
 }
 
 .controls__progress-fill {
@@ -314,6 +325,7 @@ body {
     background: var(--progress-fill);
     border-radius: 2px;
     transition: width 0.3s;
+    overflow: hidden;
 }
 
 .controls__text {