@remotion/studio 4.0.489 → 4.0.491

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEasingClipboardDataFromSelection = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
+exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEasingClipboardDataFromSelection = exports.getEffectPropClipboardDataFromSelection = exports.getEffectsClipboardEnvelopeFromSelections = exports.getEffectClipboardDataFromSelections = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = 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 use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
+const effects_clipboard_1 = require("./effects-clipboard");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -90,6 +93,9 @@ const effectPropStatusToClipboardParam = (prop) => {
         keyframes: prop.keyframes,
         easing: prop.easing,
         clamping: prop.clamping,
+        ...(prop.output === undefined || prop.output === 'linear'
+            ? {}
+            : { output: prop.output }),
         ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
     };
 };
@@ -144,6 +150,83 @@ const getSnapshotsFromSelection = ({ selection, propStatuses, }) => {
     return snapshots;
 };
 exports.getSnapshotsFromSelection = getSnapshotsFromSelection;
+const getEffectClipboardDataFromSelections = ({ selectedItems, propStatuses, }) => {
+    const firstSelection = selectedItems[0];
+    const type = firstSelection ? getCopyType(firstSelection) : null;
+    if (type === null) {
+        return { type: 'none' };
+    }
+    if (selectedItems.some((selection) => getCopyType(selection) !== type)) {
+        return { type: 'mixed' };
+    }
+    const snapshots = selectedItems.flatMap((selection) => {
+        const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
+            selection,
+            propStatuses,
+        });
+        return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
+    });
+    if (snapshots.some((snapshot) => snapshot === null)) {
+        return { type: 'uncopyable' };
+    }
+    return {
+        type: 'valid',
+        payload: {
+            type,
+            version: 3,
+            remotionClipboard: 'effects',
+            effects: snapshots,
+        },
+    };
+};
+exports.getEffectClipboardDataFromSelections = getEffectClipboardDataFromSelections;
+const getEffectsClipboardEnvelopeFromSelections = ({ selectedItems, payload, }) => {
+    if (payload.type !== 'effects-additive' ||
+        selectedItems.some((selection) => selection.type !== 'sequence-effect')) {
+        return {
+            envelopeVersion: 1,
+            payload,
+            sourceIdentity: null,
+            originalEffectIndices: [],
+        };
+    }
+    const effectSelections = selectedItems;
+    const firstSelection = effectSelections[0];
+    if (!firstSelection || effectSelections.length !== payload.effects.length) {
+        return {
+            envelopeVersion: 1,
+            payload,
+            sourceIdentity: null,
+            originalEffectIndices: [],
+        };
+    }
+    const sourceIdentity = makeTargetKey(firstSelection.nodePathInfo.sequenceSubscriptionKey);
+    if (effectSelections.some((selection) => makeTargetKey(selection.nodePathInfo.sequenceSubscriptionKey) !==
+        sourceIdentity)) {
+        return {
+            envelopeVersion: 1,
+            payload,
+            sourceIdentity: null,
+            originalEffectIndices: [],
+        };
+    }
+    const indexedEffects = effectSelections
+        .map((selection, index) => ({
+        effectIndex: selection.i,
+        effect: payload.effects[index],
+    }))
+        .sort((a, b) => a.effectIndex - b.effectIndex);
+    return {
+        envelopeVersion: 1,
+        payload: {
+            ...payload,
+            effects: indexedEffects.map(({ effect }) => effect),
+        },
+        sourceIdentity,
+        originalEffectIndices: indexedEffects.map(({ effectIndex }) => effectIndex),
+    };
+};
+exports.getEffectsClipboardEnvelopeFromSelections = getEffectsClipboardEnvelopeFromSelections;
 const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) => {
     if (selection.type !== 'sequence-effect-prop') {
         return null;
@@ -276,6 +359,7 @@ const TimelineClipboardKeybindings = () => {
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
@@ -345,38 +429,28 @@ const TimelineClipboardKeybindings = () => {
                     });
                     return;
                 }
-                const firstSelection = selectedItems[0];
-                const type = firstSelection ? getCopyType(firstSelection) : null;
-                if (type === null) {
+                const effectClipboardData = (0, exports.getEffectClipboardDataFromSelections)({
+                    selectedItems,
+                    propStatuses,
+                });
+                if (effectClipboardData.type === 'none') {
                     return;
                 }
-                if (selectedItems.some((selection) => getCopyType(selection) !== type)) {
+                if (effectClipboardData.type === 'mixed') {
                     e.preventDefault();
                     (0, NotificationCenter_1.showNotification)('Cannot copy individual effects together with all effects', 3000);
                     return;
                 }
-                const snapshots = selectedItems.flatMap((selection) => {
-                    const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
-                        selection,
-                        propStatuses,
-                    });
-                    return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
-                });
-                if (snapshots.some((snapshot) => snapshot === null)) {
+                if (effectClipboardData.type === 'uncopyable') {
                     e.preventDefault();
                     (0, NotificationCenter_1.showNotification)('Cannot copy effects because one of them contains values that cannot be copied', 3000);
                     return;
                 }
                 e.preventDefault();
                 navigator.clipboard
-                    .writeText(makeClipboardText({
-                    type,
-                    version: 3,
-                    remotionClipboard: 'effects',
-                    effects: snapshots,
-                }))
+                    .writeText(makeClipboardText(effectClipboardData.payload))
                     .then(() => {
-                    (0, NotificationCenter_1.showNotification)(snapshots.length === 1
+                    (0, NotificationCenter_1.showNotification)(effectClipboardData.payload.effects.length === 1
                         ? 'Copied effect to clipboard'
                         : 'Copied effects to clipboard', 1000);
                 })
@@ -389,169 +463,244 @@ const TimelineClipboardKeybindings = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const paste = keybindings.registerKeybinding({
+        const cut = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'v',
+            key: 'x',
             callback: (e) => {
-                const { selectedItems } = currentSelection.current;
+                const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
-                navigator.clipboard
-                    .readText()
-                    .then((text) => {
-                    const propStatuses = propStatusesRef.current;
-                    const sequences = sequencesRef.current;
-                    const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
-                    if (easingResult.status !== 'invalid') {
-                        e.preventDefault();
-                        if (easingResult.status === 'unsupported-version') {
-                            (0, NotificationCenter_1.showNotification)('Cannot paste easing copied from a different Remotion Studio version', 4000);
-                            return;
-                        }
-                        const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
-                        if (easingSelections.length === 0 ||
-                            easingSelections.length !== selectedItems.length) {
-                            (0, NotificationCenter_1.showNotification)('Select an easing to paste onto', 3000);
+                const effectClipboardData = (0, exports.getEffectClipboardDataFromSelections)({
+                    selectedItems,
+                    propStatuses: propStatusesRef.current,
+                });
+                if (effectClipboardData.type === 'none') {
+                    return;
+                }
+                e.preventDefault();
+                if (effectClipboardData.type === 'mixed') {
+                    (0, NotificationCenter_1.showNotification)('Cannot cut individual effects together with all effects', 3000);
+                    return;
+                }
+                if (effectClipboardData.type === 'uncopyable') {
+                    (0, NotificationCenter_1.showNotification)('Cannot cut effects because one of them contains values that cannot be copied', 3000);
+                    return;
+                }
+                const envelope = (0, exports.getEffectsClipboardEnvelopeFromSelections)({
+                    selectedItems,
+                    payload: effectClipboardData.payload,
+                });
+                const propStatuses = propStatusesRef.current;
+                (0, effects_clipboard_1.writeEffectsClipboardEnvelope)(envelope)
+                    .then(() => {
+                    const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+                        selections: selectedItems,
+                        sequences: sequencesRef.current,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        setPropStatuses,
+                        clientId,
+                        confirm,
+                    });
+                    return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
+                        if (!deleted) {
                             return;
                         }
-                        const updatePromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
-                            selections: easingSelections,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                            selections: selectedItems,
                             propStatuses,
-                            setPropStatuses,
-                            clientId,
-                            easing: easingResult.data.easing,
                         });
-                        if (updatePromise === null) {
-                            (0, NotificationCenter_1.showNotification)('Cannot paste onto an easing that cannot be updated', 3000);
-                            return;
-                        }
-                        return updatePromise
-                            .then(() => {
-                            (0, NotificationCenter_1.showNotification)(easingSelections.length === 1
-                                ? 'Pasted easing'
-                                : 'Pasted easing to selected segments', 2000);
-                        })
-                            .catch((err) => {
-                            (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
-                        });
-                    }
-                    const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
-                    if (effectPropResult.status !== 'invalid') {
-                        e.preventDefault();
-                        if (effectPropResult.status === 'unsupported-version') {
-                            (0, NotificationCenter_1.showNotification)('Cannot paste effect prop copied from a different Remotion Studio version', 4000);
-                            return;
+                        if (nextSelection.length === 0) {
+                            clearSelection();
                         }
-                        const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
-                            selectedItems,
-                            payload: effectPropResult.data,
-                            propStatuses,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                        });
-                        if (effectPropTarget.type !== 'valid') {
-                            switch (effectPropTarget.type) {
-                                case 'multiple':
-                                    (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
-                                    return;
-                                case 'none':
-                                    (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
-                                    return;
-                                case 'unsupported':
-                                    (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
-                                    return;
-                                case 'effect-type-mismatch':
-                                    (0, NotificationCenter_1.showNotification)('Select an effect of the same type to paste this prop', 3000);
-                                    return;
-                                case 'prop-mismatch':
-                                    (0, NotificationCenter_1.showNotification)('Select the same effect prop, or an effect with that prop', 3000);
-                                    return;
-                                case 'uncopyable':
-                                    (0, NotificationCenter_1.showNotification)('Cannot paste onto an effect prop that cannot be updated', 3000);
-                                    return;
-                                default:
-                                    throw new Error(`Unexpected paste target: ${effectPropTarget}`);
-                            }
+                        else {
+                            selectItems(nextSelection);
                         }
-                        return (0, save_effect_prop_1.saveEffectProp)({
-                            fileName: effectPropTarget.fileName,
-                            nodePath: effectPropTarget.nodePath,
-                            effectIndex: effectPropTarget.effectIndex,
-                            fieldKey: effectPropTarget.fieldKey,
-                            ...(effectPropResult.data.param.type === 'static'
-                                ? {
-                                    type: 'value',
-                                    value: effectPropResult.data.param.value,
-                                }
-                                : {
-                                    type: 'effect-param',
-                                    effectParam: effectPropResult.data.param,
-                                }),
-                            defaultValue: effectPropTarget.defaultValue,
-                            schema: effectPropTarget.schema,
-                            setPropStatuses,
-                            clientId,
-                        }).then(() => {
-                            (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
-                        });
-                    }
-                    const result = (0, studio_shared_1.parseEffectClipboardDataResult)(text);
-                    if (result.status === 'invalid') {
-                        return;
-                    }
+                    });
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not cut effects: ${err.message}`, 2000);
+                });
+            },
+            commandCtrlKey: true,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const handlePaste = (e) => {
+            const { activeElement } = document;
+            if (activeElement instanceof HTMLInputElement ||
+                activeElement instanceof HTMLTextAreaElement) {
+                return;
+            }
+            const { selectedItems } = currentSelection.current;
+            if (selectedItems.length === 0 || e.clipboardData === null) {
+                return;
+            }
+            e.preventDefault();
+            const { text, envelope } = (0, effects_clipboard_1.readClipboardTextAndEffectsEnvelope)(e.clipboardData);
+            Promise.resolve()
+                .then(() => {
+                const propStatuses = propStatusesRef.current;
+                const sequences = sequencesRef.current;
+                const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
+                if (easingResult.status !== 'invalid') {
                     e.preventDefault();
-                    if (result.status === 'unsupported-version') {
-                        (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
+                    if (easingResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste easing copied from a different Remotion Studio version', 4000);
                         return;
                     }
-                    const { data: payload } = result;
-                    const target = (0, exports.getPasteEffectsTarget)(selectedItems);
-                    if (target.type === 'multiple') {
-                        (0, NotificationCenter_1.showNotification)('Select one target sequence to paste effects', 3000);
+                    const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+                    if (easingSelections.length === 0 ||
+                        easingSelections.length !== selectedItems.length) {
+                        (0, NotificationCenter_1.showNotification)('Select an easing to paste onto', 3000);
                         return;
                     }
-                    if (target.type === 'none') {
-                        (0, NotificationCenter_1.showNotification)('Select a sequence to paste effects onto', 3000);
+                    const updatePromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                        selections: easingSelections,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                        setPropStatuses,
+                        clientId,
+                        easing: easingResult.data.easing,
+                    });
+                    if (updatePromise === null) {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste onto an easing that cannot be updated', 3000);
                         return;
                     }
-                    if (target.type === 'unsupported') {
-                        (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                    return updatePromise
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)(easingSelections.length === 1
+                            ? 'Pasted easing'
+                            : 'Pasted easing to selected segments', 2000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
+                    });
+                }
+                const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
+                if (effectPropResult.status !== 'invalid') {
+                    e.preventDefault();
+                    if (effectPropResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste effect prop copied from a different Remotion Studio version', 4000);
                         return;
                     }
-                    const { sequenceSubscriptionKey: targetSequenceNodePath } = target.nodePathInfo;
-                    return (0, call_api_1.callApi)('/api/paste-effects', {
-                        targetFileName: targetSequenceNodePath.absolutePath,
-                        targetSequenceNodePath,
-                        type: payload.type,
-                        effects: payload.effects,
-                        clientId,
-                    }).then((pasteResult) => {
-                        if (pasteResult.success) {
-                            (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
-                        }
-                        else {
-                            (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
+                    const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
+                        selectedItems,
+                        payload: effectPropResult.data,
+                        propStatuses,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    });
+                    if (effectPropTarget.type !== 'valid') {
+                        switch (effectPropTarget.type) {
+                            case 'multiple':
+                                (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
+                                return;
+                            case 'none':
+                                (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
+                                return;
+                            case 'unsupported':
+                                (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                                return;
+                            case 'effect-type-mismatch':
+                                (0, NotificationCenter_1.showNotification)('Select an effect of the same type to paste this prop', 3000);
+                                return;
+                            case 'prop-mismatch':
+                                (0, NotificationCenter_1.showNotification)('Select the same effect prop, or an effect with that prop', 3000);
+                                return;
+                            case 'uncopyable':
+                                (0, NotificationCenter_1.showNotification)('Cannot paste onto an effect prop that cannot be updated', 3000);
+                                return;
+                            default:
+                                throw new Error(`Unexpected paste target: ${effectPropTarget}`);
                         }
+                    }
+                    return (0, save_effect_prop_1.saveEffectProp)({
+                        fileName: effectPropTarget.fileName,
+                        nodePath: effectPropTarget.nodePath,
+                        effectIndex: effectPropTarget.effectIndex,
+                        fieldKey: effectPropTarget.fieldKey,
+                        ...(effectPropResult.data.param.type === 'static'
+                            ? {
+                                type: 'value',
+                                value: effectPropResult.data.param.value,
+                            }
+                            : {
+                                type: 'effect-param',
+                                effectParam: effectPropResult.data.param,
+                            }),
+                        defaultValue: effectPropTarget.defaultValue,
+                        schema: effectPropTarget.schema,
+                        setPropStatuses,
+                        clientId,
+                    }).then(() => {
+                        (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
                     });
-                })
-                    .catch((err) => {
-                    (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+                }
+                const result = envelope === null
+                    ? (0, studio_shared_1.parseEffectClipboardDataResult)(text)
+                    : { status: 'valid', data: envelope.payload };
+                if (result.status === 'invalid') {
+                    return;
+                }
+                e.preventDefault();
+                if (result.status === 'unsupported-version') {
+                    (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
+                    return;
+                }
+                const { data: payload } = result;
+                const target = (0, exports.getPasteEffectsTarget)(selectedItems);
+                if (target.type === 'multiple') {
+                    (0, NotificationCenter_1.showNotification)('Select one target sequence to paste effects', 3000);
+                    return;
+                }
+                if (target.type === 'none') {
+                    (0, NotificationCenter_1.showNotification)('Select a sequence to paste effects onto', 3000);
+                    return;
+                }
+                if (target.type === 'unsupported') {
+                    (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                    return;
+                }
+                const { sequenceSubscriptionKey: targetSequenceNodePath } = target.nodePathInfo;
+                const insertAtIndices = (envelope === null || envelope === void 0 ? void 0 : envelope.sourceIdentity) === makeTargetKey(targetSequenceNodePath)
+                    ? envelope.originalEffectIndices
+                    : null;
+                return (0, call_api_1.callApi)('/api/paste-effects', {
+                    targetFileName: targetSequenceNodePath.absolutePath,
+                    targetSequenceNodePath,
+                    type: payload.type,
+                    effects: payload.effects,
+                    clientId,
+                    insertAtIndices,
+                }).then((pasteResult) => {
+                    if (pasteResult.success) {
+                        (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
+                    }
+                    else {
+                        (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
+                    }
                 });
-            },
-            commandCtrlKey: true,
-            preventDefault: false,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
+            })
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+            });
+        };
+        // Reading ClipboardEvent data avoids the permission prompt caused by
+        // navigator.clipboard.read().
+        if (keybindings.isHighestContext && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+            document.addEventListener('paste', handlePaste);
+        }
         return () => {
             copy.unregister();
-            paste.unregister();
+            cut.unregister();
+            document.removeEventListener('paste', handlePaste);
         };
     }, [
         canSelect,
+        confirm,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,