@remotion/cli 4.0.18 → 4.0.20

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

package/dist/editor/components/AssetSelector.js

@@ -29,6 +29,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const event_source_1 = require("../../event-source");
 const colors_1 = require("../helpers/colors");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
@@ -54,9 +55,8 @@ const label = {
     fontSize: 14,
 };
 const list = {
+    height: '100%',
     overflowY: 'auto',
-    paddingTop: 4,
-    paddingBottom: 4,
 };
 const AssetSelector = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
@@ -66,6 +66,9 @@ const AssetSelector = () => {
             publicFolderExists: window.remotion_publicFolderExists,
         };
     });
+    const assetTree = (0, react_1.useMemo)(() => {
+        return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles);
+    }, [staticFiles]);
     (0, react_1.useEffect)(() => {
         const onUpdate = () => {
             setState({
@@ -78,8 +81,6 @@ const AssetSelector = () => {
             unsub();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: staticFiles.length === 0 ? (publicFolderExists ? ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, place a file in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " folder of your project."] }) })) : ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, create a folder called", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " in the root of your project and place a file in it."] }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: staticFiles.map((file) => {
-                return ((0, jsx_runtime_1.jsx)(AssetSelectorItem_1.AssetSelectorItem, { item: file, tabIndex: tabIndex }, `${file.src}`));
-            }) })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: staticFiles.length === 0 ? (publicFolderExists ? ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, place a file in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " folder of your project."] }) })) : ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, create a folder called", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " in the root of your project and place a file in it."] }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: (0, jsx_runtime_1.jsx)(AssetSelectorItem_1.FolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex }) })) }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/editor/components/AssetSelectorItem.d.ts

@@ -1,6 +1,22 @@
 import React from 'react';
 import type { StaticFile } from 'remotion';
+import type { AssetFolder, Structure } from '../helpers/create-folder-tree';
+export declare const AssetFolderItem: React.FC<{
+    item: AssetFolder;
+    tabIndex: number;
+    level: number;
+    parentFolder: string;
+}>;
+export declare const FolderTree: React.FC<{
+    item: Structure;
+    name: string | null;
+    parentFolder: string | null;
+    level: number;
+    tabIndex: number;
+}>;
 export declare const AssetSelectorItem: React.FC<{
-    item: StaticFile;
+    item: StaticFile | AssetFolder;
     tabIndex: number;
+    level: number;
+    parentFolder: string;
 }>;

package/dist/editor/components/AssetSelectorItem.js

@@ -23,9 +23,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetSelectorItem = void 0;
+exports.AssetSelectorItem = exports.FolderTree = exports.AssetFolderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const truthy_1 = require("../../truthy");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const clipboard_1 = require("../icons/clipboard");
@@ -36,6 +37,11 @@ const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const ASSET_ITEM_HEIGHT = 32;
+const iconStyle = {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
+};
 const itemStyle = {
     paddingRight: 10,
     paddingTop: 6,
@@ -62,30 +68,66 @@ const labelStyle = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
 };
-const iconStyle = {
-    width: 18,
-    height: 18,
-    flexShrink: 0,
-};
 const revealIconStyle = {
     height: 12,
     color: 'currentColor',
 };
-const AssetSelectorItem = ({ item, tabIndex }) => {
+const AssetFolderItem = ({ tabIndex, item, level, parentFolder }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const style = (0, react_1.useMemo)(() => {
+    const folderStyle = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
-            paddingLeft: 12,
+            paddingLeft: 4 + level * 8,
+            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+        };
+    }, [hovered, level]);
+    const label = (0, react_1.useMemo)(() => {
+        return {
+            ...labelStyle,
             color: colors_1.LIGHT_TEXT,
         };
     }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        setExpanded((e) => !e);
+    }, []);
+    const Icon = expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Icon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.name })] }) }), expanded ? ((0, jsx_runtime_1.jsx)(exports.FolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex }, item.name)) : null] }));
+};
+exports.AssetFolderItem = AssetFolderItem;
+const FolderTree = ({ item, level, name, parentFolder, tabIndex }) => {
+    const combinedParents = (0, react_1.useMemo)(() => {
+        return [parentFolder, name].filter(truthy_1.truthy).join('/');
+    }, [name, parentFolder]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [item.folders.map((folder) => {
+                return ((0, jsx_runtime_1.jsx)(exports.AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents }, folder.name));
+            }), item.files.map((file) => {
+                return ((0, jsx_runtime_1.jsx)(exports.AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents }, file.src));
+            })] }));
+};
+exports.FolderTree = FolderTree;
+const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...itemStyle,
+            color: colors_1.LIGHT_TEXT,
+            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+            paddingLeft: 12 + level * 8,
+        };
+    }, [hovered, level]);
     const label = (0, react_1.useMemo)(() => {
         return {
             ...labelStyle,
@@ -93,18 +135,22 @@ const AssetSelectorItem = ({ item, tabIndex }) => {
         };
     }, []);
     const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIconSolid, { style: revealIconStyle, color: color });
