@remotion/studio 4.0.522 → 4.0.524

package/dist/components/NewComposition/RenameFolder.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_folder_id_1 = require("../../helpers/get-folder-id");
+const slugify_name_1 = require("../../helpers/slugify-name");
 const validate_folder_rename_1 = require("../../helpers/validate-folder-rename");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
@@ -15,6 +16,7 @@ const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -36,21 +38,24 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const folderNameErrMessage = (0, validate_folder_rename_1.validateFolderRename)({
-        folders,
-        newName,
-        originalName: folderName,
-        parentName,
-    });
-    const valid = folderNameErrMessage === null && folderName !== newName;
+    const slug = (0, slugify_name_1.slugifyName)(newName);
+    const folderNameErrMessage = slug
+        ? (0, validate_folder_rename_1.validateFolderRename)({
+            folders,
+            newName: slug,
+            originalName: folderName,
+            parentName,
+        })
+        : 'Enter a name containing letters or numbers.';
+    const valid = folderNameErrMessage === null && folderName !== slug;
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'rename-folder',
             folderName,
             parentName,
-            newName,
+            newName: slug,
         };
-    }, [folderName, newName, parentName]);
+    }, [folderName, slug, parentName]);
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
@@ -59,7 +64,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${folderId}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                 jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "rename", currentName: folderName, input: newName, slug: slug }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({

package/dist/components/NewComposition/SlugPreview.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const SlugPreview: React.FC<{
+    readonly action: 'create' | 'rename';
+    readonly currentName: string | null;
+    readonly input: string;
+    readonly slug: string;
+}>;

package/dist/components/NewComposition/SlugPreview.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlugPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+const SlugPreview = ({ action, currentName, input, slug }) => {
+    if (!slug ||
+        slug === input ||
+        slug === input.trim() ||
+        slug === currentName) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsxs("div", { "aria-live": "polite", style: { fontSize: 12, color: colors_1.LIGHT_TEXT }, children: ["Will be ", action === 'create' ? 'created as' : 'renamed to', " ", slug] })
+        ] }));
+};
+exports.SlugPreview = SlugPreview;

package/dist/components/OptionalPackageModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const isOptionalPackageInstalled: (packageName: string) => boolean;
+export declare const markOptionalPackageInstalled: (packageName: string) => void;
+export declare const installOptionalPackage: (packageName: string) => Promise<void>;
+export declare const useOptionalPackageInstalled: (packageName: string) => boolean;
+export declare const OptionalPackageModal: React.FC<{
+    readonly ariaLabel: string;
+    readonly children: React.ReactNode;
+    readonly packageName: string;
+    readonly title: string;
+}>;

package/dist/components/OptionalPackageModal.js

