@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/TimelineVideoInfo.d.ts

@@ -3,16 +3,16 @@ import type { LoopDisplay } from 'remotion';
 export declare const TimelineVideoInfo: React.NamedExoticComponent<{
     readonly src: string;
     readonly visualizationWidth: number;
-    readonly naturalWidth: number;
+    readonly displayOffsetInFrames: number;
+    readonly displayDurationInFrames: number;
     readonly startMediaFrom: number;
     readonly mediaFrameAtSequenceZero: number | null;
     readonly sequenceFrameOffset: number;
-    readonly durationInFrames: number;
     readonly playbackRate: number;
     readonly volume: string | number;
     readonly doesVolumeChange: boolean;
-    readonly premountWidth: number;
-    readonly postmountWidth: number;
+    readonly muted: boolean;
+    readonly marginLeft: number;
     readonly loopDisplay: LoopDisplay | undefined;
     readonly frozenMediaFrame: number | null;
     readonly extendLastFrame: boolean;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -42,7 +42,6 @@ const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-frame");
-const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
 const timeline_video_filmstrip_times_1 = require("./timeline-video-filmstrip-times");
 const outerStyle = {
     width: '100%',
@@ -59,7 +58,8 @@ const filmstripContainerStyle = {
     fontFamily: 'Arial, Helvetica',
 };
 const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
-const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
+const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, sourceOffsetInFrames, tiledLoop, playbackRate, volume, doesVolumeChange, muted, frozenMediaFrame, extendLastFrame, }) => {
+    var _a, _b;
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -69,15 +69,8 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
         mediaFrameAtSequenceZero,
         sequenceFrameOffset,
         playbackRate,
-    });
-    const { mediaVisualizationWidth, mediaNaturalWidth } = (0, react_1.useMemo)(() => {
-        return (0, get_timeline_video_info_widths_1.getTimelineVideoInfoWidths)({
-            visualizationWidth,
-            naturalWidth,
-            premountWidth,
-            postmountWidth,
-        });
-    }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
+    }) +
+        sourceOffsetInFrames * playbackRate;
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -88,19 +81,22 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
             return;
         }
         const controller = new AbortController();
+        const pixelRatio = window.devicePixelRatio;
         const canvas = document.createElement('canvas');
-        canvas.width = mediaVisualizationWidth;
-        canvas.height = timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT;
+        canvas.width = Math.ceil(visualizationWidth * pixelRatio);
+        canvas.height = Math.ceil(timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT * pixelRatio);
+        canvas.style.width = visualizationWidth + 'px';
+        canvas.style.height = timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT + 'px';
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             return;
         }
         current.appendChild(canvas);
         const drawRepeatedFrame = (frame) => {
-            const thumbnailWidth = Math.max(1, frame.displayWidth / window.devicePixelRatio);
+            const thumbnailWidth = Math.max(1, frame.displayWidth);
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             for (let x = 0; x < canvas.width; x += thumbnailWidth) {
-                ctx.drawImage(frame, x, 0, thumbnailWidth, timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT);
+                ctx.drawImage(frame, x, 0, thumbnailWidth, canvas.height);
             }
         };
         const getCachedFrozenFrame = (timestamp) => {
@@ -128,7 +124,7 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
             durationInFrames,
             playbackRate,
             fps,
-            loopDisplay,
+            loopDisplay: undefined,
             frozenMediaFrame,
         });
         if (times.type === 'frozen') {
@@ -152,8 +148,7 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                     let frame;
                     try {
                         frame = sample.toVideoFrame();
-                        const scale = (timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame.displayHeight) *
-                            window.devicePixelRatio;
+                        const scale = canvas.height / frame.displayHeight;
                         const transformed = (0, timeline_utils_1.resizeVideoFrame)({
                             frame,
                             scale,
@@ -185,42 +180,44 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                 current.removeChild(canvas);
             };
         }
-        const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
-            visualizationWidth: mediaNaturalWidth,
-            loopDisplay,
-        });
-        const shouldRepeatVideo = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay);
-        const targetCanvas = shouldRepeatVideo
-            ? document.createElement('canvas')
-            : canvas;
-        targetCanvas.width = shouldRepeatVideo
-            ? Math.max(1, Math.ceil(loopWidth))
+        const targetCanvas = tiledLoop ? document.createElement('canvas') : canvas;
+        targetCanvas.width = tiledLoop
+            ? Math.max(1, Math.ceil(tiledLoop.loopWidth * pixelRatio))
             : canvas.width;
         targetCanvas.height = canvas.height;