+        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
     }, []);
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
     }, []);
     const revealInExplorer = react_1.default.useCallback(() => {
         (0, actions_1.openInFileExplorer)({
-            directory: window.remotion_publicFolderExists + '/' + item.name,
+            directory: window.remotion_publicFolderExists +
+                '/' +
+                parentFolder +
+                '/' +
+                item.name,
         }).catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
         });
-    }, [item.name]);
+    }, [item.name, parentFolder]);
     const copyToClipboard = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(`staticFile("${item.name}")`)
             .then(() => {

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -44,6 +44,9 @@ const ServerDisconnected = () => {
     if (pageIsGoingToReload) {
         return null;
     }
+    const base64Favicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=';
+    const fav = document.getElementById('__remotion_favicon');
+    fav.setAttribute('href', base64Favicon);
     return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
 };
 exports.ServerDisconnected = ServerDisconnected;

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -1,5 +1,14 @@
-import type { AnyComposition, TFolder } from 'remotion';
+import type { AnyComposition, StaticFile, TFolder } from 'remotion';
 import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
+export type AssetFolder = {
+    name: string;
+    items: Structure;
+};
+export type Structure = {
+    files: StaticFile[];
+    folders: AssetFolder[];
+};
+export declare const buildAssetFolderStructure: (files: StaticFile[]) => Structure;
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;

package/dist/editor/helpers/create-folder-tree.js

@@ -1,7 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFolderTree = exports.splitParentIntoNameAndParent = void 0;
+exports.createFolderTree = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
+const buildAssetFolderStructure = (files) => {
+    const notInFolder = files.filter((f) => !f.name.includes('/'));
+    const inFolder = files.filter((f) => f.name.includes('/'));
+    const groupedByFolder = {};
+    for (const item of inFolder) {
+        const folderName = item.name.split('/')[0];
+        if (!groupedByFolder[folderName]) {
+            groupedByFolder[folderName] = [];
+        }
+        groupedByFolder[folderName].push(item);
+    }
+    return {
+        files: notInFolder,
+        folders: Object.keys(groupedByFolder).map((folderName) => {
+            const filesInFolder = groupedByFolder[folderName];
+            const filesWithoutFolderName = filesInFolder.map((f) => {
+                return {
+                    ...f,
+                    name: f.name.substring(folderName.length + 1),
+                };
+            });
+            return {
+                name: folderName,
+                items: (0, exports.buildAssetFolderStructure)(filesWithoutFolderName),
+                expanded: false,
+            };
+        }),
+    };
+};
+exports.buildAssetFolderStructure = buildAssetFolderStructure;
 const splitParentIntoNameAndParent = (name) => {
     if (name === null) {
         return {

package/dist/get-cli-options.d.ts

@@ -20,7 +20,7 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "verbose" | "info" | "warn" | "error";
+    logLevel: "error" | "verbose" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -63,24 +63,24 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
         errorAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
@@ -105,7 +105,7 @@ export declare const CliInternals: {
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -180,7 +180,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    handleCommonError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
+    handleCommonError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -222,7 +222,7 @@ export declare const CliInternals: {
     };
     listOfRemotionPackages: string[];
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }) => boolean;
     getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, }: {
         height: number | null;
@@ -237,7 +237,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         serveUrlOrWebpackUrl: string;
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         serializedInputPropsWithCustomSchema: string;
         server: import("@remotion/renderer").RemotionServer;
     }) => Promise<{

package/dist/log.d.ts

@@ -2,24 +2,24 @@ export declare const Log: {
     verbose: (message?: any, ...optionalParams: any[]) => void;
     verboseAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }, message?: any, ...optionalParams: any[]) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     warnAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }, message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
     errorAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.18",
+  "version": "4.0.20",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/media-utils": "4.0.18",
-    "@remotion/player": "4.0.18",
-    "@remotion/renderer": "4.0.18",
-    "remotion": "4.0.18",
-    "@remotion/bundler": "4.0.18"
+    "@remotion/bundler": "4.0.20",
+    "remotion": "4.0.20",
+    "@remotion/player": "4.0.20",
+    "@remotion/renderer": "4.0.20",
+    "@remotion/media-utils": "4.0.20"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -64,8 +64,8 @@
     "react-dom": "^18.0.0",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/tailwind": "4.0.18",
-    "@remotion/zod-types": "4.0.18"
+    "@remotion/tailwind": "4.0.20",
+    "@remotion/zod-types": "4.0.20"
   },
   "keywords": [
     "remotion",

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -1,14 +0,0 @@
-export type SerializedJSONWithCustomFields = {
-    serializedString: string;
-    customDateUsed: boolean;
-    customFileUsed: boolean;
-    mapUsed: boolean;
-    setUsed: boolean;
-};
-export declare const FILE_TOKEN = "remotion-file:";
-export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
-    data: unknown;
-    indent: number | undefined;
-    staticBase: string;
-}) => SerializedJSONWithCustomFields;
-export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
-const DATE_TOKEN = 'remotion-date:';
-exports.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' && item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-};
-exports.serializeJSONWithDate = serializeJSONWithDate;
-const deserializeJSONWithCustomFields = (data) => {
-    return JSON.parse(data, (_, value) => {
-        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
-            return new Date(value.replace(DATE_TOKEN, ''));
-        }
-        return value;
-    });
-};
-exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/editor/components/RightPanel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type SidebarPanel = 'input-props' | 'renders';
-export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
-export declare const rightSidebarTabs: React.RefObject<{
-    selectRendersPanel: () => void;
-}>;
-export declare const RightPanel: React.FC<{}>;
-export {};

