@remotion/studio 4.0.519 → 4.0.520

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -1,118 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineDeleteKeybindings = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const editor_guides_1 = require("../../state/editor-guides");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
-const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const imperative_state_1 = require("./imperative-state");
-const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
-        const { clientId } = previewServerState;
-        const handleDelete = () => {
-            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
-            const { selectedItems, clearSelection, selectItems } = currentSelection.current;
-            const sequences = sequencesRef.current;
-            const propStatuses = propStatusesRef.current;
-            if (selectedItems.length === 0) {
-                return;
-            }
-            const selectedGuide = selectedItems.find((item) => item.type === 'guide');
-            if (selectedGuide) {
-                setGuidesList((prevGuides) => {
-                    const newGuides = prevGuides.filter((guide) => guide.id !== selectedGuide.guideId);
-                    (0, editor_guides_1.persistGuidesList)(newGuides);
-                    return newGuides;
-                });
-                clearSelection();
-                return;
-            }
-            const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
-                selections: selectedItems,
-                sequences,
-                overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                setPropStatuses,
-                clientId,
-                confirm,
-                propStatuses,
-                timelinePosition,
-            });
-            if (deletePromise !== null) {
-                deletePromise
-                    .then((deleted) => {
-                    if (deleted) {
-                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
-                            selections: selectedItems,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                            propStatuses,
-                            timelinePosition,
-                        });
-                        if (nextSelection.length === 0) {
-                            clearSelection();
-                        }
-                        else {
-                            selectItems(nextSelection);
-                        }
-                    }
-                })
-                    .catch(() => undefined);
-                return;
-            }
-            const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
-            if (easingSelections.length === selectedItems.length) {
-                const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
-                    selections: easingSelections,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    propStatuses,
-                    setPropStatuses,
-                    clientId,
-                    easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
-                });
-                if (resetEasingPromise !== null) {
-                    resetEasingPromise.catch(() => undefined);
-                    return;
-                }
-            }
-            const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
-                selections: selectedItems,
-                sequences,
-                overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                propStatuses,
-                setPropStatuses,
-                clientId,
-            });
-            if (resetPromise !== null) {
-                resetPromise.catch(() => undefined);
-            }
-        };
         const backspace = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Backspace',
-            callback: handleDelete,
+            callback: () => deleteTimelineItems(null),
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -121,7 +37,7 @@ const TimelineDeleteKeybindings = () => {
         const deleteKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Delete',
-            callback: handleDelete,
+            callback: () => deleteTimelineItems(null),
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -190,13 +106,12 @@ const TimelineDeleteKeybindings = () => {
         canSelect,
         confirm,
         currentSelection,
+        deleteTimelineItems,
         keybindings,
         overrideIdToNodePathMappings,
         propStatusesRef,
         previewServerState,
         sequencesRef,
-        setGuidesList,
-        setPropStatuses,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDragHandler.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
@@ -73,22 +74,32 @@ const getClientXWithScroll = (x) => {
 };
 const TimelineDragHandler = () => {
     const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelineSize = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
+        var _b, _c, _d, _e;
         if (!canvasContent) {
             return {};
         }
-        const zoom = canvasContent.type === 'composition'
-            ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const durationInFrames = (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1;
+        const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames,
+            timelineViewportWidth: (_d = (_c = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _d !== void 0 ? _d : 0,
+            zoom: canvasContent.type === 'composition'
+                ? ((_e = zoomMap[canvasContent.compositionId]) !== null && _e !== void 0 ? _e : null)
+                : null,
+        });
         return {
             ...container,
-            width: 100 * zoom + '%',
+            width: (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom }),
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
-    }, [canvasContent, zoomMap]);
+    }, [canvasContent, timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width, video === null || video === void 0 ? void 0 : video.durationInFrames, zoomMap]);
     const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
         ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
             (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);
