@remotion/bundler 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/bundle.d.ts

@@ -1,5 +1,5 @@
-import type { WebpackOverrideFn } from 'remotion';
 import webpack from 'webpack';
+import type { WebpackOverrideFn } from './webpack-config';
 export declare type LegacyBundleOptions = {
     webpackOverride?: WebpackOverrideFn;
     outDir?: string;
@@ -21,6 +21,7 @@ export declare type BundleOptions = {
     entryPoint: string;
     onProgress?: (progress: number) => void;
     ignoreRegisterRootWarning?: boolean;
+    onDirectoryCreated?: (dir: string) => void;
 } & LegacyBundleOptions;
 declare type Arguments = [options: BundleOptions] | [
     entryPoint: string,

package/dist/bundle.js

@@ -68,7 +68,7 @@ const getConfig = ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, optio
         webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : ((f) => f),
         onProgress,
         enableCaching: (_b = options === null || options === void 0 ? void 0 : options.enableCaching) !== null && _b !== void 0 ? _b : true,
-        maxTimelineTracks: 15,
+        maxTimelineTracks: 90,
         // For production, the variables are set dynamically
         envVariables: {},
         entryPoints: [],
@@ -125,7 +125,7 @@ const validateEntryPoint = async (entryPoint) => {
  * @see [Documentation](https://www.remotion.dev/docs/bundle)
  */
 async function bundle(...args) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const actualArgs = convertArgumentsIntoOptions(args);
     const entryPoint = path_1.default.resolve(process.cwd(), actualArgs.entryPoint);
     const resolvedRemotionRoot = (_b = (_a = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.rootDir) !== null && _a !== void 0 ? _a : findClosestPackageJsonFolder(entryPoint)) !== null && _b !== void 0 ? _b : process.cwd();
@@ -133,6 +133,7 @@ async function bundle(...args) {
         await validateEntryPoint(entryPoint);
     }
     const outDir = await prepareOutDir((_c = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.outDir) !== null && _c !== void 0 ? _c : null);
+    (_d = actualArgs.onDirectoryCreated) === null || _d === void 0 ? void 0 : _d.call(actualArgs, outDir);
     // The config might use an override which might use
     // `process.cwd()`. The context should always be the Remotion root.
     // This is not supported in worker threads (used for tests)
@@ -159,7 +160,7 @@ async function bundle(...args) {
     if (errors !== undefined && errors.length > 0) {
         throw new Error(errors[0].message + '\n' + errors[0].details);
     }
-    const baseDir = (_d = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.publicPath) !== null && _d !== void 0 ? _d : '/';
+    const baseDir = (_e = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.publicPath) !== null && _e !== void 0 ? _e : '/';
     const staticHash = '/' +
         [trimTrailingSlash(trimLeadingSlash(baseDir)), 'public']
             .filter(Boolean)
@@ -187,6 +188,7 @@ async function bundle(...args) {
             dest: to,
             onSymlinkDetected: showSymlinkWarning,
             onProgress: (prog) => { var _a; return (_a = options.onPublicDirCopyProgress) === null || _a === void 0 ? void 0 : _a.call(options, prog); },
+            copied: 0,
         });
     }
     const html = (0, index_html_1.indexHtml)({
@@ -196,6 +198,7 @@ async function bundle(...args) {
         inputProps: null,
         remotionRoot: resolvedRemotionRoot,
         previewServerCommand: null,
+        renderQueue: null,
         numberOfAudioTags: 0,
         publicFiles: (0, read_recursively_1.readRecursively)({
             folder: '.',
@@ -205,6 +208,7 @@ async function bundle(...args) {
         }),
         includeFavicon: false,
         title: 'Remotion Bundle',
+        renderDefaults: undefined,
     });
     fs_1.default.writeFileSync(path_1.default.join(outDir, 'index.html'), html);
     return outDir;

package/dist/copy-dir.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="node" />
 import fs from 'fs';
-export declare function copyDir({ src, dest, onSymlinkDetected, onProgress, }: {
+export declare function copyDir({ src, dest, onSymlinkDetected, onProgress, copied, }: {
     src: string;
     dest: string;
     onSymlinkDetected: (entry: fs.Dirent, dir: string) => void;
     onProgress: (bytes: number) => void;
+    copied: number;
 }): Promise<void>;

package/dist/copy-dir.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.copyDir = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-async function copyDir({ src, dest, onSymlinkDetected, onProgress, }) {
+async function copyDir({ src, dest, onSymlinkDetected, onProgress, copied = 0, }) {
     await fs_1.default.promises.mkdir(dest, { recursive: true });
     const entries = await fs_1.default.promises.readdir(src, { withFileTypes: true });
-    let copied = 0;
     for (const entry of entries) {
         const srcPath = path_1.default.join(src, entry.name);
         const destPath = path_1.default.join(dest, entry.name);
@@ -19,6 +18,7 @@ async function copyDir({ src, dest, onSymlinkDetected, onProgress, }) {
                 dest: destPath,
                 onSymlinkDetected,
                 onProgress,
+                copied,
             });
         }
         else if (entry.isSymbolicLink()) {

package/dist/index-html.d.ts

@@ -1,5 +1,35 @@
 import type { StaticFile } from 'remotion';
-export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, numberOfAudioTags, publicFiles, includeFavicon, title, }: {
+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, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
     staticHash: string;
     baseDir: string;
     editorName: string | null;
@@ -7,8 +37,10 @@ export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables
     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,7 +5,7 @@ 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, envVariables, staticHash, remotionRoot, previewServerCommand, numberOfAudioTags, publicFiles, includeFavicon, title, }) => `
+const indexHtml = ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }) => `
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -26,11 +26,16 @@ ${includeFavicon
     ? `<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_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 = {

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export declare const BundlerInternals: {
         userDefinedComponent: string;
         outDir: string | null;
         environment: "development" | "production";
-        webpackOverride: import("remotion").WebpackOverrideFn;
+        webpackOverride: import("./webpack-config").WebpackOverrideFn;
         onProgress?: ((f: number) => void) | undefined;
         enableCaching?: boolean | undefined;
         envVariables: Record<string, string>;
@@ -17,7 +17,7 @@ export declare const BundlerInternals: {
         remotionRoot: string;
         poll: number | null;
     }) => [string, webpack.Configuration];
-    indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, numberOfAudioTags, publicFiles, includeFavicon, title, }: {
+    indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
         staticHash: string;
         baseDir: string;
         editorName: string | null;
@@ -25,10 +25,12 @@ export declare const BundlerInternals: {
         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>;
@@ -47,6 +49,6 @@ export declare const BundlerInternals: {
         limit: number;
     }) => import("remotion").StaticFile[];
 };
-export { WebpackConfiguration, WebpackOverrideFn } from 'remotion';
 export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
+export { WebpackConfiguration, WebpackOverrideFn } from './webpack-config';
 export { webpack };

package/dist/setup-environment.js

@@ -16,4 +16,54 @@ remotion_1.Internals.CSSUtils.injectCSS(`
     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/webpack-cache.js

@@ -40,8 +40,7 @@ const remotionCacheLocation = (remotionRoot, environment, hash) => {
     return path_1.default.join(getWebpackCacheDir(remotionRoot), (0, exports.getWebpackCacheName)(environment, hash));
 };
 const clearCache = (remotionRoot) => {
-    var _a;
-    return ((_a = fs_1.default.promises.rm) !== null && _a !== void 0 ? _a : fs_1.default.promises.rmdir)(getWebpackCacheDir(remotionRoot), {
+    return fs_1.default.promises.rm(getWebpackCacheDir(remotionRoot), {
         recursive: true,
     });
 };

package/dist/webpack-config.d.ts

@@ -1,4 +1,6 @@
-import type { WebpackConfiguration, WebpackOverrideFn } from 'remotion';
+import type { Configuration } from 'webpack';
+export declare type WebpackConfiguration = Configuration;
+export declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
 export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }: {
     entry: string;
     userDefinedComponent: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/bundler",
-  "version": "4.0.0-alpha4",
+  "version": "4.0.0-alpha5",
   "description": "Bundler for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "css-loader": "5.2.7",
     "esbuild": "0.16.12",
     "react-refresh": "0.9.0",
-    "remotion": "4.0.0-alpha4",
+    "remotion": "4.0.0-alpha5",
     "style-loader": "2.0.0",
     "webpack": "5.76.1"
   },