@remotion/renderer 3.0.12 → 3.0.16

package/dist/abort.d.ts

@@ -0,0 +1,7 @@
+declare type Callback = () => void;
+export declare type CancelSignal = (callback: Callback) => void;
+export declare const getCancelSignal: () => {
+    cancelSignal: CancelSignal;
+    cancel: () => void;
+};
+export {};

package/dist/abort.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCancelSignal = void 0;
+const getCancelSignal = () => {
+    const callbacks = [];
+    let cancelled = false;
+    return {
+        cancelSignal: (callback) => callbacks.push(callback),
+        cancel: () => {
+            if (cancelled) {
+                return;
+            }
+            callbacks.forEach((cb) => {
+                cb();
+            });
+            cancelled = true;
+        },
+    };
+};
+exports.getCancelSignal = getCancelSignal;

package/dist/cancel.d.ts

@@ -0,0 +1,7 @@
+declare type Callback = () => void;
+export declare type CancelSignal = (callback: Callback) => void;
+export declare const makeCancelSignal: () => {
+    cancelSignal: CancelSignal;
+    cancel: () => void;
+};
+export {};

package/dist/cancel.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeCancelSignal = void 0;
+const makeCancelSignal = () => {
+    const callbacks = [];
+    let cancelled = false;
+    return {
+        cancelSignal: (callback) => {
+            callbacks.push(callback);
+            if (cancelled) {
+                callback();
+            }
+        },
+        cancel: () => {
+            if (cancelled) {
+                return;
+            }
+            callbacks.forEach((cb) => {
+                cb();
+            });
+            cancelled = true;
+        },
+    };
+};
+exports.makeCancelSignal = makeCancelSignal;

package/dist/combine-videos.d.ts

@@ -1,9 +1,10 @@
 import { Codec } from 'remotion';
