@remotion/cli 3.0.28 → 3.0.31

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.js

@@ -152,9 +152,11 @@ 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 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,

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;
 }>;