@remotion/studio 4.0.471 → 4.0.473

package/dist/api/rename-static-file.d.ts

@@ -0,0 +1,6 @@
+import type { RenameStaticFileResponse } from '@remotion/studio-shared';
+export declare const renameStaticFile: ({ oldRelativePath, newRelativePath, }: {
+    oldRelativePath: string;
+    newRelativePath: string;
+}) => Promise<RenameStaticFileResponse>;
+export { RenameStaticFileResponse };

package/dist/api/rename-static-file.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renameStaticFile = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../components/call-api");
+const renameStaticFile = ({ oldRelativePath, newRelativePath, }) => {
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('renameStaticFile() is only available in the Studio');
+    }
+    if (window.remotion_isReadOnlyStudio) {
+        throw new Error('renameStaticFile() is not available in Read-Only Studio');
+    }
+    return (0, call_api_1.callApi)('/api/rename-static-file', {
+        oldRelativePath,
+        newRelativePath,
+    });
+};
+exports.renameStaticFile = renameStaticFile;

package/dist/components/AssetSelector.js

@@ -1,7 +1,37 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -13,7 +43,7 @@ const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
+const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
@@ -82,17 +112,37 @@ const AssetSelector = ({ readOnlyStudio }) => {
         setDropLocation,
     });
     const onDragOver = (0, react_1.useCallback)((e) => {
+        if (!(0, use_asset_drag_events_1.isFileDragEvent)(e)) {
+            return;
+        }
         e.preventDefault();
     }, []);
     const onDrop = (0, react_1.useCallback)(async (e) => {
         try {
+            if (!(0, use_asset_drag_events_1.isFileDragEvent)(e)) {
+                setDropLocation(null);
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
             const { files } = e.dataTransfer;
+            if (files.length === 0) {
+                setDropLocation(null);
+                return;
+            }
             const assetPath = dropLocation !== null && dropLocation !== void 0 ? dropLocation : null;
             const makePath = (file) => {
                 return [assetPath, file.name].filter(Boolean).join('/');
             };
+            const differentExistingFile = Array.from(files).find((file) => {
+                const filePath = makePath(file);
+                return staticFiles.some((staticFile) => staticFile.name === filePath &&
+                    staticFile.sizeInBytes !== file.size);
+            });
+            if (differentExistingFile) {
+                (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
+                return;
+            }
             for (const file of files) {
                 const body = await file.arrayBuffer();
                 await (0, write_static_file_1.writeStaticFile)({
@@ -113,7 +163,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
         finally {
             setDropLocation(null);
         }
-    }, [dropLocation]);
+    }, [dropLocation, staticFiles]);
     return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [showCurrentAsset ? jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, {}) : null, staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {

package/dist/components/AssetSelectorItem.js

@@ -32,25 +32,27 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFolderTree = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
-const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
+const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
 const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
+const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
+const ContextMenu_1 = require("./ContextMenu");
+const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -128,13 +130,19 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
     return (jsx_runtime_1.jsxs("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
             backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
         }, children: [
-            jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: () => {
+            jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
+                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
+                        return;
+                    }
                     if (!item.expanded) {
                         openFolderTimerRef.current = window.setTimeout(() => {
                             toggleFolder(item.name, parentFolder);
                         }, 1000);
                     }
-                }, onDragLeave: () => {
+                }, onDragLeave: (event) => {
+                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
+                        return;
+                    }
                     if (openFolderTimerRef.current) {
                         clearTimeout(openFolderTimerRef.current);
                     }
@@ -156,7 +164,11 @@ exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -171,6 +183,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         }
         return false;
     }, [canvasContent, relativePath]);
+    const canDragAsset = (0, react_1.useMemo)(() => {
+        return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
+    }, [readOnlyStudio, relativePath]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
@@ -195,6 +210,18 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         setCanvasContent,
         setSidebarCollapsedState,
     ]);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        if (!canDragAsset) {
+            e.preventDefault();
+            return;
+        }
+        setIsDragging(true);
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData(studio_shared_1.ASSET_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeAssetDragData)(relativePath)));
+    }, [canDragAsset, relativePath]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
@@ -221,21 +248,17 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
     }, []);
