@remotion/renderer 4.0.0-spawn.10 → 4.0.0-spawn.15

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 = ReturnType<typeof openBrowser>;
+export declare const cycleBrowserTabs: (puppeteerInstance: Browser | Await<Browser>, concurrency: number) => {
     stopCycling: () => void;
 };
 export {};

package/dist/cycle-browser-tabs.js

@@ -11,8 +11,8 @@ const cycleBrowserTabs = (puppeteerInstance, concurrency) => {
     let i = 0;
     const set = () => {
         interval = setTimeout(() => {
-            puppeteerInstance
-                .pages()
+            Promise.resolve(puppeteerInstance)
+                .then((instance) => instance.pages())
                 .then((pages) => {
                 var _a, _b;
                 const currentPage = pages[i % pages.length];

package/dist/render-frames.d.ts

@@ -36,5 +36,8 @@ declare type RenderFramesOptions = {
     ffmpegExecutable?: FfmpegExecutable;
     port?: number | null;
 } & ConfigOrComposition & ServeUrlOrWebpackBundle;
-export declare const renderFrames: (options: RenderFramesOptions) => Promise<RenderFramesOutput>;
+declare type ReturnTypeWithCancel = Promise<RenderFramesOutput> & {
+    cancel: () => void;
+};
+export declare const renderFrames: (options: RenderFramesOptions) => ReturnTypeWithCancel;
 export {};

package/dist/render-frames.js

@@ -33,7 +33,12 @@ 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, }) => {
     if (!puppeteerInstance) {
         throw new Error('weird');
     }
@@ -93,23 +98,27 @@ 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;
+    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);
@@ -176,18 +185,29 @@ 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}`,
+    const prom = Object.assign(new Promise((res, rej) => {
+        progress
+            .then(() => {
+            const returnValue = {
+                assetsInfo: {
+                    assets,
+                    downloadDir,
+                    firstFrameIndex,
+                    imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
+                },
+                frameCount,
+            };
+            res(returnValue);
+        })
+            .catch((err) => rej(err));
+    }), {
+        cancel: () => {
+            stopped = true;
         },
-        frameCount,
-    };
-    return returnValue;
+    });
+    return prom;
 };
-const renderFrames = async (options) => {
+const renderFrames = (options) => {
     var _a, _b, _c, _d;
     const composition = getComposition(options);
     if (!composition) {
@@ -203,34 +223,38 @@ 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) => {
+    let cancel = () => undefined;
+    const prom = new Promise((resolve, reject) => {
         var _a, _b;
         let cleanup = null;
         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 }) => {
+        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]) => {
             cleanup = closeServer;
-            return innerRenderFrames({
+            const renderFramesProm = innerRenderFrames({
                 ...options,
-                puppeteerInstance: browserInstance,
+                puppeteerInstance,
                 onError,
                 pagesArray: openedPages,
                 serveUrl,
@@ -240,6 +264,10 @@ const renderFrames = async (options) => {
                 downloadDir,
                 proxyPort: offthreadPort,
             });
+            cancel = () => {
+                renderFramesProm.cancel();
+            };
+            return renderFramesProm;
         })
             .then((res) => resolve(res))
             .catch((err) => reject(err))
@@ -253,7 +281,11 @@ 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);
                 });
             }
@@ -261,5 +293,11 @@ const renderFrames = async (options) => {
             cleanup === null || cleanup === void 0 ? void 0 : cleanup();
         });
     });
+    const returnType = Object.assign(prom, {
+        cancel: () => {
+            cancel();
+        },
+    });
+    return returnType;
 };
 exports.renderFrames = renderFrames;

package/dist/render-media.d.ts

@@ -40,4 +40,8 @@ export declare type RenderMediaOptions = {
     port?: number | null;
     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>;
+declare type RenderMediaReturnType = Promise<void> & {
+    cancel: () => void;
+};
+export declare const renderMedia: (options: RenderMediaOptions) => RenderMediaReturnType;
+export {};

package/dist/render-media.js

@@ -23,7 +23,22 @@ const tmp_dir_1 = require("./tmp-dir");
 const validate_even_dimensions_with_codec_1 = require("./validate-even-dimensions-with-codec");
 const validate_output_filename_1 = require("./validate-output-filename");
 const validate_scale_1 = require("./validate-scale");
-const renderMedia = async ({ 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 }) => {
+const renderMedia = (options) => {
+    let resolve = () => undefined;
+    let reject = () => undefined;
+    const rejectIfCancel = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    const prom = innerRenderMedia({ ...options, rejectIfCancel }).then(() => {
+        resolve();
+    });
+    return Object.assign(prom, {
+        cancel: () => reject(new Error('Render got cancelled')),
+    });
+};
+exports.renderMedia = renderMedia;
+const innerRenderMedia = async ({ 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, rejectIfCancel, ...options }) => {
     var _a;
     remotion_1.Internals.validateQuality(quality);
     if (typeof crf !== 'undefined' && crf !== null) {
@@ -39,6 +54,16 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
     let renderedFrames = 0;
     let renderedDoneIn = null;
     let encodedDoneIn = null;
+    let cancelled = false;
+    let cancelRenderFrames = () => undefined;
+    rejectIfCancel
+        .then(() => undefined)
+        .catch((err) => {
+        cancelled = true;
+        preStitcher === null || preStitcher === void 0 ? void 0 : preStitcher.task.kill();
+        cancelRenderFrames();
+        throw err;
+    });
     const renderStart = Date.now();
     const tmpdir = (0, tmp_dir_1.tmpDir)('pre-encode');
     const parallelEncoding = (0, can_use_parallel_encoding_1.canUseParallelEncoding)(codec);
@@ -87,7 +112,7 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
         }
         const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange !== null && frameRange !== void 0 ? frameRange : null);
         const { waitForRightTimeOfFrameToBeInserted, setFrameToStitch, waitForFinish, } = (0, ensure_frames_in_order_1.ensureFramesInOrder)(realFrameRange);
-        const { assetsInfo } = await (0, render_frames_1.renderFrames)({
+        const renderFramesProc = (0, render_frames_1.renderFrames)({
             config: composition,
             onFrameUpdate: (frame) => {
                 renderedFrames = frame;
@@ -110,6 +135,9 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
                 ? async (buffer, frame) => {
                     var _a;
                     await waitForRightTimeOfFrameToBeInserted(frame);
+                    if (cancelled) {
+                        return;
+                    }
                     (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.write(buffer);
                     setFrameToStitch(frame + 1);
                 }
@@ -125,6 +153,10 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
             browserExecutable,
             port,
         });
+        cancelRenderFrames = () => {
+            renderFramesProc.cancel();
+        };
+        const { assetsInfo } = await renderFramesProc;
         if (stitcherFfmpeg) {
             await waitForFinish();
             (_a = stitcherFfmpeg === null || stitcherFfmpeg === void 0 ? void 0 : stitcherFfmpeg.stdin) === null || _a === void 0 ? void 0 : _a.end();
@@ -173,6 +205,8 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
          * When an error is thrown in renderFrames(...) (e.g., when delayRender() is used incorrectly), fs.unlinkSync(...) throws an error that the file is locked because ffmpeg is still running, and renderMedia returns it.
          * Therefore we first kill the FFMPEG process before deleting the file
          */
+        cancelled = true;
+        cancelRenderFrames();
         if (stitcherFfmpeg !== undefined && stitcherFfmpeg.exitCode === null) {
             const promise = new Promise((resolve) => {
                 setTimeout(() => {
@@ -194,4 +228,3 @@ const renderMedia = async ({ parallelism, proResProfile, crf, composition, image
         }
     }
 };
-exports.renderMedia = renderMedia;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/renderer",
-	"version": "4.0.0-spawn.10+911177607",
+	"version": "4.0.0-spawn.15+87508e2d3",
 	"description": "Renderer for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
 	"dependencies": {
 		"execa": "5.1.1",
 		"puppeteer-core": "13.5.1",
-		"remotion": "4.0.0-spawn.10+911177607",
+		"remotion": "4.0.0-spawn.15+87508e2d3",
 		"serve-handler": "6.1.3",
 		"source-map": "^0.8.0-beta.0"
 	},
@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "911177607ac127d9f4d1c014ad8ae32fd14947dd"
+	"gitHead": "87508e2d3155ca3f7804ede63ea9b82bd2b3749f"
 }