Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/content/VideoContent/template.tsx.j2 */} import React from 'react'; import { Video, useCurrentFrame, staticFile } from 'remotion'; interface VideoContentProps { src: string; startFrame?: number; durationInFrames?: number; volume?: number; playbackRate?: number; fit?: 'contain' | 'cover' | 'fill'; muted?: boolean; startFrom?: number; loop?: boolean; } export const VideoContent: React.FC<VideoContentProps> = ({ src, startFrame = 0, durationInFrames = 150, volume = 1, playbackRate = 1, fit = 'cover', muted = false, startFrom = 0, loop = false, }) => { const frame = useCurrentFrame(); // Don't render if outside the time range // If durationInFrames is 0, render for the full parent duration (nested component) if (durationInFrames > 0 && (frame < startFrame || frame >= startFrame + durationInFrames)) { return null; } // Resolve static file path if it's a local asset const videoSrc = src.startsWith('http') ? src : staticFile(src); return ( <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', backgroundColor: '[[ colors.background.dark ]]', }} > <Video src={videoSrc} style={{ width: '100%', height: '100%', objectFit: fit, }} volume={volume} playbackRate={playbackRate} muted={muted} startFrom={startFrom} loop={loop} /> </div> ); };