@@ -0,0 +1,155 @@
+"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.OptionalPackageModal = exports.useOptionalPackageInstalled = exports.installOptionalPackage = exports.markOptionalPackageInstalled = exports.isOptionalPackageInstalled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const install_package_1 = require("../api/install-package");
+const colors_1 = require("../helpers/colors");
+const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const Spinner_1 = require("./Spinner");
+const panelStyle = {
+    width: 'min(520px, calc(100vw - 40px))',
+};
+const contentStyle = {
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    padding: 16,
+};
+const codeStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 'inherit',
+};
+const statusStyle = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    gap: 10,
+    lineHeight: 1.5,
+};
+const errorStyle = {
+    color: colors_1.WARNING_COLOR,
+    marginTop: 12,
+    whiteSpace: 'pre-wrap',
+};
+const cancelStyle = { minWidth: 90 };
+const isOptionalPackageInstalled = (packageName) => {
+    var _a;
+    var _b;
+    return (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(packageName)) !== null && _b !== void 0 ? _b : false;
+};
+exports.isOptionalPackageInstalled = isOptionalPackageInstalled;
+const OPTIONAL_PACKAGE_INSTALLED_EVENT = 'remotion-optional-package-installed';
+const markOptionalPackageInstalled = (packageName) => {
+    var _a;
+    window.remotion_installedPackages = Array.from(new Set([...((_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : []), packageName]));
+    window.dispatchEvent(new CustomEvent(OPTIONAL_PACKAGE_INSTALLED_EVENT, {
+        detail: packageName,
+    }));
+};
+exports.markOptionalPackageInstalled = markOptionalPackageInstalled;
+const installOptionalPackage = async (packageName) => {
+    const dependencies = (0, optional_package_dependencies_1.withRequiredAuxiliaryPackages)([
+        { name: packageName, version: null },
+    ]);
+    await (0, install_package_1.installPackages)(dependencies);
+    for (const dependency of dependencies) {
+        (0, exports.markOptionalPackageInstalled)(dependency.name);
+    }
+};
+exports.installOptionalPackage = installOptionalPackage;
+const useOptionalPackageInstalled = (packageName) => {
+    const [installed, setInstalled] = (0, react_1.useState)(() => (0, exports.isOptionalPackageInstalled)(packageName));
+    (0, react_1.useEffect)(() => {
+        const onInstalled = (event) => {
+            if (event.detail === packageName) {
+                setInstalled(true);
+            }
+        };
+        window.addEventListener(OPTIONAL_PACKAGE_INSTALLED_EVENT, onInstalled);
+        return () => window.removeEventListener(OPTIONAL_PACKAGE_INSTALLED_EVENT, onInstalled);
+    }, [packageName]);
+    return installed;
+};
+exports.useOptionalPackageInstalled = useOptionalPackageInstalled;
+const OptionalPackageModal = ({ ariaLabel, children, packageName, title }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const installed = (0, exports.useOptionalPackageInstalled)(packageName);
+    const [installState, setInstallState] = (0, react_1.useState)({
+        type: 'idle',
+    });
+    const busy = installState.type === 'installing';
+    const packageNames = (0, optional_package_dependencies_1.withRequiredAuxiliaryPackages)([
+        { name: packageName, version: null },
+    ]).map((dependency) => dependency.name);
+    const packagesLabel = packageNames.join(' and ');
+    const dismiss = (0, react_1.useCallback)(() => {
+        if (!busy) {
+            setSelectedModal(null);
+        }
+    }, [busy, setSelectedModal]);
+    const install = (0, react_1.useCallback)(async () => {
+        setInstallState({ type: 'installing' });
+        try {
+            await (0, exports.installOptionalPackage)(packageName);
+        }
+        catch (error) {
+            setInstallState({ type: 'error', error: error });
+        }
+    }, [packageName]);
+    if (installed) {
+        return children;
+    }
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { ariaLabel: ariaLabel, onEscape: dismiss, onOutsideClick: dismiss, panelStyle: panelStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title, onClose: dismiss }), jsx_runtime_1.jsx("div", { style: contentStyle, children: busy ? (jsx_runtime_1.jsxs("div", { style: statusStyle, children: [
+                        jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 18 }), `Installing ${packagesLabel}…`] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["This requires installing", ' ', packageNames.map((name, index) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [index > 0 ? ' and ' : null, jsx_runtime_1.jsx("code", { style: codeStyle, children: name })
+                            ] }, name))), ". Continue?", installState.type === 'error' ? (jsx_runtime_1.jsx("div", { style: errorStyle, children: installState.error.message })) : null] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: busy, onClick: dismiss, style: cancelStyle, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: busy, onClick: install, autoFocus: true, children: installState.type === 'error' ? 'Retry' : 'Continue' })
+                    ] }) })
+        ] }));
+};
+exports.OptionalPackageModal = OptionalPackageModal;

package/dist/components/OutlineToggle.js

