@remotion/studio 4.0.471 → 4.0.473

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;

package/dist/components/TopPanel.d.ts

@@ -3,6 +3,6 @@ export declare const useResponsiveSidebarStatus: () => "collapsed" | "expanded";
 export declare const TopPanel: React.NamedExoticComponent<{
     readonly readOnlyStudio: boolean;
     readonly onMounted: () => void;
-    readonly drawRef: React.RefObject<HTMLDivElement | null>;
+    readonly drawRef: React.Ref<HTMLDivElement>;
     readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/folder-menu-items.d.ts

@@ -0,0 +1,12 @@
+import type { SetStateAction } from 'react';
+import type { ResolvedStackLocation } from 'remotion';
+import type { ModalState } from '../state/modals';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getFolderMenuItems: ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }: {
+    closeMenu: () => void;
+    connectionStatus: "connected" | "disconnected" | "init";
+    folder: import("remotion").TFolder;
+    readOnlyStudio: boolean;
+    resolvedLocation: ResolvedStackLocation | null;
+    setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+}) => ComboboxValue[];

package/dist/components/folder-menu-items.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolderMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const format_file_location_1 = require("../helpers/format-file-location");
+const get_folder_id_1 = require("../helpers/get-folder-id");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }) => {
+    const editorName = window.remotion_editorName;
+    const folderId = (0, get_folder_id_1.getFolderId)({
+        folderName: folder.name,
+        parentName: folder.parent,
+    });
+    const fileLocation = (0, format_file_location_1.formatFileLocation)({
+        location: resolvedLocation,
+        root: window.remotion_cwd,
+    });
+    const showInEditorDisabled = connectionStatus !== 'connected' || !resolvedLocation;
+    const copyFileLocationDisabled = !fileLocation;
+    const codemodDisabled = readOnlyStudio || !folder.stack;
+    return [
+        editorName
+            ? {
+                id: 'show-folder-in-editor',
+                keyHint: null,
+                label: `Show folder in ${editorName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!resolvedLocation) {
+                        return;
+                    }
+                    try {
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Show folder in ${editorName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'show-folder-in-editor',
+                disabled: showInEditorDisabled,
+            }
+            : null,
+        {
+            id: 'copy-folder-file-location',
+            keyHint: null,
+            label: `Copy file location`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                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: 'Copy folder file location',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-folder-file-location',
+            disabled: copyFileLocationDisabled,
+        },
+        editorName || fileLocation
+            ? {
+                type: 'divider',
+                id: 'show-folder-in-editor-divider',
+            }
+            : null,
+        {
+            id: 'rename-folder',
+            keyHint: null,
+            label: `Rename...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'rename-folder',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'Rename folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'rename-folder',
+            disabled: codemodDisabled,
+        },
+        {
+            id: 'delete-folder',
+            keyHint: null,
+            label: `Delete...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'delete-folder',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'Delete folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'delete-folder',
+            disabled: codemodDisabled,
+        },
+        {
+            type: 'divider',
+            id: 'copy-folder-id-divider',
+        },
+        {
+            id: 'copy-folder-id',
+            keyHint: null,
+            label: `Copy ID`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                navigator.clipboard
+                    .writeText(folderId)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy folder ID',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-folder-id',
+            disabled: false,
+        },
+    ].filter(no_react_1.NoReactInternals.truthy);
+};
+exports.getFolderMenuItems = getFolderMenuItems;

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

@@ -0,0 +1,22 @@
+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 insertExistingAssets: ({ assetPaths, compositionFile, compositionId, }: {
+    assetPaths: string[];
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<void>;