@remotion/studio 4.0.481 → 4.0.483

package/dist/components/Timeline/EasingEditorModal.js

@@ -37,9 +37,12 @@ const PRESET_PREVIEW_HEIGHT = 30;
 const PRESET_PREVIEW_PADDING = 5;
 const PRESET_PREVIEW_Y_MIN = -0.35;
 const PRESET_PREVIEW_Y_MAX = 1.45;
+const DEFAULT_DURATION_REST_THRESHOLD = 0.02;
 const DEFAULT_SPRING_EASING = {
     type: 'spring',
+    allowTail: true,
     damping: 10,
+    durationRestThreshold: DEFAULT_DURATION_REST_THRESHOLD,
     mass: 1,
     overshootClamping: false,
     stiffness: 100,
@@ -54,14 +57,22 @@ const EDITOR_EASING_PRESETS = [
 ];
 const SPRING_LIMITS = {
     damping: { min: 1, max: 200, step: 1 },
+    durationRestThreshold: { min: 0.001, max: 0.5, step: 0.001 },
     mass: { min: 0.1, max: 20, step: 0.1 },
     stiffness: { min: 1, max: 1000, step: 1 },
 };
 const SPRING_DECIMAL_PLACES = {
     damping: 0,
+    durationRestThreshold: 3,
     mass: 2,
     stiffness: 0,
 };
+const SPRING_FALLBACKS = {
+    damping: DEFAULT_SPRING_EASING.damping,
+    durationRestThreshold: DEFAULT_DURATION_REST_THRESHOLD,
+    mass: DEFAULT_SPRING_EASING.mass,
+    stiffness: DEFAULT_SPRING_EASING.stiffness,
+};
 const inlineContainer = {
     width: '100%',
     minWidth: 0,
@@ -186,7 +197,11 @@ const sanitizeSpringValue = (value, key, fallback) => {
 };
 const sanitizeSpring = (spring) => ({
     type: 'spring',
+    allowTail: spring.allowTail,
     damping: sanitizeSpringValue(spring.damping, 'damping', DEFAULT_SPRING_EASING.damping),
+    durationRestThreshold: spring.durationRestThreshold === null
+        ? null
+        : sanitizeSpringValue(spring.durationRestThreshold, 'durationRestThreshold', DEFAULT_DURATION_REST_THRESHOLD),
     mass: sanitizeSpringValue(spring.mass, 'mass', DEFAULT_SPRING_EASING.mass),
     overshootClamping: spring.overshootClamping,
     stiffness: sanitizeSpringValue(spring.stiffness, 'stiffness', DEFAULT_SPRING_EASING.stiffness),
@@ -210,6 +225,7 @@ const formatNumberWithDecimalPlaces = (decimalPlaces) => (value) => {
 };
 const springFormatters = {
     damping: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.damping),
+    durationRestThreshold: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.durationRestThreshold),
     mass: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.mass),
     stiffness: formatNumberWithDecimalPlaces(SPRING_DECIMAL_PLACES.stiffness),
 };
@@ -225,7 +241,9 @@ const areEasingsEqual = (first, second) => {
             return true;
         case 'spring':
             return (second.type === 'spring' &&
+                first.allowTail === second.allowTail &&
                 first.damping === second.damping &&
+                first.durationRestThreshold === second.durationRestThreshold &&
                 first.mass === second.mass &&
                 first.overshootClamping === second.overshootClamping &&
                 first.stiffness === second.stiffness);
@@ -295,6 +313,7 @@ const presetPreviewYToSvg = (value) => PRESET_PREVIEW_PADDING +
         (PRESET_PREVIEW_Y_MAX - PRESET_PREVIEW_Y_MIN)) *
         (PRESET_PREVIEW_HEIGHT - PRESET_PREVIEW_PADDING * 2);
 const getEasingFunction = (easing) => {
+    var _a, _b;
     switch (easing.type) {
         case 'linear':
             return remotion_1.Easing.linear;
@@ -302,7 +321,9 @@ const getEasingFunction = (easing) => {
             return remotion_1.Easing.bezier(easing.x1, easing.y1, easing.x2, easing.y2);
         case 'spring':
             return remotion_1.Easing.spring({
+                allowTail: (_a = easing.allowTail) !== null && _a !== void 0 ? _a : undefined,
                 damping: easing.damping,
+                durationRestThreshold: (_b = easing.durationRestThreshold) !== null && _b !== void 0 ? _b : undefined,
                 mass: easing.mass,
                 overshootClamping: easing.overshootClamping,
                 stiffness: easing.stiffness,
@@ -374,6 +395,7 @@ const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
+    var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
@@ -532,7 +554,7 @@ const EasingEditor = ({ state, renderHeader }) => {
     const setSpringNumber = (0, react_1.useCallback)((key, value, commit) => {
         const next = {
             ...springRef.current,
-            [key]: sanitizeSpringValue(value, key, DEFAULT_SPRING_EASING[key]),
+            [key]: sanitizeSpringValue(value, key, SPRING_FALLBACKS[key]),
         };
         const version = setSpringAndPreview(next);
         if (commit) {
@@ -547,6 +569,15 @@ const EasingEditor = ({ state, renderHeader }) => {
         const version = setSpringAndPreview(next);
         commitEasing(serializeSpring(next), version);
     }, [commitEasing, setSpringAndPreview]);
+    const setAllowTail = (0, react_1.useCallback)(() => {
+        var _a;
+        const next = {
+            ...springRef.current,
+            allowTail: !((_a = springRef.current.allowTail) !== null && _a !== void 0 ? _a : false),
+        };
+        const version = setSpringAndPreview(next);
+        commitEasing(serializeSpring(next), version);
+    }, [commitEasing, setSpringAndPreview]);
     const switchMode = (0, react_1.useCallback)((nextMode) => {
         setMode(nextMode);
         if (mode === nextMode || previewServerState.type !== 'connected') {
@@ -647,8 +678,11 @@ const EasingEditor = ({ state, renderHeader }) => {
         return `M ${startPoint.x} ${startPoint.y} C ${firstHandle.x} ${firstHandle.y}, ${secondHandle.x} ${secondHandle.y}, ${endPoint.x} ${endPoint.y}`;
     }, [endPoint, firstHandle, secondHandle, startPoint]);
     const springPath = (0, react_1.useMemo)(() => {
+        var _a, _b;
         const easing = remotion_1.Easing.spring({
+            allowTail: (_a = spring.allowTail) !== null && _a !== void 0 ? _a : undefined,
             damping: spring.damping,
+            durationRestThreshold: (_b = spring.durationRestThreshold) !== null && _b !== void 0 ? _b : undefined,
             mass: spring.mass,
             overshootClamping: spring.overshootClamping,
             stiffness: spring.stiffness,
@@ -711,8 +745,12 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Mass" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.mass, status: "ok", onValueChange: (value) => setSpringNumber('mass', value, false), onValueChangeEnd: (value) => setSpringNumber('mass', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.mass.min, max: SPRING_LIMITS.mass.max, step: SPRING_LIMITS.mass.step, formatter: springFormatters.mass, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.mass, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Stiffness" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.stiffness, status: "ok", onValueChange: (value) => setSpringNumber('stiffness', value, false), onValueChangeEnd: (value) => setSpringNumber('stiffness', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.stiffness.min, max: SPRING_LIMITS.stiffness.max, step: SPRING_LIMITS.stiffness.step, formatter: springFormatters.stiffness, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.stiffness, disabled: disabled }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Rest threshold" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = spring.durationRestThreshold) !== null && _a !== void 0 ? _a : DEFAULT_DURATION_REST_THRESHOLD, status: "ok", onValueChange: (value) => setSpringNumber('durationRestThreshold', value, false), onValueChangeEnd: (value) => setSpringNumber('durationRestThreshold', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.durationRestThreshold.min, max: SPRING_LIMITS.durationRestThreshold.max, step: SPRING_LIMITS.durationRestThreshold.step, formatter: springFormatters.durationRestThreshold, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.durationRestThreshold, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Clamp overshoot" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: spring.overshootClamping, onChange: setOvershootClamping, name: "spring-overshoot-clamping", disabled: disabled, variant: "small" }) })
+                                ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Allow tail" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: (_b = spring.allowTail) !== null && _b !== void 0 ? _b : false, onChange: setAllowTail, name: "spring-allow-tail", disabled: disabled, variant: "small" }) })
                                 ] })
                         ] })
                 ] }))] }));

