@remotion/studio 4.0.499 → 4.0.501

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

@@ -6,19 +6,18 @@ const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
-const use_keybinding_1 = require("../helpers/use-keybinding");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
 const actions_1 = require("./RenderQueue/actions");
 const root_composition_menu_items_1 = require("./root-composition-menu-items");
 const useCompositionNavigation = () => {
@@ -65,28 +64,6 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
-const quickSwitcherArea = {
-    padding: '4px 12px',
-    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
-};
-const quickSwitcherTrigger = {
-    backgroundColor: colors_1.WHITE_ALPHA_06,
-    borderRadius: 5,
-    padding: '4px 10px',
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 12,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    border: 'none',
-    width: '100%',
-    appearance: 'none',
-};
-const shortcutLabel = {
-    fontSize: 11,
-    opacity: 0.6,
-};
 const autoScrollThreshold = 70;
 const maxAutoScrollSpeed = 18;
 const getAutoScrollSpeed = ({ clientY, element, }) => {
@@ -146,13 +123,6 @@ const CompositionSelector = () => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
     }, []);
-    const openQuickSwitcher = (0, react_1.useCallback)(() => {
-        setSelectedModal({
-            type: 'quick-switcher',
-            mode: 'compositions',
-            invocationTimestamp: Date.now(),
-        });
-    }, [setSelectedModal]);
     const clearRootDragHover = (0, react_1.useCallback)(() => {
         setRootDragHovered(false);
     }, []);
@@ -264,7 +234,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
                             : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/ControlButton.js

@@ -15,6 +15,7 @@ const ControlButton = (props) => {
             justifyContent: 'center',
             width: exports.CONTROL_BUTTON_SIZE,
             height: exports.CONTROL_BUTTON_SIZE,
+            flexShrink: 0,
             background: 'none',
             border: 'none',
             padding: 0,

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/ExplorerPanel.js

@@ -43,6 +43,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
     }, []);
     (0, react_1.useImperativeHandle)(ExplorerPanelRef_1.explorerSidebarTabs, () => {
         return {
+            getSelectedPanel: () => panel,
             selectAssetsPanel: () => {
                 setPanel('assets');
                 persistSelectedOptionsSidebarPanel('assets');
@@ -52,7 +53,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
                 persistSelectedOptionsSidebarPanel('compositions');
             },
         };
-    }, []);
+    }, [panel]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();

package/dist/components/ExplorerPanelRef.d.ts

@@ -1,4 +1,6 @@
+export type ExplorerSidebarPanel = 'assets' | 'compositions';
 export declare const explorerSidebarTabs: import("react").RefObject<{
+    getSelectedPanel: () => ExplorerSidebarPanel;
     selectAssetsPanel: () => void;
     selectCompositionPanel: () => void;
 } | null>;

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

@@ -12,6 +12,7 @@ const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const CompositionSelector_1 = require("./CompositionSelector");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const sequencePropShortcuts = {
@@ -106,10 +107,15 @@ const GlobalKeybindings = () => {
             event: 'keydown',
             key: 'k',
             callback: () => {
+                var _a;
                 setSelectedModal({
                     type: 'quick-switcher',
-                    mode: 'compositions',
+                    mode: ((_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.getSelectedPanel()) === 'assets'
+                        ? 'assets'
+                        : 'compositions',
                     invocationTimestamp: Date.now(),
+                    assetSelection: null,
+                    compositionSelection: null,
                 });
             },
             triggerIfInputFieldFocused: true,
@@ -159,6 +165,8 @@ const GlobalKeybindings = () => {
                     type: 'quick-switcher',
                     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.d.ts

@@ -5,5 +5,6 @@ export type InlineActionProps = {
     readonly disabled?: boolean;
     readonly renderAction: RenderInlineAction;
     readonly title?: string;
+    readonly unhoveredColor?: string;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -27,9 +27,10 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: 3,
+            opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

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;

package/dist/components/InlineDropdown.d.ts

@@ -1,5 +1,5 @@
 import { type InlineActionProps } from './InlineAction';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const InlineDropdown: ({ values, ...props }: Omit<InlineActionProps, "onClick"> & {
+export declare const InlineDropdown: ({ values, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
     readonly values: ComboboxValue[];
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineDropdown.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
@@ -15,7 +16,7 @@ const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const InlineDropdown = ({ values, ...props }) => {
+const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -79,7 +80,7 @@ const InlineDropdown = ({ values, ...props }) => {
         setOpened({ type: 'not-open' });
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, ...props }) }), portalStyle
+            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/InspectorPanel/AlignmentControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const AlignmentControls: React.FC<{
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -5,6 +5,7 @@ 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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const align_bottom_1 = require("../../icons/align-bottom");
 const align_center_horizontal_1 = require("../../icons/align-center-horizontal");
 const align_center_vertical_1 = require("../../icons/align-center-vertical");
@@ -62,7 +63,8 @@ const AlignmentControls = ({ track }) => {
     const handleAlign = (0, react_1.useCallback)((direction) => {
         var _a;
         var _b, _c, _d, _e;
-        if (previewServerState.type !== 'connected' ||
+        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ||
+            previewServerState.type !== 'connected' ||
             !track.nodePathInfo ||
             !track.sequence.controls) {
             return;
@@ -177,7 +179,8 @@ const AlignmentControls = ({ track }) => {
         getDragOverrides,
         setPropStatuses,
     ]);
-    if (previewServerState.type !== 'connected' ||
+    if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ||
+        previewServerState.type !== 'connected' ||
         !track.nodePathInfo ||
         !track.sequence.controls ||
         !currentCompositionMetadata) {