@remotion/cli 3.2.34 → 3.2.35

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/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;

package/dist/validate-ffmpeg-version.d.ts

@@ -0,0 +1,3 @@
+export declare const checkAndValidateFfmpegVersion: (options: {
+    ffmpegExecutable: string | null;
+}) => Promise<void>;

package/dist/validate-ffmpeg-version.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkAndValidateFfmpegVersion = void 0;
+const renderer_1 = require("@remotion/renderer");
+const log_1 = require("./log");
+const warn_about_ffmpeg_version_1 = require("./warn-about-ffmpeg-version");
+const checkAndValidateFfmpegVersion = async (options) => {
+    const ffmpegVersion = await renderer_1.RenderInternals.getFfmpegVersion({
+        ffmpegExecutable: options.ffmpegExecutable,
+    });
+    const buildConf = await renderer_1.RenderInternals.getFfmpegBuildInfo({
+        ffmpegExecutable: options.ffmpegExecutable,
+    });
+    log_1.Log.verbose('Your FFMPEG version:', ffmpegVersion ? ffmpegVersion.join('.') : 'Built from source');
+    (0, warn_about_ffmpeg_version_1.warnAboutFfmpegVersion)({ ffmpegVersion, buildConf });
+};
+exports.checkAndValidateFfmpegVersion = checkAndValidateFfmpegVersion;

package/dist/warn-about-ffmpeg-version.d.ts

@@ -0,0 +1,5 @@
+import type { FfmpegVersion } from '@remotion/renderer';
+export declare const warnAboutFfmpegVersion: ({ ffmpegVersion, buildConf, }: {
+    ffmpegVersion: FfmpegVersion;
+    buildConf: string | null;
+}) => null | undefined;

package/dist/warn-about-ffmpeg-version.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warnAboutFfmpegVersion = void 0;
+const log_1 = require("./log");
+const printMessage = (ffmpegVersion) => {
+    log_1.Log.warn('⚠️Old FFMPEG version detected: ' + ffmpegVersion.join('.'));
+    log_1.Log.warn('   For audio support, you need at least version 4.1.0.');
+    log_1.Log.warn('   Upgrade FFMPEG to get rid of this warning.');
+};
+const printBuildConfMessage = () => {
+    log_1.Log.error('⚠️  Unsupported FFMPEG version detected.');
+    log_1.Log.error("   Your version doesn't support the -buildconf flag");
+    log_1.Log.error('   Audio will not be supported and you may experience other issues.');
+    log_1.Log.error('   Upgrade FFMPEG to at least v4.1.0 to get rid of this warning.');
+};
+const warnAboutFfmpegVersion = ({ ffmpegVersion, buildConf, }) => {
+    if (buildConf === null) {
+        printBuildConfMessage();
+        return;
+    }
+    if (ffmpegVersion === null) {
+        return null;
+    }
+    const [major, minor] = ffmpegVersion;
+    // 3.x and below definitely is too old
+    if (major < 4) {
+        printMessage(ffmpegVersion);
+        return;
+    }
+    // 5.x will be all good
+    if (major > 4) {
+        return;
+    }
+    if (minor < 1) {
+        printMessage(ffmpegVersion);
+    }
+};
+exports.warnAboutFfmpegVersion = warnAboutFfmpegVersion;