@remotion/studio 4.0.527 → 4.0.529

package/dist/components/Timeline/TimelineSequence.js

@@ -75,6 +75,7 @@ const use_asset_timeline_context_menu_1 = require("./use-asset-timeline-context-
 const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
+const { getTimelineVisibleDuration, getTimelineVisibleStart } = canvas_1.CanvasInternals;
 const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
@@ -127,6 +128,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     const isAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
@@ -149,7 +151,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     }, [fromCanUpdate, onMoveDragPointerDown, onSelect, selected]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
-    const sequenceFrame = relativeFrame + sequenceFrameOffset;
+    const sequenceFrame = relativeFrame * s.sequencePlaybackRate + sequenceFrameOffset;
     const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
     const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
     const roundedFrame = Math.round(sequenceFrame * 100) / 100;
@@ -168,9 +170,9 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
             ...style,
             background: negativeStart ? colors_1.TRANSPARENT : style.background,
             border: negativeStart ? 'none' : style.border,
-            opacity: selected || isAsset ? 1 : 0.75,
+            opacity: selected || containsSelection || isAsset ? 1 : 0.75,
         };
-    }, [isAsset, negativeStart, selected, style]);
+    }, [containsSelection, isAsset, negativeStart, selected, style]);
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [premount ? (jsx_runtime_1.jsx("div", { style: {
                     left: premount.left,
                     width: premount.width,
@@ -205,7 +207,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
-    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, role: "group", [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, "aria-label": s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
                             background: style.background,
                             border: style.border,
@@ -240,8 +242,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     // 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, _c, _d, _e;
-    var _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const video = remotion_1.Internals.useVideo();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
@@ -250,17 +252,30 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(s.type === 'audio' || s.type === 'video' ? s.src : null);
     const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
+    const mediaStartFrame = s.type === 'audio' || s.type === 'video'
+        ? (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+            startMediaFrom: s.startMediaFrom,
+            mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+            sequenceFrameOffset,
+            playbackRate: s.playbackRate,
+        })
+        : 0;
+    const mediaLoopStartFrame = mediaStartFrame -
+        ((_j = (_a = s.loopDisplay) === null || _a === void 0 ? void 0 : _a.mediaOffsetInFrames) !== null && _j !== void 0 ? _j : 0) *
+            (s.type === 'audio' || s.type === 'video'
+                ? s.playbackRate * s.sequencePlaybackRate
+                : 0);
     const naturalMediaDuration = (s.type === 'audio' || s.type === 'video') &&
         mediaMetadata !== null &&
         s.playbackRate > 0
-        ? Math.max(0, (mediaMetadata.duration * ((_f = video === null || video === void 0 ? void 0 : video.fps) !== null && _f !== void 0 ? _f : 30) -
+        ? Math.max(0, (mediaMetadata.duration * ((_k = video === null || video === void 0 ? void 0 : video.fps) !== null && _k !== void 0 ? _k : 30) -
             (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
                 startMediaFrom: s.startMediaFrom,
                 mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
                 sequenceFrameOffset,
                 playbackRate: s.playbackRate,
             })) /
-            s.playbackRate)
+            (s.playbackRate * s.sequencePlaybackRate))
         : null;
     const maxMediaDuration = s.type === 'sequence' || s.type === 'image' || extendVideoLastFrame
         ? Infinity
@@ -281,22 +296,22 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_g = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _g !== void 0 ? _g : null;
+    const nodePath = (_l = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _l !== void 0 ? _l : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+        ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const durationCanResize = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         (0, TimelineSequenceRightEdgeDragHandle_1.canResizeTimelineSequenceDuration)({
             status: propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
         }));
     const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+        ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const trimBeforeCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
+        ((_d = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _d === void 0 ? void 0 : _d.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
@@ -359,7 +374,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
-    const isProgrammaticallyDuplicated = ((_h = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _h !== void 0 ? _h : 1) > 1;
+    const isProgrammaticallyDuplicated = ((_m = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _m !== void 0 ? _m : 1) > 1;
     const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !s.showInTimeline ||
@@ -560,7 +575,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_j = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _j !== void 0 ? _j : 1,
+        timelineDurationInFrames: (_o = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _o !== void 0 ? _o : 1,
         onDragEnd: dragAwareDoubleClick.endPointerGesture,
     });
     if (!video) {
@@ -622,7 +637,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [visibleLayout]);
     const showLeftBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) === true &&
         localStart >= 0 &&
-        ((_k = s.trimBefore) !== null && _k !== void 0 ? _k : 0) === 0 &&
+        ((_p = s.trimBefore) !== null && _p !== void 0 ? _p : 0) === 0 &&
         (s.type === 'sequence' ||
             s.type === 'image' ||
             (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
@@ -642,15 +657,15 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         Math.ceil(Math.min(s.duration, video.durationInFrames - s.from, maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity)) === Math.ceil(naturalMediaDuration);
     const parentSequence = sequences.find((candidate) => candidate.id === s.parent);
     const parentEnd = parentSequence
-        ? (0, canvas_1.getTimelineVisibleStart)(parentSequence, sequences) +
-            (0, canvas_1.getTimelineVisibleDuration)(parentSequence, sequences)
+        ? getTimelineVisibleStart(parentSequence, sequences) +
+            getTimelineVisibleDuration(parentSequence, sequences)
         : video.durationInFrames;
     const endsAtContainerBoundary = Math.ceil(s.from + displayDurationInFrames) >=
         Math.ceil(Math.min(parentEnd, video.durationInFrames));
     const hasImplicitMediaDuration = (s.type === 'audio' || s.type === 'video') &&
-        ((_d = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _d === void 0 ? void 0 : _d.status) === 'static' &&
+        ((_e = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _e === void 0 ? void 0 : _e.status) === 'static' &&
         propStatusesForOverride.durationInFrames.codeValue === undefined;
-    const durationInFramesCodeValue = ((_e = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _e === void 0 ? void 0 : _e.status) === 'static'
+    const durationInFramesCodeValue = ((_f = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _f === void 0 ? void 0 : _f.status) === 'static'
         ? propStatusesForOverride.durationInFrames.codeValue
         : null;
     const explicitDurationInFrames = typeof durationInFramesCodeValue === 'number' &&
@@ -664,7 +679,9 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             displayDurationInFrames: s.duration,
             displayStart: s.from,
             effectiveMaxMediaDuration,
-            explicitDurationInFrames,
+            explicitDurationInFrames: explicitDurationInFrames === null
+                ? null
+                : explicitDurationInFrames / s.sequencePlaybackRate,
             hasImplicitDuration: hasImplicitMediaDuration,
             naturalMediaDuration,
             timelineDurationInFrames: video.durationInFrames,
@@ -751,10 +768,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                     visibleLayout.leftEdgeVisible &&
                     negativeStartWidth === 0 &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_l = video.durationInFrames) !== null && _l !== void 0 ? _l : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { cursor: (0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) ? 'ew-resize' : 'e-resize', nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_q = video.durationInFrames) !== null && _q !== void 0 ? _q : 1, initialEdgeFrame: s.from, fps: video.fps, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
                     visibleLayout.rightEdgeVisible &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, mediaDurationDragLimits: mediaDurationDragLimits, windowWidth: windowWidth, timelineDurationInFrames: (_m = video.durationInFrames) !== null && _m !== void 0 ? _m : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { cursor: (0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) ? 'ew-resize' : 'w-resize', nodePathInfo: nodePathInfo, mediaDurationDragLimits: mediaDurationDragLimits, windowWidth: windowWidth, timelineDurationInFrames: (_r = video.durationInFrames) !== null && _r !== void 0 ? _r : 1, initialEdgeFrame: s.from +
+                        Math.max(0, Math.min(displayDurationInFrames, effectiveMaxMediaDuration !== null && effectiveMaxMediaDuration !== void 0 ? effectiveMaxMediaDuration : Infinity, video.durationInFrames - s.from)), fps: video.fps, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: mediaLoopStartFrame, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate * s.sequencePlaybackRate, loopDisplay: s.loopDisplay, loopDisplayOffsetInFrames: (_s = (_g = s.loopDisplay) === null || _g === void 0 ? void 0 : _g.phaseOffsetInFrames) !== null && _s !== void 0 ? _s : 0 }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: mediaLoopStartFrame, sequenceFrameOffset: 0, playbackRate: s.playbackRate * s.sequencePlaybackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, loopDisplayOffsetInFrames: (_t = (_h = s.loopDisplay) === null || _h === void 0 ? void 0 : _h.phaseOffsetInFrames) !== null && _t !== void 0 ? _t : 0, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, phase: s.loopDisplay.phaseOffsetInFrames / s.loopDisplay.durationInFrames, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

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

@@ -8,6 +8,7 @@ export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly sequenceFrameOffset: number;
     readonly siblingIndex: number;
     readonly numberOfHiddenDuplicates: number;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -108,31 +108,53 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, selectedItems, sequence }) => {
+const TimelineSequenceLabelInner = ({ disabled, isExpanded, nodePathInfo, selectedItems, sequence, canHaveExpandableContent, displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, numberOfHiddenDuplicates, }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
         sequence,
         nodePathInfo,
         selectedItems,
     });
-    const onToggleExpand = (0, react_1.useCallback)(() => toggleTrack(nodePathInfo), [nodePathInfo, toggleTrack]);
-    if (!hasExpandableContent) {
-        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
-    }
-    return (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled }));
+    const showChevronSlot = canHaveExpandableContent && nodePathInfo !== null;
+    const showChevron = showChevronSlot && hasExpandableContent;
+    const onToggleExpand = (0, react_1.useCallback)(() => {
+        if (nodePathInfo !== null) {
+            toggleTrack(nodePathInfo);
+        }
+    }, [nodePathInfo, toggleTrack]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: editing, onCancelEditing: onCancelEditing, onSaveName: onSaveName, chevronSlot: showChevronSlot && !editing && numberOfHiddenDuplicates === 0
+                    ? showChevron
+                        ? 'occupied'
+                        : 'empty'
+                    : 'none' }), 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 })
+                ] })) : null, showChevronSlot ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), showChevron ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))] })) : null] }));
 };