-        const targetCtx = shouldRepeatVideo ? targetCanvas.getContext('2d') : ctx;
+        const targetCtx = tiledLoop ? targetCanvas.getContext('2d') : ctx;
         if (!targetCtx) {
             current.removeChild(canvas);
             return;
         }
+        // desired-timestamp -> filled-timestamp
+        const filledSlots = new Map();
+        const { fromSeconds, toSeconds } = times;
+        const targetWidth = targetCanvas.width;
         const repeatTarget = () => {
-            if (!shouldRepeatVideo) {
+            if (!tiledLoop) {
                 return;
             }
             const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
             if (!pattern) {
                 return;
             }
-            pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
+            const phase = (tiledLoop.displayOffsetInFrames %
+                tiledLoop.loopDisplay.durationInFrames) *
+                ((tiledLoop.loopWidth * pixelRatio) /
+                    tiledLoop.loopDisplay.durationInFrames);
+            pattern.setTransform(new DOMMatrix([
+                (tiledLoop.loopWidth * pixelRatio) / targetCanvas.width,
+                0,
+                0,
+                1,
+                -phase,
+                0,
+            ]));
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.fillStyle = pattern;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
         };
-        // desired-timestamp -> filled-timestamp
-        const filledSlots = new Map();
-        const { fromSeconds, toSeconds } = times;
-        const targetWidth = shouldRepeatVideo
-            ? targetCanvas.width
-            : mediaNaturalWidth;
         if (aspectRatio.current !== null) {
             (0, timeline_utils_1.ensureSlots)({
                 filledSlots,
@@ -228,7 +225,7 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                 fromSeconds,
                 toSeconds,
                 aspectRatio: aspectRatio.current,
-                frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
+                frameHeight: canvas.height,
             });
             (0, timeline_utils_1.fillWithCachedFrames)({
                 ctx: targetCtx,
@@ -237,11 +234,11 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                 src,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
-                devicePixelRatio: window.devicePixelRatio,
-                frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
+                devicePixelRatio: 1,
+                frameHeight: canvas.height,
             });
             repeatTarget();
-            const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => !filledSlots.get(timestamp));
+            const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => filledSlots.get(timestamp) === undefined);
             // Don't extract frames if all slots are filled
             if (unfilled.length === 0) {
                 return () => {
@@ -260,17 +257,29 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                     toSeconds,
                     naturalWidth: targetWidth,
                     aspectRatio: aspectRatio.current,
-                    frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
+                    frameHeight: canvas.height,
+                });
+                (0, timeline_utils_1.fillWithCachedFrames)({
+                    ctx: targetCtx,
+                    naturalWidth: targetWidth,
+                    filledSlots,
+                    src,
+                    segmentDuration: toSeconds - fromSeconds,
+                    fromSeconds,
+                    devicePixelRatio: 1,
+                    frameHeight: canvas.height,
                 });
