@remotion/renderer 4.0.58 → 4.0.60

package/dist/browser/Connection.js

@@ -28,6 +28,7 @@ exports.CDPSession = exports.CDPSessionEmittedEvents = exports.Connection = void
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const logger_1 = require("../logger");
 const assert_1 = require("./assert");
 const Errors_1 = require("./Errors");
 const EventEmitter_1 = require("./EventEmitter");
@@ -62,11 +63,14 @@ class Connection extends EventEmitter_1.EventEmitter {
         const params = paramArgs.length ? paramArgs[0] : undefined;
         const id = this._rawSend({ method, params });
         return new Promise((resolve, reject) => {
+            var _a;
             __classPrivateFieldGet(this, _Connection_callbacks, "f").set(id, {
                 resolve,
                 reject,
                 method,
                 returnSize: true,
+                stack: (_a = new Error().stack) !== null && _a !== void 0 ? _a : '',
+                fn: method + JSON.stringify(params),
             });
         });
     }
@@ -192,11 +196,20 @@ class CDPSession extends EventEmitter_1.EventEmitter {
             params,
         });
         return new Promise((resolve, reject) => {
+            var _a;
+            if (__classPrivateFieldGet(this, _CDPSession_callbacks, "f").size > 100) {
+                for (const callback of __classPrivateFieldGet(this, _CDPSession_callbacks, "f").values()) {
+                    logger_1.Log.info(callback.fn);
+                }
+                throw new Error('Leak detected: Too many callbacks');
+            }
             __classPrivateFieldGet(this, _CDPSession_callbacks, "f").set(id, {
                 resolve,
                 reject,
                 method,
                 returnSize: true,
+                stack: (_a = new Error().stack) !== null && _a !== void 0 ? _a : '',
+                fn: method + JSON.stringify(params),
             });
         });
     }

package/dist/browser/DOMWorld.d.ts

@@ -34,8 +34,7 @@ export declare class DOMWorld {
         timeout: number | null;
         pageFunction: Function | string;
         title: string;
-    }): Promise<JSHandle>;
-    title(): Promise<string>;
+    }): WaitTask;
 }
 interface WaitTaskOptions {
     domWorld: DOMWorld;

package/dist/browser/DOMWorld.js

@@ -99,11 +99,6 @@ class DOMWorld {
             timeout,
             args: [],
             browser,
-        }).promise;
-    }
-    title() {
-        return this.evaluate(() => {
-            return document.title;
         });
     }
 }
@@ -244,6 +239,9 @@ _WaitTask_domWorld = new WeakMap(), _WaitTask_timeout = new WeakMap(), _WaitTask
     }
     __classPrivateFieldGet(this, _WaitTask_browser, "f").off("closed" /* BrowserEmittedEvents.Closed */, this.onBrowserClose);
     __classPrivateFieldGet(this, _WaitTask_browser, "f").off("closed-silent" /* BrowserEmittedEvents.ClosedSilent */, this.onBrowserCloseSilent);
+    if (__classPrivateFieldGet(this, _WaitTask_domWorld, "f")._waitTasks.size > 100) {
+        throw new Error('Leak detected: Too many WaitTasks');
+    }
     __classPrivateFieldGet(this, _WaitTask_domWorld, "f")._waitTasks.delete(this);
 };
 function waitForPredicatePageFunction(predicateBody, timeout, ...args) {

package/dist/browser/JSHandle.js

@@ -77,7 +77,7 @@ class JSHandle {
             const type = __classPrivateFieldGet(this, _JSHandle_remoteObject, "f").subtype || __classPrivateFieldGet(this, _JSHandle_remoteObject, "f").type;
             return 'JSHandle@' + type;
         }
-        return 'JSHandle:' + (0, util_1.valueFromRemoteObject)(__classPrivateFieldGet(this, _JSHandle_remoteObject, "f"));
+        return (0, util_1.valueFromRemoteObject)(__classPrivateFieldGet(this, _JSHandle_remoteObject, "f"));
     }
 }
 exports.JSHandle = JSHandle;

package/dist/client.d.ts

@@ -311,7 +311,7 @@ export declare const BrowserSafeApis: {
             cliFlag: string;
             docLink: string;
             name: string;
-            type: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
+            type: "angle" | "swangle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
             ssrName: string;
             description: () => JSX.Element;
         };

package/dist/get-port.d.ts

@@ -3,6 +3,10 @@ export declare const testPortAvailableOnMultipleHosts: ({ hosts, port, }: {
     port: number;
     hosts: string[];
 }) => Promise<PortStatus>;
