@remotion/cli 4.0.42 → 4.0.44

package/dist/editor/components/AssetSelector.js

@@ -30,6 +30,8 @@ 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 persist_open_folders_1 = require("../helpers/persist-open-folders");
+const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
@@ -60,6 +62,7 @@ const list = {
 };
 const AssetSelector = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const { assetFoldersExpanded, setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const [{ publicFolderExists, staticFiles }, setState] = react_1.default.useState(() => {
         return {
             staticFiles: (0, remotion_1.getStaticFiles)(),
@@ -67,8 +70,8 @@ const AssetSelector = () => {
         };
     });
     const assetTree = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles);
-    }, [staticFiles]);
+        return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles, null, assetFoldersExpanded);
+    }, [assetFoldersExpanded, staticFiles]);
     (0, react_1.useEffect)(() => {
         const onUpdate = () => {
             setState({
@@ -81,6 +84,19 @@ 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: (0, jsx_runtime_1.jsx)(AssetSelectorItem_1.FolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex }) })) }));
+    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
+        setAssetFoldersExpanded((p) => {
+            var _a;
+            const key = [parentName, folderName].filter(Boolean).join('/');
+            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
+            const foldersExpandedState = {
+                ...p,
+                [key]: !prev,
+            };
+            (0, persist_open_folders_1.persistExpandedFolders)('assets', foldersExpandedState);
+            return foldersExpandedState;
+        });
+    }, [setAssetFoldersExpanded]);
+    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.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder }) })) }));
 };
 exports.AssetSelector = AssetSelector;

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

@@ -1,18 +1,20 @@
 import React from 'react';
-import type { StaticFile } from 'remotion';
-import type { AssetFolder, Structure } from '../helpers/create-folder-tree';
+import { type StaticFile } from 'remotion';
+import type { AssetFolder, AssetStructure } from '../helpers/create-folder-tree';
 export declare const AssetFolderItem: React.FC<{
     item: AssetFolder;
     tabIndex: number;
     level: number;
     parentFolder: string;
+    toggleFolder: (folderName: string, parentName: string | null) => void;
 }>;
-export declare const FolderTree: React.FC<{
-    item: Structure;
+export declare const AssetFolderTree: React.FC<{
+    item: AssetStructure;
     name: string | null;
     parentFolder: string | null;
     level: number;
     tabIndex: number;
+    toggleFolder: (folderName: string, parentName: string | null) => void;
 }>;
 export declare const AssetSelectorItem: React.FC<{
     item: StaticFile | AssetFolder;

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 = exports.FolderTree = exports.AssetFolderItem = void 0;
+exports.AssetSelectorItem = exports.AssetFolderTree = exports.AssetFolderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
@@ -58,6 +59,7 @@ const itemStyle = {
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
     height: ASSET_ITEM_HEIGHT,
+    userSelect: 'none',
 };
 const labelStyle = {
     textAlign: 'left',
@@ -72,9 +74,8 @@ const revealIconStyle = {
     height: 12,
     color: 'currentColor',
 };
-const AssetFolderItem = ({ tabIndex, item, level, parentFolder }) => {
+const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -91,56 +92,78 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder }) => {
     const label = (0, react_1.useMemo)(() => {
         return {
             ...labelStyle,
-            color: colors_1.LIGHT_TEXT,
+            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
         };
-    }, []);
+    }, [hovered]);
     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] }));
+        toggleFolder(item.name, parentFolder);
+    }, [item.name, parentFolder, toggleFolder]);
+    const Icon = item.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: hovered ? 'white' : 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 })] }) }), item.expanded ? ((0, jsx_runtime_1.jsx)(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder }, item.name)) : null] }));
 };
 exports.AssetFolderItem = AssetFolderItem;
-const FolderTree = ({ item, level, name, parentFolder, tabIndex }) => {
+const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, 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));
+                return ((0, jsx_runtime_1.jsx)(exports.AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder }, folder.name));
             }), item.files.map((file) => {
                 return ((0, jsx_runtime_1.jsx)(exports.AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents }, file.src));
             })] }));
 };
