@remotion/bundler 4.0.0-alpha.4 → 4.0.0-alpha11

package/dist/homepage/homepage.js

@@ -24,12 +24,23 @@ const pre = {
     overflowX: 'auto',
 };
 const AvailableCompositions = () => {
-    const [comps, setComps] = (0, react_1.useState)(null);
+    const [state, setComps] = (0, react_1.useState)({
+        type: 'not-initialized',
+    });
     (0, react_1.useEffect)(() => {
+        if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
+            return;
+        }
         let timeout = null;
         const check = () => {
-            if (window.ready === true) {
-                setComps(window.getStaticCompositions());
+            if (window.remotion_renderReady === true) {
+                setComps({ type: 'loading' });
+                window
+                    .getStaticCompositions()
+                    .then((newComps) => {
+                    setComps({ type: 'loaded', comps: newComps });
+                })
+                    .catch((err) => ({ type: 'error', error: err }));
             }
             else {
                 timeout = setTimeout(check, 250);
@@ -49,14 +60,46 @@ const AvailableCompositions = () => {
     if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
         return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: showComps, children: "Click here to see a list of available compositions." }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [comps === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }) : null, (0, jsx_runtime_1.jsx)("ul", { children: comps === null
-                    ? null
-                    : comps.map((c) => {
-                        return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
-                    }) })] }));
+    if (state.type === 'loading') {
+        return (0, jsx_runtime_1.jsx)("div", { children: state === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }) : null });
+    }
+    if (state.type === 'error') {
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Error loading compositions: ", state.error.stack] });
+    }
+    if (state.type === 'not-initialized') {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Not initialized" });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { children: state === null
+                ? []
+                : state.comps.map((c) => {
+                    return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
+                }) }) }));
+};
+const TestCORS = () => {
+    const [serveUrl, setServeUrl] = (0, react_1.useState)('');
+    const [result, setResult] = (0, react_1.useState)('');
+    const handleServeUrl = (0, react_1.useCallback)((e) => {
+        setServeUrl(e.target.value);
+    }, []);
+    const isCORSWorking = (0, react_1.useCallback)(async (e) => {
+        e.preventDefault();
+        try {
+            const response = await fetch(serveUrl, { mode: 'cors' });
+            if (response.ok) {
+                setResult(`CORS is enabled on this URL: ${serveUrl}`);
+            }
+            else {
+                setResult('URL does not support CORS - See DevTools console for more details');
+            }
+        }
+        catch (error) {
+            setResult('URL does not support CORS - See DevTools console for more details');
+        }
+    }, [serveUrl]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Quickly test if a URL is supported being loaded on origin", ' ', (0, jsx_runtime_1.jsx)("code", { children: window.location.origin }), ". Enter the URL of an asset below."] }), result ? (0, jsx_runtime_1.jsx)("p", { className: "result", children: result }) : null, (0, jsx_runtime_1.jsxs)("form", { onSubmit: isCORSWorking, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "serveurl", children: (0, jsx_runtime_1.jsx)("input", { placeholder: "Enter URL", type: "text", name: "serveurl", value: serveUrl, onChange: handleServeUrl }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Test CORS" })] })] }));
 };
 const Homepage = () => {
     const url = window.location.origin + window.location.pathname;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }), (0, jsx_runtime_1.jsx)(AvailableCompositions, {}), (0, jsx_runtime_1.jsx)("h2", { children: "How to render" }), "Locally: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion render ", url, " ", '<comp-name> <output-location>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "With Remotion Lambda: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion lambda render ", url, " ", '<comp-name>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also render still images, and use the Node.JS APIs", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getCompositions()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderMedia()" }), ",", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderMediaOnLambda()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderStill()" }), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderStillOnLambda()" }), " with this URL."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Visit", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/docs", target: "_blank", children: "remotion.dev/docs" }), ' ', "to read the documentation."] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }), (0, jsx_runtime_1.jsx)(AvailableCompositions, {}), (0, jsx_runtime_1.jsx)("h2", { children: "How to render" }), "Locally: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion render ", url, " ", '<comp-name> <output-location>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "With Remotion Lambda: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion lambda render ", url, " ", '<comp-name>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also render still images, and use the Node.JS APIs", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getCompositions()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderMedia()" }), ",", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderMediaOnLambda()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderStill()" }), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderStillOnLambda()" }), " with this URL."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Visit", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/docs", target: "_blank", children: "remotion.dev/docs" }), ' ', "to read the documentation."] }), (0, jsx_runtime_1.jsx)("h2", { children: "CORS testing tool" }), (0, jsx_runtime_1.jsx)(TestCORS, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }));
 };
 exports.Homepage = Homepage;

