@remotion/studio 4.0.519 → 4.0.521

package/dist/components/Timeline/TimelineFontWeightField.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFontWeightField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineNumberField_1 = require("./TimelineNumberField");
+const FONT_WEIGHT_KEYWORDS = ['normal', 'bold', 'bolder', 'lighter'];
+const TimelineFontWeightField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
+    const { fieldSchema } = field;
+    if (fieldSchema.type !== 'font-weight') {
+        throw new Error('TimelineFontWeightField rendered for non-font-weight field');
+    }
+    const sourceValue = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : fieldSchema.default;
+    const currentValue = effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : sourceValue;
+    const onSelectKeyword = (0, react_1.useCallback)((newValue) => {
+        if (newValue === propStatus.codeValue) {
+            return;
+        }
+        onDragValueChange(newValue);
+        onSave(newValue).finally(onDragEnd);
+    }, [onDragEnd, onDragValueChange, onSave, propStatus.codeValue]);
+    const keywordItems = (0, react_1.useMemo)(() => {
+        return FONT_WEIGHT_KEYWORDS.map((keyword) => ({
+            type: 'item',
+            id: keyword,
+            value: keyword,
+            label: keyword,
+            onClick: () => onSelectKeyword(keyword),
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: null,
+            disabled: false,
+        }));
+    }, [onSelectKeyword]);
+    if (typeof sourceValue === 'number') {
+        return (jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: currentValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
+    }
+    if (FONT_WEIGHT_KEYWORDS.includes(sourceValue)) {
+        return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: String(currentValue), values: keywordItems }));
+    }
+    return (jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: "ok", rightAlign: false, small: true, defaultValue: String(currentValue !== null && currentValue !== void 0 ? currentValue : ''), onBlur: (event) => {
+            const newValue = event.currentTarget.value;
+            if (newValue === propStatus.codeValue) {
+                onDragEnd();
+                return;
+            }
+            onSave(newValue).finally(onDragEnd);
+        }, onChange: (event) => onDragValueChange(event.currentTarget.value), onDoubleClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+            var _a;
+            if (event.key === 'Enter') {
+                event.currentTarget.blur();
+            }
+            if (event.key === 'Escape') {
+                event.currentTarget.value = String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '');
+                onDragEnd();
+                event.currentTarget.blur();
+            }
+        }, style: { ...timeline_field_utils_1.draggerStyle, boxSizing: 'border-box' } }, String(sourceValue)));
+};
+exports.TimelineFontWeightField = TimelineFontWeightField;

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/TimelineLayerChildren.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineLayerChildrenProvider: React.Provider<{
+    readonly collapsed: Record<string, boolean>;
+    readonly keys: Map<string, string>;
+    readonly parents: Set<string>;
+    readonly toggle: (key: string) => void;
+} | null>;
+export declare const useTimelineLayerChildren: (tracks: TimelineTrackData[], sequences: TSequence[], compositionId: string | null) => {
+    visibleTracks: TimelineTrackData[];
+    value: {
+        collapsed: Record<string, boolean>;
+        keys: Map<string, string>;
+        parents: Set<string>;
+        toggle: (key: string) => void;
+    };
+};
+export declare const TimelineLayerChildrenToggle: React.FC<{
+    readonly sequence: TSequence;
+}>;

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineLayerChildrenToggle = exports.useTimelineLayerChildren = exports.TimelineLayerChildrenProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
+const persist_boolean_map_1 = require("../../helpers/persist-boolean-map");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const STORAGE_KEY = 'remotion.editor.collapsedLayerChildren.v1';
+const TimelineLayerChildrenContext = (0, react_1.createContext)(null);
+exports.TimelineLayerChildrenProvider = TimelineLayerChildrenContext.Provider;
+const useTimelineLayerChildren = (tracks, sequences, compositionId) => {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(() => {
+        var _a;
+        try {
+            const parsed = JSON.parse((_a = window.localStorage.getItem(STORAGE_KEY)) !== null && _a !== void 0 ? _a : '{}');
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                return {};
+            }
+            return Object.fromEntries(Object.entries(parsed).filter(([, storedValue]) => storedValue === true));
+        }
+        catch (_b) {
+            return {};
+        }
+    });
+    const toggle = (0, react_1.useCallback)((key) => {
+        setCollapsed((previous) => {
+            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(previous, key);
+            try {
+                window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+            }
+            catch (_a) {
+                // Keep the control usable when storage is unavailable.
+            }
+            return next;
+        });
+    }, []);
+    const hierarchy = (0, react_1.useMemo)(() => {
+        var _a;
+        var _b, _c;
+        const byId = new Map(sequences.map((sequence) => [sequence.id, sequence]));
+        const siblingIndices = new Map();
+        const siblingCounts = new Map();
+        for (const sequence of sequences) {
+            const index = (_b = siblingCounts.get(sequence.parent)) !== null && _b !== void 0 ? _b : 0;
+            siblingIndices.set(sequence.id, index);
+            siblingCounts.set(sequence.parent, index + 1);
+        }
+        const keys = new Map();
+        const parents = new Set();
+        const ancestors = new Map();
+        for (const track of tracks) {
+            const parentIds = [];
+            let { parent } = track.sequence;
+            while (parent !== null && !parentIds.includes(parent)) {
+                parentIds.push(parent);
+                parents.add(parent);
+                parent = (_c = (_a = byId.get(parent)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _c !== void 0 ? _c : null;
+            }
+            ancestors.set(track.sequence.id, parentIds);
+            // Source identity survives remounts. For layers without source metadata,
+            // use the structural position instead of the ephemeral sequence ID.
+            const identity = track.nodePathInfo
+                ? ['source', (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(track.nodePathInfo)]
+                : [
+                    'position',
+                    ...[...parentIds]
+                        .reverse()
+                        .concat(track.sequence.id)
+                        .map((id) => siblingIndices.get(id)),
+                ];
+            keys.set(track.sequence.id, JSON.stringify([compositionId, identity]));
+        }
+        return { keys, parents, ancestors };
+    }, [compositionId, sequences, tracks]);
+    const visibleTracks = (0, react_1.useMemo)(() => tracks.filter((track) => {
+        var _a;
+        return !((_a = hierarchy.ancestors.get(track.sequence.id)) !== null && _a !== void 0 ? _a : []).some((id) => {
+            const key = hierarchy.keys.get(id);
+            return key !== undefined && collapsed[key];
+        });
+    }), [hierarchy, collapsed, tracks]);
+    const value = (0, react_1.useMemo)(() => ({
+        collapsed,
+        keys: hierarchy.keys,
+        parents: hierarchy.parents,
+        toggle,
+    }), [collapsed, hierarchy, toggle]);
+    return { visibleTracks, value };
+};
+exports.useTimelineLayerChildren = useTimelineLayerChildren;
+const TimelineLayerChildrenToggle = ({ sequence }) => {
+    const context = (0, react_1.useContext)(TimelineLayerChildrenContext);
+    const key = context === null || context === void 0 ? void 0 : context.keys.get(sequence.id);
+    const isCollapsed = key !== undefined && Boolean(context === null || context === void 0 ? void 0 : context.collapsed[key]);
+    const onClick = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (key !== undefined) {
+            context === null || context === void 0 ? void 0 : context.toggle(key);
+        }
+    }, [context, key]);
+    const stopPropagation = (0, react_1.useCallback)((event) => event.stopPropagation(), []);
+    if (!(context === null || context === void 0 ? void 0 : context.parents.has(sequence.id)) || key === undefined) {
+        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+    }
+    const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
+    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: colors_1.TRANSPARENT,
+                idleColor: colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
+            border: 'none',
+            padding: 0,
+            cursor: 'default',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 12,
+            height: 16,
+            marginRight: 0,
+            flexShrink: 0,
+        }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
+};
+exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineNumberField.js

