@remotion/studio
Version:
APIs for interacting with the Remotion Studio
101 lines (100 loc) • 5.06 kB
JavaScript
"use strict";
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 layout_1 = require("../layout");
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 client_side_render_types_1 = require("../RenderQueue/client-side-render-types");
const context_1 = require("../RenderQueue/context");
const ClientRenderProgress_1 = require("./ClientRenderProgress");
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, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
const job = jobs.find((j) => j.id === jobId);
if (!job) {
throw new Error('job not found');
}
const isClientJob = (0, context_1.isClientRenderJob)(job);
const onQuit = (0, react_1.useCallback)(() => {
setSelectedModal(null);
}, [setSelectedModal]);
const onRetry = (0, react_1.useCallback)(() => {
if (isClientJob) {
if ((0, client_side_render_types_1.isRestoredClientJob)(job)) {
return;
}
const retryPayload = (0, retry_payload_1.makeClientRetryPayload)(job);
setSelectedModal(retryPayload);
}
else {
const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
setSelectedModal(retryPayload);
}
}, [job, isClientJob, setSelectedModal]);
const onClickOnRemove = (0, react_1.useCallback)(() => {
setSelectedModal(null);
if (isClientJob) {
removeClientJob(job.id);
(0, NotificationCenter_1.showNotification)('Removed render', 2000);
}
else {
(0, actions_1.removeRenderJob)(job).catch((err) => {
(0, NotificationCenter_1.showNotification)(`Could not remove job: ${err.message}`, 2000);
});
}
}, [job, isClientJob, removeClientJob, setSelectedModal]);
const onClickOnCancel = (0, react_1.useCallback)(() => {
if (isClientJob) {
cancelClientJob(job.id);
}
else {
(0, actions_1.cancelRenderJob)(job).catch((err) => {
(0, NotificationCenter_1.showNotification)(`Could not cancel job: ${err.message}`, 2000);
});
}
}, [job, isClientJob, cancelClientJob]);
if (job.status === 'idle') {
throw new Error('should not have rendered this modal');
}
return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [
jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${job.compositionId}` }), jsx_runtime_1.jsxs("div", { style: container, children: [job.status === 'failed' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("p", { children: "The render failed because of the following error:" }), 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') &&
(isClientJob ? (jsx_runtime_1.jsx(ClientRenderProgress_1.ClientRenderProgress, { job: job })) : (jsx_runtime_1.jsx(GuiRenderStatus_1.GuiRenderStatus, { job: job }))), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsxs("div", { style: buttonRow, children: [job.status === 'running' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), jsx_runtime_1.jsx(layout_1.Flex, {}), job.status === 'failed' ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onQuit, children: "Close" })
] })
] })
] }));
};
exports.RenderStatusModal = RenderStatusModal;