@remotion/renderer 4.0.10 → 4.0.11

package/dist/browser/BrowserRunner.d.ts

@@ -31,6 +31,5 @@ export declare class BrowserRunner {
     kill(): void;
     setupConnection(options: {
         timeout: number;
-        preferredRevision: string;
     }): Promise<Connection>;
 }

package/dist/browser/BrowserRunner.js

@@ -200,8 +200,8 @@ class BrowserRunner {
     }
     async setupConnection(options) {
         (0, assert_1.assert)(this.proc, 'BrowserRunner not started.');
-        const { timeout, preferredRevision } = options;
-        const browserWSEndpoint = await waitForWSEndpoint(this.proc, timeout, preferredRevision);
+        const { timeout } = options;
+        const browserWSEndpoint = await waitForWSEndpoint(this.proc, timeout);
         const transport = await NodeWebSocketTransport_1.NodeWebSocketTransport.create(browserWSEndpoint);
         this.connection = new Connection_1.Connection(transport);
         return this.connection;
@@ -209,7 +209,7 @@ class BrowserRunner {
 }
 exports.BrowserRunner = BrowserRunner;
 _BrowserRunner_executablePath = new WeakMap(), _BrowserRunner_processArguments = new WeakMap(), _BrowserRunner_userDataDir = new WeakMap(), _BrowserRunner_closed = new WeakMap(), _BrowserRunner_listeners = new WeakMap(), _BrowserRunner_processClosing = new WeakMap();
-function waitForWSEndpoint(browserProcess, timeout, preferredRevision) {
+function waitForWSEndpoint(browserProcess, timeout) {
     (0, assert_1.assert)(browserProcess.stderr, '`browserProcess` does not have stderr.');
     const rl = readline.createInterface(browserProcess.stderr);
     let stderr = '';
@@ -240,7 +240,7 @@ function waitForWSEndpoint(browserProcess, timeout, preferredRevision) {
         }
         function onTimeout() {
             cleanup();
-            reject(new Errors_1.TimeoutError(`Timed out after ${timeout} ms while trying to connect to the browser! Only Chrome at revision r${preferredRevision} is guaranteed to work.`));
+            reject(new Errors_1.TimeoutError(`Timed out after ${timeout} ms while trying to connect to the browser!`));
         }
         function onLine(line) {
             stderr += line + '\n';

package/dist/browser/DOMWorld.d.ts

@@ -29,11 +29,12 @@ export declare class DOMWorld {
     executionContext(): Promise<ExecutionContext>;
     evaluateHandle<HandlerType extends JSHandle = JSHandle>(pageFunction: EvaluateHandleFn, ...args: SerializableOrJSHandle[]): Promise<HandlerType>;
     evaluate<T extends EvaluateFn>(pageFunction: T, ...args: SerializableOrJSHandle[]): Promise<UnwrapPromiseLike<EvaluateFnReturnType<T>>>;
-    waitForFunction({ browser, timeout, pageFunction, title, }: {
+    waitForFunction({ browser, timeout, pageFunction, title, shouldClosePage, }: {
         browser: HeadlessBrowser;
-        timeout: number;
+        timeout: number | null;
         pageFunction: Function | string;
         title: string;
+        shouldClosePage: boolean;
     }): Promise<JSHandle>;
     title(): Promise<string>;
 }
@@ -41,9 +42,10 @@ interface WaitTaskOptions {
     domWorld: DOMWorld;
     predicateBody: Function | string;
     title: string;
-    timeout: number;
+    timeout: number | null;
     browser: HeadlessBrowser;
     args: SerializableOrJSHandle[];
+    shouldClosePage: boolean;
 }
 declare class WaitTask {
     #private;

package/dist/browser/DOMWorld.js

@@ -25,7 +25,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _DOMWorld_frame, _DOMWorld_contextPromise, _DOMWorld_contextResolveCallback, _DOMWorld_detached, _DOMWorld_waitTasks, _WaitTask_instances, _WaitTask_domWorld, _WaitTask_timeout, _WaitTask_predicateBody, _WaitTask_args, _WaitTask_runCount, _WaitTask_resolve, _WaitTask_reject, _WaitTask_timeoutTimer, _WaitTask_terminated, _WaitTask_browser, _WaitTask_cleanup;
+var _DOMWorld_frame, _DOMWorld_contextPromise, _DOMWorld_contextResolveCallback, _DOMWorld_detached, _DOMWorld_waitTasks, _WaitTask_instances, _WaitTask_domWorld, _WaitTask_timeout, _WaitTask_predicateBody, _WaitTask_args, _WaitTask_runCount, _WaitTask_resolve, _WaitTask_reject, _WaitTask_timeoutTimer, _WaitTask_terminated, _WaitTask_browser, _WaitTask_shouldClosePage, _WaitTask_cleanup;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DOMWorld = void 0;
 const assert_1 = require("./assert");
@@ -91,7 +91,7 @@ class DOMWorld {
         const context = await this.executionContext();
         return context.evaluate(pageFunction, ...args);
     }
-    waitForFunction({ browser, timeout, pageFunction, title, }) {
+    waitForFunction({ browser, timeout, pageFunction, title, shouldClosePage, }) {
         return new WaitTask({
             domWorld: this,
             predicateBody: pageFunction,
@@ -99,6 +99,7 @@ class DOMWorld {
             timeout,
             args: [],
             browser,
+            shouldClosePage,
         }).promise;
     }
     title() {
@@ -123,6 +124,7 @@ class WaitTask {
         _WaitTask_timeoutTimer.set(this, void 0);
         _WaitTask_terminated.set(this, false);
         _WaitTask_browser.set(this, void 0);
+        _WaitTask_shouldClosePage.set(this, void 0);
         this.onBrowserClose = () => {
             return this.terminate(new Error('Browser was closed'));
         };
@@ -140,6 +142,7 @@ class WaitTask {
         __classPrivateFieldSet(this, _WaitTask_predicateBody, getPredicateBody(options.predicateBody), "f");
         __classPrivateFieldSet(this, _WaitTask_args, options.args, "f");
         __classPrivateFieldSet(this, _WaitTask_runCount, 0, "f");
+        __classPrivateFieldSet(this, _WaitTask_shouldClosePage, options.shouldClosePage, "f");
         __classPrivateFieldGet(this, _WaitTask_domWorld, "f")._waitTasks.add(this);
         this.promise = new Promise((resolve, reject) => {
             __classPrivateFieldSet(this, _WaitTask_resolve, resolve, "f");
@@ -150,7 +153,10 @@ class WaitTask {
         if (options.timeout) {
             const timeoutError = new Errors_1.TimeoutError(`waiting for ${options.title} failed: timeout ${options.timeout}ms exceeded`);
             __classPrivateFieldSet(this, _WaitTask_timeoutTimer, setTimeout(() => {
-                return this.terminate(timeoutError);
+                if (__classPrivateFieldGet(this, _WaitTask_shouldClosePage, "f")) {
+                    return this.terminate(timeoutError);
+                }
+                return __classPrivateFieldGet(this, _WaitTask_reject, "f").call(this, timeoutError);
             }, options.timeout), "f");
         }
         __classPrivateFieldSet(this, _WaitTask_browser, options.browser, "f");
@@ -238,7 +244,7 @@ class WaitTask {
         __classPrivateFieldGet(this, _WaitTask_instances, "m", _WaitTask_cleanup).call(this);
     }
 }
-_WaitTask_domWorld = new WeakMap(), _WaitTask_timeout = new WeakMap(), _WaitTask_predicateBody = new WeakMap(), _WaitTask_args = new WeakMap(), _WaitTask_runCount = new WeakMap(), _WaitTask_resolve = new WeakMap(), _WaitTask_reject = new WeakMap(), _WaitTask_timeoutTimer = new WeakMap(), _WaitTask_terminated = new WeakMap(), _WaitTask_browser = new WeakMap(), _WaitTask_instances = new WeakSet(), _WaitTask_cleanup = function _WaitTask_cleanup() {
+_WaitTask_domWorld = new WeakMap(), _WaitTask_timeout = new WeakMap(), _WaitTask_predicateBody = new WeakMap(), _WaitTask_args = new WeakMap(), _WaitTask_runCount = new WeakMap(), _WaitTask_resolve = new WeakMap(), _WaitTask_reject = new WeakMap(), _WaitTask_timeoutTimer = new WeakMap(), _WaitTask_terminated = new WeakMap(), _WaitTask_browser = new WeakMap(), _WaitTask_shouldClosePage = new WeakMap(), _WaitTask_instances = new WeakSet(), _WaitTask_cleanup = function _WaitTask_cleanup() {
     if (__classPrivateFieldGet(this, _WaitTask_timeoutTimer, "f") !== undefined) {
         clearTimeout(__classPrivateFieldGet(this, _WaitTask_timeoutTimer, "f"));
     }

package/dist/browser/Launcher.js

@@ -90,7 +90,6 @@ class ChromeLauncher {
         try {
             const connection = await runner.setupConnection({
                 timeout,
-                preferredRevision: this._preferredRevision,
             });
             browser = await Browser_1.HeadlessBrowser._create({
                 connection,
@@ -126,7 +125,7 @@ function resolveExecutablePath(launcher) {
     const { product, _preferredRevision } = launcher;
     const revisionInfo = (0, BrowserFetcher_1.getRevisionInfo)(_preferredRevision, 'chrome');
     const firefoxHelp = `Run \`PUPPETEER_PRODUCT=firefox npm install\` to download a supported Firefox browser binary.`;
-    const chromeHelp = `Run \`npm install\` to download the correct Chromium revision (${launcher._preferredRevision}).`;
+    const chromeHelp = `Run \`npm install\` to download the correct Chromium revision.`;
     const missingText = revisionInfo.local
         ? undefined
         : `Could not find expected browser (${product}) locally. ${product === 'chrome' ? chromeHelp : firefoxHelp}`;

package/dist/compositor/compositor.js

@@ -20,8 +20,8 @@ const getIdealMaximumFrameCacheItems = () => {
     // Assuming only half the available memory should be used
     const max = Math.floor(freeMemory / (1024 * 1024 * 6));
     // Never store more than 2000 frames
-    // But 500 is needed even if it's going to swap
-    return Math.max(500, Math.min(max, 2000));
+    // But 60 is needed even if it's going to swap
+    return Math.max(60, Math.min(max, 2000));
 };
 exports.getIdealMaximumFrameCacheItems = getIdealMaximumFrameCacheItems;
 const startLongRunningCompositor = (maximumFrameCacheItems, logLevel, indent) => {

package/dist/compositor/payloads.d.ts

@@ -45,7 +45,8 @@ export type CompositorCommand = {
         output_format: CompositorImageFormat;
     };
     ExtractFrame: {
-        input: string;
+        src: string;
+        original_src: string;
         time: number;
         transparent: boolean;
     };

package/dist/index.d.ts

@@ -44,7 +44,7 @@ export declare const RenderInternals: {
         downloadMap: import("./assets/download-map").DownloadMap;
         remotionRoot: string;
         concurrency: number;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         indent: boolean;
     }) => Promise<{
         port: number;
@@ -123,7 +123,7 @@ export declare const RenderInternals: {
     DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
     isAudioCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif" | undefined) => boolean;
     logLevels: readonly ["verbose", "info", "warn", "error"];
-    isEqualOrBelowLogLevel: (currentLevel: "verbose" | "info" | "warn" | "error", level: "verbose" | "info" | "warn" | "error") => boolean;
+    isEqualOrBelowLogLevel: (currentLevel: "error" | "verbose" | "info" | "warn", level: "error" | "verbose" | "info" | "warn") => boolean;
     isValidLogLevel: (level: string) => boolean;
     perf: typeof perf;
     convertToPositiveFrameIndex: ({ frame, durationInFrames, }: {
@@ -352,30 +352,30 @@ export declare const RenderInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
         errorAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
     };
-    getLogLevel: () => "verbose" | "info" | "warn" | "error";
-    setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+    getLogLevel: () => "error" | "verbose" | "info" | "warn";
+    setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;
     INDENT_TOKEN: string;
     isColorSupported: () => boolean;
     HeadlessBrowser: typeof HeadlessBrowser;
@@ -384,7 +384,7 @@ export declare const RenderInternals: {
         port: number | null;
         remotionRoot: string;
         concurrency: number;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         indent: boolean;
     }) => Promise<import("./prepare-server").RemotionServer>;
     makeOrReuseServer: (server: import("./prepare-server").RemotionServer | undefined, config: {
@@ -392,7 +392,7 @@ export declare const RenderInternals: {
         port: number | null;
         remotionRoot: string;
         concurrency: number;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         indent: boolean;
     }, { onDownload, onError, }: {
         onError: (err: Error) => void;
@@ -421,7 +421,7 @@ export declare const RenderInternals: {
         cancelSignal: import("./make-cancel-signal").CancelSignal | null;
         indent: boolean;
         server: import("./prepare-server").RemotionServer | undefined;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         serveUrl: string;
         port: number | null;
     }) => Promise<{
@@ -434,7 +434,7 @@ export declare const RenderInternals: {
         viewport: import("./browser/PuppeteerViewport").Viewport | null;
         indent: boolean;
         browser: import("./browser").Browser;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }) => Promise<HeadlessBrowser>;
     internalSelectComposition: (options: {
         serializedInputPropsWithCustomSchema: string;
@@ -447,7 +447,7 @@ export declare const RenderInternals: {
         port: number | null;
         indent: boolean;
         server: import("./prepare-server").RemotionServer | undefined;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         serveUrl: string;
         id: string;
     }) => Promise<{
@@ -465,7 +465,7 @@ export declare const RenderInternals: {
         port: number | null;
         server: import("./prepare-server").RemotionServer | undefined;
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         serveUrlOrWebpackUrl: string;
     }) => Promise<import("remotion").VideoConfig[]>;
     internalRenderFrames: ({ 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, }: import("./render-frames").InternalRenderFramesOptions) => Promise<import("./types").RenderFramesOutput>;

package/dist/logger.d.ts

@@ -19,6 +19,6 @@ export declare const Log: {
     error: (message?: any, ...optionalParams: any[]) => void;
     errorAdvanced: (options: VerboseLogOptions, message?: any, ...optionalParams: any[]) => void;
 };
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;
 export {};

package/dist/offthread-video-server.js

@@ -29,6 +29,7 @@ const extractUrlAndSourceFromUrl = (url) => {
     };
 };
 exports.extractUrlAndSourceFromUrl = extractUrlAndSourceFromUrl;
+const REQUEST_CLOSED_TOKEN = 'Request closed';
 const startOffthreadVideoServer = ({ downloadMap, concurrency, logLevel, indent, }) => {
     const compositor = (0, compositor_1.startCompositor)('StartLongRunningProcess', {
         concurrency,
@@ -40,62 +41,90 @@ const startOffthreadVideoServer = ({ downloadMap, concurrency, logLevel, indent,
             compositor.finishCommands();
             return compositor.waitForDone();
         },
-        listener: (req, res) => {
+        listener: (req, response) => {
             if (!req.url) {
                 throw new Error('Request came in without URL');
             }
             if (!req.url.startsWith('/proxy')) {
-                res.writeHead(404);
-                res.end();
+                response.writeHead(404);
+                response.end();
                 return;
             }
             const { src, time, transparent } = (0, exports.extractUrlAndSourceFromUrl)(req.url);
-            res.setHeader('access-control-allow-origin', '*');
+            response.setHeader('access-control-allow-origin', '*');
             if (transparent) {
-                res.setHeader('content-type', `image/png`);
+                response.setHeader('content-type', `image/png`);
             }
             else {
-                res.setHeader('content-type', `image/bmp`);
+                response.setHeader('content-type', `image/bmp`);
             }
             // Handling this case on Lambda:
             // https://support.google.com/chrome/a/answer/7679408?hl=en
             // Chrome sends Private Network Access preflights for subresources
             if (req.method === 'OPTIONS') {
-                res.statusCode = 200;
+                response.statusCode = 200;
                 if (req.headers['access-control-request-private-network']) {
-                    res.setHeader('Access-Control-Allow-Private-Network', 'true');
+                    response.setHeader('Access-Control-Allow-Private-Network', 'true');
                 }
-                res.end();
+                response.end();
                 return;
             }
+            let closed = false;
+            req.on('close', () => {
+                closed = true;
+            });
             let extractStart = Date.now();
             (0, download_and_map_assets_to_file_1.downloadAsset)({ src, downloadMap })
                 .then((to) => {
-                extractStart = Date.now();
-                return compositor.executeCommand('ExtractFrame', {
-                    input: to,
-                    time,
-                    transparent,
+                return new Promise((resolve, reject) => {
+                    if (closed) {
+                        reject(Error(REQUEST_CLOSED_TOKEN));
+                        return;
+                    }
+                    extractStart = Date.now();
+                    resolve(compositor.executeCommand('ExtractFrame', {
+                        src: to,
+                        original_src: src,
+                        time,
+                        transparent,
+                    }));
                 });
             })
                 .then((readable) => {
-                const extractEnd = Date.now();
-                const timeToExtract = extractEnd - extractStart;
-                if (timeToExtract > 1000) {
-                    logger_1.Log.verbose(`Took ${timeToExtract}ms to extract frame from ${src} at ${time}`);
-                }
-                if (!readable) {
-                    throw new Error('no readable from ffmpeg');
-                }
-                res.writeHead(200);
-                res.write(readable);
-                res.end();
+                return new Promise((resolve, reject) => {
+                    if (closed) {
+                        reject(Error(REQUEST_CLOSED_TOKEN));
+                        return;
+                    }
+                    if (!readable) {
+                        reject(new Error('no readable from compositor'));
+                        return;
+                    }
+                    const extractEnd = Date.now();
+                    const timeToExtract = extractEnd - extractStart;
+                    if (timeToExtract > 1000) {
+                        logger_1.Log.verbose(`Took ${timeToExtract}ms to extract frame from ${src} at ${time}`);
+                    }
+                    response.writeHead(200);
+                    response.write(readable, (err) => {
+                        response.end();
+                        if (err) {
+                            reject(err);
+                        }
+                        else {
+                            resolve();
+                        }
+                    });
+                });
             })
                 .catch((err) => {
-                res.writeHead(500);
-                res.end();
-                downloadMap.emitter.dispatchError(err);
-                console.log('Error occurred', err);
+                response.writeHead(500);
+                response.end();
+                // Any errors occurred due to the render being aborted don't need to be logged.
+                if (err.message !== REQUEST_CLOSED_TOKEN) {
+                    downloadMap.emitter.dispatchError(err);
+                    console.log('Error occurred', err);
+                }
             });
         },
         compositor,

package/dist/render-media.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { VideoConfig } from 'remotion';
-import type { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
+import { type RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import type { AudioCodec } from './audio-codec';
 import type { BrowserExecutable } from './browser-executable';
 import type { BrowserLog } from './browser-log';

package/dist/render-media.js

@@ -72,6 +72,7 @@ const internalRenderMedia = ({ proResProfile, crf, composition, serializedInputP
     let stitcherFfmpeg;
     let preStitcher = null;
     let encodedFrames = 0;
+    let muxedFrames = 0;
     let renderedFrames = 0;
     let renderedDoneIn = null;
     let encodedDoneIn = null;
@@ -135,13 +136,12 @@ const internalRenderMedia = ({ proResProfile, crf, composition, serializedInputP
     const callUpdate = () => {
         onProgress === null || onProgress === void 0 ? void 0 : onProgress({
             encodedDoneIn,
-            encodedFrames,
+            encodedFrames: Math.round(0.5 * encodedFrames + 0.5 * muxedFrames),
             renderedDoneIn,
             renderedFrames,
             stitchStage,
-            progress: Math.round(((0.7 * renderedFrames + 0.3 * encodedFrames) /
-                composition.durationInFrames) *
-                100) / 100,
+            progress: Math.round((70 * renderedFrames + 15 * encodedFrames + 15 * muxedFrames) /
+                composition.durationInFrames) / 100,
         });
     };
     const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange);
@@ -324,7 +324,12 @@ const internalRenderMedia = ({ proResProfile, crf, composition, serializedInputP
                     assetsInfo,
                     onProgress: (frame) => {
                         stitchStage = 'muxing';
-                        encodedFrames = frame;
+                        if (preEncodedFileLocation) {
+                            muxedFrames = frame;
+                        }
+                        else {
+                            encodedFrames = frame;
+                        }
                         callUpdate();
                     },
                     onDownload,

package/dist/seek-to-frame.js

@@ -1,62 +1,114 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.seekToFrame = exports.waitForReady = void 0;
+const _1 = require(".");
 const symbolicateable_error_1 = require("./error-handling/symbolicateable-error");
 const parse_browser_error_stack_1 = require("./parse-browser-error-stack");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
-const waitForReady = ({ page, timeoutInMilliseconds, frame, }) => Promise.race([
-    new Promise((_, reject) => {
-        page.on("disposed" /* PageEmittedEvents.Disposed */, () => {
-            reject(new Error('Target closed (page disposed)'));
+const waitForReady = ({ page, timeoutInMilliseconds, frame, }) => {
+    const waitForReadyProm = new Promise((resolve, reject) => {
+        page
+            .mainFrame()
+            ._mainWorld.waitForFunction({
+            browser: page.browser,
+            // Increase timeout so the delayRender() timeout fires earlier
+            timeout: timeoutInMilliseconds + 3000,
+            pageFunction: 'window.remotion_renderReady === true',
+            title: frame === null
+                ? 'the page to render the React component'
+                : `the page to render the React component at frame ${frame}`,
+            shouldClosePage: false,
+        })
+            .then((a) => resolve(a))
+            .catch((err) => {
+            if (err.message.includes('timeout') &&
+                err.message.includes('exceeded')) {
+                (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+                    pageFunction: () => {
+                        return Object.keys(window.remotion_delayRenderTimeouts)
+                            .map((id, i) => {
+                            const { label } = window.remotion_delayRenderTimeouts[id];
+                            if (label === null) {
+                                return `${i + 1}. (no label)`;
+                            }
+                            return `"${i + 1}. ${label}"`;
+                        })
+                            .join(', ');
+                    },
+                    args: [],
+                    frame,
+                    page,
+                })
+                    .then((res) => {
+                    reject(new Error(`Timeout exceeded rendering the component${frame ? ' at frame ' + frame : ''}. ${res.value ? `Open delayRender() handles: ${res.value}` : ''}`));
+                })
+                    .catch((newErr) => {
+                    _1.RenderInternals.Log.warn('Tried to get delayRender() handles for timeout, but could not do so because of', newErr);
+                    // Ignore, use prev error
+                    reject(err);
+                });
+            }
+            else {
+                reject(err);
+            }
         });
-    }),
-    new Promise((_, reject) => {
-        page.browser.on("closed-silent" /* BrowserEmittedEvents.ClosedSilent */, () => {
-            reject(new Error('Target closed'));
-        });
-    }),
-    page
-        .mainFrame()
-        ._mainWorld.waitForFunction({
-        browser: page.browser,
-        timeout: timeoutInMilliseconds,
-        pageFunction: 'window.remotion_renderReady === true',
-        title: frame === null
-            ? 'the page to render the React component'
-            : `the page to render the React component at frame ${frame}`,
-    })
-        .catch((err) => {
-        throw err;
-    }),
-    page
-        .mainFrame()
-        ._mainWorld.waitForFunction({
-        browser: page.browser,
-        timeout: timeoutInMilliseconds,
-        pageFunction: 'window.remotion_cancelledError !== undefined',
-        title: 'remotion_cancelledError variable to appear on the page',
-    })
-        .then(() => {
-        return (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
-            pageFunction: () => window.remotion_cancelledError,
-            args: [],
-            frame: null,
-            page,
-        });
-    })
-        .then(({ value: val }) => {
-        if (typeof val !== 'string') {
-            throw val;
-        }
-        throw new symbolicateable_error_1.SymbolicateableError({
-            frame: null,
-            stack: val,
-            name: 'CancelledError',
-            message: val.split('\n')[0],
-            stackFrame: (0, parse_browser_error_stack_1.parseStack)(val.split('\n')),
+    });
+    const waitForErrorProm = new Promise((_shouldNeverResolve, reject) => {
+        page
+            .mainFrame()
+            ._mainWorld.waitForFunction({
+            browser: page.browser,
+            timeout: null,
+            pageFunction: 'window.remotion_cancelledError !== undefined',
+            title: 'remotion_cancelledError variable to appear on the page',
+            shouldClosePage: false,
+        })
+            .then(() => {
+            return (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+                pageFunction: () => window.remotion_cancelledError,
+                args: [],
+                frame: null,
+                page,
+            });
+        })
+            .then(({ value: val }) => {
+            if (typeof val !== 'string') {
+                reject(val);
+                return;
+            }
+            reject(new symbolicateable_error_1.SymbolicateableError({
+                frame: null,
+                stack: val,
+                name: 'CancelledError',
+                message: val.split('\n')[0],
+                stackFrame: (0, parse_browser_error_stack_1.parseStack)(val.split('\n')),
+            }));
+        })
+            .catch((err) => {
+            if (err.message.includes('timeout') &&
+                err.message.includes('exceeded')) {
+                // Don't care if a error never appeared
+            }
+            else {
+                reject(err);
+            }
         });
-    }),
-]);
+    });
+    return Promise.race([
+        new Promise((_, reject) => {
+            page.on("disposed" /* PageEmittedEvents.Disposed */, () => {
+                reject(new Error('Target closed (page disposed)'));
+            });
+        }),
+        new Promise((_, reject) => {
+            page.browser.on("closed-silent" /* BrowserEmittedEvents.ClosedSilent */, () => {
+                reject(new Error('Target closed'));
+            });
+        }),
+        waitForReadyProm,
+        waitForErrorProm,
+    ]);
+};
 exports.waitForReady = waitForReady;
 const seekToFrame = async ({ frame, page, composition, timeoutInMilliseconds, }) => {
     await (0, exports.waitForReady)({ page, timeoutInMilliseconds, frame: null });

package/dist/serve-static.js

@@ -67,7 +67,13 @@ const serveStatic = async (path, options) => {
             };
             const close = async () => {
                 await Promise.all([
-                    closeCompositor(),
+                    new Promise((resolve) => {
+                        // compositor may have already quit before,
+                        // this is okay as we are in cleanup phase
+                        closeCompositor().finally(() => {
+                            resolve();
+                        });
+                    }),
                     new Promise((resolve, reject) => {
                         destroyConnections();
                         server.close((err) => {

package/dist/set-props-and-env.js

@@ -110,7 +110,7 @@ const innerSetPropsAndEnv = async ({ serializedInputPropsWithCustomSchema, envVa
         frame: null,
         page,
     });
-    const requiredVersion = '8';
+    const requiredVersion = '9';
     if (siteVersion !== requiredVersion) {
         throw new Error([
             `Incompatible site: When visiting ${urlToVisit}, a bundle was found, but one that is not compatible with this version of Remotion. Found version: ${siteVersion} - Required version: ${requiredVersion}. To resolve this error:`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/renderer",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "description": "Renderer for Remotion",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
     "extract-zip": "2.0.1",
     "source-map": "^0.8.0-beta.0",
     "ws": "8.7.0",
-    "remotion": "4.0.10"
+    "remotion": "4.0.11"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -42,13 +42,13 @@
     "zod": "^3.21.4"
   },
   "optionalDependencies": {
-    "@remotion/compositor-darwin-arm64": "4.0.10",
-    "@remotion/compositor-linux-arm64-musl": "4.0.10",
-    "@remotion/compositor-linux-arm64-gnu": "4.0.10",
-    "@remotion/compositor-linux-x64-gnu": "4.0.10",
-    "@remotion/compositor-linux-x64-musl": "4.0.10",
-    "@remotion/compositor-win32-x64-msvc": "4.0.10",
-    "@remotion/compositor-darwin-x64": "4.0.10"
+    "@remotion/compositor-linux-arm64-musl": "4.0.11",
+    "@remotion/compositor-darwin-arm64": "4.0.11",
+    "@remotion/compositor-linux-x64-gnu": "4.0.11",
+    "@remotion/compositor-linux-arm64-gnu": "4.0.11",
+    "@remotion/compositor-darwin-x64": "4.0.11",
+    "@remotion/compositor-linux-x64-musl": "4.0.11",
+    "@remotion/compositor-win32-x64-msvc": "4.0.11"
   },
   "keywords": [
     "remotion",

package/dist/serialize-props.d.ts

@@ -1,6 +0,0 @@
-import type { SerializedJSONWithCustomFields } from 'remotion';
-export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
-    data: Record<string, unknown>;
-    indent: number | undefined;
-    staticBase: string | null;
-}) => SerializedJSONWithCustomFields;

package/dist/serialize-props.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeJSONWithDate = void 0;
-// Keep in sync with /packages/core/src/input-props-serialization.ts
-const DATE_TOKEN = 'remotion-date:';
-const FILE_TOKEN = 'remotion-file:';
-const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
-    let customDateUsed = false;
-    let customFileUsed = false;
-    let mapUsed = false;
-    let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
-            return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
-            return value;
-        }
-        if (typeof item === 'string' &&
-            staticBase !== null &&
-            item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-};
-exports.serializeJSONWithDate = serializeJSONWithDate;