@remotion/studio 4.0.478 → 4.0.481

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimelineFieldValueForDisplay = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const DISPLAY_FALLBACK_DECIMAL_PLACES = 3;
+const DEFAULT_SCALE_VALUE = [1, 1, 1];
+const getFiniteNumericValue = (value) => {
+    if (typeof value !== 'number' && typeof value !== 'string') {
+        return null;
+    }
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+};
+const parseScaleStringForDisplay = (value) => {
+    var _a, _b;
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        return null;
+    }
+    const parsed = parts.map((part) => Number(part));
+    if (!parsed.every((part) => Number.isFinite(part))) {
+        return null;
+    }
+    const x = parsed[0];
+    const y = (_a = parsed[1]) !== null && _a !== void 0 ? _a : x;
+    const z = (_b = parsed[2]) !== null && _b !== void 0 ? _b : 1;
+    return [x, y, z];
+};
+const parseScaleValueForDisplay = (value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? [value, value, 1] : DEFAULT_SCALE_VALUE;
+    }
+    if (typeof value === 'string') {
+        return (_a = parseScaleStringForDisplay(value)) !== null && _a !== void 0 ? _a : DEFAULT_SCALE_VALUE;
+    }
+    return DEFAULT_SCALE_VALUE;
+};
+const formatUnknownNumberForDisplay = (value) => {
+    if (!Number.isFinite(value)) {
+        return String(value);
+    }
+    return (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces: DISPLAY_FALLBACK_DECIMAL_PLACES,
+        fixed: false,
+        value: (0, timeline_field_utils_1.normalizeTimelineNumber)(value),
+    });
+};
+const normalizeUnknownForDisplay = (value) => {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return (0, timeline_field_utils_1.roundToDecimalPlaces)((0, timeline_field_utils_1.normalizeTimelineNumber)(value), DISPLAY_FALLBACK_DECIMAL_PLACES);
+    }
+    if (Array.isArray(value)) {
+        return value.map(normalizeUnknownForDisplay);
+    }
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value).map(([key, item]) => [
+            key,
+            normalizeUnknownForDisplay(item),
+        ]));
+    }
+    return value;
+};
+const formatUnknownTimelineValueForDisplay = (value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return formatUnknownNumberForDisplay(value);
+    }
+    if (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'boolean' ||
+        typeof value === 'bigint') {
+        return String(value);
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    try {
+        return (_a = JSON.stringify(normalizeUnknownForDisplay(value))) !== null && _a !== void 0 ? _a : String(value);
+    }
+    catch (_b) {
+        return String(value);
+    }
+};
+const formatNumberTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue === null) {
+        return null;
+    }
+    const stepDecimals = fieldSchema.step === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(fieldSchema.step);
+    if (stepDecimals === null) {
+        const digits = (0, timeline_field_utils_1.getDecimalPlaces)(numericValue);
+        return digits === 0 ? String(numericValue) : numericValue.toFixed(digits);
+    }
+    return (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces: stepDecimals,
+        fixed: true,
+        value: numericValue,
+    });
+};
+const formatRotationTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const configuredStep = fieldSchema.type === 'rotation-css' ||
+        fieldSchema.type === 'rotation-degrees'
+        ? fieldSchema.step
+        : undefined;
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    });
+    const degrees = fieldSchema.type === 'rotation-css'
+        ? (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(value !== null && value !== void 0 ? value : '0deg'))
+        : getFiniteNumericValue(value);
+    if (degrees === null || !Number.isFinite(degrees)) {
+        return null;
+    }
+    return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: false,
+        value: (0, timeline_field_utils_1.normalizeTimelineNumber)(degrees),
+    })}\u00B0`;
+};
+const formatScaleTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 3,
+        step: fieldSchema.step,
+    });
+    const formatScalePart = (part) => (0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: true,
+        value: part,
+    });
+    const [x, y, z] = parseScaleValueForDisplay(value);
+    const parts = x === y && z === 1 ? [x] : z === 1 ? [x, y] : [x, y, z];
+    return parts.map(formatScalePart).join(' ');
+};
+const formatTranslateCoordinateForDisplay = (value, decimalPlaces) => `${(0, timeline_field_utils_1.formatTimelineNumber)({
+    decimalPlaces,
+    fixed: false,
+    value,
+})}px`;
+const formatTranslateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatTranslateCoordinateForDisplay(numericValue, decimalPlaces);
+    }
+    const [x, y] = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'));
+    return (0, timeline_translate_utils_1.serializeTranslate)(x, y, decimalPlaces);
+};
+const formatTransformOriginAxisValueForDisplay = ({ decimalPlaces, unit, value, }) => {
+    return `${(0, timeline_field_utils_1.formatTimelineNumber)({
+        decimalPlaces,
+        fixed: false,
+        value,
+    })}${unit}`;
+};
+const formatTransformOriginTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatTransformOriginAxisValueForDisplay({
+            decimalPlaces,
+            unit: '%',
+            value: numericValue,
+        });
+    }
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(value);
+    if (parsed === null) {
+        return null;
+    }
+    const xy = `${formatTransformOriginAxisValueForDisplay({
+        decimalPlaces,
+        unit: parsed.x.unit,
+        value: parsed.x.value,
+    })} ${formatTransformOriginAxisValueForDisplay({
+        decimalPlaces,
+        unit: parsed.y.unit,
+        value: parsed.y.value,
+    })}`;
+    return parsed.z === null ? xy : `${xy} ${parsed.z}`;
+};
+const formatUvCoordinatePartForDisplay = (value, decimalPlaces) => (0, timeline_field_utils_1.formatTimelineNumber)({
+    decimalPlaces,
+    fixed: true,
+    value,
+});
+const formatUvCoordinateTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: fieldSchema.step,
+    });
+    const numericValue = getFiniteNumericValue(value);
+    if (numericValue !== null) {
+        return formatUvCoordinatePartForDisplay(numericValue, decimalPlaces);
+    }
+    if (!Array.isArray(value) ||
+        value.length !== 2 ||
+        !value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
+        return null;
+    }
+    return `${formatUvCoordinatePartForDisplay(value[0], decimalPlaces)}, ${formatUvCoordinatePartForDisplay(value[1], decimalPlaces)}`;
+};
+const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
+    var _a, _b, _c, _d, _e;
+    if (!fieldSchema) {
+        return formatUnknownTimelineValueForDisplay(value);
+    }
+    switch (fieldSchema.type) {
+        case 'number':
+            return ((_a = formatNumberTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _a !== void 0 ? _a : formatUnknownTimelineValueForDisplay(value));
+        case 'rotation-css':
+        case 'rotation-degrees':
+            return ((_b = formatRotationTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _b !== void 0 ? _b : formatUnknownTimelineValueForDisplay(value));
+        case 'scale':
+            return formatScaleTimelineFieldValueForDisplay({ fieldSchema, value });
+        case 'translate':
+            return ((_c = formatTranslateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _c !== void 0 ? _c : formatUnknownTimelineValueForDisplay(value));
+        case 'transform-origin':
+            return ((_d = formatTransformOriginTimelineFieldValueForDisplay({
+                fieldSchema,
+                value,
+            })) !== null && _d !== void 0 ? _d : formatUnknownTimelineValueForDisplay(value));
+        case 'uv-coordinate':
+            return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
+        case 'array':
+        case 'boolean':
+        case 'color':
+        case 'enum':
+        case 'hidden':
+            return formatUnknownTimelineValueForDisplay(value);
+        default:
+            return formatUnknownTimelineValueForDisplay(value);
+    }
+};
+exports.formatTimelineFieldValueForDisplay = formatTimelineFieldValueForDisplay;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -1,8 +1,51 @@
-import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusEasing, DragOverrideValue, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
 export type EasingSelection = TimelineEasingSelection;
-export type TimelineEasingValue = 'linear' | [number, number, number, number];
+export type TimelineEasingValue = CanUpdateSequencePropStatusEasing;
+export type SelectedEasingUpdate = {
+    readonly type: 'sequence';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly segmentIndex: number;
+    readonly currentEasing: TimelineEasingValue;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+} | {
+    readonly type: 'effect';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly segmentIndex: number;
+    readonly currentEasing: TimelineEasingValue;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+};
+export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    selection: {
+        readonly type: "easing";
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+}) => SelectedEasingUpdate | null;
+export declare const getSelectedEasingUpdates: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => SelectedEasingUpdate[];
+export declare const makeEasingDragOverride: ({ status, segmentIndex, easing, }: {
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+    readonly segmentIndex: number;
+    readonly easing: CanUpdateSequencePropStatusEasing;
+}) => DragOverrideValue;
 export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
     readonly type: "easing";
     readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
@@ -21,7 +64,7 @@ export declare const getTimelineEasingValueForSelection: ({ selection, sequences
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses;
-}) => TimelineEasingValue | null;
+}) => CanUpdateSequencePropStatusEasing | null;
 export declare const updateSelectedTimelineEasings: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, easing, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];
@@ -29,5 +72,5 @@ export declare const updateSelectedTimelineEasings: ({ selections, sequences, ov
     propStatuses: PropStatuses;
     setPropStatuses: SetPropStatuses;
     clientId: string;
-    easing: TimelineEasingValue;
+    easing: CanUpdateSequencePropStatusEasing;
 }) => Promise<void> | null;

package/dist/components/Timeline/update-selected-easing.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = void 0;
+exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -42,7 +43,8 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
             fieldKey: field.fieldKey,
             schema: sequence.controls.schema,
             segmentIndex: selection.segmentIndex,
-            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : 'linear',
+            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : studio_shared_1.LINEAR_KEYFRAME_EASING,
+            propStatus: sequencePropStatus,
         };
     }
     const effect = sequence.effects[field.effectIndex];
@@ -69,15 +71,46 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         fieldKey: field.fieldKey,
         schema: effect.schema,
         segmentIndex: selection.segmentIndex,
-        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : 'linear',
+        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : studio_shared_1.LINEAR_KEYFRAME_EASING,
+        propStatus: effectPropStatus,
     };
 };
+exports.getSelectedEasingUpdate = getSelectedEasingUpdate;
+const getSelectedEasingUpdates = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    return (0, exports.getEasingSelections)(selections)
+        .map((selection) => (0, exports.getSelectedEasingUpdate)({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }))
+        .filter((update) => update !== null);
+};
+exports.getSelectedEasingUpdates = getSelectedEasingUpdates;
+const makeEasingDragOverride = ({ status, segmentIndex, easing, }) => {
+    const nextEasing = [...status.easing];
+    while (nextEasing.length < status.keyframes.length - 1) {
+        nextEasing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
+    }
+    if (nextEasing.length > status.keyframes.length - 1) {
+        nextEasing.length = status.keyframes.length - 1;
+    }
+    nextEasing[segmentIndex] = easing;
+    return {
+        type: 'keyframed',
+        status: {
+            ...status,
+            easing: nextEasing,
+        },
+    };
+};
+exports.makeEasingDragOverride = makeEasingDragOverride;
 const getEasingSelections = (selections) => selections.filter(isEasingSelection);
 exports.getEasingSelections = getEasingSelections;
 const getTimelineEasingValueForSelection = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
     var _b;
-    return ((_b = (_a = getSelectedEasingUpdate({
+    return ((_b = (_a = (0, exports.getSelectedEasingUpdate)({
         selection,
         sequences,
         overrideIdsToNodePaths,
@@ -90,14 +123,12 @@ const updateSelectedTimelineEasings = ({ selections, sequences, overrideIdsToNod
     if (easingSelections.length === 0) {
         return null;
     }
-    const updates = easingSelections
-        .map((selection) => getSelectedEasingUpdate({
-        selection,
+    const updates = (0, exports.getSelectedEasingUpdates)({
+        selections: easingSelections,
         sequences,
         overrideIdsToNodePaths,
         propStatuses,
-    }))
-        .filter((update) => update !== null);
+    });
     if (updates.length === 0) {
         return null;
     }

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -7,6 +7,8 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const TimelineSelection_1 = require("./TimelineSelection");
 const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
     interpolationFunction === 'interpolateColors';
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
@@ -34,6 +36,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
@@ -48,16 +51,37 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         nodePathInfo,
         sequence,
     ]);
-    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
-        sequence,
-        nodePathInfo,
-        getIsExpanded,
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+        nodes: tree,
+        shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+            nodePathInfo: node.nodePathInfo,
+            selectedRowKeys,
+        }) ||
+            (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                node,
+                nodePath: nodePathInfo.sequenceSubscriptionKey,
+                propStatuses,
+                getDragOverrides,
+                getEffectDragOverrides,
+            }),
+    }), [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
-    }), [propStatuses, getIsExpanded, nodePathInfo, sequence]);
-    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
-        height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        keyframes: (0, get_node_keyframes_1.getNodeKeyframes)({
+        selectedRowKeys,
+        tree,
+    ]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => {
+        const totalRowsHeight = flat.reduce((sum, { node }) => sum + (0, timeline_layout_1.getTreeRowHeight)(node), 0);
+        const separators = Math.max(0, flat.length - 1);
+        return totalRowsHeight + separators;
+    }, [flat]);
+    const nodeKeyframes = (0, react_1.useMemo)(() => new Map(flat.map(({ node }) => [
+        (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
+        (0, get_node_keyframes_1.getNodeKeyframes)({
             node,
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             propStatuses,
@@ -66,22 +90,30 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             getEffectDragOverrides,
             timelinePosition,
         }),
-        canEditEasing: getNodeCanEditEasing({
-            node,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
-            propStatuses,
-        }),
-        rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
-        nodePathInfo: node.nodePathInfo,
-    })), [
-        propStatuses,
+    ])), [
         flat,
         getDragOverrides,
         getEffectDragOverrides,
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
+        propStatuses,
         timelinePosition,
     ]);
+    const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => {
+        var _a;
+        const rowKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo);
+        return {
+            height: (0, timeline_layout_1.getTreeRowHeight)(node),
+            keyframes: (_a = nodeKeyframes.get(rowKey)) !== null && _a !== void 0 ? _a : [],
+            canEditEasing: getNodeCanEditEasing({
+                node,
+                nodePath: nodePathInfo.sequenceSubscriptionKey,
+                propStatuses,
+            }),
+            rowKey,
+            nodePathInfo: node.nodePathInfo,
+        };
+    }), [propStatuses, flat, nodePathInfo.sequenceSubscriptionKey, nodeKeyframes]);
     return { rows, expandedHeight };
 };
 exports.useExpandedTrackKeyframeRows = useExpandedTrackKeyframeRows;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -0,0 +1,13 @@
+import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import { type SetPropStatuses } from './save-sequence-prop';
+export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
+    readonly clientId: string | null;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+    readonly propStatusesForOverride: Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly sequence: TSequence;
+    readonly sequenceFrameOffset: number;
+    readonly setPropStatuses: SetPropStatuses;
+    readonly timelinePosition: number;
+    readonly validatedSource: string | null;
+}) => ComboboxValue;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSequenceFreezeFrameMenuItem = void 0;
+const react_1 = require("react");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
+    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
+    const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
+        typeof freezeStatus.codeValue === 'number';
+    const canToggleFreeze = clientId !== null &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedSource !== null &&
+        freezeStatus !== undefined &&
+        freezeStatus !== null &&
+        freezeStatus.status === 'static';
+    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
+        if (!canToggleFreeze ||
+            !sequence.controls ||
+            nodePath === null ||
+            validatedSource === null ||
+            clientId === null) {
+            return;
+        }
+        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+        const maxFrame = Number.isFinite(sequence.duration)
+            ? Math.max(0, sequence.duration - 1)
+            : rawFreezeFrame;
+        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const remove = isFrozen;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedSource,
+                    nodePath,
+                    fieldKey: 'freeze',
+                    value: remove ? null : freezeFrame,
+                    defaultValue: null,
+                    schema: sequence.controls.schema,
+                },
+            ],
+            setPropStatuses,
+            clientId,
+            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
+            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
+        });
+    }, [
+        canToggleFreeze,
+        clientId,
+        isFrozen,
+        nodePath,
+        sequence.controls,
+        sequence.duration,
+        sequence.from,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource,
+    ]);
+    return (0, react_1.useMemo)(() => ({
+        type: 'item',
+        id: 'toggle-freeze-frame',
+        keyHint: null,
+        label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
+        leftItem: null,
+        disabled: !canToggleFreeze,
+        onClick: onToggleFreezeFrame,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value: 'toggle-freeze-frame',
+    }), [canToggleFreeze, isFrozen, onToggleFreezeFrame]);
+};
+exports.useSequenceFreezeFrameMenuItem = useSequenceFreezeFrameMenuItem;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,9 +1,9 @@
-import type { SequenceSchema } from 'remotion';
+import type { InteractivitySchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
     overrideId: string;
     componentIdentity: string | null;
-    schema: SequenceSchema;
-    effects: SequenceSchema[];
+    schema: InteractivitySchema;
+    effects: InteractivitySchema[];
     originalLocation: OriginalPosition | null;
 }) => void;

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -0,0 +1,12 @@
+import { type TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, }: {
+    readonly sequence: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => {
+    filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
+    getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
+    propStatuses: import("remotion").PropStatuses;
+    toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+    tree: import("../../helpers/timeline-layout").TimelineTreeNode[];
+};