@remotion/studio 4.0.476 → 4.0.478

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
+const timeline_video_filmstrip_times_1 = require("./timeline-video-filmstrip-times");
 const outerStyle = {
     width: '100%',
     height: '100%',
@@ -22,7 +23,8 @@ const filmstripContainerStyle = {
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, }) => {
+const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -53,6 +55,94 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             return;
         }
         current.appendChild(canvas);
+        const drawRepeatedFrame = (frame) => {
+            const thumbnailWidth = Math.max(1, frame.displayWidth / window.devicePixelRatio);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let x = 0; x < canvas.width; x += thumbnailWidth) {
+                ctx.drawImage(frame, x, 0, thumbnailWidth, timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT);
+            }
+        };
+        const getCachedFrozenFrame = (timestamp) => {
+            const prefix = (0, timeline_utils_1.getFrameDatabaseKeyPrefix)(src);
+            const keys = Array.from(timeline_utils_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
+            let bestDistance = Infinity;
+            let bestFrame = null;
+            for (const key of keys) {
+                const frame = timeline_utils_1.frameDatabase.get(key);
+                if (!frame) {
+                    continue;
+                }
+                const distance = Math.abs((0, timeline_utils_1.getTimestampFromFrameDatabaseKey)(key) - timestamp);
+                if (distance < bestDistance) {
+                    bestDistance = distance;
+                    bestFrame = frame.frame;
+                }
+            }
+            return bestDistance <= MAX_FROZEN_FRAME_CACHE_DEVIATION
+                ? bestFrame
+                : null;
+        };
+        const times = (0, timeline_video_filmstrip_times_1.getTimelineVideoFilmstripTimes)({
+            trimBefore,
+            durationInFrames,
+            playbackRate,
+            fps,
+            loopDisplay,
+            frozenMediaFrame,
+        });
+        if (times.type === 'frozen') {
+            const timestamp = times.timestampInSeconds * timeline_utils_1.WEBCODECS_TIMESCALE;
+            const cachedFrame = getCachedFrozenFrame(timestamp);
+            if (cachedFrame) {
+                drawRepeatedFrame(cachedFrame);
+                return () => {
+                    current.removeChild(canvas);
+                };
+            }
+            (0, timeline_utils_1.extractFrames)({
+                timestampsInSeconds: ({ track, }) => {
+                    aspectRatio.current = track.width / track.height;
+                    timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
+                    return [times.timestampInSeconds];
+                },
+                src,
+                onVideoSample: (sample) => {
+                    let frame;
+                    try {
+                        frame = sample.toVideoFrame();
+                        const scale = (timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame.displayHeight) *
+                            window.devicePixelRatio;
+                        const transformed = (0, timeline_utils_1.resizeVideoFrame)({
+                            frame,
+                            scale,
+                        });
+                        if (transformed !== frame) {
+                            frame.close();
+                        }
+                        frame = undefined;
+                        const databaseKey = (0, timeline_utils_1.makeFrameDatabaseKey)(src, transformed.timestamp);
+                        (0, timeline_utils_1.addFrameToCache)(databaseKey, transformed);
+                        drawRepeatedFrame(transformed);
+                    }
+                    catch (e) {
+                        if (frame) {
+                            frame.close();
+                        }
+                        throw e;
+                    }
+                    finally {
+                        sample.close();
+                    }
+                },
+                signal: controller.signal,
+            }).catch((e) => {
+                setError(e);
+            });
+            return () => {
+                controller.abort();
+                current.removeChild(canvas);
+            };
+        }
         const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
             visualizationWidth: mediaNaturalWidth,
             loopDisplay,
@@ -85,13 +175,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
         // desired-timestamp -> filled-timestamp
         const filledSlots = new Map();
-        const fromSeconds = trimBefore / fps;
-        const visibleDurationInFrames = shouldRepeatVideo && loopDisplay
-            ? loopDisplay.durationInFrames
-            : durationInFrames;
-        // Trim is applied first, then playbackRate. Each composition frame
-        // advances the source video by `playbackRate` source frames.
-        const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
+        const { fromSeconds, toSeconds } = times;
         const targetWidth = shouldRepeatVideo
             ? targetCanvas.width
             : mediaNaturalWidth;
@@ -216,6 +300,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         durationInFrames,
         error,
         fps,
+        frozenMediaFrame,
         loopDisplay,
         mediaNaturalWidth,
         mediaVisualizationWidth,

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

@@ -107,6 +107,8 @@ const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePat
         return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
     }
     switch (selection.type) {
+        case 'guide':
+            return null;
         case 'sequence':
             return deleteSequences([selection.nodePathInfo], confirm);
         case 'sequence-effect':
@@ -175,6 +177,8 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
     }
     assertTimelineSelectionsHaveSameType(selections);
     switch (firstSelection.type) {
+        case 'guide':
+            return null;
         case 'sequence':
             return deleteSequences(selections
                 .filter(isSequenceRowSelection)

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

@@ -3,12 +3,18 @@ import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { TimelineSelection } from './TimelineSelection';
 export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<void>;
 export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
-    readonly nodePathInfo: SequenceNodePathInfo;
-} & {
     readonly type: "sequence";
+    readonly nodePathInfo: SequenceNodePathInfo;
 } & {
     type: "sequence";
 };
+export declare const isDuplicatableEffectSelection: (selection: TimelineSelection) => selection is {
+    readonly type: "sequence-effect";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly i: number;
+} & {
+    type: "sequence-effect";
+};
 export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
     selections: readonly TimelineSelection[];
     confirm: ConfirmationDialogFunction;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.duplicateSelectedTimelineItems = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
+exports.duplicateSelectedTimelineItems = exports.isDuplicatableEffectSelection = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
@@ -61,11 +61,40 @@ const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';
 exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
+const isDuplicatableEffectSelection = (selection) => selection.type === 'sequence-effect';
+exports.isDuplicatableEffectSelection = isDuplicatableEffectSelection;
+const duplicateEffectsFromSource = (effects) => {
+    return (0, call_api_1.callApi)('/api/duplicate-effect', effects.map((effect) => {
+        const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
+        return {
+            fileName: nodePath.absolutePath,
+            sequenceNodePath: nodePath,
+            effectIndex: effect.i,
+        };
+    }))
+        .then((result) => {
+        if (result.success) {
+            (0, NotificationCenter_1.showNotification)(effects.length === 1
+                ? 'Duplicated effect in source file'
+                : 'Duplicated effects in source files', 2000);
+        }
+        else {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    });
+};
 const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
     const sequenceSelections = selections.filter(exports.isDuplicatableSequenceRowSelection);
-    if (sequenceSelections.length === 0) {
+    if (sequenceSelections.length > 0) {
+        return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+    }
+    const effectSelections = selections.filter(exports.isDuplicatableEffectSelection);
+    if (effectSelections.length === 0) {
         return null;
     }
-    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+    return duplicateEffectsFromSource(effectSelections);
 };
 exports.duplicateSelectedTimelineItems = duplicateSelectedTimelineItems;

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -0,0 +1,20 @@
+import type { ResolvedStackLocation, TSequence } from 'remotion';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import type { TimelineAssetLinkInfo } from './timeline-asset-link';
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+    readonly assetLinkInfo: TimelineAssetLinkInfo | null;
+    readonly canOpenInEditor: boolean;
+    readonly deleteDisabled: boolean;
+    readonly disableInteractivityDisabled: boolean;
+    readonly duplicateDisabled: boolean;
+    readonly fileLocation: string | null;
+    readonly includeSourceEditItems: boolean;
+    readonly onDeleteSequenceFromSource: () => void;
+    readonly onDisableSequenceInteractivity: () => void;
+    readonly onDuplicateSequenceFromSource: () => void;
+    readonly openInEditor: () => void;
+    readonly originalLocation: ResolvedStackLocation | null;
+    readonly selectAsset: (src: string) => void;
+    readonly sequence: TSequence;
+    readonly sourceActions?: readonly ComboboxValue[] | undefined;
+}) => ComboboxValue[];

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequenceContextMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const timeline_asset_link_1 = require("./timeline-asset-link");
+const normalizeMenuDividers = (items) => {
+    var _a;
+    const normalized = [];
+    for (const item of items) {
+        if (item.type === 'divider') {
+            const previousItem = normalized[normalized.length - 1];
+            if (!previousItem || previousItem.type === 'divider') {
+                continue;
+            }
+        }
+        normalized.push(item);
+    }
+    if (((_a = normalized[normalized.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
+        normalized.pop();
+    }
+    return normalized;
+};
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+    const editorName = window.remotion_editorName;
+    const { documentationLink } = sequence;
+    const items = [
+        editorName
+            ? {
+                type: 'item',
+                id: 'show-in-editor',
+                keyHint: null,
+                label: `Show in ${editorName}`,
+                leftItem: null,
+                disabled: !canOpenInEditor || !originalLocation,
+                onClick: openInEditor,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'show-in-editor',
+            }
+            : null,
+        {
+            type: 'item',
+            id: 'copy-file-location',
+            keyHint: null,
+            label: 'Copy file location',
+            leftItem: null,
+            disabled: !fileLocation,
+            onClick: () => {
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'copy-file-location',
+        },
+        documentationLink
+            ? {
+                type: 'item',
+                id: 'open-component-docs',
+                keyHint: null,
+                label: 'Open component docs',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-component-docs',
+            }
+            : null,
+        assetLinkInfo
+            ? {
+                type: 'item',
+                id: 'show-asset',
+                keyHint: null,
+                label: 'Show asset',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'show-asset',
+            }
+            : null,
+        documentationLink || assetLinkInfo
+            ? {
+                type: 'divider',
+                id: 'sequence-link-divider',
+            }
+            : null,
+        sourceActions.length > 0
+            ? {
+                type: 'divider',
+                id: 'sequence-source-actions-divider',
+            }
+            : null,
+        ...sourceActions,
+        {
+            type: 'item',
+            id: 'disable-interactivity',
+            keyHint: null,
+            label: 'Disable interactivity',
+            leftItem: null,
+            disabled: disableInteractivityDisabled,
+            onClick: onDisableSequenceInteractivity,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'disable-interactivity',
+        },
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'duplicate-sequence',
+                keyHint: null,
+                label: 'Duplicate',
+                leftItem: null,
+                disabled: duplicateDisabled,
+                onClick: onDuplicateSequenceFromSource,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'duplicate-sequence',
+            }
+            : null,
+        includeSourceEditItems
+            ? {
+                type: 'divider',
+                id: 'sequence-duplicate-delete-divider',
+            }
+            : null,
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'delete-sequence',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: onDeleteSequenceFromSource,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-sequence',
+            }
+            : null,
+    ].filter(no_react_1.NoReactInternals.truthy);
+    return normalizeMenuDividers(items);
+};
+exports.getSequenceContextMenuItems = getSequenceContextMenuItems;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,11 +2,12 @@ import type { SequenceNodePath, SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
+    componentIdentity: string | null;
     effects: SequenceSchema[];
     nodePath: SequenceNodePath | null;
     clientId: string;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -4,12 +4,19 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
-    const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
+    const key = makeKey({
+        fileName,
+        line,
+        column,
+        componentIdentity,
+        sequenceKeys,
+        effectKeys,
+    });
     let entry = entries.get(key);
     if (!entry) {
         const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
@@ -17,6 +24,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effe
             line,
             column,
             nodePath,
+            componentIdentity,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
             effects: effectKeys,
             clientId,

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -1,3 +1,5 @@
+export declare const PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = "data-remotion-prevent-selection-clear";
 export declare const shouldClearSelectionOnPointerDown: (event: {
     readonly button: number;
+    readonly target?: EventTarget | null | undefined;
 }) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -1,7 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldClearSelectionOnPointerDown = void 0;
+exports.shouldClearSelectionOnPointerDown = exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = void 0;
+exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = 'data-remotion-prevent-selection-clear';
+const isSelectionClearBlocked = (target) => {
+    if (target === null ||
+        target === undefined ||
+        typeof target !== 'object' ||
+        !('closest' in target) ||
+        typeof target.closest !== 'function') {
+        return false;
+    }
+    return (target.closest(`[${exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR}]`) !== null);
+};
 const shouldClearSelectionOnPointerDown = (event) => {
-    return event.button === 0;
+    if (event.button !== 0) {
+        return false;
+    }
+    return !isSelectionClearBlocked(event.target);
 };
 exports.shouldClearSelectionOnPointerDown = shouldClearSelectionOnPointerDown;

package/dist/components/Timeline/timeline-video-filmstrip-times.d.ts

@@ -0,0 +1,17 @@
+import type { LoopDisplay } from 'remotion';
+export type TimelineVideoFilmstripTimes = {
+    type: 'frozen';
+    timestampInSeconds: number;
+} | {
+    type: 'range';
+    fromSeconds: number;
+    toSeconds: number;
+};
+export declare const getTimelineVideoFilmstripTimes: ({ trimBefore, durationInFrames, playbackRate, fps, loopDisplay, frozenMediaFrame, }: {
+    trimBefore: number;
+    durationInFrames: number;
+    playbackRate: number;
+    fps: number;
+    loopDisplay: LoopDisplay | undefined;
+    frozenMediaFrame: number | null;
+}) => TimelineVideoFilmstripTimes;

package/dist/components/Timeline/timeline-video-filmstrip-times.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVideoFilmstripTimes = void 0;
+const timeline_utils_1 = require("@remotion/timeline-utils");
+const getTimelineVideoFilmstripTimes = ({ trimBefore, durationInFrames, playbackRate, fps, loopDisplay, frozenMediaFrame, }) => {
+    if (frozenMediaFrame !== null) {
+        return {
+            type: 'frozen',
+            timestampInSeconds: Math.max(0, frozenMediaFrame / fps),
+        };
+    }
+    const fromSeconds = trimBefore / fps;
+    const visibleDurationInFrames = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay) && loopDisplay
+        ? loopDisplay.durationInFrames
+        : durationInFrames;
+    return {
+        type: 'range',
+        fromSeconds,
+        toSeconds: fromSeconds + (visibleDurationInFrames * playbackRate) / fps,
+    };
+};
+exports.getTimelineVideoFilmstripTimes = getTimelineVideoFilmstripTimes;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -3,19 +3,17 @@ import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
 export type EasingSelection = TimelineEasingSelection;
 export type TimelineEasingValue = 'linear' | [number, number, number, number];
-export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => ({
-    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
-} & {
+export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
     readonly type: "easing";
+    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly segmentIndex: number;
-})[];
+}[];
 export declare const getTimelineEasingValueForSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
-        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
-    } & {
         readonly type: "easing";
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
         readonly fromFrame: number;
         readonly toFrame: number;
         readonly segmentIndex: number;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,7 +1,8 @@
 import type { SequenceSchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, effects, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
     overrideId: string;
+    componentIdentity: string | null;
     schema: SequenceSchema;
     effects: SequenceSchema[];
     originalLocation: OriginalPosition | null;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -7,7 +7,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -50,6 +50,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
             line: locationLine,
             column: locationColumn,
             schema,
+            componentIdentity,
             effects,
             nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
@@ -85,6 +86,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
         };
     }, [
         clientId,
+        componentIdentity,
         effects,
         effectsSignature,
         locationColumn,

package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts

@@ -1,6 +1,30 @@
 import type React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import { type TimelineSelectionInteraction } from './TimelineSelection';
+import { type TimelineDraggedKeyframe } from './TimelineKeyframeDragState';
+import { type TimelineSelection, type TimelineSelectionInteraction } from './TimelineSelection';
+export declare const getKeyframesForTimelineEasingDrag: ({ currentSelections, interaction, selectionItem, selected, }: {
+    readonly currentSelections: readonly TimelineSelection[];
+    readonly interaction: TimelineSelectionInteraction;
+    readonly selectionItem: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    readonly selected: boolean;
+}) => ({
+    readonly type: "keyframe";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly frame: number;
+} & {
+    type: "keyframe";
+})[];
+export declare const getTimelineSelectionsAfterEasingKeyframeDrag: ({ delta, selections, targets, }: {
+    readonly delta: number;
+    readonly selections: readonly TimelineSelection[];
+    readonly targets: readonly TimelineDraggedKeyframe[];
+}) => TimelineSelection[];
 export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
     readonly frame: number;
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -8,3 +32,15 @@ export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect,
     readonly selectable: boolean;
     readonly selected: boolean;
 }) => (e: React.PointerEvent<HTMLButtonElement>) => void;
+export declare const useTimelineEasingKeyframeDrag: ({ onSelect, selectable, selected, selectionItem, }: {
+    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly selectable: boolean;
+    readonly selected: boolean;
+    readonly selectionItem: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+}) => (e: React.PointerEvent<HTMLButtonElement>) => void;