| phase |
plan |
type |
| 06-video-and-polish |
2 |
execute |
Add video playback support to OutputNode and complete video generation workflow.
Purpose: Enable end-to-end video generation with playback and download.
Output: OutputNode plays video content, download works for video files.
<execution_context>
~/.claude/get-shit-done/workflows/execute-phase.md
~/.claude/get-shit-done/templates/summary.md
</execution_context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
Prior plan in this phase:
@.planning/phases/06-video-and-polish/06-01-SUMMARY.md
Key source files:
@src/components/nodes/OutputNode.tsx
@src/components/nodes/GenerateVideoNode.tsx
@src/types/index.ts
@src/store/workflowStore.ts
Established patterns:
- OutputNode receives image via handle, displays in preview area
- Lightbox modal for full-size view
- Download button generates download link
Constraining decisions:
- Video displayed with HTML5 video element
- Support both base64 data URLs and HTTP URLs for video
Task 1: Update OutputNode for video detection and playback
src/components/nodes/OutputNode.tsx,
src/types/index.ts
Enhance OutputNode to handle both images and videos:
1. In types/index.ts, update OutputNodeData:
- Add video: string | null field
- Add contentType?: "image" | "video" field
2. In OutputNode.tsx:
- Detect content type from data URL prefix or contentType field
- isVideo check: data.video || data.contentType === "video" || (data.image?.startsWith("data:video/"))
- If video content:
- Replace img element with video element
- Add controls, loop, muted (autoplay with muted), playsinline attributes
- Style same as image: w-full h-full object-contain rounded
- If video in lightbox:
- Use video element in modal with same attributes
- Make it larger: max-h-[90vh] w-auto
- Update placeholder text: "Waiting for image or video"
3. Handle both base64 and URL sources:
- If value starts with "data:" use as src directly
- If value starts with "http" use as src directly
- Video element handles both formats natively
npm run build passes, OutputNode component renders without errors
OutputNode displays video element when video content is connected, plays with controls
Task 2: Update video download and workflow execution
src/components/nodes/OutputNode.tsx,
src/store/workflowStore.ts
1. In OutputNode.tsx handleDownload:
- Detect if content is video (same check as display)
- For video: set download filename to generated-{timestamp}.mp4
- For image: keep generated-{timestamp}.png
- Handle URL-based video: fetch URL, convert to blob, create blob URL for download
-
In workflowStore.ts getConnectedInputs:
- Add case for "generateVideo" node type
- Extract outputVideo field and add to images array (for img2vid workflows)
- Videos can be input to downstream nodes that accept video/image
-
In workflowStore.ts executeWorkflow:
- Add execution case for "generateVideo" node type
- Copy pattern from nanoBanana execution
- Call /api/generate with selectedModel containing video model
- Store result in outputVideo field (not outputImage)
- Update status appropriately
-
Update output node connection:
- In getConnectedInputs, when source is generateVideo, get outputVideo
- Pass to output node which stores in image field (reuse existing flow)
- The OutputNode detects video content via data URL prefix
Create GenerateVideo -> Output workflow, run generation, verify video plays in output
Video downloads with .mp4 extension, workflow execution produces video in output node
Video generation workflow: GenerateVideo node -> Output node with playback
1. Run: npm run dev
2. Add a GenerateVideo node to the canvas
3. Select fal.ai provider, pick a text-to-video model (e.g., any model with "video" in name)
4. Add a Prompt node, connect to GenerateVideo text input
5. Add an Output node, connect GenerateVideo output to it
6. Enter a prompt like "a cat walking in slow motion"
7. Run the workflow (Cmd+Enter)
8. Verify:
- GenerateVideo node shows loading state
- After completion, video appears in GenerateVideo preview
- Output node shows video with playback controls
- Video plays when clicking play button
- Download button saves .mp4 file
- Lightbox shows larger video player
Type "approved" to continue to next plan, or describe issues to fix
Before declaring plan complete:
- [ ] npm run build succeeds without errors
- [ ] OutputNode detects and displays video content
- [ ] Video playback works with controls
- [ ] Video download saves .mp4 file
- [ ] End-to-end workflow: Prompt -> GenerateVideo -> Output works
<success_criteria>
- All tasks completed
- All verification checks pass
- Human verification approved
- No TypeScript errors
- Complete video generation pipeline working
</success_criteria>
After completion, create `.planning/phases/06-video-and-polish/06-02-SUMMARY.md`
