playback similar to videoannotator

sam-tool-tauri/src/components/extract/FrameCanvas.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import type { VideoInfo } from "../../types";
 
 interface Props {
@@ -10,15 +10,16 @@ export const FrameCanvas = forwardRef<HTMLCanvasElement, Props>(function FrameCa
   { video, extracted },
   ref
 ) {
+  // Memo the style so a fresh object isn't allocated on every parent render.
+  // The canvas's backing store width/height are JS-driven (see ExtractMode's
+  // ResizeObserver effect); CSS just keeps the box at the video's aspect.
+  const aspectStyle = useMemo(
+    () => ({ aspectRatio: `${video.width} / ${video.height}` }),
+    [video.width, video.height]
+  );
   return (
     <div className="canvas-stage">
-      <div
-        className="canvas-frame"
-        style={{ aspectRatio: `${video.width} / ${video.height}` }}
-      >
-        {/* Backing-store width/height are set imperatively in drawBitmap so we
-            can cap it at the displayed (CSS) size × DPR — drawing 4K every frame
-            into a 1080p window is the main playback cost on slow systems. */}
+      <div className="canvas-frame" style={aspectStyle}>
         <canvas ref={ref} />
         {extracted && (
           <div className="frame-extracted-banner">EXTRACTED</div>