-                return Array.from(filledSlots.keys()).map((timestamp) => timestamp / timeline_utils_1.WEBCODECS_TIMESCALE);
+                repeatTarget();
+                return Array.from(filledSlots.keys())
+                    .filter((timestamp) => filledSlots.get(timestamp) === undefined)
+                    .map((timestamp) => timestamp / timeline_utils_1.WEBCODECS_TIMESCALE);
             },
             src,
             onVideoSample: (sample) => {
                 let frame;
                 try {
                     frame = sample.toVideoFrame();
-                    const scale = (timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame.displayHeight) *
-                        window.devicePixelRatio;
+                    const scale = canvas.height / frame.displayHeight;
                     const transformed = (0, timeline_utils_1.resizeVideoFrame)({
                         frame,
                         scale,
@@ -290,7 +299,7 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                         toSeconds,
                         naturalWidth: targetWidth,
                         aspectRatio: aspectRatio.current,
-                        frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
+                        frameHeight: canvas.height,
                     });
                     (0, timeline_utils_1.fillFrameWhereItFits)({
                         ctx: targetCtx,
@@ -299,8 +308,8 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                         frame: transformed,
                         segmentDuration: toSeconds - fromSeconds,
                         fromSeconds,
-                        devicePixelRatio: window.devicePixelRatio,
-                        frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
+                        devicePixelRatio: 1,
+                        frameHeight: canvas.height,
                     });
                     repeatTarget();
                 }
@@ -327,8 +336,8 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                 src,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
-                devicePixelRatio: window.devicePixelRatio,
-                frameHeight: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
+                devicePixelRatio: 1,
+                frameHeight: canvas.height,
             });
             repeatTarget();
         })
@@ -345,30 +354,111 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
         extendLastFrame,
         fps,
         frozenMediaFrame,
-        loopDisplay,
-        mediaNaturalWidth,
-        mediaVisualizationWidth,
         mediaStartFrame,
         playbackRate,
         src,
+        tiledLoop,
+        visualizationWidth,
     ]);
-    const audioWidth = mediaVisualizationWidth;
+    const audioWidth = visualizationWidth;
     const filmstripStyle = (0, react_1.useMemo)(() => {
         return {
             ...filmstripContainerStyle,
-            width: mediaVisualizationWidth,
-            marginLeft: premountWidth,
+            width: visualizationWidth,
         };
-    }, [mediaVisualizationWidth, premountWidth]);
+    }, [visualizationWidth]);
     const audioStyle = (0, react_1.useMemo)(() => {
         return {
             width: audioWidth,
             position: 'relative',
-            marginLeft: premountWidth,
         };
-    }, [audioWidth, premountWidth]);
-    return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: mediaStartFrame, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
+    }, [audioWidth]);
+    const segmentStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...outerStyle,
+            width: visualizationWidth,
+            flexShrink: 0,
+        };
+    }, [visualizationWidth]);
+    return (jsx_runtime_1.jsxs("div", { style: segmentStyle, children: [
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: mediaStartFrame, durationInFrames: durationInFrames, displayOffsetInFrames: (_a = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.displayOffsetInFrames) !== null && _a !== void 0 ? _a : 0, displayDurationInFrames: (_b = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.displayDurationInFrames) !== null && _b !== void 0 ? _b : durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, muted: muted, playbackRate: playbackRate, loopDisplay: tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.loopDisplay }) })
         ] }));
 };
