@remotion/studio 4.0.499 → 4.0.501

package/dist/Studio.js

@@ -17,7 +17,7 @@ const getServerDisconnectedDomElement = () => {
 };
 const StudioInner = ({ rootComponent, readOnly }) => {
     var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));

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

@@ -3,16 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteStaticFile = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const deleteStaticFile = async (relativePath) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('deleteStaticFile() is only available in the Studio');
     }
-    if (window.remotion_isReadOnlyStudio) {
-        throw new Error('deleteStaticFile() is not available in Read-Only Studio');
-    }
     if (relativePath.startsWith(window.remotion_staticBase)) {
         relativePath = relativePath.substring(window.remotion_staticBase.length + 1);
     }
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.deleteStaticFile({ relativePath });
+    }
+    if (window.remotion_isReadOnlyStudio) {
+        throw new Error('deleteStaticFile() is not available in Read-Only Studio');
+    }
     const res = await (0, call_api_1.callApi)('/api/delete-static-file', { relativePath });
     return res;
 };

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

@@ -3,10 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renameStaticFile = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const renameStaticFile = ({ oldRelativePath, newRelativePath, }) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('renameStaticFile() is only available in the Studio');
     }
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.renameStaticFile({
+            oldRelativePath,
+            newRelativePath,
+        });
+    }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('renameStaticFile() is not available in Read-Only Studio');
     }

