@remotion/studio
Version:
APIs for interacting with the Remotion Studio
62 lines (61 loc) • 2.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExplorerPanel = exports.explorerSidebarTabs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../helpers/colors");
const AssetSelector_1 = require("./AssetSelector");
const CompositionSelector_1 = require("./CompositionSelector");
const CompSelectorRef_1 = require("./CompSelectorRef");
const Tabs_1 = require("./Tabs");
const container = {
height: '100%',
width: '100%',
maxWidth: '100%',
display: 'flex',
flexDirection: 'column',
flex: 1,
};
const localStorageKey = 'remotion.sidebarPanel';
const getSelectedPanel = () => {
const panel = localStorage.getItem(localStorageKey);
if (panel === 'assets') {
return 'assets';
}
return 'compositions';
};
const tabsContainer = {
backgroundColor: colors_1.BACKGROUND,
};
const persistSelectedOptionsSidebarPanel = (panel) => {
localStorage.setItem(localStorageKey, panel);
};
exports.explorerSidebarTabs = (0, react_1.createRef)();
const ExplorerPanel = ({ readOnlyStudio }) => {
const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
const onCompositionsSelected = (0, react_1.useCallback)(() => {
setPanel('compositions');
persistSelectedOptionsSidebarPanel('compositions');
}, []);
const onAssetsSelected = (0, react_1.useCallback)(() => {
setPanel('assets');
persistSelectedOptionsSidebarPanel('assets');
}, []);
(0, react_1.useImperativeHandle)(exports.explorerSidebarTabs, () => {
return {
selectAssetsPanel: () => {
setPanel('assets');
persistSelectedOptionsSidebarPanel('assets');
},
selectCompositionPanel: () => {
setPanel('compositions');
persistSelectedOptionsSidebarPanel('compositions');
},
};
}, []);
return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })
] }) }), panel === 'compositions' ? (jsx_runtime_1.jsx(CompositionSelector_1.CompositionSelector, {})) : (jsx_runtime_1.jsx(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));
};
exports.ExplorerPanel = ExplorerPanel;