@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -60,7 +60,7 @@ const baseStyle = {
     zIndex: 1,
     touchAction: 'none',
 };
-const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, }) => {
+const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, isDescendant, }) => {
     var _a;
     const status = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
     if (status === null || status === undefined || !status.canUpdate) {
@@ -69,8 +69,18 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
     const sequenceSchema = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.schema;
     const sequenceKeyframes = sequenceSchema === undefined
         ? []
-        : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed'
-            ? [{ fieldKey, schema: sequenceSchema, status: propStatus }]
+        : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
+            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
+            ? [
+                {
+                    fileName: nodePath.absolutePath,
+                    fieldKey,
+                    isDescendant,
+                    nodePath,
+                    schema: sequenceSchema,
+                    status: propStatus,
+                },
+            ]
             : []);
     const effectKeyframes = status.effects.flatMap((effectStatus) => {
         var _a;
@@ -81,11 +91,15 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
         if (effectSchema === undefined) {
             return [];
         }
-        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed'
+        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
+            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
             ? [
                 {
                     effectIndex: effectStatus.effectIndex,
+                    fileName: nodePath.absolutePath,
                     fieldKey,
+                    isDescendant,
+                    nodePath,
                     schema: effectSchema,
                     status: propStatus,
                 },
@@ -94,7 +108,21 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
     });
     return { effectKeyframes, sequenceKeyframes };
 };
-const shiftKeyframedStatus = ({ status, deltaFrames, }) => {
+const shiftKeyframedStatus = ({ status, deltaFrames, isDescendant, }) => {
+    if (isDescendant) {
+        const adjustment = status.keyframeDisplayOffsetAdjustment;
+        if (adjustment === null) {
+            throw new Error('Expected descendant keyframes to use an outer frame clock');
+        }
+        return {
+            ...status,
+            keyframeDisplayOffsetAdjustment: null,
+            keyframes: status.keyframes.map((keyframe) => ({
+                ...keyframe,
+                frame: keyframe.frame + adjustment,
+            })),
+        };
+    }
     return {
         ...status,
         keyframes: status.keyframes.map((keyframe) => ({
@@ -352,21 +380,27 @@ const getTimelineSequenceFromDragKeyframeMoves = ({ targets, deltaFrames, }) =>
     }
     return {
         sequenceKeyframes: targets.flatMap((target) => target.sequenceKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
-            fileName: target.fileName,
-            nodePath: target.nodePath,
+            fileName: keyframeTarget.fileName,
+            nodePath: keyframeTarget.nodePath,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
             toFrame: keyframe.frame + deltaFrames,
             schema: keyframeTarget.schema,
+            keyframeDisplayOffsetAdjustmentDelta: keyframeTarget.isDescendant
+                ? -deltaFrames
+                : undefined,
         })))),
         effectKeyframes: targets.flatMap((target) => target.effectKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
-            fileName: target.fileName,
-            nodePath: target.nodePath,
+            fileName: keyframeTarget.fileName,
+            nodePath: keyframeTarget.nodePath,
             effectIndex: keyframeTarget.effectIndex,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
             toFrame: keyframe.frame + deltaFrames,
             schema: keyframeTarget.schema,
+            keyframeDisplayOffsetAdjustmentDelta: keyframeTarget.isDescendant
+                ? -deltaFrames
+                : undefined,
         })))),
     };
 };
@@ -509,29 +543,86 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         ? selectedSequenceItems.map((item) => item.nodePathInfo)
         : [draggedNodePathInfo];
     const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
