Worker for building the Remotion-based video editing studio in Dispatch.
NOTE: Startup and cleanup are handled by worker-base. This skill defines the WORK PROCEDURE.
Features that involve:
agent-browser - For verifying Video Studio UI renders, Remotion Player loads, templates display. Invoke after implementation.Read the feature description and understand which video capability is being built.
Check Remotion is installed:
remotion and @remotion/player are in package.jsonnpm install remotion @remotion/playerFor Video Studio page:
src/app/(dashboard)/video-studio/page.tsxFor Remotion Player:
Player from @remotion/player in a client componentsrc/components/video-studio/For video upload:
For AI composition:
src/app/api/video/generate/route.tsFor templates:
src/components/video-studio/templates/Verify:
npm run build must pass (Remotion components must compile){
"salientSummary": "Built Video Studio page with Remotion Player, drag-and-drop upload zone, and 3 starter templates. Page accessible from sidebar nav. Player renders compositions with play/pause/seek controls. npm run build passes.",
"whatWasImplemented": "Created /video-studio page with VideoEditor component containing: upload drop zone (accepts mp4/mov/webm), Remotion Player wrapper for preview, template gallery with CaptionOverlay, HookContent, and TalkingPoints templates. Each template has customizable text/color/timing props. Added Video Studio to sidebar and bottom bar nav.",
"whatWasLeftUndone": "",
"verification": {
"commandsRun": [
{ "command": "npm run build", "exitCode": 0, "observation": "Compiled with Remotion components" }
],
"interactiveChecks": [
{ "action": "Opened /video-studio via agent-browser", "observed": "Page renders with upload zone and template gallery" },
{ "action": "Selected CaptionOverlay template", "observed": "Remotion Player loads with caption composition, controls visible" },
{ "action": "Checked sidebar nav", "observed": "Video Studio link present with film icon, highlights when active" }
]
},
"tests": { "added": [] },
"discoveredIssues": []
}