vargai 0.4.0-alpha30 → 0.4.0-alpha32

package/package.json

@@ -65,10 +65,11 @@
     "react-dom": "^19.2.0",
     "remotion": "^4.0.377",
     "replicate": "^1.4.0",
+    "sharp": "^0.34.5",
     "vargai": "^0.4.0-alpha11",
     "zod": "^4.2.1"
   },
-  "version": "0.4.0-alpha30",
+  "version": "0.4.0-alpha32",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/src/ai-sdk/providers/editly/backends/index.ts

@@ -0,0 +1,7 @@
+export { LocalBackend, localBackend } from "./local";
+export type {
+  FFmpegBackend,
+  FFmpegRunOptions,
+  FFmpegRunResult,
+  VideoInfo,
+} from "./types";

package/src/ai-sdk/providers/editly/backends/local.ts

@@ -0,0 +1,65 @@
+import { $ } from "bun";
+import type {
+  FFmpegBackend,
+  FFmpegRunOptions,
+  FFmpegRunResult,
+  VideoInfo,
+} from "./types";
+
+const FFMPEG_COMMON_ARGS = ["-hide_banner", "-loglevel", "error"];
+
+export class LocalBackend implements FFmpegBackend {
+  readonly name = "local";
+
+  async ffprobe(input: string): Promise<VideoInfo> {
+    const result =
+      await $`ffprobe -v error -show_entries stream=width,height,r_frame_rate,codec_type -show_entries format=duration -of json ${input}`.json();
+
+    const videoStream = result.streams?.find(
+      (s: { codec_type: string }) => s.codec_type === "video",
+    );
+    const parsedDuration = parseFloat(result.format?.duration ?? "0");
+    const duration = Number.isFinite(parsedDuration) ? parsedDuration : 0;
+
+    let fps: number | undefined;
+    const framerateStr: string | undefined = videoStream?.r_frame_rate;
+    if (framerateStr) {
+      const parts = framerateStr.split("/").map(Number);
+      const num = parts[0];
+      const den = parts[1];
+      if (den && den > 0 && num) fps = num / den;
+    }
+
+    return {
+      duration,
+      width: videoStream?.width,
+      height: videoStream?.height,
+      fps,
+      framerateStr,
+    };
+  }
+
+  async run(options: FFmpegRunOptions): Promise<FFmpegRunResult> {
+    const { args, outputPath, verbose } = options;
+
+    const ffmpegArgs = [
+      ...FFMPEG_COMMON_ARGS.slice(0, 2),
+      verbose ? "info" : "error",
+      ...args,
+    ];
+
+    if (verbose) {
+      console.log("ffmpeg", ffmpegArgs.join(" "));
+    }
+
+    const result = await $`ffmpeg ${ffmpegArgs}`.quiet();
+
+    if (result.exitCode !== 0) {
+      throw new Error(`ffmpeg failed with exit code ${result.exitCode}`);
+    }
+
+    return { output: { type: "file", path: outputPath } };
+  }
+}
+
+export const localBackend = new LocalBackend();

package/src/ai-sdk/providers/editly/backends/types.ts

@@ -0,0 +1,54 @@
+/**
+ * FFmpeg backend abstraction for dependency injection
+ * Allows switching between local ffmpeg and cloud services like Rendi
+ */
+
+import type { VideoInfo } from "../types";
+
+/**
+ * Represents the result of running ffprobe
+ */
+export type { VideoInfo };
+
+/**
+ * FFmpeg execution options
+ */
+export interface FFmpegRunOptions {
+  /** ffmpeg arguments (without the 'ffmpeg' command itself) */
+  args: string[];
+  /** List of input file paths (local or URLs) */
+  inputs: string[];
+  /** Output file path */
+  outputPath: string;
+  /** Enable verbose logging */
+  verbose?: boolean;
+}
+
+export type FFmpegOutput =
+  | { type: "file"; path: string }
+  | { type: "url"; url: string };
+
+export interface FFmpegRunResult {
+  output: FFmpegOutput;
+}
+
+/**
+ * Backend interface for ffmpeg/ffprobe execution
+ */
+export interface FFmpegBackend {
+  /** Backend name for identification */
+  readonly name: string;
+
+  /**
+   * Run ffprobe to get media file info
+   * @param input - File path (local) or URL
+   */
+  ffprobe(input: string): Promise<VideoInfo>;
+
+  /**
+   * Run ffmpeg command
+   * @param options - Execution options including args, inputs, and output path
+   * @returns Result with optional URL for cloud backends
+   */
+  run(options: FFmpegRunOptions): Promise<FFmpegRunResult>;
+}

