@remotion/cli 3.2.21 → 3.2.23-ensure-ffmpeg.123

package/dist/config/index.js

@@ -31,16 +31,13 @@ const browser_executable_1 = require("./browser-executable");
 const chromium_flags_1 = require("./chromium-flags");
 const codec_1 = require("./codec");
 const concurrency_1 = require("./concurrency");
-const crf_1 = require("./crf");
 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");
@@ -52,23 +49,27 @@ const scale_1 = require("./scale");
 const still_frame_1 = require("./still-frame");
 const timeout_1 = require("./timeout");
 const webpack_caching_1 = require("./webpack-caching");
+const bitrate_1 = require("./bitrate");
 const browser_executable_2 = require("./browser-executable");
 const chromium_flags_2 = require("./chromium-flags");
 const codec_2 = require("./codec");
 const concurrency_2 = require("./concurrency");
-const crf_2 = require("./crf");
+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");
@@ -80,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,
@@ -90,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,
@@ -111,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,
     },
@@ -122,9 +125,14 @@ exports.Config = {
         setPixelFormat: pixel_format_2.setPixelFormat,
         setOutputFormat: codec_2.setOutputFormat,
         setCodec: codec_2.setCodec,
-        setCrf: crf_2.setCrf,
+        setCrf: crf_1.setCrf,
         setImageSequence: image_sequence_2.setImageSequence,
         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,
     },
 };
 // eslint-disable-next-line no-restricted-imports
@@ -133,7 +141,6 @@ exports.ConfigInternals = {
     getOutputCodecOrUndefined: codec_1.getOutputCodecOrUndefined,
     getCustomFfmpegExecutable: ffmpeg_executable_1.getCustomFfmpegExecutable,
     getBrowser: browser_1.getBrowser,
-    getActualCrf: crf_1.getActualCrf,
     getPixelFormat: pixel_format_1.getPixelFormat,
     getProResProfile: prores_profile_1.getProResProfile,
     getShouldOverwrite: overwrite_1.getShouldOverwrite,
@@ -145,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,
@@ -168,6 +174,14 @@ exports.ConfigInternals = {
     setEnforceAudioTrack: enforce_audio_track_1.setEnforceAudioTrack,
     getKeyboardShortcutsEnabled: keyboard_shortcuts_1.getKeyboardShortcutsEnabled,
     getPublicDir: public_dir_1.getPublicDir,
+    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/overwrite.d.ts

@@ -1,2 +1,4 @@
 export declare const setOverwriteOutput: (newOverwrite: boolean) => void;
-export declare const getShouldOverwrite: () => boolean;
+export declare const getShouldOverwrite: ({ defaultValue, }: {
+    defaultValue: boolean;
+}) => boolean;

package/dist/config/overwrite.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getShouldOverwrite = exports.setOverwriteOutput = void 0;
-const renderer_1 = require("@remotion/renderer");
-let shouldOverwrite = renderer_1.RenderInternals.DEFAULT_OVERWRITE;
+let shouldOverwrite = null;
 const setOverwriteOutput = (newOverwrite) => {
     if (typeof newOverwrite !== 'boolean') {
         throw new Error(`overwriteExisting must be a boolean but got ${typeof newOverwrite} (${JSON.stringify(newOverwrite)})`);
@@ -10,5 +9,5 @@ const setOverwriteOutput = (newOverwrite) => {
     shouldOverwrite = newOverwrite;
 };
 exports.setOverwriteOutput = setOverwriteOutput;
-const getShouldOverwrite = () => shouldOverwrite;
+const getShouldOverwrite = ({ defaultValue, }) => shouldOverwrite !== null && shouldOverwrite !== void 0 ? shouldOverwrite : defaultValue;
 exports.getShouldOverwrite = getShouldOverwrite;

package/dist/config/width.d.ts

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

package/dist/config/width.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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') {
+        remotion_1.Internals.validateDimension(newWidth, 'width', 'passed to `setWidth()`');
+    }
+    passedWidth = newWidth;
+};
+exports.overrideWidth = overrideWidth;
+const getWidth = () => {
+    return passedWidth;
+};
+exports.getWidth = getWidth;

package/dist/determine-image-format.d.ts

@@ -0,0 +1,11 @@
+import type { ImageFormat, StillImageFormat } from '@remotion/renderer';
+export declare const determineFinalImageFormat: ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }: {
+    downloadName: string | null;
+    outName: string | null;
+    configImageFormat: ImageFormat | null;
+    cliFlag: ImageFormat | null;
+    isLambda: boolean;
+}) => {
+    format: StillImageFormat;
+    source: string;
+};

