@remotion/vercel 4.0.468 → 4.0.470

package/dist/esm/index.mjs

@@ -167,8 +167,8 @@ function checkValidInputRange(arr) {
   }
 }
 function checkInfiniteRange(name, arr) {
-  if (arr.length < 2) {
-    throw new Error(name + " must have at least 2 elements");
+  if (arr.length < 1) {
+    throw new Error(name + " must have at least 1 element");
   }
   for (const element of arr) {
     if (typeof element !== "number") {
@@ -196,6 +196,14 @@ function assertValidInterpolateEasingOption(easing, inputRangeLength) {
     }
   }
 }
+function assertValidInterpolatePosterizeOption(posterize) {
+  if (posterize === undefined) {
+    return;
+  }
+  if (typeof posterize !== "number" || !Number.isFinite(posterize) || posterize <= 0) {
+    throw new Error(\`posterize must be a positive finite number, but got \${posterize}\`);
+  }
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -213,6 +221,7 @@ function interpolate(input, inputRange, outputRange, options) {
   checkInfiniteRange("outputRange", outputRange);
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+  assertValidInterpolatePosterizeOption(options?.posterize);
   const easingOption = options?.easing;
   const defaultEasing = (num) => num;
   const resolveEasingForSegment = (segmentIndex) => {
@@ -235,8 +244,12 @@ function interpolate(input, inputRange, outputRange, options) {
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
-  const range = findRange(input, inputRange);
-  return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+  if (inputRange.length === 1) {
+    return outputRange[0];
+  }
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const range = findRange(posterizedInput, inputRange);
+  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
     easing: resolveEasingForSegment(range),
     extrapolateLeft,
     extrapolateRight
@@ -1140,8 +1153,10 @@ try {
 
 // script-embed:render-video-script
 var script2 = `// src/scripts/render-video.ts
-import { statSync } from "fs";
+import { randomUUID } from "crypto";
+import { stat, readFile, rename, writeFile } from "fs/promises";
 import { RenderInternals } from "@remotion/renderer";
+import { put } from "@vercel/blob";
 
 // ../core/dist/esm/no-react.mjs
 function interpolateFunction(input, inputRange, outputRange, options) {
@@ -1196,8 +1211,8 @@ function checkValidInputRange(arr) {
   }
 }
 function checkInfiniteRange(name, arr) {
-  if (arr.length < 2) {
-    throw new Error(name + " must have at least 2 elements");
+  if (arr.length < 1) {
+    throw new Error(name + " must have at least 1 element");
   }
   for (const element of arr) {
     if (typeof element !== "number") {
@@ -1225,6 +1240,14 @@ function assertValidInterpolateEasingOption(easing, inputRangeLength) {
     }
   }
 }
+function assertValidInterpolatePosterizeOption(posterize) {
+  if (posterize === undefined) {
+    return;
+  }
+  if (typeof posterize !== "number" || !Number.isFinite(posterize) || posterize <= 0) {
+    throw new Error(\`posterize must be a positive finite number, but got \${posterize}\`);
+  }
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -1242,6 +1265,7 @@ function interpolate(input, inputRange, outputRange, options) {
   checkInfiniteRange("outputRange", outputRange);
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+  assertValidInterpolatePosterizeOption(options?.posterize);
   const easingOption = options?.easing;
   const defaultEasing = (num) => num;
   const resolveEasingForSegment = (segmentIndex) => {
@@ -1264,8 +1288,12 @@ function interpolate(input, inputRange, outputRange, options) {
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
-  const range = findRange(input, inputRange);
-  return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+  if (inputRange.length === 1) {
+    return outputRange[0];
+  }
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const range = findRange(posterizedInput, inputRange);
+  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
     easing: resolveEasingForSegment(range),
     extrapolateLeft,
     extrapolateRight
@@ -2064,17 +2092,58 @@ var NoReactInternals = {
 };
 
 // src/scripts/render-video.ts
+var PROGRESS_FILE = "/vercel/sandbox/progress.json";
 var config = JSON.parse(process.argv[2]);
 var noop = () => {
   return;
 };
+var progressWrite = Promise.resolve();
+function getExtension(filePath) {
+  const lastDot = filePath.lastIndexOf(".");
+  if (lastDot === -1) {
+    return "";
+  }
+  return filePath.slice(lastDot);
+}
+var writeProgress = (message) => {
+  const tmpFile = \`\${PROGRESS_FILE}.tmp\`;
+  progressWrite = progressWrite.then(async () => {
+    await writeFile(tmpFile, JSON.stringify(message));
+    await rename(tmpFile, PROGRESS_FILE);
+  });
+  return progressWrite;
+};
+var reportProgress = async (message) => {
+  console.log(JSON.stringify(message));
+  await writeProgress(message);
+};
+var uploadToVercelBlob = async ({
+  sandboxFilePath,
+  contentType,
+  access,
+  blobPath
+}) => {
+  const blobToken = process.env.BLOB_READ_WRITE_TOKEN;
+  if (!blobToken) {
+    throw new Error("BLOB_READ_WRITE_TOKEN is not set.");
+  }
+  const actualBlobPath = blobPath ?? \`renders/\${randomUUID()}\${getExtension(sandboxFilePath)}\`;
+  const fileBuffer = await readFile(sandboxFilePath);
+  const { size } = await stat(sandboxFilePath);
+  const blob = await put(actualBlobPath, fileBuffer, {
+    access,
+    contentType,
+    token: blobToken
+  });
+  return { url: blob.downloadUrl, size };
+};
 try {
   const serializedInputProps = NoReactInternals.serializeJSONWithSpecialTypes({
     data: config.inputProps,
     indent: undefined,
     staticBase: null
   }).serializedString;
-  console.log(JSON.stringify({ stage: "opening-browser", overallProgress: 0 }));
+  await reportProgress({ stage: "opening-browser", overallProgress: 0 });
   const browser = await RenderInternals.internalOpenBrowser({
     browser: "chrome",
     browserExecutable: config.browserExecutable,
@@ -2089,7 +2158,7 @@ try {
     }),
     chromeMode: config.chromeMode
   });
-  console.log(JSON.stringify({ stage: "selecting-composition", overallProgress: 0.02 }));
+  await reportProgress({ stage: "selecting-composition", overallProgress: 0.02 });
   const { metadata: composition } = await RenderInternals.internalSelectComposition({
     serializedInputPropsWithCustomSchema: serializedInputProps,
     envVariables: config.envVariables,
@@ -2169,7 +2238,7 @@ try {
     sampleRate: config.sampleRate,
     puppeteerInstance: browser,
     onProgress: (progress) => {
-      console.log(JSON.stringify({
+      reportProgress({
         stage: "render-progress",
         progress: {
           renderedFrames: progress.renderedFrames,
@@ -2180,8 +2249,10 @@ try {
           progress: progress.progress,
           stitchStage: progress.stitchStage
         },
-        overallProgress: 0.04 + progress.progress * 0.96
-      }));
+        overallProgress: 0.04 + progress.progress * 0.94
+      }).catch((error) => {
+        console.error(error.message);
+      });
     },
     onDownload: () => {
       return;
@@ -2203,12 +2274,44 @@ try {
       onProgress: noop
     })
   });
-  console.log(JSON.stringify({ stage: "render-complete", overallProgress: 1 }));
+  await progressWrite;
+  console.log(JSON.stringify({ stage: "render-complete", overallProgress: 0.98 }));
   await browser.close({ silent: false });
-  const { size } = statSync(config.outputLocation ?? "/tmp/video.mp4");
-  console.log(JSON.stringify({ stage: "done", size, contentType, overallProgress: 1 }));
+  const sandboxFilePath = config.outputLocation ?? "/tmp/video.mp4";
+  if (config.vercelBlob) {
+    await reportProgress({ stage: "uploading", overallProgress: 0.99 });
+    const { url, size } = await uploadToVercelBlob({
+      sandboxFilePath,
+      contentType,
+      access: config.vercelBlob.access,
+      blobPath: config.vercelBlob.blobPath
+    });
+    await reportProgress({
+      stage: "done",
+      url,
+      size,
+      contentType,
+      overallProgress: 1
+    });
+  } else {
+    const { size } = await stat(sandboxFilePath);
+    await reportProgress({
+      stage: "done",
+      size,
+      contentType,
+      overallProgress: 1
+    });
+  }
 } catch (err) {
-  console.error(err.message);
+  const message = err.message;
+  await writeProgress({
+    stage: "error",
+    message,
+    overallProgress: 1
+  }).catch(() => {
+    return;
+  });
+  console.error(message);
   process.exit(1);
 }
 `;
@@ -2501,50 +2604,135 @@ async function createSandbox({
   await report(1, "Sandbox ready");
   return sandbox;
 }
-// src/render-media-on-vercel.ts
-async function renderMediaOnVercel({
-  sandbox,
-  compositionId,
-  inputProps,
-  onProgress,
-  outputFile = "/tmp/video.mp4",
-  codec = "h264",
-  crf,
-  imageFormat,
-  pixelFormat,
-  envVariables = {},
-  frameRange,
-  everyNthFrame = 1,
-  proResProfile,
-  chromiumOptions = {},
-  scale = 1,
-  preferLossless = false,
-  enforceAudioTrack = false,
-  disallowParallelEncoding = false,
-  concurrency,
-  metadata,
-  licenseKey,
-  videoBitrate,
-  audioBitrate,
-  encodingMaxRate,
-  encodingBufferSize,
-  muted = false,
-  numberOfGifLoops,
-  x264Preset,
-  gopSize,
-  colorSpace = "default",
-  jpegQuality = 80,
-  audioCodec,
-  logLevel = "info",
-  timeoutInMilliseconds = 30000,
-  forSeamlessAacConcatenation = false,
-  separateAudioTo,
-  hardwareAcceleration = "disable",
-  offthreadVideoCacheSizeInBytes,
-  mediaCacheSizeInBytes,
-  offthreadVideoThreads,
-  sampleRate
+// src/get-render-progress.ts
+import { Sandbox as Sandbox2 } from "@vercel/sandbox";
+var PROGRESS_FILE = "/vercel/sandbox/progress.json";
+var isStoppedOrExpiredSandboxError = (error) => {
+  if (typeof error === "object" && error !== null && "code" in error) {
+    return error.code === "sandbox_stopped";
+  }
+  if (!(error instanceof Error)) {
+    return false;
+  }
+  return error.message.includes("sandbox_stopped") || error.message.includes("Sandbox has stopped execution") || error.message.includes("no longer available");
+};
+var getCommandError = async (command) => {
+  const stderr = await command.stderr().catch(() => "");
+  const stdout = await command.stdout().catch(() => "");
+  const output = [stderr, stdout].filter(Boolean).join(" ");
+  return output || `Render command exited with code ${command.exitCode}.`;
+};
+async function getRenderProgress({
+  sandboxId,
+  cmdId
 }) {
+  let sandbox;
+  try {
+    sandbox = await Sandbox2.get({ sandboxId });
+  } catch {
+    return { stage: "expired" };
+  }
+  let command;
+  try {
+    command = await sandbox.getCommand(cmdId);
+  } catch (err) {
+    if (isStoppedOrExpiredSandboxError(err)) {
+      return { stage: "expired" };
+    }
+    return {
+      stage: "error",
+      message: err.message,
+      overallProgress: 1
+    };
+  }
+  let buffer;
+  try {
+    buffer = await sandbox.readFileToBuffer({ path: PROGRESS_FILE });
+  } catch (err) {
+    if (isStoppedOrExpiredSandboxError(err)) {
+      return { stage: "expired" };
+    }
+    return {
+      stage: "error",
+      message: err.message,
+      overallProgress: 1
+    };
+  }
+  if (!buffer) {
+    if (command.exitCode === null) {
+      return { stage: "starting", overallProgress: 0 };
+    }
+    const message = await getCommandError(command);
+    return { stage: "error", message, overallProgress: 1 };
+  }
+  let progress;
+  try {
+    progress = JSON.parse(buffer.toString("utf-8"));
+  } catch {
+    return {
+      stage: "error",
+      message: "Could not parse the render progress file.",
+      overallProgress: 1
+    };
+  }
+  if (command.exitCode !== null && command.exitCode !== 0) {
+    const message = await getCommandError(command);
+    return { stage: "error", message, overallProgress: 1 };
+  }
+  return progress;
+}
+// src/render-media-on-vercel.ts
+var DEFAULT_DETACHED_SANDBOX_TIMEOUT = 30 * 60 * 1000;
+var internalRenderMediaOnVercel = async (options) => {
+  const {
+    sandbox,
+    compositionId,
+    inputProps,
+    onProgress,
+    outputFile = "/tmp/video.mp4",
+    codec = "h264",
+    crf,
+    imageFormat,
+    pixelFormat,
+    envVariables = {},
+    frameRange,
+    everyNthFrame = 1,
+    proResProfile,
+    chromiumOptions = {},
+    scale = 1,
+    preferLossless = false,
+    enforceAudioTrack = false,
+    disallowParallelEncoding = false,
+    concurrency,
+    metadata,
+    licenseKey,
+    videoBitrate,
+    audioBitrate,
+    encodingMaxRate,
+    encodingBufferSize,
+    muted = false,
+    numberOfGifLoops,
+    x264Preset,
+    gopSize,
+    colorSpace = "default",
+    jpegQuality = 80,
+    audioCodec,
+    logLevel = "info",
+    timeoutInMilliseconds = 30000,
+    forSeamlessAacConcatenation = false,
+    separateAudioTo,
+    hardwareAcceleration = "disable",
+    offthreadVideoCacheSizeInBytes,
+    mediaCacheSizeInBytes,
+    offthreadVideoThreads,
+    sampleRate,
+    detached = false,
+    detachedSandboxTimeoutInMilliseconds = DEFAULT_DETACHED_SANDBOX_TIMEOUT
+  } = options;
+  const vercelBlob = options.detached ? options.vercelBlob : undefined;
+  if (detached && !vercelBlob) {
+    throw new Error("The vercelBlob option is required when detached is set to true.");
+  }
   const serveUrl = `/vercel/sandbox/${REMOTION_SANDBOX_BUNDLE_DIR}`;
   const renderConfig = {
     serveUrl,
@@ -2590,13 +2778,26 @@ async function renderMediaOnVercel({
     browserExecutable: null,
     binariesDirectory: null,
     repro: false,
-    sampleRate: sampleRate ?? 48000
+    sampleRate: sampleRate ?? 48000,
+    vercelBlob: vercelBlob ? {
+      blobPath: vercelBlob.blobPath ?? null,
+      access: vercelBlob.access
+    } : null
   };
   const renderCmd = await sandbox.runCommand({
     cmd: "node",
     args: ["render-video.mjs", JSON.stringify(renderConfig)],
-    detached: true
+    detached: true,
+    env: vercelBlob ? { BLOB_READ_WRITE_TOKEN: vercelBlob.blobToken } : undefined
   });
+  if (detached) {
+    await sandbox.extendTimeout(detachedSandboxTimeoutInMilliseconds);
+    return {
+      sandboxId: sandbox.sandboxId,
+      cmdId: renderCmd.cmdId,
+      outputFile
+    };
+  }
   let contentType = "application/octet-stream";
   for await (const log of renderCmd.logs()) {
     if (log.stream === "stdout") {
@@ -2617,7 +2818,8 @@ async function renderMediaOnVercel({
     throw new Error(`Render failed: ${stderr} ${stdout}`);
   }
   return { sandboxFilePath: outputFile, contentType };
-}
+};
+var renderMediaOnVercel = internalRenderMediaOnVercel;
 // src/render-still-on-vercel.ts
 async function renderStillOnVercel({
   sandbox,
@@ -2749,6 +2951,7 @@ export {
   uploadToVercelBlob,
   renderStillOnVercel,
   renderMediaOnVercel,
+  getRenderProgress,
   createSandbox,
   addBundleToSandbox
 };

package/dist/get-render-progress.d.ts

@@ -0,0 +1,5 @@
+import type { RenderProgress } from './types';
+export declare function getRenderProgress({ sandboxId, cmdId }: {
+    sandboxId: string;
+    cmdId: string;
+}): Promise<RenderProgress>;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { addBundleToSandbox } from './add-bundle-to-sandbox';
 export { createSandbox } from './create-sandbox';
+export { getRenderProgress } from './get-render-progress';
 export { renderMediaOnVercel } from './render-media-on-vercel';
 export { renderStillOnVercel } from './render-still-on-vercel';
-export type { AudioCodec, Bitrate, ChromeMode, ChromiumOptions, Codec, ColorSpace, CreateSandboxOnProgress, FrameRange, HardwareAccelerationOption, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, RenderMediaOnProgress, RenderMediaOnVercelProgress, RenderMediaProgress, RenderStillOnVercelProgress, StillImageFormat, StitchingState, VercelBlobAccess, VercelSandbox, VideoImageFormat, X264Preset, } from './types';
+export type { AudioCodec, Bitrate, ChromeMode, ChromiumOptions, Codec, ColorSpace, CreateSandboxOnProgress, FrameRange, HardwareAccelerationOption, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, RenderMediaOnProgress, RenderMediaOnVercelProgress, RenderMediaProgress, RenderProgress, RenderStillOnVercelProgress, StillImageFormat, StitchingState, VercelBlobAccess, VercelBlobUploadOptions, VercelSandbox, VideoImageFormat, X264Preset, } from './types';
 export { uploadToVercelBlob } from './upload-to-vercel-blob';

package/dist/render-media-on-vercel.d.ts

@@ -1,6 +1,6 @@
 import type { Sandbox } from '@vercel/sandbox';
-import type { AudioCodec, Bitrate, ChromiumOptions, Codec, ColorSpace, FrameRange, HardwareAccelerationOption, LogLevel, PixelFormat, ProResProfile, RenderMediaOnVercelProgress, VideoImageFormat, X264Preset } from './types';
-export declare function renderMediaOnVercel({ sandbox, compositionId, inputProps, onProgress, outputFile, codec, crf, imageFormat, pixelFormat, envVariables, frameRange, everyNthFrame, proResProfile, chromiumOptions, scale, preferLossless, enforceAudioTrack, disallowParallelEncoding, concurrency, metadata, licenseKey, videoBitrate, audioBitrate, encodingMaxRate, encodingBufferSize, muted, numberOfGifLoops, x264Preset, gopSize, colorSpace, jpegQuality, audioCodec, logLevel, timeoutInMilliseconds, forSeamlessAacConcatenation, separateAudioTo, hardwareAcceleration, offthreadVideoCacheSizeInBytes, mediaCacheSizeInBytes, offthreadVideoThreads, sampleRate }: {
+import type { AudioCodec, Bitrate, ChromiumOptions, Codec, ColorSpace, FrameRange, HardwareAccelerationOption, LogLevel, PixelFormat, ProResProfile, RenderMediaOnVercelProgress, VercelBlobUploadOptions, VideoImageFormat, X264Preset } from './types';
+type RenderMediaOnVercelBaseOptions = {
     sandbox: Sandbox;
     compositionId: string;
     inputProps: Record<string, unknown>;
@@ -42,7 +42,25 @@ export declare function renderMediaOnVercel({ sandbox, compositionId, inputProps
     mediaCacheSizeInBytes?: number | null;
     offthreadVideoThreads?: number | null;
     sampleRate?: number;
-}): Promise<{
-    sandboxFilePath: string;
-    contentType: string;
-}>;
+    detachedSandboxTimeoutInMilliseconds?: number;
+};
+type RenderMediaOnVercelRegularOptions = RenderMediaOnVercelBaseOptions & {
+    detached?: false;
+};
+type RenderMediaOnVercelDetachedOptions = RenderMediaOnVercelBaseOptions & {
+    detached: true;
+    vercelBlob: VercelBlobUploadOptions;
+};
+type RenderMediaOnVercelFunction = {
+    (options: RenderMediaOnVercelDetachedOptions): Promise<{
+        sandboxId: string;
+        cmdId: string;
+        outputFile: string;
+    }>;
+    (options: RenderMediaOnVercelRegularOptions): Promise<{
+        sandboxFilePath: string;
+        contentType: string;
+    }>;
+};
+export declare const renderMediaOnVercel: RenderMediaOnVercelFunction;
+export {};

package/dist/types.d.ts

@@ -17,33 +17,55 @@ export type RenderMediaOnVercelProgress = {
     progress: RenderMediaProgress;
     overallProgress: number;
 };
-export type RenderStillOnVercelProgress = {
-    stage: 'opening-browser';
+export type RenderProgress = {
+    stage: 'starting';
+    overallProgress: number;
+} | RenderMediaOnVercelProgress | {
+    stage: 'uploading';
     overallProgress: number;
 } | {
-    stage: 'selecting-composition';
+    stage: 'done';
+    url: string;
+    size: number;
+    contentType: string;
     overallProgress: number;
+} | {
+    stage: 'error';
+    message: string;
+    overallProgress: number;
+} | {
+    stage: 'expired';
 };
-export type { HardwareAccelerationOption, ProResProfile, } from '@remotion/renderer/client';
-export type VercelBlobAccess = 'public' | 'private';
-export type SandboxRenderMediaMessage = {
+export type RenderStillOnVercelProgress = {
     stage: 'opening-browser';
     overallProgress: number;
 } | {
     stage: 'selecting-composition';
     overallProgress: number;
-} | {
-    stage: 'render-progress';
-    progress: RenderMediaProgress;
+};
+export type { HardwareAccelerationOption, ProResProfile, } from '@remotion/renderer/client';
+export type VercelBlobAccess = 'public' | 'private';
+export type VercelBlobUploadOptions = {
+    blobToken: string;
+    access: VercelBlobAccess;
+    blobPath?: string;
+};
+export type SandboxRenderMediaMessage = RenderMediaOnVercelProgress | {
+    stage: 'render-complete';
     overallProgress: number;
 } | {
-    stage: 'render-complete';
+    stage: 'uploading';
     overallProgress: number;
 } | {
     stage: 'done';
     size: number;
     contentType: string;
     overallProgress: number;
+    url?: string;
+} | {
+    stage: 'error';
+    message: string;
+    overallProgress: number;
 };
 export type SandboxRenderStillMessage = {
     type: 'opening-browser';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/vercel",
-	"version": "4.0.468",
+	"version": "4.0.470",
 	"description": "Render Remotion videos on Vercel Sandbox",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -23,8 +23,8 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"@remotion/renderer": "4.0.468",
-		"remotion": "4.0.468"
+		"@remotion/renderer": "4.0.470",
+		"remotion": "4.0.470"
 	},
 	"peerDependencies": {
 		"@vercel/sandbox": ">=1.0.0"
@@ -38,7 +38,7 @@
 		"./package.json": "./package.json"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.468",
+		"@remotion/eslint-config-internal": "4.0.470",
 		"@vercel/blob": "2.3.0",
 		"@vercel/sandbox": "1.6.0",
 		"eslint": "9.19.0",