@remotion/studio 4.0.521 → 4.0.523

package/dist/components/KeyboardShortcutsSettings.js

@@ -39,11 +39,14 @@ const react_1 = __importStar(require("react"));
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const colors_1 = require("../helpers/colors");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
-const ConfigSelect_1 = require("./ConfigSelect");
+const caret_1 = require("../icons/caret");
+const Checkbox_1 = require("./Checkbox");
+const InlineDropdown_1 = require("./InlineDropdown");
 const styles_1 = require("./InspectorPanel/styles");
 const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
 const layout_1 = require("./layout");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const layout_2 = require("./RenderModal/layout");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
@@ -65,11 +68,11 @@ const shortcutSectionTitle = {
 const shortcutRow = {
     alignItems: 'center',
     borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
-    display: 'flex',
-    gap: 16,
-    justifyContent: 'space-between',
+    columnGap: 4,
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) minmax(76px, max-content) 14px',
     margin: '0 16px',
-    minHeight: 38,
+    minHeight: 42,
 };
 const lastShortcutRow = {
     ...shortcutRow,
@@ -81,11 +84,24 @@ const actionName = {
     lineHeight: 1.4,
     minWidth: 0,
 };
+const shortcutCell = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    minWidth: 0,
+};
+const actionCell = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 6,
+    justifyContent: 'flex-start',
+    whiteSpace: 'nowrap',
+};
 const chords = {
     alignItems: 'center',
     display: 'flex',
-    flexShrink: 0,
     gap: 6,
+    whiteSpace: 'nowrap',
 };
 const chord = {
     alignItems: 'center',
@@ -105,50 +121,95 @@ const key = {
     padding: '1px 5px',
     textAlign: 'center',
 };
+const chordButton = {
+    alignItems: 'center',
+    background: 'transparent',
+    border: 0,
+    cursor: 'pointer',
+    display: 'flex',
+    font: 'inherit',
+    margin: 0,
+    padding: '4px 0',
+};
 const alternative = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 11,
 };
+const emptyShortcut = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    fontStyle: 'italic',
+};
+const isSameShortcut = (first, second) => {
+    var _a, _b, _c, _d, _e, _f;
+    return first.key.toLowerCase() === second.key.toLowerCase() &&
+        ((_a = first.commandOrControl) !== null && _a !== void 0 ? _a : false) === ((_b = second.commandOrControl) !== null && _b !== void 0 ? _b : false) &&
+        ((_c = first.shift) !== null && _c !== void 0 ? _c : false) === ((_d = second.shift) !== null && _d !== void 0 ? _d : false) &&
+        ((_e = first.alt) !== null && _e !== void 0 ? _e : false) === ((_f = second.alt) !== null && _f !== void 0 ? _f : false);
+};
+const ShortcutChords = ({ values }) => {
+    if (values.length === 0) {
+        return jsx_runtime_1.jsx("span", { style: emptyShortcut, children: "Unassigned" });
+    }
+    return (jsx_runtime_1.jsx("span", { style: chords, children: values.map((keys, chordIndex) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [chordIndex > 0 ? jsx_runtime_1.jsx("span", { style: alternative, children: "or" }) : null, jsx_runtime_1.jsx("span", { style: chord, children: keys.map((keyboardKey) => (jsx_runtime_1.jsx("kbd", { style: key, children: keyboardKey }, keyboardKey))) })
+            ] }, keys.join('-')))) }));
+};
 const KeyboardShortcutsSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
-    const [enabled, setEnabled] = (0, react_1.useState)(null);
-    const [edited, setEdited] = (0, react_1.useState)(false);
+    const [enabled, setEnabled] = (0, react_1.useState)(true);
+    const [configuredShortcuts, setConfiguredShortcuts] = (0, react_1.useState)({});
+    const [enabledEdited, setEnabledEdited] = (0, react_1.useState)(false);
+    const [shortcutsEdited, setShortcutsEdited] = (0, react_1.useState)(false);
+    const [recording, setRecording] = (0, react_1.useState)(null);
     const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(-1);
     const [error, setError] = (0, react_1.useState)(null);
     const displayedShortcutGroups = (0, studio_runtime_config_1.getStudioAskAIEnabled)()
         ? [...keyboard_shortcuts_1.keyboardShortcutGroups, keyboard_shortcuts_1.askAIKeyboardShortcutGroup]
         : keyboard_shortcuts_1.keyboardShortcutGroups;