@@ -35,8 +35,12 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
         }
     }, [onSave, propStatus]);
     const configuredStep = field.fieldSchema.type === 'number' ? field.fieldSchema.step : undefined;
-    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
-    const allowStepMismatch = field.group === 'crop' ||
+    const currentValue = dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue;
+    const step = field.fieldSchema.type === 'font-weight' && currentValue % 100 === 0
+        ? 100
+        : (configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1);
+    const allowStepMismatch = field.fieldSchema.type === 'font-weight' ||
+        field.group === 'crop' ||
         ('kind' in field && field.kind === 'effect-field');
     const formatter = (0, react_1.useCallback)((v) => {
         return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
@@ -44,10 +48,14 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             value: v,
         });
     }, [field.fieldSchema]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, buttonStyle: timeline_field_utils_1.leftAlignedDraggerStyle, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: currentValue, buttonStyle: timeline_field_utils_1.leftAlignedDraggerStyle, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
             ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-            : -Infinity, max: field.fieldSchema.type === 'number'
+            : field.fieldSchema.type === 'font-weight'
+                ? 1
+                : -Infinity, max: field.fieldSchema.type === 'number'
             ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-            : Infinity, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
+            : field.fieldSchema.type === 'font-weight'
+                ? 1000
+                : Infinity, step: step, dragSensitivity: field.fieldSchema.type === 'font-weight' && step === 100 ? 0.1 : 1, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
 };
 exports.TimelineNumberField = TimelineNumberField;

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/TimelinePrimitiveFieldValue.js

@@ -7,6 +7,7 @@ const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineFontFamilyField_1 = require("./TimelineFontFamilyField");
+const TimelineFontWeightField_1 = require("./TimelineFontWeightField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineScaleField_1 = require("./TimelineScaleField");
@@ -67,6 +68,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'font-family') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
+    if (field.typeName === 'font-weight') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontWeightField_1.TimelineFontWeightField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     if (field.typeName === 'asset') {
         return (jsx_runtime_1.jsx("span", { style: assetInlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }

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, }) => {
@@ -117,12 +115,10 @@ const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clip
     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, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, edgeDragHandles, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
     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,
@@ -202,31 +197,36 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                     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: {
+    return (jsx_runtime_1.jsxs("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,
+                            left: negativeStartEnd,
+                            overflow: 'hidden',
                             position: 'absolute',
                             top: 0,
-                            width: style.width,
-                        }, children: content }) })
-            ] })) : (content) }));
+                            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 }) })
+                ] })) : (jsx_runtime_1.jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    overflow: 'hidden',
+                    borderRadius: 'inherit',
+                }, children: content })), edgeDragHandles] }));
 };
 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
@@ -280,6 +280,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 +349,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 +368,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 ||
@@ -594,7 +574,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             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',
+            // Edge handles extend outside the layer; media is clipped separately.
+            overflow: 'visible',
         };
     }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
@@ -617,14 +598,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, 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: (_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: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }));
+    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, edgeDragHandles: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showLeftEdgeDragHandle &&
+                    visibleLayout.leftEdgeVisible &&
+                    negativeStartWidth === 0 &&
+                    nodePathInfo &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
+                    visibleLayout.rightEdgeVisible &&
+                    nodePathInfo &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }), onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);