+const getVisibleSegments = ({ displayDurationInFrames, displayOffsetInFrames, loopDisplay, }) => {
+    if (!loopDisplay ||
+        loopDisplay.numberOfTimes <= 1 ||
+        loopDisplay.durationInFrames <= 0) {
+        return [
+            {
+                key: 'single',
+                displayOffsetInFrames,
+                durationInFrames: displayDurationInFrames,
+                sourceOffsetInFrames: displayOffsetInFrames,
+            },
+        ];
+    }
+    return (0, timeline_utils_1.getLoopDisplaySegments)({
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDurationInFrames: loopDisplay.durationInFrames,
+    }).map((segment) => {
+        return {
+            key: `loop-${segment.loopIndex}`,
+            displayOffsetInFrames: segment.absoluteOffsetInFrames,
+            durationInFrames: segment.durationInFrames,
+            sourceOffsetInFrames: segment.loopOffsetInFrames,
+        };
+    });
+};
+const TimelineVideoInfoInner = ({ src, visualizationWidth, displayOffsetInFrames, displayDurationInFrames, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, volume, doesVolumeChange, muted, marginLeft, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
+    const pixelsPerFrame = visualizationWidth / displayDurationInFrames;
+    const loopWidth = loopDisplay
+        ? loopDisplay.durationInFrames * pixelsPerFrame
+        : null;
+    const shouldTileLoop = loopDisplay !== undefined &&
+        loopWidth !== null &&
+        loopWidth <= visualizationWidth;
+    const tiledLoop = (0, react_1.useMemo)(() => {
+        if (!shouldTileLoop || !loopDisplay || loopWidth === null) {
+            return null;
+        }
+        return {
+            displayDurationInFrames,
+            displayOffsetInFrames,
+            loopDisplay,
+            loopWidth,
+        };
+    }, [
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDisplay,
+        loopWidth,
+        shouldTileLoop,
+    ]);
+    const segments = (0, react_1.useMemo)(() => {
+        if (shouldTileLoop) {
+            return [];
+        }
+        return getVisibleSegments({
+            displayDurationInFrames,
+            displayOffsetInFrames,
+            loopDisplay,
+        });
+    }, [
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDisplay,
+        shouldTileLoop,
+    ]);
+    const getSegmentVolume = (segmentDisplayOffsetInFrames, segmentDurationInFrames) => {
+        if (typeof volume === 'number') {
+            return volume;
+        }
+        const values = volume.split(',');
+        return values
+            .slice(Math.max(0, Math.floor(segmentDisplayOffsetInFrames)), Math.min(values.length, Math.ceil(segmentDisplayOffsetInFrames + segmentDurationInFrames)))
+            .join(',');
+    };
+    return (jsx_runtime_1.jsx("div", { style: { display: 'flex', marginLeft, height: '100%' }, children: tiledLoop ? (jsx_runtime_1.jsx(TimelineVideoInfoSegment, { src: src, visualizationWidth: visualizationWidth, startMediaFrom: startMediaFrom, mediaFrameAtSequenceZero: mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: tiledLoop.loopDisplay.durationInFrames, sourceOffsetInFrames: 0, tiledLoop: tiledLoop, playbackRate: playbackRate, volume: volume, doesVolumeChange: doesVolumeChange, muted: muted, frozenMediaFrame: frozenMediaFrame, extendLastFrame: extendLastFrame })) : (segments.map((segment) => (jsx_runtime_1.jsx(TimelineVideoInfoSegment, { src: src, visualizationWidth: segment.durationInFrames * pixelsPerFrame, startMediaFrom: startMediaFrom, mediaFrameAtSequenceZero: mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: segment.durationInFrames, sourceOffsetInFrames: segment.sourceOffsetInFrames, tiledLoop: null, playbackRate: playbackRate, volume: getSegmentVolume(segment.sourceOffsetInFrames, segment.durationInFrames), doesVolumeChange: doesVolumeChange, muted: muted, frozenMediaFrame: frozenMediaFrame, extendLastFrame: extendLastFrame }, segment.key)))) }));
+};
 exports.TimelineVideoInfo = react_1.default.memo(TimelineVideoInfoInner);

package/dist/components/Timeline/TimelineViewport.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type TimelineRenderWindow = {
+    readonly left: number;
+    readonly width: number;
+};
+export declare const TimelineViewportContext: React.Context<TimelineRenderWindow | null>;
+export declare const getTimelineRenderWindow: (scrollable: HTMLDivElement) => TimelineRenderWindow;
+export declare const TimelineViewportProvider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly scrollable: React.RefObject<HTMLDivElement | null>;
+}>;
+export {};

