@remotion/cli 4.0.0-oops.3 → 4.0.0-prefetch.7

package/dist/editor/components/Timeline/timeline-scroll-logic.js

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineSlider_1 = require("./TimelineSlider");
+const canScrollTimelineIntoDirection = () => {
+    const current = timeline_refs_1.scrollableRef.current;
+    const { scrollWidth, scrollLeft, clientWidth } = current;
+    const canScrollRight = scrollWidth - scrollLeft - clientWidth > timeline_layout_1.TIMELINE_PADDING;
+    const canScrollLeft = scrollLeft > timeline_layout_1.TIMELINE_PADDING;
+    return { canScrollRight, canScrollLeft };
+};
+exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
+const SCROLL_INCREMENT = 200;
+const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
+    var _a;
+    return ((0, exports.getFrameFromX)({
+        clientX: scrollLeft,
+        durationInFrames,
+        width,
+        extrapolate: 'clamp',
+    }) +
+        Math.ceil((((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - timeline_layout_1.TIMELINE_PADDING) /
+            (0, exports.getFrameIncrement)(durationInFrames)));
+};
+const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
+    var _a, _b;
+    const nextFrame = (0, exports.getFrameFromX)({
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
+        durationInFrames,
+        width,
+        extrapolate: 'clamp',
+    });
+    const currentFrame = (0, exports.getFrameFromX)({
+        clientX: (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft,
+        durationInFrames,
+        width,
+        extrapolate: 'clamp',
+    });
+    // Should go back at least 1 frame, but not less than 0
+    return Math.max(0, Math.min(currentFrame - 1, nextFrame));
+};
+exports.getFrameWhileScrollingLeft = getFrameWhileScrollingLeft;
+const isCursorInViewport = ({ frame, durationInFrames, }) => {
+    var _a, _b, _c, _d;
+    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const scrollLeft = (_d = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+    const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
+        nextFrame: frame,
+        durationInFrames,
+    });
+    const scrollPosOnLeftEdge = (0, exports.getScrollPositionForCursorOnLeftEdge)({
+        nextFrame: frame,
+        durationInFrames,
+    });
+    const currentFrameRight = calculateFrameWhileScrollingRight({
+        durationInFrames,
+        scrollLeft,
+        width,
+    });
+    return !(scrollPosOnRightEdge >=
+        (0, exports.getScrollPositionForCursorOnRightEdge)({
+            nextFrame: currentFrameRight,
+            durationInFrames,
+        }) || scrollPosOnLeftEdge < scrollLeft);
+};
+exports.isCursorInViewport = isCursorInViewport;
+const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
+    var _a, _b, _c, _d, _e;
+    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
+    const width = (_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+    const scrollLeft = (_e = (_d = timeline_refs_1.scrollableRef.current) === null || _d === void 0 ? void 0 : _d.scrollLeft) !== null && _e !== void 0 ? _e : 0;
+    if (direction === 'fit-left') {
+        const currentFrameLeft = (0, exports.getFrameFromX)({
+            clientX: scrollLeft,
+            durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
+        const scrollPos = (0, exports.getScrollPositionForCursorOnLeftEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        const needsToScrollLeft = scrollPos <=
+            (0, exports.getScrollPositionForCursorOnLeftEdge)({
+                nextFrame: currentFrameLeft,
+                durationInFrames,
+            });
+        if (needsToScrollLeft) {
+            (0, exports.scrollToTimelineXOffset)(scrollPos);
+        }
+    }
+    if (direction === 'fit-right') {
+        const currentFrameRight = calculateFrameWhileScrollingRight({
+            durationInFrames,
+            scrollLeft,
+            width,
+        });
+        const scrollPos = (0, exports.getScrollPositionForCursorOnRightEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        const needsToScrollRight = scrollPos >=
+            (0, exports.getScrollPositionForCursorOnRightEdge)({
+                nextFrame: currentFrameRight,
+                durationInFrames,
+            });
+        if (needsToScrollRight) {
+            (0, exports.scrollToTimelineXOffset)(scrollPos);
+        }
+    }
+    if (direction === 'page-right' || direction === 'page-left') {
+        if (!(0, exports.isCursorInViewport)({ frame, durationInFrames })) {
+            (0, exports.scrollToTimelineXOffset)(direction === 'page-left'
+                ? (0, exports.getScrollPositionForCursorOnRightEdge)({
+                    nextFrame: frame,
+                    durationInFrames,
+                })
+                : (0, exports.getScrollPositionForCursorOnLeftEdge)({
+                    nextFrame: frame,
+                    durationInFrames,
+                }));
+        }
+    }
+    if (direction === 'center') {
+        const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        const scrollPosOnLeftEdge = (0, exports.getScrollPositionForCursorOnLeftEdge)({
+            nextFrame: frame,
+            durationInFrames,
+        });
+        (0, exports.scrollToTimelineXOffset)((scrollPosOnLeftEdge + scrollPosOnRightEdge) / 2);
+    }
+};
+exports.ensureFrameIsInViewport = ensureFrameIsInViewport;
+const scrollToTimelineXOffset = (scrollPos) => {
+    var _a;
+    (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scroll({
+        left: scrollPos,
+    });
+};
+exports.scrollToTimelineXOffset = scrollToTimelineXOffset;
+const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, }) => {
+    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const scrollPos = frameIncrement * nextFrame;
+    return scrollPos;
+};
+exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
+const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
+    var _a, _b;
+    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const framesRemaining = durationInFrames - 1 - nextFrame;
+    const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
+    const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
+        fromRight -
+        ((_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) +
+        timeline_layout_1.TIMELINE_PADDING +
+        4; // clearfix;
+    return scrollPos;
+};
+exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRightEdge;
+const getFrameIncrement = (durationInFrames) => {
+    var _a, _b;
+    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
+};
+exports.getFrameIncrement = getFrameIncrement;
+const getFrameIncrementFromWidth = (durationInFrames, width) => {
+    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
+};
+exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
+const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
+    var _a, _b;
+    const nextFrame = calculateFrameWhileScrollingRight({
+        durationInFrames,
+        width,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
+    });
+    const currentFrame = calculateFrameWhileScrollingRight({
+        durationInFrames,
+        width,
+        scrollLeft: (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft,
+    });
+    // Should scroll by at least 1 frame, but not overshoot duration
+    return Math.min(durationInFrames - 1, Math.max(nextFrame, currentFrame + 1));
+};
+exports.getFrameWhileScrollingRight = getFrameWhileScrollingRight;
+const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
+    var _a;
+    const pos = clientX - timeline_layout_1.TIMELINE_PADDING;
+    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
+        extrapolateLeft: extrapolate,
+        extrapolateRight: extrapolate,
+    }));
+    return frame;
+};
+exports.getFrameFromX = getFrameFromX;
+const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }) => {
+    var _a, _b, _c;
+    const ratio = newZoom / oldZoom;
+    if (ratio === 1) {
+        return;
+    }
+    const { current } = timeline_refs_1.scrollableRef;
+    if (!current) {
+        return;
+    }
+    const frameIncrement = (0, exports.getFrameIncrement)(currentDurationInFrames);
+    const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
+    const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
+    current.scrollLeft += newCursorPosition - prevCursorPosition;
+    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(currentFrame, ((_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0) * ratio);
+};
+exports.zoomAndPreserveCursor = zoomAndPreserveCursor;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const inOutHandles: React.RefObject<{
-    inMarkClick: () => void;
-    outMarkClick: () => void;
+    inMarkClick: (e: KeyboardEvent | null) => void;
+    outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
     setMarks: (marks: [number | null, number | null]) => void;
 }>;

package/dist/editor/components/TimelineInOutToggle.js

@@ -4,12 +4,20 @@ exports.TimelineInOutPointToggle = 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 is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
+const in_out_1 = require("../state/in-out");
 const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
-const getTooltipText = (pointType) => `Mark ${pointType}`;
+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,
@@ -17,16 +25,33 @@ const style = {
 exports.inOutHandles = (0, react_1.createRef)();
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
-    const { setInAndOutFrames } = remotion_1.Internals.Timeline.useTimelineSetInOutFramePosition();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInMark = (0, react_1.useCallback)(() => {
+    const onInOutClear = (0, react_1.useCallback)(() => {
+        setInAndOutFrames(() => {
+            return {
+                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((f) => {
+                return {
+                    ...f,
+                    inFrame: null,
+                };
+            });
+            return null;
+        }
         setInAndOutFrames((prev) => {
             const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
@@ -51,10 +76,43 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onOutMark = (0, react_1.useCallback)(() => {
+    const clearInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                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) => {
+            return {
+                ...f,
+                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) => {
+                return {
+                    ...f,
+                    outFrame: null,
+                };
+            });
+            return;
+        }
         setInAndOutFrames((prev) => {
             const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
@@ -78,23 +136,30 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
-            return {
-                inFrame: null,
-                outFrame: null,
-            };
-        });
-    }, [setInAndOutFrames]);
     (0, react_1.useEffect)(() => {
-        const iKey = keybindings.registerKeybinding('keypress', 'i', () => {
-            onInMark();
+        const iKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'i',
+            callback: (e) => {
+                onInMark(e);
+            },
+            commandCtrlKey: false,
         });
-        const oKey = keybindings.registerKeybinding('keypress', 'o', () => {
-            onOutMark();
+        const oKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'o',
+            callback: (e) => {
+                onOutMark(e);
+            },
+            commandCtrlKey: false,
         });
-        const xKey = keybindings.registerKeybinding('keypress', 'x', () => {
-            onInOutClear();
+        const xKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'x',
+            callback: () => {
+                onInOutClear();
+            },
+            commandCtrlKey: false,
         });
         return () => {
             oKey.unregister();
@@ -153,6 +218,6 @@ const TimelineInOutPointToggle = () => {
     if (isStill) {
         return null;
     }
-    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: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out (O)'), "aria-label": getTooltipText('Out (O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }, void 0) }, void 0)] }, void 0));
+    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: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--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: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/TopPanel.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_compact_ui_1 = require("../helpers/use-compact-ui");
+const sidebar_1 = require("../state/sidebar");
 const Canvas_1 = require("./Canvas");
+const CollapsedCompositionSelector_1 = require("./CollapsedCompositionSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const PreviewToolbar_1 = require("./PreviewToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -11,6 +16,7 @@ const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const container = {
     height: '100%',
+    width: '100%',
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
@@ -29,6 +35,23 @@ const leftContainer = {
     display: 'flex',
 };
 const TopPanel = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}, void 0), (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: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}, void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}, void 0) }, void 0) }, void 0)] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}, void 0)] }, void 0));