-export declare const combineVideos: ({ files, filelistDir, output, onProgress, numberOfFrames, codec, }: {
+export declare const combineVideos: ({ files, filelistDir, output, onProgress, numberOfFrames, codec, fps, }: {
     files: string[];
     filelistDir: string;
     output: string;
     onProgress: (p: number) => void;
     numberOfFrames: number;
     codec: Codec;
+    fps: number;
 }) => Promise<void>;

package/dist/combine-videos.js

@@ -11,13 +11,15 @@ const path_1 = require("path");
 const remotion_1 = require("remotion");
 const get_audio_codec_name_1 = require("./get-audio-codec-name");
 const parse_ffmpeg_progress_1 = require("./parse-ffmpeg-progress");
-const combineVideos = async ({ files, filelistDir, output, onProgress, numberOfFrames, codec, }) => {
+const combineVideos = async ({ files, filelistDir, output, onProgress, numberOfFrames, codec, fps, }) => {
     var _a;
     const fileList = files.map((p) => `file '${p}'`).join('\n');
     const fileListTxt = (0, path_1.join)(filelistDir, 'files.txt');
     (0, fs_1.writeFileSync)(fileListTxt, fileList);
     try {
         const task = (0, execa_1.default)('ffmpeg', [
+            remotion_1.Internals.isAudioCodec(codec) ? null : '-r',
+            remotion_1.Internals.isAudioCodec(codec) ? null : String(fps),
             '-f',
             'concat',
             '-safe',

package/dist/cycle-browser-tabs.d.ts

@@ -1,6 +1,7 @@
 import { openBrowser } from './open-browser';
 declare type Await<T> = T extends PromiseLike<infer U> ? U : T;
-export declare const cycleBrowserTabs: (puppeteerInstance: Await<ReturnType<typeof openBrowser>>, concurrency: number) => {
+declare type Browser = Await<ReturnType<typeof openBrowser>>;
+export declare const cycleBrowserTabs: (puppeteerInstance: Browser, concurrency: number) => {
     stopCycling: () => void;
 };
 export {};

package/dist/cycle-browser-tabs.js

@@ -9,15 +9,21 @@ const cycleBrowserTabs = (puppeteerInstance, concurrency) => {
     }
     let interval = null;
     let i = 0;
+    let stopped = false;
     const set = () => {
         interval = setTimeout(() => {
             puppeteerInstance
                 .pages()
                 .then((pages) => {
-                var _a, _b;
+                var _a;
+                if (pages.length === 0) {
+                    return;
+                }
                 const currentPage = pages[i % pages.length];
                 i++;
-                if (!((_b = (_a = currentPage === null || currentPage === void 0 ? void 0 : currentPage.isClosed) === null || _a === void 0 ? void 0 : _a.call(currentPage)) !== null && _b !== void 0 ? _b : true)) {
+                if (!((_a = currentPage === null || currentPage === void 0 ? void 0 : currentPage.isClosed) === null || _a === void 0 ? void 0 : _a.call(currentPage)) &&
+                    !stopped &&
+                    (currentPage === null || currentPage === void 0 ? void 0 : currentPage.url()) !== 'about:blank') {
                     return currentPage.bringToFront();
                 }
             })
@@ -33,6 +39,7 @@ const cycleBrowserTabs = (puppeteerInstance, concurrency) => {
             if (!interval) {
                 return;
             }
+            stopped = true;
             return clearInterval(interval);
         },
     };

package/dist/get-compositions.js

@@ -28,6 +28,7 @@ const innerGetCompositions = async (serveUrl, page, config, proxyPort) => {
         initialFrame: 0,
         timeoutInMilliseconds: config === null || config === void 0 ? void 0 : config.timeoutInMilliseconds,
         proxyPort,
+        retriesRemaining: 2,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         page,

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { combineVideos } from './combine-videos';
 export { ErrorWithStackFrame } from './error-handling/handle-javascript-exception';
 export { FfmpegVersion } from './ffmpeg-flags';
 export { getCompositions } from './get-compositions';
+export { CancelSignal, makeCancelSignal } from './make-cancel-signal';
 export { openBrowser } from './open-browser';
 export type { ChromiumOptions } from './open-browser';
 export { renderFrames } from './render-frames';
@@ -47,7 +48,7 @@ export declare const RenderInternals: {
     }) => void;
     normalizeServeUrl: (unnormalized: string) => string;
     spawnFfmpeg: (options: import("./stitch-frames-to-video").StitcherOptions) => Promise<{
-        task: Promise<unknown>;
+        task: Promise<void>;
         getLogs: () => string;
     }>;
     getFileExtensionFromCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv", type: "chunk" | "final") => "mp3" | "aac" | "wav" | "mp4" | "mkv" | "mov" | "webm";

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderInternals = exports.stitchFramesToVideo = exports.renderStill = exports.renderMedia = exports.renderFrames = exports.openBrowser = exports.getCompositions = exports.ErrorWithStackFrame = exports.combineVideos = void 0;
+exports.RenderInternals = exports.stitchFramesToVideo = exports.renderStill = exports.renderMedia = exports.renderFrames = exports.openBrowser = exports.makeCancelSignal = exports.getCompositions = exports.ErrorWithStackFrame = exports.combineVideos = void 0;
 const download_file_1 = require("./assets/download-file");
 const delete_directory_1 = require("./delete-directory");
 const ensure_output_directory_1 = require("./ensure-output-directory");
@@ -30,6 +30,8 @@ var handle_javascript_exception_1 = require("./error-handling/handle-javascript-
 Object.defineProperty(exports, "ErrorWithStackFrame", { enumerable: true, get: function () { return handle_javascript_exception_1.ErrorWithStackFrame; } });
 var get_compositions_1 = require("./get-compositions");
 Object.defineProperty(exports, "getCompositions", { enumerable: true, get: function () { return get_compositions_1.getCompositions; } });
+var make_cancel_signal_1 = require("./make-cancel-signal");
+Object.defineProperty(exports, "makeCancelSignal", { enumerable: true, get: function () { return make_cancel_signal_1.makeCancelSignal; } });
 var open_browser_2 = require("./open-browser");
 Object.defineProperty(exports, "openBrowser", { enumerable: true, get: function () { return open_browser_2.openBrowser; } });
 var render_frames_1 = require("./render-frames");

package/dist/make-cancel-signal.d.ts

@@ -0,0 +1,7 @@
+declare type Callback = () => void;
+export declare type CancelSignal = (callback: Callback) => void;
+export declare const makeCancelSignal: () => {
+    cancelSignal: CancelSignal;
+    cancel: () => void;
+};
+export {};

package/dist/make-cancel-signal.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeCancelSignal = void 0;
+const makeCancelSignal = () => {
+    const callbacks = [];
+    let cancelled = false;
+    return {
+        cancelSignal: (callback) => {
+            callbacks.push(callback);
+            if (cancelled) {
+                callback();
+            }
+        },
+        cancel: () => {
+            if (cancelled) {
+                return;
+            }
+            callbacks.forEach((cb) => {
+                cb();
+            });
+            cancelled = true;
+        },
+    };
+};
+exports.makeCancelSignal = makeCancelSignal;

package/dist/merge-audio-track.js

@@ -30,8 +30,8 @@ const mergeAudioTrackUnlimited = async ({ ffmpegExecutable, outName, files, numb
         });
         return;
     }
-    // FFMPEG has a limit of 64 tracks that can be merged at once
-    if (files.length > 64) {
+    // In FFMPEG, the total number of left and right tracks that can be merged at one time is limited to 64
+    if (files.length >= 32) {
         const chunked = (0, chunk_1.chunk)(files, 10);
         const tempPath = (0, tmp_dir_1.tmpDir)('remotion-large-audio-mixing');
         const chunkNames = await Promise.all(chunked.map(async (chunkFiles, i) => {

package/dist/offthread/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/open-browser.js

@@ -98,6 +98,7 @@ const openBrowser = async (browser, options) => {
             '--hide-scrollbars',
             '--no-default-browser-check',
             '--no-pings',
+            '--font-render-hinting=none',
             '--no-zygote',
             (options === null || options === void 0 ? void 0 : options.forceDeviceScaleFactor)
                 ? `--force-device-scale-factor=${options.forceDeviceScaleFactor}`
@@ -115,7 +116,7 @@ const openBrowser = async (browser, options) => {
         ].filter(Boolean),
     });
     const pages = await browserInstance.pages();
-    pages.forEach((p) => p.close());
+    await pages[0].close();
     browserInstances.push(browserInstance);
     return browserInstance;
 };

package/dist/prespawn-ffmpeg.d.ts

@@ -1,5 +1,6 @@
 import execa from 'execa';
 import { Codec, FfmpegExecutable, ImageFormat, PixelFormat, ProResProfile } from 'remotion';
+import { CancelSignal } from './make-cancel-signal';
 declare type PreSticherOptions = {
     fps: number;
     width: number;
@@ -13,6 +14,7 @@ declare type PreSticherOptions = {
     verbose: boolean;
     ffmpegExecutable: FfmpegExecutable | undefined;
     imageFormat: ImageFormat;
+    signal: CancelSignal;
 };
 export declare const prespawnFfmpeg: (options: PreSticherOptions) => Promise<{
     task: execa.ExecaChildProcess<string>;

package/dist/prespawn-ffmpeg.js

@@ -73,6 +73,9 @@ const prespawnFfmpeg = async (options) => {
     }
     const ffmpegString = ffmpegArgs.flat(2).filter(Boolean);
     const task = (0, execa_1.default)((_f = options.ffmpegExecutable) !== null && _f !== void 0 ? _f : 'ffmpeg', ffmpegString);
+    options.signal(() => {
+        task.kill();
+    });
     let ffmpegOutput = '';
     (_g = task.stderr) === null || _g === void 0 ? void 0 : _g.on('data', (data) => {
         const str = data.toString();

package/dist/render-frames.d.ts

@@ -4,6 +4,7 @@ import { BrowserExecutable, FfmpegExecutable, FrameRange, ImageFormat, SmallTCom
 import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { BrowserLog } from './browser-log';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import { CancelSignal } from './make-cancel-signal';
 import { ChromiumOptions } from './open-browser';
 import { OnStartData, RenderFramesOutput } from './types';
 declare type ConfigOrComposition = {
@@ -35,6 +36,7 @@ declare type RenderFramesOptions = {
     scale?: number;
     ffmpegExecutable?: FfmpegExecutable;
     port?: number | null;
+    cancelSignal?: CancelSignal;
 } & ConfigOrComposition & ServeUrlOrWebpackBundle;
 export declare const renderFrames: (options: RenderFramesOptions) => Promise<RenderFramesOutput>;
 export {};

package/dist/render-frames.js

@@ -33,9 +33,14 @@ const getComposition = (others) => {
     }
     return undefined;
 };
-const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, puppeteerInstance, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualParallelism, downloadDir, proxyPort, }) => {
+const getPool = async (pages) => {
+    const puppeteerPages = await Promise.all(pages);
+    const pool = new pool_1.Pool(puppeteerPages);
+    return pool;
+};
+const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, puppeteerInstance, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualParallelism, downloadDir, proxyPort, cancelSignal, }) => {
     if (!puppeteerInstance) {
-        throw new Error('weird');
+        throw new Error('no puppeteer instance passed to innerRenderFrames - internal error');
     }
     if (outputDir) {
         if (!fs_1.default.existsSync(outputDir)) {
@@ -77,6 +82,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             initialFrame,
             timeoutInMilliseconds,
             proxyPort,
+            retriesRemaining: 2,
         });
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             pageFunction: (id) => {
@@ -92,23 +98,30 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         page.off('console', logCallback);
         return page;
     });
-    const puppeteerPages = await Promise.all(pages);
-    const pool = new pool_1.Pool(puppeteerPages);
     const [firstFrameIndex, lastFrameIndex] = realFrameRange;
     // Substract one because 100 frames will be 00-99
     // --> 2 digits
     const filePadLength = String(lastFrameIndex).length;
     let framesRendered = 0;
+    const poolPromise = getPool(pages);
     onStart({
         frameCount,
     });
     const assets = new Array(frameCount).fill(undefined);
-    await Promise.all(new Array(frameCount)
+    let stopped = false;
+    cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+        stopped = true;
+    });
+    const progress = Promise.all(new Array(frameCount)
         .fill(Boolean)
         .map((_x, i) => i)
         .map(async (index) => {
         const frame = realFrameRange[0] + index;
+        const pool = await poolPromise;
         const freePage = await pool.acquire();
+        if (stopped) {
+            throw new Error('Render was stopped');
+        }
         const paddedIndex = String(frame).padStart(filePadLength, '0');
         const errorCallbackOnFrame = (err) => {
             onError(err);
@@ -175,18 +188,28 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         freePage.off('error', errorCallbackOnFrame);
         return compressedAssets;
     }));
-    const returnValue = {
-        assetsInfo: {
-            assets,
-            downloadDir,
-            firstFrameIndex,
-            imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
-        },
-        frameCount,
-    };
-    return returnValue;
+    const happyPath = progress.then(() => {
+        const returnValue = {
+            assetsInfo: {
+                assets,
+                downloadDir,
+                firstFrameIndex,
+                imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
+            },
+            frameCount,
+        };
+        return returnValue;
+    });
+    return Promise.race([
+        happyPath,
+        new Promise((_resolve, reject) => {
+            cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
+                reject(new Error('renderFrames() got cancelled'));
+            });
+        }),
+    ]);
 };
-const renderFrames = async (options) => {
+const renderFrames = (options) => {
     var _a, _b, _c, _d;
     const composition = getComposition(options);
     if (!composition) {
@@ -202,34 +225,43 @@ const renderFrames = async (options) => {
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
     remotion_1.Internals.validateQuality(options.quality);
     (0, validate_scale_1.validateScale)(options.scale);
-    const browserInstance = (_a = options.puppeteerInstance) !== null && _a !== void 0 ? _a : (await (0, open_browser_1.openBrowser)(remotion_1.Internals.DEFAULT_BROWSER, {
+    const browserInstance = (_a = options.puppeteerInstance) !== null && _a !== void 0 ? _a : (0, open_browser_1.openBrowser)(remotion_1.Internals.DEFAULT_BROWSER, {
         shouldDumpIo: options.dumpBrowserLogs,
         browserExecutable: options.browserExecutable,
         chromiumOptions: options.chromiumOptions,
         forceDeviceScaleFactor: (_b = options.scale) !== null && _b !== void 0 ? _b : 1,
-    }));
+    });
     const downloadDir = (0, make_assets_download_dir_1.makeAssetsDownloadTmpDir)();
     const onDownload = (_c = options.onDownload) !== null && _c !== void 0 ? _c : (() => () => undefined);
     const actualParallelism = (0, get_concurrency_1.getActualConcurrency)((_d = options.parallelism) !== null && _d !== void 0 ? _d : null);
-    const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(browserInstance, actualParallelism);
     const openedPages = [];
     return new Promise((resolve, reject) => {
         var _a, _b;
-        let cleanup = null;
+        const cleanup = [];
         const onError = (err) => reject(err);
-        (0, prepare_server_1.prepareServer)({
-            webpackConfigOrServeUrl: selectedServeUrl,
-            downloadDir,
-            onDownload,
-            onError,
-            ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
-            port: (_b = options.port) !== null && _b !== void 0 ? _b : null,
-        })
-            .then(({ serveUrl, closeServer, offthreadPort }) => {
-            cleanup = closeServer;
-            return innerRenderFrames({
+        Promise.all([
+            (0, prepare_server_1.prepareServer)({
+                webpackConfigOrServeUrl: selectedServeUrl,
+                downloadDir,
+                onDownload,
+                onError,
+                ffmpegExecutable: (_a = options.ffmpegExecutable) !== null && _a !== void 0 ? _a : null,
+                port: (_b = options.port) !== null && _b !== void 0 ? _b : null,
+            }),
+            browserInstance,
+        ])
+            .then(([{ serveUrl, closeServer, offthreadPort }, puppeteerInstance]) => {
+            var _a;
+            const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(puppeteerInstance, actualParallelism);
+            cleanup.push(stopCycling);
+            (_a = options.cancelSignal) === null || _a === void 0 ? void 0 : _a.call(options, () => {
+                stopCycling();
+                closeServer();
+            });
+            cleanup.push(closeServer);
+            const renderFramesProm = innerRenderFrames({
                 ...options,
-                puppeteerInstance: browserInstance,
+                puppeteerInstance,
                 onError,
                 pagesArray: openedPages,
                 serveUrl,
@@ -239,6 +271,7 @@ const renderFrames = async (options) => {
                 downloadDir,
                 proxyPort: offthreadPort,
             });
+            return renderFramesProm;
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
@@ -252,12 +285,17 @@ const renderFrames = async (options) => {
                 });
             }
             else {
-                browserInstance.close().catch((err) => {
+                Promise.resolve(browserInstance)
+                    .then((puppeteerInstance) => {
+                    return puppeteerInstance.close();
+                })
+                    .catch((err) => {
                     console.log('Unable to close browser', err);
                 });
             }
-            stopCycling();
-            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+            cleanup.forEach((c) => {
+                c();
+            });
         });
     });
 };

package/dist/render-media.d.ts

@@ -3,6 +3,7 @@ import { BrowserExecutable, Codec, FfmpegExecutable, FrameRange, PixelFormat, Pr
 import { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import { BrowserLog } from './browser-log';
 import { ServeUrlOrWebpackBundle } from './legacy-webpack-config';
+import { CancelSignal } from './make-cancel-signal';
 import { ChromiumOptions } from './open-browser';
 import { OnStartData } from './types';
 export declare type StitchingState = 'encoding' | 'muxing';
@@ -38,6 +39,7 @@ export declare type RenderMediaOptions = {
     chromiumOptions?: ChromiumOptions;
     scale?: number;
     port?: number | null;
+    cancelSignal?: CancelSignal;
     browserExecutable?: BrowserExecutable;
 } & ServeUrlOrWebpackBundle;
-export declare const renderMedia: ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, ...options }: RenderMediaOptions) => Promise<void>;
+export declare const renderMedia: ({ parallelism, proResProfile, crf, composition, imageFormat, ffmpegExecutable, inputProps, pixelFormat, codec, envVariables, quality, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, dumpBrowserLogs, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, ...options }: RenderMediaOptions) => Promise<void>;