-exports.FolderTree = FolderTree;
+exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
+    const { canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selected = (0, react_1.useMemo)(() => {
+        if (canvasContent && canvasContent.type === 'asset') {
+            const nameWOParent = canvasContent.asset.split('/').pop();
+            return nameWOParent === item.name;
+        }
+        return false;
+    }, [canvasContent, item.name]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        const relativePath = parentFolder
+            ? parentFolder + '/' + item.name
+            : item.name;
+        setCanvasContent({ type: 'asset', asset: relativePath });
+        window.history.pushState({}, 'Studio', `/assets/${relativePath}`);
+    }, [item.name, parentFolder, setCanvasContent]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
-            color: colors_1.LIGHT_TEXT,
-            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: hovered
+                ? selected
+                    ? colors_1.SELECTED_BACKGROUND
+                    : colors_1.CLEAR_HOVER
+                : selected
+                    ? colors_1.SELECTED_BACKGROUND
+                    : 'transparent',
             paddingLeft: 12 + level * 8,
         };
-    }, [hovered, level]);
+    }, [hovered, level, selected]);
     const label = (0, react_1.useMemo)(() => {
         return {
             ...labelStyle,
-            color: colors_1.LIGHT_TEXT,
+            color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT,
         };
-    }, []);
+    }, [hovered, selected]);
     const renderFileExplorerAction = (0, react_1.useCallback)((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(() => {
+    const revealInExplorer = react_1.default.useCallback((e) => {
+        e.stopPropagation();
         (0, actions_1.openInFileExplorer)({
             directory: window.remotion_publicFolderExists +
                 '/' +
@@ -151,12 +174,14 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
         });
     }, [item.name, parentFolder]);
-    const copyToClipboard = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(`staticFile("${item.name}")`)
+    const copyToClipboard = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        const content = `staticFile("${[parentFolder, item.name].join('/')}")`;
+        (0, copy_text_1.copyText)(content)
             .then(() => {
             var _a;
             (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                content: `Copied 'staticFile("${item.name}")' to clipboard`,
+                content: `Copied '${content}' to clipboard`,
                 created: Date.now(),
                 duration: 1000,
                 id: String(Math.random()),
@@ -165,7 +190,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
             .catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
         });
-    }, [item.name]);
-    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, children: [(0, jsx_runtime_1.jsx)(file_1.FileIcon, { 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 }), hovered ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })] })) : null] }) }));
+    }, [item.name, parentFolder]);
+    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [(0, jsx_runtime_1.jsx)(file_1.FileIcon, { 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 }), hovered ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })] })) : null] }) }));
 };
 exports.AssetSelectorItem = AssetSelectorItem;

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

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const Canvas: React.FC;
+import type { CanvasContent } from 'remotion';
+export declare const Canvas: React.FC<{
+    canvasContent: CanvasContent;
+}>;

package/dist/editor/components/Canvas.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const media_utils_1 = require("@remotion/media-utils");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const smooth_zoom_1 = require("../../smooth-zoom");
 const colors_1 = require("../helpers/colors");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