package/dist/components/Timeline/Timeline.js

@@ -53,6 +53,7 @@ const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const SequencePropsObserver_1 = require("./SequencePropsObserver");
 const should_show_track_in_timeline_1 = require("./should-show-track-in-timeline");
+const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequence-props");
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
@@ -227,7 +228,7 @@ const TimelineInner = () => {
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
-                if (!sequence.controls || !previewConnected || !sequence.getStack()) {
+                if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewConnected)) {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));

package/dist/components/Timeline/TimelineEffectItem.js

@@ -71,6 +71,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
@@ -205,12 +206,14 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             alignSelf: 'stretch',
             alignItems: 'center',
             color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
-            display: 'flex',
-            flex: 1,
+            display: 'inline-flex',
+            marginRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
             minWidth: 0,
-            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            boxShadow: containsSelection && !selection.selected
+                ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
+                : undefined,
         };
-    }, [selection.selected]);
+    }, [containsSelection, selection.selected]);
     const getDropTarget = (0, react_1.useCallback)((e) => {
         const dragData = getEffectReorderDragData(e.dataTransfer);
         if (!dragData || dragData.nodePathKey !== nodePathKey) {
@@ -316,7 +319,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
 };

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -50,11 +50,11 @@ const rowSeparator = {
 };
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(nodePathInfo);
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -11,6 +11,7 @@ const valuesEqual = (left, right) => {
 const TimelineKeyframedValue = ({ field, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     const computedValue = (0, react_1.useMemo)(() => {
         const raw = remotion_1.Internals.interpolateKeyframedStatus({
+            forceSpringAllowTail: false,
             frame: sourceFrame,
             status: propStatus,
         });

package/dist/components/Timeline/TimelineRowChrome.js

@@ -51,13 +51,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         e.stopPropagation();
         onSelect();
     }, [onSelect]);
-    const highlightBackground = showSelectedBackground && (selected || containsSelection)
-        ? TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND
-        : undefined;
+    const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
+        showSelectedBackground,
+        selected,
+        containsSelection,
+    });
     const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
         ...style,
-        backgroundColor: outerHeight === undefined ? highlightBackground : undefined,
+        backgroundColor: outerHeight === null ? highlightBackground : undefined,
     }), [style, outerHeight, highlightBackground]);
     const outerStyle = (0, react_1.useMemo)(() => {
         if (outerHeight === null) {

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

@@ -8,7 +8,12 @@ export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
 export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
-export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
+export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
+export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, }: {
+    readonly showSelectedBackground: boolean;
+    readonly selected: boolean;
+    readonly containsSelection: boolean;
+}) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#0F1113";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
 export type TimelineSelection = {
@@ -116,10 +121,10 @@ type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
-    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction, allSelectableItems?: readonly TimelineSelection[]) => void;
-    readonly selectItems: (items: readonly TimelineSelection[]) => void;
+    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction, allSelectableItems?: readonly TimelineSelection[], options?: TimelineSelectionOptions) => void;
+    readonly selectItems: (items: readonly TimelineSelection[], options?: TimelineSelectionOptions) => void;
     readonly registerMarqueeSelectableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