-    const revealInExplorer = react_1.default.useCallback((e) => {
-        e.stopPropagation();
-        (0, actions_1.openInFileExplorer)({
-            directory: window.remotion_publicFolderExists +
-                '/' +
-                parentFolder +
-                '/' +
-                item.name,
-        }).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+    const copyFileName = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(item.name)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${item.name}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [item.name, parentFolder]);
-    const copyToClipboard = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        const content = `staticFile("${[parentFolder, item.name].join('/')}")`;
+    }, [item.name]);
+    const copyStaticFilePath = (0, react_1.useCallback)(() => {
+        const content = `staticFile("${relativePath}")`;
         (0, copy_text_1.copyText)(content)
             .then(() => {
             (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
@@ -243,10 +266,113 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [item.name, parentFolder]);
-    return (jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [
-                jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), readOnlyStudio ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })
-                            ] }))] })) : null] }) }));
+    }, [relativePath]);
+    const openAssetInExplorer = (0, react_1.useCallback)(() => {
+        if (!window.remotion_publicFolderExists) {
+            (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
+            return;
+        }
+        (0, actions_1.openInFileExplorer)({
+            directory: window.remotion_publicFolderExists + '/' + relativePath,
+        }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+        });
+    }, [relativePath]);
+    const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
+    const contextMenu = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'copy-asset-file-name',
+                keyHint: null,
+                label: 'Copy file name',
+                leftItem: null,
+                onClick: copyFileName,
+                quickSwitcherLabel: 'Copy asset file name',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-file-name',
+            },
+            {
+                id: 'copy-asset-static-file-path',
+                keyHint: null,
+                label: 'Copy staticFile() path',
+                leftItem: null,
+                onClick: copyStaticFilePath,
+                quickSwitcherLabel: 'Copy staticFile() path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-static-file-path',
+            },
+            {
+                type: 'divider',
+                id: 'asset-file-actions-divider',
+            },
+            {
+                id: 'open-asset-in-explorer',
+                keyHint: null,
+                label: 'Open in Explorer',
+                leftItem: null,
+                onClick: openAssetInExplorer,
+                quickSwitcherLabel: 'Open asset in Explorer',
+                subMenu: null,
+                type: 'item',
+                value: 'open-asset-in-explorer',
+                disabled: serverActionDisabled || window.remotion_publicFolderExists === null,
+            },
+            {
+                id: 'rename-asset',
+                keyHint: null,
+                label: 'Rename...',
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({
+                        type: 'rename-static-file',
+                        relativePath,
+                    });
+                },
+                quickSwitcherLabel: 'Rename asset...',
+                subMenu: null,
+                type: 'item',
+                value: 'rename-asset',
+                disabled: serverActionDisabled,
+            },
+            {
+                id: 'delete-asset',
+                keyHint: null,
+                label: 'Delete...',
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({
+                        type: 'delete-static-file',
+                        relativePath,
+                    });
+                },
+                quickSwitcherLabel: 'Delete asset...',
+                subMenu: null,
+                type: 'item',
+                value: 'delete-asset',
+                disabled: serverActionDisabled,
+            },
+        ];
+    }, [
+        copyFileName,
+        copyStaticFilePath,
+        openAssetInExplorer,
+        relativePath,
+        serverActionDisabled,
+        setSelectedModal,
+    ]);
+    const revealInExplorer = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        openAssetInExplorer();
+    }, [openAssetInExplorer]);
+    const copyToClipboard = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        copyStaticFilePath();
+    }, [copyStaticFilePath]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
+                    jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })
+                                ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -5,11 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
@@ -18,9 +22,11 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -35,7 +41,47 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
+const isFileDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
+};
+const isAssetDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
+};
+const isRemoteAssetDragEvent = (event) => {
+    return (!isFileDragEvent(event) &&
+        !isAssetDragEvent(event) &&
+        (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
+};
+const getAssetDragPath = (event) => {
+    var _a, _b;
+    var _c;
+    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.ASSET_DRAG_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
+};
+const isDragEventInsideCanvas = (event) => {
+    const { current } = canvas_ref_1.canvasRef;
+    if (!current) {
+        return false;
+    }
+    const targetIsNode = event.target instanceof Node;
+    if (targetIsNode && current.contains(event.target)) {
+        return true;
+    }
+    const rect = current.getBoundingClientRect();
+    return (event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom);
+};
 const Canvas = ({ canvasContent, size }) => {
+    var _a, _b;
     const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const previewSnapshotRef = (0, react_1.useRef)({
@@ -50,7 +96,30 @@ const Canvas = ({ canvasContent, size }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
+    const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (currentCompositionId === null) {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, currentCompositionId]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId: currentCompositionId,
+    });
+    const canDropAssets = previewServerState.type === 'connected' &&
+        !window.remotion_isReadOnlyStudio &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        !isAddingAsset;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
             canvasContent.type === 'output' ||
@@ -417,6 +486,84 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
+    const onDragOver = (0, react_1.useCallback)((event) => {
+        if (!canDropAssets ||
+            (!isFileDragEvent(event) &&
+                !isAssetDragEvent(event) &&
+                !isRemoteAssetDragEvent(event)) ||
+            !isDragEventInsideCanvas(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }, [canDropAssets]);
+    const onDrop = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        var _b;
+        if (!canDropAssets ||
+            compositionFile === null ||
+            currentCompositionId === null ||
+            (!isFileDragEvent(event) &&
+                !isAssetDragEvent(event) &&
+                !isRemoteAssetDragEvent(event)) ||
+            !isDragEventInsideCanvas(event)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setIsAddingAsset(true);
+        try {
+            if (isFileDragEvent(event)) {
+                const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+                if (files.length === 0) {
+                    return;
+                }
+                await (0, import_assets_1.importAssets)({
+                    files,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
+            else if (isAssetDragEvent(event)) {
+                const assetPath = getAssetDragPath(event);
+                if (assetPath === null) {
+                    return;
+                }
+                await (0, import_assets_1.insertExistingAssets)({
+                    assetPaths: [assetPath],
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
+            else {
+                const url = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
+                if (url === null) {
+                    return;
+                }
+                await (0, import_assets_1.importRemoteAsset)({
+                    url,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canDropAssets, compositionFile, currentCompositionId]);
+    (0, react_1.useEffect)(() => {
+        if (!canDropAssets) {
+            return;
+        }
+        document.addEventListener('dragover', onDragOver, { capture: true });
+        document.addEventListener('drop', onDrop, { capture: true });
+        return () => {
+            document.removeEventListener('dragover', onDragOver, { capture: true });
+            document.removeEventListener('drop', onDrop, { capture: true });
+        };
+    }, [canDropAssets, onDragOver, onDrop]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };

package/dist/components/CompositionSelectorItem.d.ts

@@ -7,6 +7,7 @@ export type CompositionSelectorItemType = {
 } | {
     key: string;
     type: 'folder';
+    folder: _InternalTypes['TFolder'];
     folderName: string;
     parentName: string | null;
     items: CompositionSelectorItemType[];

package/dist/components/CompositionSelectorItem.js

@@ -15,6 +15,7 @@ const modals_1 = require("../state/modals");
 const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
+const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -108,7 +109,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : null);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
             return (0, composition_menu_items_1.getCompositionMenuItems)({
@@ -120,12 +121,19 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
             });
         }
-        return [];
+        return (0, folder_menu_items_1.getFolderMenuItems)({
+            closeMenu: noop_1.noop,
+            connectionStatus,
+            folder: item.folder,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
     }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName })
-                    ] }), item.expanded
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                            ] }) }) }), item.expanded
                     ? item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
                     })

package/dist/components/ConfirmationDialog-types.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+export type ConfirmationDialogOptions = {
+    readonly title: string;
+    readonly message: React.ReactNode;
+    readonly confirmLabel?: string;
+    readonly cancelLabel?: string;
+};
+export type ConfirmationDialogFunction = (options: ConfirmationDialogOptions) => Promise<boolean>;

package/dist/components/ConfirmationDialog-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ConfirmationDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ConfirmationDialogState } from '../state/modals';
+import type { ConfirmationDialogFunction } from './ConfirmationDialog-types';
+export declare const useConfirmationDialog: () => ConfirmationDialogFunction;
+export declare const ConfirmationDialog: React.FC<{
+    readonly state: ConfirmationDialogState;
+}>;