@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

package/dist/preview-server/error-overlay/react-overlay/utils/stack-frame.d.ts

@@ -4,25 +4,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare type ScriptLine = {
+export type ScriptLine = {
     lineNumber: number;
     content: string;
     highlight: boolean;
 };
-export declare type SymbolicatedStackFrame = {
+export type SymbolicatedStackFrame = {
     originalFunctionName: string | null;
     originalFileName: string | null;
     originalLineNumber: number | null;
     originalColumnNumber: number | null;
     originalScriptCode: ScriptLine[] | null;
 };
-export declare type StackFrame = {
+export type StackFrame = {
     functionName: string | null;
     fileName: string;
     lineNumber: number;
     columnNumber: number;
 };
-export declare type SomeStackFrame = {
+export type SomeStackFrame = {
     type: 'symbolicated';
     frame: SymbolicatedStackFrame;
 } | {

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

@@ -24,6 +24,8 @@ const AskOnDiscord = ({ canHaveKeyboardShortcuts }) => {
             key: 'd',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);

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

@@ -1,7 +1,11 @@
 import React from 'react';
-export declare const Button: React.FC<{
+export declare const Button: React.ForwardRefExoticComponent<{
     onClick: () => void;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     children: React.ReactNode;
-    style?: React.CSSProperties;
-}>;
+    style?: React.CSSProperties | undefined;
+    buttonContainerStyle?: React.CSSProperties | undefined;
+    autoFocus?: boolean | undefined;
+    title?: string | undefined;
+    id?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -14,18 +14,22 @@ const button = {
     color: 'white',
     flexDirection: 'row',
 };
-const buttonContainer = {
-    padding: 10,
-    cursor: 'pointer',
-    fontSize: 14,
-};
-const Button = ({ children, onClick, disabled, style }) => {
+const ButtonRefForwardFunction = ({ children, onClick, title, disabled, style, id, autoFocus, buttonContainerStyle, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {
         return {
             ...button,
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: combined, type: "button", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+    const buttonContainer = (0, react_1.useMemo)(() => {
+        return {
+            padding: 10,
+            cursor: disabled ? 'inherit' : 'pointer',
+            fontSize: 14,
+            opacity: disabled ? 0.7 : 1,
+            ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
+        };
+    }, [buttonContainerStyle, disabled]);
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, autoFocus: autoFocus, title: title, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
-exports.Button = Button;
+exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalculateMetadataErrorExplainer: React.FC<{}>;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalculateMetadataErrorExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("../../../editor/components/Menu/styles");
+const colors_1 = require("../../../editor/helpers/colors");
+const CalculateMetadataErrorExplainer = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["This error occured while calling", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "."] }));
+};
+exports.CalculateMetadataErrorExplainer = CalculateMetadataErrorExplainer;
+const style = {
+    borderRadius: 3,
+    color: 'white',
+    padding: 12,
+    backgroundColor: colors_1.BORDER_COLOR,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+};

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

@@ -2,29 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const is_menu_item_1 = require("../../../editor/components/Menu/is-menu-item");
+const colors_1 = require("../../../editor/helpers/colors");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+};
 const frame = {
     backgroundColor: '#070707',
     marginBottom: 20,
+    overflowY: 'auto',
 };
 const lineNumber = {
-    display: 'inline-block',
     whiteSpace: 'pre',
-    backgroundColor: '#121212',
-    paddingLeft: 10,
     paddingRight: 12,
-    marginRight: 12,
     color: 'inherit',
     fontSize: 14,
+    lineHeight: 1.7,
+    width: 60,
+    flexShrink: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    fontFamily: 'monospace',
 };
 const CodeFrame = ({ source, lineNumberWidth }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: frame, children: source.map((s, j) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                    fontFamily: 'monospace',
-                    whiteSpace: 'pre',
-                    tabSize: 2,
-                    color: s.highlight ? 'white' : 'rgba(255, 255, 255, 0.6)',
-                    lineHeight: 1.7,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: lineNumber, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), s.content] }, j));
+    return ((0, jsx_runtime_1.jsx)("div", { style: frame, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: source.map((s, j) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            ...lineNumber,
+                            backgroundColor: s.highlight ? 'white' : '#121212',
+                            color: s.highlight ? 'black' : 'rgba(255, 255, 255, 0.6)',
+                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: 'monospace',
+                            whiteSpace: 'pre',
+                            tabSize: 2,
+                            color: s.highlight ? 'white' : 'rgba(255, 255, 255, 0.6)',
+                            backgroundColor: s.highlight ? colors_1.BLUE : 'transparent',
+                            lineHeight: 1.7,
+                            paddingRight: 12,
+                            paddingLeft: 12,
+                        }, children: s.content })] }, j));
         }) }));
 };
 exports.CodeFrame = CodeFrame;

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
+export type OnRetry = null | (() => void);
 export declare const ErrorDisplay: React.FC<{
     display: ErrorRecord;
     keyboardShortcuts: boolean;
+    onRetry: OnRetry;
+    canHaveDismissButton: boolean;
+    calculateMetadata: boolean;
 }>;

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

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorDisplay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const layout_1 = require("../../../editor/components/layout");
+const is_menu_item_1 = require("../../../editor/components/Menu/is-menu-item");
 const map_error_to_react_stack_1 = require("../react-overlay/effects/map-error-to-react-stack");
 const AskOnDiscord_1 = require("./AskOnDiscord");
