@remotion/cli 4.0.0-lambda.3 → 4.0.0-newpaths.13

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

@@ -0,0 +1,634 @@
+"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 modals_1 = require("../state/modals");
+const preview_size_1 = require("../state/preview-size");
+const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
+const timeline_ref_1 = require("../state/timeline-ref");
+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 { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
+    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (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...',
+                    },
+                    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 }) => {
+                                    var _a;
+                                    if (!success) {
+                                        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                                            content: `Could not open ${window.remotion_editorName}`,
+                                            duration: 2000,
+                                            created: Date.now(),
+                                            id: String(Math.random()),
+                                        });
+                                    }
+                                })
+                                    .catch((err) => {
+                                    var _a;
+                                    console.error(err);
+                                    (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                                        content: `Could not open ${window.remotion_editorName}`,
+                                        duration: 2000,
+                                        created: Date.now(),
+                                        id: String(Math.random()),
+                                    });
+                                });
+                            },
+                            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: 'timeline-divider-1',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'left-sidebar',
+                        label: 'Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        quickSwitcherLabel: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
+                                {
+                                    id: 'sidebar-responsive',
+                                    keyHint: null,
+                                    label: 'Responsive',
+                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('responsive');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'responsive',
+                                    quickSwitcherLabel: null,
+                                },
+                                {
+                                    id: 'sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('expanded');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                    quickSwitcherLabel: 'Expand',
+                                },
+                                {
+                                    id: 'sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('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: 'rich-timeline',
+                        keyHint: null,
+                        label: 'Rich timeline',
+                        onClick: () => {
+                            closeMenu();
+                            setRichTimeline((r) => !r);
+                        },
+                        type: 'item',
+                        value: 'rich-timeline',
+                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: richTimeline
+                            ? 'Timeline: Disable Rich Timeline'
+                            : 'Timeline: Enable Rich Timeline',
+                    },
+                    {
+                        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;
+    }, [
+        checkerboard,
+        closeMenu,
+        richTimeline,
+        setCheckerboard,
+        setRichTimeline,
+        setSelectedModal,
+        setSidebarCollapsedState,
+        setSize,
+        sidebarCollapsedState,
+        size.size,
+        sizes,
+    ]);
+    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;

package/dist/editor/helpers/validate-new-comp-data.d.ts

@@ -1,4 +1,4 @@
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const validateCompositionName: (compName: string, compositions: TComposition<unknown>[]) => string | null;
 export declare const validateCompositionDimension: (dimension: 'Width' | 'Height', value: string) => string | null;
 export declare const validateCompositionDuration: (value: string) => string | null;

package/dist/editor/icons/RenderStillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const RenderStill: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/RenderStillIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderStill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RenderStill = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" }) }));
+};
+exports.RenderStill = RenderStill;

package/dist/editor/icons/film.d.ts

@@ -1,2 +1,3 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement>>;