@remotion/studio 4.0.521 → 4.0.522

package/dist/components/Timeline/TimelineSequence.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -45,7 +46,7 @@ const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-seque
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_video_with_last_frame_hold_1 = require("../../helpers/is-video-with-last-frame-hold");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
+const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -55,6 +56,8 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
+const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-frame");
 const get_timeline_sequence_visible_layout_1 = require("./get-timeline-sequence-visible-layout");
 const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
@@ -235,11 +238,27 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     var _a, _b, _c;
     var _d, _e, _f, _g, _h, _j, _k;
     const video = remotion_1.Internals.useVideo();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
-    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 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 naturalMediaDuration = (s.type === 'audio' || s.type === 'video') &&
+        mediaMetadata !== null &&
+        s.playbackRate > 0
+        ? Math.max(0, (mediaMetadata.duration * ((_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30) -
+            (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+                startMediaFrom: s.startMediaFrom,
+                mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+                sequenceFrameOffset,
+                playbackRate: s.playbackRate,
+            })) /
+            s.playbackRate)
+        : null;
+    const maxMediaDuration = s.type === 'sequence' || s.type === 'image' || extendVideoLastFrame
+        ? Infinity
+        : naturalMediaDuration;
+    const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -406,6 +425,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 onDuplicateSelectedSequences,
             });
         }
+        const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
+            nodePathInfo,
+            sequence: s,
+            propStatuses: propStatusesForOverride,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+            canEditSource: previewInteractive && Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source),
+            hasMultipleSelection: selected && selectedItems.length > 1,
+        });
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -447,8 +474,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)() && freezeFrameMenuItem
-                ? [freezeFrameMenuItem]
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
+                ? [
+                    ...(splitMenuItem ? [splitMenuItem] : []),
+                    ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
+                ]
                 : [],
         });
     }, [
@@ -462,6 +492,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
+        nodePathInfo,
         onSelect,
         onDeleteSequenceFromSource,
         onDeleteSelectedSequences,
@@ -478,6 +509,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         selectAsset,
         selectable,
         selected,
+        selectedItems.length,
         selectedSequenceNodePathInfos,
         sequenceFrameOffset,
         setPropStatuses,
@@ -502,7 +534,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             durationInFrames: displayDurationInFrames,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
             cascadedStart,
-            startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
+            // The media duration cap already accounts for trimming and playback speed.
+            startFromMedia: 0,
             maxMediaDuration: effectiveMaxMediaDuration,
             video,
             windowWidth,
@@ -549,7 +582,33 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [visibleLayout]);
     const showLeftBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) === true &&
         localStart >= 0 &&
-        ((_h = s.trimBefore) !== null && _h !== void 0 ? _h : 0) === 0;
+        ((_h = s.trimBefore) !== null && _h !== void 0 ? _h : 0) === 0 &&
+        (s.type === 'sequence' ||
+            s.type === 'image' ||
+            (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+                startMediaFrom: s.startMediaFrom,
+                mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+                sequenceFrameOffset,
+                playbackRate: s.playbackRate,
+            }) === 0);
+    // Compare frame boundaries: fractional media durations still occupy the last frame.
+    const endsAtNaturalMediaDuration = !s.loopDisplay &&
+        s.frozenFrame === null &&
+        (s.type === 'audio' || s.type === 'video') &&
+        s.frozenMediaFrame === null &&
+        naturalMediaDuration !== null &&
+        Number.isFinite(naturalMediaDuration) &&
+        naturalMediaDuration > 0 &&
+        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)
+        : video.durationInFrames;
+    const endsAtContainerBoundary = Math.ceil(s.from + displayDurationInFrames) >=
+        Math.ceil(Math.min(parentEnd, video.durationInFrames));
+    const showRightBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) === true &&
+        (endsAtContainerBoundary || endsAtNaturalMediaDuration);
     const style = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
@@ -567,8 +626,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 : colors_1.TRANSPARENT,
             borderTopLeftRadius: showLeftBorderRadius ? 2 : 0,
             borderBottomLeftRadius: showLeftBorderRadius ? 2 : 0,
