@remotion/studio 4.0.515 → 4.0.517

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceItem = void 0;
+exports.TimelineSequenceItem = exports.SEQUENCE_REORDER_MIME_TYPE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -98,7 +98,7 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
+exports.SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
 let currentSequenceDrag = null;
 const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
@@ -146,7 +146,7 @@ const sequenceReorderAfterLine = {
     top: -1,
 };
 const hasSequenceReorderDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
+    return Array.from(dataTransfer.types).includes(exports.SEQUENCE_REORDER_MIME_TYPE);
 };
 const isSequenceReorderDrag = (dataTransfer) => {
     return (currentSequenceDrag !== null || hasSequenceReorderDragType(dataTransfer));
@@ -155,7 +155,7 @@ const getSequenceReorderDragData = (dataTransfer) => {
     if (currentSequenceDrag) {
         return currentSequenceDrag;
     }
-    const value = dataTransfer.getData(SEQUENCE_REORDER_MIME_TYPE);
+    const value = dataTransfer.getData(exports.SEQUENCE_REORDER_MIME_TYPE);
     if (!value) {
         return null;
     }
@@ -378,7 +378,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         };
         currentSequenceDrag = dragData;
         e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData(SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
+        e.dataTransfer.setData(exports.SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
         e.stopPropagation();
     }, [
         canReorderSequence,
@@ -441,10 +441,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 position: dropTarget.position,
                 clientId: previewServerState.clientId,
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Reordered sequence', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }
@@ -553,6 +550,9 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             button: e.button,
             canOpenInEditor,
             numberOfConnectedCompositions: connectedCompositions.length,
+            // The track list row reorders via native drag-and-drop, which
+            // already suppresses `dblclick` after a drag.
+            sequenceWasDragged: false,
         });
         if (action === null) {
             return;
@@ -911,9 +911,11 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, isFieldRow: false, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), 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 }), hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : null, numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), 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, sequence: sequence })
+                    ] })) : null, 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, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -39,11 +39,13 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const format_file_location_1 = require("../../helpers/format-file-location");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const ContextMenu_1 = require("../ContextMenu");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
 const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
@@ -327,6 +329,17 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             selection.onSelect({ shiftKey: false, toggleKey: false });
         }
         return [
+            (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({
+                contextForAgents: (0, format_file_location_1.formatContextForAgents)({
+                    location: validatedLocation,
+                    name: `Property "${field.key}"`,
+                    root: window.remotion_cwd,
+                }),
+            }),
+            {
+                type: 'divider',
+                id: 'copy-context-for-agents-divider',
+            },
             {
                 type: 'item',
                 id: 'reset-sequence-field',
@@ -340,7 +353,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canShowReset, onReset, selection]);
+    }, [canShowReset, field.key, onReset, selection, validatedLocation]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         var _a;
         if (!canOpenInEditor || !defaultEditorId) {
@@ -364,7 +377,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 ...style,
             }, children: fieldValue }));
     }
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: fieldValue }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -3,7 +3,6 @@ import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed,
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
@@ -105,21 +104,21 @@ export declare const getTimelineSequenceFromDragKeyframeMoves: ({ targets, delta
 };
 export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
 export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceLeftEdgeDragTarget[] | null;
 export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
@@ -128,18 +127,20 @@ export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticCompon
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly onDragEnd: (wasDragged: boolean) => void;
 }>;
-export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
+export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly onDragEnd: (wasDragged: boolean) => void;
 }) => {
-    dragging: boolean;
     onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticComponent<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly onDragEnd: (wasDragged: boolean) => void;
 }>;
 export {};

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -663,7 +663,7 @@ const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides,
         }
     }
 };
-const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -679,6 +679,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     });
     latestRef.current = {
         nodePathInfo,
@@ -687,6 +688,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -694,6 +696,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             return;
         }
         dragStateRef.current = null;
+        latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -764,6 +767,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
+            didMove: false,
             pxPerFrame,
             pointerId: e.pointerId,
             button: e.button,
@@ -794,6 +798,9 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
             const dx = e.clientX - dragState.initialClientX;
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
+            if (deltaFrames !== 0) {
+                dragState.didMove = true;
+            }
             for (const target of dragState.targets) {
                 const nextValues = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
                     initialDuration: target.initialDuration,
@@ -854,7 +861,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
 };
 exports.TimelineSequenceLeftEdgeDragHandle = react_1.default.memo(TimelineSequenceLeftEdgeDragHandleInner);
