@remotion/cli 3.1.11 → 3.2.0

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canScrollTimelineIntoDirection = void 0;
+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;
@@ -11,3 +13,206 @@ const canScrollTimelineIntoDirection = () => {
     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/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/helpers/colors.d.ts

@@ -8,6 +8,7 @@ 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;

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/get-left-of-timeline-slider.d.ts

@@ -2,3 +2,4 @@ export declare const useGetXPositionOfItemInTimeline: () => {
     get: (frame: number) => number;
     width: number;
 };
+export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;

package/dist/editor/helpers/get-left-of-timeline-slider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetXPositionOfItemInTimeline = void 0;
+exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -18,12 +18,15 @@ const useGetXPositionOfItemInTimeline = () => {
         if (!videoConfig) {
             return 0;
         }
-        return ((frame / (videoConfig.durationInFrames - 1)) *
-            (width - timeline_layout_1.TIMELINE_PADDING * 2) +
-            timeline_layout_1.TIMELINE_PADDING);
+        return (0, exports.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
     }, [videoConfig, width]);
     return (0, react_1.useMemo)(() => {
         return { get, width };
     }, [get, width]);
 };
 exports.useGetXPositionOfItemInTimeline = useGetXPositionOfItemInTimeline;
+const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
+    const proportion = frame / (duration - 1);
+    return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
+};
+exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/editor/helpers/get-timeline-sequence-layout.js

@@ -3,23 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
+const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    const base = durationInFrames === Infinity || lastFrame === 0
+        ? fullWidth
+        : (spatialDuration / lastFrame) * fullWidth;
+    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+};
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
+    const shouldAddHalfAFrameAtStart = startFrom > 0;
+    if (shouldAddHalfAFrameAtEnd) {
+        spatialDuration += 0.5;
+    }
+    if (shouldAddHalfAFrameAtStart) {
+        spatialDuration += 0.5;
+    }
+    const startFromWithOffset = shouldAddHalfAFrameAtStart
+        ? startFrom - 0.5
+        : startFrom;
     const marginLeft = lastFrame === 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
-    const negativeMarginLeft = Math.min(marginLeft, 0);
-    const width = (durationInFrames === Infinity || lastFrame === 0
-        ? windowWidth - timeline_layout_1.TIMELINE_PADDING * 2
-        : (spatialDuration / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2)) -
-        exports.SEQUENCE_BORDER_WIDTH +
-        negativeMarginLeft;
+        : (startFromWithOffset / lastFrame) *
+            (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     return {
         marginLeft: Math.round(Math.max(marginLeft, 0)),
-        width: Math.floor(width),
+        width: Math.floor(getWidthOfTrack({
+            durationInFrames,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration,
+            windowWidth,
+        })),
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

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

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

package/dist/editor/icons/minus.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Minus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Minus = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" }) }));
+};
+exports.Minus = Minus;

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

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

package/dist/editor/icons/plus.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Plus = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" }) }));
+};
+exports.Plus = Plus;

package/dist/editor/state/timeline-zoom.d.ts