+const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
 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 Retry_1 = require("./Retry");
 const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
 const StackFrame_1 = require("./StackFrame");
 const stack = {
@@ -20,7 +24,7 @@ const spacer = {
     width: 5,
     display: 'inline-block',
 };
-const ErrorDisplay = ({ display, keyboardShortcuts }) => {
+const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
     const highestLineNumber = Math.max(...display.stackFrames
         .map((s) => s.originalScriptCode)
         .flat(1)
@@ -39,7 +43,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts }) => {
     }, [display.error]);
     const lineNumberWidth = String(highestLineNumber).length;
     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.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), 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 }), onRetry ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Retry_1.RetryButton, { onClick: onRetry })] })) : null, calculateMetadata ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})] })) : null, (0, jsx_runtime_1.jsx)("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, 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,5 +1,9 @@
 import React from 'react';
+import type { OnRetry } from './ErrorDisplay';
 export declare const ErrorLoader: React.FC<{
     error: Error;
     keyboardShortcuts: boolean;
+    onRetry: OnRetry;
+    canHaveDismissButton: boolean;
+    calculateMetadata: 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, keyboardShortcuts }) => {
+const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
     });
@@ -48,14 +48,14 @@ const ErrorLoader = ({ error, keyboardShortcuts }) => {
         });
     }, [error]);
     if (state.type === 'loading') {
-        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
     }
     if (state.type === 'error') {
-        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: "Error while getting stack trace:" }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: state.err.stack }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Report this in the Remotion repo." })] }));
+        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, canHaveDismissButton: canHaveDismissButton }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Error while getting stack trace:" }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: state.err.stack }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Report this in the Remotion repo." })] }));
     }
     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.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }), (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, { keyboardShortcuts: keyboardShortcuts, 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, onRetry: onRetry, canHaveDismissButton: canHaveDismissButton, calculateMetadata: calculateMetadata }) }));
 };
 exports.ErrorLoader = ErrorLoader;

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

