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>
  );
};