@remotion/cli 4.0.17 → 4.0.19

package/dist/cloudrun-command.d.ts

@@ -0,0 +1 @@
+export declare const cloudrunCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/cloudrun-command.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloudrunCommand = void 0;
+const log_1 = require("./log");
+const get_package_manager_1 = require("./preview-server/get-package-manager");
+const update_available_1 = require("./preview-server/update-available");
+const cloudrunCommand = async (remotionRoot, args) => {
+    try {
+        const path = require.resolve('@remotion/cloudrun', {
+            paths: [remotionRoot],
+        });
+        const { CloudrunInternals } = require(path);
+        await CloudrunInternals.executeCommand(args, remotionRoot);
+        process.exit(0);
+    }
+    catch (err) {
+        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
+        log_1.Log.error(err);
+        log_1.Log.error('Remotion Cloud Run is not installed.');
+        log_1.Log.info('');
+        log_1.Log.info('You can install it using:');
+        log_1.Log.info(`${installCommand} @remotion/cloudrun@${(0, update_available_1.getRemotionVersion)()}`);
+        process.exit(1);
+    }
+};
+exports.cloudrunCommand = cloudrunCommand;

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/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

@@ -12,7 +12,7 @@ export declare const getCliOptions: (options: {
     inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
     jpegQuality: number;
-    browser: import("@remotion/renderer").Browser;
+    browser: "chrome";
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;

package/dist/get-cli-options.js

@@ -47,7 +47,7 @@ const getProResProfile = () => {
 const getAndValidateBrowser = async (browserExecutable) => {
     const browser = getBrowser();
     try {
-        await renderer_1.RenderInternals.ensureLocalBrowser(browser, browserExecutable);
+        await renderer_1.RenderInternals.ensureLocalBrowser(browserExecutable);
     }
     catch (err) {
         log_1.Log.error('Could not download a browser for rendering frames.');

package/dist/index.d.ts

@@ -97,7 +97,7 @@ export declare const CliInternals: {
         inputProps: Record<string, unknown>;
         envVariables: Record<string, string>;
         jpegQuality: number;
-        browser: import("@remotion/renderer").Browser;
+        browser: "chrome";
         crf: import("@remotion/renderer").Crf | null;
         pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;

package/dist/index.js

@@ -23,6 +23,7 @@ const minimist_1 = __importDefault(require("minimist"));
 const benchmark_1 = require("./benchmark");
 const chalk_1 = require("./chalk");
 const cleanup_before_quit_1 = require("./cleanup-before-quit");
+const cloudrun_command_1 = require("./cloudrun-command");
 const compositions_1 = require("./compositions");
 const config_1 = require("./config");
 const determine_image_format_1 = require("./determine-image-format");
@@ -77,6 +78,9 @@ const cli = async () => {
         else if (command === 'lambda') {
             await (0, lambda_command_1.lambdaCommand)(remotionRoot, args);
         }
+        else if (command === 'cloudrun') {
+            await (0, cloudrun_command_1.cloudrunCommand)(remotionRoot, args);
+        }
         else if (command === 'render') {
             await (0, render_1.render)(remotionRoot, args);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.17",
+  "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/bundler": "4.0.17",
-    "remotion": "4.0.17",
-    "@remotion/renderer": "4.0.17",
-    "@remotion/media-utils": "4.0.17",
-    "@remotion/player": "4.0.17"
+    "@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",
@@ -62,11 +62,10 @@
     "prettier-plugin-organize-imports": "^3.2.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "4.9.5",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.0.17",
-    "@remotion/tailwind": "4.0.17"
+    "@remotion/zod-types": "4.0.19",
+    "@remotion/tailwind": "4.0.19"
   },
   "keywords": [
     "remotion",