@remotion/cli 3.0.30 → 3.1.1

package/dist/get-cli-options.js

@@ -152,6 +152,8 @@ const getCliOptions = async (options) => {
         headless: remotion_1.Internals.getChromiumHeadlessMode(),
         gl: (_a = remotion_1.Internals.getChromiumOpenGlRenderer()) !== null && _a !== void 0 ? _a : remotion_1.Internals.DEFAULT_OPENGL_RENDERER,
     };
+    const everyNthFrame = remotion_1.Internals.getAndValidateEveryNthFrame(codec);
+    const numberOfGifLoops = remotion_1.Internals.getAndValidateNumberOfGifLoops(codec);
     const parallelism = remotion_1.Internals.getConcurrency();
     renderer_1.RenderInternals.validateConcurrency(parallelism, 'concurrency');
     return {
@@ -172,6 +174,8 @@ const getCliOptions = async (options) => {
         pixelFormat,
         imageFormat,
         proResProfile,
+        everyNthFrame,
+        numberOfGifLoops,
         stillFrame: remotion_1.Internals.getStillFrame(),
         browserExecutable,
         ffmpegExecutable,

package/dist/image-formats.js

@@ -15,7 +15,8 @@ const getImageFormat = (codec) => {
         codec === 'h265' ||
         codec === 'vp8' ||
         codec === 'vp9' ||
-        codec === 'prores') {
+        codec === 'prores' ||
+        codec === 'gif') {
         return 'jpeg';
     }
     if (codec === undefined) {

package/dist/index.d.ts

@@ -74,7 +74,7 @@ export declare const CliInternals: {
         parallelism: number | null;
         frameRange: import("remotion").FrameRange | null;
         shouldOutputImageSequence: boolean;
-        codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv";
+        codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
         overwrite: boolean;
         inputProps: object;
         envVariables: Record<string, string>;
@@ -85,6 +85,8 @@ export declare const CliInternals: {
         pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         imageFormat: "png" | "jpeg" | "none";
         proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+        everyNthFrame: number;
+        numberOfGifLoops: number | null;
         stillFrame: number;
         browserExecutable: import("remotion").BrowserExecutable;
         ffmpegExecutable: import("remotion").FfmpegExecutable;

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

@@ -11,6 +11,8 @@ export declare type CommandLineOptions = {
     ['env-file']: string;
     ['ignore-certificate-errors']: string;
     ['disable-web-security']: string;
+    ['every-nth-frame']: number;
+    ['number-of-gif-loops']: number;
     codec: Codec;
     concurrency: number;
     timeout: number;

package/dist/parse-command-line.js

@@ -42,6 +42,9 @@ const parseCommandLine = (type) => {
     if (exports.parsedCli['ffmpeg-executable']) {
         remotion_1.Config.Rendering.setFfmpegExecutable((0, path_1.resolve)(exports.parsedCli['ffmpeg-executable']));
     }
+    if (exports.parsedCli['number-of-gif-loops']) {
+        remotion_1.Config.Rendering.setNumberOfGifLoops(exports.parsedCli['number-of-gif-loops']);
+    }
     if (exports.parsedCli['ffprobe-executable']) {
         remotion_1.Config.Rendering.setFfprobeExecutable((0, path_1.resolve)(exports.parsedCli['ffprobe-executable']));
     }
@@ -57,9 +60,6 @@ const parseCommandLine = (type) => {
     if (exports.parsedCli['disable-headless']) {
         remotion_1.Config.Puppeteer.setChromiumHeadlessMode(false);
     }
-    if (exports.parsedCli.gl) {
-        remotion_1.Config.Puppeteer.setChromiumOpenGlRenderer(exports.parsedCli.gl);
-    }
     if (exports.parsedCli.log) {
         if (!remotion_1.Internals.Logging.isValidLogLevel(exports.parsedCli.log)) {
             log_1.Log.error('Invalid `--log` value passed.');
@@ -104,6 +104,12 @@ const parseCommandLine = (type) => {
     if (exports.parsedCli.codec) {
         remotion_1.Config.Output.setCodec(exports.parsedCli.codec);
     }
+    if (exports.parsedCli['every-nth-frame']) {
+        remotion_1.Config.Rendering.setEveryNthFrame(exports.parsedCli['every-nth-frame']);
+    }
+    if (exports.parsedCli.gl) {
+        remotion_1.Config.Puppeteer.setChromiumOpenGlRenderer(exports.parsedCli.gl);
+    }
     if (exports.parsedCli['prores-profile']) {
         remotion_1.Config.Output.setProResProfile(String(exports.parsedCli['prores-profile']));
     }

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

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

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

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

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

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

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

@@ -2,4 +2,5 @@ import React from 'react';
 import type { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
 export declare const ErrorDisplay: React.FC<{
     display: ErrorRecord;
+    keyboardShortcuts: boolean;
 }>;

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

@@ -6,6 +6,8 @@ const react_1 = require("react");
 const map_error_to_react_stack_1 = require("../react-overlay/effects/map-error-to-react-stack");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const ErrorTitle_1 = require("./ErrorTitle");
+const get_help_link_1 = require("./get-help-link");
+const HelpLink_1 = require("./HelpLink");
 const OpenInEditor_1 = require("./OpenInEditor");
 const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
 const StackFrame_1 = require("./StackFrame");
@@ -18,7 +20,7 @@ const spacer = {
     width: 5,
     display: 'inline-block',
 };
-const ErrorDisplay = ({ display }) => {
+const ErrorDisplay = ({ display, keyboardShortcuts }) => {
     const highestLineNumber = Math.max(...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
@@ -36,7 +38,8 @@ const ErrorDisplay = ({ display }) => {
             .trim();
     }, [display.error]);
     const lineNumberWidth = String(highestLineNumber).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message }), display.stackFrames.length > 0 && window.remotion_editorName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpenInEditor_1.OpenInEditor, { stack: display.stackFrames[0] }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { message: display.error.message }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, {}), (0, jsx_runtime_1.jsx)("div", { style: stack, children: display.stackFrames.map((s, i) => {
+    const helpLink = (0, get_help_link_1.getHelpLink)(message);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message }), helpLink ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), (0, jsx_runtime_1.jsx)("div", { style: stack, children: display.stackFrames.map((s, i) => {
                     return ((0, jsx_runtime_1.jsx)(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
                     , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)' }, i));

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

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const ErrorLoader: React.FC<{
     error: Error;
+    keyboardShortcuts: boolean;
 }>;

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

@@ -21,7 +21,7 @@ const errorWhileErrorStyle = {
     lineHeight: 1.5,
     whiteSpace: 'pre',
 };
-const ErrorLoader = ({ error }) => {
+const ErrorLoader = ({ error, keyboardShortcuts }) => {
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -56,6 +56,6 @@ const ErrorLoader = ({ error }) => {
     if (state.type === 'no-record') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorDisplay_1.ErrorDisplay, { display: state.record }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorDisplay_1.ErrorDisplay, { keyboardShortcuts: keyboardShortcuts, display: state.record }) }));
 };
 exports.ErrorLoader = ErrorLoader;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ErrorMessage: React.FC<{
+    message: string;
+}>;

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const colors_1 = require("../../../editor/helpers/colors");
+const carets_1 = require("./carets");
+const fontSize = 24;
+const lineHeight = 1.5;
+const maxLines = 2;
+const buttonSize = 32;
+const maskImage = 'linear-gradient(to bottom, white 60%, transparent)';
+const container = {
+    position: 'relative',
+    marginBottom: 15,
+};
+const messageContainer = {
+    fontSize,
+    lineHeight,
+    overflow: 'hidden',
+};
+const moreLine = {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'absolute',
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_HOVERED}`,
+    height: 0,
+    marginTop: 4,
+};
+const moreButton = {
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    marginTop: -buttonSize / 2,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    color: 'white',
+};
+const ErrorMessage = ({ message }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        shouldApplyCssTransforms: false,
+        triggerOnWindowResize: true,
+    });
+    const errorLines = size ? size.height / (lineHeight * fontSize) : null;
+    const style = (0, react_1.useMemo)(() => {
+        const isExpanded = expanded || (errorLines !== null && errorLines <= maxLines);
+        return {
+            ...messageContainer,
+            maxHeight: isExpanded ? undefined : fontSize * lineHeight * maxLines,
+            maskImage: isExpanded ? undefined : maskImage,
+            WebkitMaskImage: isExpanded ? undefined : maskImage,
+        };
+    }, [errorLines, expanded]);
+    const toggle = (0, react_1.useCallback)(() => {
+        setExpanded((e) => !e);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
+};
+exports.ErrorMessage = ErrorMessage;

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

@@ -4,6 +4,7 @@ exports.ErrorTitle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_overlay_1 = require("../react-overlay");
 const DismissButton_1 = require("./DismissButton");
+const ErrorMessage_1 = require("./ErrorMessage");
 const Symbolicating_1 = require("./Symbolicating");
 const title = {
     marginBottom: 8,
@@ -14,17 +15,12 @@ const title = {
 const left = {
     flex: 1,
     paddingRight: 14,
-    lineHeight: 1.5,
-    whiteSpace: 'pre',
-    fontSize: '1.5em',
     fontWeight: 'bold',
-    overflowX: 'auto',
+    maxWidth: '100%',
 };
 const errName = {
-    fontSize: '0.8em',
-    background: 'linear-gradient(90deg,#4290f5,#42e9f5)',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    fontSize: 18,
+    color: '#4290f5',
     display: 'inline-block',
 };
 const row = {
@@ -36,6 +32,6 @@ const spacer = {
     width: 5,
 };
 const ErrorTitle = ({ name, message, symbolicating }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: title, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)("div", { children: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
 };
 exports.ErrorTitle = ErrorTitle;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { THelpLink } from './get-help-link';
+export declare const HelpLink: React.FC<{
+    canHaveKeyboardShortcuts: boolean;
+    link: THelpLink;
+}>;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
+const Button_1 = require("./Button");
+const ShortcutHint_1 = require("./ShortcutHint");
+const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
+    const openLink = (0, react_1.useCallback)(() => {
+        window.open(link.url, '_blank');
+    }, [link]);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openLink();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'h',
+            callback: onEditor,
+            commandCtrlKey: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openLink, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
+};
+exports.HelpLink = HelpLink;

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

@@ -2,4 +2,5 @@ import React from 'react';
 import type { SymbolicatedStackFrame } from '../react-overlay/utils/stack-frame';
 export declare const OpenInEditor: React.FC<{
     stack: SymbolicatedStackFrame;
+    canHaveKeyboardShortcuts: boolean;
 }>;

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

@@ -4,7 +4,9 @@ exports.OpenInEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-console */
 const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
+const ShortcutHint_1 = require("./ShortcutHint");
 const initialState = { type: 'idle' };
 const reducer = (state, action) => {
     if (action.type === 'start') {
@@ -29,9 +31,10 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const OpenInEditor = ({ stack }) => {
+const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
     const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
         if (isMounted.current === false)
             return;
@@ -72,6 +75,21 @@ const OpenInEditor = ({ stack }) => {
             isMounted.current = false;
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'o',
+            callback: onEditor,
+            commandCtrlKey: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
     const label = (0, react_1.useMemo)(() => {
         switch (state.type) {
             case 'error':
@@ -86,6 +104,6 @@ const OpenInEditor = ({ stack }) => {
                 throw new Error('invalid state');
         }
     }, [state.type]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: label }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: [label, canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };
 exports.OpenInEditor = OpenInEditor;

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

@@ -4,6 +4,7 @@ exports.Overlay = exports.setErrorsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const keybindings_1 = require("../../../editor/state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
 exports.setErrorsRef = (0, react_1.createRef)();
 const errorsAreTheSame = (first, second) => {
@@ -38,12 +39,12 @@ const Overlay = () => {
     if (errors.errors.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
-            backgroundColor: BACKGROUND_COLOR,
-            overflow: 'auto',
-            color: 'white',
-        }, children: errors.errors.map((err) => {
-            return (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { error: err }, err.stack);
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
+                backgroundColor: BACKGROUND_COLOR,
+                overflow: 'auto',
+                color: 'white',
+            }, children: errors.errors.map((err, i) => {
+                return ((0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { keyboardShortcuts: i === 0, error: err }, err.stack));
+            }) }) }));
 };
 exports.Overlay = Overlay;

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

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

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

@@ -3,11 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchGithubIssues = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
-const SearchGithubIssues = ({ message }) => {
+const ShortcutHint_1 = require("./ShortcutHint");
+const SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
     const openInBrowser = (0, react_1.useCallback)(() => {
         window.open(`https://github.com/remotion-dev/remotion/issues?q=${encodeURIComponent(message)}`, '_blank');
     }, [message]);
-    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Search GitHub Issues" });
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        if (!canHaveKeyboardShortcuts) {
+            return;
+        }
+        const onEditor = () => {
+            openInBrowser();
+        };
+        const { unregister } = registerKeybinding({
+            event: 'keydown',
+            key: 'g',
+            callback: onEditor,
+            commandCtrlKey: true,
+        });
+        return () => unregister();
+    }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openInBrowser, children: ["Search GitHub Issues", ' ', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "g", cmdOrCtrl: true })) : null] }));
 };
 exports.SearchGithubIssues = SearchGithubIssues;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ShortcutHint: React.FC<{
+    keyToPress: string;
+    cmdOrCtrl: boolean;
+}>;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShortcutHint = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+    ? '⌘'
+    : 'Ctrl';
+const container = {
+    display: 'inline-block',
+    marginLeft: 6,
+    opacity: 0.6,
+};
+const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
+};
+exports.ShortcutHint = ShortcutHint;

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

@@ -41,7 +41,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, {}) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: false }) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
 };

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

