80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
|
import { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
position: number;
|
||
|
|
duration: number;
|
||
|
|
height: number;
|
||
|
|
video: HTMLVideoElement;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const VideoPreview: React.FC<Props> = ({
|
||
|
|
position,
|
||
|
|
duration,
|
||
|
|
height,
|
||
|
|
video,
|
||
|
|
}: Props) => {
|
||
|
|
const videoCanvasRef = useRef<HTMLCanvasElement>(null);
|
||
|
|
|
||
|
|
// effects
|
||
|
|
|
||
|
|
// render canvas
|
||
|
|
useEffect(() => {
|
||
|
|
// TODO: not sure if requestAnimationFrame is recommended here.
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
const canvas = videoCanvasRef.current;
|
||
|
|
if (canvas == null) {
|
||
|
|
console.error('no canvas ref available');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
if (ctx == null) {
|
||
|
|
console.error('no 2d context available');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set aspect ratio.
|
||
|
|
canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight);
|
||
|
|
|
||
|
|
const durSecs = duration / 1000;
|
||
|
|
const ratio = position / durSecs;
|
||
|
|
const x = (canvas.width - 177) * ratio;
|
||
|
|
|
||
|
|
ctx.clearRect(0, 0, x, canvas.height);
|
||
|
|
ctx.clearRect(x + 177, 0, canvas.width - 177 - x, canvas.height);
|
||
|
|
|
||
|
|
ctx.drawImage(video, x, 0, 177, 100);
|
||
|
|
});
|
||
|
|
}, [position]);
|
||
|
|
|
||
|
|
// render component
|
||
|
|
|
||
|
|
const containerStyles = {
|
||
|
|
height: height + 'px',
|
||
|
|
position: 'relative',
|
||
|
|
flexGrow: 0,
|
||
|
|
} as React.CSSProperties;
|
||
|
|
|
||
|
|
const canvasStyles = {
|
||
|
|
position: 'absolute',
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
display: 'block',
|
||
|
|
zIndex: 1,
|
||
|
|
} as React.CSSProperties;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div style={containerStyles}>
|
||
|
|
<canvas
|
||
|
|
width="500"
|
||
|
|
height="100"
|
||
|
|
ref={videoCanvasRef}
|
||
|
|
style={canvasStyles}
|
||
|
|
></canvas>
|
||
|
|
<canvas style={canvasStyles}></canvas>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|