@remotion/studio 4.0.522 → 4.0.523

package/dist/components/ModelsSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ModelsSettings: React.FC;

package/dist/components/ModelsSettings.js

@@ -0,0 +1,133 @@
+"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.ModelsSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../helpers/colors");
+const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const Button_1 = require("./Button");
+const styles_1 = require("./InspectorPanel/styles");
+const OptionalPackageModal_1 = require("./OptionalPackageModal");
+const whisper_webgpu_capability_1 = require("./Transcription/whisper-webgpu-capability");
+const video_matting_capability_1 = require("./VideoMatting/video-matting-capability");
+const LazyWhisperModels = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('./Transcription/LazyModels'))));
+const LazyVideoMattingModels = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('./VideoMatting/LazyModels'))));
+const container = {
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    fontFamily: 'sans-serif',
+    minWidth: 0,
+    padding: 16,
+    width: '100%',
+};
+const overview = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: '0 0 16px',
+};
+const section = {
+    paddingBottom: 16,
+};
+const lastSection = {
+    paddingTop: 16,
+};
+const title = {
+    ...styles_1.sectionHeader,
+    margin: 0,
+    padding: '4px 0 0',
+};
+const packageNameStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.4,
+    margin: 0,
+};
+const headingRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+};
+const missingText = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const missingDescription = {
+    ...missingText,
+    marginTop: 14,
+};
+const installButton = {
+    backgroundColor: colors_1.BLUE,
+    color: colors_1.WHITE,
+    flexShrink: 0,
+};
+const errorStyle = {
+    color: colors_1.WARNING_COLOR,
+    fontSize: 12,
+    lineHeight: 1.4,
+    margin: '8px 0 0',
+};
+const OptionalModelPackage = ({ children, label, packageName, style }) => {
+    const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(packageName);
+    const [installState, setInstallState] = (0, react_1.useState)({
+        type: 'idle',
+    });
+    const install = (0, react_1.useCallback)(() => {
+        setInstallState({ type: 'installing' });
+        (0, OptionalPackageModal_1.installOptionalPackage)(packageName).catch((error) => {
+            setInstallState({
+                type: 'error',
+                message: error instanceof Error ? error.message : String(error),
+            });
+        });
+    }, [packageName]);
+    return (jsx_runtime_1.jsxs("section", { style: style, children: [
+            jsx_runtime_1.jsxs("div", { style: headingRow, children: [
+                    jsx_runtime_1.jsxs("div", { children: [
+                            jsx_runtime_1.jsx("h3", { style: title, children: label }), jsx_runtime_1.jsx("p", { style: packageNameStyle, children: packageName })
+                        ] }), installed ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("p", { style: missingDescription, children: ["Install the package and ", optional_package_dependencies_1.TRANSFORMERS_PACKAGE, " to download and manage its models."] }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
+};
+const ModelsSettings = () => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
+        ] }));
+};
+exports.ModelsSettings = ModelsSettings;

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const DismissableModal: React.FC<{
     readonly children: React.ReactNode;
     readonly panelStyle?: React.CSSProperties;
+    readonly ariaLabel?: string;
 }>;

package/dist/components/NewComposition/DismissableModal.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
-const DismissableModal = ({ children, panelStyle }) => {
+const DismissableModal = ({ children, panelStyle, ariaLabel }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, panelStyle: panelStyle, children: children }));
+    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { ariaLabel: ariaLabel, onOutsideClick: onQuit, onEscape: onQuit, panelStyle: panelStyle, children: children }));
 };
 exports.DismissableModal = DismissableModal;

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

@@ -55,8 +55,8 @@ export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDis
     readonly xDistance: number;
 }) => number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
-    readonly onValueChange: (newVal: number) => void;
-    readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
+    readonly onValueChange: (newVal: number, source: "drag" | "input") => void;
+    readonly onValueChangeEnd?: ((newVal: number, source: "drag" | "input") => void) | undefined;
     readonly onTextChange: (newVal: string) => void;
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -385,7 +385,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 min: _min,
                 value: parsed,
             })) {
-            onValueChange(parsed);
+            onValueChange(parsed, 'input');
         }
     }, [_max, _min, onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
@@ -405,7 +405,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         });
         if (validation.valid) {
             fallbackRef.current.setCustomValidity('');
-            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(validation.value);
+            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(validation.value, 'input');
             setInputFallback(false);
         }
         else {
@@ -441,7 +441,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         });
         e.currentTarget.value = String(nextValue);
         e.currentTarget.setCustomValidity('');
-        onValueChange(nextValue);
+        onValueChange(nextValue, 'input');
     }, [_max, _min, deriveStep, onValueChange, value]);
     const roundToStep = (val, stepSize) => {
         const factor = 1 / stepSize;
@@ -484,7 +484,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                     ? newValue
                     : roundToDecimalPlaces(newValue, dragDecimalPlaces);
             lastDragValue = nextValue;
-            onValueChange(nextValue);
+            onValueChange(nextValue, 'drag');
         };
         (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
@@ -496,7 +496,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 const commit = reason === 'pointerup' || reason === 'buttons-released';
                 if (commit && lastDragValue !== null && onValueChangeEnd) {
-                    onValueChangeEnd(lastDragValue);
+                    onValueChangeEnd(lastDragValue, 'drag');
                 }
                 setTimeout(() => {
                     (0, input_dragger_click_lock_1.setClickLock)(false);
@@ -529,7 +529,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                     }
                     : inputStyle, type: "text" }) }));
     }
-    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], title: props.title, className: '__remotion_input_dragger', style: buttonStyle
             ? {
                 ...(small
                     ? compactInputDraggerContainerStyle

package/dist/components/NewComposition/NewFolder.js

@@ -4,6 +4,8 @@ exports.NewFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const slugify_name_1 = require("../../helpers/slugify-name");
 const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
@@ -46,19 +48,18 @@ const NewFolder = ({ parentName, stack }) => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const folderNameErrMessage = (0, validate_new_folder_name_1.validateNewFolderName)({
-        folders,
-        newName,
-        parentName,
-    });
+    const folderName = (0, slugify_name_1.slugifyName)(newName);
+    const folderNameErrMessage = folderName
+        ? (0, validate_new_folder_name_1.validateNewFolderName)({ folders, newName: folderName, parentName })
+        : 'Enter a name containing letters or numbers.';
     const valid = folderNameErrMessage === null;
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'new-folder',
-            folderName: newName,
+            folderName,
             parentName,
         };
-    }, [newName, parentName]);
+    }, [folderName, parentName]);
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
@@ -68,7 +69,9 @@ const NewFolder = ({ parentName, stack }) => {
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: parentName })
                                 ] })) : null, 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 }), folderName && folderName !== newName ? (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 created as ", folderName] })
+                                                    ] })) : null, 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] }) })
                                 ] })

package/dist/components/NewComposition/RenameFolder.js

@@ -4,7 +4,9 @@ exports.RenameFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 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");
@@ -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,9 @@ 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 }), slug && slug !== newName ? (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 renamed to ", slug] })
+                                                ] })) : null, 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/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/PlayPause.js

@@ -147,36 +147,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,

package/dist/components/PlaybackKeyboardShortcutsManager.js

@@ -46,27 +46,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/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,8 @@ 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 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);
@@ -93,7 +96,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,
@@ -145,7 +150,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 +160,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         }
         return items;
     }, [
+        checkerboardShortcut,
+        fullscreenShortcut,
         previewSizeItems,
         playbackRateItems,
         selectedPlaybackRate,

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;