Improve SeekBar interface

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 = () => {