package/dist/index-html.d.ts

@@ -1,7 +1,46 @@
-export declare const indexHtml: ({ baseDir, editorName, inputProps, staticHash, remotionRoot, }: {
+import type { StaticFile } from 'remotion';
+export declare type RenderDefaults = {
+    jpegQuality: number;
+    scale: number;
+    logLevel: string;
+    codec: string;
+    concurrency: number;
+    minConcurrency: number;
+    muted: boolean;
+    maxConcurrency: number;
+    stillImageFormat: 'png' | 'jpeg' | 'webp' | 'pdf';
+    videoImageFormat: 'png' | 'jpeg' | 'none';
+    audioCodec: string | null;
+    enforceAudioTrack: boolean;
+    proResProfile: string;
+    pixelFormat: string;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    delayRenderTimeout: number;
+    disableWebSecurity: boolean;
+    openGlRenderer: string | null;
+    ignoreCertificateErrors: boolean;
+    headless: boolean;
+};
+declare global {
+    interface Window {
+        remotion_renderDefaults: RenderDefaults | undefined;
+    }
+}
+export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
     staticHash: string;
     baseDir: string;
     editorName: string | null;
     inputProps: object | null;
+    envVariables?: Record<string, string> | undefined;
     remotionRoot: string;
+    studioServerCommand: string | null;
+    renderQueue: unknown | null;
+    numberOfAudioTags: number;
+    publicFiles: StaticFile[];
+    includeFavicon: boolean;
+    title: string;
+    renderDefaults: RenderDefaults | undefined;
 }) => string;

package/dist/index-html.js

@@ -4,32 +4,49 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.indexHtml = void 0;
-const path_1 = __importDefault(require("path"));
-const indexHtml = ({ baseDir, editorName, inputProps, staticHash, remotionRoot, }) => `
+const node_path_1 = __importDefault(require("node:path"));
+const remotion_1 = require("remotion");
+const indexHtml = ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }) => `
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" />
-		<link rel="icon" type="image/png" href="/remotion.png" />
-		<title>Remotion Preview</title>
+${includeFavicon
+    ? `		<link rel="icon" type="image/png" href="/remotion.png" />\n`
+    : ''}
+		<title>${title}</title>
 	</head>
 	<body>
+    <script>window.remotion_numberOfAudioTags = ${numberOfAudioTags};</script>
     <script>window.remotion_staticBase = "${staticHash}";</script>
 		<div id="video-container"></div>
 		<div id="explainer-container"></div>
 		${editorName
     ? `<script>window.remotion_editorName = "${editorName}";</script>`
     : '<script>window.remotion_editorName = null;</script>'}
-		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(remotionRoot))};</script>
+		<script>window.remotion_projectName = ${JSON.stringify(node_path_1.default.basename(remotionRoot))};</script>
+		<script>window.remotion_renderDefaults = ${JSON.stringify(renderDefaults)};</script>
 		<script>window.remotion_cwd = ${JSON.stringify(remotionRoot)};</script>
