@remotion/studio 4.0.527 → 4.0.528

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

@@ -14,6 +14,7 @@ export declare const TimelineVideoInfo: React.NamedExoticComponent<{
     readonly muted: boolean;
     readonly marginLeft: number;
     readonly loopDisplay: LoopDisplay | undefined;
+    readonly loopDisplayOffsetInFrames: number;
     readonly frozenMediaFrame: number | null;
     readonly extendLastFrame: boolean;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -39,6 +39,7 @@ const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const studio_pixel_ratio_1 = require("../../helpers/studio-pixel-ratio");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-frame");
@@ -60,7 +61,7 @@ const filmstripContainerStyle = {
 };
 const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
 const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, sourceOffsetInFrames, tiledLoop, playbackRate, volume, doesVolumeChange, muted, frozenMediaFrame, extendLastFrame, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { fps } = (0, remotion_1.useVideoConfig)();
     const resolvedSrc = remotion_1.Internals.usePreload(src);
     const ref = (0, react_1.useRef)(null);
@@ -83,7 +84,7 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
             return;
         }
         const controller = new AbortController();
-        const pixelRatio = window.devicePixelRatio;
+        const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
         const canvas = document.createElement('canvas');
         canvas.width = Math.ceil(visualizationWidth * pixelRatio);
         canvas.height = Math.ceil(timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT * pixelRatio);
@@ -207,7 +208,8 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
             if (!pattern) {
                 return;
             }
