@remotion/studio 4.0.511 → 4.0.513

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -9,6 +9,7 @@ const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
@@ -224,6 +225,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -241,6 +243,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
         return overrides[field.key];
@@ -323,17 +329,17 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         ];
     }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (!window.remotion_editorName ||
-            previewServerState.type !== 'connected') {
+        if (!canOpenInEditor || !defaultEditorId) {
             return;
         }
         event.stopPropagation();
         (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            editorId: defaultEditorId,
             originalPosition: validatedLocation,
             property: field.key,
         }).catch(() => undefined);
-    }, [field.key, previewServerState.type, validatedLocation]);
-    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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) }) }));
+    }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
+    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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -150,8 +150,15 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
             propStatus: sequenceSelectedPropStatus,
             nodePath,
             fileName: nodePath.absolutePath,
-            keyframeDisplayOffset: track.keyframeDisplayOffset,
-            sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: sequenceSelectedPropStatus,
+                keyframeDisplayOffset: track.keyframeDisplayOffset,
+            }),
+            sourceFrame: timelinePosition -
+                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: sequenceSelectedPropStatus,
+                    keyframeDisplayOffset: track.keyframeDisplayOffset,
+                }),
             defaultValue: fieldNode.field.fieldSchema.default,
             dragOverrideValue: ((_c = getDragOverrides(nodePath)) !== null && _c !== void 0 ? _c : {})[fieldNode.field.key],
             schema: track.sequence.controls.schema,
@@ -175,8 +182,15 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         propStatus: effectSelectedPropStatus,
         nodePath,
         fileName: nodePath.absolutePath,
-        keyframeDisplayOffset: track.keyframeDisplayOffset,
-        sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: effectSelectedPropStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        }),
+        sourceFrame: timelinePosition -
+            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: effectSelectedPropStatus,
+                keyframeDisplayOffset: track.keyframeDisplayOffset,
+            }),
         defaultValue: fieldNode.field.fieldSchema.default,
         dragOverrideValue: getEffectDragOverrides(nodePath, fieldNode.field.effectIndex)[fieldNode.field.key],
         schema: fieldNode.field.effectSchema,
@@ -297,7 +311,11 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
+    const jsxFrame = timelinePosition - resolvedKeyframeDisplayOffset;
     const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
     const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
         if (!isKeyframedStatus(propStatus)) {
@@ -336,7 +354,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         propStatus,
         nodePath,
         fileName,
-        keyframeDisplayOffset,
+        keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
         sourceFrame: jsxFrame,
         defaultValue,
         dragOverrideValue,
@@ -349,7 +367,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         fieldKey,
         fileName,
         jsxFrame,
-        keyframeDisplayOffset,
+        resolvedKeyframeDisplayOffset,
         nodePath,
         nodePathInfo,
         propStatus,

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -22,6 +22,7 @@ const TimelineKeyframedValue = ({ field, propStatus, sourceFrame, dragOverrideVa
     }, [propStatus, sourceFrame]);
     const fakeStatus = (0, react_1.useMemo)(() => ({
         status: 'static',
+        keyframeDisplayOffsetAdjustment: null,
         codeValue: computedValue,
     }), [computedValue]);
     const effectiveValue = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -42,8 +42,10 @@ const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const ContextMenu_1 = require("../ContextMenu");
 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_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");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -173,7 +175,11 @@ const TimelineSequenceKeyframedValueAtSourceFrame = ({ field, nodePath, propStat
 };
 const TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, ...props }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...props, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus: props.propStatus,
+        keyframeDisplayOffset,
+    });
+    return (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...props, sourceFrame: timelinePosition - resolvedKeyframeDisplayOffset }));
 };
 const TimelineSequenceKeyframedValueUnmemoized = (props) => {
     const { field, fileName, nodePath, schema, propStatus } = props;
@@ -236,6 +242,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     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 transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
@@ -336,16 +343,16 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         var _a;
-        if (!window.remotion_editorName ||
-            previewServerState.type !== 'connected') {
+        if (!canOpenInEditor || !defaultEditorId) {
             return;
         }
         event.stopPropagation();
         (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            editorId: defaultEditorId,
             originalPosition: validatedLocation,
             property: (_a = field.key.split('.').at(-1)) !== null && _a !== void 0 ? _a : field.key,
         }).catch(() => undefined);
-    }, [field.key, previewServerState.type, validatedLocation]);
+    }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
     if (propStatus === null) {
         return null;
     }

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

