@remotion/cli 3.0.30 → 3.0.31

package/dist/chalk/symbols.d.ts

@@ -0,0 +1,111 @@
+declare const isHyper: boolean;
+declare const isWindows: boolean;
+declare const isLinux: boolean;
+declare const common: {
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};
+declare const windows: {
+    check: string;
+    cross: string;
+    ellipsisLarge: string;
+    ellipsis: string;
+    info: string;
+    questionSmall: string;
+    pointer: string;
+    pointerSmall: string;
+    radioOff: string;
+    radioOn: string;
+    warning: string;
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};
+declare const other: {
+    ballotCross: string;
+    check: string;
+    cross: string;
+    ellipsisLarge: string;
+    ellipsis: string;
+    info: string;
+    questionFull: string;
+    questionSmall: string;
+    pointer: string;
+    pointerSmall: string;
+    radioOff: string;
+    radioOn: string;
+    warning: string;
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};

package/dist/chalk/symbols.js

@@ -0,0 +1,75 @@
+'use strict';
+const isHyper = typeof process !== 'undefined' && process.env.TERM_PROGRAM === 'Hyper';
+const isWindows = typeof process !== 'undefined' && process.platform === 'win32';
+const isLinux = typeof process !== 'undefined' && process.platform === 'linux';
+const common = {
+    ballotDisabled: '☒',
+    ballotOff: '☐',
+    ballotOn: '☑',
+    bullet: '•',
+    bulletWhite: '◦',
+    fullBlock: '█',
+    heart: '❤',
+    identicalTo: '≡',
+    line: '─',
+    mark: '※',
+    middot: '·',
+    minus: '－',
+    multiplication: '×',
+    obelus: '÷',
+    pencilDownRight: '✎',
+    pencilRight: '✏',
+    pencilUpRight: '✐',
+    percent: '%',
+    pilcrow2: '❡',
+    pilcrow: '¶',
+    plusMinus: '±',
+    question: '?',
+    section: '§',
+    starsOff: '☆',
+    starsOn: '★',
+    upDownArrow: '↕',
+};
+const windows = {
+    ...common,
+    check: '√',
+    cross: '×',
+    ellipsisLarge: '...',
+    ellipsis: '...',
+    info: 'i',
+    questionSmall: '?',
+    pointer: '>',
+    pointerSmall: '»',
+    radioOff: '( )',
+    radioOn: '(*)',
+    warning: '‼',
+};
+const other = {
+    ...common,
+    ballotCross: '✘',
+    check: '✔',
+    cross: '✖',
+    ellipsisLarge: '⋯',
+    ellipsis: '…',
+    info: 'ℹ',
+    questionFull: '？',
+    questionSmall: '﹖',
+    pointer: isLinux ? '▸' : '❯',
+    pointerSmall: isLinux ? '‣' : '›',
+    radioOff: '◯',
+    radioOn: '◉',
+    warning: '⚠',
+};
+module.exports = isWindows && !isHyper ? windows : other;
+Reflect.defineProperty(module.exports, 'common', {
+    enumerable: false,
+    value: common,
+});
+Reflect.defineProperty(module.exports, 'windows', {
+    enumerable: false,
+    value: windows,
+});
+Reflect.defineProperty(module.exports, 'other', {
+    enumerable: false,
+    value: other,
+});

package/dist/chalk/utilities.d.ts

@@ -0,0 +1,2 @@
+export declare function stringReplaceAll(string: string, substring: string, replacer: string): string;
+export declare function stringEncaseCRLFWithFirstIndex(string: string, prefix: string, postfix: string, index: number): string;

