@remotion/studio 4.0.522 → 4.0.524

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/LazySyntaxHighlightedSource.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LazySyntaxHighlightedSource: React.FC<{
+    readonly source: string;
+}>;

package/dist/components/LazySyntaxHighlightedSource.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazySyntaxHighlightedSource = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SyntaxHighlightedSource = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntaxHighlightedSource'))));
+const LazySyntaxHighlightedSource = ({ source }) => {
+    return (jsx_runtime_1.jsx(react_1.Suspense, { fallback: source, children: jsx_runtime_1.jsx(SyntaxHighlightedSource, { source: source }) }));
+};
+exports.LazySyntaxHighlightedSource = LazySyntaxHighlightedSource;

package/dist/components/LoopToggle.js

@@ -4,9 +4,12 @@ exports.LoopToggle = exports.toggleLoop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const loop_1 = require("../state/loop");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Loop video';
+const accessibilityLabel = 'Loop';
 const toggleLoop = (setLoop) => {
     setLoop((currentLoop) => {
         (0, loop_1.persistLoopOption)(!currentLoop);
@@ -15,9 +18,12 @@ const toggleLoop = (setLoop) => {
 };
 exports.toggleLoop = toggleLoop;
 const LoopToggle = ({ loop, setLoop }) => {
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLoop');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleLoop');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/MenuToolbar.js

@@ -3,24 +3,25 @@ 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");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 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 +133,16 @@ 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)()
-        ? 'Quick Switcher'
-        : `Quick Switcher (${ShortcutHint_1.cmdOrCtrlCharacter}+K)`;
+    const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
+    const quickSwitcherAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('quickSwitcher');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     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) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Quick switcher", shortcut: shortcutsDisabled ? null : quickSwitcherShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, "aria-label": "Quick switcher", "aria-keyshortcuts": shortcutsDisabled
+                                ? undefined
+                                : quickSwitcherAriaShortcut || undefined }) })) : (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 {};