@remotion/bundler 4.0.0-4x.2 → 4.0.0-alpha.115

package/dist/homepage/homepage.js

@@ -26,10 +26,14 @@ const pre = {
 const AvailableCompositions = () => {
     const [comps, setComps] = (0, react_1.useState)(null);
     (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());
+                const newComps = window.getStaticCompositions();
+                setComps(newComps);
             }
             else {
                 timeout = setTimeout(check, 250);
@@ -50,13 +54,36 @@ const AvailableCompositions = () => {
         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);
                     }) })] }));
 };
+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 +1,46 @@
-export declare const indexHtml: (staticHash: string, baseDir: string, editorName: string | null) => string;
+import type { StaticFile } from 'remotion';
+export declare type RenderDefaults = {
+    quality: 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, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
+    staticHash: string;
+    baseDir: string;
+    editorName: string | null;
+    inputProps: object | null;
+    envVariables?: Record<string, string> | undefined;
+    remotionRoot: string;
+    previewServerCommand: string | null;
+    renderQueue: unknown | null;
+    numberOfAudioTags: number;
+    publicFiles: StaticFile[];
+    includeFavicon: boolean;
+    title: string;
+    renderDefaults: RenderDefaults | undefined;
+}) => string;

package/dist/index-html.js

@@ -5,25 +5,45 @@ 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 = (staticHash, baseDir, editorName) => `
+const indexHtml = ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, 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(process.cwd()))};</script>
-		<script>window.remotion_cwd = ${JSON.stringify(process.cwd())};</script>
+		<script>window.remotion_projectName = ${JSON.stringify(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_previewServerCommand = ${previewServerCommand ? JSON.stringify(previewServerCommand) : 'null'};</script>
+		${inputProps
+    ? `<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="menuportal-0"></div>
@@ -33,6 +53,7 @@ const indexHtml = (staticHash, baseDir, editorName) => `
 		<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,22 +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, inputProps, envVariables, maxTimelineTracks, entryPoints, }: {
+    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").WebpackOverrideFn;
-        onProgressUpdate?: ((f: number) => void) | undefined;
+        webpackOverride: import("./webpack-config").WebpackOverrideFn;
+        onProgress?: ((f: number) => void) | undefined;
         enableCaching?: boolean | undefined;
-        inputProps: object;
         envVariables: Record<string, string>;
         maxTimelineTracks: number;
+        keyboardShortcutsEnabled: boolean;
         entryPoints: string[];
-    }) => webpack.Configuration;
-    indexHtml: (staticHash: string, baseDir: string, editorName: string | null) => string;
-    cacheExists: (environment: "development" | "production", inputProps: object | null) => boolean;
-    clearCache: (environment: "development" | "production", inputProps: object | null) => Promise<void>;
+        remotionRoot: string;
+        poll: number | null;
+    }) => [string, webpack.Configuration];
+    indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
+        staticHash: string;
+        baseDir: string;
+        editorName: string | null;
+        inputProps: object | null;
+        envVariables?: Record<string, string> | undefined;
+        remotionRoot: string;
+        previewServerCommand: 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, onProgress, options, }: {
+        outDir: string;
+        entryPoint: string;
+        resolvedRemotionRoot: string;
+        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 } from './bundle';
+export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
+export { WebpackConfiguration, WebpackOverrideFn } from './webpack-config';
 export { webpack };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
 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");
@@ -13,6 +15,8 @@ exports.BundlerInternals = {
     indexHtml: index_html_1.indexHtml,
     cacheExists: webpack_cache_1.cacheExists,
     clearCache: webpack_cache_1.clearCache,
+    getConfig: bundle_1.getConfig,
+    readRecursively: read_recursively_1.readRecursively,
 };
-var bundle_1 = require("./bundle");
-Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_1.bundle; } });
+var bundle_2 = require("./bundle");
+Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_2.bundle; } });

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 fs_1 = __importStar(require("fs"));
+const path_1 = __importDefault(require("path"));
+const readRecursively = ({ folder, output = [], startPath, staticHash, limit, }) => {
+    const absFolder = path_1.default.join(startPath, folder);
+    if (!fs_1.default.existsSync(absFolder)) {
+        return [];
+    }
+    const files = fs_1.default.readdirSync(absFolder);
+    for (const file of files) {
+        if (output.length >= limit) {
+            break;
+        }
+        if (file.startsWith('.DS_Store')) {
+            continue;
+        }
+        const stat = (0, fs_1.statSync)(path_1.default.join(absFolder, file));
+        if (stat.isDirectory()) {
+            (0, exports.readRecursively)({
+                startPath,
+                folder: path_1.default.join(folder, file),
+                output,
+                staticHash,
+                limit,
+            });
+        }
+        else if (stat.isFile()) {
+            output.push({
+                name: path_1.default.join(folder, file),
+                lastModified: Math.floor(stat.mtimeMs),
+                sizeInBytes: stat.size,
+                src: staticHash + '/' + path_1.default.join(folder, file),
+            });
+        }
+        else if (stat.isSymbolicLink()) {
+            const realpath = fs_1.default.realpathSync(path_1.default.join(folder, file));
+            const realStat = fs_1.default.statSync(realpath);
+            if (realStat.isFile()) {
+                output.push({
+                    name: realpath,
+                    lastModified: Math.floor(realStat.mtimeMs),
+                    sizeInBytes: realStat.size,
+                    src: staticHash + '/' + 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);
@@ -34,6 +47,13 @@ const GetVideo = ({ state }) => {
                 throw new Error('Found no composition with the name ' + state.compositionName);
             }
             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 +95,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 +116,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,9 +174,19 @@ 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) => {
+        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 compositions.map((c) => {
             return {
                 defaultProps: c.defaultProps,
                 durationInFrames: c.durationInFrames,
@@ -167,6 +197,7 @@ if (typeof window !== 'undefined') {
             };
         });
     };
-    window.siteVersion = '3';
+    window.siteVersion = '4';
+    window.remotion_version = remotion_1.VERSION;
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/setup-environment.js

@@ -2,12 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const remotion_1 = require("remotion");
 remotion_1.Internals.setupEnvVariables();
-remotion_1.Internals.setupPuppeteerTimeout();
 remotion_1.Internals.CSSUtils.injectCSS(`