+    const compactUi = (0, use_compact_ui_1.useCompactUI)();
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const actualState = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedState === 'collapsed') {
+            return 'collapsed';
+        }
+        if (sidebarCollapsedState === 'expanded') {
+            return 'expanded';
+        }
+        return compactUi ? 'collapsed' : 'expanded';
+    }, [compactUi, sidebarCollapsedState]);
+    const onCollapse = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState('collapsed');
+    }, [setSidebarCollapsedState]);
+    const onExpand = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState('expanded');
+    }, [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.jsxs)("div", { style: row, children: [actualState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedCompositionSelector_1.CollapsedCompositionSelector, { onExpand: onExpand })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: true, onCollapse: onCollapse })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {})] }));
 };
 exports.TopPanel = TopPanel;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PackageManager } from '@remotion/bundler';
+import type { PackageManager } from '../../preview-server/get-package-manager';
 export declare type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;

package/dist/editor/components/UpdateCheck.js

@@ -53,6 +53,6 @@ const UpdateCheck = () => {
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }));
 };
 exports.UpdateCheck = UpdateCheck;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UpdateInfo } from '../UpdateCheck';
+import type { UpdateInfo } from '../UpdateCheck';
 export declare const UpdateModal: React.FC<{
     info: UpdateInfo;
 }>;

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

