@remotion/studio 4.0.527 → 4.0.528

package/dist/components/Timeline/TimelineSelection.js

@@ -27,6 +27,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
+const { EMPTY_CANVAS_SELECTION, getCanvasSelectionAfterInteraction, getCanvasSequenceSelectionKey, useCanvasSelectionController, } = canvas_1.CanvasInternals;
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
 exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = colors_1.BACKGROUND;
 exports.TIMELINE_HOVER_BACKGROUND = colors_1.WHITE_ALPHA_05;
@@ -81,8 +82,8 @@ const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctr
     return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
 };
 exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
-exports.EMPTY_TIMELINE_SELECTION_STATE = canvas_1.EMPTY_CANVAS_SELECTION;
-exports.getTimelineSelectionAfterInteraction = canvas_1.getCanvasSelectionAfterInteraction;
+exports.EMPTY_TIMELINE_SELECTION_STATE = EMPTY_CANVAS_SELECTION;
+exports.getTimelineSelectionAfterInteraction = getCanvasSelectionAfterInteraction;
 const getAvailableTimelineSelectionState = ({ availableKeys, availableItemsByKey, state, }) => {
     if (state.selectedItems.length === 0 && state.anchor === null) {
         return state;
@@ -292,6 +293,11 @@ const nodePathDescendsFrom = (descendant, ancestor) => {
     }
     return ancestor.auxiliaryKeys.every((key, i) => descendant.auxiliaryKeys[i] === key);
 };
+const timelineRowContainsSelection = (nodePathInfo, selection) => selection.type !== 'guide' &&
+    (nodePathDescendsFrom(selection.nodePathInfo, nodePathInfo) ||
+        ((selection.type === 'keyframe' || selection.type === 'easing') &&
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(selection.nodePathInfo) ===
+                (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)));
 const getSelectableTimelineSequenceSelections = (tracks) => {
     return tracks.flatMap((track) => {
         if (track.nodePathInfo === null ||
@@ -377,6 +383,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
                     nodePath: nodePathInfo.sequenceSubscriptionKey,
                     propStatuses,
                     keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    keyframePlaybackRate: track.keyframePlaybackRate,
                     getDragOverrides,
                     getEffectDragOverrides,
                     timelinePosition,
@@ -405,7 +412,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
     });
 };
 exports.getSelectableTimelineItems = getSelectableTimelineItems;
-exports.getTimelineSequenceSelectionKey = canvas_1.getCanvasSequenceSelectionKey;
+exports.getTimelineSequenceSelectionKey = getCanvasSequenceSelectionKey;
 const TimelineSelectAllKeybindings = ({ timeline }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { canSelect } = (0, exports.useTimelineSelection)();
@@ -539,7 +546,8 @@ const TimelineSelectionProvider = ({ children }) => {
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
     const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
-    const selectionController = (0, canvas_1.useCanvasSelectionController)();
+    const effectOperationsAvailable = (0, browser_studio_operations_1.canUseEffectOperations)();
+    const selectionController = useCanvasSelectionController();
     const selectionState = (0, canvas_1.useCanvasSelection)(selectionController);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
@@ -558,7 +566,8 @@ const TimelineSelectionProvider = ({ children }) => {
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
         (!window.remotion_isReadOnlyStudio ||
             keyframeOperationsAvailable ||
-            item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
+            (effectOperationsAvailable && item.type === 'sequence-effect') ||
+            item.type === 'sequence'), [canSelect, effectOperationsAvailable, keyframeOperationsAvailable]);
     const availableSelectionState = selectionScope.current === timelineSelectionScope
         ? selectionState
         : exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -713,8 +722,7 @@ const TimelineSelectionProvider = ({ children }) => {
         selectionController.clear();
     }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
-        return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
-            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+        return availableSelectedItems.some((selected) => timelineRowContainsSelection(nodePathInfo, selected));
     }, [availableSelectedItems]);
     const remapSelectionNodePaths = (0, react_1.useCallback)((mutations) => {
         const remapItem = (item) => {
@@ -1111,8 +1119,7 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
         }
         return selectionContext
             .getSnapshot()
-            .selectedItems.some((selected) => selected.type !== 'guide' &&
-            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+            .selectedItems.some((selected) => timelineRowContainsSelection(nodePathInfo, selected));
     }, [nodePathInfo, selectionContext]);
     return (0, use_sync_external_store_1.useSyncExternalStore)(selectionContext.subscribe, getContainsSelection, getContainsSelection);
 };

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

@@ -2,7 +2,9 @@ import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequence: React.NamedExoticComponent<{
-    readonly s: TSequence;
+    readonly s: TSequence & {
+        loopDisplay: import("@remotion/canvas").TimelineLoopDisplay | undefined;
+    };
     readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;

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,
@@ -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

@@ -173,7 +173,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 +195,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 +776,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 +784,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 +1044,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,10 +1065,17 @@ 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: [
@@ -1086,6 +1096,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/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;
 }>;