@remotion/studio 4.0.472 → 4.0.474

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

@@ -0,0 +1,380 @@
+"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 = ({ propStatuses, nodePath, }) => propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
+const getTimelineKeyframeDragTarget = ({ propStatuses, 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({ propStatuses, 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 sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { clearDragOverrides, clearEffectDragOverrides, setPropStatuses, 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 propStatuses = propStatusesRef.current;
+        const sequences = sequencesRef.current;
+        const resolveDragTargets = () => {
+            if (dragTargets !== null) {
+                return dragTargets;
+            }
+            dragTargets = keyframesToDrag
+                .map((keyframe) => getTimelineKeyframeDragTarget({
+                propStatuses,
+                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,
+                })),
+                setPropStatuses,
+                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,
+        currentSelection,
+        frame,
+        nodePathInfo,
+        onSelect,
+        overrideIdToNodePathMappings,
+        propStatusesRef,
+        previewServerState,
+        selectable,
+        selected,
+        sequencesRef,
+        setPropStatuses,
+        setDragOverrides,
+        setDraggedKeyframes,
+        setEffectDragOverrides,
+        timelineWidth,
+        videoConfig.durationInFrames,
+    ]);
+};
+exports.useTimelineKeyframeDrag = useTimelineKeyframeDrag;

package/dist/components/import-assets.d.ts

@@ -1,6 +1,37 @@
+import { type FileType, type InsertableCompositionElement } from '@remotion/studio-shared';
+export declare const getAssetElement: ({ fileType, src, }: {
+    fileType: FileType;
+    src: string;
+}) => InsertableCompositionElement | null;
+export declare const getAssetElementFromPath: (assetPath: string) => InsertableCompositionElement | null;
 export declare const pickFilesToImport: () => Promise<File[]>;
 export declare const importAssets: ({ compositionFile, compositionId, files, }: {
     compositionFile: string;
     compositionId: string;
     files: File[];
 }) => Promise<void>;
+export declare const importRemoteAsset: ({ compositionFile, compositionId, url, }: {
+    compositionFile: string;
+    compositionId: string;
+    url: string;
+}) => Promise<void>;
+export declare const insertRemoteAudio: ({ compositionFile, compositionId, url, }: {
+    compositionFile: string;
+    compositionId: string;
+    url: string;
+}) => Promise<void>;
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, }: {
+    assetPaths: string[];
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<void>;
+export declare const insertComponent: ({ component, compositionFile, compositionId, }: {
+    component: {
+        componentName: string;
+        importName: string;
+        importPath: string;
+        props: import("@remotion/studio-shared").ComponentProp[];
+    };
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<void>;