@remotion/studio 4.0.513 → 4.0.515

package/dist/components/Timeline/TimelineTracks.js

@@ -38,16 +38,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTrack_1 = require("./TimelineTrack");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const content = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,
+    position: 'relative',
 };
 const timelineContent = {
     minHeight: '100%',
 };
-const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
+const TimelineTracksInner = ({ hasBeenCut }) => {
+    const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,
@@ -55,7 +57,12 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
-            jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => (jsx_runtime_1.jsx(TimelineTrack_1.TimelineTrack, { track: track }, track.sequence.id)))] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+            jsx_runtime_1.jsx("div", { style: { ...content, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
+                        height: virtualItem.size,
+                        left: timeline_layout_1.TIMELINE_PADDING,
+                        position: 'absolute',
+                        right: timeline_layout_1.TIMELINE_PADDING,
+                        top: virtualItem.start,
+                    }, children: jsx_runtime_1.jsx(TimelineTrack_1.TimelineTrack, { track: rows[virtualItem.index].track }) }, virtualItem.key))) }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -198,7 +198,7 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
         serializeZ,
     ]);
     if (percent === null) {
-        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
+        return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin", formattedValue: false }));
     }
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

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,8 +58,10 @@ 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 resolvedSrc = remotion_1.Internals.usePreload(src);
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
@@ -69,15 +70,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 +82,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 +125,7 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
             durationInFrames,
             playbackRate,
             fps,
-            loopDisplay,
+            loopDisplay: undefined,
             frozenMediaFrame,
         });
         if (times.type === 'frozen') {
@@ -147,13 +144,12 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
                     timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
                     return [times.timestampInSeconds];
                 },
-                src,
+                src: resolvedSrc,
                 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,
@@ -185,42 +181,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 +226,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 +235,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 +258,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,
+            src: resolvedSrc,
             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 +300,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 +309,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 +337,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 +355,112 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMe
         extendLastFrame,
         fps,
         frozenMediaFrame,
-        loopDisplay,
-        mediaNaturalWidth,
-        mediaVisualizationWidth,
         mediaStartFrame,
         playbackRate,
+        resolvedSrc,
         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 {};