@remotion/cli 3.0.29 → 3.1.0

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationCenter = exports.notificationCenter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Notification_1 = require("./Notification");
+const container = {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'column',
+    paddingTop: 20,
+    pointerEvents: 'none',
+};
+exports.notificationCenter = (0, react_1.createRef)();
+const NotificationCenter = () => {
+    const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const onRemove = (0, react_1.useCallback)((id) => {
+        setNotifications((not) => {
+            return not.filter((n) => n.id !== id);
+        });
+    }, []);
+    const addNotification = (0, react_1.useCallback)((notification) => {
+        setNotifications((previousNotifications) => {
+            return [...previousNotifications, notification];
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.notificationCenter, () => {
+        return {
+            addNotification,
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: notifications.map((n) => {
+            return ((0, jsx_runtime_1.jsx)(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
+        }) }));
+};
+exports.NotificationCenter = NotificationCenter;

package/dist/editor/components/PlayPause.js

@@ -25,7 +25,7 @@ const PlayPause = ({ playbackRate, loop }) => {
         loop,
         playbackRate,
     });
-    const { playing, play, pause, frameBack, seek, frameForward, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, } = player_1.PlayerInternals.usePlayer();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -41,6 +41,12 @@ const PlayPause = ({ playbackRate, loop }) => {
         }
         e.preventDefault();
     }, [pause, play, playing]);
+    const onEnter = (0, react_1.useCallback)((e) => {
+        if (playing) {
+            pauseAndReturnToPlayStart();
+        }
+        e.preventDefault();
+    }, [pauseAndReturnToPlayStart, playing]);
     const videoFps = (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : null;
     const onArrowLeft = (0, react_1.useCallback)((e) => {
         if (!videoFps) {
@@ -89,19 +95,59 @@ const PlayPause = ({ playbackRate, loop }) => {
     }, [seek, video]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding('keydown', 'ArrowLeft', onArrowLeft);
-        const arrowRight = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const space = keybindings.registerKeybinding('keydown', ' ', onSpace);
-        const a = keybindings.registerKeybinding('keydown', 'a', jumpToStart);
-        const e = keybindings.registerKeybinding('keydown', 'e', jumpToEnd);
+        const arrowLeft = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowLeft',
+            callback: onArrowLeft,
+            commandCtrlKey: false,
+        });
+        const arrowRight = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            callback: onArrowRight,
+            commandCtrlKey: false,
+        });
+        const space = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: ' ',
+            callback: onSpace,
+            commandCtrlKey: false,
+        });
+        const enter = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
+        const a = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'a',
+            callback: jumpToStart,
+            commandCtrlKey: false,
+        });
+        const e = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'e',
+            callback: jumpToEnd,
+            commandCtrlKey: false,
+        });
         return () => {
             arrowLeft.unregister();
             arrowRight.unregister();
             space.unregister();
+            enter.unregister();
             a.unregister();
             e.unregister();
         };
-    }, [jumpToEnd, jumpToStart, keybindings, onArrowLeft, onArrowRight, onSpace]);
+    }, [
+        jumpToEnd,
+        jumpToStart,
+        keybindings,
+        onArrowLeft,
+        onArrowRight,
+        onEnter,
+        onSpace,
+    ]);
     if (isStill) {
         return null;
     }

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

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

package/dist/editor/components/TimelineInOutToggle.js

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

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -38,6 +38,6 @@ const UpdateModal = ({ info }) => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyText)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/helpers/copy-text.d.ts

@@ -1 +1 @@
-export declare const copyCmd: (cmd: string) => void;
+export declare const copyText: (cmd: string) => void;

package/dist/editor/helpers/copy-text.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyCmd = void 0;
-const copyCmd = (cmd) => {
+exports.copyText = void 0;
+const copyText = (cmd) => {
     const permissionName = 'clipboard-write';
     navigator.permissions
         .query({ name: permissionName })
@@ -11,7 +11,8 @@ const copyCmd = (cmd) => {
         }
     })
         .catch((err) => {
-        console.log('Could not copy command', err);
+        // eslint-disable-next-line no-alert
+        alert('Could not copy:' + err);
     });
 };
-exports.copyCmd = copyCmd;
+exports.copyText = copyText;

package/dist/editor/helpers/pick-color.d.ts

@@ -0,0 +1 @@
+export declare const pickColor: () => void;

package/dist/editor/helpers/pick-color.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pickColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../components/layout");
+const ColorDot_1 = require("../components/Notifications/ColorDot");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const copy_text_1 = require("./copy-text");
+const pickColor = () => {
+    // @ts-expect-error
+    const open = new EyeDropper().open();
+    open
+        .then((color) => {
+        var _a;
+        (0, copy_text_1.copyText)(color.sRGBHex);
+        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorDot_1.ColorDot, { color: color.sRGBHex }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " Copied", ' ', color.sRGBHex] })),
+            created: Date.now(),
+            duration: 2000,
+            id: String(Math.random()),
+        });
+    })
+        .catch((err) => {
+        var _a;
+        if (err.message.includes('canceled')) {
+            return;
+        }
+        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+            content: `Could not pick color.`,
+            duration: 2000,
+            created: Date.now(),
+            id: String(Math.random()),
+        });
+    });
+};
+exports.pickColor = pickColor;

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

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

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

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

package/dist/editor/state/keybindings.js

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

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

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

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

@@ -8,7 +8,7 @@ export declare const getCliOptions: (options: {
     parallelism: number | null;
     frameRange: 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>;
@@ -19,6 +19,8 @@ export declare const getCliOptions: (options: {
     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: BrowserExecutable;
     ffmpegExecutable: import("remotion").FfmpegExecutable;

package/dist/get-cli-options.js

@@ -152,9 +152,13 @@ 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 {
         puppeteerTimeout: remotion_1.Internals.getCurrentPuppeteerTimeout(),
-        parallelism: remotion_1.Internals.getConcurrency(),
+        parallelism,
         frameRange,
         shouldOutputImageSequence,
         codec,
@@ -170,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;
+}>;