package/dist/determine-image-format.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineFinalImageFormat = void 0;
+const deriveExtensionFromFilename = (filename) => {
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.png')) {
+        return 'png';
+    }
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpg')) {
+        return 'jpeg';
+    }
+    if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpeg')) {
+        return 'jpeg';
+    }
+    return null;
+};
+const determineFinalImageFormat = ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }) => {
+    const outNameExtension = deriveExtensionFromFilename(outName);
+    const downloadNameExtension = deriveExtensionFromFilename(downloadName);
+    const outNameDescription = isLambda ? 'S3 output key' : 'out name';
+    if (outNameExtension &&
+        downloadNameExtension &&
+        outNameExtension !== downloadNameExtension) {
+        throw new TypeError(`Image format mismatch: ${outName} was given as the ${outNameDescription} and ${downloadName} was given as the download name, but the extensions don't match.`);
+    }
+    if (downloadNameExtension) {
+        if (cliFlag && downloadNameExtension !== cliFlag) {
+            throw new TypeError(`Image format mismatch: ${downloadName} was given as the download name, but --image-format=${cliFlag} was passed. The image formats must match.`);
+        }
+        return { format: downloadNameExtension, source: 'Download name extension' };
+    }
+    if (outNameExtension) {
+        if (cliFlag && outNameExtension !== cliFlag) {
+            throw new TypeError(`Image format mismatch: ${outName} was given as the ${outNameDescription}, but --image-format=${cliFlag} was passed. The image formats must match.`);
+        }
+        return { format: outNameExtension, source: 'Out name extension' };
+    }
+    if (cliFlag === 'none') {
+        throw new TypeError('The --image-format flag must not be "none" for stills.');
+    }
+    if (cliFlag !== null) {
+        return { format: cliFlag, source: '--image-format flag' };
+    }
+    if (configImageFormat !== null && configImageFormat !== 'none') {
+        return { format: configImageFormat, source: 'Config file' };
+    }
+    return { format: 'png', source: 'Default' };
+};
+exports.determineFinalImageFormat = determineFinalImageFormat;

package/dist/editor/components/Canvas.js

@@ -122,8 +122,12 @@ const Canvas = () => {
         if (!current) {
             return;
         }
-        current.addEventListener('wheel', onWheel);
-        return () => current.removeEventListener('wheel', onWheel);
+        current.addEventListener('wheel', onWheel, { passive: false });
+        return () => 
+        // @ts-expect-error
+        current.removeEventListener('wheel', onWheel, {
+            passive: false,
+        });
     }, [onWheel]);
     const onReset = (0, react_1.useCallback)(() => {
         setSize(() => {
@@ -188,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,10 +15,10 @@ 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");
+const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
@@ -48,6 +48,8 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [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 === '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, {}))] }));
+    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, { 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,20 @@ const GlobalKeybindings = () => {
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
+        });
+        const cmdKKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'k',
+            callback: () => {
+                setSelectedModal({
+                    type: 'quick-switcher',
+                    mode: 'compositions',
+                    invocationTimestamp: Date.now(),
+                });
+            },
+            commandCtrlKey: true,
+            preventDefault: true,
         });
         const cKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -28,21 +42,26 @@ 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();
             cKey.unregister();
             questionMark.unregister();
+            cmdKKey.unregister();
         };
     }, [keybindings, setCheckerboard, setSelectedModal]);
     return null;

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;