@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/TimelineRowChrome.js

@@ -3,19 +3,77 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineRowChrome = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
 const rowBase = {
+    alignItems: 'stretch',
     display: 'flex',
+};
+const leftChromeStyle = {
     alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexShrink: 0,
 };
-const TimelineRowChrome = ({ depth, eye, arrow, children, style }) => {
-    const rowStyle = (0, react_1.useMemo)(() => ({
+const keyframeControlsColumnStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    marginRight: -(timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH - timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING),
+    width: timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH,
+};
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
+    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    const chromeColumnStyle = (0, react_1.useMemo)(() => ({
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        display: 'flex',
+        flexShrink: 0,
+        paddingLeft: keyframeControls ? 0 : timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    }), [keyframeControls]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.stopPropagation();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
+        }
+    }, [onSelect]);
+    const onContextMenu = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        onSelect();
+    }, [onSelect]);
+    const highlightBackground = showSelectedBackground && (selected || containsSelection)
+        ? TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND
+        : undefined;
+    const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
-        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
         ...style,
-    }), [style]);
-    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
-    return (jsx_runtime_1.jsxs("div", { style: rowStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow, children] }));
+        backgroundColor: outerHeight === undefined ? highlightBackground : undefined,
+    }), [style, outerHeight, highlightBackground]);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        if (outerHeight === null) {
+            return undefined;
+        }
+        return {
+            height: outerHeight,
+            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            backgroundColor: highlightBackground,
+        };
+    }, [outerHeight, highlightBackground]);
+    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: leftChromeStyle, children: [keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : null, jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })
+                ] }), children] }));
+    if (outerStyle) {
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+    }
+    return (jsx_runtime_1.jsx("div", { onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -9,10 +9,13 @@ const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
+const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
     fontSize: 12,
     fontStyle: 'italic',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const notEditableBackground = {
     backgroundColor: 'rgba(255, 0, 0, 0.2)',
@@ -30,10 +33,9 @@ const TimelineNonEditableStatus = ({ propStatus }) => {
     if (propStatus.canUpdate) {
         return null;
     }
-    if (propStatus.reason === 'computed') {
+    if (propStatus.reason === 'computed' || propStatus.reason === 'keyframed') {
         return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
     }
-    throw new Error(`Unsupported prop status: ${propStatus.reason}`);
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;
 const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
@@ -49,6 +51,9 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
     if (field.typeName === 'translate') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
+    if (field.typeName === 'uv-coordinate') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineUvCoordinateField_1.TimelineUvCoordinateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
     if (field.typeName === 'boolean') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue }) }));
     }

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

@@ -0,0 +1,85 @@
+import React, { type CSSProperties } from 'react';
+import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
+export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
+export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
+export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
+export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
+export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
+export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
+export declare const SELECTION_ENABLED = false;
+export declare const TIMELINE_TOP_DRAG = false;
+export declare const ENABLE_OUTLINES = false;
+type TimelineSelectionBase = {
+    readonly nodePathInfo: SequenceNodePathInfo;
+};
+export type TimelineSelection = (TimelineSelectionBase & {
+    readonly type: 'sequence';
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-prop';
+    readonly key: string;
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-all-effects';
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-effect';
+    readonly i: number;
+}) | (TimelineSelectionBase & {
+    readonly type: 'sequence-effect-prop';
+    readonly i: number;
+    readonly key: string;
+}) | (TimelineSelectionBase & {
+    readonly type: 'keyframe';
+    readonly frame: number;
+});
+export type TimelineSelectionInteraction = {
+    readonly shiftKey: boolean;
+    readonly toggleKey: boolean;
+};
+export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctrlKey, }: {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => boolean;
+export type TimelineSelectionState = {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly anchor: TimelineSelection | null;
+};
+export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
+    readonly currentState: TimelineSelectionState;
+    readonly clickedItem: TimelineSelection;
+    readonly interaction: TimelineSelectionInteraction;
+    readonly allSelectableItems: readonly TimelineSelection[];
+}) => TimelineSelectionState;
+type TimelineSelectionContextValue = {
+    readonly canSelect: boolean;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly isSelected: (item: TimelineSelection) => boolean;
+    readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
+    readonly selectItems: (items: readonly TimelineSelection[]) => void;
+    readonly registerSelectableItem: (item: TimelineSelection) => () => void;
+    readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
+    readonly clearSelection: () => void;
+};
+export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
+export declare const TimelineSelectAllKeybindings: React.FC<{
+    readonly timeline: readonly TrackWithHash[];
+}>;
+export declare const TimelineSelectionProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useTimelineSelection: () => TimelineSelectionContextValue;
+export declare const useCurrentTimelineSelectionStateAsRef: () => React.RefObject<TimelineSelectionContextValue>;
+export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    selectable: boolean;
+    selected: boolean;
+};
+export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    selectable: boolean;
+    selected: boolean;
+};
+export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
+export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -0,0 +1,417 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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';
+exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
+const getTimelineSelectedLabelStyle = (selected, subcategory) => {
+    return {
+        paddingLeft: exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING,
+        paddingRight: exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING,
+        ...(selected
+            ? {
+                backgroundColor: subcategory
+                    ? 'rgba(255, 255, 255, 0.1)'
+                    : exports.TIMELINE_SELECTED_LABEL_BACKGROUND,
+            }
+            : {}),
+    };
+};
+exports.getTimelineSelectedLabelStyle = getTimelineSelectedLabelStyle;
+const getTimelineColor = (selected, subcategory) => {
+    return selected && !subcategory
+        ? exports.TIMELINE_SELECTED_LABEL_TEXT
+        : 'rgba(255, 255, 255, 0.8)';
+};
+exports.getTimelineColor = getTimelineColor;
+const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
+    backgroundColor: exports.TIMELINE_SELECTED_BACKGROUND,
+    bottom: 0,
+    left: -timeline_layout_1.TIMELINE_PADDING,
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0,
+    width: timelineWidth,
+});
+exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
+exports.SELECTION_ENABLED = false;
+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 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;
+    }
+    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 [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) {
+            setSelectedItems([]);
+        }
+    }, [canSelect]);
+    const selectedKeys = (0, react_1.useMemo)(() => new Set(selectedItems.map(getTimelineSelectionKey)), [selectedItems]);
+    const isSelected = (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;
+        }
+        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)(() => {
+        selectionAnchor.current = null;
+        setSelectedItems([]);
+    }, []);
+    const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
+        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,
+    ]);
+    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, 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)((interaction) => {
+        if (selectionItem === null) {
+            return;
+        }
+        selectItem(selectionItem, interaction);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelect && selectionItem !== null,
+        selected,
+    };
+};
+exports.useTimelineRowSelection = useTimelineRowSelection;
+const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
+    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)((interaction) => {
+        selectItem(selectionItem, interaction);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelect,
+        selected,
+    };
+};
+exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
+const useTimelineRowContainsSelection = (nodePathInfo) => {
+    const { containsSelection } = (0, exports.useTimelineSelection)();
+    if (nodePathInfo === null) {
+        return false;
+    }
+    return containsSelection(nodePathInfo);
+};
+exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;

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;
 }>;