package/dist/components/Timeline/TimelineViewport.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.TimelineViewportContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.TimelineViewportContext = (0, react_1.createContext)(null);
+const getTimelineRenderWindow = (scrollable) => {
+    const viewportWidth = scrollable.clientWidth;
+    if (viewportWidth === 0) {
+        return { left: 0, width: 0 };
+    }
+    // Move the render window half a viewport before the visible viewport reaches
+    // its right edge. This keeps at least half a viewport rendered ahead while
+    // retaining the three-viewport-wide window.
+    const currentSection = Math.floor((scrollable.scrollLeft + viewportWidth / 2) / viewportWidth);
+    const left = Math.max(0, (currentSection - 1) * viewportWidth);
+    return {
+        left,
+        width: viewportWidth * 3,
+    };
+};
+exports.getTimelineRenderWindow = getTimelineRenderWindow;
+const TimelineViewportProvider = ({ children, scrollable }) => {
+    const [renderWindow, setRenderWindow] = (0, react_1.useState)({
+        left: 0,
+        width: window.innerWidth * 3,
+    });
+    const update = (0, react_1.useCallback)(() => {
+        const element = scrollable.current;
+        if (!element) {
+            return;
+        }
+        const next = (0, exports.getTimelineRenderWindow)(element);
+        setRenderWindow((previous) => {
+            if (previous.left === next.left && previous.width === next.width) {
+                return previous;
+            }
+            return next;
+        });
+    }, [scrollable]);
+    (0, react_1.useLayoutEffect)(() => {
+        let element = null;
+        let resizeObserver = null;
+        const animationFrame = requestAnimationFrame(() => {
+            element = scrollable.current;
+            if (!element) {
+                return;
+            }
+            resizeObserver = new ResizeObserver(update);
+            resizeObserver.observe(element);
+            update();
+            element.addEventListener('scroll', update);
+        });
+        return () => {
+            cancelAnimationFrame(animationFrame);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            element === null || element === void 0 ? void 0 : element.removeEventListener('scroll', update);
+        };
+    }, [scrollable, update]);
+    return (jsx_runtime_1.jsx(exports.TimelineViewportContext.Provider, { value: renderWindow, children: children }));
+};
+exports.TimelineViewportProvider = TimelineViewportProvider;

package/dist/components/Timeline/TimelineVirtualization.d.ts

@@ -0,0 +1,22 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
+import React from 'react';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export type TimelineVirtualRow = {
+    readonly afterDropLineOffset: number;
+    readonly siblingIndex: number;
+    readonly track: TimelineTrackData;
+};
+type TimelineVirtualizationContextValue = {
+    readonly rows: readonly TimelineVirtualRow[];
+    readonly totalSize: number;
+    readonly tracksEnd: number;
+    readonly virtualItems: readonly VirtualItem[];
+};
+export declare const TimelineVirtualizationProvider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly hasBeenCut: boolean;
+    readonly isStill: boolean;
+    readonly timeline: readonly TimelineTrackData[];
+}>;
+export declare const useTimelineVirtualization: () => TimelineVirtualizationContextValue;
+export {};

