let's go

Author: JonnyBurger

packages/convert/app/components/ConvertProgress.tsx

@@ -5,15 +5,19 @@ import {formatSeconds} from '~/lib/format-seconds';
 import {Container, getNewName} from '~/lib/generate-new-name';
 import {Card} from './ui/card';
 import {Skeleton} from './ui/skeleton';
+import {VideoThumbnail} from './VideoThumbnail';
 
 export const ConvertProgress: React.FC<{
 	readonly state: ConvertMediaState;
 	readonly name: string | null;
 	readonly container: Container;
-}> = ({state, name, container}) => {
+	readonly currentFrame: VideoFrame | null;
+}> = ({state, name, container, currentFrame}) => {
 	return (
 		<>
 			<Card className="overflow-hidden">
+				<VideoThumbnail thumbnail={currentFrame} />
+				<div className="border-b-2 border-black" />
 				<div className="h-5 overflow-hidden">
 					{state.overallProgress ? (
 						<div

packages/convert/app/components/ConvertUi.tsx

@@ -25,16 +25,24 @@ export default function ConvertUI({src}: {readonly src: Source}) {
 	const [audioCodec, setAudioCodec] = useState('opus');
 	const [state, setState] = useState<ConvertState>({type: 'idle'});
 	const [name, setName] = useState<string | null>(null);
+	const [currentFrame, setCurrentFrame] = useState<VideoFrame | null>(null);
 
 	const onClick = useCallback(() => {
 		const abortController = new AbortController();
 
 		let _n: string | null = null;
 
+		let videoFrames = 0;
+
 		convertMedia({
 			src: src.type === 'url' ? src.url : src.file,
 			reader: src.type === 'file' ? webFileReader : fetchReader,
-			onVideoFrame: () => {
+			onVideoFrame: (frame) => {
+				if (videoFrames % 30 === 0) {
+					setCurrentFrame(frame.clone());
+				}
+
+				videoFrames++;
 				return Promise.resolve();
 			},
 			logLevel: 'verbose',
@@ -145,6 +153,7 @@ export default function ConvertUI({src}: {readonly src: Source}) {
 							state={state.state}
 							name={name}
 							container={container}
+							currentFrame={currentFrame}
 						/>
 						<div className="h-2" />
 						<Button className="block w-full" type="button" onClick={cancel}>
@@ -157,6 +166,7 @@ export default function ConvertUI({src}: {readonly src: Source}) {
 							state={state.state}
 							name={name}
 							container={container}
+							currentFrame={currentFrame}
 						/>
 						<div className="h-2" />
 						<Button className="block w-full" type="button" onClick={onDownload}>

packages/convert/app/components/VideoThumbnail.tsx

@@ -8,32 +8,39 @@ const ThumbnailContent: React.FC<{readonly thumbnail: VideoFrame}> = ({
 }) => {
 	const ref = useRef<HTMLCanvasElement>(null);
 
-	const scaleRatio = THUMBNAIL_HEIGHT / thumbnail.displayHeight;
-	const width = Math.round(thumbnail.displayWidth * scaleRatio);
-
 	const [color, setColor] = useState<string>('transparent');
+	const [width, setWidth] = useState<number>(0);
 
 	useEffect(() => {
+		const scaleRatio = THUMBNAIL_HEIGHT / thumbnail.displayHeight;
+		const w = Math.round(thumbnail.displayWidth * scaleRatio);
+		setWidth(w);
+
 		createImageBitmap(thumbnail, {
-			resizeWidth: width,
+			resizeWidth: w,
 			resizeHeight: THUMBNAIL_HEIGHT,
 		}).then((bitmap) => {
-			const twoDContext = ref.current?.getContext('2d');
+			const canvas = ref.current;
+			if (!canvas) {
+				return;
+			}
+			canvas.width = w;
+			const twoDContext = canvas.getContext('2d');
 			if (!twoDContext) {
 				return;
 			}
 
 			twoDContext.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
 			const color = new FastAverageColor().getColor(ref.current);
 			setColor(color.hex);
+			thumbnail.close();
 		});
-	}, [scaleRatio, thumbnail, width]);
+	}, [thumbnail]);
 
 	return (
 		<div className="flex justify-center" style={{backgroundColor: color}}>
 			<canvas
 				ref={ref}
-				width={width}
 				height={THUMBNAIL_HEIGHT}
 				style={{
 					maxHeight: THUMBNAIL_HEIGHT,
@@ -47,10 +54,7 @@ export const VideoThumbnail: React.FC<{
 	readonly thumbnail: VideoFrame | null;
 }> = ({thumbnail}) => {
 	return (
-		<div
-			className="border-b-2 border-black "
-			style={{height: THUMBNAIL_HEIGHT}}
-		>
+		<div className="border-b-2 border-black" style={{height: THUMBNAIL_HEIGHT}}>
 			{thumbnail ? <ThumbnailContent thumbnail={thumbnail} /> : null}
 		</div>
 	);