package/dist/api/watch-public-folder.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watchPublicFolder = exports.WATCH_REMOTION_STATIC_FILES = void 0;
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const get_static_files_1 = require("./get-static-files");
 exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
 /*
@@ -14,7 +15,7 @@ const watchPublicFolder = (callback) => {
         console.warn('The watchPublicFolder() API is only available while using the Remotion Studio.');
         return { cancel: () => undefined };
     }
-    if (window.remotion_isReadOnlyStudio) {
+    if (window.remotion_isReadOnlyStudio && !(0, browser_studio_operations_1.getBrowserStudioOperations)()) {
         throw new Error('watchPublicFolder() is not available in read-only Studio');
     }
     const emitUpdate = () => {

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watchStaticFile = void 0;
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const watch_public_folder_1 = require("./watch-public-folder");
 /*
  * @description Watches for changes in a specific static file and invokes a callback function when the file changes, enabling dynamic updates in your Remotion projects.
@@ -13,7 +14,7 @@ const watchStaticFile = (fileName, callback) => {
         console.warn('watchStaticFile() is only available while using the Remotion Studio.');
         return { cancel: () => undefined };
     }
-    if (window.remotion_isReadOnlyStudio) {
+    if (window.remotion_isReadOnlyStudio && !(0, browser_studio_operations_1.getBrowserStudioOperations)()) {
         // eslint-disable-next-line no-console
         console.warn('watchStaticFile() is only available in an interactive Studio.');
         return { cancel: () => undefined };

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

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.writeStaticFile = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const writeStaticFile = async ({ contents, filePath, }) => {
+    if (filePath.includes('\\')) {
+        return Promise.reject(new Error('File path cannot contain backslashes'));
+    }
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations) {
+        return browserStudioOperations.writeStaticFile({ contents, filePath });
+    }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('writeStaticFile() is not available in read-only Studio');
     }
     const url = new URL(`${window.remotion_staticBase}/api/add-asset`, window.location.origin);
-    if (filePath.includes('\\')) {
-        return Promise.reject(new Error('File path cannot contain backslashes'));
-    }
     url.search = new URLSearchParams({
         filePath,
     }).toString();

package/dist/components/AssetSelector.js

@@ -37,6 +37,7 @@ exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const write_static_file_1 = require("../api/write-static-file");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
@@ -48,6 +49,7 @@ const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
 const use_static_files_1 = require("./use-static-files");
 const container = {
     display: 'flex',
@@ -79,7 +81,8 @@ const AssetSelector = ({ readOnlyStudio }) => {
     const [dropLocation, setDropLocation] = (0, react_1.useState)(null);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const shouldAllowUpload = connectionStatus === 'connected' && !readOnlyStudio;
+    const shouldAllowUpload = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null ||
+        (connectionStatus === 'connected' && !readOnlyStudio);
     const list = (0, react_1.useMemo)(() => {
         return {
             ...baseList,
@@ -158,11 +161,12 @@ const AssetSelector = ({ readOnlyStudio }) => {
             setDropLocation(null);
         }
     }, [dropLocation, staticFiles]);
-    return (jsx_runtime_1.jsx("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: 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: {
-                ...list,
-                backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
-            }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) })) }));
+    return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
+            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), 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: {
+                    ...list,
+                    backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
+                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) }))] }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -1,5 +1,30 @@
 import React from 'react';
 import type { AssetStructure } from '../helpers/create-folder-tree';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getAssetActionAvailability: ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }: {
+    browserStudioCanMutateAssets: boolean | null;
+    readOnlyStudio: boolean;
+    connectionStatus: "connected" | "disconnected" | "init";
+    publicFolderExists: string | null;
+}) => {
+    mutationsDisabled: boolean;
+    fileExplorerDisabled: boolean;
+};
+export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
+    readOnlyStudio: boolean;
+    relativePath: string;
+}) => boolean;
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }: {
+    relativePath: string;
+    fileManagerName: string;
+    copyFileName: () => void;
+    copyStaticFilePath: () => void;
+    openAssetInExplorer: () => void;
+    renameAsset: () => void;
+    deleteAsset: () => void;
+    fileExplorerDisabled: boolean;
+    mutationsDisabled: boolean;
+}) => ComboboxValue[];
 export declare const AssetFolderTree: React.FC<{
     readonly item: AssetStructure;
     readonly name: string | null;

package/dist/components/AssetSelectorItem.js

@@ -33,13 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetFolderTree = void 0;
+exports.AssetFolderTree = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const delete_static_file_1 = require("../api/delete-static-file");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
@@ -105,6 +106,92 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
+const getAssetActionAvailability = ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }) => {
+    return {
+        mutationsDisabled: browserStudioCanMutateAssets !== true &&
+            (readOnlyStudio || connectionStatus !== 'connected'),
+        fileExplorerDisabled: publicFolderExists === null ||
+            readOnlyStudio ||
+            connectionStatus !== 'connected',
+    };
+};
+exports.getAssetActionAvailability = getAssetActionAvailability;
+const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
+    return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
+};
+exports.getCanDragAsset = getCanDragAsset;
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }) => {
+    return [
+        (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
+        {
+            type: 'divider',
+            id: 'open-in-new-window-divider',
+        },
+        {
+            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: `Show in ${fileManagerName}`,
+            leftItem: null,
+            onClick: openAssetInExplorer,
+            quickSwitcherLabel: `Show asset in ${fileManagerName}`,
+            subMenu: null,
+            type: 'item',
+            value: 'open-asset-in-explorer',
+            disabled: fileExplorerDisabled,
+        },
+        {
+            id: 'rename-asset',
+            keyHint: null,
+            label: 'Rename...',
+            leftItem: null,
+            onClick: renameAsset,
+            quickSwitcherLabel: 'Rename asset...',
+            subMenu: null,
+            type: 'item',
+            value: 'rename-asset',
+            disabled: mutationsDisabled,
+        },
+        {
+            id: 'delete-asset',
+            keyHint: null,
+            label: 'Delete...',
+            leftItem: null,
+            onClick: deleteAsset,
+            quickSwitcherLabel: 'Delete asset...',
+            subMenu: null,
+            type: 'item',
+            value: 'delete-asset',
+            disabled: mutationsDisabled,
+        },
+    ];
+};
+exports.getAssetContextMenuItems = getAssetContextMenuItems;
 const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const openFolderTimerRef = (0, react_1.useRef)(null);
@@ -199,7 +286,7 @@ 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;
+        return (0, exports.getCanDragAsset)({ readOnlyStudio, relativePath });
     }, [readOnlyStudio, relativePath]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
@@ -313,7 +400,12 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
         });
     }, [relativePath]);
-    const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
+    const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
+        browserStudioCanMutateAssets: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null ? null : true,
+        readOnlyStudio,
+        connectionStatus,
+        publicFolderExists: window.remotion_publicFolderExists,
+    });
     const deleteAsset = (0, react_1.useCallback)(() => {
         confirm({
             title: 'Delete asset',
@@ -338,90 +430,34 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
         });
     }, [confirm, relativePath]);
+    const renameAsset = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'rename-static-file',
+            relativePath,
+        });
+    }, [relativePath, setSelectedModal]);
     const contextMenu = (0, react_1.useMemo)(() => {
-        return [
-            (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
-            {
-                type: 'divider',
-                id: 'open-in-new-window-divider',
-            },
-            {
-                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: `Show in ${fileManagerName}`,
-                leftItem: null,
-                onClick: openAssetInExplorer,
-                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
-                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: deleteAsset,
-                quickSwitcherLabel: 'Delete asset...',
-                subMenu: null,
-                type: 'item',
-                value: 'delete-asset',
-                disabled: serverActionDisabled,
-            },
-        ];
+        return (0, exports.getAssetContextMenuItems)({
+            relativePath,
+            fileManagerName,
+            copyFileName,
+            copyStaticFilePath,
+            openAssetInExplorer,
+            renameAsset,
+            deleteAsset,
+            fileExplorerDisabled,
+            mutationsDisabled,
+        });
     }, [
         copyFileName,
         copyStaticFilePath,
         deleteAsset,
+        fileExplorerDisabled,
         fileManagerName,
+        mutationsDisabled,
         openAssetInExplorer,
+        renameAsset,
         relativePath,
-        serverActionDisabled,
-        setSelectedModal,
     ]);
     const revealInExplorer = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -433,7 +469,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [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(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, 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: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? 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: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -42,6 +42,7 @@ const ResetZoomButton_1 = require("./ResetZoomButton");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const use_element_overwrite_confirmation_1 = require("./use-element-overwrite-confirmation");
 const elementInstallCompositionIdStyle = {
     fontFamily: 'monospace',
     fontSize: 13,
@@ -158,6 +159,7 @@ const Canvas = ({ canvasContent, size }) => {
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
@@ -682,6 +684,7 @@ const Canvas = ({ canvasContent, size }) => {
                     element: activeElementInstallRequest.element,
                     compositionFile: activeElementInstallRequest.compositionFile,
                     compositionId: activeElementInstallRequest.compositionId,
+                    confirmOverwrite: confirmElementOverwrite,
                     dropPosition: null,
                     from: null,
                 });
@@ -703,7 +706,7 @@ const Canvas = ({ canvasContent, size }) => {
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, confirm]);
+    }, [activeElementInstallRequest, confirm, confirmElementOverwrite]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -871,6 +874,7 @@ const Canvas = ({ canvasContent, size }) => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
+                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                 dropPosition,
@@ -888,6 +892,7 @@ const Canvas = ({ canvasContent, size }) => {
         cannotAddSequence,
         chooseSvgImportMode,
         compositionFile,
+        confirmElementOverwrite,
         config,
         contentDimensions,
         currentCompositionId,

package/dist/components/CaptionInspector.d.ts

@@ -0,0 +1,10 @@
+import type { Caption } from '@remotion/captions';
+import React from 'react';
+export declare const CaptionInspector: React.FC<{
+    readonly captions: Caption[];
+    readonly onTextChange: (captions: Caption[]) => void;
+    readonly onTextSave: ((captions: Caption[]) => void) | null;
+    readonly onTextCancel: (() => void) | null;
+    readonly readOnly: boolean;
+    readonly readOnlyTitle: string | null;
+}>;

package/dist/components/CaptionInspector.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const CaptionTextEditor_1 = require("./CaptionTextEditor");
+const common_1 = require("./InspectorPanel/common");
+const styles_1 = require("./InspectorPanel/styles");
+const readOnlyStatus = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    fontWeight: 'normal',
+    lineHeight: '16px',
+    marginLeft: 12,
+};
+const CaptionInspector = ({ captions, onTextChange, onTextSave, onTextCancel, readOnly, readOnlyTitle, }) => {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                        jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, children: "Captions" }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null })
+                    ] }) }), jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })
+        ] }));
+};
+exports.CaptionInspector = CaptionInspector;

package/dist/components/CaptionTextEditor.d.ts

@@ -0,0 +1,9 @@
+import type { Caption } from '@remotion/captions';
+import React from 'react';
+export declare const CaptionTextEditor: React.FC<{
+    readonly captions: Caption[];
+    readonly onChange: (captions: Caption[]) => void;
+    readonly onSave: ((captions: Caption[]) => void) | null;
+    readonly onCancel: (() => void) | null;
+    readonly readOnly: boolean;
+}>;