fix(remotion): address PR #592 review feedback

Miriad · Miriad · commit f0eefb6eeac9 · 2026-03-03T14:23:10.000Z
- Use useVideoConfig() instead of hardcoded dimensions in HookScene
- Reduce DotGrid to ~48 dots for Lambda performance
- Add word chunking for narrations &gt;60 words
- Add missing extrapolateLeft: "clamp" for consistency
- Remove unused imports (FPS in Scene, fps in GlowSweeps)
- Extract shared VideoComposition component
- Replace execSync("rm -rf") with fs.rmSync()
diff --git a/lib/services/ffmpeg-compress.ts b/lib/services/ffmpeg-compress.ts
@@ -8,7 +8,7 @@
  */
 
 import { execFileSync, execSync } from "child_process";
-import { writeFileSync, readFileSync, unlinkSync, mkdtempSync } from "fs";
+import { writeFileSync, readFileSync, unlinkSync, mkdtempSync, rmSync } from "fs";
 import { join } from "path";
 import { tmpdir } from "os";
 
@@ -133,7 +133,7 @@ function makeTempDir() {
     }
     try {
       // Remove the temp directory itself
-      execSync(`rm -rf "${dir}"`, { stdio: "ignore" });
+      rmSync(dir, { recursive: true, force: true });
     } catch {
       /* ignore */
     }