package/dist/components/Timeline/TimelineVirtualization.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineVirtualization = exports.TimelineVirtualizationProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const use_timeline_height_1 = require("./use-timeline-height");
+const TimelineVirtualizationContext = (0, react_1.createContext)(null);
+const getSelectionTrackKey = (selection) => {
+    if (selection.type === 'guide') {
+        return null;
+    }
+    return (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selection.nodePathInfo);
+};
+const TimelineVirtualizationProvider = ({ children, hasBeenCut, isStill, timeline }) => {
+    const trackHeights = (0, use_timeline_height_1.useTimelineTrackHeights)({ timeline });
+    const { revealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const paddingStart = isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT;
+    const paddingEnd = timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
+        (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0);
+    const layout = (0, react_1.useMemo)(() => {
+        var _a;
+        var _b, _c;
+        const siblingIndexes = new Array(timeline.length);
+        const subtreeEndIndexes = new Array(timeline.length).fill(timeline.length);
+        const openTracks = [];
+        const siblingCounts = new Map();
+        for (let index = 0; index < timeline.length; index++) {
+            const { depth } = timeline[index];
+            while (openTracks.length > 0 &&
+                openTracks[openTracks.length - 1].depth >= depth) {
+                const completed = openTracks.pop();
+                subtreeEndIndexes[completed.index] = index;
+            }
+            const parentIndex = (_b = (_a = openTracks[openTracks.length - 1]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : null;
+            const siblingIndex = (_c = siblingCounts.get(parentIndex)) !== null && _c !== void 0 ? _c : 0;
+            siblingIndexes[index] = siblingIndex;
+            siblingCounts.set(parentIndex, siblingIndex + 1);
+            openTracks.push({ depth, index });
+        }
+        const offsets = new Array(timeline.length + 1);
+        offsets[0] = paddingStart;
+        for (let index = 0; index < trackHeights.length; index++) {
+            offsets[index + 1] = offsets[index] + trackHeights[index];
+        }
+        const rows = timeline.map((track, index) => ({
+            afterDropLineOffset: offsets[subtreeEndIndexes[index]] - offsets[index],
+            siblingIndex: siblingIndexes[index],
+            track,
+        }));
+        const rootTrackIndexes = new Map();
+        for (let index = 0; index < timeline.length; index++) {
+            const { nodePathInfo } = timeline[index];
+            if (nodePathInfo !== null) {
+                rootTrackIndexes.set((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo), index);
+            }
+        }
+        return {
+            rootTrackIndexes,
+            rows,
+            tracksEnd: offsets[offsets.length - 1],
+        };
+    }, [paddingStart, timeline, trackHeights]);
+    const selectedTrackIndexes = (0, react_1.useMemo)(() => {
+        const indexes = new Set();
+        if (selectedItems.length !== 1) {
+            return indexes;
+        }
+        for (const selectedItem of selectedItems) {
+            const key = getSelectionTrackKey(selectedItem);
+            const index = key === null ? undefined : layout.rootTrackIndexes.get(key);
+            if (index !== undefined) {
+                indexes.add(index);
+            }
+        }
+        return indexes;
+    }, [layout.rootTrackIndexes, selectedItems]);
+    const trackHeightsRef = (0, react_1.useRef)(trackHeights);
+    trackHeightsRef.current = trackHeights;
+    const timelineRef = (0, react_1.useRef)(timeline);
+    timelineRef.current = timeline;
+    const estimateSize = (0, react_1.useCallback)((index) => {
+        var _a;
+        return (_a = trackHeightsRef.current[index]) !== null && _a !== void 0 ? _a : 0;
+    }, []);
+    const getItemKey = (0, react_1.useCallback)((index) => {
+        var _a;
+        var _b;
+        return (_b = (_a = timelineRef.current[index]) === null || _a === void 0 ? void 0 : _a.sequence.id) !== null && _b !== void 0 ? _b : index;
+    }, []);
+    const rangeExtractor = (0, react_1.useCallback)((range) => {
+        const indexes = new Set((0, react_virtual_1.defaultRangeExtractor)(range));
+        for (const selectedIndex of selectedTrackIndexes) {
+            indexes.add(selectedIndex);
+        }
+        return [...indexes].sort((a, b) => a - b);
+    }, [selectedTrackIndexes]);
+    const getScrollElement = (0, react_1.useCallback)(() => timeline_refs_1.timelineVerticalScroll.current, []);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: timeline.length,
+        estimateSize,
+        getItemKey,
+        getScrollElement,
+        overscan: 8,
+        paddingEnd,
+        paddingStart,
+        rangeExtractor,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        virtualizer.measure();
+    }, [trackHeights, virtualizer]);
+    (0, react_1.useEffect)(() => {
+        if (revealRequest === null) {
+            return;
+        }
+        const key = getSelectionTrackKey(revealRequest.item);
+        const index = key === null ? undefined : layout.rootTrackIndexes.get(key);
+        if (index !== undefined) {
+            virtualizer.scrollToIndex(index, { align: 'center' });
+        }
+    }, [layout.rootTrackIndexes, revealRequest, virtualizer]);
+    const virtualItems = virtualizer.getVirtualItems();
+    const value = (0, react_1.useMemo)(() => ({
+        rows: layout.rows,
+        totalSize: layout.tracksEnd + paddingEnd,
+        tracksEnd: layout.tracksEnd,
+        virtualItems,
+    }), [layout.rows, layout.tracksEnd, paddingEnd, virtualItems]);
+    return (jsx_runtime_1.jsx(TimelineVirtualizationContext.Provider, { value: value, children: children }));
+};
+exports.TimelineVirtualizationProvider = TimelineVirtualizationProvider;
+const useTimelineVirtualization = () => {
+    const context = (0, react_1.useContext)(TimelineVirtualizationContext);
+    if (context === null) {
+        throw new Error('useTimelineVirtualization must be used inside TimelineVirtualizationProvider');
+    }
+    return context;
+};
+exports.useTimelineVirtualization = useTimelineVirtualization;