@remotion/studio
Version:
APIs for interacting with the Remotion Studio
63 lines (62 loc) • 4.88 kB
JavaScript
;
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 is_menu_item_1 = require("../../components/Menu/is-menu-item");
const layout_1 = require("../../components/layout");
const url_state_1 = require("../../helpers/url-state");
const AskOnDiscord_1 = require("./AskOnDiscord");
const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
const CompositionIdsDropdown_1 = require("./CompositionIdsDropdown");
const ErrorTitle_1 = require("./ErrorTitle");
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 get_help_link_1 = require("./get-help-link");
const stack = {
marginTop: 17,
overflowX: 'scroll',
marginBottom: '10vh',
};
const spacer = {
width: 5,
display: 'inline-block',
};
const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
var _a;
const compositionIds = (_a = window === null || window === void 0 ? void 0 : window.remotion_seenCompositionIds) !== null && _a !== void 0 ? _a : [];
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 getCurrentCompositionId = () => {
var _a;
const route = (0, url_state_1.getRoute)();
const id = route.startsWith('/') ? route.slice(1) : route;
return compositionIds.includes(id) ? id : ((_a = compositionIds[0]) !== null && _a !== void 0 ? _a : null);
};
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, compositionIds.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CompositionIdsDropdown_1.CompositionIdsDropdown, { compositionIds: compositionIds, currentId: getCurrentCompositionId() }), (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));
}) })] }));
};
exports.ErrorDisplay = ErrorDisplay;