@@ -1,3 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const CaretRight: () => JSX.Element;
-export declare const CaretDown: () => JSX.Element;
+export declare const CaretDown: React.FC<{
+    invert: boolean;
+}>;

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

@@ -6,7 +6,7 @@ const CaretRight = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { style: { height: 20 }, "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 192 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 };
 exports.CaretRight = CaretRight;
-const CaretDown = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+const CaretDown = ({ invert }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: 20, transform: invert ? `rotate(180deg)` : '' }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;

package/dist/preview-server/error-overlay/remotion-overlay/get-help-link.d.ts

@@ -0,0 +1,5 @@
+export declare type THelpLink = {
+    url: string;
+    title: string;
+};
+export declare const getHelpLink: (message: string) => THelpLink | null;

package/dist/preview-server/error-overlay/remotion-overlay/get-help-link.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHelpLink = void 0;
+const getHelpLink = (message) => {
+    if (message.includes('See https://www.remotion.dev/docs/the-fundamentals#defining-compositions')) {
+        return {
+            title: 'Defining compositions',
+            url: 'See https://www.remotion.dev/docs/the-fundamentals#defining-compositions',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/wrong-composition-mount')) {
+        return {
+            title: 'Wrongly mounted <Composition>',
+            url: 'https://remotion.dev/docs/wrong-composition-mount',
+        };
+    }
+    return null;
+};
+exports.getHelpLink = getHelpLink;

package/dist/preview-server/fast-refresh/helpers.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+declare function registerExportsForReactRefresh(moduleExports: unknown, moduleID: unknown): void;
+declare function isReactRefreshBoundary(moduleExports: unknown): boolean;
+declare function shouldInvalidateReactRefreshBoundary(prevExports: unknown, nextExports: unknown): boolean;
+declare function getRefreshBoundarySignature(moduleExports: unknown): any[];
+declare function scheduleUpdate(): void;
+declare const _default: {
+    registerExportsForReactRefresh: typeof registerExportsForReactRefresh;
+    isReactRefreshBoundary: typeof isReactRefreshBoundary;
+    shouldInvalidateReactRefreshBoundary: typeof shouldInvalidateReactRefreshBoundary;
+    getRefreshBoundarySignature: typeof getRefreshBoundarySignature;
+    scheduleUpdate: typeof scheduleUpdate;
+};
+export default _default;