@remotion/studio
Version:
APIs for interacting with the Remotion Studio
81 lines (80 loc) • 3.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuCompositionName = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const client_id_1 = require("../helpers/client-id");
const colors_1 = require("../helpers/colors");
const open_in_editor_1 = require("../helpers/open-in-editor");
const NotificationCenter_1 = require("./Notifications/NotificationCenter");
const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
const baseStyle = {
color: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
textUnderlineOffset: 2,
};
const compositionNameStyle = {
...baseStyle,
cursor: 'default',
};
const clickableStyle = {
...baseStyle,
cursor: 'pointer',
};
const clickableHoveredStyle = {
...clickableStyle,
textDecoration: 'underline',
};
const slashStyle = {
color: colors_1.LIGHT_TEXT,
marginInline: 4,
position: 'relative',
top: 1,
};
const MenuCompositionName = () => {
var _a;
const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
.previewServerState.type;
const [opening, setOpening] = (0, react_1.useState)(false);
const [hovered, setHovered] = (0, react_1.useState)(false);
const composition = (0, react_1.useMemo)(() => {
var _a;
if (canvasContent === null || canvasContent.type !== 'composition') {
return null;
}
return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
}, [canvasContent, compositions]);
const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
const canOpen = resolvedLocation &&
window.remotion_editorName &&
connectionStatus === 'connected';
const handleClick = (0, react_1.useCallback)(async () => {
if (!canOpen || !resolvedLocation) {
return;
}
setOpening(true);
try {
await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
}
catch (err) {
(0, NotificationCenter_1.showNotification)(err.message, 2000);
}
finally {
setOpening(false);
}
}, [canOpen, resolvedLocation]);
if (!composition) {
return null;
}
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
? hovered
? clickableHoveredStyle
: clickableStyle
: compositionNameStyle, title: canOpen ? `Open in ${window.remotion_editorName}` : composition.id, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: composition.id })
] }));
};
exports.MenuCompositionName = MenuCompositionName;