From e40e7947213613b6911ba77996edc061125bf4df Mon Sep 17 00:00:00 2001
From: Rob Watson <rob@netflux.io>
Date: Wed, 16 Feb 2022 20:43:39 +0100
Subject: [PATCH] Improve SeekBar interface

---
 frontend/src/SeekBar.tsx | 44 ++++++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/src/SeekBar.tsx b/frontend/src/SeekBar.tsx
index c8fca04..13e4ef6 100644
--- a/frontend/src/SeekBar.tsx
+++ b/frontend/src/SeekBar.tsx
@@ -49,8 +49,7 @@ export const SeekBar: React.FC<Props> = ({
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     // seek bar
-    const pixelRatio = canvas.width / canvas.clientWidth;
-    const offset = offsetPixels * pixelRatio;
+    const offset = offsetCanvas(canvas);
     const width = canvas.width - offset * 2;
     ctx.fillStyle = 'black';
     ctx.fillRect(offset, InnerMargin, width, canvas.height - InnerMargin * 2);
@@ -68,23 +67,33 @@ export const SeekBar: React.FC<Props> = ({
 
   // helpers
 
-  const emitPositionEvent = (evt: MouseEvent<HTMLCanvasElement>) => {
-    const canvas = evt.currentTarget;
-    const { x } = mouseEventToCanvasPoint(evt);
+  const emitPositionEvent = (x: number, canvas: HTMLCanvasElement) => {
     const pixelRatio = canvas.width / canvas.clientWidth;
     const offset = offsetPixels * pixelRatio;
     const ratio = (x - offset) / (canvas.width - offset * 2);
     onPositionChanged(ratio * duration);
   };
 
+  const offsetCanvas = (canvas: HTMLCanvasElement): number => {
+    return Math.round(offsetPixels * (canvas.width / canvas.clientWidth));
+  };
+
   // handlers
 
   const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
     if (mode != Mode.Normal) return;
 
+    const canvas = evt.currentTarget;
+    const offset = offsetCanvas(canvas);
+    const { x } = mouseEventToCanvasPoint(evt);
+
+    if (x < offset || x > evt.currentTarget.width - offset) {
+      return;
+    }
+
     setMode(Mode.Dragging);
 
-    emitPositionEvent(evt);
+    emitPositionEvent(x, canvas);
   };
 
   const handleMouseUp = () => {
@@ -94,18 +103,35 @@ export const SeekBar: React.FC<Props> = ({
   };
 
   const handleMouseMove = (evt: MouseEvent<HTMLCanvasElement>) => {
-    const { y } = mouseEventToCanvasPoint(evt);
+    const canvas = evt.currentTarget;
+    const offset = offsetCanvas(canvas);
+
+    const coords = mouseEventToCanvasPoint(evt);
+    const { y } = coords;
+    let { x } = coords;
 
     // TODO: improve mouse detection around knob.
-    if (y > InnerMargin && y < LogicalHeight - InnerMargin) {
+    if (
+      x >= offset &&
+      x < canvas.width - offset &&
+      y > InnerMargin &&
+      y < LogicalHeight - InnerMargin
+    ) {
       setCursor('cursor-pointer');
     } else {
       setCursor('cursor-auto');
     }
 
+    if (x < offset) {
+      x = offset;
+    }
+    if (x > canvas.width - offset) {
+      x = canvas.width - offset;
+    }
+
     if (mode == Mode.Normal) return;
 
-    emitPositionEvent(evt);
+    emitPositionEvent(x, canvas);
   };
 
   const handleMouseEnter = () => {