@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/components/TimelineInOutToggle.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = 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 colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
+const in_out_1 = require("../state/in-out");
+const ControlButton_1 = require("./ControlButton");
+const getTooltipText = (pointType, key) => [
+    `Mark ${pointType}`,
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
+    '- right click to clear',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
+const style = {
+    width: 16,
+    height: 16,
+};
+exports.inOutHandles = (0, react_1.createRef)();
+exports.defaultInOutValue = { inFrame: null, outFrame: null };
+const TimelineInOutPointToggle = () => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const onInOutClear = (0, react_1.useCallback)((composition) => {
+        setInAndOutFrames((prev) => {
+            return {
+                ...prev,
+                [composition]: {
+                    inFrame: null,
+                    outFrame: null,
+                },
+            };
+        });
+    }, [setInAndOutFrames]);
+    const onInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((prev) => {
+                var _a;
+                return {
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
+                };
+            });
+            return null;
+        }
+        setInAndOutFrames((prev) => {
+            var _a, _b, _c, _d, _e;
+            const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
+            const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
+            const selected = Math.min(timelinePosition, biggestPossible);
+            if (selected === 0) {
+                return {
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
+                };
+            }
+            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            if (prevIn !== null && prevIn !== undefined) {
+                // Disable if already at this position
+                if (prevIn === selected) {
+                    return {
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            inFrame: null,
+                        },
+                    };
+                }
+            }
+            return {
+                ...prev,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    inFrame: selected,
+                },
+            };
+        });
+    }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const clearInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e.preventDefault();
+        setInAndOutFrames((f) => {
+            var _a;
+            return {
+                ...f,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    inFrame: null,
+                },
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const clearOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        setInAndOutFrames((f) => {
+            var _a;
+            return {
+                ...f,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    outFrame: null,
+                },
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const onOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                var _a;
+                return {
+                    ...f,
+                    [videoConfig.id]: {
+                        ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
+                };
+            });
+            return;
+        }
+        setInAndOutFrames((prev) => {
+            var _a, _b, _c, _d, _e;
+            const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
+            const smallestPossible = prevInFrame === null || prevInFrame === undefined
+                ? -Infinity
+                : prevInFrame + 1;
+            const selected = Math.max(timelinePosition, smallestPossible);
+            if (selected === videoConfig.durationInFrames - 1) {
+                return {
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
+                };
+            }
+            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            if (prevOut !== null && prevOut !== undefined) {
+                if (prevOut === selected) {
+                    return {
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            outFrame: null,
+                        },
+                    };
+                }
+            }
+            return {
+                ...prev,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    outFrame: selected,
+                },
+            };
+        });
+    }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
+    (0, react_1.useEffect)(() => {
+        if (!confId) {
+            return;
+        }
+        const iKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'i',
+            callback: (e) => {
+                onInMark(e);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const oKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'o',
+            callback: (e) => {
+                onOutMark(e);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const xKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'x',
+            callback: () => {
+                onInOutClear(confId);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            oKey.unregister();
+            iKey.unregister();
+            xKey.unregister();
+        };
+    }, [confId, keybindings, onInMark, onInOutClear, onOutMark]);
+    (0, react_1.useImperativeHandle)(exports.inOutHandles, () => {
+        return {
+            clearMarks: () => {
+                if (!confId) {
+                    return;
+                }
+                onInOutClear(confId);
+            },
+            inMarkClick: onInMark,
+            outMarkClick: onOutMark,
+        };
+    }, [confId, onInMark, onInOutClear, onOutMark]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: !videoConfig || timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
+};
+exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/TopPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
+export declare const TopPanel: React.FC;

package/dist/editor/components/TopPanel.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_breakpoint_1 = require("../helpers/use-breakpoint");
+const editor_rulers_1 = require("../state/editor-rulers");
+const sidebar_1 = require("../state/sidebar");
+const CanvasOrLoading_1 = require("./CanvasOrLoading");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
+const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const ExplorerPanel_1 = require("./ExplorerPanel");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
+const MenuToolbar_1 = require("./MenuToolbar");
+const OptionsPanel_1 = require("./OptionsPanel");
+const PreviewToolbar_1 = require("./PreviewToolbar");
+const SplitterContainer_1 = require("./Splitter/SplitterContainer");
+const SplitterElement_1 = require("./Splitter/SplitterElement");
+const SplitterHandle_1 = require("./Splitter/SplitterHandle");
+const container = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+};
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    minHeight: 0,
+};
+const useResponsiveSidebarStatus = () => {
+    const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
+    const actualStateLeft = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateLeft === 'collapsed') {
+            return 'collapsed';
+        }
+        if (sidebarCollapsedStateLeft === 'expanded') {
+            return 'expanded';
+        }
+        return responsiveLeftStatus;
+    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    return actualStateLeft;
+};
+exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
+const TopPanel = () => {
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
+    const actualStateRight = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateRight === 'collapsed') {
+            return 'collapsed';
+        }
+        return 'expanded';
+    }, [sidebarCollapsedStateRight]);
+    const canvasContainerStyle = (0, react_1.useMemo)(() => ({
+        flex: 1,
+        display: 'flex',
+        paddingTop: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
+        paddingLeft: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
+    }), [rulersAreVisible]);
+    const onCollapseLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: 'collapsed', right: null });
+    }, [setSidebarCollapsedState]);
+    const onCollapseRight = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: null, right: 'collapsed' });
+    }, [setSidebarCollapsedState]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainerStyle, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+};
+exports.TopPanel = TopPanel;

