@remotion/studio 4.0.513 → 4.0.514

package/dist/components/Timeline/TimelineSelection.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
@@ -21,6 +22,7 @@ const imperative_state_1 = require("./imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
@@ -294,12 +296,12 @@ const extendTimelineMarqueeSelection = ({ currentSelection, marqueeSelection, })
 exports.extendTimelineMarqueeSelection = extendTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    revealRequest: null,
     selectedItems: [],
     isSelected: () => false,
     selectItem: () => undefined,
     selectItems: () => undefined,
     registerMarqueeSelectableItem: () => () => undefined,
-    registerFocusableItem: () => () => undefined,
     getMarqueeSelection: () => ({
         lockedSelectionKind: null,
         selectedItems: [],
@@ -317,7 +319,6 @@ const TimelineSelectionOrderProvider = ({ children, items }) => {
 };
 exports.TimelineSelectionOrderProvider = TimelineSelectionOrderProvider;
 const CurrentTimelineSelectionContext = (0, react_1.createContext)(null);
-const TIMELINE_SELECTION_REVEAL_RETRY_COUNT = 2;
 const parseEffectIndex = (effectIndex) => {
     const parsed = Number(effectIndex);
     if (!Number.isInteger(parsed) || parsed < 0) {
@@ -644,13 +645,12 @@ const TimelineSelectionProvider = ({ children }) => {
     const canSelect = (0, interactivity_enabled_1.isStudioSelectionEnabled)() &&
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
+    const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
-    const focusableItems = (0, react_1.useRef)(new Map());
-    const focusableRegistrationCounter = (0, react_1.useRef)(0);
     const [revealRequest, setRevealRequest] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
@@ -661,7 +661,9 @@ const TimelineSelectionProvider = ({ children }) => {
         }
     }, [canSelect]);
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
-        (!window.remotion_isReadOnlyStudio || item.type === 'sequence'), [canSelect]);
+        (!window.remotion_isReadOnlyStudio ||
+            keyframeOperationsAvailable ||
+            item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
     const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
         if (selectionScope.current !== timelineSelectionScope) {
             return exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -673,58 +675,11 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [timelineSelectionScope]);
     const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
     const availableSelectedItems = availableSelectionState.selectedItems;
-    const revealSelectionKey = (0, react_1.useCallback)((selectedKey) => {
-        let cancelled = false;
-        let animationFrame = null;
-        const reveal = (attempt) => {
-            var _a;
-            var _b;
-            if (cancelled) {
-                return;
-            }
-            const scrollParent = timeline_refs_1.timelineVerticalScroll.current;
-            const focusableRegistrations = focusableItems.current.get(selectedKey);
-            const focusableElement = scrollParent && focusableRegistrations
-                ? [...focusableRegistrations.values()]
-                    .sort((a, b) => a.order - b.order)
-                    .map((registered) => registered.getElement())
-                    .find((element) => element !== null && scrollParent.contains(element))
-                : null;
-            const rect = (_b = focusableElement === null || focusableElement === void 0 ? void 0 : focusableElement.getBoundingClientRect()) !== null && _b !== void 0 ? _b : (_a = marqueeSelectableItems.current.get(selectedKey)) === null || _a === void 0 ? void 0 : _a.getRect();
-            if (!scrollParent || !rect) {
-                if (attempt < TIMELINE_SELECTION_REVEAL_RETRY_COUNT) {
-                    animationFrame = requestAnimationFrame(() => reveal(attempt + 1));
-                }
-                return;
-            }
-            const parentRect = scrollParent.getBoundingClientRect();
-            if (rect.top >= parentRect.top && rect.bottom <= parentRect.bottom) {
-                return;
-            }
-            const elementCenter = rect.top + rect.height / 2;
-            const parentCenter = parentRect.top + parentRect.height / 2;
-            scrollParent.scrollTop += elementCenter - parentCenter;
-        };
-        animationFrame = requestAnimationFrame(() => reveal(0));
-        return () => {
-            cancelled = true;
-            if (animationFrame !== null) {
-                cancelAnimationFrame(animationFrame);
-            }
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (revealRequest === null) {
-            return;
-        }
-        return revealSelectionKey(revealRequest.key);
-    }, [revealRequest, revealSelectionKey]);
     const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
-        const key = (0, exports.getTimelineSelectionKey)(item);
         setRevealRequest((previousRequest) => {
             var _a;
             return ({
-                key,
+                item,
                 token: ((_a = previousRequest === null || previousRequest === void 0 ? void 0 : previousRequest.token) !== null && _a !== void 0 ? _a : 0) + 1,
             });
         });
@@ -832,25 +787,6 @@ const TimelineSelectionProvider = ({ children }) => {
             marqueeSelectableItems.current.delete(key);
         };
     }, []);
-    const registerFocusableItem = (0, react_1.useCallback)((item, getElement) => {
-        var _a;
-        const key = (0, exports.getTimelineSelectionKey)(item);
-        const registrationOrder = focusableRegistrationCounter.current;
-        focusableRegistrationCounter.current += 1;
-        const registrations = (_a = focusableItems.current.get(key)) !== null && _a !== void 0 ? _a : new Map();
-        registrations.set(registrationOrder, {
-            getElement,
-            order: registrationOrder,
-        });
-        focusableItems.current.set(key, registrations);
-        return () => {
-            const latestRegistrations = focusableItems.current.get(key);
-            latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.delete(registrationOrder);
-            if ((latestRegistrations === null || latestRegistrations === void 0 ? void 0 : latestRegistrations.size) === 0) {
-                focusableItems.current.delete(key);
-            }
-        };
-    }, []);
     const getMarqueeSelectionForRect = (0, react_1.useCallback)((marqueeRect, lockedSelectionKind) => {
         const candidates = [...marqueeSelectableItems.current.values()]
             .sort((a, b) => a.order - b.order)
@@ -891,23 +827,23 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [availableSelectedItems]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        revealRequest,
         selectedItems: availableSelectedItems,
         isSelected,
         selectItem,
         selectItems,
         registerMarqueeSelectableItem,
-        registerFocusableItem,
         getMarqueeSelection: getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
     }), [
         canSelect,
+        revealRequest,
         availableSelectedItems,
         isSelected,
         selectItem,
         selectItems,
         registerMarqueeSelectableItem,
-        registerFocusableItem,
         getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
@@ -938,6 +874,7 @@ const useTimelineMarqueeSelection = () => {
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const [marqueeRect, setMarqueeRect] = (0, react_1.useState)(null);
     const onPointerDownCapture = (0, react_1.useCallback)((event) => {
+        var _a, _b;
         if (!isHighestContext) {
             return;
         }
@@ -955,15 +892,18 @@ const useTimelineMarqueeSelection = () => {
             return;
         }
         const { currentTarget: target } = event;
+        const scrollable = timeline_refs_1.scrollableRef.current;
+        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
+        const initialScrollLeft = (_a = scrollable === null || scrollable === void 0 ? void 0 : scrollable.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        const initialScrollTop = (_b = verticalScroll === null || verticalScroll === void 0 ? void 0 : verticalScroll.scrollTop) !== null && _b !== void 0 ? _b : 0;
         const initialBounds = target.getBoundingClientRect();
-        const marqueeBounds = {
-            bottom: initialBounds.bottom,
-            left: initialBounds.left,
-            right: initialBounds.right,
-            top: initialBounds.top,
-        };
         const start = (0, exports.getClampedTimelineMarqueePoint)({
-            bounds: marqueeBounds,
+            bounds: {
+                bottom: initialBounds.bottom,
+                left: initialBounds.left,
+                right: initialBounds.right,
+                top: initialBounds.top,
+            },
             x: event.clientX,
             y: event.clientY,
         });
@@ -975,34 +915,64 @@ const useTimelineMarqueeSelection = () => {
         document.body.style.webkitUserSelect = 'none';
         let hasDragged = false;
         let lockedSelectionKind = null;
+        let lastClientX = event.clientX;
+        let lastClientY = event.clientY;
         const extendSelection = event.metaKey || event.ctrlKey;
         const selectionBeforeMarquee = selectedItems;
-        const cleanup = () => {
-            document.body.style.userSelect = previousUserSelect;
-            document.body.style.webkitUserSelect = previousWebkitUserSelect;
-            setMarqueeRect(null);
-        };
         const updateSelection = (clientX, clientY) => {
+            var _a, _b, _c;
+            lastClientX = clientX;
+            lastClientY = clientY;
+            // The container moves when the timeline scrolls vertically, so read
+            // the bounds live. Restrict them to the visible viewport of the
+            // vertical scroller so the fixed-positioned marquee cannot paint
+            // outside the visible timeline area.
+            const liveBounds = target.getBoundingClientRect();
+            const verticalRect = (_a = verticalScroll === null || verticalScroll === void 0 ? void 0 : verticalScroll.getBoundingClientRect()) !== null && _a !== void 0 ? _a : null;
+            const bounds = {
+                bottom: verticalRect === null
+                    ? liveBounds.bottom
+                    : Math.min(liveBounds.bottom, verticalRect.bottom),
+                left: liveBounds.left,
+                right: liveBounds.right,
+                top: verticalRect === null
+                    ? liveBounds.top
+                    : Math.max(liveBounds.top, verticalRect.top),
+            };
+            // The anchor is fixed to timeline content, not to the screen:
+            // compensate for any scrolling that happened since pointerdown so the
+            // marquee keeps covering the originally spanned content while
+            // edge auto-scrolling. It is deliberately not clamped to the bounds -
+            // it may sit outside the viewport, and the selection should still
+            // include everything between it and the pointer.
+            const scrollDeltaX = ((_b = scrollable === null || scrollable === void 0 ? void 0 : scrollable.scrollLeft) !== null && _b !== void 0 ? _b : 0) - initialScrollLeft;
+            const scrollDeltaY = ((_c = verticalScroll === null || verticalScroll === void 0 ? void 0 : verticalScroll.scrollTop) !== null && _c !== void 0 ? _c : 0) - initialScrollTop;
+            const anchorX = startX - scrollDeltaX;
+            const anchorY = startY - scrollDeltaY;
             const current = (0, exports.getClampedTimelineMarqueePoint)({
-                bounds: marqueeBounds,
+                bounds,
                 x: clientX,
                 y: clientY,
             });
             if (!hasDragged &&
-                Math.max(Math.abs(current.x - startX), Math.abs(current.y - startY)) <
-                    3) {
+                Math.max(Math.abs(current.x - anchorX), Math.abs(current.y - anchorY)) < 3) {
                 return;
             }
             hasDragged = true;
             const rect = (0, exports.getNormalizedTimelineMarqueeRect)({
                 currentX: current.x,
                 currentY: current.y,
-                startX,
-                startY,
+                startX: anchorX,
+                startY: anchorY,
             });
             const nextSelection = getMarqueeSelection(rect, lockedSelectionKind);
             lockedSelectionKind = nextSelection.lockedSelectionKind;
-            setMarqueeRect(rect);
+            setMarqueeRect({
+                bottom: Math.min(rect.bottom, bounds.bottom),
+                left: Math.max(rect.left, bounds.left),
+                right: Math.min(rect.right, bounds.right),
+                top: Math.max(rect.top, bounds.top),
+            });
             selectItems(extendSelection
                 ? (0, exports.extendTimelineMarqueeSelection)({
                     currentSelection: selectionBeforeMarquee,
@@ -1010,8 +980,35 @@ const useTimelineMarqueeSelection = () => {
                 })
                 : nextSelection.selectedItems);
         };
+        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeVertical: true,
+            onTick: (directions) => {
+                if (scrollable && directions.x !== null) {
+                    scrollable.scrollLeft +=
+                        directions.x === 'left' ? -timeline_scroll_logic_1.SCROLL_INCREMENT : timeline_scroll_logic_1.SCROLL_INCREMENT;
+                }
+                if (verticalScroll && directions.y !== null) {
+                    verticalScroll.scrollTop +=
+                        directions.y === 'up'
+                            ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
+                            : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
+                }
+                updateSelection(lastClientX, lastClientY);
+            },
+        });
+        const cleanup = () => {
+            autoScroll.stop();
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.webkitUserSelect = previousWebkitUserSelect;
+            setMarqueeRect(null);
+        };
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
+            // Only auto-scroll for an actual marquee drag, not a plain click
+            // near an edge
+            if (hasDragged) {
+                autoScroll.update(moveEvent);
+            }
         };
         (0, pointer_session_1.startCapturedPointerSession)({
             event,
@@ -1049,16 +1046,6 @@ const useTimelineMarqueeSelectableItem = (item, ref) => {
     }, [item, ref, registerMarqueeSelectableItem]);
 };
 exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
-const useTimelineFocusableItem = (item, ref) => {
-    const { registerFocusableItem } = (0, exports.useTimelineSelection)();
-    (0, react_1.useEffect)(() => {
-        if (item === null) {
-            return;
-        }
-        return registerFocusableItem(item, () => ref.current);
-    }, [item, ref, registerFocusableItem]);
-};
-exports.useTimelineFocusableItem = useTimelineFocusableItem;
 const useTimelineRowSelection = (nodePathInfo) => {
     const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
     const selectableTimelineItemsRef = (0, react_1.useContext)(SelectableTimelineItemsContext);

package/dist/components/Timeline/TimelineSequence.js

@@ -47,16 +47,16 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
 const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
-const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
+const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 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_timeline_media_visualization_layout_1 = require("./get-timeline-media-visualization-layout");
+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");
 const timeline_asset_link_1 = require("./timeline-asset-link");
@@ -65,6 +65,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
+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");
@@ -75,8 +76,8 @@ const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFr
     }
     return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onDoubleClick, }) => {
-    var _a, _b;
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onDoubleClick, }) => {
+    var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
@@ -118,8 +119,9 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
             opacity: isInRange ? 1 : 0.5,
         };
     }, [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: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
-                    width: premountWidth,
+    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: {
+                    left: premount.left,
+                    width: premount.width,
                     height: '100%',
                     background: `repeating-linear-gradient(
 								-45deg,
@@ -129,8 +131,9 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
 								${isPremounting ? colors_1.WHITE_ALPHA_50 : colors_1.WHITE_ALPHA_20} 4px
 							)`,
                     position: 'absolute',
-                } })) : null, postmountWidth ? (jsx_runtime_1.jsx("div", { style: {
-                    width: postmountWidth,
+                } })) : null, postmount ? (jsx_runtime_1.jsx("div", { style: {
+                    left: postmount.left,
+                    width: postmount.width,
                     height: '100%',
                     background: `repeating-linear-gradient(
 								-45deg,
@@ -140,13 +143,12 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
 								${isPostmounting ? colors_1.WHITE_ALPHA_50 : colors_1.WHITE_ALPHA_20} 4px
 							)`,
                     position: 'absolute',
-                    right: 0,
                 } })) : null, children, s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&
                 (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
-                    paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+                    paddingLeft: 5 + ((_c = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _c !== void 0 ? _c : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -159,6 +161,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     var _a, _b, _c;
     var _d, _e, _f, _g, _h, _j;
     const video = remotion_1.Internals.useVideo();
+    const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
     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);
@@ -270,7 +273,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             }
         }
         try {
-            const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
+            const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
                 nodes: [
                     {
                         fileName: validatedLocation.source,
@@ -403,7 +406,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const displayDurationInFrames = s.loopDisplay
         ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
         : s.duration;
-    const { marginLeft, width, naturalWidth, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
+    const { marginLeft, width, 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,
@@ -421,21 +424,30 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         video,
         windowWidth,
     ]);
-    const mediaVisualizationLayout = (0, react_1.useMemo)(() => {
-        return (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
-            visualizationWidth: width,
+    const visibleLayout = (0, react_1.useMemo)(() => {
+        if (renderWindow === null) {
+            return null;
+        }
+        return (0, get_timeline_sequence_visible_layout_1.getTimelineSequenceVisibleLayout)({
+            marginLeft,
+            width,
             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,
         });
-    }, [postmountWidth, premountWidth, width]);
+    }, [marginLeft, postmountWidth, premountWidth, renderWindow, width]);
     const mediaVisualizationStyle = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        var _c, _d;
         return {
-            width: mediaVisualizationLayout.width,
-            marginLeft: mediaVisualizationLayout.marginLeft,
+            width: (_c = (_a = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.media) === null || _a === void 0 ? void 0 : _a.width) !== null && _c !== void 0 ? _c : 0,
+            marginLeft: (_d = (_b = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.media) === null || _b === void 0 ? void 0 : _b.left) !== null && _d !== void 0 ? _d : 0,
             height: '100%',
         };
-    }, [mediaVisualizationLayout]);
+    }, [visibleLayout]);
     const style = (0, react_1.useMemo)(() => {
+        var _a, _b;
         return {
             background: s.type === 'audio'
                 ? colors_1.TIMELINE_AUDIO_GRADIENT
@@ -445,15 +457,24 @@ 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}`,
-            borderRadius: 2,
+            borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible)
+                ? 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,
+            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',
             height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
-            marginLeft,
-            width,
+            marginLeft: (_a = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.marginLeft) !== null && _a !== void 0 ? _a : 0,
+            width: (_b = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.width) !== null && _b !== void 0 ? _b : 0,
             color: colors_1.WHITE,
             overflow: 'hidden',
         };
-    }, [marginLeft, s.type, width]);
+    }, [s.type, visibleLayout]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -464,10 +485,23 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         ((0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) || fromCanUpdate) &&
         durationCanUpdate &&
         trimBeforeCanUpdate;
-    if (maxMediaDuration === null && !s.loopDisplay) {
+    if ((maxMediaDuration === null && !s.loopDisplay) || visibleLayout === null) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (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, visualizationWidth: mediaVisualizationLayout.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.width }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && 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 && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
+    const frameIncrement = (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / video.durationInFrames;
+    const mediaDisplayOffsetInFrames = visibleLayout.media
+        ? visibleLayout.media.offset / frameIncrement
+        : 0;
+    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 &&
+                visibleLayout.leftEdgeVisible &&
+                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 &&
+                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] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequenceItem: React.NamedExoticComponent<{
-    readonly children: React.ReactNode;
+    readonly afterDropLineOffset: number;
     readonly sequence: TSequence;
     readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nestedDepth: number;