@remotion/studio 4.0.527 → 4.0.528

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -37,6 +37,7 @@ exports.TimelineSequencePropItem = exports.TimelineSequenceKeyframedValue = void
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
@@ -46,6 +47,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
+const get_playback_rate_keyframe_changes_1 = require("./get-playback-rate-keyframe-changes");
 const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
@@ -87,9 +89,105 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
+const getPlaybackRateAdjustedDuration = ({ durationInFrames, previousPlaybackRate, playbackRate, }) => {
+    const adjustedDuration = (durationInFrames * previousPlaybackRate) / playbackRate;
+    if (!Number.isFinite(adjustedDuration) || adjustedDuration <= 0) {
+        return null;
+    }
+    const nearestInteger = Math.round(adjustedDuration);
+    return nearestInteger > 0 &&
+        Math.abs(adjustedDuration - nearestInteger) <=
+            Number.EPSILON * Math.max(1, Math.abs(adjustedDuration)) * 2
+        ? nearestInteger
+        : adjustedDuration;
+};
+const Value = ({ field, nodePath, validatedLocation, schema, propStatus, durationPropStatus, }) => {
+    const playbackRateBaseline = (0, react_1.useRef)(null);
+    const previewedKeyframes = (0, react_1.useRef)([]);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const getPlaybackRateChanges = (0, react_1.useCallback)((value) => {
+        var _a;
+        if (field.key !== 'playbackRate' ||
+            nodePath === null ||
+            typeof value !== 'number') {
+            return null;
+        }
+        const currentStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatusesRef.current, nodePath)) === null || _a === void 0 ? void 0 : _a.playbackRate;
+        const previousPlaybackRate = (currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.status) === 'static' &&
+            typeof currentStatus.codeValue === 'number'
+            ? currentStatus.codeValue
+            : field.fieldSchema.default;
+        if (typeof previousPlaybackRate !== 'number') {
+            return null;
+        }
+        return (0, get_playback_rate_keyframe_changes_1.getPlaybackRateKeyframeChanges)({
+            nodePath,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+            previousPlaybackRate,
+            playbackRate: value,
+        });
+    }, [
+        field.fieldSchema.default,
+        field.key,
+        nodePath,
+        overrideIdToNodePathMappings,
+        propStatusesRef,
+        sequencesRef,
+    ]);
+    const getAdjustedDuration = (0, react_1.useCallback)((playbackRate) => {
+        if (field.key !== 'playbackRate' ||
+            !schema.durationInFrames ||
+            (durationPropStatus === null || durationPropStatus === void 0 ? void 0 : durationPropStatus.status) !== 'static' ||
+            typeof durationPropStatus.codeValue !== 'number' ||
+            !Number.isFinite(durationPropStatus.codeValue) ||
+            typeof playbackRate !== 'number' ||
+            !Number.isFinite(playbackRate) ||
+            playbackRate <= 0) {
+            return null;
+        }
+        const currentPlaybackRate = typeof propStatus.codeValue === 'number'
+            ? propStatus.codeValue
+            : field.fieldSchema.default;
+        if (typeof currentPlaybackRate !== 'number' ||
+            !Number.isFinite(currentPlaybackRate) ||
+            currentPlaybackRate <= 0) {
+            return null;
+        }
+        const currentDuration = durationPropStatus.codeValue;
+        let baseline = playbackRateBaseline.current;
+        // Keep the first duration and rate across successive rate edits. A change
+        // to either prop outside this control starts a new baseline.
+        if (baseline === null ||
+            !((currentDuration === baseline.durationInFrames &&
+                currentPlaybackRate === baseline.playbackRate) ||
+                (currentDuration === baseline.lastSavedDurationInFrames &&
+                    currentPlaybackRate === baseline.lastSavedPlaybackRate))) {
+            baseline = {
+                durationInFrames: currentDuration,
+                playbackRate: currentPlaybackRate,
+                lastSavedDurationInFrames: currentDuration,
+                lastSavedPlaybackRate: currentPlaybackRate,
+            };
+            playbackRateBaseline.current = baseline;
+        }
+        return getPlaybackRateAdjustedDuration({
+            durationInFrames: baseline.durationInFrames,
+            previousPlaybackRate: baseline.playbackRate,
+            playbackRate,
+        });
+    }, [
+        durationPropStatus,
+        field.fieldSchema.default,
+        field.key,
+        propStatus.codeValue,
+        schema.durationInFrames,
+    ]);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return nodePath === null
@@ -119,6 +217,8 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
                 : null;
         const stringifiedValue = JSON.stringify(value);
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
+        const adjustedDuration = getAdjustedDuration(value);
+        const keyframeChanges = getPlaybackRateChanges(value);
         if (value === propStatus.codeValue) {
             return Promise.resolve();
         }