@@ -32,7 +32,10 @@ export type TimelineSequenceFromDragTarget = {
     readonly sequenceKeyframes: TimelineSequenceKeyframeDragTarget[];
 };
 type TimelineSequenceKeyframeDragTarget = {
+    readonly fileName: string;
     readonly fieldKey: string;
+    readonly isDescendant: boolean;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly status: CanUpdateSequencePropStatusKeyframed;
 };

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -60,7 +60,7 @@ const baseStyle = {
     zIndex: 1,
     touchAction: 'none',
 };
-const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, }) => {
+const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, isDescendant, }) => {
     var _a;
     const status = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
     if (status === null || status === undefined || !status.canUpdate) {
@@ -69,8 +69,18 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
     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'
-            ? [{ fieldKey, schema: sequenceSchema, status: propStatus }]
+        : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
+            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
+            ? [
+                {
+                    fileName: nodePath.absolutePath,
+                    fieldKey,
+                    isDescendant,
+                    nodePath,
+                    schema: sequenceSchema,
+                    status: propStatus,
+                },
+            ]
             : []);
     const effectKeyframes = status.effects.flatMap((effectStatus) => {
         var _a;
@@ -81,11 +91,15 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
         if (effectSchema === undefined) {
             return [];
         }
-        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed'
+        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed' &&
+            (!isDescendant || propStatus.keyframeDisplayOffsetAdjustment !== null)
             ? [
                 {
                     effectIndex: effectStatus.effectIndex,
+                    fileName: nodePath.absolutePath,
                     fieldKey,
+                    isDescendant,
+                    nodePath,
                     schema: effectSchema,
                     status: propStatus,
                 },
@@ -94,7 +108,21 @@ const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, })
     });
     return { effectKeyframes, sequenceKeyframes };
 };
-const shiftKeyframedStatus = ({ status, deltaFrames, }) => {
+const shiftKeyframedStatus = ({ status, deltaFrames, isDescendant, }) => {
+    if (isDescendant) {
+        const adjustment = status.keyframeDisplayOffsetAdjustment;
+        if (adjustment === null) {
+            throw new Error('Expected descendant keyframes to use an outer frame clock');
+        }
+        return {
+            ...status,
+            keyframeDisplayOffsetAdjustment: null,
+            keyframes: status.keyframes.map((keyframe) => ({
+                ...keyframe,
+                frame: keyframe.frame + adjustment,
+            })),
+        };
+    }
     return {
         ...status,
         keyframes: status.keyframes.map((keyframe) => ({
@@ -352,21 +380,27 @@ const getTimelineSequenceFromDragKeyframeMoves = ({ targets, deltaFrames, }) =>
     }
     return {
         sequenceKeyframes: targets.flatMap((target) => target.sequenceKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
-            fileName: target.fileName,
-            nodePath: target.nodePath,
+            fileName: keyframeTarget.fileName,
+            nodePath: keyframeTarget.nodePath,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
             toFrame: keyframe.frame + deltaFrames,
             schema: keyframeTarget.schema,
+            keyframeDisplayOffsetAdjustmentDelta: keyframeTarget.isDescendant
+                ? -deltaFrames
+                : undefined,
         })))),
         effectKeyframes: targets.flatMap((target) => target.effectKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
-            fileName: target.fileName,
-            nodePath: target.nodePath,
+            fileName: keyframeTarget.fileName,
+            nodePath: keyframeTarget.nodePath,
             effectIndex: keyframeTarget.effectIndex,
             fieldKey: keyframeTarget.fieldKey,
             fromFrame: keyframe.frame,
             toFrame: keyframe.frame + deltaFrames,
             schema: keyframeTarget.schema,
+            keyframeDisplayOffsetAdjustmentDelta: keyframeTarget.isDescendant
+                ? -deltaFrames
+                : undefined,
         })))),
     };
 };
