@remotion/studio 4.0.477 → 4.0.479

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -42,7 +42,6 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
@@ -85,7 +84,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const getTargetSelections = (0, react_1.useCallback)(() => {
         const selectedEasings = (0, update_selected_easing_1.getEasingSelections)(currentSelection.current.selectedItems);
         return selected ? selectedEasings : [selectionItem];
@@ -112,33 +110,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         sequencesRef,
         setPropStatuses,
     ]);
-    const onOpenEasingEditor = (0, react_1.useCallback)(() => {
-        if (previewServerState.type !== 'connected') {
-            return;
-        }
-        const initialEasing = (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
-            selection: selectionItem,
-            sequences: sequencesRef.current,
-            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-            propStatuses: propStatusesRef.current,
-        });
-        if (initialEasing === null) {
-            return;
-        }
-        setSelectedModal({
-            type: 'easing-editor',
-            initialEasing,
-            selections: getTargetSelections(),
-        });
-    }, [
-        getTargetSelections,
-        overrideIdToNodePathMappings,
-        previewServerState,
-        propStatusesRef,
-        selectionItem,
-        sequencesRef,
-        setSelectedModal,
-    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         return [
             {
@@ -148,7 +119,7 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
                 label: 'Linear',
                 leftItem: null,
                 disabled: previewServerState.type !== 'connected',
-                onClick: () => updateEasing('linear'),
+                onClick: () => updateEasing(studio_shared_1.LINEAR_KEYFRAME_EASING),
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'linear',
@@ -165,24 +136,8 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
                 subMenu: null,
                 value: preset.id,
             })),
-            {
-                type: 'divider',
-                id: 'edit-easing-divider',
-            },
-            {
-                type: 'item',
-                id: 'edit-easing',
-                keyHint: null,
-                label: 'Edit...',
-                leftItem: null,
-                disabled: previewServerState.type !== 'connected',
-                onClick: onOpenEasingEditor,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'edit-easing',
-            },
         ];
-    }, [onOpenEasingEditor, previewServerState.type, updateEasing]);
+    }, [previewServerState.type, updateEasing]);
     const onOpenContextMenu = (0, react_1.useCallback)((event) => {
         if (!selectable) {
             return false;

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

@@ -4,7 +4,7 @@ import type { SchemaFieldInfo, TimelineFieldOnDragValueChange } from '../../help
 export declare const TimelineKeyframedValue: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
-    readonly keyframeDisplayOffset: number;
+    readonly sourceFrame: number;
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly onSave: (value: unknown, sourceFrame: number) => Promise<void>;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -8,19 +8,17 @@ const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const valuesEqual = (left, right) => {
     return JSON.stringify(left) === JSON.stringify(right);
 };
-const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+const TimelineKeyframedValue = ({ field, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     const computedValue = (0, react_1.useMemo)(() => {
         const raw = remotion_1.Internals.interpolateKeyframedStatus({
-            frame: jsxFrame,
+            frame: sourceFrame,
             status: propStatus,
         });
         if (typeof raw === 'number') {
             return Math.round(raw * 100) / 100;
         }
         return raw;
-    }, [jsxFrame, propStatus]);
+    }, [propStatus, sourceFrame]);
     const fakeStatus = (0, react_1.useMemo)(() => ({
         status: 'static',
         codeValue: computedValue,
@@ -29,19 +27,19 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, drag
         return remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: fakeStatus,
             dragOverrideValue,
-            frame: jsxFrame,
+            frame: sourceFrame,
             defaultValue: field.fieldSchema.default,
             shouldResortToDefaultValueIfUndefined: true,
         });
-    }, [dragOverrideValue, fakeStatus, field.fieldSchema.default, jsxFrame]);
+    }, [dragOverrideValue, fakeStatus, field.fieldSchema.default, sourceFrame]);
     const onSaveIfChanged = (0, react_1.useCallback)((value) => {
-        const existingKeyframe = propStatus.keyframes.find((keyframe) => keyframe.frame === jsxFrame);
+        const existingKeyframe = propStatus.keyframes.find((keyframe) => keyframe.frame === sourceFrame);
         if (valuesEqual(value, computedValue) ||
             (existingKeyframe && valuesEqual(value, existingKeyframe.value))) {
             return Promise.resolve();
         }
-        return onSave(value, jsxFrame);
-    }, [computedValue, jsxFrame, onSave, propStatus.keyframes]);
+        return onSave(value, sourceFrame);
+    }, [computedValue, onSave, propStatus.keyframes, sourceFrame]);
     if (computedValue === null) {
         return null;
     }