@@ -28,11 +29,21 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
-const Canvas = () => {
-    const dimensions = (0, is_current_selected_still_1.useDimensions)();
+const Canvas = ({ canvasContent }) => {
     const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
+    const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
+    const contentDimensions = (0, react_1.useMemo)(() => {
+        if (canvasContent.type === 'asset') {
+            return assetResolution;
+        }
+        if (config) {
+            return { width: config.width, height: config.height };
+        }
+        return null;
+    }, [assetResolution, config, canvasContent]);
     const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
@@ -45,7 +56,7 @@ const Canvas = () => {
         if (!size) {
             return;
         }
-        if (!dimensions) {
+        if (!contentDimensions || contentDimensions === 'none') {
             return;
         }
         const wantsToZoom = e.ctrlKey || e.metaKey;
@@ -56,8 +67,8 @@ const Canvas = () => {
         setSize((prevSize) => {
             const scale = player_1.PlayerInternals.calculateScale({
                 canvasSize: size,
-                compositionHeight: dimensions.height,
-                compositionWidth: dimensions.width,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
                 previewSize: prevSize.size,
             });
             // Zoom in/out
@@ -70,18 +81,18 @@ const Canvas = () => {
                     size,
                     clientX: e.clientX,
                     clientY: e.clientY,
-                    compositionWidth: dimensions.width,
-                    compositionHeight: dimensions.height,
+                    compositionWidth: contentDimensions.width,
+                    compositionHeight: contentDimensions.height,
                     scale,
                     translation: prevSize.translation,
                 });
                 const zoomDifference = unsmoothened - oldSize;
-                const uvCoordinatesX = centerX / dimensions.width;
-                const uvCoordinatesY = centerY / dimensions.height;
-                const correctionLeft = -uvCoordinatesX * (zoomDifference * dimensions.width) +
-                    (1 - uvCoordinatesX) * zoomDifference * dimensions.width;
-                const correctionTop = -uvCoordinatesY * (zoomDifference * dimensions.height) +
-                    (1 - uvCoordinatesY) * zoomDifference * dimensions.height;
+                const uvCoordinatesX = centerX / contentDimensions.width;
+                const uvCoordinatesY = centerY / contentDimensions.height;
+                const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
+                    (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
+                const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
+                    (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
                 return {
                     translation: (0, get_effective_translation_1.getEffectiveTranslation)({
                         translation: {
@@ -89,8 +100,8 @@ const Canvas = () => {
                             y: prevSize.translation.y - correctionTop / 2,
                         },
                         canvasSize: size,
-                        compositionHeight: dimensions.height,
-                        compositionWidth: dimensions.width,
+                        compositionHeight: contentDimensions.height,
+                        compositionWidth: contentDimensions.width,
                         scale,
                     }),
                     size: unsmoothened,
@@ -99,8 +110,8 @@ const Canvas = () => {
             const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
                 translation: prevSize.translation,
                 canvasSize: size,
-                compositionHeight: dimensions.height,
-                compositionWidth: dimensions.width,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
                 scale,
             });
             // Pan
@@ -112,13 +123,13 @@ const Canvas = () => {
                         y: effectiveTranslation.y + e.deltaY,
                     },
                     canvasSize: size,
-                    compositionHeight: dimensions.height,
-                    compositionWidth: dimensions.width,
+                    compositionHeight: contentDimensions.height,
+                    compositionWidth: contentDimensions.width,
                     scale,
                 }),
             };
         });
-    }, [editorZoomGestures, dimensions, isFit, setSize, size]);
+    }, [editorZoomGestures, contentDimensions, isFit, setSize, size]);
     (0, react_1.useEffect)(() => {
         const { current } = canvas_ref_1.canvasRef;
         if (!current) {
@@ -143,7 +154,7 @@ const Canvas = () => {
         });
     }, [setSize]);
     const onZoomIn = (0, react_1.useCallback)(() => {
-        if (!dimensions) {
+        if (!contentDimensions || contentDimensions === 'none') {
             return;
         }
         if (!size) {
@@ -152,8 +163,8 @@ const Canvas = () => {
         setSize((prevSize) => {
             const scale = player_1.PlayerInternals.calculateScale({
                 canvasSize: size,
-                compositionHeight: dimensions.height,
-                compositionWidth: dimensions.width,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
                 previewSize: prevSize.size,
             });
             return {
@@ -164,9 +175,9 @@ const Canvas = () => {
                 size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
             };
         });
-    }, [dimensions, setSize, size]);
+    }, [contentDimensions, setSize, size]);
     const onZoomOut = (0, react_1.useCallback)(() => {
-        if (!dimensions) {
+        if (!contentDimensions || contentDimensions === 'none') {
             return;
         }
         if (!size) {
@@ -175,8 +186,8 @@ const Canvas = () => {
         setSize((prevSize) => {
             const scale = player_1.PlayerInternals.calculateScale({
                 canvasSize: size,
-                compositionHeight: dimensions.height,
-                compositionWidth: dimensions.width,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
                 previewSize: prevSize.size,
             });
             return {
@@ -187,7 +198,7 @@ const Canvas = () => {
                 size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
             };
         });
-    }, [dimensions, setSize, size]);
+    }, [contentDimensions, setSize, size]);
     (0, react_1.useEffect)(() => {
         const resetBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -219,6 +230,37 @@ const Canvas = () => {
             zoomOut.unregister();
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
+    const fetchMetadata = (0, react_1.useCallback)(async () => {
+        if (canvasContent.type !== 'asset') {
+            return;
+        }
+        setAssetResolution(null);
+        const assetSrc = (0, remotion_1.staticFile)(canvasContent.asset);
+        const fileType = (0, Preview_1.getPreviewFileType)(canvasContent.asset);
+        if (fileType === 'video') {
+            try {
+                await (0, media_utils_1.getVideoMetadata)(assetSrc).then((data) => {
+                    setAssetResolution({ width: data.width, height: data.height });
+                });
+            }
+            catch (_a) {
+                setAssetResolution('none');
+            }
+        }
+        else if (fileType === 'image') {
+            const img = new Image();
+            img.onload = () => {
+                setAssetResolution({ width: img.width, height: img.height });
+            };
+            img.src = assetSrc;
+        }
+        else {
+            setAssetResolution('none');
+        }
+    }, [canvasContent]);
+    (0, react_1.useEffect)(() => {
+        fetchMetadata();
+    }, [fetchMetadata]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CanvasOrLoading.js

@@ -28,6 +28,7 @@ const CanvasOrLoading = () => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     (0, react_1.useEffect)(() => {
         const timeout = setTimeout(() => {
             setTakesALongTime(true);
@@ -56,6 +57,13 @@ const CanvasOrLoading = () => {
             transition: 'opacity 0.3s',
         };
     }, [takesALongTime]);
+    if (!canvasContent) {
+        return null;
+    }
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
+    if (canvasContent.type === 'asset') {
+        return content;
+    }
     if (!resolved) {
         return null;
     }
@@ -65,7 +73,7 @@ const CanvasOrLoading = () => {
     if (resolved.type === 'error') {
         return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), " ", content] }));
 };
 exports.CanvasOrLoading = CanvasOrLoading;
 const loaderLabel = {

package/dist/editor/components/CheckboardToggle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -16,11 +17,15 @@ const accessibilityLabel = [
     .join(' ');
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const onClick = (0, react_1.useCallback)(() => {
         setCheckerboard((c) => {
             return !c;
         });
     }, [setCheckerboard]);
+    if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset') {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/editor/components/CompositionSelector.js

@@ -33,8 +33,8 @@ const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
 exports.getKeysToExpand = getKeysToExpand;
 exports.compositionSelectorRef = (0, react_1.createRef)();
 const CompositionSelector = () => {
-    const { compositions, currentComposition, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
+    const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
@@ -46,7 +46,7 @@ const CompositionSelector = () => {
                 ...p,
                 [key]: !prev,
             };
-            (0, persist_open_folders_1.persistExpandedFolders)(foldersExpandedState);
+            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
             return foldersExpandedState;
         });
     }, []);
@@ -81,7 +81,7 @@ const CompositionSelector = () => {
                         currentFolder = (_b = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.name) !== null && _b !== void 0 ? _b : null;
                         currentParentName = (_c = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.parent) !== null && _c !== void 0 ? _c : null;
                     }
-                    (0, persist_open_folders_1.persistExpandedFolders)(foldersExpandedState);
+                    (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
                     return foldersExpandedState;
                 });
             },
@@ -90,8 +90,10 @@ const CompositionSelector = () => {
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}), (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
-                    return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: currentComposition, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [canvasContent && canvasContent.type === 'composition' ? ((0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {})) : null, (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+                    return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
+                            ? canvasContent.compositionId
+                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })] }));
 };
 exports.CompositionSelector = CompositionSelector;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { AnyComposition } from 'remotion';