@@ -510,6 +544,8 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         : [draggedNodePathInfo];
     const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
     const targets = new Map();
+    const includedKeyframeNodePaths = new Set();
+    const sequencesById = new Map(sequences.map((sequence) => [sequence.id, sequence]));
     for (const nodePathInfo of targetNodePathInfos) {
         const track = findSequenceTrack({ tracks, nodePathInfo });
         const originalSequence = track
@@ -527,11 +563,43 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
-            const { effectKeyframes, sequenceKeyframes } = getKeyframedSequenceDragTargets({
-                nodePath,
-                sequence: originalSequence,
-                propStatuses,
+            const descendants = sequences.filter((candidate) => {
+                var _a;
+                var _b;
+                let parentId = candidate.id;
+                while (parentId !== null) {
+                    if (parentId === originalSequence.id) {
+                        return true;
+                    }
+                    parentId = (_b = (_a = sequencesById.get(parentId)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+                }
+                return false;
+            });
+            const descendantKeyframes = descendants.flatMap((sequence) => {
+                var _a;
+                const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+                const descendantNodePath = overrideId
+                    ? overrideIdsToNodePaths[overrideId]
+                    : undefined;
+                if (descendantNodePath === undefined) {
+                    return [];
+                }
+                const descendantNodePathKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(descendantNodePath);
+                if (includedKeyframeNodePaths.has(descendantNodePathKey)) {
+                    return [];
+                }
+                includedKeyframeNodePaths.add(descendantNodePathKey);
+                return [
+                    getKeyframedSequenceDragTargets({
+                        nodePath: descendantNodePath,
+                        sequence,
+                        propStatuses,
+                        isDescendant: sequence.id !== originalSequence.id,
+                    }),
+                ];
             });
+            const effectKeyframes = descendantKeyframes.flatMap((descendant) => descendant.effectKeyframes);
+            const sequenceKeyframes = descendantKeyframes.flatMap((descendant) => descendant.sequenceKeyframes);
             targets.set(key, {
                 canSnapToTimelineStart: originalSequence.parent === null,
                 effectKeyframes,
@@ -558,9 +626,17 @@ const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
 const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides, targets, }) => {
     for (const target of targets) {
         clearDragOverrides(target.nodePath);
-        const effectIndexes = new Set(target.effectKeyframes.map((keyframe) => keyframe.effectIndex));
-        for (const effectIndex of effectIndexes) {
-            clearEffectDragOverrides(target.nodePath, effectIndex);
+        for (const keyframeTarget of target.sequenceKeyframes) {
+            clearDragOverrides(keyframeTarget.nodePath);
+        }
+        const clearedEffects = new Set();
+        for (const keyframeTarget of target.effectKeyframes) {
+            const key = `${(0, studio_shared_1.stringifySequenceSubscriptionKey)(keyframeTarget.nodePath)}:${keyframeTarget.effectIndex}`;
+            if (clearedEffects.has(key)) {
+                continue;
+            }
+            clearedEffects.add(key);
+            clearEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex);
         }
     }
 };
@@ -916,20 +992,22 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 });
                 latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
                 for (const keyframeTarget of target.sequenceKeyframes) {
-                    latestRef.current.setDragOverrides(target.nodePath, keyframeTarget.fieldKey, {
+                    latestRef.current.setDragOverrides(keyframeTarget.nodePath, keyframeTarget.fieldKey, {
                         type: 'keyframed',
                         status: shiftKeyframedStatus({
                             status: keyframeTarget.status,
                             deltaFrames,
+                            isDescendant: keyframeTarget.isDescendant,
                         }),
                     });
                 }
                 for (const keyframeTarget of target.effectKeyframes) {
-                    latestRef.current.setEffectDragOverrides(target.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
+                    latestRef.current.setEffectDragOverrides(keyframeTarget.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
                         type: 'keyframed',
                         status: shiftKeyframedStatus({
                             status: keyframeTarget.status,
                             deltaFrames,
+                            isDescendant: keyframeTarget.isDescendant,
                         }),
                     });
                 }

package/dist/components/Timeline/call-move-keyframe.d.ts

@@ -1,4 +1,4 @@
-import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type MoveSequenceKeyframeChange = {
     fileName: string;
@@ -7,6 +7,7 @@ export type MoveSequenceKeyframeChange = {
     fromFrame: number;
     toFrame: number;
     schema: InteractivitySchema;
+    keyframeDisplayOffsetAdjustmentDelta?: number;
 };
 export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
     effectIndex: number;

package/dist/components/Timeline/call-move-keyframe.js

@@ -14,6 +14,27 @@ const groupByNodePath = (keyframes) => {
     }
     return [...groups.values()];
 };
+const applyKeyframeDisplayOffsetAdjustmentDeltas = ({ props, keyframes, }) => {
+    const nextProps = { ...props };
+    const deltas = new Map();
+    for (const keyframe of keyframes) {
+        if (keyframe.keyframeDisplayOffsetAdjustmentDelta !== undefined) {
+            deltas.set(keyframe.fieldKey, keyframe.keyframeDisplayOffsetAdjustmentDelta);
+        }
+    }
+    for (const [fieldKey, delta] of deltas) {
+        const status = nextProps[fieldKey];
+        if ((status === null || status === void 0 ? void 0 : status.status) !== 'keyframed' ||
+            status.keyframeDisplayOffsetAdjustment === null) {
+            continue;
+        }
+        nextProps[fieldKey] = {
+            ...status,
+            keyframeDisplayOffsetAdjustment: status.keyframeDisplayOffsetAdjustment + delta,
+        };
+    }
+    return nextProps;
+};
 const applyOptimisticKeyframeMoves = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, }) => {
     if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
         return;
@@ -23,29 +44,61 @@ const applyOptimisticKeyframeMoves = ({ sequenceKeyframes, effectKeyframes, setP
         if (!firstKeyframe) {
             continue;
         }
-        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
-            previous: prev,
-            keyframes: keyframes.map((keyframe) => ({
-                fieldKey: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
-            })),
-        }));
+        setPropStatuses(firstKeyframe.nodePath, (prev) => {
+            const moved = (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
+                previous: prev,
+                keyframes: keyframes.map((keyframe) => ({
+                    fieldKey: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                })),
+            });
+            if (!moved.canUpdate) {
+                return moved;
+            }
+            return {
+                ...moved,
+                props: applyKeyframeDisplayOffsetAdjustmentDeltas({
+                    props: moved.props,
+                    keyframes,
+                }),
+            };
+        });
     }
     for (const keyframes of groupByNodePath(effectKeyframes)) {
         const [firstKeyframe] = keyframes;
         if (!firstKeyframe) {
             continue;
         }
-        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveEffectKeyframes)({
-            previous: prev,
-            keyframes: keyframes.map((keyframe) => ({
-                effectIndex: keyframe.effectIndex,
-                fieldKey: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
-            })),
-        }));
+        setPropStatuses(firstKeyframe.nodePath, (prev) => {
+            const moved = (0, studio_shared_1.optimisticMoveEffectKeyframes)({
+                previous: prev,
+                keyframes: keyframes.map((keyframe) => ({
+                    effectIndex: keyframe.effectIndex,
+                    fieldKey: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                })),
+            });
+            if (!moved.canUpdate) {
+                return moved;
+            }
+            return {
+                ...moved,
+                effects: moved.effects.map((effect) => {
+                    if (!effect.canUpdate) {
+                        return effect;
+                    }
+                    return {
+                        ...effect,
+                        props: applyKeyframeDisplayOffsetAdjustmentDeltas({
+                            props: effect.props,
+                            keyframes: keyframes.filter((keyframe) => keyframe.effectIndex === effect.effectIndex),
+                        }),
+                    };
+                }),
+            };
+        });
     }
 };
 exports.applyOptimisticKeyframeMoves = applyOptimisticKeyframeMoves;

