@remotion/cli 3.2.38 → 3.2.40

package/dist/benchmark.js

@@ -8,6 +8,7 @@ const renderer_1 = require("@remotion/renderer");
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
+const entry_point_1 = require("./entry-point");
 const get_cli_options_1 = require("./get-cli-options");
 const get_render_media_options_1 = require("./get-render-media-options");
 const log_1 = require("./log");
@@ -88,20 +89,20 @@ const makeBenchmarkProgressBar = ({ totalRuns, run, progress, doneIn, }) => {
 const benchmarkCommand = async (remotionRoot, args) => {
     var _a;
     const runs = (_a = parse_command_line_1.parsedCli.runs) !== null && _a !== void 0 ? _a : DEFAULT_RUNS;
-    const filePath = args[0];
-    if (!filePath) {
+    const { file, reason, remainingArgs } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
+    if (!file) {
         log_1.Log.error('No entry file passed.');
         log_1.Log.info('Pass an additional argument specifying the entry file');
         log_1.Log.info();
         log_1.Log.info(`$ remotion benchmark <entry file>`);
         process.exit(1);
     }
-    const fullPath = path_1.default.join(process.cwd(), filePath);
+    const fullPath = path_1.default.join(process.cwd(), file);
     const { inputProps, envVariables, browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, port, puppeteerTimeout, browser, scale, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
-        codec: 'h264',
     });
+    log_1.Log.verbose('Entry point:', file, 'reason:', reason);
     const browserInstance = (0, renderer_1.openBrowser)(browser, {
         browserExecutable,
         shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
@@ -125,8 +126,8 @@ const benchmarkCommand = async (remotionRoot, args) => {
         port,
         puppeteerInstance,
     });
-    const ids = (args[1]
-        ? args[1]
+    const ids = (remainingArgs[0]
+        ? remainingArgs[0]
             .split(',')
             .map((c) => c.trim())
             .filter(truthy_1.truthy)

package/dist/compositions.d.ts

@@ -1 +1 @@
-export declare const listCompositionsCommand: (remotionRoot: string) => Promise<void>;
+export declare const listCompositionsCommand: (remotionRoot: string, args: string[]) => Promise<void>;

package/dist/compositions.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.listCompositionsCommand = void 0;
 const renderer_1 = require("@remotion/renderer");
 const path_1 = __importDefault(require("path"));
+const entry_point_1 = require("./entry-point");
 const get_cli_options_1 = require("./get-cli-options");
 const get_config_file_name_1 = require("./get-config-file-name");
 const log_1 = require("./log");
@@ -24,21 +25,21 @@ const max = (arr) => {
     }
     return biggest;
 };
-const listCompositionsCommand = async (remotionRoot) => {
-    const file = parse_command_line_1.parsedCli._[1];
+const listCompositionsCommand = async (remotionRoot, args) => {
+    const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
         log_1.Log.error('The `compositions` command requires you to specify a entry point. For example');
         log_1.Log.error('  npx remotion compositions src/index.tsx');
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
+    log_1.Log.verbose('Entry point:', file, 'reason:', reason);
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
     const fullPath = path_1.default.join(process.cwd(), file);
     await (0, get_config_file_name_1.loadConfig)(remotionRoot);
     const { browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'get-compositions',
-        codec: 'h264',
     });
     const { urlOrBundle: bundled, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         remotionRoot,

package/dist/config/entry-point.d.ts

@@ -0,0 +1,2 @@
+export declare const setEntryPoint: (ep: string) => void;
+export declare const getEntryPoint: () => string | null;

package/dist/config/entry-point.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEntryPoint = exports.setEntryPoint = void 0;
+let entryPoint = null;
+const setEntryPoint = (ep) => {
+    entryPoint = ep;
+};
+exports.setEntryPoint = setEntryPoint;
+const getEntryPoint = () => {
+    return entryPoint;
+};
+exports.getEntryPoint = getEntryPoint;

package/dist/config/every-nth-frame.d.ts

@@ -1,3 +1,2 @@
-import type { Codec } from '@remotion/renderer';
 export declare const setEveryNthFrame: (frame: number) => void;
-export declare const getAndValidateEveryNthFrame: (codec: Codec) => number;
+export declare const getEveryNthFrame: () => number;

package/dist/config/every-nth-frame.js

@@ -1,20 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAndValidateEveryNthFrame = exports.setEveryNthFrame = void 0;
-const renderer_1 = require("@remotion/renderer");
+exports.getEveryNthFrame = exports.setEveryNthFrame = void 0;
 let everyNthFrame = 1;
 const setEveryNthFrame = (frame) => {
-    renderer_1.RenderInternals.validateEveryNthFrame(frame);
     everyNthFrame = frame;
 };
 exports.setEveryNthFrame = setEveryNthFrame;
-const getAndValidateEveryNthFrame = (codec) => {
-    if (everyNthFrame === 1) {
-        return everyNthFrame;
-    }
-    if (codec !== 'gif') {
-        throw new Error(`"everyNthFrame" can only be set if "codec" is set to "gif". The codec is "${codec}"`);
-    }
+const getEveryNthFrame = () => {
     return everyNthFrame;
 };
-exports.getAndValidateEveryNthFrame = getAndValidateEveryNthFrame;
+exports.getEveryNthFrame = getEveryNthFrame;

package/dist/config/height.d.ts

@@ -1,2 +1,2 @@
-export declare const setHeight: (newHeight: number) => void;
-export declare const getHeight: () => number;
+export declare const overrideHeight: (newHeight: number) => void;
+export declare const getHeight: () => number | null;

package/dist/config/height.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHeight = exports.setHeight = void 0;
+exports.getHeight = exports.overrideHeight = void 0;
+// eslint-disable-next-line no-restricted-imports
+const remotion_1 = require("remotion");
 let specifiedHeight;
-const setHeight = (newHeight) => {
-    if (typeof newHeight !== 'number') {
-        throw new Error('--height flag / setHeight() must be a number, but got ' +
-            JSON.stringify(newHeight));
-    }
+const overrideHeight = (newHeight) => {
+    remotion_1.Internals.validateDimension(newHeight, 'height', 'passed to `overrideHeight()`');
     specifiedHeight = newHeight;
 };
-exports.setHeight = setHeight;
+exports.overrideHeight = overrideHeight;
 const getHeight = () => {
     return specifiedHeight;
 };

package/dist/config/index.d.ts

@@ -23,8 +23,7 @@ export declare const ConfigInternals: {
     getIgnoreCertificateErrors: () => boolean;
     getChromiumHeadlessMode: () => boolean;
     getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | null;
-    getAndValidateEveryNthFrame: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number;
-    getAndValidateNumberOfGifLoops: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number | null;
+    getEveryNthFrame: () => number;
     getConcurrency: () => number | null;
     getCurrentPuppeteerTimeout: () => number;
     getQuality: () => number | undefined;
@@ -49,6 +48,10 @@ export declare const ConfigInternals: {
     getFfmpegOverrideFunction: () => import("@remotion/renderer").FfmpegOverrideFn;
     getAudioBitrate: () => string | null;
     getVideoBitrate: () => string | null;
+    getHeight: () => number | null;
+    getWidth: () => number | null;
     getCrfOrUndefined: () => import("@remotion/renderer").Crf;
+    getEntryPoint: () => string | null;
+    getNumberOfGifLoops: () => import("./number-of-gif-loops").Loop;
 };
 export declare const overrideRemotion: () => void;

package/dist/config/index.js

@@ -32,14 +32,12 @@ const chromium_flags_1 = require("./chromium-flags");
 const codec_1 = require("./codec");
 const concurrency_1 = require("./concurrency");
 const env_file_1 = require("./env-file");
-const every_nth_frame_1 = require("./every-nth-frame");
 const ffmpeg_executable_1 = require("./ffmpeg-executable");
 const frame_range_1 = require("./frame-range");
 const image_format_1 = require("./image-format");
 const image_sequence_1 = require("./image-sequence");
 const Logging = __importStar(require("./log"));
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
-const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const output_location_1 = require("./output-location");
 const override_webpack_1 = require("./override-webpack");
 const overwrite_1 = require("./overwrite");
@@ -58,18 +56,20 @@ const codec_2 = require("./codec");
 const concurrency_2 = require("./concurrency");
 const crf_1 = require("./crf");
 const enforce_audio_track_1 = require("./enforce-audio-track");
+const entry_point_1 = require("./entry-point");
 const env_file_2 = require("./env-file");
-const every_nth_frame_2 = require("./every-nth-frame");
+const every_nth_frame_1 = require("./every-nth-frame");
 const ffmpeg_executable_2 = require("./ffmpeg-executable");
 const ffmpeg_override_1 = require("./ffmpeg-override");
 const frame_range_2 = require("./frame-range");
+const height_1 = require("./height");
 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");
-const number_of_gif_loops_2 = require("./number-of-gif-loops");
+const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const output_location_2 = require("./output-location");
 const override_webpack_2 = require("./override-webpack");
 const overwrite_2 = require("./overwrite");
@@ -81,6 +81,7 @@ const quality_2 = require("./quality");
 const scale_2 = require("./scale");
 const timeout_2 = require("./timeout");
 const webpack_caching_2 = require("./webpack-caching");
+const width_1 = require("./width");
 exports.Config = {
     Preview: {
         setMaxTimelineTracks: max_timeline_tracks_2.setMaxTimelineTracks,
@@ -91,6 +92,7 @@ exports.Config = {
         setCachingEnabled: webpack_caching_2.setWebpackCaching,
         setPort: preview_server_2.setPort,
         setPublicDir: public_dir_1.setPublicDir,
+        setEntryPoint: entry_point_1.setEntryPoint,
     },
     Log: {
         setLevel: log_1.setLogLevel,
@@ -112,8 +114,8 @@ exports.Config = {
         setFfmpegExecutable: ffmpeg_executable_2.setFfmpegExecutable,
         setFfprobeExecutable: ffmpeg_executable_2.setFfprobeExecutable,
         setScale: scale_2.setScale,
-        setEveryNthFrame: every_nth_frame_2.setEveryNthFrame,
-        setNumberOfGifLoops: number_of_gif_loops_2.setNumberOfGifLoops,
+        setEveryNthFrame: every_nth_frame_1.setEveryNthFrame,
+        setNumberOfGifLoops: number_of_gif_loops_1.setNumberOfGifLoops,
         setMuted: muted_1.setMuted,
         setEnforceAudioTrack: enforce_audio_track_1.setEnforceAudioTrack,
     },
@@ -128,6 +130,8 @@ exports.Config = {
         setProResProfile: prores_profile_2.setProResProfile,
         setAudioBitrate: bitrate_1.setAudioBitrate,
         setVideoBitrate: bitrate_1.setVideoBitrate,
+        overrideHeight: height_1.overrideHeight,
+        overrideWidth: width_1.overrideWidth,
         overrideFfmpegCommand: ffmpeg_override_1.setFfmpegOverrideFunction,
     },
 };
@@ -148,8 +152,7 @@ exports.ConfigInternals = {
     getIgnoreCertificateErrors: chromium_flags_1.getIgnoreCertificateErrors,
     getChromiumHeadlessMode: chromium_flags_1.getChromiumHeadlessMode,
     getChromiumOpenGlRenderer: chromium_flags_1.getChromiumOpenGlRenderer,
-    getAndValidateEveryNthFrame: every_nth_frame_1.getAndValidateEveryNthFrame,
-    getAndValidateNumberOfGifLoops: number_of_gif_loops_1.getAndValidateNumberOfGifLoops,
+    getEveryNthFrame: every_nth_frame_1.getEveryNthFrame,
     getConcurrency: concurrency_1.getConcurrency,
     getCurrentPuppeteerTimeout: timeout_1.getCurrentPuppeteerTimeout,
     getQuality: quality_1.getQuality,
@@ -174,7 +177,11 @@ exports.ConfigInternals = {
     getFfmpegOverrideFunction: ffmpeg_override_1.getFfmpegOverrideFunction,
     getAudioBitrate: bitrate_1.getAudioBitrate,
     getVideoBitrate: bitrate_1.getVideoBitrate,
+    getHeight: height_1.getHeight,
+    getWidth: width_1.getWidth,
     getCrfOrUndefined: crf_1.getCrfOrUndefined,
+    getEntryPoint: entry_point_1.getEntryPoint,
+    getNumberOfGifLoops: number_of_gif_loops_1.getNumberOfGifLoops,
 };
 const overrideRemotion = () => {
     Object.assign(remotion_1.Config, exports.Config);

package/dist/config/number-of-gif-loops.d.ts

@@ -1,4 +1,3 @@
-import type { Codec } from '@remotion/renderer';
 export declare type Loop = number | null;
 export declare const setNumberOfGifLoops: (newLoop: Loop | null) => void;
-export declare const getAndValidateNumberOfGifLoops: (codec: Codec) => number | null;
+export declare const getNumberOfGifLoops: () => Loop;

package/dist/config/number-of-gif-loops.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAndValidateNumberOfGifLoops = exports.setNumberOfGifLoops = void 0;
+exports.getNumberOfGifLoops = exports.setNumberOfGifLoops = void 0;
 let currentLoop = null;
 const setNumberOfGifLoops = (newLoop) => {
     if (newLoop !== null && typeof newLoop !== 'number') {
@@ -9,13 +9,7 @@ const setNumberOfGifLoops = (newLoop) => {
     currentLoop = newLoop;
 };
 exports.setNumberOfGifLoops = setNumberOfGifLoops;
-const getAndValidateNumberOfGifLoops = (codec) => {
-    if (currentLoop === null) {
-        return currentLoop;
-    }
-    if (codec !== 'gif') {
-        throw new Error(`The "numberOfGifLoops" setting can only be used for GIFs. The codec is set to ${codec}`);
-    }
+const getNumberOfGifLoops = () => {
     return currentLoop;
 };
-exports.getAndValidateNumberOfGifLoops = getAndValidateNumberOfGifLoops;
+exports.getNumberOfGifLoops = getNumberOfGifLoops;

package/dist/config/width.d.ts

@@ -1,2 +1,2 @@
-export declare const setWidth: (newWidth: number) => void;
-export declare const getWidth: () => number;
+export declare const overrideWidth: (newWidth: number) => void;
+export declare const getWidth: () => number | null;

package/dist/config/width.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWidth = exports.setWidth = void 0;
-let passedWidth;
-const setWidth = (newWidth) => {
+exports.getWidth = exports.overrideWidth = void 0;
+// eslint-disable-next-line no-restricted-imports
+const remotion_1 = require("remotion");
+let passedWidth = null;
+const overrideWidth = (newWidth) => {
     if (typeof newWidth !== 'number') {
-        throw new Error('--width flag / setWidth() must be a number, but got ' +
-            JSON.stringify(newWidth));
+        remotion_1.Internals.validateDimension(newWidth, 'width', 'passed to `setWidth()`');
     }
     passedWidth = newWidth;
 };
-exports.setWidth = setWidth;
+exports.overrideWidth = overrideWidth;
 const getWidth = () => {
     return passedWidth;
 };

package/dist/editor/components/Canvas.js

@@ -192,18 +192,21 @@ const Canvas = () => {
             key: '0',
             commandCtrlKey: false,
             callback: onReset,
+            preventDefault: true,
         });
         const zoomIn = keybindings.registerKeybinding({
             event: 'keydown',
             key: '+',
             commandCtrlKey: false,
             callback: onZoomIn,
+            preventDefault: true,
         });
         const zoomOut = keybindings.registerKeybinding({
             event: 'keydown',
             key: '-',
             commandCtrlKey: false,
             callback: onZoomOut,
+            preventDefault: true,
         });
         return () => {
             resetBinding.unregister();

package/dist/editor/components/Editor.js

@@ -15,7 +15,6 @@ const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
-const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -51,6 +50,6 @@ const Editor = () => {
     }, [Root, waitForRoot]);
     return ((0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { 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, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), 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 === 'quick-switcher' && (
                         // Quick switcher here because requires timeline zoom ctx
-                        (0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, {}))] }) }), 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, {}))] }));
+                        (0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }) }), 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 }))] }));
 };
 exports.Editor = Editor;