@@ -3,7 +3,7 @@ export declare const TIMELINE_MIN_ZOOM = 1;
 export declare const TIMELINE_MAX_ZOOM = 5;
 export declare const TimelineZoomCtx: React.Context<{
     zoom: number;
-    setZoom: React.Dispatch<React.SetStateAction<number>>;
+    setZoom: (prev: (prevZoom: number) => number) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
     children: React.ReactNode;

package/dist/editor/state/timeline-zoom.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const imperative_state_1 = require("../components/Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 exports.TIMELINE_MIN_ZOOM = 1;
 exports.TIMELINE_MAX_ZOOM = 5;
 exports.TimelineZoomCtx = (0, react_1.createContext)({
@@ -16,7 +18,19 @@ const TimelineZoomContext = ({ children }) => {
     const value = (0, react_1.useMemo)(() => {
         return {
             zoom,
-            setZoom,
+            setZoom: (callback) => {
+                setZoom((prevZoom) => {
+                    const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback(prevZoom)));
+                    const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+                    (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
+                        oldZoom: prevZoom,
+                        newZoom,
+                        currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                    });
+                    return newZoom;
+                });
+            },
         };
     }, [zoom]);
     return ((0, jsx_runtime_1.jsx)(exports.TimelineZoomCtx.Provider, { value: value, children: children }));

package/dist/handle-common-errors.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleCommonError = void 0;
+const chalk_1 = require("./chalk");
 const log_1 = require("./log");
 const print_error_1 = require("./print-error");
 const handleCommonError = async (err) => {
@@ -21,5 +22,9 @@ const handleCommonError = async (err) => {
         log_1.Log.info();
         log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/enametoolong');
     }
+    if (err.message.includes('The bucket does not allow ACLs')) {
+        log_1.Log.info();
+        log_1.Log.info(chalk_1.chalk.green('💡 Fix this issue https://remotion.dev/docs/lambda/troubleshooting/bucket-disallows-acl'));
+    }
 };
 exports.handleCommonError = handleCommonError;

package/dist/preview-server/live-events.js

@@ -13,6 +13,10 @@ const makeLiveEventsRouter = () => {
             'cache-control': 'no-cache',
         };
         response.writeHead(200, headers);
+        if (request.method === 'OPTIONS') {
+            response.end();
+            return;
+        }
         response.write(serializeMessage({ type: 'init' }));
         const clientId = String(Math.random());
         const newClient = {

package/dist/preview-server/routes.js

@@ -43,7 +43,12 @@ const handleProjectInfo = async (remotionRoot, _, response) => {
     response.writeHead(200);
     response.end(JSON.stringify(data));
 };
-const handleFileSource = async (remotionRoot, search, _, response) => {
+const handleFileSource = async ({ method, remotionRoot, search, response, }) => {
+    if (method === 'OPTIONS') {
+        response.writeHead(200);
+        response.end();
+        return;
+    }
     if (!search.startsWith('?')) {
         throw new Error('query must start with ?');
     }
@@ -58,6 +63,10 @@ const handleFileSource = async (remotionRoot, search, _, response) => {
     return response.end();
 };
 const handleOpenInEditor = async (remotionRoot, req, res) => {
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 200;
+        res.end();
+    }
     try {
         const b = await new Promise((_resolve) => {
             let data = '';
@@ -114,7 +123,12 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
         return handleProjectInfo(remotionRoot, request, response);
     }
     if (url.pathname === '/api/file-source') {
-        return handleFileSource(remotionRoot, url.search, request, response);
+        return handleFileSource({
+            remotionRoot,
+            search: url.search,
+            method: request.method,
+            response,
+        });
     }
     if (url.pathname === '/api/open-in-editor') {
         return handleOpenInEditor(remotionRoot, request, response);

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

@@ -53,7 +53,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         })
             .then(() => {
-            (0, routes_1.handleRoutes)({
+            return (0, routes_1.handleRoutes)({
                 hash,
                 hashPrefix,
                 request,

package/dist/upgrade.js

@@ -37,6 +37,7 @@ const upgrade = async (remotionRoot) => {
         '@remotion/eslint-config',
         '@remotion/renderer',
         '@remotion/skia',
+        '@remotion/lottie',
         '@remotion/media-utils',
         '@remotion/babel-loader',
         '@remotion/lambda',

package/dist/versions.js

@@ -16,6 +16,7 @@ const packages = [
     '@remotion/eslint-config',
     '@remotion/renderer',
     '@remotion/skia',
+    '@remotion/lottie',
     '@remotion/media-utils',
     '@remotion/babel-loader',
     '@remotion/lambda',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.1.11",
+	"version": "3.2.0",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -23,15 +23,15 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.1.11",
-		"@remotion/media-utils": "3.1.11",
-		"@remotion/player": "3.1.11",
-		"@remotion/renderer": "3.1.11",
+		"@remotion/bundler": "3.2.0",
+		"@remotion/media-utils": "3.2.0",
+		"@remotion/player": "3.2.0",
+		"@remotion/renderer": "3.2.0",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
-		"remotion": "3.1.11",
+		"remotion": "3.2.0",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bc4184c9faf944a3bac2fd56bdf990cc74e3ec94"
+	"gitHead": "47b188161a9e922a247eaa998e72d37af9137707"
 }

package/dist/bundle-on-cli.d.ts

@@ -1,2 +0,0 @@
-import { RenderStep } from './step';
-export declare const bundleOnCli: (fullPath: string, steps: RenderStep[]) => Promise<string>;

package/dist/bundle-on-cli.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundleOnCli = void 0;
-const bundler_1 = require("@remotion/bundler");
-const remotion_1 = require("remotion");
-const log_1 = require("./log");
-const parse_command_line_1 = require("./parse-command-line");
-const progress_bar_1 = require("./progress-bar");
-const bundleOnCli = async (fullPath, steps) => {
-    var _a;
-    const shouldCache = remotion_1.Internals.getWebpackCaching();
-    const cacheExistedBefore = bundler_1.BundlerInternals.cacheExists('production', null);
-    if (cacheExistedBefore && !shouldCache) {
-        log_1.Log.info('🧹 Cache disabled but found. Deleting... ');
-        await bundler_1.BundlerInternals.clearCache('production', null);
-    }
-    const bundleStartTime = Date.now();
-    const bundlingProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
-    const bundled = await (0, bundler_1.bundle)(fullPath, (progress) => {
-        bundlingProgress.update((0, progress_bar_1.makeBundlingProgress)({
-            progress: progress / 100,
-            steps,
-            doneIn: null,
-        }));
-    }, {
-        enableCaching: shouldCache,
-        webpackOverride: (_a = remotion_1.Internals.getWebpackOverrideFn()) !== null && _a !== void 0 ? _a : remotion_1.Internals.defaultOverrideFunction,
-    });
-    bundlingProgress.update((0, progress_bar_1.makeBundlingProgress)({
-        progress: 1,
-        steps,
-        doneIn: Date.now() - bundleStartTime,
-    }) + '\n');
-    log_1.Log.verbose('Bundled under', bundled);
-    const cacheExistedAfter = bundler_1.BundlerInternals.cacheExists('production', null);
-    if (cacheExistedAfter && !cacheExistedBefore) {
-        log_1.Log.info('⚡️ Cached bundle. Subsequent renders will be faster.');
-    }
-    return bundled;
-};
-exports.bundleOnCli = bundleOnCli;

package/dist/bundle.d.ts

@@ -1 +0,0 @@
-export declare const bundleCommand: () => Promise<void>;