-  .css-reset * {
+  .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);
+  }
+
+  .__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;

package/dist/stringify-with-circular-references.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsonStringifyWithCircularReferences = void 0;
+const jsonStringifyWithCircularReferences = (circ) => {
+    let seen = [];
+    const val = JSON.stringify(circ, (_, value) => {
+        if (typeof value === 'object' && value !== null && seen) {
+            if (seen.includes(value)) {
+                return '[Circular]';
+            }
+            seen.push(value);
+        }
+        return value;
+    });
+    seen = null;
+    return val;
+};
+exports.jsonStringifyWithCircularReferences = jsonStringifyWithCircularReferences;

package/dist/test/validate-bundle.test.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const bundle_1 = require("../bundle");
+(0, vitest_1.test)('Should reject bad bundle options', () => {
+    // @ts-expect-error
+    (0, vitest_1.expect)(() => (0, bundle_1.bundle)()).rejects.toThrow(/bundle\(\) was called without arguments/);
+    // @ts-expect-error
+    (0, vitest_1.expect)(() => (0, bundle_1.bundle)({})).rejects.toThrow(/bundle\(\) was called without the `entryPoint` option/);
+});

package/dist/test/validate-public-dir.test.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const vitest_1 = require("vitest");
+const validate_public_dir_1 = require("../validate-public-dir");
+(0, vitest_1.describe)('validatePublicDir()', () => {
+    (0, vitest_1.test)('Should not allow root directory as public dir.', () => {
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(path_1.default.parse(process.cwd()).root)).toThrow(/which is the root directory. This is not allowed./);
+    });
+    (0, vitest_1.test)('Should not allow a path where the parent directory does not exist', () => {
+        const pathToPass = process.platform === 'win32' ? 'C:\\foo\\bar' : '/foo/bar';
+        const expectedParent = process.platform === 'win32' ? 'C:\\foo' : '/foo';
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(pathToPass)).toThrow(`The public directory was specified as "${pathToPass}", but this folder does not exist and the parent directory "${expectedParent}" does also not exist.`);
+    });
+    (0, vitest_1.test)('Should allow /foo as a path since that directory can be created', () => {
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(process.platform === 'win32' ? 'C:\\foo' : '/foo')).not.toThrow();
+    });
+});

package/dist/validate-public-dir.d.ts

@@ -0,0 +1 @@
+export declare const validatePublicDir: (p: string) => void;

package/dist/validate-public-dir.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePublicDir = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const validatePublicDir = (p) => {
+    const { root } = path_1.default.parse(process.cwd());
+    if (p === root) {
+        throw new Error(`The public directory was specified as "${p}", which is the root directory. This is not allowed.`);
+    }
+    try {
+        const stat = fs_1.default.lstatSync(p);
+        if (!stat.isDirectory()) {
+            throw new Error(`The public directory was specified as "${p}", and while this path exists on the filesystem, it is not a directory.`);
+        }
+    }
+    catch (e) {
+        // Path does not exist
+        // Check if the parent path exists
+        const parentPath = path_1.default.dirname(p);
+        const exists = fs_1.default.existsSync(parentPath);
+        if (!exists) {
+            throw new Error(`The public directory was specified as "${p}", but this folder does not exist and the parent directory "${parentPath}" does also not exist. Create at least the parent directory.`);
+        }
+    }
+};
+exports.validatePublicDir = validatePublicDir;

package/dist/webpack-cache.d.ts

@@ -1,4 +1,5 @@
 declare type Environment = 'development' | 'production';
+declare type CacheState = 'exists' | 'other-exists' | 'does-not-exist';
 declare global {
     namespace NodeJS {
         interface ProcessVersions {
@@ -6,7 +7,7 @@ declare global {
         }
     }
 }
-export declare const clearCache: (environment: Environment, inputProps: object | null) => Promise<void>;
-export declare const getWebpackCacheName: (environment: Environment, inputProps: object | null) => string;
-export declare const cacheExists: (environment: Environment, inputProps: object | null) => boolean;
+export declare const clearCache: (remotionRoot: string) => Promise<void>;
+export declare const getWebpackCacheName: (environment: Environment, hash: string) => string;
+export declare const cacheExists: (remotionRoot: string, environment: Environment, hash: string) => CacheState;
 export {};