+    const visibleShortcutGroups = enabled ? displayedShortcutGroups : [];
     (0, react_1.useEffect)(() => {
         var _a;
         var _b;
         if (studioRuntimeConfig === null) {
             return;
         }
-        setEnabled((_b = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.keyboardShortcutsEnabled) !== null && _b !== void 0 ? _b : null);
-        setEdited(false);
+        setEnabled(((_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.keyboardShortcutsEnabled) !==
+            false);
+        setConfiguredShortcuts((_b = studioRuntimeConfig.keyboardShortcuts) !== null && _b !== void 0 ? _b : {});
+        setEnabledEdited(false);
+        setShortcutsEdited(false);
+        setRecording(null);
         setSyncedRevision(revision);
         setError(null);
     }, [revision, studioRuntimeConfig]);
-    const onEnabledChange = (0, react_1.useCallback)((value) => {
-        setEnabled(value);
-        setEdited(true);
+    const onEnabledChange = (0, react_1.useCallback)((event) => {
+        setEnabled(event.target.checked);
+        setEnabledEdited(true);
     }, []);
     const updates = (0, react_1.useMemo)(() => {
-        if (!edited) {
-            return [];
-        }
-        return enabled === null
-            ? [{ setter: 'setKeyboardShortcutsEnabled', type: 'delete' }]
-            : [
-                {
+        const nextUpdates = [];
+        if (enabledEdited) {
+            nextUpdates.push(enabled
+                ? { setter: 'setKeyboardShortcutsEnabled', type: 'delete' }
+                : {
                     setter: 'setKeyboardShortcutsEnabled',
                     type: 'set',
-                    value: enabled,
-                },
-            ];
-    }, [edited, enabled]);
+                    value: false,
+                });
+        }
+        if (shortcutsEdited) {
+            nextUpdates.push(Object.keys(configuredShortcuts).length === 0
+                ? { setter: 'setKeyboardShortcuts', type: 'delete' }
+                : {
+                    setter: 'setKeyboardShortcuts',
+                    type: 'set',
+                    value: configuredShortcuts,
+                });
+        }
+        return nextUpdates;
+    }, [configuredShortcuts, enabled, enabledEdited, shortcutsEdited]);
     const ready = studioRuntimeConfig !== null && syncedRevision === revision;
     (0, use_auto_save_config_1.useAutoSaveConfig)({
         enabled: ready && !isBrowserStudio,
@@ -161,15 +222,133 @@ const KeyboardShortcutsSettings = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [isBrowserStudio ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("p", { style: dividerLabel, children: "General" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Keyboard shortcuts", onChange: onEnabledChange, options: ConfigSelect_1.booleanOptions, value: enabled })
-                ] })), displayedShortcutGroups.map((group, groupIndex) => (jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsx("p", { style: shortcutSectionTitle, children: group.name }), jsx_runtime_1.jsx("div", { role: "list", "aria-label": group.name, children: group.shortcuts.map((shortcut, shortcutIndex) => (jsx_runtime_1.jsxs("div", { role: "listitem", style: groupIndex === displayedShortcutGroups.length - 1 &&
-                                shortcutIndex === group.shortcuts.length - 1
-                                ? lastShortcutRow
-                                : shortcutRow, children: [
-                                jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), jsx_runtime_1.jsx("span", { style: chords, children: shortcut.chords.map((keys, chordIndex) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [chordIndex > 0 ? (jsx_runtime_1.jsx("span", { style: alternative, children: "or" })) : null, jsx_runtime_1.jsx("span", { style: chord, children: keys.map((keyboardKey) => (jsx_runtime_1.jsx("kbd", { style: key, children: keyboardKey }, keyboardKey))) })
-                                        ] }, keys.join('-')))) })
-                            ] }, shortcut.action))) })
+                    jsx_runtime_1.jsx("p", { style: dividerLabel, children: "General" }), jsx_runtime_1.jsxs("label", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Keyboard shortcuts" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: enabled, name: "keyboard-shortcuts", onChange: onEnabledChange }) })
+                        ] })
+                ] })), visibleShortcutGroups.map((group, groupIndex) => (jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("p", { style: shortcutSectionTitle, children: group.name }), jsx_runtime_1.jsx("div", { role: "list", "aria-label": group.name, children: group.shortcuts.map((shortcut, shortcutIndex) => {
+                            var _a;
+                            const configured = shortcut.actionId === null
+                                ? false
+                                : Object.prototype.hasOwnProperty.call(configuredShortcuts, shortcut.actionId);
+                            const shortcutValues = shortcut.actionId === null
+                                ? ((_a = shortcut.fixedChords) !== null && _a !== void 0 ? _a : [])
+                                : (0, keyboard_shortcuts_1.getKeyboardShortcutsForAction)(shortcut.actionId, configuredShortcuts).map(keyboard_shortcuts_1.formatKeyboardShortcut);
+                            const shortcutButtonId = shortcut.actionId === null
+                                ? null
+                                : `keyboard-shortcut-${shortcut.actionId}`;
+                            const shortcutMenuItems = shortcut.actionId === null
+                                ? []
+                                : [
+                                    {
+                                        id: 'remap-shortcut',
+                                        keyHint: null,
+                                        label: 'Remap shortcut',
+                                        leftItem: null,
+                                        onClick: () => {
+                                            setError(null);
+                                            setRecording(shortcut.actionId);
+                                            requestAnimationFrame(() => {
+                                                var _a;
+                                                (_a = document.getElementById(shortcutButtonId)) === null || _a === void 0 ? void 0 : _a.focus();
+                                            });
+                                        },
+                                        quickSwitcherLabel: null,
+                                        subMenu: null,
+                                        type: 'item',
+                                        value: 'remap-shortcut',
+                                    },
+                                    ...(configured
+                                        ? [
+                                            {
+                                                id: 'reset-shortcut',
+                                                keyHint: null,
+                                                label: 'Reset to default',
+                                                leftItem: null,
+                                                onClick: () => {
+                                                    setConfiguredShortcuts((current) => {
+                                                        const next = { ...current };
+                                                        delete next[shortcut.actionId];
+                                                        return next;
+                                                    });
+                                                    setShortcutsEdited(true);
+                                                },
+                                                quickSwitcherLabel: null,
+                                                subMenu: null,
+                                                type: 'item',
+                                                value: 'reset-shortcut',
+                                            },
+                                        ]
+                                        : []),
+                                    ...(configuredShortcuts[shortcut.actionId] !== null
+                                        ? [
+                                            {
+                                                id: 'disable-shortcut',
+                                                keyHint: null,
+                                                label: 'Disable shortcut',
+                                                leftItem: null,
+                                                onClick: () => {
+                                                    setConfiguredShortcuts((current) => ({
+                                                        ...current,
+                                                        [shortcut.actionId]: null,
+                                                    }));
+                                                    setShortcutsEdited(true);
+                                                },
+                                                quickSwitcherLabel: null,
+                                                subMenu: null,
+                                                type: 'item',
+                                                value: 'disable-shortcut',
+                                            },
+                                        ]
+                                        : []),
+                                ];
+                            return (jsx_runtime_1.jsxs("div", { role: "listitem", style: groupIndex === displayedShortcutGroups.length - 1 &&
+                                    shortcutIndex === group.shortcuts.length - 1
+                                    ? lastShortcutRow
+                                    : shortcutRow, children: [
+                                    jsx_runtime_1.jsx("span", { style: actionName, children: shortcut.action }), shortcut.actionId === null || isBrowserStudio ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx("span", { style: shortcutCell, children: jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues }) }), jsx_runtime_1.jsx("span", {})
+                                        ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx("span", { style: shortcutCell, children: jsx_runtime_1.jsx("button", { id: shortcutButtonId, type: "button", style: chordButton, "aria-label": `Change shortcut for ${shortcut.action}`, onClick: () => {
+                                                        setError(null);
+                                                        setRecording(shortcut.actionId);
+                                                    }, onKeyDown: (event) => {
+                                                        if (recording !== shortcut.actionId)
+                                                            return;
+                                                        event.preventDefault();
+                                                        event.stopPropagation();
+                                                        if (event.key === 'Escape') {
+                                                            setRecording(null);
+                                                            return;
+                                                        }
+                                                        const value = (0, keyboard_shortcuts_1.shortcutFromKeyboardEvent)(event.nativeEvent);
+                                                        if (value === null)
+                                                            return;
+                                                        const conflict = displayedShortcutGroups
+                                                            .flatMap((item) => item.shortcuts)
+                                                            .find((item) => item.actionId !== null &&
+                                                            item.actionId !== shortcut.actionId &&
+                                                            (0, keyboard_shortcuts_1.getKeyboardShortcutsForAction)(item.actionId, configuredShortcuts).some((candidate) => (0, keyboard_shortcuts_1.keyboardShortcutsOverlap)(candidate, value)));
+                                                        if (conflict) {
+                                                            setError(`Shortcut is already used by “${conflict.action}”.`);
+                                                            return;
+                                                        }
+                                                        setConfiguredShortcuts((current) => {
+                                                            if (keyboard_shortcuts_1.defaultKeyboardShortcuts[shortcut.actionId].some((defaultShortcut) => isSameShortcut(defaultShortcut, value))) {
+                                                                const next = { ...current };
+                                                                delete next[shortcut.actionId];
+                                                                return next;
+                                                            }
+                                                            return {
+                                                                ...current,
+                                                                [shortcut.actionId]: value,
+                                                            };
+                                                        });
+                                                        setShortcutsEdited(true);
+                                                        setRecording(null);
+                                                    }, children: recording === shortcut.actionId ? (jsx_runtime_1.jsx("span", { style: emptyShortcut, children: "Press shortcut\u2026" })) : (jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues })) }) }), jsx_runtime_1.jsx("span", { style: actionCell, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }), title: `Actions for ${shortcut.action}`, values: shortcutMenuItems, variant: "compact" }) })
+                                        ] }))] }, shortcut.action));
+                        }) })
                 ] }, group.name))), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', type: "error" }) })
                 ] })) : null] }));

