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

package/dist/editor/components/Timeline/MaxTimelineTracks.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
     ? 15
     : Number(process.env.MAX_TIMELINE_TRACKS);
+exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
-    paddingTop: 6,
-    paddingBottom: 6,
+    height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
     color: 'rgba(255, 255, 255, 0.6)',
     fontFamily: 'sans-serif',
     fontSize: 12,
@@ -16,6 +18,6 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.Preview.setMaxTimelineTracks() in your remotion.config.ts file."] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.Preview.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

package/dist/editor/components/Timeline/Timeline.js

@@ -12,19 +12,24 @@ const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_refs_1 = require("./timeline-refs");
 const timeline_state_reducer_1 = require("./timeline-state-reducer");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
+const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
+const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const container = {
     minHeight: '100%',
     flex: 1,
     display: 'flex',
     height: 0,
-    overflow: 'auto',
+    overflowY: 'auto',
 };
+const noop = () => undefined;
 const Timeline = () => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -60,18 +65,21 @@ const Timeline = () => {
         return timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t, timeline, state));
     }, [state, timeline]);
     const shown = withoutHidden.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
+    const hasBeenCut = withoutHidden.length > shown.length;
     const inner = (0, react_1.useMemo)(() => {
         return {
-            height: shown.length * (timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2),
+            height: shown.length * (timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2) +
+                (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
+                TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
             display: 'flex',
             flex: 1,
             minHeight: '100%',
             overflowX: 'hidden',
         };
-    }, [shown.length]);
+    }, [hasBeenCut, shown.length]);
     if (!videoConfig) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (0, jsx_runtime_1.jsxs)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: withoutHidden.length > shown.length }, void 0), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}, void 0)] }, void 0)] }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: false }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
 };
 exports.Timeline = Timeline;

package/dist/editor/components/Timeline/TimelineCollapseToggle.js

@@ -11,9 +11,9 @@ const container = {
     alignItems: 'center',
 };
 const Icon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: colors_1.LIGHT_COLOR }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: colors_1.LIGHT_COLOR }) }));
 };
 const TimelineCollapseToggle = ({ collapsed }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

package/dist/editor/components/Timeline/TimelineDragHandler.js

@@ -7,50 +7,56 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const in_out_1 = require("../../state/in-out");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
 const FramePersistor_1 = require("../FramePersistor");
 const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
+const TimelineSlider_1 = require("./TimelineSlider");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',
 };
 const container = {
     userSelect: 'none',
-    overflow: 'hidden',
     position: 'absolute',
-    width: '100%',
     height: '100%',
+    top: 0,
 };
-const getFrameFromX = (clientX, durationInFrames, width, extrapolate) => {
+const getClientXWithScroll = (x) => {
     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;
+    return x + ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft);
 };
 const TimelineDragHandler = () => {
-    var _a, _b;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
+    var _a, _b, _c;
+    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
     });
-    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
-    const left = (_b = size === null || size === void 0 ? void 0 : size.left) !== null && _b !== void 0 ? _b : 0;
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
-    const { setInAndOutFrames } = remotion_1.Internals.Timeline.useTimelineSetInOutFramePosition();
+    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
+    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });
     const { playing, play, pause, seek } = player_1.PlayerInternals.usePlayer();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const scroller = (0, react_1.useRef)(null);
+    const stopInterval = () => {
+        if (scroller.current) {
+            clearInterval(scroller.current);
+            scroller.current = null;
+        }
+    };
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        stopInterval();
         if (!videoConfig) {
             return;
         }