package/dist/editor/components/UpdateCheck.d.ts

@@ -0,0 +1,15 @@
+import type { PackageManager } from '../../preview-server/get-package-manager';
+export type UpdateInfo = {
+    currentVersion: string;
+    latestVersion: string;
+    updateAvailable: boolean;
+    timedOut: boolean;
+    packageManager: PackageManager | 'unknown';
+};
+export type Bug = {
+    title: string;
+    description: string;
+    link: string;
+    versions: string[];
+};
+export declare const UpdateCheck: () => JSX.Element | null;

package/dist/editor/components/UpdateCheck.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateCheck = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const modals_1 = require("../state/modals");
+const z_index_1 = require("../state/z-index");
+const actions_1 = require("./RenderQueue/actions");
+const buttonStyle = {
+    appearance: 'none',
+    color: colors_1.BLUE,
+    border: 'none',
+    fontWeight: 'bold',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    fontSize: 14,
+    display: 'inline-flex',
+    justifyContent: 'center',
+};
+const UpdateCheck = () => {
+    const [info, setInfo] = (0, react_1.useState)(null);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        return knownBugs && knownBugs.length > 0;
+    }, [knownBugs]);
+    const checkForUpdates = (0, react_1.useCallback)(() => {
+        const controller = new AbortController();
+        (0, actions_1.updateAvailable)(controller.signal)
+            .then((d) => {
+            setInfo(d);
+        })
+            .catch((err) => {
+            if (err.message.includes('aborted')) {
+                return;
+            }
+            // eslint-disable-next-line no-console
+            console.log('Could not check for updates', err);
+        });
+        return controller;
+    }, []);
+    const checkForBugs = (0, react_1.useCallback)(() => {
+        const controller = new AbortController();
+        fetch(`https://bugs.remotion.dev/api/${remotion_1.VERSION}`, {
+            signal: controller.signal,
+        })
+            .then(async (res) => {
+            const body = await res.json();
+            setKnownBugs(body.bugs);
+        })
+            .catch((err) => {
+            if (err.message.includes('aborted')) {
+                return;
+            }
+            // eslint-disable-next-line no-console
+            console.log('Could not check for bugs in this version', err);
+        });
+        return controller;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const abortUpdate = checkForUpdates();
+        const abortBugs = checkForBugs();
+        return () => {
+            abortUpdate.abort();
+            abortBugs.abort();
+        };
+    }, [checkForBugs, checkForUpdates]);
+    const openModal = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'update',
+            info: info,
+            knownBugs: knownBugs,
+        });
+    }, [info, knownBugs, setSelectedModal]);
+    const dynButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...buttonStyle,
+            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.LIGHT_TEXT,
+        };
+    }, [hasKnownBugs]);
+    if (!info) {
+        return null;
+    }
+    if (!info.updateAvailable) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+            }, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+};
+exports.UpdateCheck = UpdateCheck;

package/dist/editor/components/UpdateModal/OpenIssueButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const OpenIssueButton: React.FC<{
+    link: string;
+}>;

package/dist/editor/components/UpdateModal/OpenIssueButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenIssueButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const svgStyle = {
+    width: '11px',
+    height: '11px',
+};
+const buttonStyle = {
+    border: 'none',
+    width: '24px',
+    height: '24px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const OpenIssueButton = ({ link }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const buttonTooltip = `Open GitHub issue in new Tab`;
+    const handleClick = (0, react_1.useCallback)(() => {
+        window.open(link, '_blank');
+    }, [link]);
+    const svgFillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+};
+exports.OpenIssueButton = OpenIssueButton;

