@remotion/studio
Version:
APIs for interacting with the Remotion Studio
102 lines (101 loc) • 4.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuBuildIndicator = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const client_id_1 = require("../helpers/client-id");
const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
const open_in_editor_1 = require("../helpers/open-in-editor");
const layout_1 = require("./layout");
const MenuCompositionName_1 = require("./MenuCompositionName");
const NotificationCenter_1 = require("./Notifications/NotificationCenter");
const Spinner_1 = require("./Spinner");
const cwd = {
fontSize: 13,
opacity: 0.8,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
userSelect: 'none',
};
const spinnerSize = 14;
const spinner = {
position: 'relative',
width: spinnerSize,
marginTop: 4,
};
const noSpinner = {
position: 'relative',
width: spinnerSize,
};
const projectNameLinkBase = {
color: 'inherit',
textDecoration: 'none',
cursor: 'pointer',
fontSize: 'inherit',
textUnderlineOffset: 2,
};
const projectNameLink = {
...projectNameLinkBase,
};
const projectNameLinkHovered = {
...projectNameLinkBase,
textDecoration: 'underline',
};
const MenuBuildIndicator = () => {
const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
const [projectNameHovered, setProjectNameHovered] = (0, react_1.useState)(false);
const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
const showEditorLink = window.remotion_editorName && ctx.type === 'connected';
const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
const handleProjectNameClick = (0, react_1.useCallback)(async () => {
if (showEditorLink) {
await (0, open_in_editor_1.openInEditor)({
originalFileName: `${window.remotion_cwd}`,
originalLineNumber: 1,
originalColumnNumber: 1,
originalFunctionName: null,
originalScriptCode: null,
})
.then((res) => res.json())
.then(({ success }) => {
if (!success) {
(0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
}
})
.catch((err) => {
// eslint-disable-next-line no-console
console.error(err);
(0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
});
}
else if (showGitLink) {
window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
}
}, [showEditorLink, showGitLink]);
const projectNameTitle = (0, react_1.useMemo)(() => {
if (showEditorLink) {
return `Open in ${window.remotion_editorName}`;
}
if (showGitLink) {
return `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`;
}
return undefined;
}, [showEditorLink, showGitLink]);
const isClickable = showEditorLink || showGitLink;
(0, react_1.useEffect)(() => {
window.remotion_isBuilding = () => {
setIsBuilding(true);
};
window.remotion_finishedBuilding = () => {
setIsBuilding(false);
};
return () => {
window.remotion_isBuilding = undefined;
window.remotion_finishedBuilding = undefined;
};
}, []);
return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
] }));
};
exports.MenuBuildIndicator = MenuBuildIndicator;