-const areTimelineSequenceExpandArrowPropsEqual = (first, second) => {
+const TimelineSequenceLabel = react_1.default.memo(TimelineSequenceLabelInner, (first, second) => {
     var _a, _b, _c, _d;
-    return (first.disabled === second.disabled &&
+    return first.disabled === second.disabled &&
         first.isExpanded === second.isExpanded &&
         first.selectedItems === second.selectedItems &&
+        first.canHaveExpandableContent === second.canHaveExpandableContent &&
+        first.displayName === second.displayName &&
+        first.fallbackDisplayName === second.fallbackDisplayName &&
+        first.selected === second.selected &&
+        first.containsSelection === second.containsSelection &&
+        first.editing === second.editing &&
+        first.onCancelEditing === second.onCancelEditing &&
+        first.onSaveName === second.onSaveName &&
+        first.numberOfHiddenDuplicates === second.numberOfHiddenDuplicates &&
         ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
         ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
             ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
         first.sequence.effects === second.sequence.effects &&
-        (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo));
-};
-const TimelineSequenceExpandArrow = react_1.default.memo(TimelineSequenceExpandArrowInner, areTimelineSequenceExpandArrowPropsEqual);
+        (first.nodePathInfo === second.nodePathInfo ||
+            (first.nodePathInfo !== null &&
+                second.nodePathInfo !== null &&
+                (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo)));
+});
 const sequenceReorderWrapper = {
     position: 'relative',
 };
