Browse Source

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>
handoff-20260429-1057
shrimbly 5 months ago
parent
commit
ca7c817497
  1. 10
      src/components/nodes/VideoStitchNode.tsx

10
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">

Loading…
Cancel
Save