first version

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

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import type { VideoInfo } from "../../types";
+
+interface Props {
+  video: VideoInfo;
+  extracted?: boolean;
+}
+
+export const FrameCanvas = forwardRef<HTMLCanvasElement, Props>(function FrameCanvas(
+  { video, extracted },
+  ref
+) {
+  return (
+    <div className="canvas-stage">
+      <div
+        className="canvas-frame"
+        style={{ aspectRatio: `${video.width} / ${video.height}` }}
+      >
+        <canvas ref={ref} width={video.width} height={video.height} />
+        {extracted && (
+          <div className="frame-extracted-banner">EXTRACTED</div>
+        )}
+      </div>
+    </div>
+  );
+});