-const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
+const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -862,7 +869,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
@@ -874,6 +881,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         previewServerState,
         overrideIdToNodePathMappings,
         editorSnapping,
+        onDragEnd,
     });
     latestRef.current = {
         nodePathInfo,
@@ -885,6 +893,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         previewServerState,
         overrideIdToNodePathMappings,
         editorSnapping,
+        onDragEnd,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -892,9 +901,9 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             return;
         }
         dragStateRef.current = null;
+        latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
-        setDragging(false);
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, clearEffectDragOverrides: latestClearEffect, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
@@ -945,7 +954,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        var _a, _b;
+        var _a;
         if (e.button !== 0) {
             return;
         }
@@ -970,115 +979,93 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (targets === null || targets.length === 0) {
             return;
         }
+        (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         e.preventDefault();
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
+            didMove: false,
             pxPerFrame,
-            pointerId: e.pointerId,
-            button: e.button,
-            target: e.currentTarget,
             targets,
         };
-        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
-        setDragging(true);
+        // Register before React commits so no pointer move can arrive before
+        // the global session listeners exist.
+        stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
+            event: e.nativeEvent,
+            captureTarget: e.currentTarget,
+            onMove: (moveEvent) => {
+                const dragState = dragStateRef.current;
+                if (!dragState) {
+                    return;
+                }
+                const dx = moveEvent.clientX - dragState.initialClientX;
+                const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
+                    deltaFrames: Math.round(dx / dragState.pxPerFrame),
+                    pxPerFrame: dragState.pxPerFrame,
+                    snappingEnabled: latestRef.current.editorSnapping,
+                    targets: dragState.targets,
+                });
+                dragState.latestDeltaFrames = deltaFrames;
+                if (deltaFrames !== 0) {
+                    dragState.didMove = true;
+                }
+                for (const target of dragState.targets) {
+                    const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
+                        initialFrom: target.initialFrom,
+                        deltaFrames,
+                    });
+                    latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
+                    for (const keyframeTarget of target.sequenceKeyframes) {
+                        latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
+                            type: 'keyframed',
+                            status: shiftKeyframedStatus({
+                                status: keyframeTarget.status,
+                                deltaFrames,
+                                isDescendant: keyframeTarget.isDescendant,
+                            }),
+                        });
+                    }
+                    for (const keyframeTarget of target.effectKeyframes) {
+                        latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
+                            type: 'keyframed',
+                            status: shiftKeyframedStatus({
+                                status: keyframeTarget.status,
+                                deltaFrames,
+                                isDescendant: keyframeTarget.isDescendant,
+                            }),
+                        });
+                    }
+                }
+            },
+            onEnd: (reason, endEvent) => {
+                stopPointerSessionRef.current = null;
+                finishDrag((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent !== null);
+            },
+        });
     }, [
         currentSelection,
+        finishDrag,
         propStatusesRef,
         sequencesRef,
         timelineDurationInFrames,
         windowWidth,
     ]);
     (0, react_1.useEffect)(() => {
-        if (!dragging) {
-            return;
-        }
-        const onMove = (e) => {
-            const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
-                return;
-            }
-            const dx = e.clientX - dragState.initialClientX;
-            const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
-                deltaFrames: Math.round(dx / dragState.pxPerFrame),
-                pxPerFrame: dragState.pxPerFrame,
-                snappingEnabled: latestRef.current.editorSnapping,
-                targets: dragState.targets,
-            });
-            dragState.latestDeltaFrames = deltaFrames;
-            for (const target of dragState.targets) {
-                const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
-                    initialFrom: target.initialFrom,
-                    deltaFrames,
-                });
-                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
-                for (const keyframeTarget of target.sequenceKeyframes) {
-                    latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
-                        type: 'keyframed',
-                        status: shiftKeyframedStatus({
-                            status: keyframeTarget.status,
-                            deltaFrames,
-                            isDescendant: keyframeTarget.isDescendant,
-                        }),
-                    });
-                }
-                for (const keyframeTarget of target.effectKeyframes) {
-                    latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
-                        type: 'keyframed',
-                        status: shiftKeyframedStatus({
-                            status: keyframeTarget.status,
-                            deltaFrames,
-                            isDescendant: keyframeTarget.isDescendant,
-                        }),
-                    });
-                }
-            }
-        };
-        const onUp = (e) => {
-            const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
-                return;
-            }
-            finishDrag(true);
-        };
-        const onCancel = (e) => {
-            const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
-                return;
-            }
-            finishDrag(false);
+        return () => {
+            var _a;
+            (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
+            stopPointerSessionRef.current = null;
         };
-        const activeDragState = dragStateRef.current;
-        if (!activeDragState) {
-            return;
-        }
-        return (0, pointer_session_1.startCapturedPointerSession)({
-            event: activeDragState,
-            captureTarget: activeDragState.target,
-            onMove,
-            onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
-                    onUp(endEvent);
-                }
-                else if (endEvent) {
-                    onCancel(endEvent);
-                }
-                else {
-                    finishDrag(false);
-                }
-            },
-        });
-    }, [dragging, finishDrag]);
+    }, []);
     return {
-        dragging,
         onPointerDown,
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -1095,6 +1082,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     });
     latestRef.current = {
         nodePathInfo,
@@ -1103,6 +1091,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        onDragEnd,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -1110,6 +1099,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             return;
         }
         dragStateRef.current = null;