-    const targets = new Map();
-    for (const nodePathInfo of targetNodePathInfos) {
+    const sequencesById = new Map(sequences.map((sequence) => [sequence.id, sequence]));
+    const selectedSequences = targetNodePathInfos.flatMap((nodePathInfo) => {
         const track = findSequenceTrack({ tracks, nodePathInfo });
         const originalSequence = track
-            ? sequences.find((sequence) => sequence.id === track.sequence.id)
-            : null;
-        if (!track ||
-            !track.nodePathInfo ||
-            !originalSequence ||
-            !isFromDraggableSequence(originalSequence)) {
+            ? sequencesById.get(track.sequence.id)
+            : undefined;
+        if (!(track === null || track === void 0 ? void 0 : track.nodePathInfo) || !originalSequence) {
+            return [];
+        }
+        return [
+            {
+                nodePath: track.nodePathInfo.sequenceSubscriptionKey,
+                originalSequence,
+            },
+        ];
+    });
+    if (selectedSequences.length !== targetNodePathInfos.length) {
+        return null;
+    }
+    const selectedSequenceIds = new Set(selectedSequences.map(({ originalSequence }) => originalSequence.id));
+    const sequencesWithoutSelectedAncestors = selectedSequences.filter(({ originalSequence }) => {
+        var _a;
+        var _b;
+        let parentId = originalSequence.parent;
+        while (parentId !== null) {
+            if (selectedSequenceIds.has(parentId)) {
+                return false;
+            }
+            parentId = (_b = (_a = sequencesById.get(parentId)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+        }
+        return true;
+    });
+    const targets = new Map();
+    const includedKeyframeNodePaths = new Set();
+    for (const { nodePath, originalSequence, } of sequencesWithoutSelectedAncestors) {
+        if (!isFromDraggableSequence(originalSequence)) {
             return null;
         }
-        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         if (!canUpdateFrom({ propStatuses, nodePath })) {
             return null;
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
-            const { effectKeyframes, sequenceKeyframes } = getKeyframedSequenceDragTargets({
-                nodePath,
-                sequence: originalSequence,
-                propStatuses,
+            const descendants = sequences.filter((candidate) => {
+                var _a;
+                var _b;
+                let parentId = candidate.id;
+                while (parentId !== null) {
+                    if (parentId === originalSequence.id) {
+                        return true;
+                    }
+                    parentId = (_b = (_a = sequencesById.get(parentId)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+                }
+                return false;
             });
+            const descendantKeyframes = descendants.flatMap((sequence) => {
+                var _a;
+                const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+                const descendantNodePath = overrideId
+                    ? overrideIdsToNodePaths[overrideId]
+                    : undefined;
+                if (descendantNodePath === undefined) {
+                    return [];
+                }
+                const descendantNodePathKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(descendantNodePath);
+                if (includedKeyframeNodePaths.has(descendantNodePathKey)) {
+                    return [];
+                }
+                includedKeyframeNodePaths.add(descendantNodePathKey);
+                return [
+                    getKeyframedSequenceDragTargets({
+                        nodePath: descendantNodePath,
+                        sequence,
+                        propStatuses,
+                        isDescendant: sequence.id !== originalSequence.id,
+                    }),
+                ];
+            });
+            const effectKeyframes = descendantKeyframes.flatMap((descendant) => descendant.effectKeyframes);
+            const sequenceKeyframes = descendantKeyframes.flatMap((descendant) => descendant.sequenceKeyframes);
             targets.set(key, {
                 canSnapToTimelineStart: originalSequence.parent === null,
                 effectKeyframes,
@@ -558,9 +649,17 @@ const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
 const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides, targets, }) => {
     for (const target of targets) {
         clearDragOverrides(target.nodePath);
-        const effectIndexes = new Set(target.effectKeyframes.map((keyframe) => keyframe.effectIndex));
-        for (const effectIndex of effectIndexes) {
-            clearEffectDragOverrides(target.nodePath, effectIndex);
+        for (const keyframeTarget of target.sequenceKeyframes) {
+            clearDragOverrides(keyframeTarget.nodePath);
+        }
+        const clearedEffects = new Set();
+        for (const keyframeTarget of target.effectKeyframes) {
+            const key = `${(0, studio_shared_1.stringifySequenceSubscriptionKey)(keyframeTarget.nodePath)}:${keyframeTarget.effectIndex}`;
+            if (clearedEffects.has(key)) {
+                continue;
+            }
+            clearedEffects.add(key);
+            clearEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex);
         }
     }
 };
@@ -916,20 +1015,22 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 });
                 latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
                 for (const keyframeTarget of target.sequenceKeyframes) {
-                    latestRef.current.setDragOverrides(target.nodePath, keyframeTarget.fieldKey, {
+                    latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
                         type: 'keyframed',
                         status: shiftKeyframedStatus({
                             status: keyframeTarget.status,
                             deltaFrames,
+                            isDescendant: keyframeTarget.isDescendant,
                         }),
                     });
                 }
                 for (const keyframeTarget of target.effectKeyframes) {
-                    latestRef.current.setEffectDragOverrides(target.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
+                    latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
                         type: 'keyframed',
                         status: shiftKeyframedStatus({
                             status: keyframeTarget.status,
                             deltaFrames,
+                            isDescendant: keyframeTarget.isDescendant,
                         }),
                     });
                 }

package/dist/components/Timeline/TimelineSlider.js

@@ -11,12 +11,21 @@ const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const container = {
+const clippingContainer = {
     position: 'absolute',
-    bottom: 0,
     top: 0,
+    left: 0,
+    width: '100%',
+    height: '100vh',
+    overflow: 'hidden',
     pointerEvents: 'none',
 };
+const slider = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+};
 const PLAYHEAD_LINE_WIDTH = 1;
 const line = {
     height: '100vh',
@@ -25,9 +34,9 @@ const line = {
     backgroundColor: colors_1.TIMELINE_PLAYHEAD_COLOR,
 };
 const PLAYHEAD_CENTER_OFFSET = PLAYHEAD_LINE_WIDTH / 2;
-const getTimelineSliderTransform = ({ durationInFrames, frame, width, }) => {
+const getTimelineSliderTransform = ({ durationInFrames, frame, scrollLeft, width, }) => {
     const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, durationInFrames, width);
-    return `translateX(${left - PLAYHEAD_CENTER_OFFSET}px)`;
+    return `translateX(${left - scrollLeft - PLAYHEAD_CENTER_OFFSET}px)`;
 };
 exports.redrawTimelineSliderFast = (0, react_1.createRef)();
 const TimelineSlider = () => {
@@ -57,14 +66,30 @@ const TimelineSliderInner = () => {
         var _a;
         const el = ref.current;
         const measuredWidth = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-        if (!el || measuredWidth === undefined || measuredWidth === 0) {
+        const scrollable = timeline_refs_1.scrollableRef.current;
+        if (!el ||
+            !scrollable ||
+            measuredWidth === undefined ||
+            measuredWidth === 0) {
             return;
         }
-        el.style.transform = getTimelineSliderTransform({
-            durationInFrames: videoConfig.durationInFrames,
-            frame: timelinePosition,
-            width: measuredWidth,
-        });
+        const draw = (frame) => {
+            el.style.transform = getTimelineSliderTransform({
+                durationInFrames: videoConfig.durationInFrames,
+                frame,
+                scrollLeft: scrollable.scrollLeft,
+                width: measuredWidth,
+            });
+        };
+        draw(timelinePosition);
+        // Read the frame imperatively on scroll: during edge auto-scrolling, the
+        // scroll event can fire before React has committed the seek, and drawing
+        // with the stale `timelinePosition` closure makes the playhead flicker.
+        const onScroll = () => draw((0, imperative_state_1.getCurrentFrame)());
+        scrollable.addEventListener('scroll', onScroll);
+        return () => {
+            scrollable.removeEventListener('scroll', onScroll);
+        };
     }, [
         timelinePosition,
         videoConfig.durationInFrames,
@@ -74,8 +99,8 @@ const TimelineSliderInner = () => {
     (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
         return {
             draw: (frame, width) => {
-                var _a;
-                var _b;
+                var _a, _b;
+                var _c, _d;
                 const { current } = ref;
                 if (!current) {
                     throw new Error('unexpectedly did not have ref to timelineslider');
@@ -83,29 +108,13 @@ const TimelineSliderInner = () => {
                 current.style.transform = getTimelineSliderTransform({
                     durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
                     frame,
-                    width: (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
+                    scrollLeft: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _c !== void 0 ? _c : 0,
+                    width: (_d = width !== null && width !== void 0 ? width : (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _d !== void 0 ? _d : 0,
                 });
             },
         };
     }, []);
-    (0, react_1.useEffect)(() => {
-        const currentRef = ref.current;
-        if (!currentRef) {
-            return;
-        }
-        const { current } = timeline_refs_1.timelineVerticalScroll;
-        if (!current) {
-            return;
-        }
-        const onScroll = () => {
-            currentRef.style.top = current.scrollTop + 'px';
-        };
-        current.addEventListener('scroll', onScroll);
-        return () => {
-            current.removeEventListener('scroll', onScroll);
-        };
-    }, []);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
-            jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
-        ] }));
+    return (jsx_runtime_1.jsx("div", { style: clippingContainer, children: jsx_runtime_1.jsxs("div", { ref: ref, style: slider, children: [
+                jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
+            ] }) }));
 };

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -53,16 +53,6 @@ const container = {
     top: 0,
     borderBottom: `${timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM}px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const tick = {
-    width: 1,
-    backgroundColor: colors_1.WHITE_ALPHA_15,
-    height: 20,
-    position: 'absolute',
-};
-const secondTick = {
-    ...tick,
-    height: 15,
-};
 const TICK_LABEL_FONT_SIZE = 12;
 const TICK_LABEL_MARGIN_LEFT = 8;
 const TICK_LABEL_MIN_GAP = 16;
@@ -70,12 +60,6 @@ const MIN_SPACING_BETWEEN_FRAME_TICKS_PX = 5;
 const MIN_SPACING_BETWEEN_TIME_TICKS_PX = 16;
 const MIN_SPACING_BETWEEN_MEDIUM_FRAME_TICKS_PX = 24;
 const MIN_SPACING_BETWEEN_MEDIUM_TIME_TICKS_PX = 48;
-const tickLabel = {
-    fontSize: TICK_LABEL_FONT_SIZE,
-    marginLeft: TICK_LABEL_MARGIN_LEFT,
-    marginTop: 7,
-    color: colors_1.LIGHT_TEXT,
-};
 const timeValue = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     position: 'absolute',
@@ -205,103 +189,111 @@ const TimelineTimeIndicators = () => {
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
 const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, durationInFrames, fps }) => {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const currentRef = ref.current;
-        if (!currentRef) {
+    const canvasRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const canvas = canvasRef.current;
+        const scrollable = timeline_refs_1.scrollableRef.current;
+        if (!canvas || !scrollable) {
             return;
         }
-        const { current } = timeline_refs_1.timelineVerticalScroll;
-        if (!current) {
+        const context = canvas.getContext('2d');
+        if (!context) {
             return;
         }
-        const onScroll = () => {
-            currentRef.style.top = current.scrollTop + 'px';
-        };
-        current.addEventListener('scroll', onScroll);
-        return () => {
-            current.removeEventListener('scroll', onScroll);
-        };
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            width: windowWidth,
-            overflow: 'hidden',
-            pointerEvents: 'none',
-        };
-    }, [windowWidth]);
-    const ticks = (0, react_1.useMemo)(() => {
         const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
         const maxTickLabelWidth = (0, render_frame_1.renderFrame)(durationInFrames - 1, fps).length *
             TICK_LABEL_FONT_SIZE *
             0.6;
-        const minSpacingBetweenTickLabelsPx = TICK_LABEL_MARGIN_LEFT + maxTickLabelWidth + TICK_LABEL_MIN_GAP;
-        const seconds = Math.floor(durationInFrames / fps);
-        const rawSecondMarkerEveryNth = minSpacingBetweenTickLabelsPx / (frameInterval * fps);
         const tickScale = (0, exports.getTimelineTickScale)({
             fps,
             frameInterval,
-            rawSecondMarkerEveryNth,
+            rawSecondMarkerEveryNth: (TICK_LABEL_MARGIN_LEFT + maxTickLabelWidth + TICK_LABEL_MIN_GAP) /
+                (frameInterval * fps),
         });
-        // Labeled ticks use human-friendly time intervals.
-        const secondTicks = [];
-        for (let index = 0; index < seconds; index += tickScale.labelEverySeconds) {
-            secondTicks.push({
-                frame: index * fps,
-                style: {
-                    ...secondTick,
-                    left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
-                },
-                showTime: index > 0,
-            });
-        }
-        const hasSecondTick = new Set(secondTicks.map((t) => t.frame));
-        const subdivisionTicks = [];
-        const { minorTickEvery, mediumTickEvery } = tickScale;
-        if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'frames') {
-            for (let frame = 0; frame < durationInFrames; frame += minorTickEvery.interval) {
-                if (hasSecondTick.has(frame)) {
-                    continue;
-                }
-                subdivisionTicks.push({
-                    frame,
-                    style: {
-                        ...tick,
-                        left: frameInterval * frame + timeline_layout_1.TIMELINE_PADDING,
-                        height: (Number.isInteger(fps) && frame % fps === 0) ||
-                            ((mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'frames' &&
-                                frame % mediumTickEvery.interval === 0)
-                            ? 5
-                            : 2,
-                    },
-                    showTime: false,
-                });
+        const draw = () => {
+            const { clientWidth: width, scrollLeft } = scrollable;
+            const pixelRatio = window.devicePixelRatio;
+            const canvasWidth = Math.ceil(width * pixelRatio);
+            const canvasHeight = exports.TIMELINE_TIME_INDICATOR_HEIGHT * pixelRatio;
+            if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
+                canvas.width = canvasWidth;
+                canvas.height = canvasHeight;
+                canvas.style.width = `${width}px`;
+                canvas.style.height = `${exports.TIMELINE_TIME_INDICATOR_HEIGHT}px`;
             }
-        }
-        if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'seconds') {
-            for (let second = 0; second < seconds; second += minorTickEvery.interval) {
+            context.resetTransform();
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            context.scale(pixelRatio, pixelRatio);
+            context.fillStyle = colors_1.WHITE_ALPHA_15;
+            const firstFrame = Math.max(0, Math.floor((scrollLeft - timeline_layout_1.TIMELINE_PADDING) / frameInterval));
+            const lastFrame = Math.min(durationInFrames - 1, Math.ceil((scrollLeft + width - timeline_layout_1.TIMELINE_PADDING) / frameInterval));
+            const xForFrame = (frame) => Math.round(frameInterval * frame + timeline_layout_1.TIMELINE_PADDING - scrollLeft) + 0.5;
+            const drawTick = (frame, height) => {
+                const x = xForFrame(frame);
+                context.fillRect(x, 0, 1, height);
+            };
+            const firstLabelSecond = Math.ceil(firstFrame / fps / tickScale.labelEverySeconds) *
+                tickScale.labelEverySeconds;
+            const seconds = Math.floor(durationInFrames / fps);
+            for (let second = firstLabelSecond; second < seconds && second * fps <= lastFrame; second += tickScale.labelEverySeconds) {
                 const frame = second * fps;
-                if (hasSecondTick.has(frame)) {
-                    continue;
+                drawTick(frame, 15);
+                if (second > 0) {
+                    context.fillStyle = colors_1.LIGHT_TEXT;
+                    context.font = `${TICK_LABEL_FONT_SIZE}px ${getComputedStyle(canvas).fontFamily}`;
+                    context.textBaseline = 'top';
+                    context.fillText((0, render_frame_1.renderFrame)(frame, fps), xForFrame(frame) + TICK_LABEL_MARGIN_LEFT, 7);
+                    context.fillStyle = colors_1.WHITE_ALPHA_15;
                 }
-                subdivisionTicks.push({
-                    frame,
-                    style: {
-                        ...tick,
-                        left: frameInterval * frame + timeline_layout_1.TIMELINE_PADDING,
-                        height: (mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'seconds' &&
-                            second % mediumTickEvery.interval === 0
-                            ? 5
-                            : 2,
-                    },
-                    showTime: false,
-                });
             }
-        }
-        return [...secondTicks, ...subdivisionTicks];
+            const { minorTickEvery, mediumTickEvery } = tickScale;
+            if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'frames') {
+                const firstTick = Math.ceil(firstFrame / minorTickEvery.interval) *
+                    minorTickEvery.interval;
+                for (let frame = firstTick; frame <= lastFrame; frame += minorTickEvery.interval) {
+                    if (frame % (tickScale.labelEverySeconds * fps) === 0) {
+                        continue;
+                    }
+                    drawTick(frame, (Number.isInteger(fps) && frame % fps === 0) ||
+                        ((mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'frames' &&
+                            frame % mediumTickEvery.interval === 0)
+                        ? 5
+                        : 2);
+                }
+            }
+            if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'seconds') {
+                const firstSecond = Math.ceil(firstFrame / fps / minorTickEvery.interval) *
+                    minorTickEvery.interval;
+                for (let second = firstSecond; second < seconds && second * fps <= lastFrame; second += minorTickEvery.interval) {
+                    if (second % tickScale.labelEverySeconds === 0) {
+                        continue;
+                    }
+                    drawTick(second * fps, (mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'seconds' &&
+                        second % mediumTickEvery.interval === 0
+                        ? 5
+                        : 2);
+                }
+            }
+        };
+        const onScroll = () => {
+            draw();
+        };
+        const resizeObserver = new ResizeObserver(draw);
+        draw();
+        scrollable.addEventListener('scroll', onScroll);
+        resizeObserver.observe(scrollable);
+        return () => {
+            scrollable.removeEventListener('scroll', onScroll);
+            resizeObserver.disconnect();
+        };
     }, [durationInFrames, fps, windowWidth]);
-    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
-            return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
-        }) }));
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            width: windowWidth,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+        };
+    }, [windowWidth]);
+    return (jsx_runtime_1.jsx("div", { style: style, children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, style: { position: 'absolute', top: 0, left: 0 } }) }));
 });

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTracks: React.NamedExoticComponent<{
-    readonly timeline: TimelineTrackData[];
     readonly hasBeenCut: boolean;
 }>;

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: [