@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/TimelineSelection.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.SELECTION_ENABLED = exports.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowContainsSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineSelectionAfterInteraction = exports.isTimelineSelectionModifierEvent = exports.ENABLE_OUTLINES = exports.TIMELINE_TOP_DRAG = exports.SELECTION_ENABLED = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_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 client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND = '#B0B0B0';
 exports.TIMELINE_SELECTED_LABEL_TEXT = 'black';
@@ -31,99 +33,351 @@ const getTimelineColor = (selected, subcategory) => {
         : 'rgba(255, 255, 255, 0.8)';
 };
 exports.getTimelineColor = getTimelineColor;
-exports.TIMELINE_SELECTED_TRACK_HIGHLIGHT_STYLE = {
+const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
     backgroundColor: exports.TIMELINE_SELECTED_BACKGROUND,
     bottom: 0,
     left: -timeline_layout_1.TIMELINE_PADDING,
     pointerEvents: 'none',
     position: 'absolute',
-    right: -timeline_layout_1.TIMELINE_PADDING,
     top: 0,
-};
+    width: timelineWidth,
+});
+exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
 exports.SELECTION_ENABLED = false;
-const TimelineSelectionContext = (0, react_1.createContext)({
+exports.TIMELINE_TOP_DRAG = false;
+exports.ENABLE_OUTLINES = false;
+const isTimelineSelectionModifierEvent = ({ shiftKey, metaKey, ctrlKey, }) => {
+    return shiftKey || metaKey || ctrlKey;
+};
+exports.isTimelineSelectionModifierEvent = isTimelineSelectionModifierEvent;
+const getTimelineSelectionType = (item) => item.type;
+const getTimelineSelectionAnchor = (selectedItems, previousAnchor, targetType) => {
+    if (previousAnchor &&
+        getTimelineSelectionType(previousAnchor) === targetType) {
+        return previousAnchor;
+    }
+    for (let i = selectedItems.length - 1; i >= 0; i--) {
+        const candidate = selectedItems[i];
+        if (getTimelineSelectionType(candidate) === targetType) {
+            return candidate;
+        }
+    }
+    return null;
+};
+const getRangeSelection = ({ anchor, clickedItem, allSelectableItems, }) => {
+    const anchorKey = getTimelineSelectionKey(anchor);
+    const clickedKey = getTimelineSelectionKey(clickedItem);
+    const orderedOfType = allSelectableItems.filter((item) => getTimelineSelectionType(item) === clickedItem.type);
+    const anchorIndex = orderedOfType.findIndex((item) => getTimelineSelectionKey(item) === anchorKey);
+    const clickedIndex = orderedOfType.findIndex((item) => getTimelineSelectionKey(item) === clickedKey);
+    if (anchorIndex === -1 || clickedIndex === -1) {
+        return [clickedItem];
+    }
+    const [from, to] = anchorIndex < clickedIndex
+        ? [anchorIndex, clickedIndex]
+        : [clickedIndex, anchorIndex];
+    return orderedOfType.slice(from, to + 1);
+};
+const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, interaction, allSelectableItems, }) => {
+    const { selectedItems, anchor: previousAnchor } = currentState;
+    const clickedType = getTimelineSelectionType(clickedItem);
+    const nextAnchor = getTimelineSelectionAnchor(selectedItems, previousAnchor, clickedType);
+    const clickedKey = getTimelineSelectionKey(clickedItem);
+    if (interaction.shiftKey && nextAnchor) {
+        return {
+            selectedItems: getRangeSelection({
+                anchor: nextAnchor,
+                clickedItem,
+                allSelectableItems,
+            }),
+            anchor: nextAnchor,
+        };
+    }
+    if (interaction.toggleKey) {
+        const sameTypeItems = selectedItems.filter((item) => getTimelineSelectionType(item) === clickedType);
+        const existingKeySet = new Set(sameTypeItems.map(getTimelineSelectionKey));
+        if (existingKeySet.has(clickedKey)) {
+            const toggledSelection = sameTypeItems.filter((item) => getTimelineSelectionKey(item) !== clickedKey);
+            return {
+                selectedItems: toggledSelection,
+                anchor: toggledSelection.length === 0 ? null : clickedItem,
+            };
+        }
+        const selectableOrderMap = new Map(allSelectableItems
+            .filter((item) => getTimelineSelectionType(item) === clickedType)
+            .map((item, index) => [getTimelineSelectionKey(item), index]));
+        const extendedSelection = [...sameTypeItems, clickedItem].sort((a, b) => {
+            var _a, _b;
+            return (((_a = selectableOrderMap.get(getTimelineSelectionKey(a))) !== null && _a !== void 0 ? _a : 0) -
+                ((_b = selectableOrderMap.get(getTimelineSelectionKey(b))) !== null && _b !== void 0 ? _b : 0));
+        });
+        return {
+            selectedItems: extendedSelection,
+            anchor: clickedItem,
+        };
+    }
+    return {
+        selectedItems: [clickedItem],
+        anchor: clickedItem,
+    };
+};
+exports.getTimelineSelectionAfterInteraction = getTimelineSelectionAfterInteraction;
+const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    selectedItems: [],
     isSelected: () => false,
     selectItem: () => undefined,