package/dist/components/Timeline/delete-selected-keyframe.d.ts

@@ -1,14 +1,6 @@
 import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SetPropStatuses } from './save-sequence-prop';
-export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }: {
-    nodePathInfo: SequenceNodePathInfo;
-    frame: number;
-    sequences: TSequence[];
-    overrideIdsToNodePaths: OverrideIdToNodePaths;
-    setPropStatuses: SetPropStatuses;
-    clientId: string;
-}) => Promise<void> | null;
 export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }: {
     keyframes: {
         nodePathInfo: SequenceNodePathInfo;

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedKeyframes = exports.deleteSelectedKeyframe = void 0;
+exports.deleteSelectedKeyframes = void 0;
 const remotion_1 = require("remotion");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+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 getValueWhenLastKeyframeDeleted = ({ propStatus, playheadSourceFrame, }) => {
     var _a;
-    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed' || playheadSourceFrame === null) {
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
         return null;
     }
     return ((_a = remotion_1.Internals.interpolateKeyframedStatus({
@@ -32,10 +33,6 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
     if (!(sequence === null || sequence === void 0 ? void 0 : sequence.controls)) {
         return null;
     }
-    const sourceFrame = frame - ((_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0);
-    const playheadSourceFrame = timelinePosition === null
-        ? null
-        : timelinePosition - ((_d = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _d !== void 0 ? _d : 0);
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
     const fileName = nodePath.absolutePath;
     if (field.type === 'effect') {
@@ -43,19 +40,23 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         if (!effect) {
             return null;
         }
-        const effectStatus = propStatuses !== null
-            ? remotion_1.Internals.getEffectPropStatusesCtx({
-                propStatuses,
-                nodePath,
-                effectIndex: field.effectIndex,
-            })
-            : null;
+        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+            propStatuses,
+            nodePath,
+            effectIndex: field.effectIndex,
+        });
         const effectPropStatus = (effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.type) === 'can-update-effect'
             ? effectStatus.props[field.fieldKey]
             : null;
+        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,
+        });
+        const effectSourceFrame = frame - effectKeyframeDisplayOffset;
+        const effectPlayheadSourceFrame = timelinePosition - effectKeyframeDisplayOffset;
         const effectValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
             propStatus: effectPropStatus,
-            playheadSourceFrame,
+            playheadSourceFrame: effectPlayheadSourceFrame,
         });
         return {
             type: 'effect',
@@ -63,14 +64,18 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
             nodePath,
             effectIndex: field.effectIndex,
             fieldKey: field.fieldKey,
-            sourceFrame,
+            sourceFrame: effectSourceFrame,
             schema: effect.schema,
             valueWhenLastKeyframeDeleted: effectValueWhenLastKeyframeDeleted,
         };
     }
-    const sequencePropStatus = propStatuses !== null
-        ? (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey]
-        : null;
+    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,
+    });
+    const sourceFrame = frame - keyframeDisplayOffset;
+    const playheadSourceFrame = timelinePosition - keyframeDisplayOffset;
     const sequenceValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
         propStatus: sequencePropStatus,
         playheadSourceFrame,
@@ -85,32 +90,6 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         valueWhenLastKeyframeDeleted: sequenceValueWhenLastKeyframeDeleted,
     };
 };
-const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }) => {
-    const deletion = getSelectedKeyframeDeletion({
-        nodePathInfo,
-        frame,
-        sequences,
-        overrideIdsToNodePaths,
-        propStatuses: null,
-        timelinePosition: null,
-    });
-    if (deletion === null) {
-        return null;
-    }
-    if (deletion.type === 'effect') {
-        return (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
-            ...deletion,
-            setPropStatuses,
-            clientId,
-        });
-    }
-    return (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
-        ...deletion,
-        setPropStatuses,
-        clientId,
-    });
-};
-exports.deleteSelectedKeyframe = deleteSelectedKeyframe;
 const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }) => {
     const deletions = keyframes
         .map((keyframe) => getSelectedKeyframeDeletion({