package/dist/editor/components/RightPanel.js

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
-const DataEditor_1 = require("./RenderModal/DataEditor");
-const RenderQueue_1 = require("./RenderQueue");
-const RendersTab_1 = require("./RendersTab");
-const Tabs_1 = require("./Tabs");
-const container = {
-    height: '100%',
-    width: '100%',
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-};
-const PropsEditor = ({ composition }) => {
-    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps,
-        });
-    }, [composition.defaultProps, composition.id, updateProps]);
-    const actualProps = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {}; }, [composition.defaultProps, composition.id, props]);
-    return ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props" }, composition.id));
-};
-const localStorageKey = 'remotion.sidebarPanel';
-const getSelectedPanel = () => {
-    const panel = localStorage.getItem(localStorageKey);
-    if (panel === 'renders') {
-        return 'renders';
-    }
-    return 'input-props';
-};
-const tabsContainer = {
-    backgroundColor: colors_1.BACKGROUND,
-};
-const persistSelectedPanel = (panel) => {
-    localStorage.setItem(localStorageKey, panel);
-};
-exports.persistSelectedPanel = persistSelectedPanel;
-exports.rightSidebarTabs = (0, react_1.createRef)();
-const RightPanel = () => {
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
-    const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        setPanel('input-props');
-        (0, exports.persistSelectedPanel)('input-props');
-    }, []);
-    const onRendersSelected = (0, react_1.useCallback)(() => {
-        setPanel('renders');
-        (0, exports.persistSelectedPanel)('renders');
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.rightSidebarTabs, () => {
-        return {
-            selectRendersPanel: () => {
-                setPanel('renders');
-                (0, exports.persistSelectedPanel)('renders');
-            },
-        };
-    }, []);
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const composition = (0, react_1.useMemo)(() => {
-        for (const comp of compositions) {
-            if (comp.id === currentComposition) {
-                return comp;
-            }
-        }
-        return null;
-    }, [compositions, currentComposition]);
-    if (composition === null) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, children: "Props" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(PropsEditor, { composition: composition }))] }));
-};
-exports.RightPanel = RightPanel;