31 lines
906 B
TypeScript
31 lines
906 B
TypeScript
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>
|
|
);
|
|
});
|