@remotion/studio 4.0.526 → 4.0.528

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -38,6 +38,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const resolve_studio_color_1 = require("../../helpers/resolve-studio-color");
+const studio_pixel_ratio_1 = require("../../helpers/studio-pixel-ratio");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const render_frame_1 = require("../../state/render-frame");
 const TimeValue_1 = require("../TimeValue");
@@ -215,8 +217,11 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
                 (frameInterval * fps),
         });
         const draw = () => {
+            const computedStyle = getComputedStyle(canvas);
+            const tickColor = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_15, computedStyle);
+            const labelColor = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.LIGHT_TEXT, computedStyle);
             const { clientWidth: width, scrollLeft } = scrollable;
-            const pixelRatio = window.devicePixelRatio;
+            const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
             const canvasWidth = Math.ceil(width * pixelRatio);
             const canvasHeight = exports.TIMELINE_TIME_INDICATOR_HEIGHT * pixelRatio;
             if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
@@ -228,7 +233,7 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
             context.resetTransform();
             context.clearRect(0, 0, canvas.width, canvas.height);
             context.scale(pixelRatio, pixelRatio);
-            context.fillStyle = colors_1.WHITE_ALPHA_15;
+            context.fillStyle = tickColor;
             const firstFrame = Math.max(0, Math.floor((scrollLeft - timeline_layout_1.TIMELINE_PADDING) / frameInterval));
             const lastFrame = Math.min(durationInFrames - 1, Math.ceil((scrollLeft + width - timeline_layout_1.TIMELINE_PADDING) / frameInterval));
             const xForFrame = (frame) => Math.round(frameInterval * frame + timeline_layout_1.TIMELINE_PADDING - scrollLeft) + 0.5;
@@ -243,11 +248,11 @@ const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, duratio
                 const frame = second * fps;
                 drawTick(frame, 15);
                 if (second > 0) {
-                    context.fillStyle = colors_1.LIGHT_TEXT;
-                    context.font = `${TICK_LABEL_FONT_SIZE}px ${getComputedStyle(canvas).fontFamily}`;
+                    context.fillStyle = labelColor;
+                    context.font = `${TICK_LABEL_FONT_SIZE}px ${computedStyle.fontFamily}`;
                     context.textBaseline = 'top';
                     context.fillText(showFrames ? `${Math.round(frame)}f` : (0, render_frame_1.renderFrame)(frame, fps), xForFrame(frame) + TICK_LABEL_MARGIN_LEFT, 7);
-                    context.fillStyle = colors_1.WHITE_ALPHA_15;
+                    context.fillStyle = tickColor;
                 }
             }
             const { minorTickEvery, mediumTickEvery } = tickScale;

package/dist/components/Timeline/TimelineTrack.js

@@ -66,6 +66,6 @@ const TimelineTrackUnmemoized = ({ track }) => {
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
             jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, cascadedStart: track.cascadedStart, localStart: track.localStart, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
-                ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
+                ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, keyframePlaybackRate: track.keyframePlaybackRate })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type TimelineTrimTooltipState = {
+    readonly deltaFrames: number;
+    readonly edgeFrame: number;
+    readonly x: number;
+    readonly y: number;
+};
+export declare const TimelineTrimTooltip: React.FC<{
+    readonly state: TimelineTrimTooltipState;
+    readonly fps: number;
+}>;

package/dist/components/Timeline/TimelineTrimTooltip.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTrimTooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const colors_1 = require("../../helpers/colors");
+const render_frame_1 = require("../../state/render-frame");
+const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
+const tooltip = {
+    backgroundColor: colors_1.BLACK_ALPHA_85,
+    borderRadius: 2,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE,
+    fontSize: 11,
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: '14px',
+    padding: '4px 7px',
+    pointerEvents: 'none',
+    position: 'fixed',
+    textAlign: 'right',
+    whiteSpace: 'nowrap',
+    zIndex: 2147483647,
+};
+const TimelineTrimTooltip = ({ state, fps }) => {
+    const { showFrames } = (0, react_1.useContext)(TimelineTickFormatProvider_1.TimelineTickFormatContext);
+    const delta = Math.round(state.deltaFrames);
+    const edge = Math.max(0, Math.round(state.edgeFrame));
+    const format = (frame) => showFrames ? `${frame}f` : (0, render_frame_1.renderFrame)(frame, fps);
+    const deltaLabel = delta === 0
+        ? format(0)
+        : `${delta < 0 ? '−' : '+'}${format(Math.abs(delta))}`;
+    const edgeLabel = format(edge);
+    const tooltipWidth = Math.max(82, Math.ceil(Math.max(deltaLabel.length, edgeLabel.length) * 7 + 14));
+    const left = Math.max(8, Math.min(state.x - tooltipWidth / 2, window.innerWidth - tooltipWidth - 8));
+    const top = Math.max(8, Math.min(state.y - 40, window.innerHeight - 44));
+    return (0, react_dom_1.createPortal)(jsx_runtime_1.jsxs("div", { "aria-hidden": "true", style: { ...tooltip, left, top, width: tooltipWidth }, "data-remotion-timeline-trim-tooltip": "true", children: [
+            jsx_runtime_1.jsx("div", { children: deltaLabel }), jsx_runtime_1.jsx("div", { style: { color: colors_1.LIGHT_TEXT }, children: edgeLabel })
+        ] }), document.body);
+};
+exports.TimelineTrimTooltip = TimelineTrimTooltip;

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/TimelineViewport.d.ts

@@ -4,6 +4,7 @@ type TimelineRenderWindow = {
     readonly width: number;
 };
 export declare const TimelineViewportContext: React.Context<TimelineRenderWindow | null>;
+export declare const syncTimelineViewport: () => void;
 export declare const getTimelineRenderWindow: (scrollable: HTMLDivElement) => TimelineRenderWindow;
 export declare const TimelineViewportProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/Timeline/TimelineViewport.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.TimelineViewportContext = void 0;
+exports.TimelineViewportProvider = exports.getTimelineRenderWindow = exports.syncTimelineViewport = exports.TimelineViewportContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.TimelineViewportContext = (0, react_1.createContext)(null);
+let updateTimelineViewport = null;
+const syncTimelineViewport = () => {
+    updateTimelineViewport === null || updateTimelineViewport === void 0 ? void 0 : updateTimelineViewport();
+};
+exports.syncTimelineViewport = syncTimelineViewport;
 const getTimelineRenderWindow = (scrollable) => {
     const viewportWidth = scrollable.clientWidth;
     if (viewportWidth === 0) {
@@ -41,6 +46,7 @@ const TimelineViewportProvider = ({ children, scrollable }) => {
     (0, react_1.useLayoutEffect)(() => {
         let element = null;
         let resizeObserver = null;
+        updateTimelineViewport = update;
         const animationFrame = requestAnimationFrame(() => {
             element = scrollable.current;
             if (!element) {
@@ -52,6 +58,9 @@ const TimelineViewportProvider = ({ children, scrollable }) => {
             element.addEventListener('scroll', update);
         });
         return () => {
+            if (updateTimelineViewport === update) {
+                updateTimelineViewport = null;
+            }
             cancelAnimationFrame(animationFrame);
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
             element === null || element === void 0 ? void 0 : element.removeEventListener('scroll', update);

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_node_api_1 = require("../delete-jsx-node-api");
+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) {
@@ -39,7 +33,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
-    return (0, delete_jsx_node_api_1.deleteJsxNode)({
+    return (0, delete_jsx_nodes_api_1.deleteJsxNodes)({
         nodes: nodePathInfos.map((nodePathInfo) => {
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             return {
@@ -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;