@remotion/studio 4.0.472 → 4.0.473

package/dist/components/Timeline/save-effect-prop.js

@@ -3,28 +3,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
+const apply_effect_response_to_code_values_1 = require("./apply-effect-response-to-code-values");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
+const saveEffectProp = (input) => {
+    const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setCodeValues, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
         setCodeValues,
-        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
-            previous: prev,
-            effectIndex,
-            fieldKey,
-            value,
-            schema,
-        }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
-            fileName,
-            sequenceNodePath: nodePath,
-            effectIndex,
-            key: fieldKey,
-            value: JSON.stringify(value),
-            defaultValue,
-            schema,
-            clientId,
-        }),
+        applyOptimistic: (prev) => input.type === 'effect-param'
+            ? prev
+            : (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+                previous: prev,
+                effectIndex,
+                fieldKey,
+                value: input.value,
+                schema,
+            }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_code_values_1.applyEffectResponseToCodeValues)({ previous: prev, response }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
+            ? {
+                type: 'effect-param',
+                fileName,
+                sequenceNodePath: nodePath,
+                effectIndex,
+                key: fieldKey,
+                effectParam: input.effectParam,
+                defaultValue,
+                schema,
+                clientId,
+            }
+            : {
+                type: 'value',
+                fileName,
+                sequenceNodePath: nodePath,
+                effectIndex,
+                key: fieldKey,
+                value: JSON.stringify(input.value),
+                defaultValue,
+                schema,
+                clientId,
+            }),
         errorLabel: 'Could not save effect prop',
     });
 };

package/dist/components/Timeline/save-prop-queue.d.ts

@@ -4,8 +4,9 @@ export type EnqueueSaveOptions<TResponse> = {
     nodePath: SequencePropsSubscriptionKey;
     setCodeValues: SetCodeValues;
     applyOptimistic: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse;
+    applyServerResponse?: (prev: CanUpdateSequencePropsResponse, response: TResponse) => CanUpdateSequencePropsResponse;
     apiCall: () => Promise<TResponse>;
     errorLabel: string;
 };
-export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, applyServerResponse, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
 export {};

package/dist/components/Timeline/save-prop-queue.js

@@ -19,7 +19,7 @@ const dropQueue = (nodePath, q) => {
         queues.delete(key);
     }
 };
-const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }) => {
+const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, applyServerResponse, apiCall, errorLabel, }) => {
     const q = getQueue(nodePath);
     if (q.cancelled) {
         return Promise.resolve();
@@ -33,12 +33,15 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
             return;
         }
         try {
-            await apiCall();
+            const response = await apiCall();
             if (myQueue.cancelled) {
                 return;
             }
             // If nothing more is queued, reset baseline so the next round starts fresh.
             if (myQueue.chain === next) {
+                if (applyServerResponse) {
+                    setCodeValues(nodePath, (prev) => applyServerResponse(prev, response));
+                }
                 dropQueue(nodePath, myQueue);
             }
         }

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -12,13 +12,8 @@ type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
     setCodeValues: SetCodeValues;
     clientId: string;
-    undoLabel: string | null;
-    redoLabel: string | null;
-};
-type SaveSequencePropOptions = SaveSequencePropChange & {
-    setCodeValues: SetCodeValues;
-    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
 };
 export declare const saveSequenceProps: ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
-export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: SaveSequencePropOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequenceProp = exports.saveSequenceProps = void 0;
+exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -8,6 +8,38 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
     if (changes.length === 0) {
         return Promise.resolve();
     }
+    if (changes.length === 1) {
+        const change = changes[0];
+        if (change === undefined) {
+            throw new Error('Expected a sequence prop change');
+        }
+        return (0, save_prop_queue_1.enqueueSavePropChange)({
+            nodePath: change.nodePath,
+            setCodeValues,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+                previous: prev,
+                fieldKey: change.fieldKey,
+                value: change.value,
+                schema: change.schema,
+            }),
+            apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+                edits: [
+                    {
+                        fileName: change.fileName,
+                        nodePath: change.nodePath,
+                        key: change.fieldKey,
+                        value: JSON.stringify(change.value),
+                        defaultValue: change.defaultValue,
+                        schema: change.schema,
+                    },
+                ],
+                clientId,
+                undoLabel,
+                redoLabel,
+            }),
+            errorLabel: 'Could not save sequence prop',
+        });
+    }
     for (const change of changes) {
         setCodeValues(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
             previous: prev,
@@ -33,32 +65,3 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
     }).then(() => undefined);
 };
 exports.saveSequenceProps = saveSequenceProps;
