@remotion/studio 4.0.515 → 4.0.516

package/dist/components/Timeline/TimelineSchemaField.js

@@ -37,6 +37,7 @@ exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.Unsuppo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const modals_1 = require("../../state/modals");
 const SettingsContext_1 = require("../SettingsContext");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
@@ -62,7 +63,12 @@ const computedValue = {
     pointerEvents: 'none',
 };
 const fixLinkBase = {
-    color: colors_1.LIGHT_TEXT,
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
     display: 'inline-block',
     fontSize: 10,
     fontStyle: 'normal',
@@ -73,7 +79,7 @@ const fixLinkBase = {
     appearance: 'none',
     background: 'none',
     border: 'none',
-    cursor: 'pointer',
+    cursor: 'default',
     padding: 0,
 };
 const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
@@ -94,7 +100,7 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
         event.stopPropagation();
     };
     return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
+            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();
                 }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));

package/dist/components/Timeline/TimelineSelection.js

@@ -1056,7 +1056,7 @@ const useTimelineRowSelection = (nodePathInfo) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { reveal: true });
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
     }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,

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

@@ -6,4 +6,6 @@ export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;
+    readonly cascadedStart: number;
+    readonly localStart: number;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const drag_aware_double_click_1 = require("../../helpers/drag-aware-double-click");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
@@ -69,17 +70,58 @@ const TimelineViewport_1 = require("./TimelineViewport");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 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 TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
+const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, cascadedStart: cascadedStart, localStart: localStart }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onDoubleClick, }) => {
-    var _a, _b, _c;
+const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clipped }) => {
+    const outerStyle = (0, react_1.useMemo)(() => {
+        return {
+            backgroundColor: clipped ? colors_1.TIMELINE_BACKGROUND_COLOR : undefined,
+            height: '100%',
+            left,
+            minWidth: 2,
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: 0,
+            width,
+        };
+    }, [clipped, left, width]);
+    const innerStyle = (0, react_1.useMemo)(() => {
+        const showLeftEdge = leftEdgeVisible && !clipped;
+        const maskImage = clipped
+            ? 'linear-gradient(to right, transparent, black 20%)'
+            : undefined;
+        return {
+            backgroundColor: colors_1.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR,
+            border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.TIMELINE_NEGATIVE_START_BORDER_COLOR}`,
+            borderBottomLeftRadius: showLeftEdge ? 2 : 0,
+            borderLeft: showLeftEdge
+                ? `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.TIMELINE_NEGATIVE_START_BORDER_COLOR}`
+                : 'none',
+            borderRight: 'none',
+            borderTopLeftRadius: showLeftEdge ? 2 : 0,
+            boxSizing: 'border-box',
+            height: '100%',
+            maskImage,
+            position: 'absolute',
+            top: 0,
+            WebkitMaskImage: maskImage,
+            width: '100%',
+        };
+    }, [clipped, leftEdgeVisible]);
+    return (jsx_runtime_1.jsx("div", { style: outerStyle, children: jsx_runtime_1.jsx("div", { style: innerStyle }) }));
+};
+const TimelineSequenceNegativeStart = react_1.default.memo(TimelineSequenceNegativeStartInner);
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
+    var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
@@ -113,13 +155,19 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     const isPostmounting = relativeFrameWithPostmount >= 0 &&
         relativeFrameWithPostmount < ((_b = s.postmountDisplay) !== null && _b !== void 0 ? _b : 0) &&
         !isInRange;
+    const negativeStartEnd = negativeStart
+        ? negativeStart.left + negativeStart.width
+        : 0;
     const actualStyle = (0, react_1.useMemo)(() => {
+        const hasSelectedTrack = selectedItems.some((item) => item.type !== 'guide');
         return {
             ...style,
-            opacity: isInRange ? 1 : 0.5,
+            background: negativeStart ? colors_1.TRANSPARENT : style.background,
+            border: negativeStart ? 'none' : style.border,
+            opacity: hasSelectedTrack && !selected && !containsSelection ? 0.75 : 1,
         };
-    }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: [premount ? (jsx_runtime_1.jsx("div", { style: {
+    }, [containsSelection, negativeStart, selected, selectedItems, 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,
                     height: '100%',
@@ -148,20 +196,46 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&
                 (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
-                    paddingLeft: 5 + ((_c = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _c !== void 0 ? _c : 0),
+                    paddingLeft: 5 + ((_c = negativeStart === null || negativeStart === void 0 ? void 0 : negativeStart.width) !== null && _c !== void 0 ? _c : 0) + ((_d = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _d !== void 0 ? _d : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
+                        background: style.background,
+                        border: style.border,
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: style.borderBottomRightRadius,
+                        borderLeft: 'none',
+                        borderRightColor: style.borderRightColor,
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: style.borderTopRightRadius,
+                        boxSizing: 'border-box',
+                        height: '100%',
+                        left: negativeStartEnd,
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: 0,
+                        width: `calc(100% - ${negativeStartEnd}px)`,
+                    }, children: jsx_runtime_1.jsx("div", { style: {
+                            height: '100%',
+                            left: -negativeStartEnd,
+                            position: 'absolute',
+                            top: 0,
+                            width: style.width,
+                        }, children: content }) })
+            ] })) : (content) }));
 };
-const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, }) => {
+const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     // 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;
-    var _d, _e, _f, _g, _h, _j;
+    var _d, _e, _f, _g, _h, _j, _k;
     const video = remotion_1.Internals.useVideo();
     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 extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
@@ -215,6 +289,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             button: e.button,
             canOpenInEditor,
             numberOfConnectedCompositions: connectedCompositions.length,
+            sequenceWasDragged: dragAwareDoubleClick.consumePointerGestureWasDragged(),
         });
         if (action === null) {
             return;
@@ -233,6 +308,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [
         canOpenInEditor,
         connectedCompositions,
+        dragAwareDoubleClick,
         openInEditor,
         s,
         selectComposition,
@@ -399,6 +475,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePathInfo,
         windowWidth,
         timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
+        onDragEnd: dragAwareDoubleClick.endPointerGesture,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -406,10 +483,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const displayDurationInFrames = s.loopDisplay
         ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
         : s.duration;
-    const { marginLeft, width, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
+    const { marginLeft, width, negativeStartWidth, negativeStartClipped, premountWidth, postmountWidth, } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
             durationInFrames: displayDurationInFrames,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
+            cascadedStart,
             startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
             maxMediaDuration: effectiveMaxMediaDuration,
             video,
@@ -418,6 +496,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             postmountDisplay: s.postmountDisplay,
         });
     }, [
+        cascadedStart,
         displayDurationInFrames,
         effectiveMaxMediaDuration,
         s,
@@ -431,12 +510,20 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         return (0, get_timeline_sequence_visible_layout_1.getTimelineSequenceVisibleLayout)({
             marginLeft,
             width,
+            negativeStartWidth,
             premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0,
             postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0,
             renderWindowLeft: renderWindow.left - timeline_layout_1.TIMELINE_PADDING,
             renderWindowWidth: renderWindow.width,
         });
-    }, [marginLeft, postmountWidth, premountWidth, renderWindow, width]);
+    }, [
+        marginLeft,
+        negativeStartWidth,
+        postmountWidth,
+        premountWidth,
+        renderWindow,
+        width,
+    ]);
     const mediaVisualizationStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
         var _c, _d;
@@ -446,6 +533,9 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             height: '100%',
         };
     }, [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;
     const style = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
@@ -457,14 +547,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                         ? colors_1.TIMELINE_IMAGE_GRADIENT
                         : colors_1.BLUE,
             border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.WHITE_ALPHA_20}`,
-            borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible)
+            borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) && !negativeStartClipped
                 ? colors_1.WHITE_ALPHA_20
                 : colors_1.TRANSPARENT,
             borderRightColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible)
                 ? colors_1.WHITE_ALPHA_20
                 : colors_1.TRANSPARENT,
-            borderTopLeftRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) ? 2 : 0,
-            borderBottomLeftRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) ? 2 : 0,
+            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,
             position: 'absolute',
@@ -474,7 +564,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             color: colors_1.WHITE,
             overflow: 'hidden',
         };
-    }, [s.type, visibleLayout]);
+    }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -495,13 +585,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const mediaDisplayDurationInFrames = visibleLayout.media
         ? visibleLayout.media.width / frameIncrement
         : 0;
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, 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, visualizationWidth: visibleLayout.media.width, 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 })), showLeftEdgeDragHandle &&
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, 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 })), showLeftEdgeDragHandle &&
                 visibleLayout.leftEdgeVisible &&
+                negativeStartWidth === 0 &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle &&
+                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 &&
                 visibleLayout.rightEdgeVisible &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
+                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] }));
     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

@@ -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,7 +911,7 @@ 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: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })

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

@@ -128,18 +128,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 {};