-    readonly registerFocusableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
+    readonly registerFocusableItem: (item: TimelineSelection, getElement: () => Element | null) => () => void;
     readonly getMarqueeSelection: (marqueeRect: TimelineMarqueeRect, lockedSelectionKind: TimelineMarqueeSelectionKind | null) => {
         readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
         readonly selectedItems: readonly TimelineSelection[];
@@ -131,6 +136,9 @@ export declare const TimelineSelectionOrderProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly items: readonly TimelineSelection[];
 }>;
+type TimelineSelectionOptions = {
+    readonly reveal?: boolean;
+};
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
 export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
 export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
@@ -201,4 +209,5 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     selectionItem: TimelineSelection;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
+export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null) => string | undefined;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -42,8 +42,8 @@ const getTimelineColor = (selected, subcategory) => {
         : 'rgba(255, 255, 255, 0.8)';
 };
 exports.getTimelineColor = getTimelineColor;
-const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
-    backgroundColor: exports.TIMELINE_SELECTED_BACKGROUND,
+const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor = exports.TIMELINE_SELECTED_BACKGROUND) => ({
+    backgroundColor,
     bottom: 0,
     left: -timeline_layout_1.TIMELINE_PADDING,
     pointerEvents: 'none',
@@ -52,6 +52,12 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
+const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, }) => {
+    return showSelectedBackground && (selected || containsSelection)
+        ? exports.TIMELINE_SELECTED_BACKGROUND
+        : undefined;
+};
+exports.getTimelineRowHighlightBackground = getTimelineRowHighlightBackground;
 exports.TIMELINE_BACKGROUND = '#0F1113';
 exports.TIMELINE_TICKS_BACKGROUND = colors_1.BACKGROUND;
 const isTimelineSelectionModifierEvent = ({ shiftKey, metaKey, ctrlKey, }) => {
@@ -266,7 +272,7 @@ const TimelineSelectionOrderProvider = ({ children, items }) => {
 };
 exports.TimelineSelectionOrderProvider = TimelineSelectionOrderProvider;
 const CurrentTimelineSelectionContext = (0, react_1.createContext)(null);
-const TIMELINE_SELECTION_FOCUS_PADDING = 8;
+const TIMELINE_SELECTION_REVEAL_RETRY_COUNT = 2;
 const parseEffectIndex = (effectIndex) => {
     const parsed = Number(effectIndex);
     if (!Number.isInteger(parsed) || parsed < 0) {
@@ -557,11 +563,13 @@ const TimelineSelectionProvider = ({ children }) => {
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     const focusableItems = (0, react_1.useRef)(new Map());
-    const previousSingleSelectionKey = (0, react_1.useRef)(null);
+    const focusableRegistrationCounter = (0, react_1.useRef)(0);
+    const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
             selectionAnchor.current = null;
+            setRevealRequest(null);
             setSelectedItems([]);
         }
     }, [canSelect]);
@@ -577,37 +585,62 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [timelineSelectionScope]);
     const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
     const availableSelectedItems = availableSelectionState.selectedItems;