@@ -3,4 +3,5 @@ export declare const ErrorTitle: React.FC<{
     name: string;
     message: string;
     symbolicating: boolean;
+    canHaveDismissButton: boolean;
 }>;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorTitle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../../editor/helpers/colors");
 const react_overlay_1 = require("../react-overlay");
 const DismissButton_1 = require("./DismissButton");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -20,7 +21,7 @@ const left = {
 };
 const errName = {
     fontSize: 18,
-    color: '#4290f5',
+    color: colors_1.BLUE,
     display: 'inline-block',
 };
 const row = {
@@ -31,7 +32,7 @@ const row = {
 const spacer = {
     width: 5,
 };
-const ErrorTitle = ({ name, message, symbolicating }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: title, className: "css-reset", 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, {})] }));
+const ErrorTitle = ({ name, message, symbolicating, canHaveDismissButton }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, className: "css-reset", 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 : canHaveDismissButton ? ((0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})) : null] }));
 };
 exports.ErrorTitle = ErrorTitle;

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

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../../editor/helpers/colors");
 const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
 const ShortcutHint_1 = require("./ShortcutHint");
 const buttonStyle = {
-    backgroundColor: 'var(--blue)',
+    backgroundColor: colors_1.BLUE,
     color: 'white',
 };
 const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
@@ -27,6 +28,8 @@ const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
             key: 'h',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openLink, registerKeybinding]);

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

@@ -4,6 +4,7 @@ exports.OpenInEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-console */
 const react_1 = require("react");
+const open_in_editor_1 = require("../../../editor/helpers/open-in-editor");
 const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
 const ShortcutHint_1 = require("./ShortcutHint");
@@ -42,15 +43,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     }, []);
     const openInBrowser = (0, react_1.useCallback)(() => {
         dispatch({ type: 'start' });
-        fetch(`/api/open-in-editor`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify({
-                stack,
-            }),
-        })
+        (0, open_in_editor_1.openInEditor)(stack)
             .then((res) => res.json())
             .then((data) => {
             if (data.success) {
@@ -87,6 +80,8 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
             key: 'o',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);

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

@@ -1,10 +1,10 @@
 import React from 'react';
-declare type SetErrors = {
+type SetErrors = {
     setErrors: (errs: State) => void;
     addError: (err: Error) => void;
 };
 export declare const setErrorsRef: React.RefObject<SetErrors>;
-declare type State = {
+type State = {
     type: 'clear';
 } | {
     type: 'errors';

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

@@ -44,7 +44,7 @@ const Overlay = () => {
                 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));
+                return ((0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { keyboardShortcuts: i === 0, error: err, onRetry: null, canHaveDismissButton: true, calculateMetadata: false }, err.stack));
             }) }) }));
 };
 exports.Overlay = Overlay;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const RetryButton: React.FC<{
+    onClick: () => void;
+}>;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RetryButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("./Button");
+const RetryButton = ({ onClick }) => {
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Retry calculateMetadata()" });
+};
+exports.RetryButton = RetryButton;

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

@@ -23,6 +23,8 @@ const SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
             key: 'g',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);

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

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

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

@@ -1,16 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShortcutHint = void 0;
+exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
+exports.cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
     ? '⌘'
     : 'Ctrl';
 const container = {
     display: 'inline-block',
     marginLeft: 6,
     opacity: 0.6,
+    verticalAlign: 'middle',
 };
 const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