@@ -173,7 +195,7 @@ const getSequencePointerDropTargetAtPoint = ({ clientX, clientY, }) => {
     return null;
 };
 const SEQUENCE_REORDER_POINTER_THRESHOLD = 3;
-const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, numberOfHiddenDuplicates, showProvisionalVisibilityToggle, }) => {
+const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, sequenceFrameOffset, siblingIndex, numberOfHiddenDuplicates, showProvisionalVisibilityToggle, }) => {
     var _a, _b;
     var _c, _d, _e;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
@@ -195,6 +217,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const { onSelect, selectable, selected, selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
         if (!selected ||
             selectedItems.length < 2 ||
@@ -775,7 +798,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
-            !nodePath ||
+            nodePathInfo === null ||
             !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
             return;
         }
@@ -783,13 +806,15 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             type: 'add-effect',
             clientId: previewServerState.clientId,
             fileName: validatedLocation.source,
-            nodePath,
+            nodePathInfo,
+            selectItems,
         });
     }, [
         canAddEffect,
-        nodePath,
+        nodePathInfo,
         previewServerState,
         setSelectedModal,
+        selectItems,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const onCrop = (0, react_1.useCallback)(() => {
@@ -1041,7 +1066,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const onEffectDrop = (0, react_1.useCallback)(async (e) => {
         if (!canDropEffect ||
             previewServerState.type !== 'connected' ||
-            nodePath === null ||
+            nodePathInfo === null ||
             validatedLocation === null ||
             !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
@@ -1062,17 +1087,20 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         await (0, effect_drag_and_drop_1.addEffectFromDragData)({
             dragData,
             fileName: validatedLocation.source,
-            nodePath,
+            nodePathInfo,
             clientId: previewServerState.clientId,
+            selectItems,
         });
-    }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
+    }, [
+        canDropEffect,
+        nodePathInfo,
+        previewServerState,
+        selectItems,
+        validatedLocation,
+    ]);
     const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: showVisibilityToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: canToggleVisibility ? onToggleVisibility : null })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, 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 })
-                    ] })) : null, hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, selectedItems: selectedItems, sequence: sequence })
-                    ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceLabel, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName, numberOfHiddenDuplicates: numberOfHiddenDuplicates, canHaveExpandableContent: hasExpandableContent, disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, selectedItems: selectedItems, sequence: sequence }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
@@ -1086,6 +1114,6 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate })) : null] }));
 };
 exports.TimelineSequenceItem = react_1.default.memo(TimelineSequenceItemInner);

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