package/dist/chalk/utilities.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringEncaseCRLFWithFirstIndex = exports.stringReplaceAll = void 0;
+function stringReplaceAll(string, substring, replacer) {
+    let index = string.indexOf(substring);
+    if (index === -1) {
+        return string;
+    }
+    const substringLength = substring.length;
+    let endIndex = 0;
+    let returnValue = '';
+    do {
+        returnValue += string.slice(endIndex, index) + substring + replacer;
+        endIndex = index + substringLength;
+        index = string.indexOf(substring, endIndex);
+    } while (index !== -1);
+    returnValue += string.slice(endIndex);
+    return returnValue;
+}
+exports.stringReplaceAll = stringReplaceAll;
+function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
+    let endIndex = 0;
+    let returnValue = '';
+    do {
+        const gotCR = string[index - 1] === '\r';
+        returnValue +=
+            string.slice(endIndex, gotCR ? index - 1 : index) +
+                prefix +
+                (gotCR ? '\r\n' : '\n') +
+                postfix;
+        endIndex = index + 1;
+        index = string.indexOf('\n', endIndex);
+    } while (index !== -1);
+    returnValue += string.slice(endIndex);
+    return returnValue;
+}
+exports.stringEncaseCRLFWithFirstIndex = stringEncaseCRLFWithFirstIndex;

package/dist/editor/components/CompositionManager.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TComposition } from 'remotion';
+export declare const useSelectComposition: () => (c: TComposition) => void;
+export declare const InitialCompositionLoader: React.FC;

package/dist/editor/components/CompositionManager.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const folders_1 = require("../state/folders");
+const marks_1 = require("../state/marks");
+const CompositionSelector_1 = require("./CompositionSelector");
+const FramePersistor_1 = require("./FramePersistor");
+const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const useSelectComposition = () => {
+    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    return (c) => {
+        var _a;
+        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
+        window.history.pushState({}, 'Preview', `/${c.id}`);
+        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
+        setCurrentFrame(frameInBounds);
+        setCurrentComposition(c.id);
+        const { folderName, parentFolderName } = c;
+        if (folderName !== null) {
+            setFoldersExpanded((ex) => {
+                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const newState = {
+                    ...ex,
+                };
+                for (const key of keysToExpand) {
+                    newState[key] = true;
+                }
+                return newState;
+            });
+        }
+    };
+};
+exports.useSelectComposition = useSelectComposition;
+const InitialCompositionLoader = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, exports.useSelectComposition)();
+    (0, react_1.useEffect)(() => {
+        if (currentComposition) {
+            return;
+        }
+        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+        if (compositionFromUrl) {
+            const exists = compositions.find((c) => c.id === compositionFromUrl);
+            if (exists) {
+                selectComposition(exists);
+                return;
+            }
+        }
+        if (compositions.length > 0) {
+            selectComposition(compositions[0]);
+        }
+    }, [compositions, currentComposition, selectComposition]);
+    return null;
+};
+exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/Editor.js

@@ -130,7 +130,7 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
                                                                     modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType &&
                                                                     modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType &&
                                                                     modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }) }) }) }) }) }) }) }) }) }) }) }) }) }));

package/dist/editor/components/GlobalKeybindings.js

