@remotion/cli 4.0.18 → 4.0.19

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/RightPanel.js

@@ -4,8 +4,10 @@ exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = v
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
 const DataEditor_1 = require("./RenderModal/DataEditor");
+const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
@@ -16,17 +18,10 @@ const container = {
     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 circle = {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
 };
 const localStorageKey = 'remotion.sidebarPanel';
 const getSelectedPanel = () => {
@@ -45,6 +40,8 @@ const persistSelectedPanel = (panel) => {
 exports.persistSelectedPanel = persistSelectedPanel;
 exports.rightSidebarTabs = (0, react_1.createRef)();
 const RightPanel = () => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('input-props');
@@ -63,6 +60,14 @@ const RightPanel = () => {
         };
     }, []);
     const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const circleStyle = (0, react_1.useMemo)(() => {
+        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
+        return {
+            ...circle,
+            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
+            cursor: 'help',
+        };
+    }, [panel, saving]);
     const composition = (0, react_1.useMemo)(() => {
         for (const comp of compositions) {
             if (comp.id === currentComposition) {
@@ -71,9 +76,37 @@ const RightPanel = () => {
         }
         return null;
     }, [compositions, currentComposition]);
+    const saveToolTip = (0, react_1.useMemo)(() => {
+        return process.env.KEYBOARD_SHORTCUTS_ENABLED
+            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
+            : 'There are unsaved changes';
+    }, []);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        if (composition === null) {
+            return;
+        }
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (composition === null) {
+            return {};
+        }
+        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
+    }, [composition, props]);
+    const unsavedChangesExist = (0, react_1.useMemo)(() => {
+        if (composition === null || composition.defaultProps === undefined) {
+            return false;
+        }
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
+    }, [actualProps, composition]);
     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 }))] }));
+    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.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] }), (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)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id))] }));
 };
 exports.RightPanel = RightPanel;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.18",
+  "version": "4.0.19",
   "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.19",
+    "@remotion/media-utils": "4.0.19",
+    "@remotion/player": "4.0.19",
+    "@remotion/renderer": "4.0.19",
+    "remotion": "4.0.19"
   },
   "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/zod-types": "4.0.19",
+    "@remotion/tailwind": "4.0.19"
   },
   "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;