@remotion/studio
Version:
APIs for interacting with the Remotion Studio
81 lines (80 loc) • 5.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorDisplay = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const studio_shared_1 = require("@remotion/studio-shared");
const react_1 = require("react");
const remotion_1 = require("remotion");
const layout_1 = require("../../components/layout");
const is_menu_item_1 = require("../../components/Menu/is-menu-item");
const AskOnDiscord_1 = require("./AskOnDiscord");
const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
const CopyStackTrace_1 = require("./CopyStackTrace");
const ErrorTitle_1 = require("./ErrorTitle");
const get_help_link_1 = require("./get-help-link");
const HelpLink_1 = require("./HelpLink");
const MediaPlaybackErrorExplainer_1 = require("./MediaPlaybackErrorExplainer");
const OpenInEditor_1 = require("./OpenInEditor");
const Retry_1 = require("./Retry");
const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
const StackFrame_1 = require("./StackFrame");
const stack = {
marginTop: 17,
overflowX: 'scroll',
marginBottom: '10vh',
};
const spacer = {
width: 5,
display: 'inline-block',
};
const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
const highestLineNumber = Math.max(...display.stackFrames
.map((s) => s.originalScriptCode)
.flat(1)
.map((s) => {
var _a;
return (_a = s === null || s === void 0 ? void 0 : s.lineNumber) !== null && _a !== void 0 ? _a : 0;
}));
const message = (0, react_1.useMemo)(() => {
// Format compilation errors
const location = (0, studio_shared_1.getLocationFromBuildError)(display.error);
if (!location) {
return display.error.message;
}
return location.message
.replace(/\\n/g, '\n')
.replace(/\\t/g, ' ')
.replace(/^error:/, '')
.trim();
}, [display.error]);
const lineNumberWidth = String(highestLineNumber).length;
const helpLink = (0, get_help_link_1.getHelpLink)(message);
const errorTextForCopy = (0, react_1.useMemo)(() => {
const header = `${display.error.name}: ${message}`;
if (display.stackFrames.length > 0) {
const stackLines = display.stackFrames
.map((frame) => `at ${frame.originalFunctionName || '<anonymous>'} (${frame.originalFileName || 'unknown'}:${frame.originalLineNumber || '?'}:${frame.originalColumnNumber || '?'})`)
.join('\n');
return `${header}\n${stackLines}`;
}
return display.error.stack || header;
}, [display.stackFrames, display.error, message]);
return (jsx_runtime_1.jsxs("div", { children: [
jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message, canHaveDismissButton: canHaveDismissButton }), helpLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { canHaveKeyboardShortcuts: keyboardShortcuts, errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry })
] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})
] })) : null, display.error instanceof remotion_1.MediaPlaybackError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(MediaPlaybackErrorExplainer_1.MediaPlaybackErrorExplainer, { src: display.error.src })
] })) : null, jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: display.stackFrames.map((s, i) => {
return (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));
}) })
] }));
};
exports.ErrorDisplay = ErrorDisplay;