@@ -10,19 +10,34 @@ const GlobalKeybindings = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     (0, react_1.useEffect)(() => {
-        const nKey = keybindings.registerKeybinding('keypress', 'n', () => {
-            setSelectedModal({
-                type: 'new-comp',
-                compType: 'composition',
-            });
+        const nKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'n',
+            callback: () => {
+                setSelectedModal({
+                    type: 'new-comp',
+                    compType: 'composition',
+                });
+            },
+            commandCtrlKey: false,
         });
-        const cKey = keybindings.registerKeybinding('keypress', 't', () => {
-            setCheckerboard((c) => !c);
+        const cKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 't',
+            callback: () => {
+                setCheckerboard((c) => !c);
+            },
+            commandCtrlKey: true,
         });
-        const questionMark = keybindings.registerKeybinding('keypress', '?', () => {
-            setSelectedModal({
-                type: 'shortcuts',
-            });
+        const questionMark = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: '?',
+            callback: () => {
+                setSelectedModal({
+                    type: 'shortcuts',
+                });
+            },
+            commandCtrlKey: false,
         });
         return () => {
             nKey.unregister();

package/dist/editor/components/NewComposition/MenuContent.js

@@ -99,13 +99,48 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
     (0, react_1.useEffect)(() => {
-        const escapeBinding = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
-        const rightBinding = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const leftBinding = keybindings.registerKeybinding('keydown', 'ArrowLeft', onPreviousMenu);
-        const downBinding = keybindings.registerKeybinding('keydown', 'ArrowDown', onArrowDown);
-        const upBinding = keybindings.registerKeybinding('keydown', 'ArrowUp', onArrowUp);
-        const enterBinding = keybindings.registerKeybinding('keydown', 'Enter', onEnter);
-        const spaceBinding = keybindings.registerKeybinding('keyup', ' ', onEnter);
+        const escapeBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: onEscape,
+            commandCtrlKey: false,
+        });
+        const rightBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            commandCtrlKey: false,
+            callback: onArrowRight,
+        });
+        const leftBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            commandCtrlKey: false,
+            key: 'ArrowLeft',
+            callback: onPreviousMenu,
+        });
+        const downBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowDown',
+            commandCtrlKey: false,
+            callback: onArrowDown,
+        });
+        const upBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+        });
+        const enterBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
+        const spaceBinding = keybindings.registerKeybinding({
+            event: 'keyup',
+            key: ' ',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
         return () => {
             escapeBinding.unregister();
             leftBinding.unregister();

package/dist/editor/components/PlayPause.js

@@ -95,12 +95,42 @@ const PlayPause = ({ playbackRate, loop }) => {
     }, [seek, video]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding('keydown', 'ArrowLeft', onArrowLeft);
-        const arrowRight = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const space = keybindings.registerKeybinding('keydown', ' ', onSpace);
-        const enter = keybindings.registerKeybinding('keydown', 'enter', onEnter);
-        const a = keybindings.registerKeybinding('keydown', 'a', jumpToStart);
-        const e = keybindings.registerKeybinding('keydown', 'e', jumpToEnd);
+        const arrowLeft = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowLeft',
+            callback: onArrowLeft,
+            commandCtrlKey: false,
+        });
+        const arrowRight = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            callback: onArrowRight,
+            commandCtrlKey: false,
+        });
+        const space = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: ' ',
+            callback: onSpace,
+            commandCtrlKey: false,
+        });
+        const enter = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
+        const a = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'a',
+            callback: jumpToStart,
+            commandCtrlKey: false,
+        });
+        const e = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'e',
+            callback: jumpToEnd,
+            commandCtrlKey: false,
+        });
         return () => {
             arrowLeft.unregister();
             arrowRight.unregister();

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -54,9 +54,24 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
         play();
     }, [play, playing, setPlaybackRate]);
     (0, react_1.useEffect)(() => {
-        const jKey = keybindings.registerKeybinding('keydown', 'j', onJKey);
-        const kKey = keybindings.registerKeybinding('keydown', 'k', onKKey);
-        const lKey = keybindings.registerKeybinding('keydown', 'l', onLKey);
+        const jKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            callback: onJKey,
+            commandCtrlKey: false,
+        });
+        const kKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'k',
+            callback: onKKey,
+            commandCtrlKey: false,
+        });
+        const lKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'l',
+            callback: onLKey,
+            commandCtrlKey: false,
+        });
         return () => {
             jKey.unregister();
             kKey.unregister();

package/dist/editor/components/TimelineInOutToggle.js

@@ -87,14 +87,29 @@ const TimelineInOutPointToggle = () => {
         });
     }, [setInAndOutFrames]);
     (0, react_1.useEffect)(() => {
-        const iKey = keybindings.registerKeybinding('keypress', 'i', () => {
-            onInMark();
+        const iKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'i',
+            callback: () => {
+                onInMark();
+            },
+            commandCtrlKey: false,
         });
-        const oKey = keybindings.registerKeybinding('keypress', 'o', () => {
-            onOutMark();
+        const oKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'o',
+            callback: () => {
+                onOutMark();
+            },
+            commandCtrlKey: false,
         });
-        const xKey = keybindings.registerKeybinding('keypress', 'x', () => {
-            onInOutClear();
+        const xKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'x',
+            callback: () => {
+                onInOutClear();
+            },
+            commandCtrlKey: false,
         });
         return () => {
             oKey.unregister();

package/dist/editor/helpers/use-keybinding.d.ts

@@ -1,6 +1,11 @@
 import type { KeyEventType } from '../state/keybindings';
 export declare const useKeybinding: () => {
-    registerKeybinding: (event: KeyEventType, key: string, callback: (e: KeyboardEvent) => void) => {
+    registerKeybinding: (options: {
+        event: KeyEventType;
+        key: string;
+        commandCtrlKey: boolean;
+        callback: (e: KeyboardEvent) => void;
+    }) => {
         unregister: () => void;
     };
     isHighestContext: boolean;

package/dist/editor/helpers/use-keybinding.js

@@ -8,21 +8,26 @@ const useKeybinding = () => {
     const [paneId] = (0, react_1.useState)(() => String(Math.random()));
     const context = (0, react_1.useContext)(keybindings_1.KeybindingContext);
     const { isHighestContext } = (0, z_index_1.useZIndex)();
-    const registerKeybinding = (0, react_1.useCallback)((event, key, callback) => {
+    const registerKeybinding = (0, react_1.useCallback)((options) => {
         if (!isHighestContext) {
             return {
                 unregister: () => undefined,
             };
         }
         const listener = (e) => {
-            if (e.key.toLowerCase() === key.toLowerCase()) {
-                callback(e);
+            const commandKey = window.navigator.platform.startsWith('Mac')
+                ? e.metaKey
+                : e.ctrlKey;
+            if (e.key.toLowerCase() === options.key.toLowerCase() &&
+                options.commandCtrlKey === commandKey) {
+                options.callback(e);
+                e.preventDefault();
             }
         };
         const toRegister = {
             registeredFromPane: paneId,
-            event,
-            key,
+            event: options.event,
+            key: options.key,
             callback: listener,
             id: String(Math.random()),
         };

package/dist/editor/state/keybindings.js

@@ -4,7 +4,9 @@ exports.KeybindingContextProvider = exports.KeybindingContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.KeybindingContext = (0, react_1.createContext)({
-    registerKeybinding: () => undefined,
+    registerKeybinding: () => {
+        throw new Error('Has no keybinding context');
+    },
     unregisterKeybinding: () => undefined,
     unregisterPane: () => undefined,
 });

package/dist/editor/state/z-index.js

@@ -12,7 +12,12 @@ exports.ZIndexContext = (0, react_1.createContext)({
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const escape = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
+        const escape = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: onEscape,
+            commandCtrlKey: false,
+        });
         return () => {
             escape.unregister();
         };

package/dist/preview-server/error-overlay/remotion-overlay/AskOnDiscord.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const AskOnDiscord: React.FC;
+export declare const AskOnDiscord: React.FC<{
+    canHaveKeyboardShortcuts: boolean;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/AskOnDiscord.js

@@ -4,11 +4,29 @@ exports.AskOnDiscord = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DISCORD_LINK = 'https://remotion.dev/discord';
 const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
-const AskOnDiscord = () => {
+const ShortcutHint_1 = require("./ShortcutHint");
+const AskOnDiscord = ({ canHaveKeyboardShortcuts }) => {
     const openInBrowser = (0, react_1.useCallback)(() => {
         window.open(DISCORD_LINK, '_blank');
     }, []);
-    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Ask on Discord" });
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: onEditor,
+            commandCtrlKey: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, children: ["Ask on Discord", ' ', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "d", cmdOrCtrl: true })) : null] }));
 };
 exports.AskOnDiscord = AskOnDiscord;

package/dist/preview-server/error-overlay/remotion-overlay/Button.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
-const INPUT_BACKGROUND = '#2f363d';
+const colors_1 = require("../../../editor/helpers/colors");
 const button = {
-    border: `1px solid ${INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
     borderRadius: 4,
-    backgroundColor: INPUT_BACKGROUND,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
     appearance: 'none',
     fontFamily: 'inherit',
     fontSize: 14,
     color: 'white',
+    flexDirection: 'row',
 };
 const buttonContainer = {
     padding: 10,