@remotion/studio 4.0.500 → 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");
@@ -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

@@ -40,6 +40,7 @@ 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',
@@ -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

@@ -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;
+}>;

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/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/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.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 = [
@@ -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 (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { 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;

package/dist/components/GlobalKeybindings.js

@@ -115,6 +115,7 @@ const GlobalKeybindings = () => {
                         : 'compositions',
                     invocationTimestamp: Date.now(),
                     assetSelection: null,
+                    compositionSelection: null,
                 });
             },
             triggerIfInputFieldFocused: true,
@@ -165,6 +166,7 @@ const GlobalKeybindings = () => {
                     mode: 'docs',
                     invocationTimestamp: Date.now(),
                     assetSelection: null,
+                    compositionSelection: null,
                 });
             },
             commandCtrlKey: false,

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
-export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean, frame?: number | null) => void;
+export declare const useSelectComposition: () => (c: Pick<import("remotion").AnyComposition, "folderName" | "id" | "parentFolderName">, push: boolean, frame?: number | null) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InlineAction.js

@@ -27,6 +27,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: 3,
+            opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);

package/dist/components/InlineCaptionInspector.d.ts

@@ -0,0 +1,11 @@
+import type { Caption } from '@remotion/captions';
+import React from 'react';
+import type { SequenceControls, SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InlineCaptionInspector: React.FC<{
+    readonly captions: Caption[];
+    readonly controls: SequenceControls;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly readOnlyStudio: boolean;
+    readonly validatedLocation: CodePosition;
+}>;

package/dist/components/InlineCaptionInspector.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineCaptionInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const CaptionInspector_1 = require("./CaptionInspector");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const serializeCaptions = (captions) => {
+    return JSON.stringify(captions);
+};
+const getCaptionPatches = ({ previous, next, }) => {
+    if (previous.length !== next.length) {
+        return null;
+    }
+    const patches = [];
+    for (const [index, before] of previous.entries()) {
+        const after = next[index];
+        if (!after) {
+            return null;
+        }
+        if (before.text !== after.text) {
+            patches.push({
+                index,
+                before,
+                changes: { text: after.text },
+            });
+        }
+    }
+    return patches;
+};
+const InlineCaptionInspector = ({ captions, controls, nodePath, readOnlyStudio, validatedLocation }) => {
+    var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const captionStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.captions;
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const canSave = !readOnlyStudio && clientId !== null && (captionStatus === null || captionStatus === void 0 ? void 0 : captionStatus.status) === 'static';
+    const [draftCaptions, setDraftCaptions] = (0, react_1.useState)(captions);
+    const savedCaptions = (0, react_1.useRef)(captions);
+    const runtimeSignature = serializeCaptions(captions);
+    const lastRuntimeSignature = (0, react_1.useRef)(runtimeSignature);
+    (0, react_1.useEffect)(() => {
+        if (lastRuntimeSignature.current === runtimeSignature) {
+            return;
+        }
+        lastRuntimeSignature.current = runtimeSignature;
+        savedCaptions.current = captions;
+        setDraftCaptions(captions);
+        clearDragOverrides(nodePath);
+    }, [captions, clearDragOverrides, nodePath, runtimeSignature]);
+    const updateCaptions = (0, react_1.useCallback)((nextCaptions) => {
+        setDraftCaptions(nextCaptions);
+        setDragOverrides(nodePath, 'captions', remotion_1.Internals.makeStaticDragOverride(nextCaptions));
+    }, [nodePath, setDragOverrides]);
+    const cancelCaptions = (0, react_1.useCallback)(() => {
+        setDraftCaptions(savedCaptions.current);
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
+    const saveCaptions = (0, react_1.useCallback)((nextCaptions) => {
+        const patches = getCaptionPatches({
+            previous: savedCaptions.current,
+            next: nextCaptions,
+        });
+        setDraftCaptions(nextCaptions);
+        if (!canSave ||
+            clientId === null ||
+            patches === null ||
+            patches.length === 0) {
+            clearDragOverrides(nodePath);
+            return;
+        }
+        savedCaptions.current = nextCaptions;
+        (0, save_sequence_prop_1.saveInlineCaptionPatches)({
+            fileName: validatedLocation.source,
+            nodePath,
+            schema: controls.schema,
+            patches,
+            nextCaptions,
+            setPropStatuses,
+            clientId,
+            undoLabel: 'Update captions',
+            redoLabel: 'Update captions again',
+        });
+        clearDragOverrides(nodePath);
+    }, [
+        canSave,
+        clearDragOverrides,
+        clientId,
+        controls.schema,
+        nodePath,
+        setPropStatuses,
+        validatedLocation.source,
+    ]);
+    const readOnlyTitle = readOnlyStudio
+        ? 'Caption editing is unavailable in read-only Studio'
+        : clientId === null
+            ? 'Caption editing requires a Studio server connection'
+            : (captionStatus === null || captionStatus === void 0 ? void 0 : captionStatus.status) === 'computed'
+                ? 'Captions must be a direct inline JSX array to edit them'
+                : 'Captions are not ready for editing';
+    return (jsx_runtime_1.jsx(CaptionInspector_1.CaptionInspector, { captions: draftCaptions, onTextChange: updateCaptions, onTextSave: saveCaptions, onTextCancel: cancelCaptions, readOnly: !canSave, readOnlyTitle: canSave ? null : readOnlyTitle }));
+};
+exports.InlineCaptionInspector = InlineCaptionInspector;