@remotion/studio
Version:
APIs for interacting with the Remotion Studio
71 lines (70 loc) • 3.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderStatusModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const retry_payload_1 = require("../../helpers/retry-payload");
const modals_1 = require("../../state/modals");
const Button_1 = require("../Button");
const is_menu_item_1 = require("../Menu/is-menu-item");
const ModalContainer_1 = require("../ModalContainer");
const ModalHeader_1 = require("../ModalHeader");
const NotificationCenter_1 = require("../Notifications/NotificationCenter");
const actions_1 = require("../RenderQueue/actions");
const context_1 = require("../RenderQueue/context");
const layout_1 = require("../layout");
const GuiRenderStatus_1 = require("./GuiRenderStatus");
const container = {
padding: 20,
maxWidth: 900,
paddingTop: 0,
};
const codeBlock = {
backgroundColor: '#222',
whiteSpace: 'pre',
padding: 12,
borderRadius: 4,
fontFamily: 'monospace',
overflow: 'auto',
maxHeight: 300,
};
const spacer = {
height: layout_1.SPACING_UNIT,
width: layout_1.SPACING_UNIT,
};
const buttonRow = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
};
const RenderStatusModal = ({ jobId, }) => {
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
const job = jobs.find((j) => j.id === jobId);
if (!job) {
throw new Error('job not found');
}
const onQuit = (0, react_1.useCallback)(() => {
setSelectedModal(null);
}, [setSelectedModal]);
const onRetry = (0, react_1.useCallback)(() => {
const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
setSelectedModal(retryPayload);
}, [job, setSelectedModal]);
const onClickOnRemove = (0, react_1.useCallback)(() => {
setSelectedModal(null);
(0, actions_1.removeRenderJob)(job).catch((err) => {
(0, NotificationCenter_1.showNotification)(`Could not remove job: ${err.message}`, 2000);
});
}, [job, setSelectedModal]);
const onClickOnCancel = (0, react_1.useCallback)(() => {
(0, actions_1.cancelRenderJob)(job).catch((err) => {
(0, NotificationCenter_1.showNotification)(`Could not cancel job: ${err.message}`, 2000);
});
}, [job]);
if (!job || job.status === 'idle') {
throw new Error('should not have rendered this modal');
}
return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [job.status === 'failed' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: job.error.stack })] })) : null, job.status === 'done' || job.status === 'running' ? ((0, jsx_runtime_1.jsx)(GuiRenderStatus_1.GuiRenderStatus, { job: job })) : null, (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [job.status === 'running' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
};
exports.RenderStatusModal = RenderStatusModal;