@remotion/studio
Version:
APIs for interacting with the Remotion Studio
122 lines (121 loc) • 4.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodemodFooter = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
const use_keybinding_1 = require("../../helpers/use-keybinding");
const modals_1 = require("../../state/modals");
const layout_1 = require("../layout");
const ModalButton_1 = require("../ModalButton");
const NotificationCenter_1 = require("../Notifications/NotificationCenter");
const actions_1 = require("../RenderQueue/actions");
const DiffPreview_1 = require("./DiffPreview");
const CodemodFooter = ({ codemod, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
const [submitting, setSubmitting] = (0, react_1.useState)(false);
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
type: 'loading',
});
const [projectInfo, setProjectInfo] = (0, react_1.useState)(null);
(0, react_1.useEffect)(() => {
const controller = new AbortController();
(0, actions_1.getProjectInfo)(controller.signal)
.then((info) => {
setProjectInfo(info.projectInfo);
})
.catch((err) => {
(0, NotificationCenter_1.showNotification)(`Could not get project info: ${err.message}. Unable to duplicate composition`, 3000);
});
return () => {
controller.abort();
};
}, []);
const trigger = (0, react_1.useCallback)(() => {
setSubmitting(true);
setSelectedModal(null);
const notification = (0, NotificationCenter_1.showNotification)(loadingNotification, null);
(0, actions_1.applyCodemod)({
codemod,
dryRun: false,
signal: new AbortController().signal,
})
.then(() => {
notification.replaceContent(successNotification, 2000);
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
})
.catch((err) => {
notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
});
}, [
codemod,
errorNotification,
loadingNotification,
onSuccess,
setSelectedModal,
successNotification,
]);
const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {
const res = await (0, actions_1.applyCodemod)({
codemod,
dryRun: true,
signal,
});
if (res.success) {
setCanApplyCodemod({ type: 'success', diff: res.diff });
}
else {
setCanApplyCodemod({
type: 'fail',
error: res.reason,
});
}
}, [codemod]);
(0, react_1.useEffect)(() => {
const abortController = new AbortController();
let aborted = false;
getCanApplyCodemod(abortController.signal)
.then(() => undefined)
.catch((err) => {
if (aborted) {
return;
}
(0, NotificationCenter_1.showNotification)(`Cannot duplicate composition: ${err.message}`, 3000);
});
return () => {
aborted = true;
abortController.abort();
};
}, [getCanApplyCodemod]);
const disabled = !valid ||
submitting ||
projectInfo === null ||
codemodStatus.type !== 'success';
const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
(0, react_1.useEffect)(() => {
if (disabled) {
return;
}
const enter = registerKeybinding({
callback() {
trigger();
},
commandCtrlKey: true,
key: 'Enter',
event: 'keydown',
preventDefault: true,
triggerIfInputFieldFocused: true,
keepRegisteredWhenNotHighestContext: false,
});
return () => {
enter.unregister();
};
}, [disabled, registerKeybinding, trigger, valid]);
return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [projectInfo && projectInfo.relativeRootFile
? submitLabel({ relativeRootPath: projectInfo.relativeRootFile })
: genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
] })
] }));
};
exports.CodemodFooter = CodemodFooter;