-    (0, react_1.useEffect)(() => {
-        if (availableSelectedItems.length !== 1) {
-            previousSingleSelectionKey.current = null;
-            return;
-        }
-        const selectedKey = (0, exports.getTimelineSelectionKey)(availableSelectedItems[0]);
-        if (previousSingleSelectionKey.current === selectedKey) {
-            return;
-        }
-        previousSingleSelectionKey.current = selectedKey;
-        const animationFrame = requestAnimationFrame(() => {
+    const revealSelectionKey = (0, react_1.useCallback)((selectedKey) => {
+        let cancelled = false;
+        let animationFrame = null;
+        const reveal = (attempt) => {
             var _a;
-            const registered = (_a = focusableItems.current.get(selectedKey)) !== null && _a !== void 0 ? _a : marqueeSelectableItems.current.get(selectedKey);
+            var _b;
+            if (cancelled) {
+                return;
+            }
             const scrollParent = timeline_refs_1.timelineVerticalScroll.current;
-            const rect = registered === null || registered === void 0 ? void 0 : registered.getRect();
+            const focusableRegistrations = focusableItems.current.get(selectedKey);
+            const focusableElement = scrollParent && focusableRegistrations
+                ? [...focusableRegistrations.values()]
+                    .sort((a, b) => a.order - b.order)
+                    .map((registered) => registered.getElement())
+                    .find((element) => element !== null && scrollParent.contains(element))
+                : null;
+            const rect = (_b = focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.getBoundingClientRect()) !== null && _b !== void 0 ? _b : (_a = marqueeSelectableItems.current.get(selectedKey)) === null || _a === void 0 ? void 0 : _a.getRect();
             if (!scrollParent || !rect) {
+                if (attempt < TIMELINE_SELECTION_REVEAL_RETRY_COUNT) {
+                    animationFrame = requestAnimationFrame(() => reveal(attempt + 1));
+                }
                 return;
             }
             const parentRect = scrollParent.getBoundingClientRect();
-            if (rect.top < parentRect.top) {
-                scrollParent.scrollTop -=
-                    parentRect.top - rect.top + TIMELINE_SELECTION_FOCUS_PADDING;
+            if (rect.top >= parentRect.top && rect.bottom <= parentRect.bottom) {
                 return;
             }
-            if (rect.bottom > parentRect.bottom) {
-                scrollParent.scrollTop +=
-                    rect.bottom - parentRect.bottom + TIMELINE_SELECTION_FOCUS_PADDING;
+            const elementCenter = rect.top + rect.height / 2;
+            const parentCenter = parentRect.top + parentRect.height / 2;
+            scrollParent.scrollTop += elementCenter - parentCenter;
+        };
+        animationFrame = requestAnimationFrame(() => reveal(0));
+        return () => {
+            cancelled = true;
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
             }
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (revealRequest === null) {
+            return;
+        }
+        return revealSelectionKey(revealRequest.key);
+    }, [revealRequest, revealSelectionKey]);
+    const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
+        const key = (0, exports.getTimelineSelectionKey)(item);
+        setRevealRequest((previousRequest) => {
+            var _a;
+            return ({
+                key,
+                token: ((_a = previousRequest === null || previousRequest === void 0 ? void 0 : previousRequest.token) !== null && _a !== void 0 ? _a : 0) + 1,
+            });
         });
-        return () => cancelAnimationFrame(animationFrame);
-    }, [availableSelectedItems]);
+    }, []);
     const expandParentsForSelectionItems = (0, react_1.useCallback)((items) => {
         for (const item of items) {
             if (item.type === 'guide') {
@@ -646,11 +679,14 @@ const TimelineSelectionProvider = ({ children }) => {
     const selectItem = (0, react_1.useCallback)((item, interaction = {
         shiftKey: false,
         toggleKey: false,
-    }, allSelectableItems = []) => {
+    }, allSelectableItems = [], options = {}) => {
         if (!canSelectItem(item)) {
             return;
         }
         expandParentsForSelectionItem(item);
+        if (options.reveal) {
+            requestRevealSelectionItem(item);
+        }
         setSelectedItems((currentSelectedItems) => {
             const currentSelectionState = getCurrentAvailableSelectionState(currentSelectedItems);
             const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
@@ -670,9 +706,10 @@ const TimelineSelectionProvider = ({ children }) => {
         canSelectItem,
         expandParentsForSelectionItem,
         getCurrentAvailableSelectionState,
+        requestRevealSelectionItem,
         timelineSelectionScope,
     ]);
-    const selectItems = (0, react_1.useCallback)((items) => {
+    const selectItems = (0, react_1.useCallback)((items, options = {}) => {
         if (!items.every(canSelectItem)) {
             return;
         }
@@ -680,8 +717,16 @@ const TimelineSelectionProvider = ({ children }) => {
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];
         expandParentsForSelectionItems(items);
+        if (options.reveal && items.length === 1) {
+            requestRevealSelectionItem(items[0]);
+        }
         setSelectedItems(items);
-    }, [canSelectItem, expandParentsForSelectionItems, timelineSelectionScope]);
+    }, [
+        canSelectItem,
+        expandParentsForSelectionItems,
+        requestRevealSelectionItem,
+        timelineSelectionScope,
+    ]);
     const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
         const key = (0, exports.getTimelineSelectionKey)(item);
         const registrationOrder = marqueeRegistrationCounter.current;
@@ -695,13 +740,23 @@ const TimelineSelectionProvider = ({ children }) => {
             marqueeSelectableItems.current.delete(key);
         };
     }, []);
-    const registerFocusableItem = (0, react_1.useCallback)((item, getRect) => {
+    const registerFocusableItem = (0, react_1.useCallback)((item, getElement) => {
+        var _a;
         const key = (0, exports.getTimelineSelectionKey)(item);
-        focusableItems.current.set(key, {
-            getRect,
+        const registrationOrder = focusableRegistrationCounter.current;
+        focusableRegistrationCounter.current += 1;
+        const registrations = (_a = focusableItems.current.get(key)) !== null && _a !== void 0 ? _a : new Map();
+        registrations.set(registrationOrder, {
+            getElement,
+            order: registrationOrder,
         });
+        focusableItems.current.set(key, registrations);
         return () => {
-            focusableItems.current.delete(key);
+            const latestRegistrations = focusableItems.current.get(key);
+            latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.delete(registrationOrder);
+            if ((latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.size) === 0) {
+                focusableItems.current.delete(key);
+            }
         };
     }, []);
     const getMarqueeSelectionForRect = (0, react_1.useCallback)((marqueeRect, lockedSelectionKind) => {
@@ -902,11 +957,7 @@ const useTimelineFocusableItem = (item, ref) => {
         if (item === null) {
             return;
         }
-        return registerFocusableItem(item, () => {
-            var _a;
-            var _b;
-            return (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
-        });
+        return registerFocusableItem(item, () => ref.current);
     }, [item, ref, registerFocusableItem]);
 };
 exports.useTimelineFocusableItem = useTimelineFocusableItem;
@@ -919,7 +970,7 @@ const useTimelineRowSelection = (nodePathInfo) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { reveal: true });
     }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,
@@ -998,3 +1049,13 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
     return containsSelection(nodePathInfo);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
+const useTimelineRowHighlightBackground = (nodePathInfo) => {
+    const { selected } = (0, exports.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, exports.useTimelineRowContainsSelection)(nodePathInfo);
+    return (0, exports.getTimelineRowHighlightBackground)({
+        showSelectedBackground: true,
+        selected,
+        containsSelection,
+    });
+};
+exports.useTimelineRowHighlightBackground = useTimelineRowHighlightBackground;

package/dist/components/Timeline/TimelineSequence.js

@@ -154,10 +154,10 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b;
-    var _c, _d, _e, _f, _g;
+    var _a, _b, _c;
+    var _d, _e, _f, _g, _h, _j;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -174,7 +174,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -182,6 +182,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
     const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    const trimBeforeCanUpdate = Boolean(((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -291,7 +292,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _e !== void 0 ? _e : null,
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
@@ -312,7 +313,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: [freezeFrameMenuItem],
+            sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : [],
         });
     }, [
         assetLinkInfo,
@@ -340,7 +341,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
+        timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -391,10 +392,21 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         nodePath !== null &&
         validatedLocation !== null &&
         durationCanUpdate;
+    const showLeftEdgeDragHandle = (s.type === 'sequence' ||
+        s.type === 'image' ||
+        s.type === 'audio' ||
+        s.type === 'video') &&
+        !s.isInsideSeries &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        Boolean(s.controls) &&
+        fromCanUpdate &&
+        durationCanUpdate &&
+        trimBeforeCanUpdate;
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);