-            borderTopRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
-            borderBottomRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
+            borderTopRightRadius: showRightBorderRadius ? 2 : 0,
+            borderBottomRightRadius: showRightBorderRadius ? 2 : 0,
             position: 'absolute',
             height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
             marginLeft: (_a = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.marginLeft) !== null && _a !== void 0 ? _a : 0,
@@ -577,7 +636,13 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             // Edge handles extend outside the layer; media is clipped separately.
             overflow: 'visible',
         };
-    }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
+    }, [
+        negativeStartClipped,
+        s.type,
+        showLeftBorderRadius,
+        showRightBorderRadius,
+        visibleLayout,
+    ]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -602,10 +667,10 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                     visibleLayout.leftEdgeVisible &&
                     negativeStartWidth === 0 &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
                     visibleLayout.rightEdgeVisible &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }), onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, 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, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, 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 }))] }));
     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.js

@@ -64,6 +64,7 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
@@ -705,6 +706,14 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 onDuplicateSelectedSequences,
             });
         }
+        const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
+            nodePathInfo,
+            sequence,
+            propStatuses: propStatusesForOverride,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+            canEditSource: previewInteractive && Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source),
+            hasMultipleSelection: selected && selectedItems.length > 1,
+        });
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -820,6 +829,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                         subMenu: null,
                         value: 'rename-sequence',
                     },
+                    ...(splitMenuItem ? [splitMenuItem] : []),
                     ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
                 ]
                 : [],
@@ -839,7 +849,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
-        nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
+        nodePathInfo,
         onAddEffect,
         onCrop,
         onRotate,
@@ -859,6 +869,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         selectAsset,
         selectable,
         selected,
+        selectedItems.length,
         selectedSequenceNodePathInfos,
         sequence,
         sequenceFrameOffset,

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

@@ -7,6 +7,7 @@ export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
     readonly initialDuration: number;
+    readonly maximumDuration: number;
     readonly minimumDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
@@ -24,6 +25,8 @@ export type TimelineSequenceLeftEdgeDragTarget = {
 };
 export type TimelineSequenceFromDragTarget = {
     readonly canSnapToTimelineStart: boolean;
+    readonly minimumDeltaFrames: number;
+    readonly initialTimelineStart: number;
     readonly effectKeyframes: TimelineSequenceEffectKeyframeDragTarget[];
     readonly fileName: string;
     readonly initialFrom: number;
@@ -49,9 +52,10 @@ export declare const canResizeTimelineSequenceDuration: ({ sequence, status, }:
     readonly status: CanUpdateSequencePropStatus | undefined;
 }) => boolean;
 export declare const isTimelineSequenceLeftEdgeDraggable: (sequence: TSequence) => boolean;
-export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, minimumDuration, }: {
+export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, maximumDuration, minimumDuration, }: {
     readonly initialDuration: number;
     readonly deltaFrames: number;
+    readonly maximumDuration: number;
     readonly minimumDuration?: number | undefined;
 }) => number;
 export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration, }: {
@@ -85,8 +89,9 @@ export declare const getTimelineSequenceFromDragValue: ({ initialFrom, deltaFram
     readonly initialFrom: number;
     readonly deltaFrames: number;
 }) => number;
-export declare const getTimelineSequenceFromDragDelta: ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }: {
+export declare const getTimelineSequenceFromDragDelta: ({ deltaFrames, timelineDurationInFrames, pxPerFrame, snappingEnabled, targets, }: {
     readonly deltaFrames: number;
+    readonly timelineDurationInFrames: number;
     readonly pxPerFrame: number;
     readonly snappingEnabled: boolean;
     readonly targets: readonly TimelineSequenceFromDragTarget[];
@@ -102,12 +107,13 @@ export declare const getTimelineSequenceFromDragKeyframeMoves: ({ targets, delta
     readonly effectKeyframes: MoveEffectKeyframeChange[];
     readonly sequenceKeyframes: MoveSequenceKeyframeChange[];
 };
-export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
+    readonly timelineDurationInFrames: number;
 }) => TimelineSequenceDurationDragTarget[] | null;
 export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
@@ -128,6 +134,8 @@ export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticCompon
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
+    readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
+    readonly selected: boolean;
 }>;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;
@@ -142,5 +150,7 @@ export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticCompo
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
+    readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
+    readonly selected: boolean;
 }>;
 export {};