package/dist/editor/components/GlobalKeybindings.js

@@ -20,6 +20,7 @@ const GlobalKeybindings = () => {
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const cmdKKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -27,9 +28,12 @@ const GlobalKeybindings = () => {
             callback: () => {
                 setSelectedModal({
                     type: 'quick-switcher',
+                    mode: 'compositions',
+                    invocationTimestamp: Date.now(),
                 });
             },
             commandCtrlKey: true,
+            preventDefault: true,
         });
         const cKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -38,16 +42,20 @@ const GlobalKeybindings = () => {
                 setCheckerboard((c) => !c);
             },
             commandCtrlKey: true,
+            preventDefault: true,
         });
         const questionMark = keybindings.registerKeybinding({
             event: 'keypress',
             key: '?',
             callback: () => {
                 setSelectedModal({
-                    type: 'shortcuts',
+                    type: 'quick-switcher',
+                    mode: 'docs',
+                    invocationTimestamp: Date.now(),
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             nKey.unregister();

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

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

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardShortcutsExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const keys_1 = require("../icons/keys");
+const layout_1 = require("./layout");
+const left = {
+    width: 85,
+    paddingTop: 8,
+    paddingBottom: 8,
+};
+const key = {
+    background: '#333',
+    padding: '3px 6px',
+    color: 'white',
+    borderRadius: 3,
+    border: '1px solid black',
+    borderBottomWidth: 3,
+    fontSize: 13,
+    fontFamily: 'monospace',
+};
+const right = {
+    fontSize: 14,
+    color: '#eee',
+};
+const container = {
+    paddingLeft: 20,
+    paddingRight: 40,
+    paddingTop: 10,
+    paddingBottom: 10,
+};
+const title = {
+    fontWeight: 'bold',
+    color: 'white',
+    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 KeyboardShortcutsExplainer = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(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.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.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)("br", {})] }), (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: left, 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: left, 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: left, 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.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: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (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: left, 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: left, 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: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (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)("div", { style: right, children: "Zoom in" })] }), (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)("div", { style: right, children: "Zoom out" })] }), (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" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
+};
+exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

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

