@agimon-ai/video-editor-mcp 0.7.0 → 0.8.2

package/src/remotion/compositions/clips/ImageClipRenderer.tsx

@@ -0,0 +1,103 @@
+/**
+ * ImageClipRenderer Component
+ *
+ * DESIGN PATTERNS:
+ * - Remotion composition pattern with useCurrentFrame()
+ * - Ken Burns motion + fade-in/out for cross-fade between clips
+ * - Type-safe props from Zod schema
+ *
+ * CODING STANDARDS:
+ * - NEVER use CSS animations - use useCurrentFrame()
+ * - Use interpolate() for linear animations
+ */
+
+import { Img, interpolate, useCurrentFrame } from 'remotion';
+import type { ImageClip } from '../../../types/index.js';
+import { resolveRemotionAssetSrc } from '../../../utils/assetPaths';
+
+const FADE_FRAMES = 12;
+const ZOOM_START = 1;
+const ZOOM_END = 1.08;
+const PAN_PERCENT = 1.5;
+const BURST_FRAMES = 12;
+const BURST_SCALE_START = 1.05;
+
+const hashCode = (input: string): number => {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash * 31 + input.charCodeAt(i)) | 0;
+  }
+  return hash;
+};
+
+export const ImageClipRenderer: React.FC<ImageClip & { zoomBurst?: boolean }> = ({
+  src,
+  style,
+  durationInFrames,
+  noFadeIn = false,
+  baseScale = 1,
+  transformOriginX = 'center',
+  transformOriginY = 'center',
+  zoomBurst = false,
+}) => {
+  const frame = useCurrentFrame();
+
+  if (!src) {
+    return null;
+  }
+
+  const kenBurnsScale = interpolate(frame, [0, durationInFrames], [ZOOM_START, ZOOM_END], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const variant = Math.abs(hashCode(src)) % 4;
+  const panX = variant === 0 ? -PAN_PERCENT : variant === 1 ? PAN_PERCENT : 0;
+  const panY = variant === 2 ? -PAN_PERCENT : variant === 3 ? PAN_PERCENT : 0;
+  const translateX = interpolate(frame, [0, durationInFrames], [0, panX], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const translateY = interpolate(frame, [0, durationInFrames], [0, panY], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const burstScale = zoomBurst
+    ? interpolate(frame, [0, BURST_FRAMES], [BURST_SCALE_START, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      })
+    : 1;
+
+  const scale = kenBurnsScale * baseScale * burstScale;
+  const transformOrigin = `${transformOriginX} ${transformOriginY}`;
+
+  const fadeIn = noFadeIn ? 0 : Math.min(FADE_FRAMES, Math.floor(durationInFrames / 4));
+  const fadeOutStart = durationInFrames - Math.min(FADE_FRAMES, Math.floor(durationInFrames / 4));
+  const opacity = noFadeIn
+    ? interpolate(frame, [0, fadeOutStart, durationInFrames], [1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      })
+    : interpolate(frame, [0, fadeIn, fadeOutStart, durationInFrames], [0, 1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+
+  return (
+    <Img
+      src={resolveRemotionAssetSrc(src)}
+      style={{
+        ...(style as React.CSSProperties),
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        objectPosition: 'center',
+        transform: `scale(${scale}) translate(${translateX}%, ${translateY}%)`,
+        transformOrigin,
+        opacity,
+      }}
+    />
+  );
+};

package/src/remotion/compositions/clips/LottieClipRenderer.tsx

@@ -0,0 +1,57 @@
+/**
+ * LottieClipRenderer Component
+ *
+ * DESIGN PATTERNS:
+ * - Remotion composition pattern with @remotion/lottie
+ * - Async loading with delayRender/continueRender
+ * - Type-safe props from Zod schema
+ *
+ * CODING STANDARDS:
+ * - Use Lottie component from @remotion/lottie
+ * - Fetch JSON animation data asynchronously
+ * - Handle loading states properly
+ */
+
+import { Lottie, LottieAnimationData } from '@remotion/lottie';
+import { useEffect, useState } from 'react';
+import { continueRender, delayRender } from 'remotion';
+import type { LottieClip } from '../../../types/index.js';
+import { resolveRemotionAssetSrc } from '../../../utils/assetPaths';
+
+export const LottieClipRenderer: React.FC<LottieClip> = ({ src, width, height, style }) => {
+  const [handle] = useState(() => delayRender());
+  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);
+
+  useEffect(() => {
+    if (!src) {
+      continueRender(handle);
+      return;
+    }
+
+    fetch(resolveRemotionAssetSrc(src))
+      .then((res) => res.json())
+      .then((data) => {
+        setAnimationData(data as LottieAnimationData);
+        continueRender(handle);
+      })
+      .catch((err) => {
+        console.error('Failed to load Lottie animation:', err);
+        continueRender(handle);
+      });
+  }, [src, handle]);
+
+  if (!src || !animationData) {
+    return null;
+  }
+
+  return (
+    <Lottie
+      animationData={animationData}
+      style={{
+        width: width ?? '100%',
+        height: height ?? '100%',
+        ...(style as React.CSSProperties),
+      }}
+    />
+  );
+};

package/src/remotion/compositions/clips/SubtitleClipRenderer.tsx

@@ -0,0 +1,85 @@
+/**
+ * SubtitleClipRenderer Component
+ *
+ * DESIGN PATTERNS:
+ * - Remotion composition pattern with useCurrentFrame()
+ * - Animation via interpolate()
+ * - Type-safe props from Zod schema
+ *
+ * CODING STANDARDS:
+ * - NEVER use CSS animations - use useCurrentFrame()
+ * - Use interpolate() for fade/slide animations
+ */
+
+import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
+import type { SubtitleClip } from '../../../types/index.js';
+
+export const SubtitleClipRenderer: React.FC<SubtitleClip> = ({
+  text,
+  fontSize = 32,
+  color = '#fff',
+  backgroundColor = 'rgba(0, 0, 0, 0.7)',
+  position = 'bottom',
+  animation = 'fade',
+}) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+
+  if (!text) {
+    return null;
+  }
+
+  let animatedStyle: React.CSSProperties = {};
+
+  switch (animation) {
+    case 'fade': {
+      const fadeInDuration = Math.min(10, durationInFrames / 4);
+      const fadeOutStart = durationInFrames - fadeInDuration;
+      const opacity = interpolate(frame, [0, fadeInDuration, fadeOutStart, durationInFrames], [0, 1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+      animatedStyle = { opacity };
+      break;
+    }
+
+    case 'slide': {
+      const slideDistance = 30;
+      const slideDuration = Math.min(15, durationInFrames / 3);
+      const translateY = interpolate(frame, [0, slideDuration], [slideDistance, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+      animatedStyle = { transform: `translateY(${translateY}px)` };
+      break;
+    }
+  }
+
+  const verticalPosition = position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center';
+
+  return (
+    <AbsoluteFill
+      style={{
+        display: 'flex',
+        alignItems: verticalPosition,
+        justifyContent: 'center',
+        padding: position === 'bottom' ? '0 40px 60px 40px' : '60px 40px 0 40px',
+      }}
+    >
+      <div
+        style={{
+          fontSize,
+          color,
+          backgroundColor,
+          padding: '16px 32px',
+          borderRadius: '8px',
+          textAlign: 'center',
+          maxWidth: '80%',
+          ...animatedStyle,
+        }}
+      >
+        {text}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/src/remotion/compositions/clips/TextClipRenderer.tsx

@@ -0,0 +1,131 @@
+/**
+ * TextClipRenderer Component
+ *
+ * DESIGN PATTERNS:
+ * - Remotion composition pattern with useCurrentFrame()
+ * - Animation via interpolate() and spring()
+ * - Type-safe props from Zod schema
+ *
+ * CODING STANDARDS:
+ * - NEVER use CSS animations - use useCurrentFrame()
+ * - Use interpolate() for linear animations
+ * - Use spring() for physics-based animations
+ */
+
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
+import type { TextClip } from '../../../types/index.js';
+
+export const TextClipRenderer: React.FC<TextClip> = ({
+  text,
+  fontSize = 48,
+  fontFamily = 'Arial, sans-serif',
+  fontWeight,
+  color = '#fff',
+  backgroundColor,
+  position = 'center',
+  animation = 'none',
+  highlightWord,
+  highlightColor = '#ffeb3b',
+  style: customStyle,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+
+  if (!text) {
+    return null;
+  }
+
+  let animatedStyle: React.CSSProperties = {};
+  let displayText = text;
+
+  switch (animation) {
+    case 'fade': {
+      const fadeInDuration = Math.min(15, durationInFrames / 4);
+      const fadeOutStart = durationInFrames - fadeInDuration;
+      const opacity = interpolate(frame, [0, fadeInDuration, fadeOutStart, durationInFrames], [0, 1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+      animatedStyle = { opacity };
+      break;
+    }
+
+    case 'slide': {
+      const slideDistance = 50;
+      const slideDuration = Math.min(20, durationInFrames / 3);
+      const translateY = interpolate(frame, [0, slideDuration], [slideDistance, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+      animatedStyle = { transform: `translateY(${translateY}px)` };
+      break;
+    }
+
+    case 'typewriter': {
+      const charsToShow = Math.floor(
+        interpolate(frame, [0, durationInFrames], [0, text.length], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        }),
+      );
+      displayText = text.substring(0, charsToShow);
+      break;
+    }
+
+    case 'highlight': {
+      if (highlightWord) {
+        const words = text.split(' ');
+        const wordIndex = words.findIndex((w) => w.includes(highlightWord));
+
+        if (wordIndex !== -1) {
+          const highlightProgress = spring({
+            frame: frame - 10,
+            fps,
+            config: { damping: 100, stiffness: 200, mass: 0.5 },
+          });
+
+          displayText = words
+            .map((word, idx) => {
+              if (idx === wordIndex) {
+                return `<span style="position: relative; display: inline-block;">
+                  <span style="position: absolute; bottom: 0; left: 0; height: 8px; background: ${highlightColor}; transform: scaleX(${highlightProgress}); transform-origin: left; z-index: -1;"></span>
+                  ${word}
+                </span>`;
+              }
+              return word;
+            })
+            .join(' ');
+        }
+      }
+      break;
+    }
+  }
+
+  const verticalPosition = position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center';
+
+  return (
+    <AbsoluteFill
+      style={{
+        display: 'flex',
+        justifyContent: verticalPosition,
+        alignItems: 'center',
+        padding: '40px',
+      }}
+    >
+      <div
+        style={{
+          fontSize,
+          fontFamily,
+          fontWeight,
+          color,
+          backgroundColor,
+          textAlign: 'center',
+          ...animatedStyle,
+          ...(customStyle as React.CSSProperties),
+        }}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: required for rich text rendering in video clips
+        dangerouslySetInnerHTML={{ __html: displayText }}
+      />
+    </AbsoluteFill>
+  );
+};

package/src/remotion/compositions/clips/VideoClipRenderer.tsx

@@ -0,0 +1,94 @@
+/**
+ * VideoClipRenderer Component
+ *
+ * DESIGN PATTERNS:
+ * - Remotion composition pattern with useCurrentFrame() for motion + fade
+ * - OffthreadVideo for performant playback
+ *
+ * CODING STANDARDS:
+ * - NEVER use CSS animations - use useCurrentFrame()
+ * - Use interpolate() for linear animations
+ * - Handle trimming via startFrom/endAt
+ */
+
+import { OffthreadVideo, interpolate, useCurrentFrame } from 'remotion';
+import type { VideoClip } from '../../../types/index.js';
+import { resolveRemotionAssetSrc } from '../../../utils/assetPaths';
+
+const FADE_FRAMES = 12;
+const ZOOM_START = 1;
+const ZOOM_END = 1.06;
+const PAN_PERCENT = 1.2;
+
+const hashCode = (input: string): number => {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash * 31 + input.charCodeAt(i)) | 0;
+  }
+  return hash;
+};
+
+export const VideoClipRenderer: React.FC<VideoClip> = ({
+  src,
+  volume = 1,
+  playbackRate = 1,
+  trimBefore = 0,
+  trimAfter = 0,
+  transparent = false,
+  muted = false,
+  noFadeIn = false,
+  durationInFrames,
+}) => {
+  const frame = useCurrentFrame();
+
+  if (!src) {
+    return null;
+  }
+
+  const scale = interpolate(frame, [0, durationInFrames], [ZOOM_START, ZOOM_END], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const variant = Math.abs(hashCode(src)) % 4;
+  const panX = variant === 0 ? -PAN_PERCENT : variant === 1 ? PAN_PERCENT : 0;
+  const panY = variant === 2 ? -PAN_PERCENT : variant === 3 ? PAN_PERCENT : 0;
+  const translateX = interpolate(frame, [0, durationInFrames], [0, panX], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const translateY = interpolate(frame, [0, durationInFrames], [0, panY], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const effectiveFadeFrames = noFadeIn ? 0 : FADE_FRAMES;
+  const fadeIn = Math.min(effectiveFadeFrames, Math.floor(durationInFrames / 4));
+  const fadeOutStart = durationInFrames - fadeIn;
+  const opacity = noFadeIn
+    ? 1
+    : interpolate(frame, [0, fadeIn, fadeOutStart, durationInFrames], [0, 1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+
+  return (
+    <OffthreadVideo
+      src={resolveRemotionAssetSrc(src)}
+      volume={muted ? 0 : volume}
+      playbackRate={playbackRate}
+      startFrom={trimBefore}
+      endAt={trimAfter > 0 ? trimAfter : undefined}
+      transparent={transparent}
+      muted={muted}
+      style={{
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        objectPosition: 'center',
+        transform: `scale(${scale}) translate(${translateX}%, ${translateY}%)`,
+        transformOrigin: 'center',
+        opacity,
+      }}
+    />
+  );
+};

package/src/remotion/compositions/clips/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * ClipRenderer Dispatcher
+ *
+ * DESIGN PATTERNS:
+ * - Type-safe dispatcher pattern
+ * - Routes clip types to appropriate renderers
+ *
+ * CODING STANDARDS:
+ * - Use discriminated union pattern for type safety
+ * - Exhaustive switch with default case
+ */
+
+import type { Clip } from '../../../types/index.js';
+import { AudioClipRenderer } from './AudioClipRenderer';
+import { GifClipRenderer } from './GifClipRenderer';
+import { ImageClipRenderer } from './ImageClipRenderer';
+import { LottieClipRenderer } from './LottieClipRenderer';
+import { SubtitleClipRenderer } from './SubtitleClipRenderer';
+import { TextClipRenderer } from './TextClipRenderer';
+import { VideoClipRenderer } from './VideoClipRenderer';
+
+export const ClipRenderer: React.FC<Clip> = (clip) => {
+  switch (clip.type) {
+    case 'video':
+      return <VideoClipRenderer {...clip} />;
+    case 'image':
+      return <ImageClipRenderer {...clip} />;
+    case 'text':
+      return <TextClipRenderer {...clip} />;
+    case 'audio':
+      return <AudioClipRenderer {...clip} />;
+    case 'subtitle':
+      return <SubtitleClipRenderer {...clip} />;
+    case 'gif':
+      return <GifClipRenderer {...clip} />;
+    case 'lottie':
+      return <LottieClipRenderer {...clip} />;
+    default:
+      return null;
+  }
+};
+
+export {
+  AudioClipRenderer,
+  GifClipRenderer,
+  ImageClipRenderer,
+  LottieClipRenderer,
+  SubtitleClipRenderer,
+  TextClipRenderer,
+  VideoClipRenderer,
+};

package/src/remotion/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Remotion Entry Point
+ *
+ * This file is the entry point for Remotion bundler.
+ */
+
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);

package/src/remotion/utils/calculateMainMetadata.ts

@@ -0,0 +1,76 @@
+/**
+ * Calculate Main Composition Metadata
+ *
+ * DESIGN PATTERNS:
+ * - Remotion calculateMetadata function
+ * - Dynamic duration calculation from clips and audio layer
+ *
+ * CODING STANDARDS:
+ * - Return metadata compatible with Remotion Composition
+ * - Calculate max duration across clips and timeline-defining audio
+ * - Ensure minimum 1 second duration
+ */
+
+import type { MainCompositionProps } from '../../types/index.js';
+
+const msToFrames = (durationMs: number, fps: number): number => Math.ceil((durationMs / 1000) * fps);
+
+const voiceoverEffectiveMs = (voiceover: NonNullable<MainCompositionProps['audio']>['voiceover']): number => {
+  if (!voiceover?.durationMs) {
+    return 0;
+  }
+
+  const trimmedMs = Math.max(0, (voiceover.trimAfterMs ?? voiceover.durationMs) - (voiceover.trimBeforeMs ?? 0));
+
+  return trimmedMs / (voiceover.playbackRate ?? 1);
+};
+
+export const calculateMainMetadata = async ({
+  props,
+  defaultProps,
+}: {
+  props: MainCompositionProps;
+  defaultProps: MainCompositionProps;
+}) => {
+  const merged = { ...defaultProps, ...props };
+
+  const clips = merged.clips || [];
+  const audio = merged.audio;
+  const fps = merged.fps || 30;
+
+  console.log('[calculateMainMetadata] Props keys:', Object.keys(props));
+  console.log('[calculateMainMetadata] Merged keys:', Object.keys(merged));
+  console.log('[calculateMainMetadata] clips:', Array.isArray(clips) ? clips.length : 'not array');
+  console.log('[calculateMainMetadata] audio:', audio ? 'present' : 'missing');
+
+  let maxFrame = 0;
+
+  if (Array.isArray(clips)) {
+    for (const clip of clips) {
+      const clipEnd = clip.startFrame + clip.durationInFrames;
+      if (clipEnd > maxFrame) {
+        maxFrame = clipEnd;
+      }
+    }
+  }
+
+  console.log('[calculateMainMetadata] Max frame from clips:', maxFrame);
+
+  if (audio?.voiceover && audio.voiceover.definesTimeline !== false) {
+    const voFrames = msToFrames(voiceoverEffectiveMs(audio.voiceover), fps);
+    console.log('[calculateMainMetadata] Voiceover frames:', voFrames);
+    if (voFrames > maxFrame) {
+      maxFrame = voFrames;
+    }
+  }
+
+  const durationInFrames = Math.max(maxFrame, fps);
+  console.log('[calculateMainMetadata] Final durationInFrames:', durationInFrames);
+
+  return {
+    durationInFrames,
+    fps,
+    width: merged.width || 1920,
+    height: merged.height || 1080,
+  };
+};