@remotion/studio 4.0.500 → 4.0.502

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");
@@ -80,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,

package/dist/components/AssetSelectorItem.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { AssetStructure } from '../helpers/create-folder-tree';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getAssetActionAvailability: ({ readOnlyStudio, connectionStatus, publicFolderExists, }: {
+export declare const getAssetActionAvailability: ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }: {
+    browserStudioCanMutateAssets: boolean | null;
     readOnlyStudio: boolean;
     connectionStatus: "connected" | "disconnected" | "init";
     publicFolderExists: string | null;

package/dist/components/AssetSelectorItem.js

@@ -35,11 +35,12 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 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 studio_protocol_1 = require("@remotion/studio-protocol");
 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,9 +106,10 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
-const getAssetActionAvailability = ({ readOnlyStudio, connectionStatus, publicFolderExists, }) => {
+const getAssetActionAvailability = ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }) => {
     return {
-        mutationsDisabled: readOnlyStudio || connectionStatus !== 'connected',
+        mutationsDisabled: browserStudioCanMutateAssets !== true &&
+            (readOnlyStudio || connectionStatus !== 'connected'),
         fileExplorerDisabled: publicFolderExists === null ||
             readOnlyStudio ||
             connectionStatus !== 'connected',
@@ -336,7 +338,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             mediaMetadata.duration > 0
             ? mediaMetadata.duration
             : null;
-        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+        const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
             type: 'asset',
             assetPath: relativePath,
             width: hasDimensions ? width : null,
@@ -399,6 +401,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         });
     }, [relativePath]);
     const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
+        browserStudioCanMutateAssets: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null ? null : true,
         readOnlyStudio,
         connectionStatus,
         publicFolderExists: window.remotion_publicFolderExists,

package/dist/components/Canvas.js

@@ -5,7 +5,7 @@ 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 drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
@@ -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;
@@ -725,7 +728,7 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        const metadata = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+        const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
         if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' ||
             metadata.width === undefined ||
             metadata.height === undefined) {
@@ -832,7 +835,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,
@@ -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;
+}>;

