@remotion/renderer 4.1.0-alpha5 → 4.1.0-alpha8

package/dist/browser/BrowserPage.js

@@ -40,6 +40,14 @@ const TaskQueue_1 = require("./TaskQueue");
 const TimeoutSettings_1 = require("./TimeoutSettings");
 const util_1 = require("./util");
 const format_logs_1 = require("../format-logs");
+const shouldHideWarning = (log) => {
+    // Mixed Content warnings caused by localhost should not be displayed
+    if (log.text.includes('Mixed Content:') &&
+        log.text.includes('http://localhost:')) {
+        return true;
+    }
+    return false;
+};
 class Page extends EventEmitter_1.EventEmitter {
     static async _create({ client, target, defaultViewport, browser, sourcemapContext, logLevel, indent, }) {
         const page = new Page({
@@ -106,6 +114,9 @@ class Page extends EventEmitter_1.EventEmitter {
         this.on('console', (log) => {
             var _a;
             const { url, columnNumber, lineNumber } = log.location();
+            if (shouldHideWarning(log)) {
+                return;
+            }
             if ((url === null || url === void 0 ? void 0 : url.endsWith(remotion_1.Internals.bundleName)) &&
                 lineNumber &&
                 this.sourcemapContext) {

package/dist/browser/should-log-message.js

@@ -18,6 +18,12 @@ const shouldLogBrowserMessage = (message) => {
     if (message.includes('Failed to send GpuControl.CreateCommandBuffer')) {
         return false;
     }
+    if (message.includes('CreatePlatformSocket() failed: Address family not supported by protocol')) {
+        return false;
+    }
+    if (message.includes('Fontconfig error: No writable cache directories')) {
+        return false;
+    }
     return true;
 };
 exports.shouldLogBrowserMessage = shouldLogBrowserMessage;

package/dist/compositor/compose.js

@@ -75,6 +75,11 @@ const callCompositor = (payload) => {
                 }
             }
         });
+        if (child.stdin.closed) {
+            reject(new Error('Compositor stdin closed unexpectedly,' +
+                Buffer.concat(stderrChunks).toString('utf-8')));
+            return;
+        }
         child.stdin.write(payload);
         child.stdin.end();
     });

package/dist/compositor/compositor.js

@@ -19,9 +19,9 @@ const getIdealMaximumFrameCacheItems = () => {
     // Assuming 1 frame is approximately 6MB
     // Assuming only half the available memory should be used
     const max = Math.floor(freeMemory / (1024 * 1024 * 6));
-    // Never store more than 1000 frames
-    // But 100 is needed even if it's going to swap
-    return Math.max(100, Math.min(max, 1000));
+    // 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));
 };
 exports.getIdealMaximumFrameCacheItems = getIdealMaximumFrameCacheItems;
 const startLongRunningCompositor = (maximumFrameCacheItems, logLevel, indent) => {
@@ -206,7 +206,6 @@ const startCompositor = (type, payload, logLevel, indent) => {
                         params,
                     },
                 };
-                // TODO: Should have a way to error out a single task
                 child.stdin.write(JSON.stringify(composed) + '\n');
                 waiters.set(nonce, {
                     resolve: _resolve,

package/dist/format-logs.js

@@ -48,6 +48,9 @@ const formatObjectPreview = (preview) => {
             return chalk_1.chalk.reset(`${property.name}: ${formatProperty(property)}`);
         });
         if (preview.subtype === 'array') {
+            if (preview.overflow) {
+                return chalk_1.chalk.reset(`[ ${preview.properties.map((p) => formatProperty(p)).join(', ')}, …]`);
+            }
             return chalk_1.chalk.reset(`[ ${preview.properties.map((p) => formatProperty(p)).join(', ')} ]`);
         }
         if (preview.subtype === 'arraybuffer') {
@@ -104,6 +107,9 @@ const formatObjectPreview = (preview) => {
         if (properties.length === 0) {
             return chalk_1.chalk.reset('{}');
         }
+        if (preview.overflow) {
+            return chalk_1.chalk.reset(`{ ${properties.join(', ')}, …}`);
+        }
         return chalk_1.chalk.reset(`{ ${properties.join(', ')} }`);
     }
     return '';

package/dist/get-compositions.d.ts

@@ -1,4 +1,4 @@
-import type { VideoConfig } from 'remotion';
+import { type VideoConfig } from 'remotion';
 import type { BrowserExecutable } from './browser-executable';
 import type { BrowserLog } from './browser-log';
 import type { HeadlessBrowser } from './browser/Browser';
@@ -6,7 +6,7 @@ import type { ChromiumOptions } from './open-browser';
 import type { RemotionServer } from './prepare-server';
 import { type LogLevel } from './log-level';
 type InternalGetCompositionsOptions = {
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
     envVariables: Record<string, string>;
     puppeteerInstance: HeadlessBrowser | undefined;
     onBrowserLog: null | ((log: BrowserLog) => void);
@@ -30,7 +30,7 @@ export type GetCompositionsOptions = {
     port?: number | null;
     logLevel?: LogLevel;
 };
-export declare const internalGetCompositions: ({ browserExecutable, chromiumOptions, envVariables, indent, inputProps, onBrowserLog, port, puppeteerInstance, serveUrlOrWebpackUrl, server, timeoutInMilliseconds, logLevel, }: InternalGetCompositionsOptions) => Promise<VideoConfig[]>;
+export declare const internalGetCompositions: ({ browserExecutable, chromiumOptions, envVariables, indent, serializedInputPropsWithCustomSchema, onBrowserLog, port, puppeteerInstance, serveUrlOrWebpackUrl, server, timeoutInMilliseconds, logLevel, }: InternalGetCompositionsOptions) => Promise<VideoConfig[]>;
 /**
  * @description Gets the compositions defined in a Remotion project based on a Webpack bundle.
  * @see [Documentation](https://www.remotion.dev/docs/renderer/get-compositions)

package/dist/get-compositions.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositions = exports.internalGetCompositions = void 0;
+const remotion_1 = require("remotion");
 const TimeoutSettings_1 = require("./browser/TimeoutSettings");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
 const find_closest_package_json_1 = require("./find-closest-package-json");
@@ -11,7 +12,7 @@ const seek_to_frame_1 = require("./seek-to-frame");
 const set_props_and_env_1 = require("./set-props-and-env");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
 const logger_1 = require("./logger");
-const innerGetCompositions = async ({ envVariables, inputProps, onBrowserLog, page, proxyPort, serveUrl, timeoutInMilliseconds, }) => {
+const innerGetCompositions = async ({ envVariables, serializedInputPropsWithCustomSchema, onBrowserLog, page, proxyPort, serveUrl, timeoutInMilliseconds, indent, logLevel, }) => {
     if (onBrowserLog) {
         page.on('console', (log) => {
             onBrowserLog({
@@ -23,7 +24,7 @@ const innerGetCompositions = async ({ envVariables, inputProps, onBrowserLog, pa
     }
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     await (0, set_props_and_env_1.setPropsAndEnv)({
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         envVariables,
         page,
         serveUrl,
@@ -33,6 +34,8 @@ const innerGetCompositions = async ({ envVariables, inputProps, onBrowserLog, pa
         retriesRemaining: 2,
         audioEnabled: false,
         videoEnabled: false,
+        indent,
+        logLevel,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         page,
@@ -55,7 +58,7 @@ const innerGetCompositions = async ({ envVariables, inputProps, onBrowserLog, pa
     });
     return result;
 };
-const internalGetCompositions = async ({ browserExecutable, chromiumOptions, envVariables, indent, inputProps, onBrowserLog, port, puppeteerInstance, serveUrlOrWebpackUrl, server, timeoutInMilliseconds, logLevel, }) => {
+const internalGetCompositions = async ({ browserExecutable, chromiumOptions, envVariables, indent, serializedInputPropsWithCustomSchema, onBrowserLog, port, puppeteerInstance, serveUrlOrWebpackUrl, server, timeoutInMilliseconds, logLevel, }) => {
     const { page, cleanup: cleanupPage } = await (0, get_browser_instance_1.getPageAndCleanupFn)({
         passedInInstance: puppeteerInstance,
         browserExecutable,
@@ -89,12 +92,14 @@ const internalGetCompositions = async ({ browserExecutable, chromiumOptions, env
             cleanup.push(() => cleanupServer(true));
             return innerGetCompositions({
                 envVariables,
-                inputProps,
+                serializedInputPropsWithCustomSchema,
                 onBrowserLog,
                 page,
                 proxyPort: offthreadPort,
                 serveUrl,
                 timeoutInMilliseconds,
+                indent,
+                logLevel,
             });
         })
             .then((comp) => {
@@ -121,7 +126,11 @@ const getCompositions = (serveUrlOrWebpackUrl, config) => {
         browserExecutable: browserExecutable !== null && browserExecutable !== void 0 ? browserExecutable : null,
         chromiumOptions: chromiumOptions !== null && chromiumOptions !== void 0 ? chromiumOptions : {},
         envVariables: envVariables !== null && envVariables !== void 0 ? envVariables : {},
-        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+            indent: undefined,
+            staticBase: null,
+        }).serializedString,
         indent: false,
         onBrowserLog: onBrowserLog !== null && onBrowserLog !== void 0 ? onBrowserLog : null,
         port: port !== null && port !== void 0 ? port : null,

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import execa from 'execa';
 import { HeadlessBrowser } from './browser/Browser';
 import { SymbolicateableError } from './error-handling/symbolicateable-error';
@@ -113,8 +114,8 @@ export declare const RenderInternals: {
     validPixelFormats: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le", "yuva444p10le"];
     DEFAULT_BROWSER: import("./browser").Browser;
     validateFrameRange: (frameRange: import("./frame-range").FrameRange | null) => void;
-    DEFAULT_OPENGL_RENDERER: "swangle" | "angle" | "egl" | "swiftshader" | null;
-    validateOpenGlRenderer: (option: "swangle" | "angle" | "egl" | "swiftshader" | null) => "swangle" | "angle" | "egl" | "swiftshader" | null;
+    DEFAULT_OPENGL_RENDERER: "angle" | "swangle" | "egl" | "swiftshader" | null;
+    validateOpenGlRenderer: (option: "angle" | "swangle" | "egl" | "swiftshader" | null) => "angle" | "swangle" | "egl" | "swiftshader" | 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;
@@ -299,8 +300,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;
@@ -403,8 +404,9 @@ export declare const RenderInternals: {
         composition: import("remotion").VideoConfig;
         output: string | null;
         frame: number;
-        inputProps: Record<string, unknown>;
-        imageFormat: "png" | "jpeg" | "pdf" | "webp";
+        serializedInputPropsWithCustomSchema: string;
+        serializedResolvedPropsWithCustomSchema: string;
+        imageFormat: "jpeg" | "png" | "webp" | "pdf";
         jpegQuality: number;
         puppeteerInstance: HeadlessBrowser | null;
         envVariables: Record<string, string>;
@@ -434,7 +436,7 @@ export declare const RenderInternals: {
         logLevel: "verbose" | "info" | "warn" | "error";
     }) => Promise<HeadlessBrowser>;
     internalSelectComposition: (options: {
-        inputProps: Record<string, unknown>;
+        serializedInputPropsWithCustomSchema: string;
         envVariables: Record<string, string>;
         puppeteerInstance: HeadlessBrowser | undefined;
         onBrowserLog: ((log: import("./browser-log").BrowserLog) => void) | null;
@@ -451,8 +453,8 @@ export declare const RenderInternals: {
         metadata: import("remotion").VideoConfig;
         propsSize: number;
     }>;
-    internalGetCompositions: ({ browserExecutable, chromiumOptions, envVariables, indent, inputProps, onBrowserLog, port, puppeteerInstance, serveUrlOrWebpackUrl, server, timeoutInMilliseconds, logLevel, }: {
-        inputProps: Record<string, unknown>;
+    internalGetCompositions: ({ browserExecutable, chromiumOptions, envVariables, indent, serializedInputPropsWithCustomSchema, onBrowserLog, port, puppeteerInstance, serveUrlOrWebpackUrl, server, timeoutInMilliseconds, logLevel, }: {
+        serializedInputPropsWithCustomSchema: string;
         envVariables: Record<string, string>;
         puppeteerInstance: HeadlessBrowser | undefined;
         onBrowserLog: ((log: import("./browser-log").BrowserLog) => void) | null;
@@ -465,8 +467,8 @@ export declare const RenderInternals: {
         logLevel: "verbose" | "info" | "warn" | "error";
         serveUrlOrWebpackUrl: string;
     }) => Promise<import("remotion").VideoConfig[]>;
-    internalRenderFrames: ({ browserExecutable, cancelSignal, chromiumOptions, composition, concurrency, envVariables, everyNthFrame, frameRange, imageFormat, indent, inputProps, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, onFrameUpdate, onStart, outputDir, port, puppeteerInstance, scale, server, timeoutInMilliseconds, logLevel, webpackBundleOrServeUrl, }: import("./render-frames").InternalRenderFramesOptions) => Promise<import("./types").RenderFramesOutput>;
-    internalRenderMedia: ({ proResProfile, crf, composition, inputProps, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, audioCodec, concurrency, disallowParallelEncoding, everyNthFrame, imageFormat: provisionalImageFormat, indent, jpegQuality, numberOfGifLoops, onCtrlCExit, preferLossless, serveUrl, server: reusedServer, logLevel, }: import("./render-media").InternalRenderMediaOptions) => Promise<{
+    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>;
+    internalRenderMedia: ({ proResProfile, crf, composition, serializedInputPropsWithCustomSchema, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, audioCodec, concurrency, disallowParallelEncoding, everyNthFrame, imageFormat: provisionalImageFormat, indent, jpegQuality, numberOfGifLoops, onCtrlCExit, preferLossless, serveUrl, server: reusedServer, logLevel, serializedResolvedPropsWithCustomSchema, }: import("./render-media").InternalRenderMediaOptions) => Promise<{
         buffer: Buffer | null;
         slowestFrames: import("./render-media").SlowFrame[];
     }>;

package/dist/logger.d.ts

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

package/dist/logger.js

@@ -23,15 +23,16 @@ exports.Log = {
             return console.log(...[
                 options.indent ? exports.INDENT_TOKEN : null,
                 options.tag ? (0, exports.verboseTag)(options.tag) : null,
-                ...args.map((a) => chalk_1.chalk.gray(a)),
-            ].filter(truthy_1.truthy));
+            ]
+                .filter(truthy_1.truthy)
+                .concat(args.map((a) => chalk_1.chalk.gray(a))));
         }
     },
     info: (...args) => {
         exports.Log.infoAdvanced({ indent: false, logLevel: (0, exports.getLogLevel)() }, ...args);
     },
     infoAdvanced: (options, ...args) => {
-        return console.log(...[options.indent ? exports.INDENT_TOKEN : null, ...args].filter(truthy_1.truthy));
+        return console.log(...[options.indent ? exports.INDENT_TOKEN : null].filter(truthy_1.truthy).concat(args));
     },
     warn: (...args) => {
         if ((0, log_level_1.isEqualOrBelowLogLevel)((0, exports.getLogLevel)(), 'warn')) {
@@ -40,10 +41,9 @@ exports.Log = {
     },
     warnAdvanced: (options, ...args) => {
         if ((0, log_level_1.isEqualOrBelowLogLevel)(options.logLevel, 'warn')) {
-            return console.warn(...[
-                options.indent ? chalk_1.chalk.yellow(exports.INDENT_TOKEN) : null,
-                ...args.map((a) => chalk_1.chalk.yellow(a)),
-            ].filter(truthy_1.truthy));
+            return console.warn(...[options.indent ? chalk_1.chalk.yellow(exports.INDENT_TOKEN) : null]
+                .filter(truthy_1.truthy)
+                .concat(args.map((a) => chalk_1.chalk.yellow(a))));
         }
     },
     error: (...args) => {

package/dist/offthread-video-server.js

@@ -5,6 +5,7 @@ const node_url_1 = require("node:url");
 const download_and_map_assets_to_file_1 = require("./assets/download-and-map-assets-to-file");
 const compositor_1 = require("./compositor/compositor");
 const log_level_1 = require("./log-level");
+const logger_1 = require("./logger");
 const extractUrlAndSourceFromUrl = (url) => {
     const parsed = new URL(url, 'http://localhost');
     const query = parsed.search;
@@ -68,8 +69,10 @@ const startOffthreadVideoServer = ({ downloadMap, concurrency, logLevel, indent,
                 res.end();
                 return;
             }
+            let extractStart = Date.now();
             (0, download_and_map_assets_to_file_1.downloadAsset)({ src, emitter: events, downloadMap })
                 .then((to) => {
+                extractStart = Date.now();
                 return compositor.executeCommand('ExtractFrame', {
                     input: to,
                     time,
@@ -77,6 +80,11 @@ const startOffthreadVideoServer = ({ downloadMap, concurrency, logLevel, indent,
                 });
             })
                 .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');
                 }

package/dist/options/crf.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 exports.crfOption = {
     name: 'CRF',
     cliFlag: '--crf',
-    description: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No matter which codec you end up using, there's always a tradeoff between file size and video quality. You can control it by setting the so called CRF (Constant Rate Factor). The lower the number, the better the quality, the higher the number, the smaller the file is \u2013 of course at the cost of quality." })),
+    description: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No matter which codec you end up using, there's always a tradeoff between file size and video quality. You can control it by setting the CRF (Constant Rate Factor). The lower the number, the better the quality, the higher the number, the smaller the file is \u2013 of course at the cost of quality." })),
     ssrName: 'crf',
     docLink: 'https://www.remotion.dev/docs/encoding/#controlling-quality-using-the-crf-setting',
 };

package/dist/options/video-codec.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 exports.videoCodecOption = {
     name: 'Codec',
     cliFlag: '--codec',
-    description: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "H264 works well in most cases, sometimes it's worth going for a different codec. WebM achieves higher compression but is slower to render. WebM and ProRes support transparency." })),
+    description: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "H264 works well in most cases, but sometimes it's worth going for a different codec. WebM achieves higher compression but is slower to render. WebM and ProRes support transparency." })),
     ssrName: 'codec',
     docLink: 'https://www.remotion.dev/docs/encoding/#choosing-a-codec',
 };

package/dist/render-frames.d.ts

@@ -15,7 +15,6 @@ export type InternalRenderFramesOptions = {
     onStart: null | ((data: OnStartData) => void);
     onFrameUpdate: null | ((framesRendered: number, frameIndex: number, timeToRenderInMilliseconds: number) => void);
     outputDir: string | null;
-    inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
     imageFormat: VideoImageFormat;
     jpegQuality: number;
@@ -31,13 +30,15 @@ export type InternalRenderFramesOptions = {
     scale: number;
     port: number | null;
     cancelSignal: CancelSignal | undefined;
-    composition: VideoConfig;
+    composition: Omit<VideoConfig, 'props' | 'defaultProps'>;
     indent: boolean;
     server: RemotionServer | undefined;
     muted: boolean;
     concurrency: number | string | null;
     webpackBundleOrServeUrl: string;
     logLevel: LogLevel;
+    serializedInputPropsWithCustomSchema: string;
+    serializedResolvedPropsWithCustomSchema: string;
 };
 export type RenderFramesOptions = {
     onStart: (data: OnStartData) => void;
@@ -77,7 +78,7 @@ export type RenderFramesOptions = {
     concurrency?: number | string | null;
     serveUrl: string;
 };
-export declare const internalRenderFrames: ({ browserExecutable, cancelSignal, chromiumOptions, composition, concurrency, envVariables, everyNthFrame, frameRange, imageFormat, indent, inputProps, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, onFrameUpdate, onStart, outputDir, port, puppeteerInstance, scale, server, timeoutInMilliseconds, logLevel, webpackBundleOrServeUrl, }: InternalRenderFramesOptions) => Promise<RenderFramesOutput>;
+export declare const 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, }: InternalRenderFramesOptions) => Promise<RenderFramesOutput>;
 /**
  * @description Renders a series of images using Puppeteer and computes information for mixing audio.
  * @see [Documentation](https://www.remotion.dev/docs/renderer/render-frames)

package/dist/render-frames.js

@@ -35,7 +35,7 @@ const truthy_1 = require("./truthy");
 const validate_scale_1 = require("./validate-scale");
 const logger_1 = require("./logger");
 const MAX_RETRIES_PER_FRAME = 1;
-const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps, jpegQuality, imageFormat, frameRange, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualConcurrency, everyNthFrame, proxyPort, cancelSignal, downloadMap, muted, makeBrowser, browserReplacer, compositor, sourcemapContext, logLevel, indent, }) => {
+const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serializedInputPropsWithCustomSchema, serializedResolvedPropsWithCustomSchema, jpegQuality, imageFormat, frameRange, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualConcurrency, everyNthFrame, proxyPort, cancelSignal, downloadMap, muted, makeBrowser, browserReplacer, compositor, sourcemapContext, logLevel, indent, }) => {
     if (outputDir) {
         if (!node_fs_1.default.existsSync(outputDir)) {
             node_fs_1.default.mkdirSync(outputDir, {
@@ -69,7 +69,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
         }
         const initialFrame = realFrameRange[0];
         await (0, set_props_and_env_1.setPropsAndEnv)({
-            inputProps,
+            serializedInputPropsWithCustomSchema,
             envVariables,
             page,
             serveUrl,
@@ -79,6 +79,8 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             retriesRemaining: 2,
             audioEnabled: !muted,
             videoEnabled: imageFormat !== 'none',
+            indent,
+            logLevel,
         });
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             // eslint-disable-next-line max-params
@@ -86,7 +88,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
                 window.remotion_setBundleMode({
                     type: 'composition',
                     compositionName: id,
-                    props,
+                    serializedResolvedPropsWithSchema: props,
                     compositionDurationInFrames: durationInFrames,
                     compositionFps: fps,
                     compositionHeight: height,
@@ -95,7 +97,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             },
             args: [
                 composition.id,
-                composition.props,
+                serializedResolvedPropsWithCustomSchema,
                 composition.durationInFrames,
                 composition.fps,
                 composition.height,
@@ -133,7 +135,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
     cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
         stopped = true;
     });
-    const renderFrameWithOptionToReject = async ({ frame, index, reject, width, height, }) => {
+    const renderFrameWithOptionToReject = async ({ frame, index, reject, width, height, compId, }) => {
         const pool = await poolPromise;
         const freePage = await pool.acquire();
         if (stopped) {
@@ -149,7 +151,12 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
             frame,
         });
         freePage.on('error', errorCallbackOnFrame);
-        await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage });
+        const startSeeking = Date.now();
+        await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage, composition: compId });
+        const timeToSeek = Date.now() - startSeeking;
+        if (timeToSeek > 1000) {
+            logger_1.Log.verbose(`Seeking to frame ${frame} took ${timeToSeek}ms`);
+        }
         if (!outputDir && !onFrameBuffer && imageFormat !== 'none') {
             throw new Error('Called renderFrames() without specifying either `outputDir` or `onFrameBuffer`');
         }
@@ -210,6 +217,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
                 reject,
                 width: composition.width,
                 height: composition.height,
+                compId: composition.id,
             })
                 .then(() => {
                 resolve();
@@ -286,12 +294,11 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, inputProps
     await Promise.all(downloadPromises);
     return result;
 };
-const internalRenderFrames = ({ browserExecutable, cancelSignal, chromiumOptions, composition, concurrency, envVariables, everyNthFrame, frameRange, imageFormat, indent, inputProps, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, onFrameUpdate, onStart, outputDir, port, puppeteerInstance, scale, server, timeoutInMilliseconds, logLevel, webpackBundleOrServeUrl, }) => {
+const 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, }) => {
     remotion_1.Internals.validateDimension(composition.height, 'height', 'in the `config` object passed to `renderFrames()`');
     remotion_1.Internals.validateDimension(composition.width, 'width', 'in the `config` object passed to `renderFrames()`');
     remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderFrames()`', false);
-    remotion_1.Internals.validateDurationInFrames({
-        durationInFrames: composition.durationInFrames,
+    remotion_1.Internals.validateDurationInFrames(composition.durationInFrames, {
         component: 'in the `config` object passed to `renderFrames()`',
         allowFloats: false,
     });
@@ -355,7 +362,6 @@ const internalRenderFrames = ({ browserExecutable, cancelSignal, chromiumOptions
                     everyNthFrame,
                     frameRange,
                     imageFormat,
-                    inputProps,
                     jpegQuality,
                     muted,
                     onBrowserLog,
@@ -367,6 +373,8 @@ const internalRenderFrames = ({ browserExecutable, cancelSignal, chromiumOptions
                     timeoutInMilliseconds,
                     logLevel,
                     indent,
+                    serializedInputPropsWithCustomSchema,
+                    serializedResolvedPropsWithCustomSchema,
                 });
             }),
         ])
@@ -433,7 +441,16 @@ const renderFrames = (options) => {
         indent: false,
         jpegQuality: jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : jpeg_quality_1.DEFAULT_JPEG_QUALITY,
         onDownload: onDownload !== null && onDownload !== void 0 ? onDownload : null,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            indent: undefined,
+            staticBase: null,
+            data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        }).serializedString,
+        serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            indent: undefined,
+            staticBase: null,
+            data: composition.props,
+        }).serializedString,
         puppeteerInstance,
         muted: muted !== null && muted !== void 0 ? muted : false,
         onBrowserLog: onBrowserLog !== null && onBrowserLog !== void 0 ? onBrowserLog : null,

package/dist/render-media.d.ts

@@ -32,8 +32,9 @@ export type RenderMediaOnProgress = (progress: {
 export type InternalRenderMediaOptions = {
     outputLocation: string | null;
     codec: Codec;
-    composition: VideoConfig;
-    inputProps: Record<string, unknown>;
+    composition: Omit<VideoConfig, 'props' | 'defaultProps'>;
+    serializedInputPropsWithCustomSchema: string;
+    serializedResolvedPropsWithCustomSchema: string;
     crf: number | null;
     imageFormat: VideoImageFormat;
     pixelFormat: PixelFormat;
@@ -124,7 +125,7 @@ type RenderMediaResult = {
     buffer: Buffer | null;
     slowestFrames: SlowFrame[];
 };
-export declare const internalRenderMedia: ({ proResProfile, crf, composition, inputProps, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, audioCodec, concurrency, disallowParallelEncoding, everyNthFrame, imageFormat: provisionalImageFormat, indent, jpegQuality, numberOfGifLoops, onCtrlCExit, preferLossless, serveUrl, server: reusedServer, logLevel, }: InternalRenderMediaOptions) => Promise<RenderMediaResult>;
+export declare const internalRenderMedia: ({ proResProfile, crf, composition, serializedInputPropsWithCustomSchema, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, audioCodec, concurrency, disallowParallelEncoding, everyNthFrame, imageFormat: provisionalImageFormat, indent, jpegQuality, numberOfGifLoops, onCtrlCExit, preferLossless, serveUrl, server: reusedServer, logLevel, serializedResolvedPropsWithCustomSchema, }: InternalRenderMediaOptions) => Promise<RenderMediaResult>;
 /**
  *
  * @description Render a video from a composition

package/dist/render-media.js

@@ -43,7 +43,7 @@ const validate_output_filename_1 = require("./validate-output-filename");
 const validate_scale_1 = require("./validate-scale");
 const validate_videobitrate_1 = require("./validate-videobitrate");
 const SLOWEST_FRAME_COUNT = 10;
-const internalRenderMedia = ({ proResProfile, crf, composition, inputProps, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, audioCodec, concurrency, disallowParallelEncoding, everyNthFrame, imageFormat: provisionalImageFormat, indent, jpegQuality, numberOfGifLoops, onCtrlCExit, preferLossless, serveUrl, server: reusedServer, logLevel, }) => {
+const internalRenderMedia = ({ proResProfile, crf, composition, serializedInputPropsWithCustomSchema, pixelFormat, codec, envVariables, frameRange, puppeteerInstance, outputLocation, onProgress, overwrite, onDownload, onBrowserLog, onStart, timeoutInMilliseconds, chromiumOptions, scale, browserExecutable, port, cancelSignal, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, audioCodec, concurrency, disallowParallelEncoding, everyNthFrame, imageFormat: provisionalImageFormat, indent, jpegQuality, numberOfGifLoops, onCtrlCExit, preferLossless, serveUrl, server: reusedServer, logLevel, serializedResolvedPropsWithCustomSchema, }) => {
     (0, jpeg_quality_1.validateJpegQuality)(jpegQuality);
     (0, crf_1.validateQualitySettings)({ crf, codec, videoBitrate });
     (0, validate_videobitrate_1.validateBitrate)(audioBitrate, 'audioBitrate');
@@ -94,11 +94,13 @@ const internalRenderMedia = ({ proResProfile, crf, composition, inputProps, pixe
         logLevel,
         tag: 'renderMedia()',
     }, 'Codec supports parallel rendering:', (0, can_use_parallel_encoding_1.canUseParallelEncoding)(codec));
-    logger_1.Log.verboseAdvanced({
-        indent,
-        logLevel,
-        tag: 'renderMedia()',
-    }, 'User disallowed parallel encoding:', Boolean(disallowParallelEncoding));
+    if (disallowParallelEncoding) {
+        logger_1.Log.verboseAdvanced({
+            indent,
+            logLevel,
+            tag: 'renderMedia()',
+        }, 'User disallowed parallel encoding.');
+    }
     if (parallelEncoding) {
         logger_1.Log.verboseAdvanced({
             indent,
@@ -248,7 +250,7 @@ const internalRenderMedia = ({ proResProfile, crf, composition, inputProps, pixe
                     callUpdate();
                     onStart === null || onStart === void 0 ? void 0 : onStart(data);
                 },
-                inputProps,
+                serializedInputPropsWithCustomSchema,
                 envVariables,
                 imageFormat,
                 jpegQuality,
@@ -288,6 +290,7 @@ const internalRenderMedia = ({ proResProfile, crf, composition, inputProps, pixe
                 logLevel,
                 indent,
                 server,
+                serializedResolvedPropsWithCustomSchema,
             });
             return renderFramesProc;
         })
@@ -424,7 +427,11 @@ const renderMedia = ({ proResProfile, crf, composition, inputProps, pixelFormat,
         ffmpegOverride: ffmpegOverride !== null && ffmpegOverride !== void 0 ? ffmpegOverride : undefined,
         frameRange: frameRange !== null && frameRange !== void 0 ? frameRange : null,
         imageFormat: imageFormat !== null && imageFormat !== void 0 ? imageFormat : image_format_1.DEFAULT_VIDEO_IMAGE_FORMAT,
-        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            indent: undefined,
+            staticBase: null,
+            data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        }).serializedString,
         jpegQuality: (_a = jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : quality) !== null && _a !== void 0 ? _a : jpeg_quality_1.DEFAULT_JPEG_QUALITY,
         muted: muted !== null && muted !== void 0 ? muted : false,
         numberOfGifLoops: numberOfGifLoops !== null && numberOfGifLoops !== void 0 ? numberOfGifLoops : null,
@@ -445,6 +452,11 @@ const renderMedia = ({ proResProfile, crf, composition, inputProps, pixelFormat,
         indent: false,
         onCtrlCExit: () => undefined,
         server: undefined,
+        serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            indent: undefined,
+            staticBase: null,
+            data: composition.props,
+        }).serializedString,
     });
 };
 exports.renderMedia = renderMedia;

package/dist/render-still.d.ts

@@ -13,7 +13,8 @@ type InternalRenderStillOptions = {
     composition: VideoConfig;
     output: string | null;
     frame: number;
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
+    serializedResolvedPropsWithCustomSchema: string;
     imageFormat: StillImageFormat;
     jpegQuality: number;
     puppeteerInstance: HeadlessBrowser | null;

package/dist/render-still.js

@@ -49,12 +49,11 @@ const take_frame_and_compose_1 = require("./take-frame-and-compose");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
 const validate_scale_1 = require("./validate-scale");
 const logger_1 = require("./logger");
-const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFAULT_STILL_IMAGE_FORMAT, serveUrl, puppeteerInstance, onError, inputProps, envVariables, output, frame = 0, overwrite, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale, proxyPort, cancelSignal, jpegQuality, onBrowserLog, compositor, sourceMapContext, downloadMap, logLevel, indent, }) => {
+const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFAULT_STILL_IMAGE_FORMAT, serveUrl, puppeteerInstance, onError, serializedInputPropsWithCustomSchema, envVariables, output, frame = 0, overwrite, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale, proxyPort, cancelSignal, jpegQuality, onBrowserLog, compositor, sourceMapContext, downloadMap, logLevel, indent, serializedResolvedPropsWithCustomSchema, }) => {
     remotion_1.Internals.validateDimension(composition.height, 'height', 'in the `config` object passed to `renderStill()`');
     remotion_1.Internals.validateDimension(composition.width, 'width', 'in the `config` object passed to `renderStill()`');
     remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderStill()`', false);
-    remotion_1.Internals.validateDurationInFrames({
-        durationInFrames: composition.durationInFrames,
+    remotion_1.Internals.validateDurationInFrames(composition.durationInFrames, {
         component: 'in the `config` object passed to `renderStill()`',
         allowFloats: false,
     });
@@ -135,7 +134,7 @@ const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFA
         page.on('console', logCallback);
     }
     await (0, set_props_and_env_1.setPropsAndEnv)({
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         envVariables,
         page,
         serveUrl,
@@ -145,6 +144,8 @@ const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFA
         retriesRemaining: 2,
         audioEnabled: false,
         videoEnabled: true,
+        indent,
+        logLevel,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         // eslint-disable-next-line max-params
@@ -152,7 +153,7 @@ const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFA
             window.remotion_setBundleMode({
                 type: 'composition',
                 compositionName: id,
-                props,
+                serializedResolvedPropsWithSchema: props,
                 compositionDurationInFrames: durationInFrames,
                 compositionFps: fps,
                 compositionHeight: height,
@@ -161,7 +162,7 @@ const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFA
         },
         args: [
             composition.id,
-            composition.props,
+            serializedResolvedPropsWithCustomSchema,
             composition.durationInFrames,
             composition.fps,
             composition.height,
@@ -170,7 +171,7 @@ const innerRenderStill = async ({ composition, imageFormat = image_format_1.DEFA
         frame: null,
         page,
     });
-    await (0, seek_to_frame_1.seekToFrame)({ frame: stillFrame, page });
+    await (0, seek_to_frame_1.seekToFrame)({ frame: stillFrame, page, composition: composition.id });
     const { buffer } = await (0, take_frame_and_compose_1.takeFrameAndCompose)({
         frame: stillFrame,
         freePage: page,
@@ -240,7 +241,7 @@ exports.internalRenderStill = internalRenderStill;
  * @see [Documentation](https://www.remotion.dev/docs/renderer/render-still)
  */
 const renderStill = (options) => {
-    var _a;
+    var _a, _b;
     const { composition, serveUrl, browserExecutable, cancelSignal, chromiumOptions, dumpBrowserLogs, envVariables, frame, imageFormat, inputProps, jpegQuality, onBrowserLog, onDownload, output, overwrite, port, puppeteerInstance, scale, timeoutInMilliseconds, verbose, quality, } = options;
     if (typeof jpegQuality !== 'undefined' && imageFormat !== 'jpeg') {
         throw new Error("You can only pass the `quality` option if `imageFormat` is 'jpeg'.");
@@ -257,7 +258,11 @@ const renderStill = (options) => {
         frame: frame !== null && frame !== void 0 ? frame : 0,
         imageFormat: imageFormat !== null && imageFormat !== void 0 ? imageFormat : image_format_1.DEFAULT_STILL_IMAGE_FORMAT,
         indent: false,
-        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            staticBase: null,
+            indent: undefined,
+            data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        }).serializedString,
         jpegQuality: (_a = jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : quality) !== null && _a !== void 0 ? _a : jpeg_quality_1.DEFAULT_JPEG_QUALITY,
         onBrowserLog: onBrowserLog !== null && onBrowserLog !== void 0 ? onBrowserLog : null,
         onDownload: onDownload !== null && onDownload !== void 0 ? onDownload : null,
@@ -270,6 +275,11 @@ const renderStill = (options) => {
         serveUrl,
         timeoutInMilliseconds: timeoutInMilliseconds !== null && timeoutInMilliseconds !== void 0 ? timeoutInMilliseconds : TimeoutSettings_1.DEFAULT_TIMEOUT,
         logLevel: verbose || dumpBrowserLogs ? 'verbose' : (0, logger_1.getLogLevel)(),
+        serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            indent: undefined,
+            staticBase: null,
+            data: (_b = composition.props) !== null && _b !== void 0 ? _b : {},
+        }).serializedString,
     });
 };
 exports.renderStill = renderStill;

package/dist/seek-to-frame.d.ts

@@ -1,6 +1,7 @@
 import type { Page } from './browser/BrowserPage';
 export declare const waitForReady: (page: Page) => Promise<unknown>;
-export declare const seekToFrame: ({ frame, page, }: {
+export declare const seekToFrame: ({ frame, page, composition, }: {
     frame: number;
+    composition: string;
     page: Page;
 }) => Promise<void>;

package/dist/seek-to-frame.js

@@ -48,13 +48,13 @@ const waitForReady = (page) => {
     ]);
 };
 exports.waitForReady = waitForReady;
-const seekToFrame = async ({ frame, page, }) => {
+const seekToFrame = async ({ frame, page, composition, }) => {
     await (0, exports.waitForReady)(page);
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
-        pageFunction: (f) => {
-            window.remotion_setFrame(f);
+        pageFunction: (f, c) => {
+            window.remotion_setFrame(f, c);
         },
-        args: [frame],
+        args: [frame, composition],
         frame,
         page,
     });

package/dist/select-composition.d.ts

@@ -1,4 +1,4 @@
-import type { VideoConfig } from 'remotion';
+import { type VideoConfig } from 'remotion';
 import type { BrowserExecutable } from './browser-executable';
 import type { BrowserLog } from './browser-log';
 import type { HeadlessBrowser } from './browser/Browser';
@@ -6,7 +6,7 @@ import type { ChromiumOptions } from './open-browser';
 import type { RemotionServer } from './prepare-server';
 import { type LogLevel } from './log-level';
 type InternalSelectCompositionsConfig = {
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
     envVariables: Record<string, string>;
     puppeteerInstance: HeadlessBrowser | undefined;
     onBrowserLog: null | ((log: BrowserLog) => void);
@@ -42,5 +42,5 @@ export declare const internalSelectComposition: (options: InternalSelectComposit
  * @description Gets a composition defined in a Remotion project based on a Webpack bundle.
  * @see [Documentation](https://www.remotion.dev/docs/renderer/select-composition)
  */
-export declare const selectComposition: (options: SelectCompositionOptions) => Promise<VideoConfig>;
+export declare const selectComposition: (options: SelectCompositionOptions) => Promise<Omit<VideoConfig, 'defaultProps'>>;
 export {};

package/dist/select-composition.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectComposition = exports.internalSelectComposition = void 0;
+const remotion_1 = require("remotion");
 const TimeoutSettings_1 = require("./browser/TimeoutSettings");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
 const find_closest_package_json_1 = require("./find-closest-package-json");
@@ -11,7 +12,7 @@ const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const seek_to_frame_1 = require("./seek-to-frame");
 const set_props_and_env_1 = require("./set-props-and-env");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
-const innerSelectComposition = async ({ page, onBrowserLog, inputProps, envVariables, serveUrl, timeoutInMilliseconds, port, id, indent, logLevel, }) => {
+const innerSelectComposition = async ({ page, onBrowserLog, serializedInputPropsWithCustomSchema, envVariables, serveUrl, timeoutInMilliseconds, port, id, indent, logLevel, }) => {
     if (onBrowserLog) {
         page.on('console', (log) => {
             onBrowserLog({
@@ -23,7 +24,7 @@ const innerSelectComposition = async ({ page, onBrowserLog, inputProps, envVaria
     }
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     await (0, set_props_and_env_1.setPropsAndEnv)({
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         envVariables,
         page,
         serveUrl,
@@ -33,6 +34,8 @@ const innerSelectComposition = async ({ page, onBrowserLog, inputProps, envVaria
         retriesRemaining: 2,
         audioEnabled: false,
         videoEnabled: false,
+        indent,
+        logLevel,
     });
     await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         page,
@@ -64,11 +67,24 @@ const innerSelectComposition = async ({ page, onBrowserLog, inputProps, envVaria
         tag: 'selectComposition()',
         logLevel,
     }, `calculateMetadata() took ${Date.now() - time}ms`);
-    return { metadata: result, propsSize: size };
+    const res = result;
+    const { width, durationInFrames, fps, height } = res;
+    return {
+        metadata: {
+            id,
+            width,
+            height,
+            fps,
+            durationInFrames,
+            props: remotion_1.Internals.deserializeJSONWithCustomFields(res.serializedResolvedPropsWithCustomSchema),
+            defaultProps: remotion_1.Internals.deserializeJSONWithCustomFields(res.serializedDefaultPropsWithCustomSchema),
+        },
+        propsSize: size,
+    };
 };
 const internalSelectComposition = async (options) => {
     const cleanup = [];
-    const { puppeteerInstance, browserExecutable, chromiumOptions, serveUrl: serveUrlOrWebpackUrl, logLevel, indent, port, envVariables, id, inputProps, onBrowserLog, server, timeoutInMilliseconds, } = options;
+    const { puppeteerInstance, browserExecutable, chromiumOptions, serveUrl: serveUrlOrWebpackUrl, logLevel, indent, port, envVariables, id, serializedInputPropsWithCustomSchema, onBrowserLog, server, timeoutInMilliseconds, } = options;
     const { page, cleanup: cleanupPage } = await (0, get_browser_instance_1.getPageAndCleanupFn)({
         passedInInstance: puppeteerInstance,
         browserExecutable,
@@ -108,7 +124,7 @@ const internalSelectComposition = async (options) => {
                 chromiumOptions,
                 envVariables,
                 id,
-                inputProps,
+                serializedInputPropsWithCustomSchema,
                 onBrowserLog,
                 timeoutInMilliseconds,
                 logLevel,
@@ -143,7 +159,11 @@ const selectComposition = async (options) => {
         browserExecutable: browserExecutable !== null && browserExecutable !== void 0 ? browserExecutable : null,
         chromiumOptions: chromiumOptions !== null && chromiumOptions !== void 0 ? chromiumOptions : {},
         envVariables: envVariables !== null && envVariables !== void 0 ? envVariables : {},
-        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            indent: undefined,
+            staticBase: null,
+            data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        }).serializedString,
         onBrowserLog: onBrowserLog !== null && onBrowserLog !== void 0 ? onBrowserLog : null,
         port: port !== null && port !== void 0 ? port : null,
         puppeteerInstance,

package/dist/serialize-props.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,36 @@
+"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;

package/dist/set-props-and-env.d.ts

@@ -1,6 +1,7 @@
 import type { Page } from './browser/BrowserPage';
+import type { LogLevel } from './log-level';
 type SetPropsAndEnv = {
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
     envVariables: Record<string, string> | undefined;
     page: Page;
     serveUrl: string;
@@ -10,6 +11,8 @@ type SetPropsAndEnv = {
     retriesRemaining: number;
     audioEnabled: boolean;
     videoEnabled: boolean;
+    indent: boolean;
+    logLevel: LogLevel;
 };
 export declare const setPropsAndEnv: (params: SetPropsAndEnv) => Promise<unknown>;
 export {};

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

@@ -7,7 +7,8 @@ const normalize_serve_url_1 = require("./normalize-serve-url");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const redirect_status_codes_1 = require("./redirect-status-codes");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
-const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, audioEnabled, videoEnabled, }) => {
+const logger_1 = require("./logger");
+const innerSetPropsAndEnv = async ({ serializedInputPropsWithCustomSchema, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, audioEnabled, videoEnabled, indent, logLevel, }) => {
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     const actualTimeout = timeoutInMilliseconds !== null && timeoutInMilliseconds !== void 0 ? timeoutInMilliseconds : TimeoutSettings_1.DEFAULT_TIMEOUT;
     page.setDefaultTimeout(actualTimeout);
@@ -16,14 +17,9 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
     await page.evaluateOnNewDocument((timeout) => {
         window.remotion_puppeteerTimeout = timeout;
     }, actualTimeout);
-    if (typeof inputProps === 'string') {
-        throw new Error('Input props should be an object, not a string.');
-    }
-    if (inputProps) {
-        await page.evaluateOnNewDocument((input) => {
-            window.remotion_inputProps = input;
-        }, JSON.stringify(inputProps));
-    }
+    await page.evaluateOnNewDocument((input) => {
+        window.remotion_inputProps = input;
+    }, serializedInputPropsWithCustomSchema);
     if (envVariables) {
         await page.evaluateOnNewDocument((input) => {
             window.remotion_envVariables = input;
@@ -57,7 +53,7 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         return innerSetPropsAndEnv({
             envVariables,
             initialFrame,
-            inputProps,
+            serializedInputPropsWithCustomSchema,
             page,
             proxyPort,
             retriesRemaining: retriesRemaining - 1,
@@ -65,12 +61,14 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
             timeoutInMilliseconds,
             audioEnabled,
             videoEnabled,
+            indent,
+            logLevel,
         });
     }
     if (!redirect_status_codes_1.redirectStatusCodes.every((code) => code !== status)) {
         throw new Error(`Error while getting compositions: Tried to go to ${urlToVisit} but the status code was ${status} instead of 200. Does the site you specified exist?`);
     }
-    const isRemotionFn = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+    const { value: isRemotionFn } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: () => {
             return window.getStaticCompositions;
         },
@@ -78,8 +76,23 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         frame: null,
         page,
     });
-    if (isRemotionFn === undefined) {
-        throw new Error(`Error while getting compositions: Tried to go to ${urlToVisit} and verify that it is a Remotion project by checking if window.getStaticCompositions is defined. However, the function was undefined, which indicates that this is not a valid Remotion project. Please check the URL you passed.`);
+    if (typeof isRemotionFn === 'undefined') {
+        const { value: body } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+            pageFunction: () => {
+                return document.body.innerHTML;
+            },
+            args: [],
+            frame: null,
+            page,
+        });
+        const errorMessage = [
+            `Error while getting compositions: Tried to go to ${urlToVisit} and verify that it is a Remotion project by checking if window.getStaticCompositions is defined.`,
+            'However, the function was undefined, which indicates that this is not a valid Remotion project. Please check the URL you passed.',
+            'The page loaded contained the following markup:',
+            body.substring(0, 500) + (body.length > 500 ? '...' : ''),
+            'Does this look like a foreign page? If so, try to stop this server.',
+        ].join('\n');
+        throw new Error(errorMessage);
     }
     const { value: siteVersion } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: () => {
@@ -97,16 +110,22 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         frame: null,
         page,
     });
-    const requiredVersion = '6';
+    const requiredVersion = '8';
     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, please bundle and deploy again.`);
     }
     if (remotionVersion !== version_1.VERSION && process.env.NODE_ENV !== 'test') {
         if (remotionVersion) {
-            console.warn(`The site was bundled with version ${remotionVersion} of @remotion/bundler, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
+            logger_1.Log.warnAdvanced({
+                indent,
+                logLevel,
+            }, `The site was bundled with version ${remotionVersion} of @remotion/bundler, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
         }
         else {
-            console.warn(`The site was bundled with an old version of Remotion, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
+            logger_1.Log.warnAdvanced({
+                indent,
+                logLevel,
+            }, `The site was bundled with an old version of Remotion, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
         }
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/renderer",
-  "version": "4.1.0-alpha5",
+  "version": "4.1.0-alpha8",
   "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.1.0-alpha5"
+    "remotion": "4.1.0-alpha8"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -42,13 +42,13 @@
     "zod": "^3.21.4"
   },
   "optionalDependencies": {
-    "@remotion/compositor-darwin-arm64": "4.1.0-alpha5",
-    "@remotion/compositor-darwin-x64": "4.1.0-alpha5",
-    "@remotion/compositor-linux-x64-gnu": "4.1.0-alpha5",
-    "@remotion/compositor-linux-arm64-gnu": "4.1.0-alpha5",
-    "@remotion/compositor-linux-arm64-musl": "4.1.0-alpha5",
-    "@remotion/compositor-linux-x64-musl": "4.1.0-alpha5",
-    "@remotion/compositor-win32-x64-msvc": "4.1.0-alpha5"
+    "@remotion/compositor-linux-arm64-musl": "4.1.0-alpha8",
+    "@remotion/compositor-darwin-x64": "4.1.0-alpha8",
+    "@remotion/compositor-linux-x64-musl": "4.1.0-alpha8",
+    "@remotion/compositor-linux-x64-gnu": "4.1.0-alpha8",
+    "@remotion/compositor-win32-x64-msvc": "4.1.0-alpha8",
+    "@remotion/compositor-darwin-arm64": "4.1.0-alpha8",
+    "@remotion/compositor-linux-arm64-gnu": "4.1.0-alpha8"
   },
   "keywords": [
     "remotion",