import { forwardRef, useMemo } from "react";
import type { VideoInfo } from "../../types";

interface Props {
  video: VideoInfo;
  extracted?: boolean;
}

export const FrameCanvas = forwardRef<HTMLCanvasElement, Props>(function FrameCanvas(
  { 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={aspectStyle}>
        <canvas ref={ref} />
        {extracted && (
          <div className="frame-extracted-banner">EXTRACTED</div>
        )}
      </div>
    </div>
  );
});