-const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
-    return (0, save_prop_queue_1.enqueueSavePropChange)({
-        nodePath,
-        setCodeValues,
-        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
-            previous: prev,
-            fieldKey,
-            value,
-            schema,
-        }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
-            edits: [
-                {
-                    fileName,
-                    nodePath,
-                    key: fieldKey,
-                    value: JSON.stringify(value),
-                    defaultValue,
-                    schema,
-                },
-            ],
-            clientId,
-            undoLabel: null,
-            redoLabel: null,
-        }),
-        errorLabel: 'Could not save sequence prop',
-    });
-};
-exports.saveSequenceProp = saveSequenceProp;

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

@@ -0,0 +1,3 @@
+export declare const shouldClearSelectionOnPointerDown: (event: {
+    readonly button: number;
+}) => boolean;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldClearSelectionOnPointerDown = void 0;
+const shouldClearSelectionOnPointerDown = (event) => {
+    return event.button === 0;
+};
+exports.shouldClearSelectionOnPointerDown = shouldClearSelectionOnPointerDown;

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -0,0 +1,13 @@
+type LinkInfo = {
+    kind: 'local';
+    assetPath: string;
+    title: string;
+} | {
+    kind: 'remote';
+    href: string;
+    title: string;
+} | null;
+export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
+export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
+export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+const url_state_1 = require("../../helpers/url-state");
+const getTimelineAssetLinkInfo = (src) => {
+    const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
+    if (staticBase && src.startsWith(staticBase + '/')) {
+        const assetPath = src.slice(staticBase.length + 1);
+        return {
+            kind: 'local',
+            assetPath: decodeURIComponent(assetPath),
+            title: decodeURIComponent(assetPath),
+        };
+    }
+    if (src.startsWith('http://') ||
+        src.startsWith('https://') ||
+        src.startsWith('//')) {
+        try {
+            const url = new URL(src.startsWith('//') ? 'https:' + src : src);
+            return { kind: 'remote', href: src, title: url.hostname };
+        }
+        catch (_a) {
+            return { kind: 'remote', href: src, title: src };
+        }
+    }
+    return null;
+};
+exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
+const openTimelineAssetLink = (linkInfo, selectAsset) => {
+    if (linkInfo.kind === 'local') {
+        selectAsset(linkInfo.assetPath);
+        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
+        return;
+    }
+    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+};
+exports.openTimelineAssetLink = openTimelineAssetLink;

