@remotion/studio
Version:
APIs for interacting with the Remotion Studio
117 lines (116 loc) • 4.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UndoRedoButtons = 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 client_id_1 = require("../helpers/client-id");
const use_keybinding_1 = require("../helpers/use-keybinding");
const redo_1 = require("../icons/redo");
const undo_1 = require("../icons/undo");
const call_api_1 = require("./call-api");
const InlineAction_1 = require("./InlineAction");
const iconStyle = {
width: 16,
height: 16,
};
const UndoRedoButtons = () => {
const [undoFile, setUndoFile] = (0, react_1.useState)(null);
const [redoFile, setRedoFile] = (0, react_1.useState)(null);
const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
const keybindings = (0, use_keybinding_1.useKeybinding)();
const undoInFlight = (0, react_1.useRef)(false);
const redoInFlight = (0, react_1.useRef)(false);
(0, react_1.useEffect)(() => {
const unsub = subscribeToEvent('undo-redo-stack-changed', (event) => {
if (event.type !== 'undo-redo-stack-changed') {
return;
}
setUndoFile(event.undoFile);
setRedoFile(event.redoFile);
});
return () => unsub();
}, [subscribeToEvent]);
const onUndo = (0, react_1.useCallback)(() => {
if (undoInFlight.current) {
return;
}
undoInFlight.current = true;
(0, call_api_1.callApi)('/api/undo', {})
.catch(() => {
// Ignore errors
})
.finally(() => {
undoInFlight.current = false;
});
}, []);
const onRedo = (0, react_1.useCallback)(() => {
if (redoInFlight.current) {
return;
}
redoInFlight.current = true;
(0, call_api_1.callApi)('/api/redo', {})
.catch(() => {
// Ignore errors
})
.finally(() => {
redoInFlight.current = false;
});
}, []);
(0, react_1.useEffect)(() => {
const undo = keybindings.registerKeybinding({
event: 'keydown',
key: 'z',
commandCtrlKey: true,
callback: (e) => {
if (e.shiftKey) {
return;
}
if (undoFile) {
onUndo();
}
},
preventDefault: true,
triggerIfInputFieldFocused: false,
keepRegisteredWhenNotHighestContext: false,
});
const redo = keybindings.registerKeybinding({
event: 'keydown',
key: 'y',
commandCtrlKey: true,
callback: () => {
if (redoFile) {
onRedo();
}
},
preventDefault: true,
triggerIfInputFieldFocused: false,
keepRegisteredWhenNotHighestContext: false,
});
return () => {
undo.unregister();
redo.unregister();
};
}, [keybindings, onRedo, onUndo, redoFile, undoFile]);
const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
? 'Undo'
: `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
? 'Redo'
: `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
const renderUndo = (0, react_1.useCallback)((color) => {
return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
}, [undoFile]);
const renderRedo = (0, react_1.useCallback)((color) => {
return (jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color, opacity: redoFile ? 1 : 0.5 } }));
}, [redoFile]);
const canUndo = undoFile !== null;
const canRedo = redoFile !== null;
if (!canUndo && !canRedo) {
return null;
}
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
] }));
};
exports.UndoRedoButtons = UndoRedoButtons;