@remotion/renderer 4.0.312 → 4.0.313

package/dist/esm/index.mjs

@@ -17524,11 +17524,12 @@ var getExtraFramesToCapture = ({
 };
 
 // src/get-frame-padded-index.ts
-var padIndex = ({
-  num,
-  filePadLength
+var getFrameOutputFileNameFromPattern = ({
+  pattern,
+  frame,
+  ext
 }) => {
-  return String(num).padStart(filePadLength, "0");
+  return pattern.replace(/\[frame\]/g, frame).replace(/\[ext\]/g, ext);
 };
 var getFrameOutputFileName = ({
   index,
@@ -17536,17 +17537,24 @@ var getFrameOutputFileName = ({
   imageFormat,
   countType,
   lastFrame,
-  totalFrames
+  totalFrames,
+  imageSequencePattern
 }) => {
   const filePadLength = getFilePadLength({ lastFrame, countType, totalFrames });
+  const frameStr = countType === "actual-frames" ? String(frame).padStart(filePadLength, "0") : String(index).padStart(filePadLength, "0");
+  if (imageSequencePattern) {
+    return getFrameOutputFileNameFromPattern({
+      pattern: imageSequencePattern,
+      frame: frameStr,
+      ext: imageFormat
+    });
+  }
   const prefix = "element";
   if (countType === "actual-frames") {
-    const paddedIndex = padIndex({ filePadLength, num: frame });
-    return `${prefix}-${paddedIndex}.${imageFormat}`;
+    return `${prefix}-${frameStr}.${imageFormat}`;
   }
   if (countType === "from-zero") {
-    const paddedIndex = padIndex({ filePadLength, num: index });
-    return `${prefix}-${paddedIndex}.${imageFormat}`;
+    return `${prefix}-${frameStr}.${imageFormat}`;
   }
   throw new TypeError("Unknown count type");
 };
@@ -18076,7 +18084,8 @@ var renderFrameWithOptionToReject = async ({
   framesRenderedObj,
   onFrameUpdate,
   frame,
-  page
+  page,
+  imageSequencePattern
 }) => {
   const startTime = performance.now();
   const index = framesToRender.indexOf(frame);
@@ -18124,7 +18133,8 @@ var renderFrameWithOptionToReject = async ({
       index,
       countType,
       lastFrame,
-      totalFrames: framesToRender.length
+      totalFrames: framesToRender.length,
+      imageSequencePattern
     })),
     jpegQuality,
     width,
@@ -18217,7 +18227,8 @@ var renderFrame = ({
   onFrameUpdate,
   framesRenderedObj,
   frame,
-  page
+  page,
+  imageSequencePattern
 }) => {
   return new Promise((resolve2, reject) => {
     renderFrameWithOptionToReject({
@@ -18249,7 +18260,8 @@ var renderFrame = ({
       framesRenderedObj,
       onFrameUpdate,
       frame,
-      page
+      page,
+      imageSequencePattern
     }).then(() => {
       resolve2();
     }).catch((err) => {
@@ -18290,7 +18302,8 @@ var renderFrameAndRetryTargetClose = async ({
   lastFrame,
   onFrameBuffer,
   onFrameUpdate,
-  nextFrameToRender
+  nextFrameToRender,
+  imageSequencePattern
 }) => {
   const currentPool = await poolPromise;
   if (stoppedSignal.stopped) {
@@ -18327,7 +18340,8 @@ var renderFrameAndRetryTargetClose = async ({
         timeoutInMilliseconds,
         nextFrameToRender,
         frame,
-        page: freePage
+        page: freePage,
+        imageSequencePattern
       }),
       new Promise((_, reject) => {
         cancelSignal?.(() => {
@@ -18394,7 +18408,8 @@ var renderFrameAndRetryTargetClose = async ({
         lastFrame,
         onFrameBuffer,
         onFrameUpdate,
-        nextFrameToRender
+        nextFrameToRender,
+        imageSequencePattern
       });
     }
     Log.warn({ indent, logLevel }, `The browser crashed while rendering frame ${frame}, retrying ${retriesLeft} more times. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
@@ -18438,7 +18453,8 @@ var renderFrameAndRetryTargetClose = async ({
       lastFrame,
       onFrameBuffer,
       onFrameUpdate,
-      nextFrameToRender
+      nextFrameToRender,
+      imageSequencePattern
     });
   }
 };
@@ -18545,7 +18561,8 @@ var innerRenderFrames = async ({
   compositionStart,
   forSeamlessAacConcatenation,
   onArtifact,
-  binariesDirectory
+  binariesDirectory,
+  imageSequencePattern
 }) => {
   if (outputDir) {
     if (!fs13.existsSync(outputDir)) {
@@ -18636,6 +18653,8 @@ var innerRenderFrames = async ({
     allFramesAndExtraFrames,
     concurrencyOrFramesToRender
   });
+  const pattern = imageSequencePattern || `element-[frame].[ext]`;
+  const imageSequenceName = pattern.replace(/\[frame\]/g, `%0${filePadLength}d`).replace(/\[ext\]/g, imageFormat);
   await Promise.all(allFramesAndExtraFrames.map(() => {
     return renderFrameAndRetryTargetClose({
       retriesLeft: MAX_RETRIES_PER_FRAME,
@@ -18668,7 +18687,8 @@ var innerRenderFrames = async ({
       makeNewPage,
       onFrameBuffer,
       onFrameUpdate,
-      nextFrameToRender
+      nextFrameToRender,
+      imageSequencePattern: pattern
     });
   }));
   const firstFrameIndex = countType === "from-zero" ? 0 : framesToRender[0];
@@ -18678,7 +18698,7 @@ var innerRenderFrames = async ({
       assets: assets.sort((a, b) => {
         return a.frame - b.frame;
       }),
-      imageSequenceName: path20.join(frameDir, `element-%0${filePadLength}d.${imageFormat}`),
+      imageSequenceName: path20.join(frameDir, imageSequenceName),
       firstFrameIndex,
       downloadMap,
       trimLeftOffset,
@@ -18725,7 +18745,8 @@ var internalRenderFramesRaw = ({
   onBrowserDownload,
   onArtifact,
   chromeMode,
-  offthreadVideoThreads
+  offthreadVideoThreads,
+  imageSequencePattern
 }) => {
   validateDimension(composition.height, "height", "in the `config` object passed to `renderFrames()`");
   validateDimension(composition.width, "width", "in the `config` object passed to `renderFrames()`");
@@ -18827,7 +18848,8 @@ var internalRenderFramesRaw = ({
           onBrowserDownload,
           onArtifact,
           chromeMode,
-          offthreadVideoThreads
+          offthreadVideoThreads,
+          imageSequencePattern
         });
       })
     ]).then((res) => {
@@ -18895,7 +18917,8 @@ var renderFrames = (options) => {
     onBrowserDownload,
     onArtifact,
     chromeMode,
-    offthreadVideoThreads
+    offthreadVideoThreads,
+    imageSequencePattern
   } = options;
   if (!composition) {
     throw new Error("No `composition` option has been specified for renderFrames()");
@@ -18952,7 +18975,8 @@ var renderFrames = (options) => {
     onBrowserDownload: onBrowserDownload ?? defaultBrowserDownloadProgress({ indent, logLevel, api: "renderFrames()" }),
     onArtifact: onArtifact ?? null,
     chromeMode: chromeMode ?? "headless-shell",
-    offthreadVideoThreads: offthreadVideoThreads ?? null
+    offthreadVideoThreads: offthreadVideoThreads ?? null,
+    imageSequencePattern: imageSequencePattern ?? null
   });
 };
 
@@ -21336,7 +21360,8 @@ var internalRenderMediaRaw = ({
         forSeamlessAacConcatenation,
         onBrowserDownload,
         onArtifact,
-        chromeMode
+        chromeMode,
+        imageSequencePattern: null
       });
       return renderFramesProc;
     }).then((renderFramesReturn) => {

package/dist/get-frame-padded-index.d.ts

@@ -1,12 +1,18 @@
 import type { VideoImageFormat } from './image-format';
 export type CountType = 'from-zero' | 'actual-frames';
-export declare const getFrameOutputFileName: ({ index, frame, imageFormat, countType, lastFrame, totalFrames, }: {
+export declare const getFrameOutputFileNameFromPattern: ({ pattern, frame, ext, }: {
+    pattern: string;
+    frame: string;
+    ext: string;
+}) => string;
+export declare const getFrameOutputFileName: ({ index, frame, imageFormat, countType, lastFrame, totalFrames, imageSequencePattern, }: {
     index: number;
     frame: number;
     imageFormat: VideoImageFormat;
     countType: CountType;
     lastFrame: number;
     totalFrames: number;
+    imageSequencePattern: string | null;
 }) => string;
 export declare const getFilePadLength: ({ lastFrame, totalFrames, countType, }: {
     lastFrame: number;

package/dist/get-frame-padded-index.js

@@ -4,20 +4,29 @@
 // - If `--every-nth-frame` is passed, only frames 0, 2, 4 are rendered
 // - If an image sequence is created, the filenames should correspond to the frame numbers: element-099.jpg, element-100.jpg
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFilePadLength = exports.getFrameOutputFileName = void 0;
-const padIndex = ({ num, filePadLength, }) => {
-    return String(num).padStart(filePadLength, '0');
+exports.getFilePadLength = exports.getFrameOutputFileName = exports.getFrameOutputFileNameFromPattern = void 0;
+const getFrameOutputFileNameFromPattern = ({ pattern, frame, ext, }) => {
+    return pattern.replace(/\[frame\]/g, frame).replace(/\[ext\]/g, ext);
 };
-const getFrameOutputFileName = ({ index, frame, imageFormat, countType, lastFrame, totalFrames, }) => {
+exports.getFrameOutputFileNameFromPattern = getFrameOutputFileNameFromPattern;
+const getFrameOutputFileName = ({ index, frame, imageFormat, countType, lastFrame, totalFrames, imageSequencePattern, }) => {
     const filePadLength = (0, exports.getFilePadLength)({ lastFrame, countType, totalFrames });
+    const frameStr = countType === 'actual-frames'
+        ? String(frame).padStart(filePadLength, '0')
+        : String(index).padStart(filePadLength, '0');
+    if (imageSequencePattern) {
+        return (0, exports.getFrameOutputFileNameFromPattern)({
+            pattern: imageSequencePattern,
+            frame: frameStr,
+            ext: imageFormat,
+        });
+    }
     const prefix = 'element';
     if (countType === 'actual-frames') {
-        const paddedIndex = padIndex({ filePadLength, num: frame });
-        return `${prefix}-${paddedIndex}.${imageFormat}`;
+        return `${prefix}-${frameStr}.${imageFormat}`;
     }
     if (countType === 'from-zero') {
-        const paddedIndex = padIndex({ filePadLength, num: index });
-        return `${prefix}-${paddedIndex}.${imageFormat}`;
+        return `${prefix}-${frameStr}.${imageFormat}`;
     }
     throw new TypeError('Unknown count type');
 };

package/dist/index.d.ts

@@ -1041,6 +1041,21 @@ export declare const RenderInternals: {
             setConfig: (newChromeMode: import("./options/chrome-mode").ChromeMode) => void;
             type: import("./options/chrome-mode").ChromeMode;
         };
+        readonly imageSequencePattern: {
+            name: string;
+            cliFlag: "image-sequence-pattern";
+            ssrName: string;
+            description: () => import("react/jsx-runtime").JSX.Element;
+            docLink: null;
+            type: string | null;
+            getValue: ({ commandLine }: {
+                commandLine: Record<string, unknown>;
+            }) => {
+                value: string;
+                source: string;
+            };
+            setConfig: (pattern: string | null) => void;
+        };
     }>) => Promise<import("./types").RenderFramesOutput>;
     internalRenderMedia: (args_0: import("./render-media").InternalRenderMediaOptions) => Promise<{
         buffer: Buffer | null;

package/dist/options/image-sequence-pattern.d.ts

@@ -0,0 +1,15 @@
+export declare const imageSequencePatternOption: {
+    name: string;
+    cliFlag: "image-sequence-pattern";
+    ssrName: string;
+    description: () => import("react/jsx-runtime").JSX.Element;
+    docLink: null;
+    type: string | null;
+    getValue: ({ commandLine }: {
+        commandLine: Record<string, unknown>;
+    }) => {
+        value: string;
+        source: string;
+    };
+    setConfig: (pattern: string | null) => void;
+};

package/dist/options/image-sequence-pattern.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageSequencePatternOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cliFlag = 'image-sequence-pattern';
+let currentImageSequencePattern = null;
+// Option for --image-sequence-pattern
+exports.imageSequencePatternOption = {
+    name: 'Image Sequence Pattern',
+    cliFlag,
+    ssrName: 'imageSequencePattern',
+    description: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Pattern for naming image sequence files. Supports ", (0, jsx_runtime_1.jsx)("code", { children: "[frame]" }), " for the zero-padded frame number and ", (0, jsx_runtime_1.jsx)("code", { children: "[ext]" }), " for the file extension."] })),
+    docLink: null,
+    type: 'string',
+    getValue: ({ commandLine }) => {
+        if (currentImageSequencePattern !== null) {
+            return {
+                value: currentImageSequencePattern,
+                source: 'config',
+            };
+        }
+        return {
+            value: commandLine[cliFlag],
+            source: 'cli',
+        };
+    },
+    setConfig: (pattern) => {
+        currentImageSequencePattern = pattern;
+    },
+};

package/dist/options/index.d.ts

@@ -694,6 +694,21 @@ export declare const allOptions: {
         };
         setConfig(value: boolean): void;
     };
+    imageSequencePatternOption: {
+        name: string;
+        cliFlag: "image-sequence-pattern";
+        ssrName: string;
+        description: () => import("react/jsx-runtime").JSX.Element;
+        docLink: null;
+        type: string | null;
+        getValue: ({ commandLine }: {
+            commandLine: Record<string, unknown>;
+        }) => {
+            value: string;
+            source: string;
+        };
+        setConfig: (pattern: string | null) => void;
+    };
 };
 export type AvailableOptions = keyof typeof allOptions;
 export type TypeOfOption<Type> = Type extends AnyRemotionOption<infer X> ? X : never;

package/dist/options/index.js

@@ -22,6 +22,7 @@ const for_seamless_aac_concatenation_1 = require("./for-seamless-aac-concatenati
 const gl_1 = require("./gl");
 const hardware_acceleration_1 = require("./hardware-acceleration");
 const headless_1 = require("./headless");
+const image_sequence_pattern_1 = require("./image-sequence-pattern");
 const jpeg_quality_1 = require("./jpeg-quality");
 const latency_hint_1 = require("./latency-hint");
 const log_level_1 = require("./log-level");
@@ -88,4 +89,5 @@ exports.allOptions = {
     apiKeyOption: api_key_1.apiKeyOption,
     audioLatencyHintOption: latency_hint_1.audioLatencyHintOption,
     enableCrossSiteIsolationOption: cross_site_isolation_1.enableCrossSiteIsolationOption,
+    imageSequencePatternOption: image_sequence_pattern_1.imageSequencePatternOption,
 };

package/dist/options/options-map.d.ts

@@ -876,6 +876,21 @@ export declare const optionsMap: {
             setConfig: (newChromeMode: import("./chrome-mode").ChromeMode) => void;
             type: import("./chrome-mode").ChromeMode;
         };
+        readonly imageSequencePattern: {
+            name: string;
+            cliFlag: "image-sequence-pattern";
+            ssrName: string;
+            description: () => import("react/jsx-runtime").JSX.Element;
+            docLink: null;
+            type: string | null;
+            getValue: ({ commandLine }: {
+                commandLine: Record<string, unknown>;
+            }) => {
+                value: string;
+                source: string;
+            };
+            setConfig: (pattern: string | null) => void;
+        };
     };
     readonly renderMediaOnLambda: {
         readonly offthreadVideoCacheSizeInBytes: {

package/dist/options/options-map.js

@@ -14,6 +14,7 @@ const encoding_max_rate_1 = require("./encoding-max-rate");
 const enforce_audio_1 = require("./enforce-audio");
 const for_seamless_aac_concatenation_1 = require("./for-seamless-aac-concatenation");
 const hardware_acceleration_1 = require("./hardware-acceleration");
+const image_sequence_pattern_1 = require("./image-sequence-pattern");
 const jpeg_quality_1 = require("./jpeg-quality");
 const log_level_1 = require("./log-level");
 const mute_1 = require("./mute");
@@ -97,6 +98,7 @@ exports.optionsMap = {
         binariesDirectory: binaries_directory_1.binariesDirectoryOption,
         onBrowserDownload: on_browser_download_1.onBrowserDownloadOption,
         chromeMode: chrome_mode_1.chromeModeOption,
+        imageSequencePattern: image_sequence_pattern_1.imageSequencePatternOption,
     },
     renderMediaOnLambda: {
         offthreadVideoCacheSizeInBytes: offthreadvideo_cache_size_1.offthreadVideoCacheSizeInBytesOption,

package/dist/render-frame-and-retry-target-close.d.ts

@@ -11,7 +11,7 @@ import type { NextFrameToRender } from './next-frame-to-render';
 import type { Pool } from './pool';
 import type { FrameAndAssets, OnArtifact } from './render-frames';
 import type { BrowserReplacer } from './replace-browser';
-export declare const renderFrameAndRetryTargetClose: ({ retriesLeft, attempt, assets, imageFormat, binariesDirectory, cancelSignal, composition, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, onError, outputDir, poolPromise, scale, stoppedSignal, timeoutInMilliseconds, indent, logLevel, makeBrowser, makeNewPage, browserReplacer, concurrencyOrFramesToRender, framesRenderedObj, lastFrame, onFrameBuffer, onFrameUpdate, nextFrameToRender, }: {
+export declare const renderFrameAndRetryTargetClose: ({ retriesLeft, attempt, assets, imageFormat, binariesDirectory, cancelSignal, composition, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, onError, outputDir, poolPromise, scale, stoppedSignal, timeoutInMilliseconds, indent, logLevel, makeBrowser, makeNewPage, browserReplacer, concurrencyOrFramesToRender, framesRenderedObj, lastFrame, onFrameBuffer, onFrameUpdate, nextFrameToRender, imageSequencePattern, }: {
     retriesLeft: number;
     attempt: number;
     imageFormat: VideoImageFormat;
@@ -47,4 +47,5 @@ export declare const renderFrameAndRetryTargetClose: ({ retriesLeft, attempt, as
     onFrameBuffer: null | ((buffer: Buffer, frame: number) => void) | undefined;
     onFrameUpdate: null | ((framesRendered: number, frameIndex: number, timeToRenderInMilliseconds: number) => void);
     nextFrameToRender: NextFrameToRender;
+    imageSequencePattern: string | null;
 }) => Promise<void>;

package/dist/render-frame-and-retry-target-close.js

@@ -7,7 +7,7 @@ const is_delay_render_error_with_retry_1 = require("./is-delay-render-error-with
 const logger_1 = require("./logger");
 const make_cancel_signal_1 = require("./make-cancel-signal");
 const render_frame_1 = require("./render-frame");
-const renderFrameAndRetryTargetClose = async ({ retriesLeft, attempt, assets, imageFormat, binariesDirectory, cancelSignal, composition, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, onError, outputDir, poolPromise, scale, stoppedSignal, timeoutInMilliseconds, indent, logLevel, makeBrowser, makeNewPage, browserReplacer, concurrencyOrFramesToRender, framesRenderedObj, lastFrame, onFrameBuffer, onFrameUpdate, nextFrameToRender, }) => {
+const renderFrameAndRetryTargetClose = async ({ retriesLeft, attempt, assets, imageFormat, binariesDirectory, cancelSignal, composition, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, onError, outputDir, poolPromise, scale, stoppedSignal, timeoutInMilliseconds, indent, logLevel, makeBrowser, makeNewPage, browserReplacer, concurrencyOrFramesToRender, framesRenderedObj, lastFrame, onFrameBuffer, onFrameUpdate, nextFrameToRender, imageSequencePattern, }) => {
     var _a;
     const currentPool = await poolPromise;
     if (stoppedSignal.stopped) {
@@ -45,6 +45,7 @@ const renderFrameAndRetryTargetClose = async ({ retriesLeft, attempt, assets, im
                 nextFrameToRender,
                 frame,
                 page: freePage,
+                imageSequencePattern,
             }),
             new Promise((_, reject) => {
                 cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
@@ -114,6 +115,7 @@ const renderFrameAndRetryTargetClose = async ({ retriesLeft, attempt, assets, im
                 onFrameBuffer,
                 onFrameUpdate,
                 nextFrameToRender,
+                imageSequencePattern,
             });
         }
         logger_1.Log.warn({ indent, logLevel }, `The browser crashed while rendering frame ${frame}, retrying ${retriesLeft} more times. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
@@ -161,6 +163,7 @@ const renderFrameAndRetryTargetClose = async ({ retriesLeft, attempt, assets, im
             onFrameBuffer,
             onFrameUpdate,
             nextFrameToRender,
+            imageSequencePattern,
         });
     }
 };

package/dist/render-frame-with-option-to-reject.d.ts

@@ -6,7 +6,7 @@ import type { VideoImageFormat } from './image-format';
 import type { LogLevel } from './log-level';
 import type { CancelSignal } from './make-cancel-signal';
 import type { FrameAndAssets, OnArtifact } from './render-frames';
-export declare const renderFrameWithOptionToReject: ({ reject, width, height, compId, attempt, stoppedSignal, indent, logLevel, timeoutInMilliseconds, outputDir, onFrameBuffer, imageFormat, onError, lastFrame, jpegQuality, frameDir, scale, countType, assets, framesToRender, onArtifact, onDownload, downloadMap, binariesDirectory, cancelSignal, framesRenderedObj, onFrameUpdate, frame, page, }: {
+export declare const renderFrameWithOptionToReject: ({ reject, width, height, compId, attempt, stoppedSignal, indent, logLevel, timeoutInMilliseconds, outputDir, onFrameBuffer, imageFormat, onError, lastFrame, jpegQuality, frameDir, scale, countType, assets, framesToRender, onArtifact, onDownload, downloadMap, binariesDirectory, cancelSignal, framesRenderedObj, onFrameUpdate, frame, page, imageSequencePattern, }: {
     reject: (err: Error) => void;
     width: number;
     height: number;
@@ -40,4 +40,5 @@ export declare const renderFrameWithOptionToReject: ({ reject, width, height, co
     onFrameUpdate: null | ((framesRendered: number, frameIndex: number, timeToRenderInMilliseconds: number) => void);
     frame: number;
     page: Page;
+    imageSequencePattern: string | null;
 }) => Promise<undefined>;

package/dist/render-frame-with-option-to-reject.js

@@ -14,7 +14,7 @@ const logger_1 = require("./logger");
 const seek_to_frame_1 = require("./seek-to-frame");
 const take_frame_1 = require("./take-frame");
 const truthy_1 = require("./truthy");
-const renderFrameWithOptionToReject = async ({ reject, width, height, compId, attempt, stoppedSignal, indent, logLevel, timeoutInMilliseconds, outputDir, onFrameBuffer, imageFormat, onError, lastFrame, jpegQuality, frameDir, scale, countType, assets, framesToRender, onArtifact, onDownload, downloadMap, binariesDirectory, cancelSignal, framesRenderedObj, onFrameUpdate, frame, page, }) => {
+const renderFrameWithOptionToReject = async ({ reject, width, height, compId, attempt, stoppedSignal, indent, logLevel, timeoutInMilliseconds, outputDir, onFrameBuffer, imageFormat, onError, lastFrame, jpegQuality, frameDir, scale, countType, assets, framesToRender, onArtifact, onDownload, downloadMap, binariesDirectory, cancelSignal, framesRenderedObj, onFrameUpdate, frame, page, imageSequencePattern, }) => {
     const startTime = performance.now();
     const index = framesToRender.indexOf(frame);
     const assetsOnly = index === -1;
@@ -64,6 +64,7 @@ const renderFrameWithOptionToReject = async ({ reject, width, height, compId, at
                 countType,
                 lastFrame,
                 totalFrames: framesToRender.length,
+                imageSequencePattern,
             })),
         jpegQuality,
         width,

package/dist/render-frame.d.ts

@@ -8,7 +8,7 @@ import type { LogLevel } from './log-level';
 import type { CancelSignal } from './make-cancel-signal';
 import type { NextFrameToRender } from './next-frame-to-render';
 import type { FrameAndAssets, OnArtifact } from './render-frames';
-export declare const renderFrame: ({ attempt, binariesDirectory, cancelSignal, imageFormat, indent, logLevel, assets, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, scale, composition, onError, outputDir, stoppedSignal, timeoutInMilliseconds, lastFrame, onFrameBuffer, onFrameUpdate, framesRenderedObj, frame, page, }: {
+export declare const renderFrame: ({ attempt, binariesDirectory, cancelSignal, imageFormat, indent, logLevel, assets, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, scale, composition, onError, outputDir, stoppedSignal, timeoutInMilliseconds, lastFrame, onFrameBuffer, onFrameUpdate, framesRenderedObj, frame, page, imageSequencePattern, }: {
     attempt: number;
     indent: boolean;
     logLevel: LogLevel;
@@ -40,4 +40,5 @@ export declare const renderFrame: ({ attempt, binariesDirectory, cancelSignal, i
     nextFrameToRender: NextFrameToRender;
     frame: number;
     page: Page;
+    imageSequencePattern: string | null;
 }) => Promise<void>;

package/dist/render-frame.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFrame = void 0;
 const render_frame_with_option_to_reject_1 = require("./render-frame-with-option-to-reject");
-const renderFrame = ({ attempt, binariesDirectory, cancelSignal, imageFormat, indent, logLevel, assets, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, scale, composition, onError, outputDir, stoppedSignal, timeoutInMilliseconds, lastFrame, onFrameBuffer, onFrameUpdate, framesRenderedObj, frame, page, }) => {
+const renderFrame = ({ attempt, binariesDirectory, cancelSignal, imageFormat, indent, logLevel, assets, countType, downloadMap, frameDir, framesToRender, jpegQuality, onArtifact, onDownload, scale, composition, onError, outputDir, stoppedSignal, timeoutInMilliseconds, lastFrame, onFrameBuffer, onFrameUpdate, framesRenderedObj, frame, page, imageSequencePattern, }) => {
     return new Promise((resolve, reject) => {
         (0, render_frame_with_option_to_reject_1.renderFrameWithOptionToReject)({
             reject,
@@ -34,6 +34,7 @@ const renderFrame = ({ attempt, binariesDirectory, cancelSignal, imageFormat, in
             onFrameUpdate,
             frame,
             page,
+            imageSequencePattern,
         })
             .then(() => {
             resolve();

package/dist/render-frames.js

@@ -34,7 +34,7 @@ const validate_1 = require("./validate");
 const validate_scale_1 = require("./validate-scale");
 const wrap_with_error_handling_1 = require("./wrap-with-error-handling");
 const MAX_RETRIES_PER_FRAME = 1;
-const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serializedInputPropsWithCustomSchema, serializedResolvedPropsWithCustomSchema, jpegQuality, imageFormat, frameRange, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, resolvedConcurrency, everyNthFrame, proxyPort, cancelSignal, downloadMap, muted, makeBrowser, browserReplacer, sourceMapGetter, logLevel, indent, parallelEncodingEnabled, compositionStart, forSeamlessAacConcatenation, onArtifact, binariesDirectory, }) => {
+const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serializedInputPropsWithCustomSchema, serializedResolvedPropsWithCustomSchema, jpegQuality, imageFormat, frameRange, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, resolvedConcurrency, everyNthFrame, proxyPort, cancelSignal, downloadMap, muted, makeBrowser, browserReplacer, sourceMapGetter, logLevel, indent, parallelEncodingEnabled, compositionStart, forSeamlessAacConcatenation, onArtifact, binariesDirectory, imageSequencePattern, }) => {
     if (outputDir) {
         if (!node_fs_1.default.existsSync(outputDir)) {
             node_fs_1.default.mkdirSync(outputDir, {
@@ -130,6 +130,10 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
             allFramesAndExtraFrames,
             concurrencyOrFramesToRender,
         });
+    const pattern = imageSequencePattern || `element-[frame].[ext]`;
+    const imageSequenceName = pattern
+        .replace(/\[frame\]/g, `%0${filePadLength}d`)
+        .replace(/\[ext\]/g, imageFormat);
     await Promise.all(allFramesAndExtraFrames.map(() => {
         return (0, render_frame_and_retry_target_close_1.renderFrameAndRetryTargetClose)({
             retriesLeft: MAX_RETRIES_PER_FRAME,
@@ -163,6 +167,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
             onFrameBuffer,
             onFrameUpdate,
             nextFrameToRender,
+            imageSequencePattern: pattern,
         });
     }));
     const firstFrameIndex = countType === 'from-zero' ? 0 : framesToRender[0];
@@ -172,7 +177,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
             assets: assets.sort((a, b) => {
                 return a.frame - b.frame;
             }),
-            imageSequenceName: node_path_1.default.join(frameDir, `element-%0${filePadLength}d.${imageFormat}`),
+            imageSequenceName: node_path_1.default.join(frameDir, imageSequenceName),
             firstFrameIndex,
             downloadMap,
             trimLeftOffset,
@@ -183,7 +188,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
         frameCount: framesToRender.length,
     };
 };
-const internalRenderFramesRaw = ({ browserExecutable, cancelSignal, chromiumOptions, composition, concurrency, envVariables, everyNthFrame, frameRange, imageFormat, indent, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, onFrameUpdate, onStart, outputDir, port, puppeteerInstance, scale, server, timeoutInMilliseconds, logLevel, webpackBundleOrServeUrl, serializedInputPropsWithCustomSchema, serializedResolvedPropsWithCustomSchema, offthreadVideoCacheSizeInBytes, parallelEncodingEnabled, binariesDirectory, forSeamlessAacConcatenation, compositionStart, onBrowserDownload, onArtifact, chromeMode, offthreadVideoThreads, }) => {
+const internalRenderFramesRaw = ({ browserExecutable, cancelSignal, chromiumOptions, composition, concurrency, envVariables, everyNthFrame, frameRange, imageFormat, indent, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, onFrameUpdate, onStart, outputDir, port, puppeteerInstance, scale, server, timeoutInMilliseconds, logLevel, webpackBundleOrServeUrl, serializedInputPropsWithCustomSchema, serializedResolvedPropsWithCustomSchema, offthreadVideoCacheSizeInBytes, parallelEncodingEnabled, binariesDirectory, forSeamlessAacConcatenation, compositionStart, onBrowserDownload, onArtifact, chromeMode, offthreadVideoThreads, imageSequencePattern, }) => {
     (0, validate_1.validateDimension)(composition.height, 'height', 'in the `config` object passed to `renderFrames()`');
     (0, validate_1.validateDimension)(composition.width, 'width', 'in the `config` object passed to `renderFrames()`');
     (0, validate_1.validateFps)(composition.fps, 'in the `config` object of `renderFrames()`', false);
@@ -285,6 +290,7 @@ const internalRenderFramesRaw = ({ browserExecutable, cancelSignal, chromiumOpti
                     onArtifact,
                     chromeMode,
                     offthreadVideoThreads,
+                    imageSequencePattern,
                 });
             }),
         ])
@@ -333,7 +339,7 @@ exports.internalRenderFrames = (0, wrap_with_error_handling_1.wrapWithErrorHandl
  * @see [Documentation](https://www.remotion.dev/docs/renderer/render-frames)
  */
 const renderFrames = (options) => {
-    const { composition, inputProps, onFrameUpdate, onStart, outputDir, serveUrl, browserExecutable, cancelSignal, chromiumOptions, concurrency, dumpBrowserLogs, envVariables, everyNthFrame, frameRange, imageFormat, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, port, puppeteerInstance, scale, timeoutInMilliseconds, verbose, quality, logLevel: passedLogLevel, offthreadVideoCacheSizeInBytes, binariesDirectory, onBrowserDownload, onArtifact, chromeMode, offthreadVideoThreads, } = options;
+    const { composition, inputProps, onFrameUpdate, onStart, outputDir, serveUrl, browserExecutable, cancelSignal, chromiumOptions, concurrency, dumpBrowserLogs, envVariables, everyNthFrame, frameRange, imageFormat, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, port, puppeteerInstance, scale, timeoutInMilliseconds, verbose, quality, logLevel: passedLogLevel, offthreadVideoCacheSizeInBytes, binariesDirectory, onBrowserDownload, onArtifact, chromeMode, offthreadVideoThreads, imageSequencePattern, } = options;
     if (!composition) {
         throw new Error('No `composition` option has been specified for renderFrames()');
     }
@@ -390,6 +396,7 @@ const renderFrames = (options) => {
         onArtifact: onArtifact !== null && onArtifact !== void 0 ? onArtifact : null,
         chromeMode: chromeMode !== null && chromeMode !== void 0 ? chromeMode : 'headless-shell',
         offthreadVideoThreads: offthreadVideoThreads !== null && offthreadVideoThreads !== void 0 ? offthreadVideoThreads : null,
+        imageSequencePattern: imageSequencePattern !== null && imageSequencePattern !== void 0 ? imageSequencePattern : null,
     });
 };
 exports.renderFrames = renderFrames;

package/dist/render-media.js

@@ -366,6 +366,7 @@ const internalRenderMediaRaw = ({ proResProfile, x264Preset, crf, composition, s
                 onBrowserDownload,
                 onArtifact,
                 chromeMode,
+                imageSequencePattern: null,
             });
             return renderFramesProc;
         })