+		<script>window.remotion_studioServerCommand = ${studioServerCommand ? JSON.stringify(studioServerCommand) : 'null'};</script>
 		${inputProps
-    ? `		<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>
+    ? `<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>
+			`
+    : ''}
+		${renderQueue
+    ? `<script>window.remotion_initialRenderQueue = ${JSON.stringify(renderQueue)};</script>
+			`
+    : ''}
+		${envVariables
+    ? `<script> window.process = {
+    						env: ${JSON.stringify(envVariables)}
+ 				};</script>
 			`
     : ''}
+		<script>window.remotion_staticFiles = ${JSON.stringify(publicFiles)}</script>
 		
-		<div id="container"></div>
+		<div id="${remotion_1.Internals.REMOTION_STUDIO_CONTAINER_ELEMENT}"></div>
 		<div id="menuportal-0"></div>
 		<div id="menuportal-1"></div>
 		<div id="menuportal-2"></div>
@@ -37,6 +54,7 @@ const indexHtml = ({ baseDir, editorName, inputProps, staticHash, remotionRoot,
 		<div id="menuportal-4"></div>
 		<div id="menuportal-5"></div>
 		<div id="remotion-error-overlay"></div>
+		<div id="server-disconnected-overlay"></div>
 		<script src="${baseDir}bundle.js"></script>
 	</body>
 </html>

package/dist/index.d.ts

@@ -2,36 +2,53 @@ import esbuild = require('esbuild');
 import webpack = require('webpack');
 export declare const BundlerInternals: {
     esbuild: typeof esbuild;
-    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, }: {
+    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }: {
         entry: string;
         userDefinedComponent: string;
-        outDir: string;
+        outDir: string | null;
         environment: "development" | "production";
-        webpackOverride: import("remotion/dist/internals").WebpackOverrideFn;
-        onProgressUpdate?: ((f: number) => void) | undefined;
+        webpackOverride: import("./webpack-config").WebpackOverrideFn;
+        onProgress?: ((f: number) => void) | undefined;
         enableCaching?: boolean | undefined;
         envVariables: Record<string, string>;
         maxTimelineTracks: number;
+        keyboardShortcutsEnabled: boolean;
         entryPoints: string[];
         remotionRoot: string;
+        poll: number | null;
     }) => [string, webpack.Configuration];
-    indexHtml: ({ baseDir, editorName, inputProps, staticHash, remotionRoot, }: {
+    indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
         staticHash: string;
         baseDir: string;
         editorName: string | null;
         inputProps: object | null;
+        envVariables?: Record<string, string> | undefined;
         remotionRoot: string;
+        studioServerCommand: string | null;
+        renderQueue: unknown;
+        numberOfAudioTags: number;
+        publicFiles: import("remotion").StaticFile[];
+        includeFavicon: boolean;
+        title: string;
+        renderDefaults: import("./index-html").RenderDefaults | undefined;
     }) => string;
     cacheExists: (remotionRoot: string, environment: "development" | "production", hash: string) => "exists" | "other-exists" | "does-not-exist";
-    clearCache: (remotionRoot: string) => Promise<void>;
-    getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }: {
+    clearCache: (remotionRoot: string, env: "development" | "production") => Promise<void>;
+    getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, }: {
         outDir: string;
         entryPoint: string;
         resolvedRemotionRoot: string;
-        onProgressUpdate?: ((progress: number) => void) | undefined;
-        options?: import("./bundle").BundleOptions | undefined;
+        onProgress?: ((progress: number) => void) | undefined;
+        options?: import("./bundle").LegacyBundleOptions | undefined;
     }) => [string, webpack.Configuration];
+    readRecursively: ({ folder, output, startPath, staticHash, limit, }: {
+        folder: string;
+        startPath: string;
+        output?: import("remotion").StaticFile[] | undefined;
+        staticHash: string;
+        limit: number;
+    }) => import("remotion").StaticFile[];
 };
-export { bundle, BundleOptions } from './bundle';
+export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
+export { WebpackConfiguration, WebpackOverrideFn } from './webpack-config';
 export { webpack };
-export declare type WebpackConfiguration = webpack.Configuration;

package/dist/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = exports.bundle = exports.BundlerInternals = void 0;
 const bundle_1 = require("./bundle");
 const index_html_1 = require("./index-html");
+const read_recursively_1 = require("./read-recursively");
 const webpack_cache_1 = require("./webpack-cache");
 const webpack_config_1 = require("./webpack-config");
 const esbuild = require("esbuild");
@@ -15,6 +16,7 @@ exports.BundlerInternals = {
     cacheExists: webpack_cache_1.cacheExists,
     clearCache: webpack_cache_1.clearCache,
     getConfig: bundle_1.getConfig,
+    readRecursively: read_recursively_1.readRecursively,
 };
 var bundle_2 = require("./bundle");
 Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_2.bundle; } });

package/dist/optional-depdendencies.d.ts

@@ -0,0 +1,5 @@
+import type { Compiler } from 'webpack';
+export declare class AllowOptionalDependenciesPlugin {
+    filter(error: Error): boolean;
+    apply(compiler: Compiler): void;
+}

package/dist/optional-depdendencies.js

@@ -0,0 +1,27 @@
+"use strict";
+// When Webpack cannot resolve these dependencies, it will not print an error message.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllowOptionalDependenciesPlugin = void 0;
+const OPTIONAL_DEPENDENCIES = [
+    'zod',
+    '@remotion/zod-types',
+    'react-native-reanimated',
+    'react-native-reanimated/package.json',
+];
+class AllowOptionalDependenciesPlugin {
+    filter(error) {
+        for (const dependency of OPTIONAL_DEPENDENCIES) {
+            if (error.message.includes(`Can't resolve '${dependency}'`)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    apply(compiler) {
+        compiler.hooks.afterEmit.tap('AllowOptionalDependenciesPlugin', (compilation) => {
+            compilation.errors = compilation.errors.filter(this.filter);
+            compilation.warnings = compilation.warnings.filter(this.filter);
+        });
+    }
+}
+exports.AllowOptionalDependenciesPlugin = AllowOptionalDependenciesPlugin;

