From e47d56d5b1dc79d779e3e3d575f232249207d075 Mon Sep 17 00:00:00 2001
From: Siddharth <siddharthvaddem@yahoo.com>
Date: Fri, 17 Oct 2025 21:24:37 -0700
Subject: [PATCH] thumbnail on editor load

---
 src/components/video-editor/VideoPlayback.tsx | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 2e7d7c7..63d2ec0 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -71,6 +71,33 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
     };
   }, [videoPath]);
 
+  // Draw first frame when metadata is loaded
+  const handleLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    onDurationChange(e.currentTarget.duration);
+    // Draw first frame
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (video && canvas) {
+      video.currentTime = 0;
+      const drawFirstFrame = () => {
+        if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) {
+          canvas.width = video.videoWidth;
+          canvas.height = video.videoHeight;
+        }
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        }
+        video.removeEventListener('seeked', drawFirstFrame);
+      };
+      video.addEventListener('seeked', drawFirstFrame);
+      if (video.currentTime === 0 && video.readyState >= 2) {
+        drawFirstFrame();
+      }
+    }
+  };
+
   return (
     <div
       className="w-full aspect-video rounded-xl p-8 flex items-center justify-center overflow-hidden bg-cover bg-center"
@@ -85,9 +112,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
         src={videoPath}
         className="hidden"
         preload="metadata"
-        onLoadedMetadata={e => {
-          onDurationChange(e.currentTarget.duration);
-        }}
+        onLoadedMetadata={handleLoadedMetadata}
         onDurationChange={e => {
           onDurationChange(e.currentTarget.duration);
         }}