@@ -38,6 +38,6 @@ const UpdateModal = ({ info }) => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const command = commands[info.packageManager];
-    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" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }, void 0), (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: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }, void 0), ' ', "to know what", "'s", " new in Remotion."] }, void 0)] }, void 0)] }, void 0));
+    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: [(0, jsx_runtime_1.jsx)("p", { 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: () => (0, copy_text_1.copyText)(command), 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 command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { 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/ZoomPersistor.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare const persistCurrentZoom: (zoom: number) => void;
+export declare const getZoomForComposition: (composition: string) => number;
+export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomPersistor = exports.getZoomForComposition = exports.persistCurrentZoom = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const FramePersistor_1 = require("./FramePersistor");
+const makeKey = (composition) => {
+    return `remotion.zoom.${composition}`;
+};
+const persistCurrentZoom = (zoom) => {
+    const currentComposition = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+    if (!currentComposition) {
+        return;
+    }
+    localStorage.setItem(makeKey(currentComposition), String(zoom));
+};
+exports.persistCurrentZoom = persistCurrentZoom;
+const getZoomForComposition = (composition) => {
+    const zoom = localStorage.getItem(makeKey(composition));
+    return zoom ? Number(zoom) : 0;
+};
+exports.getZoomForComposition = getZoomForComposition;
+const ZoomPersistor = () => {
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const isActive = currentComposition === (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+    (0, react_1.useEffect)(() => {
+        if (!isActive) {
+            return;
+        }
+        (0, exports.persistCurrentZoom)(zoom);
+    }, [zoom, isActive, playing]);
+    return null;
+};
+exports.ZoomPersistor = ZoomPersistor;

package/dist/editor/components/layout.js

@@ -12,11 +12,11 @@ const Spacing = ({ x = 0, y = 0 }) => {
             height: y * exports.SPACING_UNIT,
         };
     }, [x, y]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
 const flex = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children }, void 0);
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
 exports.Flex = Flex;
 const Row = ({ children, justify, className, align, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
@@ -28,7 +28,7 @@ const Row = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Row = Row;
 const Column = ({ children, justify, className, align, style = {} }) => {
@@ -41,6 +41,6 @@ const Column = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Column = Column;

package/dist/editor/helpers/calculate-timeline.d.ts

@@ -1,5 +1,5 @@
-import { TSequence } from 'remotion';
-import { TrackWithHash } from './get-timeline-sequence-sort-key';
+import type { TSequence } from 'remotion';
+import type { TrackWithHash } from './get-timeline-sequence-sort-key';
 export declare type SequenceWithOverlap = {
     sequence: TSequence;
     overlaps: TSequence[];

package/dist/editor/helpers/colors.d.ts

@@ -8,7 +8,8 @@ export declare const SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
+export declare const TIMELINE_BACKGROUND = "#111";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/editor/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
@@ -11,6 +11,7 @@ exports.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
 exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+exports.TIMELINE_BACKGROUND = '#111';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/editor/helpers/copy-text.d.ts

@@ -1 +1 @@
-export declare const copyCmd: (cmd: string) => void;
+export declare const copyText: (cmd: string) => void;

package/dist/editor/helpers/copy-text.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyCmd = void 0;
-const copyCmd = (cmd) => {
+exports.copyText = void 0;
+const copyText = (cmd) => {
     const permissionName = 'clipboard-write';
     navigator.permissions
         .query({ name: permissionName })
@@ -11,7 +11,8 @@ const copyCmd = (cmd) => {
         }
     })
         .catch((err) => {
-        console.log('Could not copy command', err);
+        // eslint-disable-next-line no-alert
+        alert('Could not copy:' + err);
     });
 };
-exports.copyCmd = copyCmd;
+exports.copyText = copyText;

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -1,5 +1,5 @@
-import { TComposition, TFolder } from 'remotion';
-import { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
+import type { TComposition, TFolder } from 'remotion';
+import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;

package/dist/editor/helpers/get-effective-translation.d.ts

@@ -0,0 +1,26 @@
+import type { Size, Translation } from '@remotion/player';
+export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
+    canvasSize: Size;
+    scale: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    translation: {
+        x: number;
+        y: number;
+    };
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};