@@ -126,9 +226,19 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
             propStatus.codeValue === undefined) {
             return Promise.resolve();
         }
-        return (0, save_sequence_prop_1.saveSequenceProps)({
+        if (adjustedDuration !== null && playbackRateBaseline.current) {
+            playbackRateBaseline.current.lastSavedDurationInFrames =
+                adjustedDuration;
+            playbackRateBaseline.current.lastSavedPlaybackRate = value;
+        }
+        return (0, react_dom_1.unstable_batchedUpdates)(() => (0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
-            movedKeyframes: null,
+            movedKeyframes: keyframeChanges
+                ? {
+                    sequenceKeyframes: keyframeChanges.sequenceKeyframes,
+                    effectKeyframes: keyframeChanges.effectKeyframes,
+                }
+                : null,
             changes: [
                 {
                     fileName: validatedLocation.source,
@@ -139,12 +249,24 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
                     schema,
                     sourceEdit: options === null || options === void 0 ? void 0 : options.sourceEdit,
                 },
+                ...(adjustedDuration === null
+                    ? []
+                    : [
+                        {
+                            fileName: validatedLocation.source,
+                            nodePath,
+                            fieldKey: 'durationInFrames',
+                            value: adjustedDuration,
+                            defaultValue: null,
+                            schema,
+                        },
+                    ]),
             ],
             setPropStatuses,
             clientId,
             undoLabel: `Update ${fieldLabel}`,
             redoLabel: `Update ${fieldLabel} again`,
-        });
+        }));
     }, [
         propStatus,
         clientId,
@@ -152,6 +274,8 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
         field.fieldSchema.default,
         field.fieldSchema.type,
         field.key,
+        getAdjustedDuration,
+        getPlaybackRateChanges,
         nodePath,
         schema,
         setPropStatuses,
@@ -161,27 +285,79 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
         if (nodePath === null) {
             throw new Error('Cannot drag value');
         }
-        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeStaticDragOverride(value));
-    }, [setDragOverrides, nodePath, field.key]);
+        const adjustedDuration = getAdjustedDuration(value);
+        const keyframeChanges = getPlaybackRateChanges(value);
+        (0, react_dom_1.unstable_batchedUpdates)(() => {
+            var _a;
+            for (const preview of previewedKeyframes.current) {
+                if (preview.effectIndex === null) {
+                    clearDragOverrides(preview.nodePath);
+                }
+                else {
+                    clearEffectDragOverrides(preview.nodePath, preview.effectIndex);
+                }
+            }
+            previewedKeyframes.current = (_a = keyframeChanges === null || keyframeChanges === void 0 ? void 0 : keyframeChanges.previews) !== null && _a !== void 0 ? _a : [];
+            setDragOverrides(nodePath, field.key, remotion_1.Internals.makeStaticDragOverride(value));
+            if (adjustedDuration !== null) {
+                setDragOverrides(nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(adjustedDuration));
+            }
+            for (const preview of previewedKeyframes.current) {
+                if (preview.effectIndex === null) {
+                    setDragOverrides(preview.nodePath, preview.fieldKey, {
+                        type: 'keyframed',
+                        status: preview.status,
+                    });
+                }
+                else {
+                    setEffectDragOverrides(preview.nodePath, preview.effectIndex, preview.fieldKey, { type: 'keyframed', status: preview.status });
+                }
+            }
+        });
+    }, [
+        clearDragOverrides,
+        clearEffectDragOverrides,
+        setDragOverrides,
+        setEffectDragOverrides,
+        nodePath,
+        field.key,
+        getAdjustedDuration,
+        getPlaybackRateChanges,
+    ]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         if (nodePath === null) {
             throw new Error('Cannot clear drag value');
         }
         clearDragOverrides(nodePath);