@@ -4,25 +4,31 @@ exports.OutlineToggle = 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 editor_outlines_1 = require("../state/editor-outlines");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const OutlineToggle = () => {
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleOutlines');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleOutlines');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => {
-            const iconColor = editorShowOutlines ? colors_1.BLUE : color;
-            return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
-                    jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
-                        [16, 16],
-                        [400, 16],
-                        [16, 400],
-                        [400, 400],
-                    ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
-        } }));
+    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": editorShowOutlines, onClick: onClick, children: (color) => {
+                const iconColor = editorShowOutlines ? colors_1.BLUE : color;
+                return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+                        jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
+                            [16, 16],
+                            [400, 16],
+                            [16, 400],
+                            [400, 400],
+                        ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
+            } }) }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/PlayPause.js

@@ -40,12 +40,14 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const jump_to_start_1 = require("../icons/jump-to-start");
 const pause_1 = require("../icons/pause");
 const play_1 = require("../icons/play");
 const step_back_1 = require("../icons/step-back");
 const step_forward_1 = require("../icons/step-forward");
 const in_out_1 = require("../state/in-out");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
@@ -82,6 +84,10 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
     const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
     const playing = remotion_1.Internals.usePlaying();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const jumpToBeginningShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('jumpToBeginning');
+    const jumpToBeginningAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('jumpToBeginning');
+    const playPauseShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('playPause');
+    const playPauseAriaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('playPause');
     (0, react_1.useEffect)(() => {
         if (isStill) {
             pause();
@@ -147,36 +153,32 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
-            key: ' ',
+            action: 'playPause',
             callback: onSpace,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'enter',
+            action: 'pauseAndReturnToPlaybackStart',
             callback: onEnter,
-            commandCtrlKey: false,
             preventDefault: false,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'a',
+            action: 'jumpToBeginning',
             callback: jumpToStart,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'e',
+            action: 'jumpToEnd',
             callback: jumpToEnd,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -233,6 +235,6 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, title: "", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go back 1 frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", title: "", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, title: "", onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go forward 1 frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", title: "", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
 };
 exports.PlayPause = react_1.default.memo(PlayPauseInner);

package/dist/components/PlaybackKeyboardShortcutsManager.d.ts

@@ -1,4 +1,6 @@
 import type React from 'react';
 export declare const PlaybackKeyboardShortcutsManager: React.FC<{
     readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
+    readonly setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly setLoop: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

package/dist/components/PlaybackKeyboardShortcutsManager.js

@@ -3,9 +3,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaybackKeyboardShortcutsManager = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
-const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
+const LoopToggle_1 = require("./LoopToggle");
+const MuteToggle_1 = require("./MuteToggle");
+const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate, setMuted, setLoop }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    (0, react_1.useEffect)(() => {
+        if (!isVideoComposition) {
+            return;
+        }
+        const mute = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleMute',
+            callback: (event) => {
+                if (!event.repeat)
+                    (0, MuteToggle_1.toggleMute)(setMuted);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const loop = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleLoop',
+            callback: (event) => {
+                if (!event.repeat)
+                    (0, LoopToggle_1.toggleLoop)(setLoop);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            mute.unregister();
+            loop.unregister();
+        };
+    }, [isVideoComposition, keybindings, setLoop, setMuted]);
     const { play, pause, isPlaying } = player_1.PlayerInternals.usePlayerMethods();
     const onJKey = (0, react_1.useCallback)(() => {
         const wasPlaying = isPlaying();
@@ -46,27 +81,24 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     (0, react_1.useEffect)(() => {
         const jKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'j',
+            action: 'reversePlayback',
             callback: onJKey,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'k',
+            action: 'pausePlayback',
             callback: onKKey,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'l',
+            action: 'playForward',
             callback: onLKey,
-            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,

package/dist/components/PlaybackRateSelector.js

@@ -13,7 +13,7 @@ const TimelineCombobox_1 = require("./TimelineCombobox");
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
-const accessibilityLabel = 'Change the playback rate';
+const accessibilityLabel = 'Playback rate';
 const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
     const items = (0, react_1.useMemo)(() => {
         const divider = {
@@ -57,6 +57,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
     if (isStill || canvasContent === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -99,7 +99,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
                         ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
-                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
+                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate, setMuted: setPlayerMuted, setLoop: setLoop }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -5,6 +5,7 @@ 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 Checkmark_1 = require("../icons/Checkmark");
 const ellipsis_1 = require("../icons/ellipsis");
 const checkerboard_1 = require("../state/checkerboard");
@@ -21,6 +22,10 @@ const clickButton = (id) => {
 };
 const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCanvasViewControls, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    const fullscreenShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('enterFullscreen');
+    const loopShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLoop');
+    const outlinesShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleOutlines');
+    const checkerboardShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -80,7 +85,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Loop',
                 value: 'loop',
                 onClick: () => (0, LoopToggle_1.toggleLoop)(setLoop),
-                keyHint: null,
+                keyHint: keyboardShortcutsDisabled || loopShortcut === ''
+                    ? null
+                    : loopShortcut,
                 leftItem: loop ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -93,7 +100,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Transparency as checkerboard',
                 value: 'checkerboard',
                 onClick: () => setCheckerboard((current) => !current),
-                keyHint: keyboardShortcutsDisabled ? null : 'T',
+                keyHint: keyboardShortcutsDisabled || checkerboardShortcut === ''
+                    ? null
+                    : checkerboardShortcut,
                 leftItem: checkerboard ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -106,7 +115,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Outlines',
                 value: 'outlines',
                 onClick: () => setEditorShowOutlines((current) => !current),
-                keyHint: null,
+                keyHint: keyboardShortcutsDisabled ? null : outlinesShortcut || null,
                 leftItem: editorShowOutlines ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -145,7 +154,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Fullscreen',
                 value: 'fullscreen',
                 onClick: () => clickButton('fullscreen-toggle'),
-                keyHint: keyboardShortcutsDisabled ? null : 'F',
+                keyHint: keyboardShortcutsDisabled || fullscreenShortcut === ''
+                    ? null
+                    : fullscreenShortcut,
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -153,6 +164,9 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         }
         return items;
     }, [
+        checkerboardShortcut,
+        fullscreenShortcut,
+        loopShortcut,
         previewSizeItems,
         playbackRateItems,
         selectedPlaybackRate,
@@ -166,6 +180,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         checkerboard,
         editorShowGuides,
         editorShowOutlines,
+        outlinesShortcut,
         editorShowRulers,
         setCheckerboard,
         setEditorShowGuides,

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExplorerQuickSwitcherTrigger = 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 colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../../helpers/use-keyboard-shortcut-label");
 const ellipsis_1 = require("../../icons/ellipsis");
 const modals_1 = require("../../state/modals");
 const InlineDropdown_1 = require("../InlineDropdown");
@@ -60,8 +60,11 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex, getActions
         return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisSvgProps, fill: color });
     }, []);
     const moreActionsTitle = mode === 'assets' ? 'More asset actions' : 'More composition actions';
+    const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
     return (jsx_runtime_1.jsxs("div", { style: quickSwitcherArea, children: [
-            jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+            jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut &&
+                        !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() &&
+                        quickSwitcherShortcut !== '' ? (jsx_runtime_1.jsx("span", { style: shortcutLabel, children: quickSwitcherShortcut })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
         ] }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/RadioButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const RadioButton: React.FC<{
     readonly checked: boolean;
+    readonly disabled: boolean;
     readonly children: React.ReactNode;
     readonly onClick: () => void;
 }>;

package/dist/components/RadioButton.js

@@ -54,8 +54,8 @@ const label = {
     fontSize: 14,
     lineHeight: '20px',
 };
-const RadioButton = ({ checked, children, onClick }) => {
-    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
+const RadioButton = ({ checked, disabled, children, onClick }) => {
+    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, disabled: disabled, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
             jsx_runtime_1.jsx("span", { style: circle, children: checked ? jsx_runtime_1.jsx("span", { style: bullet }) : null }), jsx_runtime_1.jsx("span", { style: label, children: children })
         ] }));
 };