@@ -62,7 +68,7 @@ const TimelineDragHandler = () => {
             const outMarker = outFrame === null ? Infinity : get(outFrame - 1);
             setInOutDragging({
                 dragging: 'in',
-                initialOffset: e.clientX,
+                initialOffset: getClientXWithScroll(e.clientX),
                 boundaries: [-Infinity, outMarker - inMarker],
             });
             return;
@@ -75,12 +81,17 @@ const TimelineDragHandler = () => {
             const inMarker = inFrame === null ? -Infinity : get(inFrame + 1);
             setInOutDragging({
                 dragging: 'out',
-                initialOffset: e.clientX,
+                initialOffset: getClientXWithScroll(e.clientX),
                 boundaries: [inMarker - outMarker, Infinity],
             });
             return;
         }
-        const frame = getFrameFromX(e.clientX - left, videoConfig.durationInFrames, width, 'clamp');
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
         seek(frame);
         setDragging({
             dragging: true,
@@ -89,15 +100,84 @@ const TimelineDragHandler = () => {
         pause();
     }, [videoConfig, left, width, seek, playing, pause, outFrame, get, inFrame]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
+        var _a;
         if (!videoConfig) {
             return;
         }
         if (!dragging.dragging) {
             return;
         }
-        const frame = getFrameFromX(e.clientX - left, videoConfig.durationInFrames, width, 'clamp');
-        seek(frame);
-    }, [dragging.dragging, seek, left, videoConfig, width]);
+        const isRightOfArea = e.clientX >=
+            ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
+                left -
+                timeline_layout_1.TIMELINE_PADDING;
+        const isLeftOfArea = e.clientX <= left;
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
+        if (isLeftOfArea && (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
+            if (scroller.current) {
+                return;
+            }
+            const scrollEvery = () => {
+                var _a;
+                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
+                    stopInterval();
+                    return;
+                }
+                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingLeft)({
+                    durationInFrames: videoConfig.durationInFrames,
+                    width,
+                });
+                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnLeftEdge)({
+                    nextFrame,
+                    durationInFrames: videoConfig.durationInFrames,
+                });
+                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
+                seek(nextFrame);
+                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
+            };
+            scrollEvery();
+            scroller.current = setInterval(() => {
+                scrollEvery();
+            }, 100);
+        }
+        else if (isRightOfArea &&
+            (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
+            if (scroller.current) {
+                return;
+            }
+            const scrollEvery = () => {
+                var _a;
+                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
+                    stopInterval();
+                    return;
+                }
+                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingRight)({
+                    durationInFrames: videoConfig.durationInFrames,
+                    width,
+                });
+                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnRightEdge)({
+                    nextFrame,
+                    durationInFrames: videoConfig.durationInFrames,
+                });
+                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
+                seek(nextFrame);
+                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
+            };
+            scrollEvery();
+            scroller.current = setInterval(() => {
+                scrollEvery();
+            }, 100);
+        }
+        else {
+            stopInterval();
+            seek(frame);
+        }
+    }, [videoConfig, dragging.dragging, left, width, seek]);
     const onPointerMoveInOut = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return;
@@ -105,7 +185,7 @@ const TimelineDragHandler = () => {
         if (!inOutDragging.dragging) {
             return;
         }
-        const offset = Math.max(inOutDragging.boundaries[0], Math.min(inOutDragging.boundaries[1], e.clientX - inOutDragging.initialOffset));
+        const offset = Math.max(inOutDragging.boundaries[0], Math.min(inOutDragging.boundaries[1], getClientXWithScroll(e.clientX) - inOutDragging.initialOffset));
         if (inOutDragging.dragging === 'in') {
             if (!TimelineInOutPointerHandle_1.inPointerHandle.current) {
                 throw new Error('in pointer handle');
@@ -138,6 +218,7 @@ const TimelineDragHandler = () => {
         }
     }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
     const onPointerUpScrubbing = (0, react_1.useCallback)((e) => {
+        stopInterval();
         if (!videoConfig) {
             return;
         }
@@ -147,7 +228,12 @@ const TimelineDragHandler = () => {
         setDragging({
             dragging: false,
         });
-        const frame = getFrameFromX(e.clientX - left, videoConfig.durationInFrames, width, 'clamp');
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'clamp',
+        });
         (0, FramePersistor_1.persistCurrentFrame)(frame);
         if (dragging.wasPlaying) {
             play();
@@ -163,7 +249,12 @@ const TimelineDragHandler = () => {
         setInOutDragging({
             dragging: false,
         });
-        const frame = getFrameFromX(e.clientX - left, videoConfig.durationInFrames, width, 'extend');
+        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
+            clientX: getClientXWithScroll(e.clientX) - left,
+            durationInFrames: videoConfig.durationInFrames,
+            width,
+            extrapolate: 'extend',
+        });
         if (inOutDragging.dragging === 'in') {
             if (frame < 1) {
                 return setInAndOutFrames((prev) => ({
@@ -221,6 +312,13 @@ const TimelineDragHandler = () => {
             window.removeEventListener('pointerup', onPointerUpInOut);
         };
     }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: container, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }, void 0), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }, void 0)), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }, void 0))] }, void 0));
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            width: 100 * zoom + '%',
+        };
+    }, [zoom]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;

package/dist/editor/components/Timeline/TimelineInOutPointer.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const in_out_1 = require("../../state/in-out");
 const areaHighlight = {
     position: 'absolute',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -15,7 +16,7 @@ const areaHighlight = {
 exports.inMarkerAreaRef = (0, react_1.createRef)();
 exports.outMarkerAreaRef = (0, react_1.createRef)();
 const TimelineInOutPointer = () => {
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const { get, width } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     if (!videoConfig) {
@@ -25,10 +26,10 @@ const TimelineInOutPointer = () => {
                     ...areaHighlight,
                     left: 0,
                     width: get(inFrame !== null && inFrame !== void 0 ? inFrame : 0),
-                } }, void 0)), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
+                } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: get(outFrame),
                     width: width - get(outFrame),
