Add nodrag class to thumbnail items so React Flow doesn't capture
drag events, allowing the HTML drag-and-drop reorder to work.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract thumbnails from easeCurve and videoStitch source nodes (not
just generateVideo)
- Add content-start to grid container so rows pack to top instead of
stretching to fill available space
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace horizontal scroll filmstrip with 4-column CSS grid layout
- Use aspect-video for thumbnails that scale with grid cells
- Add blue "Video N" labels to each video input handle
- Add blue "Output" label to video output handle
- Audio handle label unchanged (purple)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Ensure handles render in all node states (disabled/checking/normal) by
extracting a shared renderHandles function. Move clipOrder syncing from
useMemo side-effect into a proper useEffect. Add dynamic video handle
resolution in WorkflowCanvas for indexed handles. Add VideoStitch
execution case in regenerateNode.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Component with encoder detection on mount (checkEncoderSupport)
- Dynamic video input handles (video-0, video-1, etc.) based on connections
- Audio input handle at bottom (violet color, matching AudioInput)
- Video output handle
- Filmstrip UI with thumbnail extraction (seek to 25% duration)
- Clip ordering via clipOrder array with drag-to-reorder support
- X button per clip to disconnect
- Processing trigger button (disabled until 2+ clips connected)
- Progress overlay during stitching (shows percentage)
- Output video preview on completion
- Disabled state when encoder not supported
- Export added to nodes/index.ts
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
shrimbly