@remotion/cli 3.2.35-crf.3 → 3.2.36

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

@@ -0,0 +1,547 @@
+"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 truthy_1 = require("../../truthy");
+const layout_1 = require("../components/layout");
+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 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...',
+                    },
+                ],
+                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',
+                        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: null,
+                                },
+                                {
+                                    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: null,
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'timeline-divider',
+                        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',
+                        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',
+                        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: () => (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: 'shortcuts',
+                            });
+                        },
+                        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',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'insta',
+                        value: 'insta',
+                        label: 'Instagram',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://instagram.com/remotion.dev');
+                        },
+                        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_dev');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Follow Remotion on Twitter',
+                    },
+                    {
+                        id: 'tiktok',
+                        value: 'tiktok',
+                        label: 'TikTok',
+                        onClick: () => {
+                            closeMenu();
+                            openExternal('https://www.tiktok.com/@remotion.dev');
+                        },
+                        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/use-menu-toolbar.js

@@ -0,0 +1 @@
+"use strict";

package/dist/editor/state/modals.d.ts

@@ -7,6 +7,8 @@ export declare type ModalState = {
 } | {
     type: 'update';
     info: UpdateInfo;
+} | {
+    type: 'quick-switcher';
 } | {
     type: 'shortcuts';
 };

package/dist/get-composition-id.d.ts

@@ -1 +1,6 @@
-export declare const getCompositionId: () => string;
+import type { TCompMetadata } from 'remotion';
+export declare const getCompositionId: (validCompositions: TCompMetadata[]) => Promise<{
+    compositionId: string;
+    reason: string;
+    config: TCompMetadata;
+}>;

package/dist/get-composition-id.js

@@ -3,12 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionId = void 0;
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
-const getCompositionId = () => {
-    if (!parse_command_line_1.parsedCli._[2]) {
-        log_1.Log.error('Composition ID not passed.');
-        log_1.Log.error('Pass an extra argument <composition-id>.');
-        process.exit(1);
+const select_composition_1 = require("./select-composition");
+const getCompositionId = async (validCompositions) => {
+    if (parse_command_line_1.parsedCli._[2]) {
+        const config = validCompositions.find((c) => c.id === parse_command_line_1.parsedCli._[2]);
+        if (!config) {
+            throw new Error(`Cannot find composition with ID "${parse_command_line_1.parsedCli._[2]}". Available composition: ${validCompositions
+                .map((c) => c.id)
+                .join(', ')}`);
+        }
+        return {
+            compositionId: parse_command_line_1.parsedCli._[2],
+            reason: 'Passed as argument',
+            config,
+        };
     }
-    return parse_command_line_1.parsedCli._[2];
+    if (!process.env.CI) {
+        const { compositionId, reason } = await (0, select_composition_1.selectComposition)(validCompositions);
+        if (compositionId && typeof compositionId === 'string') {
+            return {
+                compositionId,
+                reason,
+                config: validCompositions.find((c) => c.id === compositionId),
+            };
+        }
+    }
+    log_1.Log.error('Composition ID not passed.');
+    log_1.Log.error('Pass an extra argument <composition-id>.');
+    process.exit(1);
 };
 exports.getCompositionId = getCompositionId;

package/dist/index.d.ts

@@ -135,4 +135,8 @@ export declare const CliInternals: {
         source: string;
     };
     minimist: typeof minimist;
+    selectComposition: (validCompositions: import("remotion").TCompMetadata[]) => Promise<{
+        compositionId: string;
+        reason: string;
+    }>;
 };

package/dist/index.js

@@ -41,6 +41,7 @@ const preview_1 = require("./preview");
 const print_help_1 = require("./print-help");
 const progress_bar_1 = require("./progress-bar");
 const render_1 = require("./render");
+const select_composition_1 = require("./select-composition");
 const still_1 = require("./still");
 const upgrade_1 = require("./upgrade");
 const versions_1 = require("./versions");
@@ -129,4 +130,5 @@ exports.CliInternals = {
     getFinalCodec: get_cli_options_1.getFinalCodec,
     determineFinalImageFormat: determine_image_format_1.determineFinalImageFormat,
     minimist: minimist_1.default,
+    selectComposition: select_composition_1.selectComposition,
 };

package/dist/preview-server/start-server.js

@@ -68,12 +68,16 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         })
             .catch((err) => {
-            response.setHeader('content-type', 'application/json');
-            response.writeHead(500);
             log_1.Log.error(`Error while calling ${request.url}`, err);
-            response.end(JSON.stringify({
-                err: err.message,
-            }));
+            if (!response.headersSent) {
+                response.setHeader('content-type', 'application/json');
+                response.writeHead(500);
+            }
+            if (!response.writableEnded) {
+                response.end(JSON.stringify({
+                    err: err.message,
+                }));
+            }
         });
     });
     const desiredPort = (_d = options === null || options === void 0 ? void 0 : options.port) !== null && _d !== void 0 ? _d : undefined;