render-graphics.ts

/**
 * Render static graphics from any Remotion composition.
 *
 * Modes:
 *   --single    One frame → one PNG
 *   --carousel  Multiple key frames → Instagram carousel set
 *   --poster    Best frame auto-selected → poster/thumbnail
 *   --all       All key frames from PromoVideo timeline
 *
 * Usage:
 *   npx tsx render-graphics.ts --composition PromoVideo --props props/promo-video-default.json --single --frame 90
 *   npx tsx render-graphics.ts --composition PromoVideo --props props/promo-video-default.json --carousel
 *   npx tsx render-graphics.ts --composition PromoVideo --props props/promo-video-default.json --all
 *   npx tsx render-graphics.ts --composition PromoVideo --props props/promo/egypt-rixos-promo.json --carousel --format square
 */
import { execSync } from "child_process";
import { mkdirSync } from "fs";
import { join, basename, extname } from "path";

const OUT_DIR = join("out", "graphics");

// PromoVideo key frames (30fps)
const PROMO_KEYFRAMES: Record<string, { frame: number; label: string }> = {
  intro:     { frame: 45,  label: "brand-intro" },
  hero:      { frame: 135, label: "hero-reveal" },
  features1: { frame: 300, label: "features" },
  features2: { frame: 390, label: "features-full" },
  showcase1: { frame: 480, label: "showcase-1" },
  showcase2: { frame: 540, label: "showcase-2" },
  cta:       { frame: 720, label: "cta" },
  outro:     { frame: 840, label: "outro" },
};

// Carousel = curated subset for Instagram (max 10 slides)
const CAROUSEL_FRAMES = ["hero", "features1", "showcase1", "cta"];

// Poster = single best frame
const POSTER_FRAME = "hero";

// Format presets
const FORMATS: Record<string, { width: number; height: number }> = {
  vertical:  { width: 1080, height: 1920 },  // 9:16 Stories/Reels
  square:    { width: 1080, height: 1080 },  // 1:1 Instagram feed
  landscape: { width: 1920, height: 1080 },  // 16:9 YouTube thumbnail
  poster:    { width: 1080, height: 1350 },  // 4:5 Instagram portrait
};

interface CLIArgs {
  composition: string;
  props?: string;
  mode: "single" | "carousel" | "poster" | "all";
  frame?: number;
  format: string;
  scale?: number;
}

function parseArgs(): CLIArgs {
  const args = process.argv.slice(2);
  const result: CLIArgs = { composition: "PromoVideo", mode: "carousel", format: "vertical" };

  for (let i = 0; i < args.length; i++) {
    switch (args[i]) {
      case "--composition": result.composition = args[++i]; break;
      case "--props": result.props = args[++i]; break;
      case "--single": result.mode = "single"; break;
      case "--carousel": result.mode = "carousel"; break;
      case "--poster": result.mode = "poster"; break;
      case "--all": result.mode = "all"; break;
      case "--frame": result.frame = parseInt(args[++i]); break;
      case "--format": result.format = args[++i]; break;
      case "--scale": result.scale = parseFloat(args[++i]); break;
    }
  }

  if (!result.composition) {
    console.error(`Usage: npx tsx render-graphics.ts [options]

Options:
  --composition <id>   Composition name (default: PromoVideo)
  --props <path>       JSON props file
  --single             Render one frame (requires --frame)
  --carousel           Render Instagram carousel set (default)
  --poster             Render single best poster frame
  --all                Render all key frames
  --frame <n>          Frame number (for --single mode)
  --format <preset>    Output format: vertical | square | landscape | poster
  --scale <n>          Scale factor (e.g., 2 for 2x resolution)
`);
    process.exit(1);
  }

  return result;
}

function renderFrame(
  composition: string,
  propsFile: string | undefined,
  frame: number,
  outputPath: string,
  scale?: number,
): boolean {
  let cmd = `npx remotion still ${composition} --frame ${frame} ${outputPath}`;
  if (propsFile) cmd += ` --props ${propsFile}`;
  if (scale) cmd += ` --scale ${scale}`;

  try {
    execSync(cmd, { stdio: "pipe", timeout: 60_000 });
    console.log(`  OK: ${outputPath}`);
    return true;
  } catch (err: any) {
    const stderr = err.stderr?.toString().slice(-200) || err.message;
    console.error(`  FAIL: ${stderr}`);
    return false;
  }
}

function main() {
  const args = parseArgs();
  mkdirSync(OUT_DIR, { recursive: true });

  const propsName = args.props
    ? basename(args.props, extname(args.props))
    : args.composition.toLowerCase();

  let framesToRender: Array<{ frame: number; label: string }> = [];

  switch (args.mode) {
    case "single":
      if (args.frame === undefined) {
        console.error("--single requires --frame <number>");
        process.exit(1);
      }
      framesToRender = [{ frame: args.frame, label: `frame-${args.frame}` }];
      break;

    case "carousel":
      framesToRender = CAROUSEL_FRAMES.map((key) => PROMO_KEYFRAMES[key]).filter(Boolean);
      break;

    case "poster":
      framesToRender = [PROMO_KEYFRAMES[POSTER_FRAME]];
      break;

    case "all":
      framesToRender = Object.values(PROMO_KEYFRAMES);
      break;
  }

  console.log(`\nRendering ${framesToRender.length} graphic(s) — ${args.mode} mode`);
  console.log(`Composition: ${args.composition}`);
  console.log(`Format: ${args.format}\n`);

  let ok = 0;
  for (let i = 0; i < framesToRender.length; i++) {
    const { frame, label } = framesToRender[i];
    const suffix = args.mode === "carousel" ? `${i + 1}-${label}` : label;
    const outPath = join(OUT_DIR, `${propsName}-${suffix}.png`);

    console.log(`[${i + 1}/${framesToRender.length}] frame ${frame} → ${label}`);
    if (renderFrame(args.composition, args.props, frame, outPath, args.scale)) ok++;
  }

  console.log(`\nDone! ${ok}/${framesToRender.length} rendered → ${OUT_DIR}/`);
}

main();