+    selectItems: () => undefined,
+    registerSelectableItem: () => () => undefined,
     containsSelection: () => false,
     clearSelection: () => undefined,
-});
+};
+const TimelineSelectionContext = (0, react_1.createContext)(defaultTimelineSelectionContextValue);
+const CurrentTimelineSelectionContext = (0, react_1.createContext)(null);
+const parseEffectIndex = (effectIndex) => {
+    const parsed = Number(effectIndex);
+    if (!Number.isInteger(parsed) || parsed < 0) {
+        return null;
+    }
+    return parsed;
+};
+const getTimelineSelectionFromNodePathInfo = (nodePathInfo) => {
+    if (nodePathInfo === null) {
+        return null;
+    }
+    const { auxiliaryKeys } = nodePathInfo;
+    if (auxiliaryKeys.length === 0) {
+        return { type: 'sequence', nodePathInfo };
+    }
+    if (auxiliaryKeys.length === 2 && auxiliaryKeys[0] === 'controls') {
+        return { type: 'sequence-prop', nodePathInfo, key: auxiliaryKeys[1] };
+    }
+    if (auxiliaryKeys.length === 1 && auxiliaryKeys[0] === 'effects') {
+        return { type: 'sequence-all-effects', nodePathInfo };
+    }
+    if (auxiliaryKeys[0] === 'effects') {
+        const effectIndex = parseEffectIndex(auxiliaryKeys[1]);
+        if (effectIndex === null) {
+            return null;
+        }
+        if (auxiliaryKeys.length === 2) {
+            return { type: 'sequence-effect', nodePathInfo, i: effectIndex };
+        }
+        if (auxiliaryKeys.length === 3) {
+            return {
+                type: 'sequence-effect-prop',
+                nodePathInfo,
+                i: effectIndex,
+                key: auxiliaryKeys[2],
+            };
+        }
+    }
+    return null;
+};
+exports.getTimelineSelectionFromNodePathInfo = getTimelineSelectionFromNodePathInfo;
 const getTimelineSelectionKey = (item) => {
-    const rowKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo);
-    if (item.type === 'row') {
-        return rowKey;
+    const sequenceKey = (0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo);
+    switch (item.type) {
+        case 'sequence':
+            return `${sequenceKey}.sequence`;
+        case 'sequence-prop':
+            return `${sequenceKey}.sequence-prop.${item.key}`;
+        case 'sequence-all-effects':
+            return `${sequenceKey}.sequence-all-effects`;
+        case 'sequence-effect':
+            return `${sequenceKey}.sequence-effect.${item.i}`;
+        case 'sequence-effect-prop':
+            return `${sequenceKey}.sequence-effect-prop.${item.i}.${item.key}`;
+        case 'keyframe':
+            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.keyframe.${item.frame}`;
+        default:
+            throw new Error(`Unexpected timeline selection type: ${item}`);
+    }
+};
+const nodePathDescendsFrom = (descendant, ancestor) => {
+    if ((0, studio_shared_1.stringifySequenceExpandedRowKey)(descendant.sequenceSubscriptionKey) !==
+        (0, studio_shared_1.stringifySequenceExpandedRowKey)(ancestor.sequenceSubscriptionKey)) {
+        return false;
     }
-    return `${rowKey}.keyframe.${item.frame}`;
+    if (descendant.index !== ancestor.index) {
+        return false;
+    }
+    // Must be strictly deeper than `ancestor` (i.e. a descendant), not the same row.
+    if (descendant.auxiliaryKeys.length <= ancestor.auxiliaryKeys.length) {
+        return false;
+    }
+    return ancestor.auxiliaryKeys.every((key, i) => descendant.auxiliaryKeys[i] === key);
+};
+const getSelectableTimelineSequenceSelections = (tracks) => {
+    return tracks.flatMap((track) => {
+        if (track.nodePathInfo === null ||
+            track.nodePathInfo.auxiliaryKeys.length > 0) {
+            return [];
+        }
+        return [{ type: 'sequence', nodePathInfo: track.nodePathInfo }];
+    });
+};
+exports.getSelectableTimelineSequenceSelections = getSelectableTimelineSequenceSelections;
+const getTimelineSequenceSelectionKey = (nodePathInfo) => (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] });
+exports.getTimelineSequenceSelectionKey = getTimelineSequenceSelectionKey;
+const TimelineSelectAllKeybindings = ({ timeline }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const { canSelect } = (0, exports.useTimelineSelection)();
+    const currentSelection = (0, exports.useCurrentTimelineSelectionStateAsRef)();
+    const selectableSequenceSelections = (0, react_1.useMemo)(() => (0, exports.getSelectableTimelineSequenceSelections)(timeline), [timeline]);
+    const selectableSequenceSelectionsRef = (0, react_1.useRef)(selectableSequenceSelections);
+    selectableSequenceSelectionsRef.current = selectableSequenceSelections;
+    (0, react_1.useEffect)(() => {
+        if (!canSelect) {
+            return;
+        }
+        const selectAll = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'a',
+            callback: () => {
+                const latestSelectableSequenceSelections = selectableSequenceSelectionsRef.current;
+                if (latestSelectableSequenceSelections.length === 0) {
+                    return;
+                }
+                currentSelection.current.selectItems(latestSelectableSequenceSelections);
+            },
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            selectAll.unregister();
+        };
+    }, [canSelect, currentSelection, keybindings]);
+    return null;
 };
+exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
 const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canSelect = exports.SELECTION_ENABLED &&
         previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
+    const selectionAnchor = (0, react_1.useRef)(null);
+    const selectableItemsOrder = (0, react_1.useRef)(new Map());
+    const selectableItems = (0, react_1.useRef)(new Map());
+    const registrationCounter = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
-            setSelectedItem(null);
+            setSelectedItems([]);
         }
     }, [canSelect]);
+    const selectedKeys = (0, react_1.useMemo)(() => new Set(selectedItems.map(getTimelineSelectionKey)), [selectedItems]);
     const isSelected = (0, react_1.useCallback)((item) => {
-        return selectedItem === null
-            ? false
-            : getTimelineSelectionKey(selectedItem) ===
-                getTimelineSelectionKey(item);
-    }, [selectedItem]);
-    const selectItem = (0, react_1.useCallback)((item) => {
+        return selectedKeys.has(getTimelineSelectionKey(item));
+    }, [selectedKeys]);
+    const selectItem = (0, react_1.useCallback)((item, interaction = {
+        shiftKey: false,
+        toggleKey: false,
+    }) => {
+        if (!canSelect) {
+            return;
+        }
+        setSelectedItems((currentSelectedItems) => {
+            const orderedSelectableItems = [
+                ...selectableItems.current.values(),
+            ].sort((a, b) => {
+                var _a, _b;
+                return (((_a = selectableItemsOrder.current.get(getTimelineSelectionKey(a))) !== null && _a !== void 0 ? _a : 0) -
+                    ((_b = selectableItemsOrder.current.get(getTimelineSelectionKey(b))) !== null && _b !== void 0 ? _b : 0));
+            });
+            const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
+                currentState: {
+                    selectedItems: currentSelectedItems,
+                    anchor: selectionAnchor.current,
+                },
+                clickedItem: item,
+                interaction,
+                allSelectableItems: orderedSelectableItems,
+            });
+            selectionAnchor.current = nextState.anchor;
+            return nextState.selectedItems;
+        });
+    }, [canSelect]);
+    const selectItems = (0, react_1.useCallback)((items) => {
         if (!canSelect) {
             return;
         }
-        setSelectedItem(item);
+        selectionAnchor.current =
+            items.length === 0 ? null : items[items.length - 1];
+        setSelectedItems(items);
     }, [canSelect]);
+    const registerSelectableItem = (0, react_1.useCallback)((item) => {
+        const key = getTimelineSelectionKey(item);
+        const registrationOrder = registrationCounter.current;
+        registrationCounter.current += 1;
+        selectableItems.current.set(key, item);
+        selectableItemsOrder.current.set(key, registrationOrder);
+        return () => {
+            selectableItems.current.delete(key);
+            selectableItemsOrder.current.delete(key);
+        };
+    }, []);
     const clearSelection = (0, react_1.useCallback)(() => {
-        setSelectedItem(null);
+        selectionAnchor.current = null;
+        setSelectedItems([]);
     }, []);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
-        if (selectedItem === null) {
-            return false;
-        }
-        const selectedNodePath = selectedItem.nodePathInfo;
-        if ((0, studio_shared_1.stringifySequenceExpandedRowKey)(selectedNodePath.sequenceSubscriptionKey) !==
-            (0, studio_shared_1.stringifySequenceExpandedRowKey)(nodePathInfo.sequenceSubscriptionKey)) {
-            return false;
-        }
-        if (selectedNodePath.index !== nodePathInfo.index) {
-            return false;
-        }
-        // Selection must be strictly deeper than this node (i.e. a descendant),
-        // not the same row.
-        if (selectedNodePath.auxiliaryKeys.length <=
-            nodePathInfo.auxiliaryKeys.length) {
-            return false;
-        }
-        return nodePathInfo.auxiliaryKeys.every((key, i) => selectedNodePath.auxiliaryKeys[i] === key);
-    }, [selectedItem]);
+        return selectedItems.some((selected) => nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+    }, [selectedItems]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        selectedItems,
+        isSelected,
+        selectItem,
+        selectItems,
+        registerSelectableItem,
+        containsSelection,
+        clearSelection,
+    }), [
+        canSelect,
+        selectedItems,
         isSelected,
         selectItem,
+        selectItems,
+        registerSelectableItem,
         containsSelection,
         clearSelection,
-    }), [canSelect, isSelected, selectItem, containsSelection, clearSelection]);
-    return (jsx_runtime_1.jsx(TimelineSelectionContext.Provider, { value: value, children: children }));
+    ]);
+    const currentSelection = (0, react_1.useRef)(value);
+    currentSelection.current = value;
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+            ] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;
 const useTimelineSelection = () => {
     return (0, react_1.useContext)(TimelineSelectionContext);
 };
 exports.useTimelineSelection = useTimelineSelection;
+const useCurrentTimelineSelectionStateAsRef = () => {
+    const currentSelection = (0, react_1.useContext)(CurrentTimelineSelectionContext);
+    if (currentSelection === null) {
+        throw new Error('useCurrentTimelineSelectionStateAsRef must be used inside TimelineSelectionProvider');
+    }
+    return currentSelection;
+};
+exports.useCurrentTimelineSelectionStateAsRef = useCurrentTimelineSelectionStateAsRef;
 const useTimelineRowSelection = (nodePathInfo) => {
-    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
-    const selectionItem = (0, react_1.useMemo)(() => nodePathInfo === null ? null : { type: 'row', nodePathInfo }, [nodePathInfo]);
+    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo), [nodePathInfo]);
+    (0, react_1.useEffect)(() => {
+        if (selectionItem === null) {
+            return;
+        }
+        return registerSelectableItem(selectionItem);
+    }, [registerSelectableItem, selectionItem]);
     const selected = selectionItem === null ? false : isSelected(selectionItem);
-    const onSelect = (0, react_1.useCallback)(() => {
+    const onSelect = (0, react_1.useCallback)((interaction) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem);
+        selectItem(selectionItem, interaction);
     }, [selectItem, selectionItem]);
     return {
         onSelect,
@@ -133,15 +387,18 @@ const useTimelineRowSelection = (nodePathInfo) => {
 };
 exports.useTimelineRowSelection = useTimelineRowSelection;
 const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
-    const { canSelect, isSelected, selectItem } = (0, exports.useTimelineSelection)();
+    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'keyframe',
         nodePathInfo,
         frame,
     }), [nodePathInfo, frame]);
+    (0, react_1.useEffect)(() => {
+        return registerSelectableItem(selectionItem);
+    }, [registerSelectableItem, selectionItem]);
     const selected = isSelected(selectionItem);
-    const onSelect = (0, react_1.useCallback)(() => {
-        selectItem(selectionItem);
+    const onSelect = (0, react_1.useCallback)((interaction) => {
+        selectItem(selectionItem, interaction);
     }, [selectItem, selectionItem]);
     return {
         onSelect,

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly s: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo | null;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -44,21 +44,32 @@ const use_max_media_duration_1 = require("../../helpers/use-max-media-duration")
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
-const TimelineSequenceFn = ({ s }) => {
+const TimelineSequenceFn = ({ s, nodePathInfo }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s });
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, }) => {
     var _a, _b;
+    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.stopPropagation();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
+        }
+    }, [onSelect]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
     const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
@@ -75,9 +86,10 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
         return {
             ...style,
             opacity: isInRange ? 1 : 0.5,
+            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { cursor: 'pointer' } : {}),
         };
     }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -111,7 +123,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
 };
-const TimelineSequenceInner = ({ s, windowWidth }) => {
+const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
@@ -165,6 +177,6 @@ const TimelineSequenceInner = ({ s, windowWidth }) => {
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: 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, trimBefore: s.startMediaFrom, 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 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
+    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: 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, trimBefore: s.startMediaFrom, 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 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -8,6 +8,7 @@ const relativeFrameStyle = {
     color: 'white',
     opacity: 0.5,
     whiteSpace: 'nowrap',
+    pointerEvents: 'none',
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted

package/dist/components/Timeline/{TimelineListItem.d.ts → TimelineSequenceItem.d.ts}

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineListItem: React.FC<{
+export declare const TimelineSequenceItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly keyframeDisplayOffset: number;
 }>;