-    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
+    const style = (0, react_1.useMemo)(() => {
+        if (keyToPress === '↵') {
+            return {
+                display: 'inline-block',
+                transform: `translateY(2px)`,
+            };
+        }
+        return {};
+    }, [keyToPress]);
+    if ((0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}` : '', (0, jsx_runtime_1.jsx)("span", { style: style, children: keyToPress.toUpperCase() })] }));
 };
 exports.ShortcutHint = ShortcutHint;

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

@@ -1,4 +1,4 @@
-export declare type THelpLink = {
+export type THelpLink = {
     url: string;
     title: string;
 };

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

@@ -38,6 +38,12 @@ const getHelpLink = (message) => {
             url: 'https://remotion.dev/docs/media-playback-error',
         };
     }
+    if (message.includes('Div is not part of the THREE')) {
+        return {
+            title: '<Sequence> inside <ThreeCanvas>',
+            url: 'https://remotion.dev/docs/sequence#note-for-remotionthree',
+        };
+    }
     return null;
 };
 exports.getHelpLink = getHelpLink;

package/dist/preview-server/file-existence-watchers.d.ts

@@ -0,0 +1,13 @@
+export declare const subscribeToFileExistenceWatchers: ({ file: relativeFile, remotionRoot, clientId, }: {
+    file: string;
+    remotionRoot: string;
+    clientId: string;
+}) => {
+    exists: boolean;
+};
+export declare const unsubscribeFromFileExistenceWatchers: ({ file, remotionRoot, clientId, }: {
+    file: string;
+    remotionRoot: string;
+    clientId: string;
+}) => void;
+export declare const unsubscribeClientFileExistenceWatchers: (clientId: string) => void;

package/dist/preview-server/file-existence-watchers.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeClientFileExistenceWatchers = exports.unsubscribeFromFileExistenceWatchers = exports.subscribeToFileExistenceWatchers = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const file_watcher_1 = require("../file-watcher");
+const live_events_1 = require("./live-events");
+const fileExistenceWatchers = {};
+const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, clientId, }) => {
+    const file = node_path_1.default.resolve(remotionRoot, relativeFile);
+    const { unwatch, exists } = (0, file_watcher_1.installFileWatcher)({
+        file,
+        onChange: (type) => {
+            if (type === 'created') {
+                (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                    listener.sendEventToClient({
+                        type: 'watched-file-undeleted',
+                        // Must be relative file because that's what the client expects
+                        file: relativeFile,
+                    });
+                });
+            }
+            if (type === 'deleted') {
+                (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                    listener.sendEventToClient({
+                        type: 'watched-file-deleted',
+                        // Must be relative file because that's what the client expects
+                        file: relativeFile,
+                    });
+                });
+            }
+        },
+    });
+    if (!fileExistenceWatchers[clientId]) {
+        fileExistenceWatchers[clientId] = {};
+    }
+    fileExistenceWatchers[clientId][file] = unwatch;
+    return { exists };
+};
+exports.subscribeToFileExistenceWatchers = subscribeToFileExistenceWatchers;
+const unsubscribeFromFileExistenceWatchers = ({ file, remotionRoot, clientId, }) => {
+    var _a, _b;
+    const actualPath = node_path_1.default.resolve(remotionRoot, file);
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    (_b = (_a = fileExistenceWatchers[clientId])[actualPath]) === null || _b === void 0 ? void 0 : _b.call(_a);
+    delete fileExistenceWatchers[clientId][actualPath];
+};
+exports.unsubscribeFromFileExistenceWatchers = unsubscribeFromFileExistenceWatchers;
+const unsubscribeClientFileExistenceWatchers = (clientId) => {
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    Object.values(fileExistenceWatchers[clientId]).forEach((unwatch) => {
+        unwatch();
+    });
+    delete fileExistenceWatchers[clientId];
+};
+exports.unsubscribeClientFileExistenceWatchers = unsubscribeClientFileExistenceWatchers;

package/dist/preview-server/get-absolute-public-dir.d.ts

@@ -0,0 +1,4 @@
+export declare const getAbsolutePublicDir: ({ userPassedPublicDir, remotionRoot, }: {
+    userPassedPublicDir: string | null;
+    remotionRoot: string;
+}) => string;

package/dist/preview-server/get-absolute-public-dir.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAbsolutePublicDir = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const getAbsolutePublicDir = ({ userPassedPublicDir, remotionRoot, }) => {
+    const publicDir = userPassedPublicDir
+        ? node_path_1.default.resolve(remotionRoot, userPassedPublicDir)
+        : node_path_1.default.join(remotionRoot, 'public');
+    return publicDir;
+};
+exports.getAbsolutePublicDir = getAbsolutePublicDir;