diff --git a/remotion/components/HookScene.tsx b/remotion/components/HookScene.tsx
@@ -40,16 +40,18 @@ const DotGrid: React.FC<{
   durationInFrames: number;
   isVertical: boolean;
 }> = ({ frame, durationInFrames, isVertical }) => {
-  const cols = isVertical ? 10 : 16;
-  const rows = isVertical ? 18 : 10;
-  const dotSpacingX = isVertical ? 108 : 120;
-  const dotSpacingY = isVertical ? 107 : 108;
+  const cols = isVertical ? 6 : 8;
+  const rows = isVertical ? 8 : 6;
+  const dotSpacingX = isVertical ? 180 : 240;
+  const dotSpacingY = isVertical ? 240 : 180;
 
   // Slow drift of the entire grid
   const driftX = interpolate(frame, [0, durationInFrames], [0, 30], {
+    extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
   const driftY = interpolate(frame, [0, durationInFrames], [0, -20], {
+    extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
 
@@ -92,11 +94,13 @@ const Particles: React.FC<{
   frame: number;
   durationInFrames: number;
   isVertical: boolean;
-}> = ({ frame, durationInFrames, isVertical }) => {
+  width: number;
+  height: number;
+}> = ({ frame, durationInFrames, isVertical, width, height }) => {
   const count = 18;
   const particles: React.ReactNode[] = [];
-  const baseWidth = isVertical ? 1080 : 1920;
-  const baseHeight = isVertical ? 1920 : 1080;
+  const baseWidth = width;
+  const baseHeight = height;
 
   for (let i = 0; i < count; i++) {
     const startX = seededRandom(i * 7 + 1) * baseWidth;
@@ -145,11 +149,12 @@ const Particles: React.FC<{
 /** Glowing sweep lines that cross the screen before text appears */
 const GlowSweeps: React.FC<{
   frame: number;
-  fps: number;
   isVertical: boolean;
-}> = ({ frame, fps, isVertical }) => {
-  const screenW = isVertical ? 1080 : 1920;
-  const screenH = isVertical ? 1920 : 1080;
+  width: number;
+  height: number;
+}> = ({ frame, isVertical, width, height }) => {
+  const screenW = width;
+  const screenH = height;
 
   // Line 1: horizontal sweep at ~frame 5-25
   const sweep1Progress = interpolate(frame, [5, 25], [0, 1], {
@@ -241,16 +246,18 @@ export const HookScene: React.FC<HookSceneProps> = ({
   isVertical = false,
 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, width, height } = useVideoConfig();
   const fonts = isVertical ? FONT_SIZES.portrait : FONT_SIZES.landscape;
 
   // ── Dynamic gradient background ──────────────────────────────────────────
   // Rotate hue and shift gradient angle over the scene
   const gradientAngle = interpolate(frame, [0, durationInFrames], [135, 315], {
+    extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
   // We'll use CSS hue-rotate for dynamic color shifting
   const hueShift = interpolate(frame, [0, durationInFrames], [0, 30], {
+    extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
 
@@ -342,11 +349,13 @@ export const HookScene: React.FC<HookSceneProps> = ({
 
   // ── Decorative circles (enhanced) ────────────────────────────────────────
   const circle1Scale = interpolate(frame, [0, 60], [0.3, 1.3], {
+    extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
   const circle1Pulse = Math.sin(frame * 0.05) * 0.1;
 
   const circle2Scale = interpolate(frame, [10, 70], [0.2, 1.1], {
+    extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });
   const circle2Pulse = Math.sin(frame * 0.04 + 1) * 0.08;
@@ -366,6 +375,7 @@ export const HookScene: React.FC<HookSceneProps> = ({
         style={{
           background: `radial-gradient(ellipse at ${isVertical ? "50% 40%" : "30% 50%"}, ${COLORS.primary}33 0%, transparent 70%)`,
           opacity: interpolate(frame, [0, 40], [0, 0.8], {
+            extrapolateLeft: "clamp",
             extrapolateRight: "clamp",
           }),
         }}
@@ -383,10 +393,12 @@ export const HookScene: React.FC<HookSceneProps> = ({
         frame={frame}
         durationInFrames={durationInFrames}
         isVertical={isVertical}
+        width={width}
+        height={height}
       />
 
       {/* ── Glow sweep lines ── */}
-      <GlowSweeps frame={frame} fps={fps} isVertical={isVertical} />
+      <GlowSweeps frame={frame} isVertical={isVertical} width={width} height={height} />
 
       {/* ── Decorative circles ── */}
       <div
diff --git a/remotion/components/Scene.tsx b/remotion/components/Scene.tsx
@@ -8,7 +8,11 @@ import {
   useVideoConfig,
 } from "remotion";
 import type { SceneProps } from "../types";
-import { ANIMATION, COLORS, FONT_SIZES, FPS } from "../constants";
+import { ANIMATION, COLORS, FONT_SIZES } from "../constants";
+
+/** When narration exceeds this many words, animate in chunks of 3 instead of per-word */
+const WORD_CHUNK_THRESHOLD = 60;
+const CHUNK_SIZE = 3;
 
 export const Scene: React.FC<SceneProps> = ({
   narration,
@@ -96,12 +100,22 @@ export const Scene: React.FC<SceneProps> = ({
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
 
-  // --- Word-by-word reveal ---
+  // --- Word-by-word reveal (with chunking for long narrations) ---
   const words = narration.split(/\s+/).filter(Boolean);
   const totalWords = words.length;
-  // Spread word reveals across the available time (leave some buffer at end)
-  const revealWindow = Math.max(durationInFrames * 0.65, ANIMATION.fadeIn + totalWords * 2);
-  const framesPerWord = Math.max(2, (revealWindow - ANIMATION.fadeIn * 0.5) / totalWords);
+  const useChunking = totalWords > WORD_CHUNK_THRESHOLD;
+
+  // Build display units: either individual words or chunks of CHUNK_SIZE
+  const displayUnits: string[] = useChunking
+    ? Array.from({ length: Math.ceil(totalWords / CHUNK_SIZE) }, (_, i) =>
+        words.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE).join(" ")
+      )
+    : words;
+  const totalUnits = displayUnits.length;
+
+  // Spread reveals across the available time (leave some buffer at end)
+  const revealWindow = Math.max(durationInFrames * 0.65, ANIMATION.fadeIn + totalUnits * 2);
+  const framesPerUnit = Math.max(2, (revealWindow - ANIMATION.fadeIn * 0.5) / totalUnits);
 
   // Alternating gradient directions for visual variety
   const gradientAngle = (sceneIndex % 4) * 90;
@@ -247,36 +261,36 @@ export const Scene: React.FC<SceneProps> = ({
               gap: "0 0.35em",
             }}
           >
-            {words.map((word, i) => {
-              const wordStartFrame = ANIMATION.fadeIn * 0.3 + i * framesPerWord;
-              const wordOpacity = interpolate(
+            {displayUnits.map((unit, i) => {
+              const unitStartFrame = ANIMATION.fadeIn * 0.3 + i * framesPerUnit;
+              const unitOpacity = interpolate(
                 frame,
                 [
-                  wordStartFrame,
-                  wordStartFrame + 6,
+                  unitStartFrame,
+                  unitStartFrame + 6,
                   durationInFrames - ANIMATION.fadeOut,
                   durationInFrames,
                 ],
                 [0, 1, 1, 0],
                 { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
               );
-              const wordScale = interpolate(
+              const unitScale = interpolate(
                 frame,
-                [wordStartFrame, wordStartFrame + 6],
+                [unitStartFrame, unitStartFrame + 6],
                 [0.88, 1],
                 { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
               );
               return (
                 <span
-                  key={`${i}-${word}`}
+                  key={`${i}-${unit}`}
                   style={{
-                    opacity: wordOpacity,
-                    transform: `scale(${wordScale})`,
+                    opacity: unitOpacity,
+                    transform: `scale(${unitScale})`,
                     display: "inline-block",
                     willChange: "opacity, transform",
                   }}
                 >
-                  {word}
+                  {unit}
                 </span>
               );
             })}
diff --git a/remotion/compositions/MainVideo.tsx b/remotion/compositions/MainVideo.tsx
@@ -1,138 +1,7 @@
 import React from "react";
-import { AbsoluteFill, Audio, Sequence } from "remotion";
 import type { VideoInputProps } from "../types";
-import {
-  DEFAULT_CTA_DURATION,
-  DEFAULT_HOOK_DURATION,
-  DEFAULT_SPONSOR_DURATION,
-  FPS,
-  SPONSOR_INSERT_SECONDS,
-  TRANSITION_DURATION,
-} from "../constants";
-import { HookScene } from "../components/HookScene";
-import { Scene } from "../components/Scene";
-import { CTAScene } from "../components/CTAScene";
-import { SponsorSlot } from "../components/SponsorSlot";
+import { VideoComposition } from "./VideoComposition";
 
-export const MainVideo: React.FC<VideoInputProps> = ({
-  audioUrl,
-  audioDurationInSeconds,
-  hook,
-  scenes,
-  cta,
-  sponsor,
-  hookDurationInFrames,
-  ctaDurationInFrames,
-  sponsorDurationInFrames,
-}) => {
-  const hookDuration = hookDurationInFrames ?? DEFAULT_HOOK_DURATION;
-  const ctaDuration = ctaDurationInFrames ?? DEFAULT_CTA_DURATION;
-  const sponsorDuration = sponsor
-    ? (sponsorDurationInFrames ?? DEFAULT_SPONSOR_DURATION)
-    : 0;
-
-  const totalFrames = Math.ceil(audioDurationInSeconds * FPS);
-
-  // Calculate available frames for content scenes.
-  // With cross-fade overlap, each transition saves TRANSITION_DURATION frames.
-  // Transitions: hook→scene1, scene1→scene2, ..., sceneN→CTA
-  // Total transitions = scenes.length + 1 (hook-to-first-scene + between-scenes + last-scene-to-CTA)
-  const numTransitions = scenes.length + 1;
-  const overlapSavings = numTransitions * TRANSITION_DURATION;
-  const scenesAvailableFrames = totalFrames - hookDuration - ctaDuration + overlapSavings;
-
-  // Distribute scene frames evenly across all scenes
-  const perSceneFrames = Math.max(
-    FPS, // minimum 1 second per scene
-    Math.floor(scenesAvailableFrames / scenes.length)
-  );
-
-  // Sponsor insertion point in frames (~15s mark)
-  const sponsorInsertFrame = SPONSOR_INSERT_SECONDS * FPS;
-
-  // --- Build timeline with cross-fade overlaps ---
-  // Each scene starts TRANSITION_DURATION frames before the previous one ends.
-  // Hook starts at 0.
-  const hookStart = 0;
-
-  // First content scene overlaps with the end of the hook
-  const firstSceneStart = hookStart + hookDuration - TRANSITION_DURATION;
-
-  // Calculate scene start positions
-  const sceneStarts = scenes.map((_, index) =>
-    firstSceneStart + index * (perSceneFrames - TRANSITION_DURATION)
-  );
-
-  // CTA overlaps with the end of the last content scene
-  const lastSceneEnd = sceneStarts.length > 0
-    ? sceneStarts[sceneStarts.length - 1] + perSceneFrames
-    : hookStart + hookDuration;
-  const ctaStart = lastSceneEnd - TRANSITION_DURATION;
-
-  return (
-    <AbsoluteFill style={{ backgroundColor: "#000" }}>
-      {/* Audio track — plays for the entire composition */}
-      <Audio src={audioUrl} />
-
-      {/* Hook Scene */}
-      <Sequence
-        from={hookStart}
-        durationInFrames={hookDuration}
-        name="Hook"
-      >
-        <HookScene
-          hook={hook}
-          durationInFrames={hookDuration}
-          isVertical={false}
-        />
-      </Sequence>
-
-      {/* Content Scenes — with cross-fade overlap */}
-      {scenes.map((scene, index) => (
-        <Sequence
-          key={`scene-${index}`}
-          from={sceneStarts[index]}
-          durationInFrames={perSceneFrames}
-          name={`Scene ${index + 1}`}
-        >
-          <Scene
-            narration={scene.narration}
-            bRollUrl={scene.bRollUrl}
-            visualDescription={scene.visualDescription}
-            sceneIndex={index}
-            durationInFrames={perSceneFrames}
-            isVertical={false}
-          />
-        </Sequence>
-      ))}
-
-      {/* Sponsor Slot — overlaid at ~15s mark if sponsor data exists */}
-      {sponsor && sponsorDuration > 0 && (
-        <Sequence
-          from={sponsorInsertFrame}
-          durationInFrames={sponsorDuration}
-          name="Sponsor"
-        >
-          <SponsorSlot
-            sponsor={sponsor}
-            durationInFrames={sponsorDuration}
-            isVertical={false}
-          />
-        </Sequence>
-      )}
-
-      {/* CTA Scene — cross-fades in from last content scene */}
-      <Sequence
-        from={ctaStart}
-        durationInFrames={ctaDuration}
-        name="CTA"
-      >
-        <CTAScene
-          cta={cta}
-          durationInFrames={ctaDuration}
-          isVertical={false}
-        />
-      </Sequence>
-    </AbsoluteFill>
-  );
+export const MainVideo: React.FC<VideoInputProps> = (props) => {
+  return <VideoComposition {...props} isVertical={false} />;
 };
diff --git a/remotion/compositions/ShortVideo.tsx b/remotion/compositions/ShortVideo.tsx
diff --git a/remotion/compositions/VideoComposition.tsx b/remotion/compositions/VideoComposition.tsx
