From ca7c8174972d8500f54d415753d333e8c0669b09 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 19 Feb 2026 20:11:43 +1300
Subject: [PATCH] fix: VideoStitch thumbnails for VideoTrim sources and resize
 distortion

1. Add "videoTrim" to source type check in orderedClips so VideoTrim
   node outputs are recognized and thumbnails are extracted
2. Generate thumbnails at source video's native aspect ratio instead
   of fixed 160x120 (4:3) to prevent distortion
3. Change thumbnail display from object-cover to object-contain to
   prevent cropping/distortion when the node is resized

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/VideoStitchNode.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/nodes/VideoStitchNode.tsx b/src/components/nodes/VideoStitchNode.tsx
index 9ae54545..6bb1d2f0 100644
--- a/src/components/nodes/VideoStitchNode.tsx
+++ b/src/components/nodes/VideoStitchNode.tsx
@@ -76,7 +76,7 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
       let videoData: string | null = null;
       let duration: number | null = null;
 
-      if (sourceNode.type === "generateVideo" || sourceNode.type === "easeCurve" || sourceNode.type === "videoStitch") {
+      if (sourceNode.type === "generateVideo" || sourceNode.type === "easeCurve" || sourceNode.type === "videoStitch" || sourceNode.type === "videoTrim") {
         videoData = (sourceNode.data as any).outputVideo || null;
       }
 
@@ -168,8 +168,10 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
           if (cancelled) return;
 
           const canvas = document.createElement("canvas");
-          canvas.width = 160;
-          canvas.height = 120;
+          const thumbWidth = 160;
+          const aspectRatio = video.videoWidth / video.videoHeight || 16 / 9;
+          canvas.width = thumbWidth;
+          canvas.height = Math.round(thumbWidth / aspectRatio);
           const ctx = canvas.getContext("2d");
           if (!ctx) continue;
 
@@ -462,7 +464,7 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
                         <img
                           src={thumbnail}
                           alt={`Clip ${clip.edgeId}`}
-                          className="w-full h-full object-cover rounded"
+                          className="w-full h-full object-contain rounded"
                         />
                       ) : (
                         <div className="w-full h-full flex items-center justify-center">