@@ -7,4 +7,5 @@ export declare const TimelineSequenceName: React.FC<{
     readonly editing: boolean;
     readonly onCancelEditing: () => void;
     readonly onSaveName: (name: string) => Promise<void>;
+    readonly chevronSlot: 'none' | 'empty' | 'occupied';
 }>;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -8,13 +8,16 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const MAX_DISPLAY_NAME_LENGTH = 1000;
 const MAX_RENAME_INPUT_WIDTH = 240;
 const RENAME_INPUT_CLASS_NAME = 'remotion-timeline-sequence-name-input';
+const LABEL_FONT_FAMILY = 'Arial, Helvetica, sans-serif';
+// 4px gap + 12px chevron + 4px chevron margin.
+const CHEVRON_SLOT_WIDTH = 20;
 const getTruncatedDisplayName = (displayName) => {
     if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
         return displayName.slice(0, MAX_DISPLAY_NAME_LENGTH) + '...';
     }
     return displayName;
 };
-const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
+const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, chevronSlot, }) => {
     const inputRef = (0, react_1.useRef)(null);
     const [draftName, setDraftName] = (0, react_1.useState)(displayName);
     const cancelNextBlurRef = (0, react_1.useRef)(false);
@@ -25,11 +28,12 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
             flexShrink: 1,
-            fontFamily: 'inherit',
+            fontFamily: LABEL_FONT_FAMILY,
             fontSize: 12,
             lineHeight: 'normal',
             minWidth: 0,
-            overflow: 'hidden',
+            overflow: chevronSlot === 'none' ? 'hidden' : 'visible',
+            position: chevronSlot === 'none' ? undefined : 'relative',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
             color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
@@ -40,14 +44,14 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
         };
-    }, [selected, containsSelection]);
+    }, [selected, containsSelection, chevronSlot]);
     const inputStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
             background: colors_1.TRANSPARENT,
             border: 0,
             color: (0, TimelineSelection_1.getTimelineColor)(false, false),
-            fontFamily: 'inherit',
+            fontFamily: LABEL_FONT_FAMILY,
             fontSize: 12,
             outline: 'none',
             paddingBottom: 0,
@@ -101,6 +105,34 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
                 jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: ${colors_1.WHITE_ALPHA_72}; color: ${colors_1.BLACK}; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
             ] }));
     }
-    return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));
+    if (chevronSlot !== 'none') {
+        // Keep the name's flex width fixed while its visible text uses the empty slot.
+        return (jsx_runtime_1.jsx("div", { className: "remotion-timeline-sequence-name-measure", "data-name": text, title: text, style: {
+                ...style,
+                backgroundColor: undefined,
+                boxShadow: undefined,
+                clipPath: chevronSlot === 'occupied' ? 'inset(0)' : undefined,
+            }, children: jsx_runtime_1.jsx("div", { style: {
+                    ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
+                    alignItems: 'center',
+                    boxShadow: style.boxShadow,
+                    boxSizing: 'border-box',
+                    color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
+                    display: 'inline-flex',
+                    fontFamily: LABEL_FONT_FAMILY,
+                    fontSize: 12,
+                    height: '100%',
+                    left: 0,
+                    lineHeight: 'normal',
+                    maxWidth: `calc(100% + ${CHEVRON_SLOT_WIDTH}px)`,
+                    overflow: 'hidden',
+                    position: 'absolute',
+                    textOverflow: 'ellipsis',
+                    top: 0,
+                    whiteSpace: 'nowrap',
+                    width: 'max-content',
+                }, children: text }) }));
+    }
+    return (jsx_runtime_1.jsx("div", { role: "group", "aria-label": text, style: style, children: text }));
 };
 exports.TimelineSequenceName = TimelineSequenceName;

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

@@ -14,9 +14,11 @@ type TimelineSequenceKeyframedValueBaseProps = {
 type TimelineSequenceKeyframedValueProps = TimelineSequenceKeyframedValueBaseProps & ({
     readonly sourceFrame: number;
     readonly keyframeDisplayOffset?: never;
+    readonly keyframePlaybackRate?: never;
 } | {
     readonly sourceFrame?: never;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 });
 export declare const TimelineSequenceKeyframedValue: React.NamedExoticComponent<TimelineSequenceKeyframedValueProps>;
 export declare const TimelineSequencePropItem: React.FC<{
@@ -27,6 +29,7 @@ export declare const TimelineSequencePropItem: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
     readonly runtimeValue: unknown;
 }>;