@remotion/studio 4.0.513 → 4.0.514

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -49,15 +49,16 @@ const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const modals_1 = require("../../state/modals");
 const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../../state/transform-3d-mode");
-const call_api_1 = require("../call-api");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
+const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const reorder_sequence_api_1 = require("../reorder-sequence-api");
 const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
@@ -134,7 +135,9 @@ const sequenceReorderLineBase = {
 };
 const sequenceReorderAfterLineWrapper = {
     height: 0,
-    position: 'relative',
+    left: 0,
+    position: 'absolute',
+    right: 0,
 };
 const sequenceReorderAfterLine = {
     ...sequenceReorderLineBase,
@@ -173,7 +176,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
+const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
     var _a, _b;
     var _c, _d, _e, _f;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
@@ -187,7 +190,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
@@ -257,7 +260,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             }
         }
         try {
-            const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
+            const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
                 nodes: [
                     {
                         fileName: validatedLocation.source,
@@ -428,7 +431,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         setSequenceDropIndicator(null);
         currentSequenceDrag = null;
         try {
-            const result = await (0, call_api_1.callApi)('/api/reorder-sequence', {
+            const result = await (0, reorder_sequence_api_1.reorderSequence)({
                 fileName: validatedLocation.source,
                 sourceNodePath: dropTarget.dragData.nodePath,
                 targetNodePath: nodePath,
@@ -905,7 +908,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, isFieldRow: false, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, isFieldRow: false, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                     ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
@@ -914,12 +917,15 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
-    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, trackRow] })) : (trackRow);
+    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, trackRow, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: {
+                    ...sequenceReorderAfterLineWrapper,
+                    top: afterDropLineOffset,
+                }, children: jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLine }) })) : null] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null, children, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLineWrapper, children: jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLine }) })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineSequenceItem = react_1.default.memo(TimelineSequenceItemInner);

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

@@ -27,6 +27,7 @@ export declare const TimelineSequencePropItem: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
-    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
+    readonly keyframeControlsMode: TimelineKeyframeControlsMode;
+    readonly runtimeValue: unknown;
 }>;
 export {};

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -236,7 +236,7 @@ const TimelineSequenceKeyframedValueUnmemoized = (props) => {
     return props.sourceFrame !== undefined ? (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...valueProps, sourceFrame: props.sourceFrame })) : (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtCurrentFrame, { ...valueProps, keyframeDisplayOffset: props.keyframeDisplayOffset }));
 };
 exports.TimelineSequenceKeyframedValue = react_1.default.memo(TimelineSequenceKeyframedValueUnmemoized);
-const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
+const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode, runtimeValue, }) => {
     var _a;
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -356,7 +356,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     if (propStatus === null) {
         return null;
     }
-    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
+    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus, field: field, runtimeValue: runtimeValue, validatedLocation: validatedLocation }));
     if (field.typeName === 'asset' && field.key === 'src') {
         return (jsx_runtime_1.jsx("div", { style: {
                 ...inlineSourceFieldRow,
@@ -364,7 +364,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 ...style,
             }, children: fieldValue }));
     }
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: fieldValue }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: fieldValue }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -543,21 +543,44 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         ? selectedSequenceItems.map((item) => item.nodePathInfo)
         : [draggedNodePathInfo];
     const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
-    const targets = new Map();
-    const includedKeyframeNodePaths = new Set();
     const sequencesById = new Map(sequences.map((sequence) => [sequence.id, sequence]));
-    for (const nodePathInfo of targetNodePathInfos) {
+    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;
         }

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

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;