package/dist/components/MenuBuildIndicator.js

@@ -10,7 +10,7 @@ const MenuCompositionName_1 = require("./MenuCompositionName");
 const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
-    opacity: 0.8,
+    color: colors_1.WHITE_ALPHA_80,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -19,9 +19,14 @@ const cwd = {
 };
 const spinnerSize = 14;
 const spinner = {
+    opacity: 0.8,
     position: 'relative',
     width: spinnerSize,
 };
+const openInEditor = {
+    display: 'flex',
+    opacity: 0.8,
+};
 const noSpinner = {
     position: 'relative',
     width: spinnerSize,
@@ -48,7 +53,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder" }) }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };

package/dist/components/MenuCompositionName.js

@@ -4,26 +4,58 @@ exports.MenuCompositionName = 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 colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const noop_1 = require("../helpers/noop");
+const modals_1 = require("../state/modals");
+const composition_menu_items_1 = require("./composition-menu-items");
+const ContextMenu_1 = require("./ContextMenu");
+const InlineDropdown_1 = require("./InlineDropdown");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("./use-default-editor-info");
 const baseStyle = {
-    color: 'inherit',
+    cursor: 'default',
     textDecoration: 'none',
     fontSize: 'inherit',
     textUnderlineOffset: 2,
     whiteSpace: 'nowrap',
 };
+const assetNameStyle = {
+    ...baseStyle,
+    color: colors_1.WHITE_ALPHA_80,
+};
+const contextMenuStyle = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
 const compositionNameStyle = {
     ...baseStyle,
-    cursor: 'default',
+    appearance: 'none',
+    border: 'none',
+    backgroundColor: colors_1.TRANSPARENT,
+    fontFamily: 'inherit',
+    fontSize: 13,
+    height: 'auto',
+    lineHeight: 1.5,
+    margin: 0,
+    padding: 0,
+    width: 'auto',
+    ...hoverable_1.NO_HOVER_BACKGROUND_STYLE,
 };
 const slashStyle = {
     color: colors_1.LIGHT_TEXT,
     marginInline: 4,
+    opacity: 0.8,
     position: 'relative',
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a;
+    var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const composition = (0, react_1.useMemo)(() => {
         var _a;
@@ -33,12 +65,36 @@ const MenuCompositionName = () => {
         return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        return (0, composition_menu_items_1.getCompositionContextMenuItems)({
+            closeMenu: noop_1.noop,
+            composition,
+            connectionStatus,
+            editorId: defaultEditorId,
+            editorName: defaultEditorName,
+            includeCompositionManagementItems: true,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
+    }, [
+        composition,
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     if (!composition && asset === null) {
         return null;
     }
-    const name = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : asset;
+    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("span", { style: compositionNameStyle, children: name })
-        ] }));
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, title: "Open composition menu", unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/MenuToolbar.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const search_1 = require("../icons/search");
 const modals_1 = require("../state/modals");
@@ -18,9 +18,9 @@ const layout_1 = require("./layout");
 const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
+const SettingsButton_1 = require("./SettingsButton");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UndoRedoButtons_1 = require("./UndoRedoButtons");
-const UpdateCheck_1 = require("./UpdateCheck");
 const row = {
     alignItems: 'center',
     flexDirection: 'row',
@@ -132,13 +132,15 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     const renderSearchIcon = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(search_1.SearchIcon, { color: color, width: 18, height: 18 });
     }, []);
-    const searchTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+    const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
+    const searchTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || quickSwitcherShortcut === ''
         ? 'Quick Switcher'
-        : `Quick Switcher (${ShortcutHint_1.cmdOrCtrlCharacter}+K)`;
+        : `Quick Switcher (${quickSwitcherShortcut})`;
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
                             return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                        }) }), showUpdates ? jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {}) : null] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                        }) })