package/dist/components/Timeline/TimelineNumberField.js

@@ -4,6 +4,7 @@ exports.TimelineNumberField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
     var _a, _b;
@@ -35,19 +36,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 stepDecimals = (0, react_1.useMemo)(() => configuredStep === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(configuredStep), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
-        if (stepDecimals === null) {
-            const digits = (0, timeline_field_utils_1.getDecimalPlaces)(num);
-            return digits === 0 ? String(num) : num.toFixed(digits);
-        }
-        return (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces: stepDecimals,
-            fixed: true,
-            value: num,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
+            value: v,
         });
-    }, [stepDecimals]);
+    }, [field.fieldSchema]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, 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'

package/dist/components/Timeline/TimelineRotationField.js

@@ -4,6 +4,7 @@ exports.TimelineRotationField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
@@ -66,13 +67,11 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         }
     }, [propStatus, onSave, serializeValue]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: false,
-            value: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v)),
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
+            value: v,
         });
-        return `${formatted}\u00B0`;
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineRotationField = TimelineRotationField;

package/dist/components/Timeline/TimelineScaleField.js

@@ -7,6 +7,7 @@ const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../../helpers/colors");
 const scale_lock_1 = require("../../state/scale-lock");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const leftDraggerStyle = {
@@ -98,17 +99,12 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
     const max = field.fieldSchema.type === 'scale'
         ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 3,
-        step: configuredStep,
-    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        return (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: true,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     const getDragStart = (0, react_1.useCallback)(() => {
         if (dragStartRef.current === null) {
             dragStartRef.current = [dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY];

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

@@ -64,6 +64,7 @@ export type TimelineSelectionState = {
     readonly selectedItems: readonly TimelineSelection[];
     readonly anchor: TimelineSelection | null;
 };
+export declare const EMPTY_TIMELINE_SELECTION_STATE: TimelineSelectionState;
 export type TimelineMarqueeRect = {
     readonly left: number;
     readonly top: number;
@@ -81,6 +82,11 @@ export declare const getTimelineSelectionAfterInteraction: ({ currentState, clic
     readonly interaction: TimelineSelectionInteraction;
     readonly allSelectableItems: readonly TimelineSelection[];
 }) => TimelineSelectionState;
+export declare const getAvailableTimelineSelectionState: ({ availableKeys, availableItemsByKey, state, }: {
+    readonly availableKeys: ReadonlySet<string>;
+    readonly availableItemsByKey?: ReadonlyMap<string, TimelineSelection> | undefined;
+    readonly state: TimelineSelectionState;
+}) => TimelineSelectionState;
 export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
     readonly startX: number;
     readonly startY: number;

package/dist/components/Timeline/TimelineSelection.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getTimelineSelectionAfterInteraction = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = 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;
+exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.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 remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -56,6 +57,10 @@ const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctr
     return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
 };
 exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
+exports.EMPTY_TIMELINE_SELECTION_STATE = {
+    selectedItems: [],
+    anchor: null,
+};
 const getTimelineSelectionType = (item) => item.type;
 const areTimelineSelectionTypesCompatible = (firstType, secondType) => {
     if (firstType === secondType) {
@@ -144,6 +149,32 @@ const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, inter
     };
 };
 exports.getTimelineSelectionAfterInteraction = getTimelineSelectionAfterInteraction;
+const getAvailableTimelineSelectionState = ({ availableKeys, availableItemsByKey, state, }) => {
+    if (state.selectedItems.length === 0 && state.anchor === null) {
+        return state;
+    }
+    const getCurrentSelectionItem = (item) => {
+        var _a;
+        const key = (0, exports.getTimelineSelectionKey)(item);
+        if (!availableKeys.has(key)) {
+            return null;
+        }
+        return (_a = availableItemsByKey === null || availableItemsByKey === void 0 ? void 0 : availableItemsByKey.get(key)) !== null && _a !== void 0 ? _a : item;
+    };
+    const selectedItems = state.selectedItems
+        .map(getCurrentSelectionItem)
+        .filter((item) => item !== null);
+    const anchor = state.anchor ? getCurrentSelectionItem(state.anchor) : null;
+    if (selectedItems.length === state.selectedItems.length &&
+        anchor === state.anchor) {
+        return state;
+    }
+    return {
+        selectedItems,
+        anchor,
+    };
+};
+exports.getAvailableTimelineSelectionState = getAvailableTimelineSelectionState;
 const getNormalizedTimelineMarqueeRect = ({ startX, startY, currentX, currentY, }) => ({
     left: Math.min(startX, currentX),
     top: Math.min(startY, currentY),
@@ -347,22 +378,68 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
 const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const canSelect = previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
+    const selectionScope = (0, react_1.useRef)(null);
     const selectableItemsOrder = (0, react_1.useRef)(new Map());
     const selectableItems = (0, react_1.useRef)(new Map());
+    const selectableItemRegistrationCounts = (0, react_1.useRef)(new Map());
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const registrationCounter = (0, react_1.useRef)(0);
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
+    const [selectableItemsVersion, setSelectableItemsVersion] = (0, react_1.useState)(0);
+    const bumpSelectableItemsVersion = (0, react_1.useCallback)(() => {
+        setSelectableItemsVersion((version) => version + 1);
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
+            selectionScope.current = null;
+            selectionAnchor.current = null;
             setSelectedItems([]);
         }
     }, [canSelect]);
     const canSelectItem = (0, react_1.useCallback)((_item) => canSelect, [canSelect]);
-    const selectedKeys = (0, react_1.useMemo)(() => new Set(selectedItems.map(exports.getTimelineSelectionKey)), [selectedItems]);
+    const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
+        if (selectionScope.current !== timelineSelectionScope) {
+            return exports.EMPTY_TIMELINE_SELECTION_STATE;
+        }
+        return (0, exports.getAvailableTimelineSelectionState)({
+            availableKeys: new Set(selectableItems.current.keys()),
+            availableItemsByKey: selectableItems.current,
+            state: {
+                selectedItems: currentSelectedItems,
+                anchor: selectionAnchor.current,
+            },
+        });
+    }, [timelineSelectionScope]);
+    const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
+    const availableSelectedItems = availableSelectionState.selectedItems;
+    (0, react_1.useEffect)(() => {
+        setSelectedItems((currentSelectedItems) => {
+            const nextState = selectionScope.current === timelineSelectionScope
+                ? (0, exports.getAvailableTimelineSelectionState)({
+                    availableKeys: new Set(selectableItems.current.keys()),
+                    availableItemsByKey: selectableItems.current,
+                    state: {
+                        selectedItems: currentSelectedItems,
+                        anchor: selectionAnchor.current,
+                    },
+                })
+                : exports.EMPTY_TIMELINE_SELECTION_STATE;
+            selectionScope.current = timelineSelectionScope;
+            selectionAnchor.current = nextState.anchor;
+            if (nextState.selectedItems.length === currentSelectedItems.length &&
+                nextState.selectedItems.every((item, index) => item === currentSelectedItems[index])) {
+                return currentSelectedItems;
+            }
+            return nextState.selectedItems;
+        });
+    }, [selectableItemsVersion, timelineSelectionScope]);
+    const selectedKeys = (0, react_1.useMemo)(() => new Set(availableSelectedItems.map(exports.getTimelineSelectionKey)), [availableSelectedItems]);
     const isSelected = (0, react_1.useCallback)((item) => {
         return selectedKeys.has((0, exports.getTimelineSelectionKey)(item));
     }, [selectedKeys]);
@@ -374,6 +451,7 @@ const TimelineSelectionProvider = ({ children }) => {
             return;
         }
         setSelectedItems((currentSelectedItems) => {
+            const currentSelectionState = getCurrentAvailableSelectionState(currentSelectedItems);
             const orderedSelectableItems = [
                 ...selectableItems.current.values(),
             ].sort((a, b) => {
@@ -383,36 +461,52 @@ const TimelineSelectionProvider = ({ children }) => {
             });
             const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
                 currentState: {
-                    selectedItems: currentSelectedItems,
-                    anchor: selectionAnchor.current,
+                    selectedItems: currentSelectionState.selectedItems,
+                    anchor: currentSelectionState.anchor,
                 },
                 clickedItem: item,
                 interaction,
                 allSelectableItems: orderedSelectableItems,
             });
+            selectionScope.current = timelineSelectionScope;
             selectionAnchor.current = nextState.anchor;
             return nextState.selectedItems;
         });
-    }, [canSelectItem]);
+    }, [canSelectItem, getCurrentAvailableSelectionState, timelineSelectionScope]);
     const selectItems = (0, react_1.useCallback)((items) => {
         if (!items.every(canSelectItem)) {
             return;
         }
+        selectionScope.current = timelineSelectionScope;
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];
         setSelectedItems(items);
-    }, [canSelectItem]);
+    }, [canSelectItem, timelineSelectionScope]);
     const registerSelectableItem = (0, react_1.useCallback)((item) => {
+        var _a;
         const key = (0, exports.getTimelineSelectionKey)(item);
-        const registrationOrder = registrationCounter.current;
-        registrationCounter.current += 1;
+        const currentRegistrationCount = (_a = selectableItemRegistrationCounts.current.get(key)) !== null && _a !== void 0 ? _a : 0;
+        if (currentRegistrationCount === 0) {
+            const registrationOrder = registrationCounter.current;
+            registrationCounter.current += 1;
+            selectableItemsOrder.current.set(key, registrationOrder);
+        }
+        selectableItemRegistrationCounts.current.set(key, currentRegistrationCount + 1);
         selectableItems.current.set(key, item);
-        selectableItemsOrder.current.set(key, registrationOrder);
+        bumpSelectableItemsVersion();
         return () => {
+            var _a;
+            const nextRegistrationCount = ((_a = selectableItemRegistrationCounts.current.get(key)) !== null && _a !== void 0 ? _a : 1) - 1;
+            if (nextRegistrationCount > 0) {
+                selectableItemRegistrationCounts.current.set(key, nextRegistrationCount);
+                return;
+            }
+            selectableItemRegistrationCounts.current.delete(key);
             selectableItems.current.delete(key);
             selectableItemsOrder.current.delete(key);
+            bumpSelectableItemsVersion();
         };
-    }, []);
+    }, [bumpSelectableItemsVersion]);
     const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
         const key = (0, exports.getTimelineSelectionKey)(item);
         const registrationOrder = marqueeRegistrationCounter.current;