+        latestRef.current.onDragEnd(dragState.didMove);
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -1178,6 +1168,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
+            didMove: false,
             pxPerFrame,
             pointerId: e.pointerId,
             button: e.button,
@@ -1211,6 +1202,9 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
             const dx = e.clientX - dragState.initialClientX;
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
+            if (deltaFrames !== 0) {
+                dragState.didMove = true;
+            }
             for (const target of dragState.targets) {
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,

package/dist/components/Timeline/TimelineTrack.js

@@ -65,7 +65,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, cascadedStart: track.cascadedStart, localStart: track.localStart, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -10,14 +10,10 @@ const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-utils");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
 };
 const rightDraggerStyle = {
-    paddingBottom: 2,
     paddingRight: 0,
-    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',

package/dist/components/Timeline/TimelineTranslateField.js

@@ -9,14 +9,10 @@ const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
 };
 const rightDraggerStyle = {
-    paddingBottom: 2,
     paddingRight: 0,
-    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',

package/dist/components/Timeline/TimelineVirtualization.js

@@ -115,12 +115,14 @@ const TimelineVirtualizationProvider = ({ children, hasBeenCut, isStill, timelin
         virtualizer.measure();
     }, [trackHeights, virtualizer]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (revealRequest === null) {
             return;
         }
         const key = getSelectionTrackKey(revealRequest.item);
         const index = key === null ? undefined : layout.rootTrackIndexes.get(key);
-        if (index !== undefined) {
+        if (index !== undefined &&
+            ((_a = virtualizer.getOffsetForIndex(index, 'auto')) === null || _a === void 0 ? void 0 : _a[1]) !== 'auto') {
             virtualizer.scrollToIndex(index, { align: 'center' });
         }
     }, [layout.rootTrackIndexes, revealRequest, virtualizer]);

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -2,17 +2,16 @@ import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const deleteSequencesFromSource: (nodePathInfos: SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<boolean>;
 export declare const getTimelineSelectionAfterDeletingItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }: {
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences?: TSequence[] | undefined;
     readonly overrideIdsToNodePaths?: OverrideIdToNodePaths | undefined;
     readonly propStatuses?: PropStatuses | undefined;
     readonly timelinePosition?: number | undefined;
-}) => readonly TimelineSelection[];
+}) => readonly import("@remotion/canvas").CanvasSelectionItem[];
 export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, propStatuses, timelinePosition, }: {
-    selections: readonly TimelineSelection[];
+    selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setPropStatuses: SetPropStatuses;

package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts

@@ -1,14 +1,13 @@
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
-import type { TimelineSelection } from './TimelineSelection';
 export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<void>;
-export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
+export declare const isDuplicatableSequenceRowSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => selection is {
     readonly type: "sequence";
     readonly nodePathInfo: SequenceNodePathInfo;
 } & {
     type: "sequence";
 };
-export declare const isDuplicatableEffectSelection: (selection: TimelineSelection) => selection is {
+export declare const isDuplicatableEffectSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => selection is {
     readonly type: "sequence-effect";
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly i: number;
@@ -16,6 +15,6 @@ export declare const isDuplicatableEffectSelection: (selection: TimelineSelectio
     type: "sequence-effect";
 };
 export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
-    selections: readonly TimelineSelection[];
+    selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     confirm: ConfirmationDialogFunction;
 }) => Promise<void> | null;