@@ -104,42 +104,49 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             key: 'Escape',
             callback: onEscape,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const rightBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             commandCtrlKey: false,
             callback: onArrowRight,
+            preventDefault: true,
         });
         const leftBinding = keybindings.registerKeybinding({
             event: 'keydown',
             commandCtrlKey: false,
             key: 'ArrowLeft',
             callback: onPreviousMenu,
+            preventDefault: true,
         });
         const downBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowDown',
             commandCtrlKey: false,
             callback: onArrowDown,
+            preventDefault: true,
         });
         const upBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowUp',
             callback: onArrowUp,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const enterBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const spaceBinding = keybindings.registerKeybinding({
             event: 'keyup',
             key: ' ',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             escapeBinding.unregister();

package/dist/editor/components/PlayPause.js

@@ -124,36 +124,42 @@ const PlayPause = ({ playbackRate, loop }) => {
             key: 'ArrowLeft',
             callback: onArrowLeft,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             callback: onArrowRight,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
             key: ' ',
             callback: onSpace,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'a',
             callback: jumpToStart,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'e',
             callback: jumpToEnd,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             arrowLeft.unregister();

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -47,18 +47,21 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             key: 'j',
             callback: onJKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'k',
             callback: onKKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'l',
             callback: onLKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             jKey.unregister();

package/dist/editor/components/QuickSwitcher/AlgoliaCredit.d.ts

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