+import { type AnyComposition } from 'remotion';
 export type CompositionSelectorItemType = {
     key: string;
     type: 'composition';

package/dist/editor/components/CopyButton.js

@@ -38,6 +38,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, style: {}, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -9,13 +9,20 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const context_1 = require("./RenderQueue/context");
 const TitleUpdater = () => {
-    const video = remotion_1.Internals.useVideo();
     const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { jobs } = renderQueue;
     (0, react_1.useEffect)(() => {
-        var _a;
-        (0, document_title_1.setCurrentVideoId)((_a = video === null || video === void 0 ? void 0 : video.id) !== null && _a !== void 0 ? _a : null);
-    }, [video]);
+        if (!canvasContent) {
+            (0, document_title_1.setCurrentCanvasContentId)(null);
+            return;
+        }
+        if (canvasContent.type === 'composition') {
+            (0, document_title_1.setCurrentCanvasContentId)(canvasContent.compositionId);
+            return;
+        }
+        (0, document_title_1.setCurrentCanvasContentId)(canvasContent.asset);
+    }, [canvasContent]);
     (0, react_1.useEffect)(() => {
         (0, document_title_1.setRenderJobs)(jobs);
     }, [jobs]);

package/dist/editor/components/EditorContent.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
@@ -11,7 +13,8 @@ const TopPanel_1 = require("./TopPanel");
 const noop = () => undefined;
 const EditorContent = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    if (isStill) {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    if (canvasContent === null || isStill || canvasContent.type === 'asset') {
         return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
     }
     return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));

package/dist/editor/components/ExplorerPanel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExplorerPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = 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 AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
@@ -50,18 +49,6 @@ const ExplorerPanel = () => {
             },
         };
     }, []);
-    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 === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) : (0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, {})] }));
 };
 exports.ExplorerPanel = ExplorerPanel;