+                ] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SettingsButton_1.SettingsButton, { showUpdates: showUpdates }), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/ModalContainer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const getMaxModalWidth: (width: number) => string;
 export declare const getMaxModalHeight: (height: number) => string;
 export declare const ModalContainer: React.FC<{
+    readonly ariaLabel?: string;
     readonly ariaLabelledBy?: string;
     readonly onEscape: () => void;
     readonly onOutsideClick: () => void;

package/dist/components/ModalContainer.js

@@ -29,11 +29,11 @@ const panel = {
     color: colors_1.WHITE,
     margin: 'auto',
 };
-const ModalContainer = ({ ariaLabelledBy, children, onEscape, onOutsideClick, noZIndex, panelStyle, }) => {
+const ModalContainer = ({ ariaLabel, ariaLabelledBy, children, onEscape, onOutsideClick, noZIndex, panelStyle, }) => {
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : undefined, "aria-modal": "true", className: "css-reset", role: "dialog", style: backgroundOverlay, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : undefined, "aria-modal": "true", className: "css-reset", role: "dialog", style: backgroundOverlay, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/Modals.js

@@ -33,6 +33,8 @@ const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
 const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
+const TranscriptionModalWithOptionalWhisper_1 = require("./Transcription/TranscriptionModalWithOptionalWhisper");
+const VideoMattingModalWithOptionalPackage_1 = require("./VideoMatting/VideoMattingModalWithOptionalPackage");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const modalContextType = (0, react_1.useContext)(modals_1.SelectedModalContext);
@@ -107,6 +109,6 @@ const Modals = ({ readOnlyStudio }) => {
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/ModelManager.d.ts

@@ -0,0 +1,16 @@
+type ModelInfo<Model extends string> = {
+    readonly name: Model;
+    readonly webGpuDownloadSize: number;
+};
+export declare const ModelManager: <Model extends string>({ ariaLabel, availableModels, description, indent, isModelCached, loadModel, prepare, removeModel, visible, }: {
+    readonly ariaLabel: string;
+    readonly availableModels: readonly ModelInfo<Model>[];
+    readonly description: string | null;
+    readonly indent: boolean;
+    readonly isModelCached: (model: Model) => Promise<boolean>;
+    readonly loadModel: (model: Model, onProgress: (progress: number | null) => void) => Promise<unknown>;
+    readonly prepare: (() => Promise<void>) | null;
+    readonly removeModel: (model: Model) => Promise<void>;
+    readonly visible: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};