package/dist/editor/components/UpdateModal/UpdateModal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Bug, UpdateInfo } from '../UpdateCheck';
+export declare const UpdateModal: React.FC<{
+    info: UpdateInfo;
+    knownBugs: Bug[];
+}>;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const copy_text_1 = require("../../helpers/copy-text");
+const modals_1 = require("../../state/modals");
+const CopyButton_1 = require("../CopyButton");
+const KnownBugs_1 = require("../KnownBugs");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const container = {
+    padding: 20,
+    paddingTop: 0,
+};
+const text = {
+    fontSize: 14,
+};
+const title = {
+    paddingTop: 12,
+    paddingBottom: 8,
+    ...text,
+};
+const code = {
+    background: colors_1.SELECTED_BACKGROUND,
+    padding: '12px 10px',
+    fontSize: 14,
+    marginTop: 10,
+    marginBottom: 10,
+};
+const link = {
+    fontWeight: 'bold',
+    color: colors_1.BLUE,
+    textDecoration: 'none',
+    ...text,
+};
+const commands = {
+    npm: 'npx remotion upgrade',
+    yarn: 'yarn remotion upgrade',
+    pnpm: 'pnpm exec remotion upgrade',
+    bun: 'bun remotion upgrade',
+    unknown: 'npx remotion upgrade',
+};
+const UpdateModal = ({ info, knownBugs }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const hasKnownBugs = (0, react_1.useMemo)(() => {
+        return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
+    }, [knownBugs]);
+    const command = commands[info.packageManager];
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(command).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
+        });
+    }, [command]);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [hasKnownBugs ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), (0, jsx_runtime_1.jsx)(KnownBugs_1.KnownBugs, { bugs: knownBugs }), (0, jsx_runtime_1.jsx)("div", { style: { height: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: text, children: "To upgrade, run the following command:" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: title, children: "A new update for Remotion is available! Run the following command:" })), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: onClick, style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+};
+exports.UpdateModal = UpdateModal;

package/dist/editor/components/ZoomGesturesProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ZoomGesturesProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ZoomGesturesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomGesturesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const ZoomGesturesProvider = ({ children }) => {
+    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
+    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
+        setEditorZoomGesturesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorZoomGestures,
+            setEditorZoomGestures,
+        };
+    }, [editorZoomGestures, setEditorZoomGestures]);
+    return ((0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
+};
+exports.ZoomGesturesProvider = ZoomGesturesProvider;

package/dist/editor/components/ZoomPersistor.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+import type { CanvasContent } from 'remotion';
+export declare const getZoomForComposition: (composition: string) => number;
+export declare const deriveCanvasContentFromUrl: () => CanvasContent | null;
+export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomPersistor = exports.deriveCanvasContentFromUrl = exports.getZoomForComposition = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const makeKey = (composition) => {
+    return `remotion.zoom.${composition}`;
+};
+const persistCurrentZoom = (zoom) => {
+    const currentComposition = (0, exports.deriveCanvasContentFromUrl)();
+    if (!currentComposition || currentComposition.type !== 'composition') {
+        return;
+    }
+    localStorage.setItem(makeKey(currentComposition.compositionId), String(zoom));
+};
+const getZoomForComposition = (composition) => {
+    const zoom = localStorage.getItem(makeKey(composition));
+    return zoom ? Number(zoom) : 0;
+};
+exports.getZoomForComposition = getZoomForComposition;
+const deriveCanvasContentFromUrl = () => {
+    const substrings = window.location.pathname.split('/').filter(Boolean);
+    const lastPart = substrings[substrings.length - 1];
+    if (substrings[0] === 'assets') {
+        return {
+            type: 'asset',
+            asset: decodeURIComponent(window.location.pathname.substring('/assets/'.length)),
+        };
+    }
+    if (substrings[0] === 'outputs') {
+        return {
+            type: 'output',
+            path: decodeURIComponent(window.location.pathname.substring('/outputs/'.length)),
+        };
+    }
+    if (lastPart) {
+        return {
+            type: 'composition',
+            compositionId: lastPart,
+        };
+    }
+    return null;
+};
+exports.deriveCanvasContentFromUrl = deriveCanvasContentFromUrl;
+const ZoomPersistor = () => {
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const urlState = (0, exports.deriveCanvasContentFromUrl)();
+    const isActive = urlState &&
+        urlState.type === 'composition' &&
+        canvasContent &&
+        canvasContent.type === 'composition' &&
+        urlState.compositionId === canvasContent.compositionId;
+    (0, react_1.useEffect)(() => {
+        if (!isActive) {
+            return;
+        }
+        persistCurrentZoom(zoom);
+    }, [zoom, isActive, playing]);
+    return null;
+};
+exports.ZoomPersistor = ZoomPersistor;

package/dist/editor/components/get-zod-if-possible.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ZodType = Awaited<typeof import('zod')>['z'];
+export type ZodTypesType = Awaited<typeof import('@remotion/zod-types')>;
+export declare const getZodIfPossible: () => Promise<ZodType | null>;
+export declare const getZTypesIfPossible: () => Promise<ZodTypesType | null>;
+export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
+export declare const useZodTypesIfPossible: () => typeof import("@remotion/zod-types") | null;
+export declare const ZodProvider: React.FC<{
+    children: React.ReactNode;
+}>;