package/dist/optional-dependencies.d.ts

@@ -0,0 +1,5 @@
+import type { Compiler } from 'webpack';
+export declare class AllowOptionalDependenciesPlugin {
+    filter(error: Error): boolean;
+    apply(compiler: Compiler): void;
+}

package/dist/optional-dependencies.js

@@ -0,0 +1,27 @@
+"use strict";
+// When Webpack cannot resolve these dependencies, it will not print an error message.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllowOptionalDependenciesPlugin = void 0;
+const OPTIONAL_DEPENDENCIES = [
+    'zod',
+    '@remotion/zod-types',
+    'react-native-reanimated',
+    'react-native-reanimated/package.json',
+];
+class AllowOptionalDependenciesPlugin {
+    filter(error) {
+        for (const dependency of OPTIONAL_DEPENDENCIES) {
+            if (error.message.includes(`Can't resolve '${dependency}'`)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    apply(compiler) {
+        compiler.hooks.afterEmit.tap('AllowOptionalDependenciesPlugin', (compilation) => {
+            compilation.errors = compilation.errors.filter(this.filter);
+            compilation.warnings = compilation.warnings.filter(this.filter);
+        });
+    }
+}
+exports.AllowOptionalDependenciesPlugin = AllowOptionalDependenciesPlugin;

package/dist/read-recursively.d.ts

@@ -0,0 +1,8 @@
+import type { StaticFile } from 'remotion';
+export declare const readRecursively: ({ folder, output, startPath, staticHash, limit, }: {
+    folder: string;
+    startPath: string;
+    output?: StaticFile[] | undefined;
+    staticHash: string;
+    limit: number;
+}) => StaticFile[];

package/dist/read-recursively.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readRecursively = void 0;
+const node_fs_1 = __importStar(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const readRecursively = ({ folder, output = [], startPath, staticHash, limit, }) => {
+    const absFolder = node_path_1.default.join(startPath, folder);
+    if (!node_fs_1.default.existsSync(absFolder)) {
+        return [];
+    }
+    const files = node_fs_1.default.readdirSync(absFolder);
+    for (const file of files) {
+        if (output.length >= limit) {
+            break;
+        }
+        if (file.startsWith('.DS_Store')) {
+            continue;
+        }
+        const stat = (0, node_fs_1.statSync)(node_path_1.default.join(absFolder, file));
+        if (stat.isDirectory()) {
+            (0, exports.readRecursively)({
+                startPath,
+                folder: node_path_1.default.join(folder, file),
+                output,
+                staticHash,
+                limit,
+            });
+        }
+        else if (stat.isFile()) {
+            output.push({
+                name: node_path_1.default.join(folder, file),
+                lastModified: Math.floor(stat.mtimeMs),
+                sizeInBytes: stat.size,
+                src: staticHash + '/' + encodeURIComponent(node_path_1.default.join(folder, file)),
+            });
+        }
+        else if (stat.isSymbolicLink()) {
+            const realpath = node_fs_1.default.realpathSync(node_path_1.default.join(folder, file));
+            const realStat = node_fs_1.default.statSync(realpath);
+            if (realStat.isFile()) {
+                output.push({
+                    name: realpath,
+                    lastModified: Math.floor(realStat.mtimeMs),
+                    sizeInBytes: realStat.size,
+                    src: staticHash + '/' + encodeURIComponent(realpath),
+                });
+            }
+        }
+    }
+    return output.sort((a, b) => a.name.localeCompare(b.name));
+};
+exports.readRecursively = readRecursively;

package/dist/renderEntry.js

@@ -15,6 +15,19 @@ const remotion_1 = require("remotion");
 const bundle_mode_1 = require("./bundle-mode");
 const homepage_1 = require("./homepage/homepage");
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#fff'));
+const getCanSerializeDefaultProps = (object) => {
+    try {
+        const str = JSON.stringify(object);
+        // 256MB is the theoretical limit, making it throw if over 90% of that is reached.
+        return str.length < 256 * 1024 * 1024 * 0.9;
+    }
+    catch (err) {
+        if (err.message.includes('Invalid string length')) {
+            return false;
+        }
+        throw err;
+    }
+};
 const GetVideo = ({ state }) => {
     const video = remotion_1.Internals.useVideo();
     const compositions = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -31,9 +44,18 @@ const GetVideo = ({ state }) => {
         if (!video && compositions.compositions.length > 0) {
             const foundComposition = compositions.compositions.find((c) => c.id === state.compositionName);
             if (!foundComposition) {
-                throw new Error('Found no composition with the name ' + state.compositionName);
+                throw new Error(`Found no composition with the name ${state.compositionName}. The following compositions were found instead: ${compositions.compositions
+                    .map((c) => c.id)
+                    .join(', ')}. All compositions must have their ID calculated deterministically and must be mounted at the same time.`);
             }
             compositions.setCurrentComposition((_a = foundComposition === null || foundComposition === void 0 ? void 0 : foundComposition.id) !== null && _a !== void 0 ? _a : null);
+            compositions.setCurrentCompositionMetadata({
+                defaultProps: state.compositionDefaultProps,
+                durationInFrames: state.compositionDurationInFrames,
+                fps: state.compositionFps,
+                height: state.compositionHeight,
+                width: state.compositionWidth,
+            });
         }
     }, [compositions, compositions.compositions, state, video]);
     (0, react_1.useEffect)(() => {
@@ -75,7 +97,7 @@ let cleanupVideoContainer = () => {
 let cleanupExplainerContainer = () => {
     explainerContainer.innerHTML = '';
 };
-const waitForRootHandle = (0, remotion_1.delayRender)('Loading root component');
+const waitForRootHandle = (0, remotion_1.delayRender)('Loading root component - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout');
 const WaitForRoot = () => {
     const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
     (0, react_1.useEffect)(() => {
@@ -96,7 +118,7 @@ const WaitForRoot = () => {
 const renderContent = () => {
     const bundleMode = (0, bundle_mode_1.getBundleMode)();
     if (bundleMode.type === 'composition' || bundleMode.type === 'evaluation') {
-        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { children: [(0, jsx_runtime_1.jsx)(WaitForRoot, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
+        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: 0, children: [(0, jsx_runtime_1.jsx)(WaitForRoot, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
         if (client_1.default.createRoot) {
             const root = client_1.default.createRoot(videoContainer);
             root.render(markup);
@@ -154,19 +176,43 @@ if (typeof window !== 'undefined') {
         if (!remotion_1.Internals.compositionsRef.current) {
             throw new Error('Unexpectedly did not have a CompositionManager');
         }
-        return remotion_1.Internals.compositionsRef.current
-            .getCompositions()
-            .map((c) => {
-            return {
-                defaultProps: c.defaultProps,
-                durationInFrames: c.durationInFrames,
-                fps: c.fps,
-                height: c.height,
-                id: c.id,
-                width: c.width,
-            };
-        });
+        const compositions = remotion_1.Internals.compositionsRef.current.getCompositions();
+        const canSerializeDefaultProps = getCanSerializeDefaultProps(compositions);
+        if (!canSerializeDefaultProps) {
+            console.warn('defaultProps are too big to serialize - trying to find the problematic composition...');
+            for (const comp of compositions) {
+                if (!getCanSerializeDefaultProps(comp)) {
+                    throw new Error(`defaultProps too big - could not serialize - the defaultProps of composition with ID ${comp.id} - the object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops`);
+                }
+            }
+            console.warn('Could not single out a problematic composition -  The composition list as a whole is too big to serialize.');
+            throw new Error('defaultProps too big - Could not serialize - an object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops');
+        }
+        return Promise.all(compositions.map((c) => {
+            return Promise.resolve(remotion_1.Internals.resolveVideoConfig({
+                composition: c,
+                editorProps: {},
+                signal: new AbortController().signal,
+            }));
+        }));
+    };
+    window.calculateComposition = (compId) => {
+        if (!remotion_1.Internals.compositionsRef.current) {
+            throw new Error('Unexpectedly did not have a CompositionManager');
+        }
+        const compositions = remotion_1.Internals.compositionsRef.current.getCompositions();
+        const selectedComp = compositions.find((c) => c.id === compId);
+        if (!selectedComp) {
+            throw new Error(`Could not find composition with ID ${compId}`);
+        }
+        const abortController = new AbortController();
+        return Promise.resolve(remotion_1.Internals.resolveVideoConfig({
+            composition: selectedComp,
+            editorProps: {},
+            signal: abortController.signal,
+        }));
     };
-    window.siteVersion = '3';
+    window.siteVersion = '5';
+    window.remotion_version = remotion_1.VERSION;
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/setup-environment.js

@@ -5,10 +5,91 @@ remotion_1.Internals.setupEnvVariables();
 remotion_1.Internals.CSSUtils.injectCSS(`
   .css-reset, .css-reset * {
     font-size: 16px;
-    line-height: 1;
+    line-height: 1.5;
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     background: transparent;
     box-sizing: border-box;
   }
+
+  .algolia-docsearch-suggestion--highlight {
+    font-size: 15px;
+    line-height: 1.25;
+  }
+
+  .__remotion-info-button-container code {
+    font-family: monospace;
+    font-size: 14px;
+    color: #0584f2
+  }
+
+  .__remotion-vertical-scrollbar::-webkit-scrollbar {
+      width: 6px;
+  }
+  .__remotion-vertical-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.0);
+  }
+  .__remotion-vertical-scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+  .__remotion-vertical-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 1);
+  }
+
+
+  .__remotion-horizontal-scrollbar::-webkit-scrollbar {
+    height: 6px;
+  }
+  .__remotion-horizontal-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.0);
+  }
+  .__remotion-horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+  .__remotion-horizontal-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 1);
+  }
+
+
+  @-moz-document url-prefix() {
+    .__remotion-vertical-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0);
+    }
+
+    .__remotion-vertical-scrollbar:hover {
+      scrollbar-color: rgba(0, 0, 0, 1) rgba(0, 0, 0, 0);
+    }
+
+    .__remotion-horizontal-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0);
+    }
+
+    .__remotion-horizontal-scrollbar:hover {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 1) rgba(0, 0, 0, 0);
+    }
+  }
+
+
+  .__remotion-timeline-slider {
+    appearance: none;
+    width: 100px;
+    border-radius: 3px;
+    height: 6px;
+    background-color: rgba(255, 255, 255, 0.1);
+    accent-color: #ffffff;
+  }
+  
+  .__remotion-timeline-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    appearance: none;
+  }
+
+
+
 `);

package/dist/stringify-with-circular-references.d.ts

@@ -0,0 +1 @@
+export declare const jsonStringifyWithCircularReferences: (circ: unknown) => string;