@remotion/studio 4.0.526 → 4.0.528

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

@@ -8,6 +8,7 @@ export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly nestedDepth: number;
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly sequenceFrameOffset: number;
     readonly siblingIndex: number;
     readonly numberOfHiddenDuplicates: number;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -62,6 +62,7 @@ const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const reorder_sequence_api_1 = require("../reorder-sequence-api");
 const selected_outline_types_1 = require("../selected-outline-types");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -69,6 +70,7 @@ const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-i
 const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
@@ -171,10 +173,13 @@ const getSequencePointerDropTargetAtPoint = ({ clientX, clientY, }) => {
     return null;
 };
 const SEQUENCE_REORDER_POINTER_THRESHOLD = 3;
-const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, numberOfHiddenDuplicates, showProvisionalVisibilityToggle, }) => {
+const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, sequenceFrameOffset, siblingIndex, numberOfHiddenDuplicates, showProvisionalVisibilityToggle, }) => {
     var _a, _b;
     var _c, _d, _e;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -190,6 +195,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const { onSelect, selectable, selected, selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedSequenceNodePathInfos = (0, react_1.useMemo)(() => {
         if (!selected ||
             selectedItems.length < 2 ||
@@ -257,6 +263,26 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onSplitSelectedSequences = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+            propStatuses: propStatusesRef.current,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        overrideIdToNodePathMappingsRef,
+        previewInteractive,
+        propStatusesRef,
+        selectedItems,
+        selectedSequenceNodePathInfos,
+        sequencesRef,
+    ]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
         if (deleteDisabled ||
             !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
@@ -750,7 +776,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
-            !nodePath ||
+            nodePathInfo === null ||
             !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
             return;
         }
@@ -758,13 +784,15 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             type: 'add-effect',
             clientId: previewServerState.clientId,
             fileName: validatedLocation.source,
-            nodePath,
+            nodePathInfo,
+            selectItems,
         });
     }, [
         canAddEffect,
-        nodePath,
+        nodePathInfo,
         previewServerState,
         setSelectedModal,
+        selectItems,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const onCrop = (0, react_1.useCallback)(() => {
@@ -806,8 +834,10 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
                 deleteDisabled: !previewInteractive,
                 duplicateDisabled: !previewInteractive,
+                splitDisabled: !previewInteractive,
                 onDeleteSelectedSequences,
                 onDuplicateSelectedSequences,
+                onSplitSelectedSequences,
             });
         }
         const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
@@ -964,6 +994,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onDuplicateSelectedSequences,
+        onSplitSelectedSequences,
         onRenameSequence,
         onSelect,
         openInCodingAgent,
@@ -1013,7 +1044,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const onEffectDrop = (0, react_1.useCallback)(async (e) => {
         if (!canDropEffect ||
             previewServerState.type !== 'connected' ||
-            nodePath === null ||
+            nodePathInfo === null ||
             validatedLocation === null ||
             !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
@@ -1034,10 +1065,17 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         await (0, effect_drag_and_drop_1.addEffectFromDragData)({
             dragData,
             fileName: validatedLocation.source,
-            nodePath,
+            nodePathInfo,
             clientId: previewServerState.clientId,
+            selectItems,
         });
-    }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
+    }, [
+        canDropEffect,
+        nodePathInfo,
+        previewServerState,
+        selectItems,
+        validatedLocation,
+    ]);
     const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: showVisibilityToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: canToggleVisibility ? onToggleVisibility : null })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                     ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -1058,6 +1096,6 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate })) : null] }));
 };
 exports.TimelineSequenceItem = react_1.default.memo(TimelineSequenceItemInner);

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

@@ -14,9 +14,11 @@ type TimelineSequenceKeyframedValueBaseProps = {
 type TimelineSequenceKeyframedValueProps = TimelineSequenceKeyframedValueBaseProps & ({
     readonly sourceFrame: number;
     readonly keyframeDisplayOffset?: never;
+    readonly keyframePlaybackRate?: never;
 } | {
     readonly sourceFrame?: never;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 });
 export declare const TimelineSequenceKeyframedValue: React.NamedExoticComponent<TimelineSequenceKeyframedValueProps>;
 export declare const TimelineSequencePropItem: React.FC<{
@@ -27,6 +29,7 @@ export declare const TimelineSequencePropItem: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
     readonly runtimeValue: unknown;
 }>;

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;