mobile support for client review player

components/annotations/AnnotationCanvas.tsx

@@ -362,17 +362,73 @@ export function AnnotationCanvas({
     }
   }, [versionId, frameNumber, fps, selectedColor, annotationCommentedFrames, onAnnotationSaved, toast]);
 
+  // ── Touch events (mirrors mouse events for mobile drawing) ──────────────
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      if (!isAnnotating) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const touch = e.touches[0];
+      if (!touch) return;
+      const point: AnnotationPoint = {
+        x: (touch.clientX - rect.left) / rect.width,
+        y: (touch.clientY - rect.top) / rect.height,
+      };
+      const newShape: AnnotationShape = {
+        id: uuidv4(),
+        tool: selectedTool,
+        points: [point],
+        color: selectedColor,
+        strokeWidth,
+        frameNumber,
+      };
+      setDrawingState((prev) => ({ ...prev, isDrawing: true, currentShape: newShape }));
+    },
+    [isAnnotating, selectedTool, selectedColor, strokeWidth, frameNumber]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      if (!drawingStateRef.current.isDrawing || !drawingStateRef.current.currentShape) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const touch = e.touches[0];
+      if (!touch) return;
+      const point: AnnotationPoint = {
+        x: (touch.clientX - rect.left) / rect.width,
+        y: (touch.clientY - rect.top) / rect.height,
+      };
+      setDrawingState((prev) => ({
+        ...prev,
+        currentShape: prev.currentShape
+          ? { ...prev.currentShape, points: [...prev.currentShape.points, point] }
+          : null,
+      }));
+      redraw();
+    },
+    [redraw]
+  );
+
   return (
     <canvas
       ref={canvasRef}
       className={`annotation-canvas-overlay ${isAnnotating ? "is-annotating" : ""}`}
       style={{
         cursor: isAnnotating ? "crosshair" : "default",
+        touchAction: isAnnotating ? "none" : "auto",
       }}
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={() => void handleMouseUp()}
+      onTouchCancel={() => void handleMouseUp()}
     />
   );
 }