@remotion/cli 3.2.8 → 3.2.11

package/dist/config/index.d.ts

@@ -43,5 +43,6 @@ export declare const ConfigInternals: {
     getMuted: () => boolean;
     getEnforceAudioTrack: () => boolean;
     setEnforceAudioTrack: (enforceAudioTrack: boolean) => void;
+    getKeyboardShortcutsEnabled: () => boolean;
 };
 export declare const overrideRemotion: () => void;

package/dist/config/index.js

@@ -64,6 +64,7 @@ const ffmpeg_executable_2 = require("./ffmpeg-executable");
 const frame_range_2 = require("./frame-range");
 const image_format_2 = require("./image-format");
 const image_sequence_2 = require("./image-sequence");
+const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
 const log_1 = require("./log");
 const max_timeline_tracks_2 = require("./max-timeline-tracks");
 const muted_1 = require("./muted");
@@ -81,6 +82,7 @@ const webpack_caching_2 = require("./webpack-caching");
 exports.Config = {
     Preview: {
         setMaxTimelineTracks: max_timeline_tracks_2.setMaxTimelineTracks,
+        setKeyboardShortcutsEnabled: keyboard_shortcuts_1.setKeyboardShortcutsEnabled,
     },
     Bundling: {
         overrideWebpackConfig: override_webpack_2.overrideWebpackConfig,
@@ -162,6 +164,7 @@ exports.ConfigInternals = {
     getMuted: muted_1.getMuted,
     getEnforceAudioTrack: enforce_audio_track_1.getEnforceAudioTrack,
     setEnforceAudioTrack: enforce_audio_track_1.setEnforceAudioTrack,
+    getKeyboardShortcutsEnabled: keyboard_shortcuts_1.getKeyboardShortcutsEnabled,
 };
 const overrideRemotion = () => {
     Object.assign(remotion_1.Config, exports.Config);

package/dist/config/keyboard-shortcuts.d.ts

@@ -0,0 +1,2 @@
+export declare const setKeyboardShortcutsEnabled: (enabled: boolean) => void;
+export declare const getKeyboardShortcutsEnabled: () => boolean;

package/dist/config/keyboard-shortcuts.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getKeyboardShortcutsEnabled = exports.setKeyboardShortcutsEnabled = void 0;
+let shortcutsEnabled = true;
+const setKeyboardShortcutsEnabled = (enabled) => {
+    shortcutsEnabled = enabled;
+};
+exports.setKeyboardShortcutsEnabled = setKeyboardShortcutsEnabled;
+const getKeyboardShortcutsEnabled = () => {
+    return shortcutsEnabled;
+};
+exports.getKeyboardShortcutsEnabled = getKeyboardShortcutsEnabled;

package/dist/editor/components/CheckboardToggle.js

@@ -3,9 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const truthy_1 = require("../../truthy");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Show transparency as checkerboard (T)';
+const accessibilityLabel = [
+    'Show transparency as checkerboard',
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/editor/components/KeyboardShortcutsModal.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeyboardShortcuts = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const keys_1 = require("../icons/keys");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
@@ -43,11 +44,24 @@ const title = {
     fontSize: 14,
     marginBottom: 10,
 };
+const keyboardShortcutsDisabled = {
+    padding: 12,
+    width: '100%',
+    fontSize: 14,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+};
+const ul = {
+    marginTop: 0,
+    marginBottom: 0,
+};
+const li = {
+    fontSize: 14,
+};
 const KeyboardShortcuts = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] })] })] })] }));
 };
 exports.KeyboardShortcuts = KeyboardShortcuts;

package/dist/editor/components/Menu/MenuSubItem.js

@@ -9,6 +9,7 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
 const layout_1 = require("../layout");
@@ -84,7 +85,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         }, 100);
         return () => clearTimeout(hi);
     }, [hovered, selected, setSubMenuActivated, subMenu]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint }) : null, portalStyle && subMenu
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
                     ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
                     : null] }) }));
 };

package/dist/editor/components/MenuToolbar.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const pick_color_1 = require("../helpers/pick-color");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const Checkmark_1 = require("../icons/Checkmark");
 const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