-    }, [clearDragOverrides, nodePath]);
+        for (const preview of previewedKeyframes.current) {
+            if (preview.effectIndex === null) {
+                clearDragOverrides(preview.nodePath);
+            }
+            else {
+                clearEffectDragOverrides(preview.nodePath, preview.effectIndex);
+            }
+        }
+        previewedKeyframes.current = [];
+    }, [clearDragOverrides, clearEffectDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
 const TimelineSequenceKeyframedValueAtSourceFrame = ({ field, nodePath, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChangeAtFrame, onDragEnd, }) => {
     const onDragValueChange = (0, react_1.useCallback)((value) => onDragValueChangeAtFrame(value, sourceFrame), [onDragValueChangeAtFrame, sourceFrame]);
     return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
 };
-const TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, ...props }) => {
+const TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, keyframePlaybackRate, ...props }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus: props.propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
-    return (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...props, sourceFrame: timelinePosition - resolvedKeyframeDisplayOffset }));
+    return (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...props, sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
+            keyframePlaybackRate,
+            propStatus: props.propStatus,
+        }) }));
 };
 const TimelineSequenceKeyframedValueUnmemoized = (props) => {
     const { field, fileName, nodePath, schema, propStatus } = props;
@@ -235,17 +411,21 @@ const TimelineSequenceKeyframedValueUnmemoized = (props) => {
         onDragValueChangeAtFrame: onKeyframedDragValueChangeAtFrame,
         onDragEnd: onKeyframedDragEnd,
     };
-    return props.sourceFrame !== undefined ? (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...valueProps, sourceFrame: props.sourceFrame })) : (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtCurrentFrame, { ...valueProps, keyframeDisplayOffset: props.keyframeDisplayOffset }));
+    return props.sourceFrame !== undefined ? (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...valueProps, sourceFrame: props.sourceFrame })) : (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtCurrentFrame, { ...valueProps, keyframeDisplayOffset: props.keyframeDisplayOffset, keyframePlaybackRate: props.keyframePlaybackRate }));
 };
 exports.TimelineSequenceKeyframedValue = react_1.default.memo(TimelineSequenceKeyframedValueUnmemoized);
-const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode, runtimeValue, }) => {
-    var _a;
+const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, runtimeValue, }) => {
+    var _a, _b;
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
     const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
@@ -264,7 +444,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 propStatus,
                 selected: selection.selected,
                 keyframable,
-            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
+            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
         return (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode })
             ? fieldRowBase