-                } }, void 0))] }, void 0));
+                } }))] }));
 };
 exports.TimelineInOutPointer = TimelineInOutPointer;

package/dist/editor/components/Timeline/TimelineInOutPointerHandle.js

@@ -26,6 +26,6 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
             transform: `translateX(${get(atFrame)}px)`,
         };
     }, [atFrame, dragging, get]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

package/dist/editor/components/Timeline/TimelineList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-import { TimelineActionState, TimelineViewState } from './timeline-state-reducer';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineActionState, TimelineViewState } from './timeline-state-reducer';
 export declare const TimelineList: React.FC<{
     timeline: TrackWithHash[];
     viewState: TimelineViewState;

package/dist/editor/components/Timeline/TimelineList.js

@@ -2,17 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const is_collapsed_1 = require("./is-collapsed");
 const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const container = {
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
+    background: colors_1.BACKGROUND,
 };
 const TimelineList = ({ timeline, viewState, dispatchStateChange }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: timeline.map((track, i) => {
-            const beforeDepth = i === 0 ? 0 : timeline[i - 1].depth;
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { hash: track.hash, dispatchStateChange: dispatchStateChange, collapsed: (0, is_collapsed_1.isTrackCollapsed)(track.hash, viewState), nestedDepth: track.depth, sequence: track.sequence, beforeDepth: beforeDepth, canCollapse: track.canCollapse }, track.sequence.id) }, track.sequence.id));
-        }) }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, i) => {
+                const beforeDepth = i === 0 ? 0 : timeline[i - 1].depth;
+                return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { hash: track.hash, dispatchStateChange: dispatchStateChange, collapsed: (0, is_collapsed_1.isTrackCollapsed)(track.hash, viewState), nestedDepth: track.depth, sequence: track.sequence, beforeDepth: beforeDepth, canCollapse: track.canCollapse }, track.sequence.id) }, track.sequence.id));
+            }), (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePlaceholders, {})] }));
 };
 exports.TimelineList = TimelineList;