@@ -368,7 +369,9 @@ const MenuToolbar = () => {
                     {
                         id: 'shortcuts',
                         value: 'shortcuts',
-                        label: 'Shortcuts',
+                        label: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                            ? 'Shortcuts (disabled)'
+                            : 'Shortcuts',
                         onClick: () => {
                             close();
                             setSelectedModal({

package/dist/editor/components/Notifications/ServerDisconnected.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const serverDisconnectedRef: React.RefObject<{
     setServerDisconnected: () => void;
+    setServerConnected: () => void;
 }>;
 export declare const ServerDisconnected: React.FC;

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -43,6 +43,9 @@ const ServerDisconnected = () => {
             setServerDisconnected: () => {
                 setServerDisconnected(true);
             },
+            setServerConnected: () => {
+                setServerDisconnected(false);
+            },
         };
     }, []);
     if (!serverDisconnected) {

package/dist/editor/components/TimelineInOutToggle.js

@@ -4,13 +4,16 @@ exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const truthy_1 = require("../../truthy");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
 const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
-const getTooltipText = (pointType) => `Mark ${pointType}`;
+const getTooltipText = (pointType, key) => [`Mark ${pointType}`, (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const style = {
     width: 16,
     height: 16,
@@ -169,6 +172,6 @@ const TimelineInOutPointToggle = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In (I)'), "aria-label": getTooltipText('In (I)'), onClick: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out (O)'), "aria-label": getTooltipText('Out (O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', '(O)'), "aria-label": getTooltipText('Out', '(O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

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

@@ -1,4 +1,5 @@
 import type { KeyEventType } from '../state/keybindings';
+export declare const areKeyboardShortcutsDisabled: () => boolean;
 export declare const useKeybinding: () => {
     registerKeybinding: (options: {
         event: KeyEventType;

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

@@ -1,14 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeybinding = void 0;
+exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
+if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
+}
+const areKeyboardShortcutsDisabled = () => {
+    return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+};
+exports.areKeyboardShortcutsDisabled = areKeyboardShortcutsDisabled;
 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)((options) => {
+        if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+            return {
+                unregister: () => undefined,
+            };
+        }
         if (!isHighestContext) {
             return {
                 unregister: () => undefined,

package/dist/event-source.js

@@ -11,10 +11,18 @@ const openEventSource = () => {
             window.location.reload();
         }
     });
+    source.addEventListener('open', () => {
+        var _a;
+        (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerConnected();
+    });
     source.addEventListener('error', () => {
         var _a;
         // Display an error message that the preview server has disconnected.
         (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerDisconnected();
+        // Retry later
+        setTimeout(() => {
+            (0, exports.openEventSource)();
+        }, 1000);
     });
 };
 exports.openEventSource = openEventSource;

package/dist/get-cli-options.d.ts

@@ -30,4 +30,5 @@ export declare const getCliOptions: (options: {
     port: number | null;
     muted: boolean;
     enforceAudioTrack: boolean;
+    keyboardShortcutsEnables: boolean;
 }>;

package/dist/get-cli-options.js

@@ -181,6 +181,7 @@ const getCliOptions = async (options) => {
         port: port !== null && port !== void 0 ? port : null,
         muted: config_1.ConfigInternals.getMuted(),
         enforceAudioTrack: config_1.ConfigInternals.getEnforceAudioTrack(),
+        keyboardShortcutsEnables: config_1.ConfigInternals.getKeyboardShortcutsEnabled(),
     };
 };
 exports.getCliOptions = getCliOptions;

package/dist/index.d.ts

@@ -97,6 +97,7 @@ export declare const CliInternals: {
         port: number | null;
         muted: boolean;
         enforceAudioTrack: boolean;
+        keyboardShortcutsEnables: boolean;
     }>;
     parseCommandLine: (type: "sequence" | "still" | "lambda" | "preview" | "versions") => void;
     loadConfig: (remotionRoot: string) => Promise<string | null>;

package/dist/parse-command-line.d.ts

@@ -33,6 +33,7 @@ export declare type CommandLineOptions = {
     port: number;
     frame: string | number;
     ['disable-headless']: boolean;
+    ['disable-keyboard-shortcuts']: boolean;
     muted: boolean;
     ['enforce-audio-track']: boolean;
     gl: OpenGlRenderer;

package/dist/parse-command-line.js

@@ -28,6 +28,7 @@ exports.BooleanFlags = [
     'disable-web-security',
     'ignore-certificate-errors',
     'disable-headless',
+    'disable-keyboard-shortcuts',
 ];
 exports.parsedCli = (0, minimist_1.default)(process.argv.slice(2), {
     boolean: exports.BooleanFlags,
@@ -131,6 +132,9 @@ const parseCommandLine = (type) => {
     if (typeof exports.parsedCli.muted !== 'undefined') {
         config_1.Config.Rendering.setMuted(exports.parsedCli.muted);
     }
+    if (typeof exports.parsedCli['disable-keyboard-shortcuts'] !== 'undefined') {
+        config_1.Config.Preview.setKeyboardShortcutsEnabled(!exports.parsedCli['disable-keyboard-shortcuts']);
+    }
     if (typeof exports.parsedCli['enforce-audio-track'] !== 'undefined') {
         config_1.Config.Rendering.setEnforceAudioTrack(exports.parsedCli['enforce-audio-track']);
     }

package/dist/preview-server/start-server.d.ts

@@ -7,6 +7,7 @@ export declare const startServer: (entry: string, userDefinedComponent: string,
     port: number | null;
     maxTimelineTracks?: number;
     remotionRoot: string;
+    keyboardShortcutsEnabled: boolean;
 }) => Promise<{
     port: number;
     liveEventsServer: LiveEventsServer;

package/dist/preview-server/start-server.js

@@ -32,6 +32,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
             require.resolve('./error-overlay/entry-basic.js'),
         ],
         remotionRoot: options.remotionRoot,
+        keyboardShortcutsEnabled: options.keyboardShortcutsEnabled,
     });
     const compiler = (0, bundler_1.webpack)(config);
     const hashPrefix = '/static-';

package/dist/preview.js

@@ -57,8 +57,10 @@ const previewCommand = async (remotionRoot) => {
         port: desiredPort,
         maxTimelineTracks: config_1.ConfigInternals.getMaxTimelineTracks(),
         remotionRoot,
+        keyboardShortcutsEnabled: config_1.ConfigInternals.getKeyboardShortcutsEnabled(),
     });
     setLiveEventsListener(liveEventsServer);
+    log_1.Log.info(`Server running on http://localhost:${port}`);
     (0, better_opn_1.default)(`http://localhost:${port}`);
     await new Promise(noop);
 };

package/dist/upgrade.js

@@ -13,9 +13,9 @@ const get_package_manager_1 = require("./preview-server/get-package-manager");
 const getUpgradeCommand = ({ manager, packages, version, }) => {
     const pkgList = packages.map((p) => `${p}@${version}`);
     const commands = {
-        npm: ['i', ...pkgList],
-        pnpm: ['i', ...pkgList],
-        yarn: ['add', ...pkgList],
+        npm: ['i', '--save-exact', ...pkgList],
+        pnpm: ['i', '--save-exact', ...pkgList],
+        yarn: ['add', '--exact', ...pkgList],
     };
     return commands[manager];
 };
@@ -39,6 +39,7 @@ const upgrade = async (remotionRoot) => {
         '@remotion/skia',
         '@remotion/lottie',
         '@remotion/media-utils',
+        '@remotion/paths',
         '@remotion/babel-loader',
         '@remotion/lambda',
         '@remotion/player',

package/dist/versions.js

@@ -18,6 +18,7 @@ const packages = [
     '@remotion/skia',
     '@remotion/lottie',
     '@remotion/media-utils',
+    '@remotion/paths',
     '@remotion/babel-loader',
     '@remotion/lambda',
     '@remotion/preload',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.2.8",
+	"version": "3.2.11",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -23,15 +23,15 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.2.8",
-		"@remotion/media-utils": "3.2.8",
-		"@remotion/player": "3.2.8",
-		"@remotion/renderer": "3.2.8",
+		"@remotion/bundler": "3.2.11",
+		"@remotion/media-utils": "3.2.11",
+		"@remotion/player": "3.2.11",
+		"@remotion/renderer": "3.2.11",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
-		"remotion": "3.2.8",
+		"remotion": "3.2.11",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ccde3ec3f4adecd5fb7188d9d2933435bba5743"
+	"gitHead": "43d44e718e41200aea544719e9963482f9a65120"
 }