package/dist/components/CaptionTextEditor.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionTextEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const RemInput_1 = require("./NewComposition/RemInput");
+const container = {
+    alignSelf: 'stretch',
+    backgroundColor: colors_1.BACKGROUND,
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: 'sans-serif',
+    width: '100%',
+};
+const list = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+const row = {
+    alignItems: 'center',
+    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
+    display: 'grid',
+    gap: 12,
+    gridTemplateColumns: '100px minmax(0, 1fr)',
+    padding: '5px 12px',
+};
+const timing = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'monospace',
+    fontSize: 11,
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: '16px',
+    textAlign: 'right',
+    whiteSpace: 'nowrap',
+};
+const empty = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    padding: 12,
+    textAlign: 'center',
+};
+const formatMilliseconds = (milliseconds) => {
+    return Math.round(milliseconds);
+};
+const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) => {
+    const listRef = (0, react_1.useRef)(null);
+    const cancelledBlurIndexes = (0, react_1.useRef)(new Set());
+    const dirtyRef = (0, react_1.useRef)(false);
+    const latestRef = (0, react_1.useRef)({ captions, onSave });
+    latestRef.current = { captions, onSave };
+    const captionRows = (0, react_1.useMemo)(() => {
+        const occurrences = new Map();
+        return captions.map((caption) => {
+            var _a;
+            const signature = [
+                caption.startMs,
+                caption.endMs,
+                caption.timestampMs,
+                caption.confidence,
+            ].join('-');
+            const occurrence = (_a = occurrences.get(signature)) !== null && _a !== void 0 ? _a : 0;
+            occurrences.set(signature, occurrence + 1);
+            return { caption, key: `${signature}-${occurrence}` };
+        });
+    }, [captions]);
+    const commitPending = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!dirtyRef.current) {
+            return;
+        }
+        dirtyRef.current = false;
+        (_b = (_a = latestRef.current).onSave) === null || _b === void 0 ? void 0 : _b.call(_a, latestRef.current.captions);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return commitPending;
+    }, [commitPending]);
+    const updateText = (0, react_1.useCallback)((index, text) => {
+        var _a;
+        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+            return;
+        }
+        const nextCaptions = latestRef.current.captions.map((caption, captionIndex) => {
+            return captionIndex === index ? { ...caption, text } : caption;
+        });
+        latestRef.current.captions = nextCaptions;
+        dirtyRef.current = true;
+        onChange(nextCaptions);
+    }, [onChange]);
+    const focusSibling = (0, react_1.useCallback)((index) => {
+        var _a;
+        const input = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-caption-index="${index}"]`);
+        input === null || input === void 0 ? void 0 : input.focus();
+        input === null || input === void 0 ? void 0 : input.scrollIntoView({ block: 'nearest' });
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { ref: listRef, style: list, children: [captions.length === 0 ? jsx_runtime_1.jsx("div", { style: empty, children: "No captions" }) : null, captionRows.map(({ caption, key }, index) => {
+                    return (jsx_runtime_1.jsxs("div", { style: row, children: [
+                            jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
+                                    if (cancelledBlurIndexes.current.delete(index)) {
+                                        return;
+                                    }
+                                    updateText(index, event.currentTarget.value);
+                                    commitPending();
+                                }, onChange: (event) => updateText(index, event.target.value), onKeyDown: (event) => {
+                                    if (event.key === 'ArrowDown' &&
+                                        index < captions.length - 1) {
+                                        event.preventDefault();
+                                        focusSibling(index + 1);
+                                    }
+                                    if (event.key === 'ArrowUp' && index > 0) {
+                                        event.preventDefault();
+                                        focusSibling(index - 1);
+                                    }
+                                    if (event.key === 'Escape') {
+                                        event.preventDefault();
+                                        cancelledBlurIndexes.current.add(index);
+                                        dirtyRef.current = false;
+                                        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                                        event.currentTarget.blur();
+                                    }
+                                }, rightAlign: false, small: true, status: "ok", style: {
+                                    color: colors_1.WHITE,
+                                    fontFamily: 'sans-serif',
+                                    fontSize: 12,
+                                    lineHeight: '16px',
+                                }, value: caption.text })
+                        ] }, key));
+                })] }) }));
+};
+exports.CaptionTextEditor = CaptionTextEditor;

package/dist/components/CompositionSelector.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -161,7 +161,7 @@ const CompositionSelector = () => {
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
         var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             stopCompositionListAutoScroll();
             return;
         }
@@ -178,7 +178,7 @@ const CompositionSelector = () => {
     const onRootDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -198,7 +198,7 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
         if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }

package/dist/components/CompositionSelectorItem.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const drag_and_drop_1 = require("@remotion/drag-and-drop");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
@@ -150,7 +150,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+        const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
             type: 'composition',
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
@@ -167,7 +167,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -183,7 +183,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -195,7 +195,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
         if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }

package/dist/components/CurrentAsset.js

@@ -5,6 +5,7 @@ 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 browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const format_media_duration_1 = require("../helpers/format-media-duration");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
@@ -88,8 +89,8 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     const imageSrc = (0, exports.getCurrentAssetImageMetadataSource)(assetName);
     const imageMetadata = (0, use_image_metadata_1.useImageMetadata)(imageSrc);
     const canRename = onAssetClick === undefined &&
-        connectionStatus === 'connected' &&
-        !readOnlyStudio;
+        ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null ||
+            (connectionStatus === 'connected' && !readOnlyStudio));
     const onRename = (0, react_1.useCallback)((newName) => {
         renameFile(newName).catch(() => undefined);
     }, [renameFile]);

package/dist/components/EditorContent.js

@@ -35,7 +35,7 @@ const StudioClearSelectionArea = ({ children }) => {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
-    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/EditorContexts.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 export declare const EditorContexts: React.FC<{
     readonly children: React.ReactNode;
-    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/EditorContexts.js

@@ -24,8 +24,8 @@ const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const SnappingProvider_1 = require("./SnappingProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
-const EditorContexts = ({ children, readOnlyStudio }) => {
-    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: [
+const EditorContexts = ({ children }) => {
+    return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { children: [
                     jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
                             jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                         ] })

package/dist/components/FpsCounter.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const label = {
-    color: colors_1.WHITE,
-    fontSize: 15,
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
     fontFamily: 'Arial, Helvetica, sans-serif',
     whiteSpace: 'nowrap',
 };
@@ -59,7 +59,7 @@ const FpsCounter = ({ playbackSpeed }) => {
         const expectedFps = Math.abs(playbackSpeed) * videoConfig.fps;
         return {
             ...label,
-            color: fps < expectedFps * 0.9 ? colors_1.RED : colors_1.WHITE,
+            color: fps < expectedFps * 0.9 ? colors_1.RED : colors_1.LIGHT_TEXT,
         };
     }, [fps, playbackSpeed, videoConfig]);
     if (fps === 0) {

package/dist/components/FullscreenToggle.d.ts

@@ -1 +1,3 @@
-export declare const FullScreenToggle: React.FC<{}>;
+export declare const FullScreenToggle: React.FC<{
+    readonly hidden: boolean;
+}>;

package/dist/components/FullscreenToggle.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const fullscreen_1 = require("../icons/fullscreen");
 const canvas_ref_1 = require("../state/canvas-ref");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = [
@@ -15,7 +16,7 @@ const accessibilityLabel = [
 ]
     .filter(no_react_1.NoReactInternals.truthy)
     .join(' ');
-const FullScreenToggle = () => {
+const FullScreenToggle = ({ hidden }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -44,6 +45,6 @@ const FullScreenToggle = () => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: colors_1.WHITE_HEX, children: jsx_runtime_1.jsx("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: colors_1.WHITE_HEX, style: { width: 18, height: 18 } }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;