init commit

remotion/node_modules/@remotion/studio/dist/components/OptionsPanel.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const mobile_layout_1 = require("../helpers/mobile-layout");
+const VisualControls_1 = require("../visual-controls/VisualControls");
+const GlobalPropsEditorUpdateButton_1 = require("./GlobalPropsEditorUpdateButton");
+const DataEditor_1 = require("./RenderModal/DataEditor");
+const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const VisualControlsContent_1 = require("./VisualControls/VisualControlsContent");
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = (readOnlyStudio) => {
+    if (readOnlyStudio) {
+        return 'input-props';
+    }
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders') {
+        return 'renders';
+    }
+    if (panel === 'visual-controls') {
+        return 'visual-controls';
+    }
+    return 'input-props';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedOptionsSidebarPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
+exports.optionsSidebarTabs = (0, react_1.createRef)();
+const OptionsPanel = ({ readOnlyStudio }) => {
+    const { props, updateProps, resetUnsaved } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const visualControlsTabActivated = (0, react_1.useContext)(VisualControls_1.VisualControlsTabActivatedContext);
+    const container = (0, react_1.useMemo)(() => ({
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        position: isMobileLayout ? 'relative' : 'absolute',
+        flexDirection: 'column',
+        flex: 1,
+    }), [isMobileLayout]);
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(readOnlyStudio));
+    const onPropsSelected = (0, react_1.useCallback)(() => {
+        setPanel('input-props');
+        (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        (0, exports.persistSelectedOptionsSidebarPanel)('renders');
+    }, []);
+    const onVisualControlsSelected = (0, react_1.useCallback)(() => {
+        setPanel('visual-controls');
+        (0, exports.persistSelectedOptionsSidebarPanel)('visual-controls');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                (0, exports.persistSelectedOptionsSidebarPanel)('renders');
+            },
+        };
+    }, []);
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const composition = (0, react_1.useMemo)(() => {
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return null;
+        }
+        for (const comp of compositions) {
+            if (comp.id === canvasContent.compositionId) {
+                return comp;
+            }
+        }
+        return null;
+    }, [canvasContent, compositions]);
+    const setDefaultProps = (0, react_1.useCallback)((newProps) => {
+        if (composition === null) {
+            return;
+        }
+        window.remotion_ignoreFastRefreshUpdate = null;
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition, updateProps]);
+    const currentDefaultProps = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (composition === null) {
+            return {};
+        }
+        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
+    }, [composition, props]);
+    const unsavedChangesExist = (0, react_1.useMemo)(() => {
+        if (composition === null || composition.defaultProps === undefined) {
+            return false;
+        }
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, currentDefaultProps);
+    }, [currentDefaultProps, composition]);
+    const reset = (0, react_1.useCallback)((e) => {
+        if (e.detail.resetUnsaved) {
+            resetUnsaved(e.detail.resetUnsaved);
+        }
+    }, [resetUnsaved]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, reset);
+        return () => {
+            window.removeEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, reset);
+        };
+    }, [reset]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [visualControlsTabActivated ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'visual-controls', onClick: onVisualControlsSelected, children: "Controls" })) : null, composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)(GlobalPropsEditorUpdateButton_1.GlobalPropsEditorUpdateButton, { compositionId: composition.id, currentDefaultProps: currentDefaultProps })) : null] })) : null, readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' }))] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving, readOnlyStudio: readOnlyStudio }, composition.id)) : panel === 'visual-controls' && visualControlsTabActivated ? ((0, jsx_runtime_1.jsx)(VisualControlsContent_1.VisualControlsContent, {})) : readOnlyStudio ? null : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
+};
+exports.OptionsPanel = OptionsPanel;