+export declare const getPortConfig: () => {
+    host: string;
+    hostsToTry: string[];
+};
 export declare const getDesiredPort: ({ desiredPort, from, hostsToTry, to, }: {
     desiredPort: number | undefined;
     from: number;

package/dist/get-port.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDesiredPort = exports.testPortAvailableOnMultipleHosts = void 0;
+exports.getDesiredPort = exports.getPortConfig = exports.testPortAvailableOnMultipleHosts = void 0;
 const net_1 = __importDefault(require("net"));
+const is_ipv6_supported_1 = require("./is-ipv6-supported");
 const locks_1 = require("./locks");
 const isPortAvailableOnHost = ({ portToTry, host, }) => {
     return new Promise((resolve) => {
@@ -47,6 +48,14 @@ const getPort = async ({ from, to, hostsToTest, }) => {
     throw new Error('No available ports found');
 };
 const portLocks = (0, locks_1.createLock)({ timeout: 10000 });
+const getPortConfig = () => {
+    const host = (0, is_ipv6_supported_1.isIpV6Supported)() ? '::' : '0.0.0.0';
+    const hostsToTry = (0, is_ipv6_supported_1.isIpV6Supported)()
+        ? ['::', '::1', '0.0.0.0', '127.0.0.1']
+        : ['0.0.0.0', '127.0.0.1'];
+    return { host, hostsToTry };
+};
+exports.getPortConfig = getPortConfig;
 const getDesiredPort = async ({ desiredPort, from, hostsToTry, to, }) => {
     await portLocks.waitForAllToBeDone();
     const lockPortSelection = portLocks.lock();
@@ -54,7 +63,7 @@ const getDesiredPort = async ({ desiredPort, from, hostsToTry, to, }) => {
     if (typeof desiredPort !== 'undefined' &&
         (await (0, exports.testPortAvailableOnMultipleHosts)({
             port: desiredPort,
-            hosts: ['::', '::1'],
+            hosts: hostsToTry,
         })) === 'available') {
         return { port: desiredPort, didUsePort };
     }

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+/// <reference types="react" />
 import execa from 'execa';
 import { HeadlessBrowser } from './browser/Browser';
 import { SymbolicateableError } from './error-handling/symbolicateable-error';
@@ -135,8 +137,8 @@ export declare const RenderInternals: {
     validPixelFormats: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le", "yuva444p10le"];
     DEFAULT_BROWSER: "chrome";
     validateFrameRange: (frameRange: import("./frame-range").FrameRange | null) => void;
-    DEFAULT_OPENGL_RENDERER: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
-    validateOpenGlRenderer: (option: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null) => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
+    DEFAULT_OPENGL_RENDERER: "angle" | "swangle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
+    validateOpenGlRenderer: (option: "angle" | "swangle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null) => "angle" | "swangle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
     validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "gif"];
     DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     validateJpegQuality: (q: number | undefined) => void;
@@ -327,8 +329,8 @@ export declare const RenderInternals: {
     };
     validStillImageFormats: readonly ["png", "jpeg", "pdf", "webp"];
     validVideoImageFormats: readonly ["png", "jpeg", "none"];
-    DEFAULT_STILL_IMAGE_FORMAT: "png" | "jpeg" | "pdf" | "webp";
-    DEFAULT_VIDEO_IMAGE_FORMAT: "png" | "jpeg" | "none";
+    DEFAULT_STILL_IMAGE_FORMAT: "jpeg" | "png" | "webp" | "pdf";
+    DEFAULT_VIDEO_IMAGE_FORMAT: "jpeg" | "png" | "none";
     DEFAULT_JPEG_QUALITY: number;
     chalk: {
         enabled: () => boolean;
@@ -427,7 +429,7 @@ export declare const RenderInternals: {
         frame: number;
         serializedInputPropsWithCustomSchema: string;
         serializedResolvedPropsWithCustomSchema: string;
-        imageFormat: "png" | "jpeg" | "pdf" | "webp";
+        imageFormat: "jpeg" | "png" | "webp" | "pdf";
         jpegQuality: number;
         puppeteerInstance: HeadlessBrowser | null;
         envVariables: Record<string, string>;
@@ -527,4 +529,8 @@ export declare const RenderInternals: {
         feature: string;
         status: string;
     }[]>;
+    getPortConfig: () => {
+        host: string;
+        hostsToTry: string[];
+    };
 };

package/dist/index.js

@@ -195,6 +195,7 @@ exports.RenderInternals = {
     copyImageToClipboard: copy_to_clipboard_1.copyImageToClipboard,
     isIpV6Supported: is_ipv6_supported_1.isIpV6Supported,
     getChromiumGpuInformation: test_gpu_1.getChromiumGpuInformation,
+    getPortConfig: get_port_1.getPortConfig,
 };
 // Warn of potential performance issues with Apple Silicon (M1 chip under Rosetta)
 (0, check_apple_silicon_1.checkNodeVersionAndWarnAboutRosetta)();

package/dist/options/gl.d.ts

@@ -4,7 +4,7 @@ export declare const glOption: {
     cliFlag: string;
     docLink: string;
     name: string;
-    type: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
+    type: "angle" | "swangle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
     ssrName: string;
     description: () => JSX.Element;
 };

package/dist/options/index.d.ts

@@ -116,7 +116,7 @@ export declare const allOptions: {
         cliFlag: string;
         docLink: string;
         name: string;
-        type: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
+        type: "angle" | "swangle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
         ssrName: string;
         description: () => JSX.Element;
     };

package/dist/options/render-expiry-days.d.ts

@@ -0,0 +1,8 @@
+export declare const deleteAfterOption: {
+    name: string;
+    cliFlag: "delete-after";
+    description: () => JSX.Element;
+    ssrName: "deleteAfter";
+    docLink: string;
+    type: number | null;
+};

package/dist/options/render-expiry-days.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteAfterOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+exports.deleteAfterOption = {
+    name: 'Render expiry days',
+    cliFlag: 'delete-after',
+    description: () => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Automatically delete the render after a certain period. Accepted values are ", (0, jsx_runtime_1.jsx)("code", { children: "1-day" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "3-days" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "7-days" }), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "30-days" }), ".", (0, jsx_runtime_1.jsx)("br", {}), " For this to work, your bucket needs to have", ' ', (0, jsx_runtime_1.jsx)("a", { href: "/docs/lambda/autodelete", children: "lifecycles enabled" }), "."] }));
+    },
+    ssrName: 'deleteAfter',
+    docLink: 'https://www.remotion.dev/docs/autodelete',
+    type: 0,
+};

package/dist/presets-profile.d.ts

@@ -0,0 +1,7 @@
+import type { Codec } from './codec';
+export declare const x264PresetOptions: readonly ["ultrafast", "superfast", "veryfast", "faster", "fast", "medium", "slow", "slower", "veryslow", "placebo"];
+export type x264Preset = typeof x264PresetOptions[number];
+export declare const validateSelectedCodecAndPresetCombination: ({ codec, x264Preset, }: {
+    codec: Codec;
+    x264Preset: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+}) => void;

package/dist/presets-profile.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateSelectedCodecAndPresetCombination = exports.x264PresetOptions = void 0;
+exports.x264PresetOptions = [
+    'ultrafast',
+    'superfast',
+    'veryfast',
+    'faster',
+    'fast',
+    'medium',
+    'slow',
+    'slower',
+    'veryslow',
+    'placebo',
+];
+const validateSelectedCodecAndPresetCombination = ({ codec, x264Preset, }) => {
+    if (typeof x264Preset !== 'undefined' && codec !== 'h264') {
+        throw new TypeError(`You have set a Preset profile but the codec is "${codec}". Set the codec to "h264" or remove the Preset profile.`);
+    }
+    if (x264Preset !== undefined &&
+        !exports.x264PresetOptions.includes(x264Preset)) {
+        throw new TypeError(`The Preset profile "${x264Preset}" is not valid. Valid options are ${exports.x264PresetOptions
+            .map((p) => `"${p}"`)
+            .join(', ')}`);
+    }
+};
+exports.validateSelectedCodecAndPresetCombination = validateSelectedCodecAndPresetCombination;

package/dist/seek-to-frame.js

@@ -5,21 +5,55 @@ const symbolicateable_error_1 = require("./error-handling/symbolicateable-error"
 const logger_1 = require("./logger");
 const parse_browser_error_stack_1 = require("./parse-browser-error-stack");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const cancelledToken = 'cancelled';
+const readyToken = 'ready';
 const waitForReady = ({ page, timeoutInMilliseconds, frame, indent, logLevel, }) => {
+    const cleanups = [];
+    const retrieveErrorAndReject = () => {
+        return new Promise((_, reject) => {
+            (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')),
+                }));
+            });
+        });
+    };
     const waitForReadyProm = new Promise((resolve, reject) => {
-        page
-            .mainFrame()
-            ._mainWorld.waitForFunction({
+        const waitTask = page.mainFrame()._mainWorld.waitForFunction({
             browser: page.browser,
             // Increase timeout so the delayRender() timeout fires earlier
             timeout: timeoutInMilliseconds + 3000,
-            pageFunction: 'window.remotion_renderReady === true',
+            pageFunction: `window.remotion_renderReady === true ? "${readyToken}" : window.remotion_cancelledError !== undefined ? "${cancelledToken}" : false`,
             title: frame === null
                 ? 'the page to render the React component'
                 : `the page to render the React component at frame ${frame}`,
-        })
+        });
+        cleanups.push(() => {
+            waitTask.terminate(new Error('cleanup'));
+        });
+        waitTask.promise
             .then((a) => {
-            return resolve(a);
+            const token = a.toString();
+            if (token === cancelledToken) {
+                return retrieveErrorAndReject();
+            }
+            if (token === readyToken) {
+                return resolve(a);
+            }
+            reject(new Error('Unexpected token ' + token));
         })
             .catch((err) => {
             if (err.message.includes('timeout') &&
@@ -54,46 +88,6 @@ const waitForReady = ({ page, timeoutInMilliseconds, frame, indent, logLevel, })
             }
         });
     });
-    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',
-        })
-            .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 */, () => {
@@ -106,8 +100,11 @@ const waitForReady = ({ page, timeoutInMilliseconds, frame, indent, logLevel, })
             });
         }),
         waitForReadyProm,
-        waitForErrorProm,
-    ]);
+    ]).finally(() => {
+        cleanups.forEach((cleanup) => {
+            cleanup();
+        });
+    });
 };
 exports.waitForReady = waitForReady;
 const seekToFrame = async ({ frame, page, composition, timeoutInMilliseconds, logLevel, indent, }) => {

package/dist/serve-static.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.serveStatic = void 0;
 const node_http_1 = __importDefault(require("node:http"));
 const get_port_1 = require("./get-port");
-const is_ipv6_supported_1 = require("./is-ipv6-supported");
 const offthread_video_server_1 = require("./offthread-video-server");
 const serve_handler_1 = require("./serve-handler");
 const serveStatic = async (path, options) => {
@@ -46,10 +45,7 @@ const serveStatic = async (path, options) => {
     });
     let selectedPort = null;
     const maxTries = 5;
-    const host = (0, is_ipv6_supported_1.isIpV6Supported)() ? '::' : '0.0.0.0';
-    const hostsToTry = (0, is_ipv6_supported_1.isIpV6Supported)()
-        ? ['::', '::1']
-        : ['0.0.0.0', '127.0.0.1'];
+    const portConfig = (0, get_port_1.getPortConfig)();
     for (let i = 0; i < maxTries; i++) {
         try {
             selectedPort = await new Promise((resolve, reject) => {
@@ -58,10 +54,10 @@ const serveStatic = async (path, options) => {
                     desiredPort: (_a = options === null || options === void 0 ? void 0 : options.port) !== null && _a !== void 0 ? _a : undefined,
                     from: 3000,
                     to: 3100,
-                    hostsToTry,
+                    hostsToTry: portConfig.hostsToTry,
                 })
                     .then(({ port, didUsePort }) => {
-                    server.listen({ port, host });
+                    server.listen({ port, host: portConfig.host });
                     server.on('listening', () => {
                         resolve(port);
                         return didUsePort();

package/dist/stitch-frames-to-video.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import type { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import type { RenderAssetInfo } from './assets/download-map';
 import type { AudioCodec } from './audio-codec';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/renderer",
-  "version": "4.0.58",
+  "version": "4.0.60",
   "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.58"
+    "remotion": "4.0.60"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -40,13 +40,13 @@
     "vitest": "0.31.1"
   },
   "optionalDependencies": {
-    "@remotion/compositor-darwin-arm64": "4.0.58",
-    "@remotion/compositor-darwin-x64": "4.0.58",
-    "@remotion/compositor-linux-arm64-musl": "4.0.58",
-    "@remotion/compositor-linux-x64-musl": "4.0.58",
-    "@remotion/compositor-win32-x64-msvc": "4.0.58",
-    "@remotion/compositor-linux-arm64-gnu": "4.0.58",
-    "@remotion/compositor-linux-x64-gnu": "4.0.58"
+    "@remotion/compositor-darwin-x64": "4.0.60",
+    "@remotion/compositor-linux-arm64-gnu": "4.0.60",
+    "@remotion/compositor-linux-x64-gnu": "4.0.60",
+    "@remotion/compositor-darwin-arm64": "4.0.60",
+    "@remotion/compositor-linux-arm64-musl": "4.0.60",
+    "@remotion/compositor-linux-x64-musl": "4.0.60",
+    "@remotion/compositor-win32-x64-msvc": "4.0.60"
   },
   "keywords": [
     "remotion",