-            const phase = (tiledLoop.displayOffsetInFrames %
+            const phase = ((tiledLoop.displayOffsetInFrames +
+                tiledLoop.loopDisplayOffsetInFrames) %
                 tiledLoop.loopDisplay.durationInFrames) *
                 ((tiledLoop.loopWidth * pixelRatio) /
                     tiledLoop.loopDisplay.durationInFrames);
@@ -387,13 +389,11 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
         };
     }, [visualizationWidth]);
     return (jsx_runtime_1.jsxs("div", { style: segmentStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: mediaStartFrame, durationInFrames: durationInFrames, displayOffsetInFrames: (_a = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.displayOffsetInFrames) !== null && _a !== void 0 ? _a : 0, displayDurationInFrames: (_b = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.displayDurationInFrames) !== null && _b !== void 0 ? _b : durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, muted: muted, playbackRate: playbackRate, loopDisplay: tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.loopDisplay }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: mediaStartFrame, durationInFrames: durationInFrames, displayOffsetInFrames: (_a = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.displayOffsetInFrames) !== null && _a !== void 0 ? _a : 0, loopDisplayOffsetInFrames: (_b = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.loopDisplayOffsetInFrames) !== null && _b !== void 0 ? _b : 0, displayDurationInFrames: (_c = tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.displayDurationInFrames) !== null && _c !== void 0 ? _c : durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, muted: muted, playbackRate: playbackRate, loopDisplay: tiledLoop === null || tiledLoop === void 0 ? void 0 : tiledLoop.loopDisplay }) })
         ] }));
 };
 const getVisibleSegments = ({ displayDurationInFrames, displayOffsetInFrames, loopDisplay, }) => {
-    if (!loopDisplay ||
-        loopDisplay.numberOfTimes <= 1 ||
-        loopDisplay.durationInFrames <= 0) {
+    if (!loopDisplay || loopDisplay.durationInFrames <= 0) {
         return [
             {
                 key: 'single',
@@ -416,7 +416,7 @@ const getVisibleSegments = ({ displayDurationInFrames, displayOffsetInFrames, lo
         };
     });
 };
-const TimelineVideoInfoInner = ({ src, visualizationWidth, displayOffsetInFrames, displayDurationInFrames, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, volume, doesVolumeChange, muted, marginLeft, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
+const TimelineVideoInfoInner = ({ src, visualizationWidth, displayOffsetInFrames, displayDurationInFrames, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, volume, doesVolumeChange, muted, marginLeft, loopDisplay, loopDisplayOffsetInFrames, frozenMediaFrame, extendLastFrame, }) => {
     const pixelsPerFrame = visualizationWidth / displayDurationInFrames;
     const loopWidth = loopDisplay
         ? loopDisplay.durationInFrames * pixelsPerFrame
@@ -431,12 +431,14 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, displayOffsetInFrames
         return {
             displayDurationInFrames,
             displayOffsetInFrames,
+            loopDisplayOffsetInFrames,
             loopDisplay,
             loopWidth,
         };
     }, [
         displayDurationInFrames,
         displayOffsetInFrames,
+        loopDisplayOffsetInFrames,
         loopDisplay,
         loopWidth,
         shouldTileLoop,
@@ -447,12 +449,13 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, displayOffsetInFrames
         }
         return getVisibleSegments({
             displayDurationInFrames,
-            displayOffsetInFrames,
+            displayOffsetInFrames: displayOffsetInFrames + loopDisplayOffsetInFrames,
             loopDisplay,
         });
     }, [
         displayDurationInFrames,
         displayOffsetInFrames,
+        loopDisplayOffsetInFrames,
         loopDisplay,
         shouldTileLoop,
     ]);
@@ -465,6 +468,6 @@ const TimelineVideoInfoInner = ({ src, visualizationWidth, displayOffsetInFrames
             .slice(Math.max(0, Math.floor(segmentDisplayOffsetInFrames)), Math.min(values.length, Math.ceil(segmentDisplayOffsetInFrames + segmentDurationInFrames)))
             .join(',');
     };
-    return (jsx_runtime_1.jsx("div", { style: { display: 'flex', marginLeft, height: '100%' }, children: tiledLoop ? (jsx_runtime_1.jsx(TimelineVideoInfoSegment, { src: src, visualizationWidth: visualizationWidth, startMediaFrom: startMediaFrom, mediaFrameAtSequenceZero: mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: tiledLoop.loopDisplay.durationInFrames, sourceOffsetInFrames: 0, tiledLoop: tiledLoop, playbackRate: playbackRate, volume: volume, doesVolumeChange: doesVolumeChange, muted: muted, frozenMediaFrame: frozenMediaFrame, extendLastFrame: extendLastFrame })) : (segments.map((segment) => (jsx_runtime_1.jsx(TimelineVideoInfoSegment, { src: src, visualizationWidth: segment.durationInFrames * pixelsPerFrame, startMediaFrom: startMediaFrom, mediaFrameAtSequenceZero: mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: segment.durationInFrames, sourceOffsetInFrames: segment.sourceOffsetInFrames, tiledLoop: null, playbackRate: playbackRate, volume: getSegmentVolume(segment.sourceOffsetInFrames, segment.durationInFrames), doesVolumeChange: doesVolumeChange, muted: muted, frozenMediaFrame: frozenMediaFrame, extendLastFrame: extendLastFrame }, segment.key)))) }));
+    return (jsx_runtime_1.jsx("div", { style: { display: 'flex', marginLeft, height: '100%' }, children: tiledLoop ? (jsx_runtime_1.jsx(TimelineVideoInfoSegment, { src: src, visualizationWidth: visualizationWidth, startMediaFrom: startMediaFrom, mediaFrameAtSequenceZero: mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: tiledLoop.loopDisplay.durationInFrames, sourceOffsetInFrames: 0, tiledLoop: tiledLoop, playbackRate: playbackRate, volume: volume, doesVolumeChange: doesVolumeChange, muted: muted, frozenMediaFrame: frozenMediaFrame, extendLastFrame: extendLastFrame })) : (segments.map((segment) => (jsx_runtime_1.jsx(TimelineVideoInfoSegment, { src: src, visualizationWidth: segment.durationInFrames * pixelsPerFrame, startMediaFrom: startMediaFrom, mediaFrameAtSequenceZero: mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: segment.durationInFrames, sourceOffsetInFrames: segment.sourceOffsetInFrames, tiledLoop: null, playbackRate: playbackRate, volume: getSegmentVolume(segment.displayOffsetInFrames - loopDisplayOffsetInFrames, segment.durationInFrames), doesVolumeChange: doesVolumeChange, muted: muted, frozenMediaFrame: frozenMediaFrame, extendLastFrame: extendLastFrame }, segment.key)))) }));
 };
 exports.TimelineVideoInfo = react_1.default.memo(TimelineVideoInfoInner);

package/dist/components/Timeline/delete-selected-keyframe.js

@@ -19,7 +19,7 @@ const getValueWhenLastKeyframeDeleted = ({ propStatus, playheadSourceFrame, }) =
 };
 const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
     var _a;
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
     if (field === null) {
         return null;
@@ -51,9 +51,16 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         const effectKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: effectPropStatus,
             keyframeDisplayOffset: (_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0,
+            keyframePlaybackRate: (_d = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _d !== void 0 ? _d : 1,
         });
-        const effectSourceFrame = frame - effectKeyframeDisplayOffset;
-        const effectPlayheadSourceFrame = timelinePosition - effectKeyframeDisplayOffset;
+        const effectSourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: frame,
+            keyframeDisplayOffset: effectKeyframeDisplayOffset,
+            keyframePlaybackRate: (_e = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _e !== void 0 ? _e : 1,
+            propStatus: effectPropStatus,
+        });
+        const effectPlayheadSourceFrame = (timelinePosition - effectKeyframeDisplayOffset) *
+            ((_f = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _f !== void 0 ? _f : 1);
         const effectValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
             propStatus: effectPropStatus,
             playheadSourceFrame: effectPlayheadSourceFrame,
@@ -71,13 +78,20 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
     }
     const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
     const keyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-        propStatus: sequencePropStatus,
-        keyframeDisplayOffset: (_d = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _d !== void 0 ? _d : 0,
+        propStatus: sequencePropStatus !== null && sequencePropStatus !== void 0 ? sequencePropStatus : null,
+        keyframeDisplayOffset: (_g = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _g !== void 0 ? _g : 0,
+        keyframePlaybackRate: (_h = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _h !== void 0 ? _h : 1,
+    });
+    const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame: frame,
+        keyframeDisplayOffset,
+        keyframePlaybackRate: (_j = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _j !== void 0 ? _j : 1,
+        propStatus: sequencePropStatus !== null && sequencePropStatus !== void 0 ? sequencePropStatus : null,
     });
-    const sourceFrame = frame - keyframeDisplayOffset;
-    const playheadSourceFrame = timelinePosition - keyframeDisplayOffset;
+    const playheadSourceFrame = (timelinePosition - keyframeDisplayOffset) *
+        ((_k = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _k !== void 0 ? _k : 1);
     const sequenceValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
-        propStatus: sequencePropStatus,
+        propStatus: sequencePropStatus !== null && sequencePropStatus !== void 0 ? sequencePropStatus : null,
         playheadSourceFrame,
     });
     return {

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -3,12 +3,8 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
 export declare const deleteSequencesFromSource: (nodePathInfos: SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<boolean>;
-export declare const getTimelineSelectionAfterDeletingItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }: {
+export declare const getTimelineSelectionAfterDeletingItems: ({ selections, }: {
     readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
-    readonly sequences?: TSequence[] | undefined;
-    readonly overrideIdsToNodePaths?: OverrideIdToNodePaths | undefined;
-    readonly propStatuses?: PropStatuses | undefined;
-    readonly timelinePosition?: number | undefined;
 }) => readonly import("@remotion/canvas").CanvasSelectionItem[];
 export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, propStatuses, timelinePosition, }: {
     selections: readonly import("@remotion/canvas").CanvasSelectionItem[];

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -1,18 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSequencesFromSource = void 0;
-const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const delete_jsx_nodes_api_1 = require("../delete-jsx-nodes-api");
 const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
-const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
-const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
-const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
@@ -111,95 +105,15 @@ const getSequenceSelectionAfterDeletingEffect = (selection) => {
         },
     };
 };
-const getEasingSelectionAfterDeletingKeyframes = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
-    var _a;
-    if (sequences === undefined ||
-        overrideIdsToNodePaths === undefined ||
-        propStatuses === undefined ||
-        timelinePosition === undefined) {
-        return null;
-    }
-    const keyframeSelections = selections.filter(isKeyframeSelection);
-    if (keyframeSelections.length !== 1) {
-        return null;
-    }
-    const [selection] = keyframeSelections;
-    if (!selection) {
-        return null;
-    }
-    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
-    if (field === null) {
-        return null;
-    }
-    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
-        sequences,
-        overrideIdsToNodePaths,
-        nodePathInfo: selection.nodePathInfo,
-    });
-    if (!track || !track.sequence.controls) {
-        return null;
-    }
-    const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
-    if (field.type === 'sequence') {
-        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
-        if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
-            !(0, update_selected_easing_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
-            return null;
-        }
-        return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-            deletedSourceFrames: [
-                selection.frame -
-                    (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-                        propStatus: sequencePropStatus,
-                        keyframeDisplayOffset: track.keyframeDisplayOffset,
-                    }),
-            ],
-            keyframeDisplayOffset: track.keyframeDisplayOffset,
-            nodePathInfo: selection.nodePathInfo,
-            propStatus: sequencePropStatus,
-            timelinePosition,
-        });
-    }
-    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
-        propStatuses,
-        nodePath,
-        effectIndex: field.effectIndex,
-    });
-    const effectPropStatus = effectStatus.type === 'can-update-effect'
-        ? effectStatus.props[field.fieldKey]
-        : null;
-    if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !(0, update_selected_easing_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
-        return null;
-    }
-    return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-        deletedSourceFrames: [
-            selection.frame -
-                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-                    propStatus: effectPropStatus,
-                    keyframeDisplayOffset: track.keyframeDisplayOffset,
-                }),
-        ],
-        keyframeDisplayOffset: track.keyframeDisplayOffset,
-        nodePathInfo: selection.nodePathInfo,
-        propStatus: effectPropStatus,
-        timelinePosition,
-    });
-};
-const getTimelineSelectionAfterDeletingItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
-    const easingSelection = getEasingSelectionAfterDeletingKeyframes({
-        selections,
-        sequences,
-        overrideIdsToNodePaths,
-        propStatuses,
-        timelinePosition,
-    });
-    if (easingSelection !== null) {
-        return [easingSelection];
-    }
+const getTimelineSelectionAfterDeletingItems = ({ selections, }) => {
     const nextSelections = new Map();
     for (const selection of selections) {
-        const nextSelection = getSequenceSelectionAfterDeletingEffect(selection);
+        if (selection.type === 'easing') {
+            continue;
+        }
+        const nextSelection = selection.type === 'keyframe'
+            ? (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(selection.nodePathInfo)
+            : getSequenceSelectionAfterDeletingEffect(selection);
         if (!nextSelection) {
             return [];
         }

package/dist/components/Timeline/get-animation-item-selection-for-frame.d.ts

@@ -8,9 +8,10 @@ type AnimationItemSelection = Extract<TimelineSelection, {
 type AnimationKeyframe = {
     readonly frame: number;
 };
-export declare const getAnimationItemSelectionForSourceFrame: ({ includeEasings, keyframeDisplayOffset, keyframes, nodePathInfo, sourceFrame, }: {
+export declare const getAnimationItemSelectionForSourceFrame: ({ includeEasings, keyframeDisplayOffset, keyframePlaybackRate, keyframes, nodePathInfo, sourceFrame, }: {
     readonly includeEasings: boolean;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframes: readonly AnimationKeyframe[];
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly sourceFrame: number;

package/dist/components/Timeline/get-animation-item-selection-for-frame.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAnimationItemSelectionForSourceFrame = void 0;
-const getKeyframeSelection = ({ keyframe, keyframeDisplayOffset, nodePathInfo, }) => {
+const getKeyframeSelection = ({ keyframe, keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, }) => {
     return {
         type: 'keyframe',
         nodePathInfo,
-        frame: keyframe.frame + keyframeDisplayOffset,
+        frame: keyframe.frame / keyframePlaybackRate + keyframeDisplayOffset,
     };
 };
-const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDisplayOffset, keyframes, nodePathInfo, sourceFrame, }) => {
+const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDisplayOffset, keyframePlaybackRate, keyframes, nodePathInfo, sourceFrame, }) => {
     const firstKeyframe = keyframes[0];
     if (!firstKeyframe) {
         return null;
@@ -19,6 +19,7 @@ const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDispl
             return getKeyframeSelection({
                 keyframe,
                 keyframeDisplayOffset,
+                keyframePlaybackRate,
                 nodePathInfo,
             });
         }
@@ -33,8 +34,8 @@ const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDispl
             return {
                 type: 'easing',
                 nodePathInfo,
-                fromFrame: keyframe.frame + keyframeDisplayOffset,
-                toFrame: nextKeyframe.frame + keyframeDisplayOffset,
+                fromFrame: keyframe.frame / keyframePlaybackRate + keyframeDisplayOffset,
+                toFrame: nextKeyframe.frame / keyframePlaybackRate + keyframeDisplayOffset,
                 segmentIndex: i,
             };
         }
@@ -43,6 +44,7 @@ const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDispl
     return getKeyframeSelection({
         keyframe: sourceFrame < firstKeyframe.frame ? firstKeyframe : lastKeyframe,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
         nodePathInfo,
     });
 };

package/dist/components/Timeline/get-keyframed-sequence-drag-targets.d.ts

@@ -0,0 +1,23 @@
+import type { CanUpdateSequencePropStatusKeyframed, InteractivitySchema, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+export type TimelineSequenceKeyframeDragTarget = {
+    readonly parentPlaybackRate: number;
+    readonly fileName: string;
+    readonly fieldKey: string;
+    readonly isDescendant: boolean;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+};
+export type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
+    readonly effectIndex: number;
+};
+export declare const getKeyframedSequenceDragTargets: ({ nodePath, sequence, sequences, propStatuses, isDescendant, }: {
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly sequence: TSequence;
+    readonly sequences: TSequence[];
+    readonly propStatuses: PropStatuses;
+    readonly isDescendant: boolean;
+}) => {
+    readonly effectKeyframes: TimelineSequenceEffectKeyframeDragTarget[];
+    readonly sequenceKeyframes: TimelineSequenceKeyframeDragTarget[];
+};

package/dist/components/Timeline/get-keyframed-sequence-drag-targets.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getKeyframedSequenceDragTargets = void 0;
+const canvas_1 = require("@remotion/canvas");
+const remotion_1 = require("remotion");
+const { getParentSequencePlaybackRate } = canvas_1.CanvasInternals;
+const getKeyframedSequenceDragTargets = ({ nodePath, sequence, sequences, propStatuses, isDescendant, }) => {
+    var _a;
+    const status = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
+    if (status === null || status === undefined || !status.canUpdate) {
+        return { effectKeyframes: [], sequenceKeyframes: [] };
+    }
+    const sequenceSchema = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.schema;
+    const sequenceKeyframes = sequenceSchema === undefined
+        ? []
+        : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
+            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
+            ? [
+                {
+                    parentPlaybackRate: getParentSequencePlaybackRate(sequence, sequences),
+                    fileName: nodePath.absolutePath,
+                    fieldKey,
+                    isDescendant,
+                    nodePath,
+                    schema: sequenceSchema,
+                    status: propStatus,
+                },
+            ]
+            : []);
+    const effectKeyframes = status.effects.flatMap((effectStatus) => {
+        var _a;
+        if (!effectStatus.canUpdate) {
+            return [];
+        }
+        const effectSchema = (_a = sequence.effects[effectStatus.effectIndex]) === null || _a === void 0 ? void 0 : _a.schema;
+        if (effectSchema === undefined) {
+            return [];
+        }
+        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
+            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
+            ? [
+                {
+                    effectIndex: effectStatus.effectIndex,
+                    parentPlaybackRate: getParentSequencePlaybackRate(sequence, sequences),
+                    fileName: nodePath.absolutePath,
+                    fieldKey,
+                    isDescendant,
+                    nodePath,
+                    schema: effectSchema,
+                    status: propStatus,
+                },
+            ]
+            : []);
+    });
+    return { effectKeyframes, sequenceKeyframes };
+};
+exports.getKeyframedSequenceDragTargets = getKeyframedSequenceDragTargets;

package/dist/components/Timeline/get-node-keyframes.d.ts

@@ -1,10 +1,11 @@
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses, type SequencePropsSubscriptionKey } from 'remotion';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
-export declare const getNodeKeyframes: ({ node, nodePath, propStatuses, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }: {
+export declare const getNodeKeyframes: ({ node, nodePath, propStatuses, keyframeDisplayOffset, keyframePlaybackRate, getDragOverrides, getEffectDragOverrides, timelinePosition, }: {
     node: TimelineTreeNode;
     nodePath: SequencePropsSubscriptionKey;
     propStatuses: PropStatuses;
     keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
     getDragOverrides: GetDragOverrides;
     getEffectDragOverrides: GetEffectDragOverrides;
     timelinePosition: number;

package/dist/components/Timeline/get-node-keyframes.js

@@ -4,11 +4,11 @@ exports.getNodeHasKeyframes = exports.getNodeKeyframes = void 0;
 const remotion_1 = require("remotion");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const hasOverride = (overrides, key) => Object.prototype.hasOwnProperty.call(overrides, key);
-const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelinePosition, dragOverrideValue, hasDragOverride, }) => {
+const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, keyframePlaybackRate, timelinePosition, dragOverrideValue, hasDragOverride, }) => {
     if ((dragOverrideValue === null || dragOverrideValue === void 0 ? void 0 : dragOverrideValue.type) === 'keyframed') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)(dragOverrideValue.status, keyframeDisplayOffset);
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)(dragOverrideValue.status, keyframeDisplayOffset, keyframePlaybackRate);
     }
-    const keyframes = (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset);
+    const keyframes = (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset, keyframePlaybackRate);
     if (!hasDragOverride || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
         return keyframes;
     }
@@ -22,7 +22,7 @@ const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelineP
     }
     return [...keyframes, dragKeyframe].sort((first, second) => first.frame - second.frame);
 };