package/dist/editor/components/Timeline/TimelineListItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TSequence } from 'remotion';
-import { TimelineActionState } from './timeline-state-reducer';
+import type { TSequence } from 'remotion';
+import type { TimelineActionState } from './timeline-state-reducer';
+export declare const TOTAL_TIMELINE_LAYER_LEFT_PADDING: number;
 export declare const TimelineListItem: React.FC<{
     sequence: TSequence;
     nestedDepth: number;

package/dist/editor/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = void 0;
+exports.TimelineListItem = exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -10,6 +10,10 @@ const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const HOOK_WIDTH = 7;
 const BORDER_BOTTOM_LEFT_RADIUS = 2;
 const SPACING = 5;
+const TIMELINE_LAYER_PADDING = HOOK_WIDTH + SPACING * 1.5;
+const TIMELINE_COLLAPSER_WIDTH = 8;
+const TIMELINE_COLLAPSER_MARGIN_RIGHT = 10;
+exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = TIMELINE_COLLAPSER_WIDTH + TIMELINE_COLLAPSER_MARGIN_RIGHT + timeline_layout_1.TIMELINE_PADDING;
 const textStyle = {
     fontSize: 13,
 };
@@ -22,6 +26,7 @@ const outer = {
     alignItems: 'center',
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     wordBreak: 'break-all',
+    textAlign: 'left',
 };
 const hookContainer = {
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
@@ -43,9 +48,9 @@ const smallSpace = {
     width: SPACING * 0.5,
 };
 const collapser = {
-    width: 8,
+    width: TIMELINE_COLLAPSER_WIDTH,
     userSelect: 'none',
-    marginRight: 10,
+    marginRight: TIMELINE_COLLAPSER_MARGIN_RIGHT,
 };
 const collapserButton = {
     ...collapser,
@@ -54,7 +59,7 @@ const collapserButton = {
 };
 const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispatchStateChange, hash, canCollapse, }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const leftOffset = HOOK_WIDTH + SPACING * 1.5;
+    const leftOffset = TIMELINE_LAYER_PADDING;
     const hookStyle = (0, react_1.useMemo)(() => {
         return {
             ...hook,
@@ -85,6 +90,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }, void 0), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", { style: collapser }, void 0)), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }, void 0), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: space }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/editor/components/Timeline/TimelinePlayCursorSyncer.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const TimelinePlayCursorSyncer: React.FC;

package/dist/editor/components/Timeline/TimelinePlayCursorSyncer.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelinePlayCursorSyncer = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const imperative_state_1 = require("./imperative-state");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+let lastTimelinePositionWhileScrolling = null;
+const TimelinePlayCursorSyncer = () => {
+    var _a, _b, _c;
+    const video = remotion_1.Internals.useVideo();
+    const timelineContext = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    (0, imperative_state_1.setCurrentFrame)(timelineContext.frame);
+    (0, imperative_state_1.setCurrentZoom)(zoom);
+    (0, imperative_state_1.setCurrentDuration)((_a = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _a !== void 0 ? _a : 1);
+    (0, imperative_state_1.setCurrentFps)((_b = video === null || video === void 0 ? void 0 : video.fps) !== null && _b !== void 0 ? _b : 1);
+    const playing = (_c = timelineContext.playing) !== null && _c !== void 0 ? _c : false;
+    /**
+     * While playing (forwards or backwards), jump one viewport width to the left or right when the cursor goes out of the viewport.
+     */
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            return;
+        }
+        if (!playing) {
+            return;
+        }
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction: timelineContext.playbackRate > 0 ? 'page-right' : 'page-left',
+            durationInFrames: video.durationInFrames,
+            frame: timelineContext.frame,
+        });
+    }, [playing, timelineContext, video]);
+    /**
+     * Restore state if `enter` is being pressed
+     */
+    (0, react_1.useEffect)(() => {
+        const { current } = timeline_refs_1.scrollableRef;
+        if (!current) {
+            return;
+        }
+        if (playing) {
+            lastTimelinePositionWhileScrolling = {
+                scrollLeft: current.scrollLeft,
+                frame: (0, imperative_state_1.getCurrentFrame)(),
+                zoomLevel: (0, imperative_state_1.getCurrentZoom)(),
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            };
+        }
+        else if (lastTimelinePositionWhileScrolling !== null) {
+            if ((0, timeline_scroll_logic_1.isCursorInViewport)({
+                frame: (0, imperative_state_1.getCurrentFrame)(),
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            })) {
+                return;
+            }
+            if (lastTimelinePositionWhileScrolling.zoomLevel === (0, imperative_state_1.getCurrentZoom)() &&
+                lastTimelinePositionWhileScrolling.durationInFrames ===
+                    (0, imperative_state_1.getCurrentDuration)()) {
+                current.scrollLeft = lastTimelinePositionWhileScrolling.scrollLeft;
+            }
+            else {
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'center',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: lastTimelinePositionWhileScrolling.frame,
+                });
+            }
+        }
+    }, [playing]);
+    return null;
+};
+exports.TimelinePlayCursorSyncer = TimelinePlayCursorSyncer;

package/dist/editor/components/Timeline/TimelineScrollable.d.ts

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

package/dist/editor/components/Timeline/TimelineScrollable.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineScrollable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const timeline_refs_1 = require("./timeline-refs");
+const outer = {
+    width: '100%',
+    height: '100%',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    position: 'relative',
+    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+};
+const TimelineScrollable = ({ children }) => {
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            minHeight: '100%',
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+};
+exports.TimelineScrollable = TimelineScrollable;

package/dist/editor/components/Timeline/TimelineSequence.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const TimelineSequence: React.FC<{
     s: TSequence;
     fps: number;

package/dist/editor/components/Timeline/TimelineSequence.js

@@ -67,6 +67,6 @@ const TimelineSequence = ({ s, fps }) => {
         };
     }, []);
     const thumbnailWidth = timeline_layout_1.TIMELINE_LAYER_HEIGHT * (video.width / video.height);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) }, void 0)) : null }, void 0), s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration }, void 0)) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }, void 0) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }, void 0))] }, s.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) })) : null }), s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
 };
 exports.TimelineSequence = TimelineSequence;

package/dist/editor/components/Timeline/TimelineSequenceFrame.js

@@ -26,6 +26,6 @@ The current time within the sequence.
 Call \`useCurrentFrame()\` within the sequence to get the time programmatically.
 
 Call \`const {durationInFrames} = useVideoConfig()\` to get the duration of the sequence.
-`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }, void 0));
+`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

package/dist/editor/components/Timeline/TimelineSlider.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+export declare const redrawTimelineSliderFast: React.RefObject<{
+    draw: (frame: number, width?: number) => void;
+}>;
 export declare const TimelineSlider: React.FC;