@@ -456,16 +550,17 @@ const TimelineSelectionProvider = ({ children }) => {
         });
     }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
+        selectionScope.current = null;
         selectionAnchor.current = null;
         setSelectedItems([]);
     }, []);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
-        return selectedItems.some((selected) => selected.type !== 'guide' &&
+        return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
             nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
-    }, [selectedItems]);
+    }, [availableSelectedItems]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
-        selectedItems,
+        selectedItems: availableSelectedItems,
         isSelected,
         selectItem,
         selectItems,
@@ -476,7 +571,7 @@ const TimelineSelectionProvider = ({ children }) => {
         clearSelection,
     }), [
         canSelect,
-        selectedItems,
+        availableSelectedItems,
         isSelected,
         selectItem,
         selectItems,

package/dist/components/Timeline/TimelineSequence.js

@@ -62,6 +62,7 @@ const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEd
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
+const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 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)';
@@ -153,10 +154,10 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     // 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
-    var _a, _b, _c;
-    var _d, _e, _f, _g;
+    var _a, _b;
+    var _c, _d, _e, _f, _g;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -173,7 +174,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -184,6 +185,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -279,6 +281,18 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePath,
+        propStatusesForOverride,
+        sequence: s,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource: (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _e !== void 0 ? _e : null,
+    });
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -298,6 +312,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             originalLocation,
             selectAsset,
             sequence: s,
+            sourceActions: [freezeFrameMenuItem],
         });
     }, [
         assetLinkInfo,
@@ -306,6 +321,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
+        freezeFrameMenuItem,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
@@ -320,15 +336,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             onSelect({ shiftKey: false, toggleKey: false });
         }
     }, [onSelect, selectable]);
-    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
-    const runtimeFreezeFrame = typeof ((_c = s.controls) === null || _c === void 0 ? void 0 : _c.currentRuntimeValueDotNotation.freeze) === 'number'
-        ? s.controls.currentRuntimeValueDotNotation.freeze
-        : null;
-    const frozenFrame = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static'
-        ? typeof freezeStatus.codeValue === 'number'
-            ? freezeStatus.codeValue
-            : null
-        : runtimeFreezeFrame;
+    const { frozenFrame } = s;
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
@@ -386,7 +394,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, 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 })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, 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, frozenMediaFrame: s.frozenMediaFrame })) : 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 })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null] }));
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);