Update VideoThumbnail.tsx

packages/convert/app/components/VideoThumbnail.tsx

@@ -1,23 +1,19 @@
 import {FastAverageColor} from 'fast-average-color';
-import {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 
 const THUMBNAIL_HEIGHT = Math.round((350 / 16) * 9);
 
-export const VideoThumbnail: React.FC<{
-	readonly thumbnail: VideoFrame | null;
-}> = ({thumbnail}) => {
+const ThumbnailContent: React.FC<{readonly thumbnail: VideoFrame}> = ({
+	thumbnail,
+}) => {
 	const ref = useRef<HTMLCanvasElement>(null);
 
-	const scaleRatio = thumbnail ? THUMBNAIL_HEIGHT / thumbnail.displayHeight : 0;
-	const width = thumbnail ? Math.round(thumbnail.displayWidth * scaleRatio) : 0;
+	const scaleRatio = THUMBNAIL_HEIGHT / thumbnail.displayHeight;
+	const width = Math.round(thumbnail.displayWidth * scaleRatio);
 
 	const [color, setColor] = useState<string>('transparent');
 
 	useEffect(() => {
-		if (!thumbnail) {
-			return;
-		}
-
 		createImageBitmap(thumbnail, {
 			resizeWidth: width,
 			resizeHeight: THUMBNAIL_HEIGHT,
@@ -34,10 +30,7 @@ export const VideoThumbnail: React.FC<{
 	}, [scaleRatio, thumbnail, width]);
 
 	return (
-		<div
-			className="border-b-2 border-black flex justify-center"
-			style={{height: THUMBNAIL_HEIGHT, background: color}}
-		>
+		<div className="flex justify-center" style={{backgroundColor: color}}>
 			<canvas
 				ref={ref}
 				width={width}
@@ -50,3 +43,15 @@ export const VideoThumbnail: React.FC<{
 		</div>
 	);
 };
+export const VideoThumbnail: React.FC<{
+	readonly thumbnail: VideoFrame | null;
+}> = ({thumbnail}) => {
+	return (
+		<div
+			className="border-b-2 border-black "
+			style={{height: THUMBNAIL_HEIGHT}}
+		>
+			{thumbnail ? <ThumbnailContent thumbnail={thumbnail} /> : null}
+		</div>
+	);
+};