package/dist/components/Timeline/timeline-translate-utils.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeTranslate = exports.parseTranslate = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const translateDecimalPlaces = 1;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
@@ -15,7 +16,9 @@ const parseTranslate = (value) => {
 };
 exports.parseTranslate = parseTranslate;
 const formatTranslateCoordinate = (value) => {
-    const rounded = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+    const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+    const factor = 10 ** translateDecimalPlaces;
+    const rounded = Math.round(normalized * factor) / factor;
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
 const serializeTranslate = (x, y) => {

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

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelectionInteraction } from './TimelineSelection';
+export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
+    readonly frame: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly selectable: boolean;
+    readonly selected: boolean;
+}) => (e: React.PointerEvent<HTMLButtonElement>) => void;

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -0,0 +1,378 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineKeyframeDrag = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const call_move_keyframe_1 = require("./call-move-keyframe");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_bounded_keyframe_drag_delta_1 = require("./get-bounded-keyframe-drag-delta");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
+const TimelineKeyframeDragState_1 = require("./TimelineKeyframeDragState");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const pointerDragThreshold = 3;
+const isKeyframeSelection = (selection) => selection.type === 'keyframe';
+const getCodeValueForTarget = ({ codeValues, nodePath, }) => codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
+const getTimelineKeyframeDragTarget = ({ codeValues, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
+    var _a, _b;
+    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
+    if (field === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo,
+    });
+    const sequence = (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null;
+    if (!(sequence === null || sequence === void 0 ? void 0 : sequence.controls)) {
+        return null;
+    }
+    const sourceFrame = displayFrame - ((_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0);
+    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    const fileName = nodePath.absolutePath;
+    const sequenceStatus = getCodeValueForTarget({ codeValues, nodePath });
+    if (!(sequenceStatus === null || sequenceStatus === void 0 ? void 0 : sequenceStatus.canUpdate)) {
+        return null;
+    }
+    if (field.type === 'effect') {
+        const effect = sequence.effects[field.effectIndex];
+        const effectStatus = sequenceStatus.effects.find((candidate) => candidate.effectIndex === field.effectIndex);
+        if (!effect || !(effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.canUpdate)) {
+            return null;
+        }
+        const effectPropStatus = effectStatus.props[field.fieldKey];
+        if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed') {
+            return null;
+        }
+        if (!effectPropStatus.keyframes.some((keyframe) => keyframe.frame === sourceFrame)) {
+            return null;
+        }
+        return {
+            type: 'effect',
+            displayFrame,
+            effectIndex: field.effectIndex,
+            fieldKey: field.fieldKey,
+            fileName,
+            nodePath,
+            nodePathInfo,
+            propStatus: effectPropStatus,
+            schema: effect.schema,
+            sourceFrame,
+        };
+    }
+    const sequencePropStatus = sequenceStatus.props[field.fieldKey];
+    if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed') {
+        return null;
+    }
+    if (!sequencePropStatus.keyframes.some((keyframe) => keyframe.frame === sourceFrame)) {
+        return null;
+    }
+    return {
+        type: 'sequence',
+        displayFrame,
+        fieldKey: field.fieldKey,
+        fileName,
+        nodePath,
+        nodePathInfo,
+        propStatus: sequencePropStatus,
+        schema: sequence.controls.schema,
+        sourceFrame,
+    };
+};
+const getTargetGroupKey = (target) => {
+    return JSON.stringify({
+        type: target.type,
+        nodePath: target.nodePath,
+        effectIndex: target.type === 'effect' ? target.effectIndex : null,
+        fieldKey: target.fieldKey,
+    });
+};
+const groupTargets = (targets) => {
+    var _a;
+    const groups = new Map();
+    for (const target of targets) {
+        const key = getTargetGroupKey(target);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(target);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
+const getMovesForGroup = ({ group, delta, }) => group.map((target) => ({
+    fromFrame: target.sourceFrame,
+    toFrame: target.sourceFrame + delta,
+}));
+const canMoveTimelineKeyframeDragTargets = ({ targets, delta, }) => groupTargets(targets).every((group) => {
+    const [first] = group;
+    if (!first) {
+        return true;
+    }
+    return (0, studio_shared_1.canMoveKeyframesWithoutCollisions)({
+        status: first.propStatus,
+        moves: getMovesForGroup({ group, delta }),
+    });
+});
+const makeMovedKeyframedDragOverride = ({ group, delta, }) => {
+    const [first] = group;
+    if (!first) {
+        throw new Error('Expected a keyframe drag target');
+    }
+    const moves = new Map(getMovesForGroup({ group, delta }).map((move) => [move.fromFrame, move.toFrame]));
+    return {
+        type: 'keyframed',
+        status: {
+            ...first.propStatus,
+            keyframes: first.propStatus.keyframes
+                .map((keyframe) => {
+                var _a;
+                return ({
+                    ...keyframe,
+                    frame: (_a = moves.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame,
+                });
+            })
+                .sort((a, b) => a.frame - b.frame),
+        },
+    };
+};
+const applyDragOverrides = ({ delta, setDragOverrides, setEffectDragOverrides, targets, }) => {
+    for (const group of groupTargets(targets)) {
+        const [first] = group;
+        if (!first) {
+            continue;
+        }
+        const override = makeMovedKeyframedDragOverride({ group, delta });
+        if (first.type === 'sequence') {
+            setDragOverrides(first.nodePath, first.fieldKey, override);
+            continue;
+        }
+        setEffectDragOverrides(first.nodePath, first.effectIndex, first.fieldKey, override);
+    }
+};
+const clearDragOverridesForTargets = ({ clearDragOverrides, clearEffectDragOverrides, targets, }) => {
+    const clearedSequences = new Set();
+    const clearedEffects = new Set();
+    for (const target of targets) {
+        if (target.type === 'sequence') {
+            const sequenceKey = JSON.stringify(target.nodePath);
+            if (clearedSequences.has(sequenceKey)) {
+                continue;
+            }
+            clearedSequences.add(sequenceKey);
+            clearDragOverrides(target.nodePath);
+            continue;
+        }
+        const effectKey = JSON.stringify({
+            nodePath: target.nodePath,
+            effectIndex: target.effectIndex,
+        });
+        if (clearedEffects.has(effectKey)) {
+            continue;
+        }
+        clearedEffects.add(effectKey);
+        clearEffectDragOverrides(target.nodePath, target.effectIndex);
+    }
+};
+const getFrameDelta = ({ clientXDelta, durationInFrames, timelineWidth, }) => {
+    const timelineContentWidth = timelineWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    if (timelineContentWidth <= 0) {
+        return 0;
+    }
+    return Math.round((clientXDelta / timelineContentWidth) * durationInFrames);
+};
+const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, selected, }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { clearDragOverrides, clearEffectDragOverrides, setCodeValues, setDragOverrides, setEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { clearDraggedKeyframes, setDraggedKeyframes } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
+    return (0, react_1.useCallback)((e) => {
+        if (e.button !== 0 ||
+            !selectable ||
+            timelineWidth === null ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const interaction = {
+            shiftKey: e.shiftKey,
+            toggleKey: e.metaKey || e.ctrlKey,
+        };
+        const shouldDragExistingSelection = selected && !interaction.shiftKey && !interaction.toggleKey;
+        if (!shouldDragExistingSelection) {
+            onSelect(interaction);
+        }
+        const clickedSelection = {
+            type: 'keyframe',
+            nodePathInfo,
+            frame,
+        };
+        const selectedKeyframes = currentSelection.current.selectedItems.filter(isKeyframeSelection);
+        const keyframesToDrag = shouldDragExistingSelection && selectedKeyframes.length > 0
+            ? selectedKeyframes
+            : [clickedSelection];
+        const startClientX = e.clientX;
+        let dragTargets = null;
+        let hasDragged = false;
+        let lastDelta = 0;
+        const resolveDragTargets = () => {
+            if (dragTargets !== null) {
+                return dragTargets;
+            }
+            dragTargets = keyframesToDrag
+                .map((keyframe) => getTimelineKeyframeDragTarget({
+                codeValues,
+                displayFrame: keyframe.frame,
+                nodePathInfo: keyframe.nodePathInfo,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                sequences,
+            }))
+                .filter((target) => target !== null);
+            return dragTargets;
+        };
+        const cleanup = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerCancel);
+        };
+        const clearActiveOverrides = () => {
+            const targets = dragTargets;
+            if (targets === null) {
+                return;
+            }
+            clearDragOverridesForTargets({
+                clearDragOverrides,
+                clearEffectDragOverrides,
+                targets,
+            });
+        };
+        const onPointerMove = (event) => {
+            const clientXDelta = event.clientX - startClientX;
+            if (!hasDragged && Math.abs(clientXDelta) < pointerDragThreshold) {
+                return;
+            }
+            const targets = resolveDragTargets();
+            if (targets.length === 0) {
+                cleanup();
+                clearDraggedKeyframes();
+                return;
+            }
+            const rawDelta = getFrameDelta({
+                clientXDelta,
+                durationInFrames: videoConfig.durationInFrames,
+                timelineWidth,
+            });
+            const delta = (0, get_bounded_keyframe_drag_delta_1.getBoundedKeyframeDragDelta)({
+                delta: rawDelta,
+                durationInFrames: videoConfig.durationInFrames,
+                targets,
+            });
+            if (hasDragged && delta === lastDelta) {
+                return;
+            }
+            hasDragged = true;
+            lastDelta = delta;
+            if (!canMoveTimelineKeyframeDragTargets({ targets, delta })) {
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            setDraggedKeyframes(targets.map((target) => ({
+                nodePathInfo: target.nodePathInfo,
+                frame: target.displayFrame + delta,
+            })));
+            applyDragOverrides({
+                delta,
+                setDragOverrides,
+                setEffectDragOverrides,
+                targets,
+            });
+        };
+        const onPointerUp = () => {
+            cleanup();
+            const targets = dragTargets;
+            if (!hasDragged || lastDelta === 0 || targets === null) {
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            if (!canMoveTimelineKeyframeDragTargets({
+                targets,
+                delta: lastDelta,
+            })) {
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            currentSelection.current.selectItems(targets.map((target) => ({
+                type: 'keyframe',
+                nodePathInfo: target.nodePathInfo,
+                frame: target.displayFrame + lastDelta,
+            })));
+            clearActiveOverrides();
+            clearDraggedKeyframes();
+            (0, call_move_keyframe_1.callMoveKeyframes)({
+                sequenceKeyframes: targets
+                    .filter((target) => target.type === 'sequence')
+                    .map((target) => ({
+                    fileName: target.fileName,
+                    nodePath: target.nodePath,
+                    fieldKey: target.fieldKey,
+                    fromFrame: target.sourceFrame,
+                    toFrame: target.sourceFrame + lastDelta,
+                    schema: target.schema,
+                })),
+                effectKeyframes: targets
+                    .filter((target) => target.type === 'effect')
+                    .map((target) => ({
+                    fileName: target.fileName,
+                    nodePath: target.nodePath,
+                    effectIndex: target.effectIndex,
+                    fieldKey: target.fieldKey,
+                    fromFrame: target.sourceFrame,
+                    toFrame: target.sourceFrame + lastDelta,
+                    schema: target.schema,
+                })),
+                setCodeValues,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+        };
+        const onPointerCancel = () => {
+            cleanup();
+            clearActiveOverrides();
+            clearDraggedKeyframes();
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerCancel);
+    }, [
+        clearDragOverrides,
+        clearEffectDragOverrides,
+        clearDraggedKeyframes,
+        codeValues,
+        currentSelection,
+        frame,
+        nodePathInfo,
+        onSelect,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        selectable,
+        selected,
+        sequences,
+        setCodeValues,
+        setDragOverrides,
+        setDraggedKeyframes,
+        setEffectDragOverrides,
+        timelineWidth,
+        videoConfig.durationInFrames,
+    ]);
+};
+exports.useTimelineKeyframeDrag = useTimelineKeyframeDrag;