@@ -295,17 +475,70 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             ? JSON.stringify(field.fieldSchema.default)
             : null;
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
+        const previousPlaybackRate = field.key === 'playbackRate' &&
+            propStatus.status === 'static' &&
+            typeof propStatus.codeValue === 'number'
+            ? propStatus.codeValue
+            : null;
+        const nextPlaybackRate = field.fieldSchema.default;
+        const canRetime = previousPlaybackRate !== null &&
+            Number.isFinite(previousPlaybackRate) &&
+            previousPlaybackRate > 0 &&
+            typeof nextPlaybackRate === 'number' &&
+            Number.isFinite(nextPlaybackRate) &&
+            nextPlaybackRate > 0;
+        const keyframeChanges = canRetime
+            ? (0, get_playback_rate_keyframe_changes_1.getPlaybackRateKeyframeChanges)({
+                nodePath,
+                sequences: sequencesRef.current,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                propStatuses: propStatusesRef.current,
+                previousPlaybackRate,
+                playbackRate: nextPlaybackRate,
+            })
+            : null;
+        const durationStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames;
+        const adjustedDuration = canRetime &&
+            schema.durationInFrames &&
+            (durationStatus === null || durationStatus === void 0 ? void 0 : durationStatus.status) === 'static' &&
+            typeof durationStatus.codeValue === 'number' &&
+            Number.isFinite(durationStatus.codeValue)
+            ? getPlaybackRateAdjustedDuration({
+                durationInFrames: durationStatus.codeValue,
+                previousPlaybackRate,
+                playbackRate: nextPlaybackRate,
+            })
+            : null;
         (0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
-            movedKeyframes: null,
-            changes: (0, get_sequence_prop_reset_changes_1.getSequencePropResetChanges)({
-                fileName: validatedLocation.source,
-                nodePath,
-                fieldKey: field.key,
-                value: field.fieldSchema.default,
-                defaultValue,
-                schema,
-            }),
+            movedKeyframes: keyframeChanges
+                ? {
+                    sequenceKeyframes: keyframeChanges.sequenceKeyframes,
+                    effectKeyframes: keyframeChanges.effectKeyframes,
+                }
+                : null,
+            changes: [
+                ...(0, get_sequence_prop_reset_changes_1.getSequencePropResetChanges)({
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value: field.fieldSchema.default,
+                    defaultValue,
+                    schema,
+                }),
+                ...(adjustedDuration !== null
+                    ? [
+                        {
+                            fileName: validatedLocation.source,
+                            nodePath,
+                            fieldKey: 'durationInFrames',
+                            value: adjustedDuration,
+                            defaultValue: null,
+                            schema,
+                        },
+                    ]
+                    : []),
+            ],
             setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: `Reset ${fieldLabel}`,
@@ -318,8 +551,12 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         field.fieldSchema.default,
         field.key,
         nodePath,
+        overrideIdToNodePathMappings,
         previewServerState,
+        propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
+        propStatusesRef,
         schema,
+        sequencesRef,
         setPropStatuses,
         validatedLocation.source,
         propStatus,
@@ -369,7 +606,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     if (propStatus === null) {
         return null;
     }
-    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus, field: field, runtimeValue: runtimeValue, validatedLocation: validatedLocation }));
+    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, durationPropStatus: (_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) !== null && _b !== void 0 ? _b : null, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus, field: field, runtimeValue: runtimeValue, validatedLocation: validatedLocation }));
     if (field.typeName === 'asset' && field.key === 'src') {
         return (jsx_runtime_1.jsx("div", { style: {
                 ...inlineSourceFieldRow,
@@ -377,7 +614,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 ...style,
             }, children: fieldValue }));
     }
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected || containsSelection, children: fieldValue }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, InteractivitySchema, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatus, InteractivitySchema, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
+import { type TimelineSequenceEffectKeyframeDragTarget, type TimelineSequenceKeyframeDragTarget } from './get-keyframed-sequence-drag-targets';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceMediaDurationDragLimits = {
@@ -23,6 +24,7 @@ export declare const getTimelineSequenceMediaDurationDragLimits: ({ cascadedStar
     readonly timelineDurationInFrames: number;
 }) => TimelineSequenceMediaDurationDragLimits | null;
 export type TimelineSequenceDurationDragTarget = {
+    readonly parentPlaybackRate: number;
     readonly fileName: string;
     readonly initialDuration: number;
     readonly maximumDuration: number;
@@ -31,6 +33,7 @@ export type TimelineSequenceDurationDragTarget = {
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceLeftEdgeDragTarget = {
+    readonly parentPlaybackRate: number;
     readonly fileName: string;
     readonly initialDuration: number;
     readonly initialFrom: number;
@@ -42,6 +45,7 @@ export type TimelineSequenceLeftEdgeDragTarget = {
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceFromDragTarget = {
+    readonly parentPlaybackRate: number;
     readonly canSnapToTimelineStart: boolean;
     readonly minimumDeltaFrames: number;
     readonly initialTimelineStart: number;
@@ -51,17 +55,6 @@ export type TimelineSequenceFromDragTarget = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly sequenceKeyframes: TimelineSequenceKeyframeDragTarget[];
 };
-type TimelineSequenceKeyframeDragTarget = {
-    readonly fileName: string;
-    readonly fieldKey: string;
-    readonly isDescendant: boolean;
-    readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: InteractivitySchema;
-    readonly status: CanUpdateSequencePropStatusKeyframed;
-};
-type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
-    readonly effectIndex: number;
-};
 export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
 export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
@@ -149,9 +142,12 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
 export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticComponent<{
+    readonly cursor: "e-resize" | "ew-resize";
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly initialEdgeFrame: number;
+    readonly fps: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
     readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly selected: boolean;
@@ -165,12 +161,14 @@ export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth,
     onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticComponent<{
+    readonly cursor: "ew-resize" | "w-resize";
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly mediaDurationDragLimits: TimelineSequenceMediaDurationDragLimits | null;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
+    readonly initialEdgeFrame: number;
+    readonly fps: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
     readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly selected: boolean;
 }>;
-export {};