-const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
+const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset, keyframePlaybackRate, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
     var _a, _b;
     if (node.kind !== 'field' || node.field === null) {
         return [];
@@ -32,6 +32,7 @@ const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset,
         return withDragOverrideKeyframe({
             propStatus: (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key],
             keyframeDisplayOffset,
+            keyframePlaybackRate,
             timelinePosition,
             dragOverrideValue: dragOverrides[node.field.key],
             hasDragOverride: hasOverride(dragOverrides, node.field.key),
@@ -48,6 +49,7 @@ const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset,
             ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
             : null,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
         timelinePosition,
         dragOverrideValue: effectDragOverrides[node.field.key],
         hasDragOverride: hasOverride(effectDragOverrides, node.field.key),

package/dist/components/Timeline/get-playback-rate-keyframe-changes.d.ts

@@ -0,0 +1,21 @@
+import type { CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
+type KeyframePreview = {
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly effectIndex: number | null;
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+};
+export declare const getPlaybackRateKeyframeChanges: ({ nodePath, sequences, overrideIdsToNodePaths, propStatuses, previousPlaybackRate, playbackRate, }: {
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+    readonly previousPlaybackRate: number;
+    readonly playbackRate: number;
+}) => {
+    readonly sequenceKeyframes: MoveSequenceKeyframeChange[];
+    readonly effectKeyframes: MoveEffectKeyframeChange[];
+    readonly previews: KeyframePreview[];
+};
+export {};