@@ -100,7 +111,6 @@ const TimelineDragHandler = () => {
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {
     var _a;
-    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -108,8 +118,8 @@ const TimelineDragHandlerInner = () => {
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
+    const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -65,7 +65,6 @@ const TimelineInOutDragHandler = () => {
 exports.TimelineInOutDragHandler = TimelineInOutDragHandler;
 const TimelineInOutDragHandlerInner = () => {
     var _a;
-    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -82,8 +81,8 @@ const TimelineInOutDragHandlerInner = () => {
         }
         return (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth);
     }, [timelineWidth, videoConfig.durationInFrames]);
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
+    const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const onInPointerDown = (0, react_1.useCallback)((e) => {

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePinchZoom = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const editor_zoom_gestures_1 = require("../../state/editor-zoom-gestures");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
@@ -22,6 +23,15 @@ const TimelinePinchZoom = () => {
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const zoomRef = (0, react_1.useRef)(zoom);
     zoomRef.current = zoom;
+    const getCurrentTimelineZoom = (0, react_1.useCallback)((compositionId) => {
+        var _a;
+        var _b, _c, _d;
+        return (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames: (_b = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _b !== void 0 ? _b : 1,
+            timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
+            zoom: (_d = zoomRef.current[compositionId]) !== null && _d !== void 0 ? _d : null,
+        });
+    }, [videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames]);
     const pinchBaseZoomRef = (0, react_1.useRef)(null);
     const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
     const touchPinchRef = (0, react_1.useRef)(null);
@@ -89,7 +99,6 @@ const TimelinePinchZoom = () => {
             suppressWheelFromWebKitPinchRef.current = false;
         };
         const onGestureStart = (event) => {
-            var _a;
             const e = event;
             if (!isVideoComposition) {
                 return;
@@ -106,7 +115,7 @@ const TimelinePinchZoom = () => {
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            pinchBaseZoomRef.current = (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+            pinchBaseZoomRef.current = getCurrentTimelineZoom(canvasContent.compositionId);
         };
         const onGestureChange = (event) => {
             const e = event;
@@ -153,6 +162,7 @@ const TimelinePinchZoom = () => {
         isVideoComposition,
         videoConfig,
         canvasContent,
+        getCurrentTimelineZoom,
         setZoom,
     ]);
     (0, react_1.useEffect)(() => {
@@ -161,7 +171,6 @@ const TimelinePinchZoom = () => {
             return;
         }
         const onTouchStart = (event) => {
-            var _a;
             if (event.touches.length !== 2) {
                 touchPinchRef.current = null;
                 return;
@@ -181,7 +190,7 @@ const TimelinePinchZoom = () => {
             }
             touchPinchRef.current = {
                 initialDistance,
-                initialZoom: (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM,
+                initialZoom: getCurrentTimelineZoom(canvasContent.compositionId),
             };
         };
         const onTouchMove = (event) => {
@@ -233,6 +242,7 @@ const TimelinePinchZoom = () => {
         isVideoComposition,
         videoConfig,
         canvasContent,
+        getCurrentTimelineZoom,
         setZoom,
     ]);
     return null;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePlayCursorSyncer = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
@@ -10,9 +11,10 @@ const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 let lastTimelinePositionWhileScrolling = null;
 const TimelinePlayCursorSyncer = () => {
     var _a;
+    var _b, _c, _d;
     const video = remotion_1.Internals.useVideo();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const { playbackRate } = remotion_1.Internals.usePlaybackRate();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -21,9 +23,11 @@ const TimelinePlayCursorSyncer = () => {
         : null;
     // Asset previews have a synthetic video config, but no composition ID
     // with which to look up a persisted timeline zoom.
-    const zoom = compositionId
-        ? ((_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+        durationInFrames: (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1,
+        timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
+        zoom: compositionId ? ((_d = zoomMap[compositionId]) !== null && _d !== void 0 ? _d : null) : null,
+    });
     if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);
         (0, imperative_state_1.setCurrentZoom)(zoom);

package/dist/components/Timeline/TimelineSequence.js

@@ -50,11 +50,8 @@ const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
 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 delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 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");
@@ -69,6 +66,7 @@ const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEd
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineViewport_1 = require("./TimelineViewport");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
@@ -121,8 +119,6 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     var _a, _b, _c;
     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) {
@@ -160,14 +156,13 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
         ? negativeStart.left + negativeStart.width
         : 0;
     const actualStyle = (0, react_1.useMemo)(() => {
-        const hasSelectedTrack = selectedItems.some((item) => item.type !== 'guide');
         return {
             ...style,
             background: negativeStart ? colors_1.TRANSPARENT : style.background,
             border: negativeStart ? 'none' : style.border,
-            opacity: hasSelectedTrack && !selected && !containsSelection ? 0.75 : 1,
+            opacity: selected ? 1 : 0.75,
         };
-    }, [containsSelection, negativeStart, selected, selectedItems, style]);
+    }, [negativeStart, selected, style]);
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [premount ? (jsx_runtime_1.jsx("div", { style: {
                     left: premount.left,
                     width: premount.width,
@@ -280,6 +275,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
@@ -348,41 +344,17 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
-    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath || deleteDisabled) {
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            !nodePath ||
+            !nodePathInfo ||
+            deleteDisabled) {
             return;
         }
-        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const shouldDelete = await confirm({
-                title: 'Delete sequence?',
-                message: 'This sequence is programmatically duplicated ' +
-                    nodePathInfo.numberOfSequencesWithThisNodePath +
-                    ' times in the code. Deleting removes all instances. Continue?',
-                confirmLabel: 'Delete',
-            });
-            if (!shouldDelete) {
-                return;
-            }
-        }
-        try {
-            const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                nodes: [
-                    {
-                        fileName: validatedLocation.source,
-                        nodePath: nodePath.nodePath,
-                    },
-                ],
-            });
-            if (!result.success) {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        }
+        deleteTimelineItems([{ type: 'sequence', nodePathInfo }]);
     }, [
-        confirm,
         deleteDisabled,
+        deleteTimelineItems,
         nodePath,
         nodePathInfo,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
@@ -391,8 +363,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         if (!previewInteractive || selectedSequenceNodePathInfos === null) {
             return;
         }
-        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
-    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+        deleteTimelineItems(selectedSequenceNodePathInfos.map((selectedNodePathInfo) => ({
+            type: 'sequence',
+            nodePathInfo: selectedNodePathInfo,
+        })));
+    }, [deleteTimelineItems, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -53,7 +53,6 @@ const transform_3d_mode_1 = require("../../state/transform-3d-mode");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
-const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
@@ -62,7 +61,6 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const reorder_sequence_api_1 = require("../reorder-sequence-api");
 const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
-const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 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");
@@ -77,6 +75,7 @@ const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
@@ -194,6 +193,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
@@ -261,41 +261,17 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
-    const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (deleteDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+    const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (deleteDisabled ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
+            !nodePath ||
+            !nodePathInfo) {
             return;
         }
-        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const shouldDelete = await confirm({
-                title: 'Delete sequence?',
-                message: 'This sequence is programmatically duplicated ' +
-                    nodePathInfo.numberOfSequencesWithThisNodePath +
-                    ' times in the code. Deleting removes all instances. Continue?',
-                confirmLabel: 'Delete',
-            });
-            if (!shouldDelete) {
-                return;
-            }
-        }
-        try {
-            const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                nodes: [
-                    {
-                        fileName: validatedLocation.source,
-                        nodePath: nodePath.nodePath,
-                    },
-                ],
-            });
-            if (!result.success) {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        }
+        deleteTimelineItems([{ type: 'sequence', nodePathInfo }]);
     }, [
-        confirm,
         deleteDisabled,
+        deleteTimelineItems,
         nodePath,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
         nodePathInfo,
@@ -304,8 +280,11 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         if (!previewInteractive || selectedSequenceNodePathInfos === null) {
             return;
         }
-        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
-    }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+        deleteTimelineItems(selectedSequenceNodePathInfos.map((selectedNodePathInfo) => ({
+            type: 'sequence',
+            nodePathInfo: selectedNodePathInfo,
+        })));
+    }, [deleteTimelineItems, previewInteractive, selectedSequenceNodePathInfos]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -43,7 +44,6 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const pointer_session_1 = require("../../helpers/pointer-session");
-const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const editor_snapping_1 = require("../../state/editor-snapping");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -168,9 +168,9 @@ const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
     if (!(0, exports.isTransitionSeriesSequence)(sequence)) {
         return 1;
     }
-    const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
+    const siblings = (0, canvas_1.sortItemsByCommitOrder)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
         ((0, exports.isTransitionSeriesSequence)(candidate) ||
-            isTransitionSeriesTransition(candidate))));
+            isTransitionSeriesTransition(candidate))), (candidate) => candidate.timelineOrder);
     const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);
     if (sequenceIndex === -1) {
         return 1;

package/dist/components/Timeline/TimelineSlider.js

@@ -60,8 +60,8 @@ const TimelineSliderInner = () => {
         throw new Error('Unexpectedly did not have timeline width');
     }
     const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : null)
+        : null;
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const el = ref.current;

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 exports.TimelineWidthContext = (0, react_1.createContext)(null);
@@ -15,18 +16,24 @@ const TimelineWidthProvider = ({ children }) => {
     });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const width = (0, react_1.useMemo)(() => {
         var _a, _b;
-        var _c, _d, _e;
-        const zoom = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-            ? ((_c = zoomMap[canvasContent.compositionId]) !== null && _c !== void 0 ? _c : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
-        const scrollableWidth = (_d = size === null || size === void 0 ? void 0 : size.width) !== null && _d !== void 0 ? _d : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        var _c, _d, _e, _f;
+        const scrollableWidth = (_c = size === null || size === void 0 ? void 0 : size.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
         if (scrollableWidth === undefined) {
-            return (_e = (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _e !== void 0 ? _e : null;
+            return (_d = (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _d !== void 0 ? _d : null;
         }
-        return scrollableWidth * zoom;
-    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, zoomMap]);
+        const durationInFrames = (_e = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _e !== void 0 ? _e : 1;
+        const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames,
+            timelineViewportWidth: scrollableWidth,
+            zoom: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+                ? ((_f = zoomMap[canvasContent.compositionId]) !== null && _f !== void 0 ? _f : null)
+                : null,
+        });
+        return (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom });
+    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames, zoomMap]);
     return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: width, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;