package/src/ai-sdk/providers/editly/editly.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { existsSync, unlinkSync } from "node:fs";
-import { ffprobe } from "./ffmpeg";
+import { localBackend } from "./backends/local";
 import { editly } from "./index";
 
 const VIDEO_1 = "output/sora-landscape.mp4";
@@ -9,6 +9,8 @@ const VIDEO_TALKING = "output/workflow-talking-synced.mp4";
 const IMAGE_SQUARE = "media/replicate-forest.png";
 const IMAGE_PORTRAIT = "media/madi-portrait.png";
 
+const ffprobe = localBackend.ffprobe;
+
 describe("editly", () => {
   test("requires outPath", async () => {
     await expect(
@@ -1105,4 +1107,50 @@ describe("editly", () => {
     expect(info.height).toBe(1920);
     expect(info.duration).toBeCloseTo(3, 0);
   });
+
+  test("video overlay with cropPosition", async () => {
+    const outPath = "output/editly-test-crop-position.mp4";
+    if (existsSync(outPath)) unlinkSync(outPath);
+
+    await editly({
+      outPath,
+      width: 1080,
+      height: 1920,
+      fps: 30,
+      clips: [
+        {
+          duration: 3,
+          layers: [
+            { type: "fill-color", color: "#000000" },
+            {
+              type: "video",
+              path: VIDEO_1,
+              width: 1080,
+              height: 960,
+              left: 0,
+              top: 0,
+              resizeMode: "cover",
+              cropPosition: "top",
+            },
+            {
+              type: "video",
+              path: VIDEO_2,
+              width: 1080,
+              height: 960,
+              left: 0,
+              top: 960,
+              resizeMode: "cover",
+              cropPosition: "bottom",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(existsSync(outPath)).toBe(true);
+    const info = await ffprobe(outPath);
+    expect(info.width).toBe(1080);
+    expect(info.height).toBe(1920);
+    expect(info.duration).toBeCloseTo(3, 0);
+  });
 });

package/src/ai-sdk/providers/editly/index.ts

@@ -1,5 +1,4 @@
-import { $ } from "bun";
-import { ffprobe, multipleOf2 } from "./ffmpeg";
+import { type FFmpegBackend, localBackend } from "./backends";
 import {
   getImageOverlayFilter,
   getImageOverlayPositionFilter,
@@ -18,6 +17,7 @@ import type {
   Clip,
   DetachedAudioLayer,
   EditlyConfig,
+  EditlyResult,
   ImageOverlayLayer,
   Layer,
   NewsTitleLayer,
@@ -28,6 +28,7 @@ import type {
   VideoLayer,
 } from "./types";
 
+export * from "./backends";
 export * from "./types";
 
 const DEFAULT_DURATION = 4;
@@ -36,12 +37,22 @@ const DEFAULT_FPS = 30;
 const DEFAULT_WIDTH = 1280;
 const DEFAULT_HEIGHT = 720;
 
-async function getVideoDuration(path: string): Promise<number> {
-  const info = await ffprobe(path);
+function multipleOf2(n: number): number {
+  return Math.round(n / 2) * 2;
+}
+
+async function getVideoDuration(
+  path: string,
+  backend: FFmpegBackend,
+): Promise<number> {
+  const info = await backend.ffprobe(path);
   return info.duration;
 }
 
-async function getFirstVideoInfo(clips: Clip[]): Promise<{
+async function getFirstVideoInfo(
+  clips: Clip[],
+  backend: FFmpegBackend,
+): Promise<{
   width?: number;
   height?: number;
   fps?: number;
@@ -49,7 +60,7 @@ async function getFirstVideoInfo(clips: Clip[]): Promise<{
   for (const clip of clips) {
     for (const layer of clip.layers) {
       if (layer.type === "video") {
-        const info = await ffprobe((layer as VideoLayer).path);
+        const info = await backend.ffprobe((layer as VideoLayer).path);
         return { width: info.width, height: info.height, fps: info.fps };
       }
     }
@@ -72,6 +83,7 @@ function applyLayerDefaults(
 async function processClips(
   clips: Clip[],
   defaults: EditlyConfig["defaults"],
+  backend: FFmpegBackend,
 ): Promise<ProcessedClip[]> {
   const processed: ProcessedClip[] = [];
   const defaultDuration = defaults?.duration ?? DEFAULT_DURATION;
@@ -86,7 +98,7 @@ async function processClips(
     for (const layer of layers) {
       if (layer.type === "video" && !clip.duration) {
         const videoLayer = layer as VideoLayer;
-        const videoDuration = await getVideoDuration(videoLayer.path);
+        const videoDuration = await getVideoDuration(videoLayer.path, backend);
         const cutFrom = videoLayer.cutFrom ?? 0;
         const cutTo = videoLayer.cutTo ?? videoDuration;
         duration = cutTo - cutFrom;
@@ -522,7 +534,7 @@ function buildAudioFilter(
   };
 }
 
-export async function editly(config: EditlyConfig): Promise<void> {
+export async function editly(config: EditlyConfig): Promise<EditlyResult> {
   const {
     outPath,
     clips: clipsIn,
@@ -539,11 +551,17 @@ export async function editly(config: EditlyConfig): Promise<void> {
     fast,
   } = config;
 
+  const backend: FFmpegBackend = config.backend ?? localBackend;
+
+  if (verbose) {
+    console.log(`[editly] using backend: ${backend.name}`);
+  }
+
   if (!clipsIn || clipsIn.length === 0) {
     throw new Error("At least one clip is required");
   }
 
-  const firstVideoInfo = await getFirstVideoInfo(clipsIn);
+  const firstVideoInfo = await getFirstVideoInfo(clipsIn, backend);
   let width = config.width ?? firstVideoInfo.width ?? DEFAULT_WIDTH;
   let height = config.height ?? firstVideoInfo.height ?? DEFAULT_HEIGHT;
   const fps = config.fps ?? firstVideoInfo.fps ?? DEFAULT_FPS;
@@ -561,7 +579,7 @@ export async function editly(config: EditlyConfig): Promise<void> {
     console.log(`Output: ${width}x${height} @ ${fps}fps`);
   }
 
-  const clips = await processClips(clipsIn, defaults);
+  const clips = await processClips(clipsIn, defaults, backend);
 
   const continuousVideoOverlays = collectContinuousVideoOverlays(clips);
   const imageOverlays = collectImageOverlays(clips);
@@ -862,13 +880,18 @@ export async function editly(config: EditlyConfig): Promise<void> {
     console.log("\nFilter complex:\n", filterComplex.split(";").join(";\n"));
   }
 
-  const result = await $`ffmpeg ${ffmpegArgs}`.quiet();
+  const result = await backend.run({
+    args: ffmpegArgs,
+    inputs: allInputs,
+    outputPath: outPath,
+    verbose,
+  });
 
-  if (result.exitCode !== 0) {
-    throw new Error(`ffmpeg failed with exit code ${result.exitCode}`);
+  if (result.output.type === "file" && verbose) {
+    console.log(`Output: ${result.output.path}`);
   }
 
-  console.log(`Output: ${outPath}`);
+  return { output: result.output };
 }
 
 export default editly;

package/src/ai-sdk/providers/editly/layers.ts

@@ -1,4 +1,5 @@
 import type {
+  CropPosition,
   FillColorLayer,
   ImageLayer,
   ImageOverlayLayer,
@@ -15,6 +16,33 @@ import type {
   VideoLayer,
 } from "./types";
 
+function getCropPositionExpr(position: CropPosition | undefined): {
+  x: string;
+  y: string;
+} {
+  switch (position) {
+    case "top-left":
+      return { x: "0", y: "0" };
+    case "top":
+      return { x: "(iw-ow)/2", y: "0" };
+    case "top-right":
+      return { x: "iw-ow", y: "0" };
+    case "left":
+      return { x: "0", y: "(ih-oh)/2" };
+    case "right":
+      return { x: "iw-ow", y: "(ih-oh)/2" };
+    case "bottom-left":
+      return { x: "0", y: "ih-oh" };
+    case "bottom":
+      return { x: "(iw-ow)/2", y: "ih-oh" };
+    case "bottom-right":
+      return { x: "iw-ow", y: "ih-oh" };
+    case "center":
+    default:
+      return { x: "(iw-ow)/2", y: "(ih-oh)/2" };
+  }
+}
+
 function escapeDrawText(text: string): string {
   return text
     .replace(/\\/g, "\\\\")
@@ -161,9 +189,14 @@ export function getVideoFilterWithTrim(
   const layerHeight = parseSize(layer.height, height);
 
   if (isOverlay) {
-    filters.push(
-      `scale=${layerWidth}:${layerHeight}:force_original_aspect_ratio=decrease`,
-    );
+    let scaleFilter = `scale=${layerWidth}:${layerHeight}:force_original_aspect_ratio=decrease`;
+    if (layer.resizeMode === "cover") {
+      const { x, y } = getCropPositionExpr(layer.cropPosition);
+      scaleFilter = `scale=${layerWidth}:${layerHeight}:force_original_aspect_ratio=increase,crop=${layerWidth}:${layerHeight}:${x}:${y}`;
+    } else if (layer.resizeMode === "stretch") {
+      scaleFilter = `scale=${layerWidth}:${layerHeight}`;
+    }
+    filters.push(scaleFilter);
     filters.push("setsar=1");
     filters.push("fps=30");
     filters.push("settb=1/30");
@@ -555,7 +588,13 @@ export function getTitleFilter(
 ): string {
   const text = escapeDrawText(layer.text);
   const color = layer.textColor ?? "white";
-  const fontSize = Math.round(Math.min(width, height) * 0.08);
+
+  // Auto-size font to fit within 90% of frame width (same approach as subtitle)
+  const maxFontSize = Math.round(Math.min(width, height) * 0.08);
+  const maxTextWidth = width * 0.9;
+  // Average char width ≈ fontSize * 0.55 for sans-serif fonts
+  const fittedFontSize = Math.floor(maxTextWidth / (layer.text.length * 0.55));
+  const fontSize = Math.max(16, Math.min(maxFontSize, fittedFontSize));
 
   let x = "(w-text_w)/2";
   let y = "(h-text_h)/2";
@@ -587,7 +626,13 @@ export function getSubtitleFilter(
   const text = escapeDrawText(layer.text);
   const textColor = layer.textColor ?? "white";
   const bgColor = layer.backgroundColor ?? "black@0.7";
-  const fontSize = Math.round(Math.min(width, height) * 0.05);
+
+  // Auto-size font to fit within 90% of frame width
+  const maxFontSize = Math.round(Math.min(width, height) * 0.05);
+  const maxTextWidth = width * 0.9;
+  // Average char width ≈ fontSize * 0.55 for sans-serif fonts
+  const fittedFontSize = Math.floor(maxTextWidth / (layer.text.length * 0.55));
+  const fontSize = Math.max(16, Math.min(maxFontSize, fittedFontSize));
   const boxPadding = Math.round(fontSize * 0.4);
 
   const fontFile = layer.fontPath
@@ -626,7 +671,14 @@ export function getTitleBackgroundFilter(
 
   const text = escapeDrawText(layer.text);
   const textColor = layer.textColor ?? "white";
-  const fontSize = Math.round(Math.min(width, height) * 0.1);
+
+  // Auto-size font to fit within 90% of frame width
+  const maxFontSizeBg = Math.round(Math.min(width, height) * 0.1);
+  const maxTextWidthBg = width * 0.9;
+  const fittedFontSizeBg = Math.floor(
+    maxTextWidthBg / (layer.text.length * 0.55),
+  );
+  const fontSize = Math.max(16, Math.min(maxFontSizeBg, fittedFontSizeBg));
 
   const fontFile = layer.fontPath
     ? `:fontfile='${escapeDrawText(layer.fontPath)}'`