@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha11

package/dist/editor/helpers/use-menu-structure.js

@@ -0,0 +1,705 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSearchResults = exports.useMenuStructure = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const truthy_1 = require("../../truthy");
+const layout_1 = require("../components/layout");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const SizeSelector_1 = require("../components/SizeSelector");
+const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
+const Checkmark_1 = require("../icons/Checkmark");
+const checkerboard_1 = require("../state/checkerboard");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const modals_1 = require("../state/modals");
+const preview_size_1 = require("../state/preview-size");
+const sidebar_1 = require("../state/sidebar");
+const timeline_ref_1 = require("../state/timeline-ref");
+const client_id_1 = require("./client-id");
+const open_in_editor_1 = require("./open-in-editor");
+const pick_color_1 = require("./pick-color");
+const use_keybinding_1 = require("./use-keybinding");
+const openExternal = (link) => {
+    window.open(link, '_blank');
+};
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const ICON_SIZE = 16;
+const useMenuStructure = (closeMenu) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
+    const structure = (0, react_1.useMemo)(() => {
+        const struct = [
+            {
+                id: 'remotion',
+                label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
+                leaveLeftPadding: false,
+                items: [
+                    {
+                        id: 'about',
+                        value: 'about',
+                        label: 'About Remotion',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://remotion.dev');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Help: About Remotion',
+                    },
+                    {
+                        id: 'changelog',
+                        value: 'changelog',
+                        label: 'Changelog',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://github.com/remotion-dev/remotion/releases');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Help: Changelog',
+                    },
+                    {
+                        id: 'license',
+                        value: 'license',
+                        label: 'License',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://github.com/remotion-dev/remotion/blob/main/LICENSE.md');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Help: License',
+                    },
+                ],
+                quickSwitcherLabel: null,
+            },
+            {
+                id: 'file',
+                label: 'File',
+                leaveLeftPadding: false,
+                items: [
+                    {
+                        id: 'new-sequence',
+                        value: 'new-sequence',
+                        label: 'New composition...',
+                        onClick: () => {
+                            closeMenu();
+                            setSelectedModal({
+                                compType: 'composition',
+                                type: 'new-comp',
+                            });
+                        },
+                        type: 'item',
+                        keyHint: 'N',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'New composition...',
+                    },
+                    {
+                        id: 'new-still',
+                        value: 'new-still',
+                        label: 'New still...',
+                        onClick: () => {
+                            closeMenu();
+                            setSelectedModal({
+                                compType: 'still',
+                                type: 'new-comp',
+                            });
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'New still...',
+                    },
+                    {
+                        type: 'divider',
+                        id: 'new-divider',
+                    },
+                    {
+                        id: 'render',
+                        value: 'render',
+                        label: 'Render...',
+                        onClick: () => {
+                            closeMenu();
+                            if (type !== 'connected') {
+                                (0, NotificationCenter_1.sendErrorNotification)('Restart the studio to render');
+                                return;
+                            }
+                            const renderButton = document.getElementById('render-modal-button');
+                            renderButton.click();
+                        },
+                        type: 'item',
+                        keyHint: 'R',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Render...',
+                    },
+                    window.remotion_editorName
+                        ? {
+                            type: 'divider',
+                            id: 'open-in-editor-divider',
+                        }
+                        : null,
+                    window.remotion_editorName
+                        ? {
+                            id: 'open-in-editor',
+                            value: 'open-in-editor',
+                            label: `Open in ${window.remotion_editorName}`,
+                            onClick: async () => {
+                                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.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                                    }
+                                })
+                                    .catch((err) => {
+                                    console.error(err);
+                                    (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                                });
+                            },
+                            type: 'item',
+                            keyHint: null,
+                            leftItem: null,
+                            subMenu: null,
+                            quickSwitcherLabel: 'Open in editor...',
+                        }
+                        : null,
+                ].filter(truthy_1.truthy),
+                quickSwitcherLabel: null,
+            },
+            {
+                id: 'view',
+                label: 'View',
+                leaveLeftPadding: true,
+                items: [
+                    {
+                        id: 'preview-size',
+                        keyHint: null,
+                        label: 'Preview size',
+                        onClick: () => undefined,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: sizes.findIndex((s) => String(size.size) === String(s.size)),
+                            items: sizes.map((newSize) => ({
+                                id: String(newSize.size),
+                                keyHint: newSize.size === 1 ? '0' : null,
+                                label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
+                                leftItem: String(newSize.size) === String(size.size) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                onClick: () => {
+                                    closeMenu();
+                                    setSize(() => newSize);
+                                },
+                                subMenu: null,
+                                type: 'item',
+                                value: newSize.size,
+                                quickSwitcherLabel: null,
+                            })),
+                            quickSwitcherLabel: null,
+                        },
+                        quickSwitcherLabel: null,
+                    },
+                    {
+                        id: 'editor-zoom-gestures',
+                        keyHint: null,
+                        label: 'Zoom and Pan Gestures',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorZoomGestures((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'editor-zoom-gestures',
+                        leftItem: editorZoomGestures ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorZoomGestures
+                            ? 'Disable Zoom and Pan Gestures'
+                            : 'Enable Zoom and Pan Gestures',
+                    },
+                    {
+                        id: 'timeline-divider-1',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'left-sidebar',
+                        label: 'Left Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        quickSwitcherLabel: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
+                                {
+                                    id: 'left-sidebar-responsive',
+                                    keyHint: null,
+                                    label: 'Responsive',
+                                    leftItem: sidebarCollapsedStateLeft === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({
+                                            left: 'responsive',
+                                            right: null,
+                                        });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'responsive',
+                                    quickSwitcherLabel: null,
+                                },
+                                {
+                                    id: 'left-sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({ left: 'expanded', right: null });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                    quickSwitcherLabel: 'Expand',
+                                },
+                                {
+                                    id: 'left-sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedStateLeft === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({ left: 'collapsed', right: null });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'collapsed',
+                                    quickSwitcherLabel: 'Collapse',
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'right-sidebar',
+                        label: 'Right Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        quickSwitcherLabel: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
+                                {
+                                    id: 'sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({ left: null, right: 'expanded' });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                    quickSwitcherLabel: 'Expand',
+                                },
+                                {
+                                    id: 'right-sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedStateRight === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({ left: null, right: 'collapsed' });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'collapsed',
+                                    quickSwitcherLabel: 'Collapse',
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'timeline-divider-2',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'checkerboard',
+                        keyHint: 'T',
+                        label: 'Transparency as checkerboard',
+                        onClick: () => {
+                            closeMenu();
+                            setCheckerboard((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'checkerboard',
+                        leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: checkerboard
+                            ? 'Disable Checkerboard Transparency'
+                            : 'Enable Checkerboard Transparency',
+                    },
+                    {
+                        id: 'timeline-divider-3',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'expand-all',
+                        keyHint: null,
+                        label: 'Expand all',
+                        onClick: () => {
+                            var _a;
+                            closeMenu();
+                            (_a = timeline_ref_1.timelineRef.current) === null || _a === void 0 ? void 0 : _a.expandAll();
+                        },
+                        type: 'item',
+                        value: 'expand-all',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Timeline: Expand all Timeline layers',
+                    },
+                    {
+                        id: 'collapse-all',
+                        keyHint: null,
+                        label: 'Collapse all',
+                        onClick: () => {
+                            var _a;
+                            closeMenu();
+                            (_a = timeline_ref_1.timelineRef.current) === null || _a === void 0 ? void 0 : _a.collapseAll();
+                        },
+                        type: 'item',
+                        value: 'collapse-all',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Timeline: Collapse all layers',
+                    },
+                    {
+                        id: 'in-out-divider-4',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'quick-switcher',
+                        keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+K`,
+                        label: 'Quick Switcher',
+                        onClick: () => {
+                            closeMenu();
+                            setSelectedModal({
+                                type: 'quick-switcher',
+                                mode: 'compositions',
+                                invocationTimestamp: Date.now(),
+                            });
+                        },
+                        type: 'item',
+                        value: 'quick-switcher',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Switch composition',
+                    },
+                    {
+                        id: 'in-out-divider-5',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'in-mark',
+                        keyHint: 'I',
+                        label: 'In Mark',
+                        leftItem: null,
+                        onClick: () => {
+                            var _a;
+                            closeMenu();
+                            (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.inMarkClick(null);
+                        },
+                        subMenu: null,
+                        type: 'item',
+                        value: 'in-mark',
+                        quickSwitcherLabel: 'Timeline: Set In Mark',
+                    },
+                    {
+                        id: 'out-mark',
+                        keyHint: 'O',
+                        label: 'Out Mark',
+                        leftItem: null,
+                        onClick: () => {
+                            var _a;
+                            closeMenu();
+                            (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.outMarkClick(null);
+                        },
+                        subMenu: null,
+                        type: 'item',
+                        value: 'out-mark',
+                        quickSwitcherLabel: 'Timeline: Set Out Mark',
+                    },
+                    {
+                        id: 'x-mark',
+                        keyHint: 'X',
+                        label: 'Clear In/Out Marks',
+                        leftItem: null,
+                        onClick: () => {
+                            var _a;
+                            closeMenu();
+                            (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.clearMarks();
+                        },
+                        subMenu: null,
+                        type: 'item',
+                        value: 'clear-marks',
+                        quickSwitcherLabel: 'Timeline: Clear In and Out Mark',
+                    },
+                ],
+            },
+            'EyeDropper' in window
+                ? {
+                    id: 'tools',
+                    label: 'Tools',
+                    leaveLeftPadding: false,
+                    items: [
+                        {
+                            id: 'color-picker',
+                            value: 'color-picker',
+                            label: 'Color Picker',
+                            onClick: () => {
+                                closeMenu();
+                                (0, pick_color_1.pickColor)();
+                            },
+                            leftItem: null,
+                            keyHint: null,
+                            subMenu: null,
+                            type: 'item',
+                            quickSwitcherLabel: 'Show Color Picker',
+                        },
+                    ],
+                    quickSwitcherLabel: null,
+                }
+                : null,
+            {
+                id: 'help',
+                label: 'Help',
+                leaveLeftPadding: false,
+                items: [
+                    {
+                        id: 'shortcuts',
+                        value: 'shortcuts',
+                        label: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                            ? 'Shortcuts (disabled)'
+                            : 'Shortcuts',
+                        onClick: () => {
+                            closeMenu();
+                            setSelectedModal({
+                                type: 'quick-switcher',
+                                mode: 'docs',
+                                invocationTimestamp: Date.now(),
+                            });
+                        },
+                        keyHint: '?',
+                        leftItem: null,
+                        subMenu: null,
+                        type: 'item',
+                        quickSwitcherLabel: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                            ? 'Show all Keyboard Shortcuts (disabled)'
+                            : 'Show all Keyboard Shortcuts',
+                    },
+                    {
+                        id: 'docs',
+                        value: 'docs',
+                        label: 'Docs',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://remotion.dev/docs');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Visit Documentation',
+                    },
+                    {
+                        id: 'file-issue',
+                        value: 'file-issue',
+                        label: 'File an issue',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://github.com/remotion-dev/remotion/issues/new/choose');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'File GitHub issue',
+                    },
+                    {
+                        id: 'discord',
+                        value: 'discord',
+                        label: 'Join Discord community',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://discord.com/invite/6VzzNDwUwV');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: null,
+                    },
+                    {
+                        id: 'help-divider-6',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'insta',
+                        value: 'insta',
+                        label: 'Instagram',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://instagram.com/remotion');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Follow Remotion on Instagram',
+                    },
+                    {
+                        id: 'twitter',
+                        value: 'twitter',
+                        label: 'Twitter',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://twitter.com/remotion');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Follow Remotion on Twitter',
+                    },
+                    {
+                        id: 'linkedin',
+                        value: 'linkedin',
+                        label: 'LinkedIn',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://www.linkedin.com/company/remotion-dev/');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Follow Remotion on LinkedIn',
+                    },
+                    {
+                        id: 'tiktok',
+                        value: 'tiktok',
+                        label: 'TikTok',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://www.tiktok.com/@remotion');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Follow Remotion on TikTok',
+                    },
+                ],
+            },
+        ].filter(remotion_1.Internals.truthy);
+        return struct;
+    }, [
+        sizes,
+        editorZoomGestures,
+        sidebarCollapsedStateLeft,
+        sidebarCollapsedStateRight,
+        checkerboard,
+        closeMenu,
+        setSelectedModal,
+        type,
+        size.size,
+        setSize,
+        setEditorZoomGestures,
+        setSidebarCollapsedState,
+        setCheckerboard,
+    ]);
+    return structure;
+};
+exports.useMenuStructure = useMenuStructure;
+const getItemLabel = (item) => {
+    var _a;
+    if (item.quickSwitcherLabel !== null) {
+        return item.quickSwitcherLabel;
+    }
+    if (typeof item.label === 'string') {
+        return item.label;
+    }
+    return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toString();
+};
+const itemToSearchResult = (item, setSelectedModal, prefixes) => {
+    if (item.subMenu) {
+        return item.subMenu.items
+            .map((subItem) => {
+            if (subItem.type === 'divider') {
+                return null;
+            }
+            return itemToSearchResult(subItem, setSelectedModal, [
+                ...prefixes,
+                getItemLabel(item),
+            ]);
+        })
+            .flat(1)
+            .filter(truthy_1.truthy);
+    }
+    return [
+        {
+            type: 'menu-item',
+            id: item.id,
+            onSelected: () => {
+                setSelectedModal(null);
+                item.onClick(item.id);
+            },
+            title: [...prefixes, getItemLabel(item)].join(': '),
+        },
+    ];
+};
+const makeSearchResults = (actions, setSelectedModal) => {
+    const items = actions
+        .map((menu) => {
+        return menu.items.map((item) => {
+            if (item.type === 'divider') {
+                return null;
+            }
+            return itemToSearchResult(item, setSelectedModal, []);
+        });
+    })
+        .flat(Infinity)
+        .filter(truthy_1.truthy);
+    return items;
+};
+exports.makeSearchResults = makeSearchResults;