@remotion/studio 4.0.472 → 4.0.473

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -8,13 +8,17 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
+const install_required_package_1 = require("../../helpers/install-required-package");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_select_asset_1 = require("../use-select-asset");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineItemStack_1 = require("./TimelineItemStack");
@@ -37,6 +41,65 @@ const effectDropHighlight = {
     outline: '1px solid rgba(0, 155, 255, 0.75)',
     outlineOffset: -1,
 };
+const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
+let currentSequenceDrag = null;
+const sequenceReorderWrapper = {
+    position: 'relative',
+};
+const sequenceReorderLineBase = {
+    backgroundColor: '#0b84ff',
+    height: 2,
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    zIndex: 1,
+};
+const sequenceReorderRejectionStyle = {
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: 4,
+    color: 'white',
+    fontSize: 11,
+    lineHeight: 1.2,
+    maxWidth: 260,
+    padding: '3px 6px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 6,
+    top: 2,
+    zIndex: 2,
+};
+const hasSequenceReorderDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
+};
+const getSequenceReorderDragData = (dataTransfer) => {
+    if (currentSequenceDrag) {
+        return currentSequenceDrag;
+    }
+    const value = dataTransfer.getData(SEQUENCE_REORDER_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed.nodePathKey === 'string' &&
+            typeof parsed.trackIndex === 'number' &&
+            (typeof parsed.parentId === 'string' || parsed.parentId === null) &&
+            typeof parsed.fileName === 'string' &&
+            parsed.nodePath &&
+            Array.isArray(parsed.nodePath.nodePath)) {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        return null;
+    }
+    return null;
+};
+const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
+    return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
+};
 const hasEffectDragType = (dataTransfer) => {
     return Array.from(dataTransfer.types).some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE ||
         type === 'application/json' ||
@@ -59,9 +122,9 @@ const getEffectDragData = (dataTransfer) => {
     }
     return null;
 };
-const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset }) => {
+const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, trackIndex, }) => {
     var _a, _b;
-    var _c;
+    var _c, _d;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -69,10 +132,12 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
+    const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
+    const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
@@ -92,24 +157,35 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         };
     }, [originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
+    const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
+    const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
+    const canReorderSequence = TimelineSelection_1.SELECTION_ENABLED &&
+        previewConnected &&
+        Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
+        (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
+    const canHandleSequenceDrag = TimelineSelection_1.SELECTION_ENABLED && previewConnected;
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
     const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
         }
-        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo]).catch(() => undefined);
-    }, [nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
         if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const message = 'This sequence is programmatically duplicated ' +
-                nodePathInfo.numberOfSequencesWithThisNodePath +
-                ' times in the code. Deleting removes all instances. Continue?';
-            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-            if (!window.confirm(message)) {
+            const shouldDelete = await confirm({
+                title: 'Delete sequence?',
+                message: 'This sequence is programmatically duplicated ' +
+                    nodePathInfo.numberOfSequencesWithThisNodePath +
+                    ' times in the code. Deleting removes all instances. Continue?',
+                confirmLabel: 'Delete',
+            });
+            if (!shouldDelete) {
                 return;
             }
         }
@@ -132,13 +208,173 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    }, [confirm, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    const getSequenceDropTarget = (0, react_1.useCallback)((e) => {
+        const dragData = getSequenceReorderDragData(e.dataTransfer);
+        if (!dragData) {
+            return null;
+        }
+        if (!nodePath || !nodePathKey || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return {
+                type: 'invalid',
+                reason: 'This sequence cannot be reordered from source.',
+            };
+        }
+        if (dragData.nodePathKey === nodePathKey) {
+            return {
+                type: 'invalid',
+                reason: 'Drop onto another sequence to reorder.',
+            };
+        }
+        if ((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== 1) {
+            return {
+                type: 'invalid',
+                reason: 'Programmatically duplicated sequences cannot be reordered.',
+            };
+        }
+        if (dragData.parentId !== parentId ||
+            dragData.fileName !== validatedLocation.source) {
+            return {
+                type: 'invalid',
+                reason: 'Sequences can only be reordered with direct JSX siblings.',
+            };
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const before = e.clientY < rect.top + rect.height / 2;
+        const insertionIndex = before ? trackIndex : trackIndex + 1;
+        const toIndex = getDestinationIndex({
+            fromIndex: dragData.trackIndex,
+            insertionIndex,
+        });
+        if (toIndex === dragData.trackIndex) {
+            return {
+                type: 'invalid',
+                reason: 'This sequence is already in that position.',
+            };
+        }
+        return {
+            type: 'valid',
+            dragData,
+            position: before ? 'before' : 'after',
+        };
+    }, [
+        nodePath,
+        nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath,
+        nodePathKey,
+        parentId,
+        trackIndex,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const onSequenceDragStart = (0, react_1.useCallback)((e) => {
+        if (!canReorderSequence ||
+            !nodePath ||
+            !nodePathKey ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            e.preventDefault();
+            return;
+        }
+        const dragData = {
+            nodePath,
+            nodePathKey,
+            trackIndex,
+            parentId,
+            fileName: validatedLocation.source,
+        };
+        currentSequenceDrag = dragData;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData(SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
+        e.stopPropagation();
+    }, [
+        canReorderSequence,
+        nodePath,
+        nodePathKey,
+        parentId,
+        trackIndex,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const onSequenceDragEnd = (0, react_1.useCallback)(() => {
+        currentSequenceDrag = null;
+        setSequenceDropIndicator(null);
+        setSequenceDropRejection(null);
+    }, []);
+    const onSequenceDragOver = (0, react_1.useCallback)((e) => {
+        if (!hasSequenceReorderDragType(e.dataTransfer)) {
+            return;
+        }
+        const dropTarget = getSequenceDropTarget(e);
+        if (!dropTarget) {
+            setSequenceDropIndicator(null);
+            setSequenceDropRejection(null);
+            return;
+        }
+        if (dropTarget.type === 'invalid') {
+            setSequenceDropIndicator(null);
+            setSequenceDropRejection(dropTarget.reason);
+            e.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'move';
+        setSequenceDropIndicator(dropTarget.position);
+        setSequenceDropRejection(null);
+    }, [getSequenceDropTarget]);
+    const onSequenceDragLeave = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setSequenceDropIndicator(null);
+        setSequenceDropRejection(null);
+    }, []);
+    const onSequenceDrop = (0, react_1.useCallback)(async (e) => {
+        if (!canReorderSequence ||
+            previewServerState.type !== 'connected' ||
+            !nodePath ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return;
+        }
+        const dropTarget = getSequenceDropTarget(e);
+        if (!dropTarget || dropTarget.type === 'invalid') {
+            setSequenceDropIndicator(null);
+            setSequenceDropRejection((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'invalid' ? dropTarget.reason : null);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setSequenceDropIndicator(null);
+        setSequenceDropRejection(null);
+        currentSequenceDrag = null;
+        try {
+            const result = await (0, call_api_1.callApi)('/api/reorder-sequence', {
+                fileName: validatedLocation.source,
+                sourceNodePath: dropTarget.dragData.nodePath,
+                targetNodePath: nodePath,
+                position: dropTarget.position,
+                clientId: previewServerState.clientId,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Reordered sequence', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [
+        canReorderSequence,
+        getSequenceDropTarget,
+        nodePath,
+        previewServerState,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const mediaSrc = sequence.type === 'audio' ||
         sequence.type === 'video' ||
         sequence.type === 'image'
         ? sequence.src
         : null;
-    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, TimelineMediaInfo_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
+    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -211,7 +447,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     leftItem: null,
                     disabled: false,
                     onClick: () => {
-                        (0, TimelineMediaInfo_1.openTimelineAssetLink)(assetLinkInfo, setCanvasContent);
+                        (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
                     },
                     quickSwitcherLabel: null,
                     subMenu: null,
@@ -269,8 +505,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         canOpenInEditor,
         openInEditor,
         previewConnected,
+        selectAsset,
         sequence,
-        setCanvasContent,
     ]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
@@ -321,15 +557,21 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
             ? JSON.stringify(fieldSchema.default)
             : null;
-        (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: 'hidden',
-            value: newValue,
-            defaultValue,
-            schema,
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'hidden',
+                    value: newValue,
+                    defaultValue,
+                    schema,
+                },
+            ],
             setCodeValues,
             clientId: previewServerState.clientId,
+            undoLabel: newValue ? 'Hide sequence' : 'Show sequence',
+            redoLabel: newValue ? 'Hide sequence again' : 'Show sequence again',
         });
     }, [
         codeHiddenStatus,
@@ -371,6 +613,15 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         nodePath !== null &&
         validatedLocation !== null &&
         ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
+    const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
+        if (!sequenceDropIndicator) {
+            return null;
+        }
+        return {
+            ...sequenceReorderLineBase,
+            ...(sequenceDropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
+        };
+    }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
         if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
             return;
@@ -401,6 +652,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             return;
         }
         try {
+            const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
+            await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
             const result = await (0, call_api_1.callApi)('/api/add-effect', {
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
@@ -425,7 +678,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
             ] }) }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: trackRow })) : (trackRow), previewConnected &&
+    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -6,6 +6,7 @@ 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 modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const save_sequence_prop_1 = require("./save-sequence-prop");
@@ -57,6 +58,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         ? previewServerState.clientId
         : null;
     const onSave = (0, react_1.useCallback)((value) => {
+        var _a;
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
         }
@@ -64,6 +66,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             ? JSON.stringify(field.fieldSchema.default)
             : null;
         const stringifiedValue = JSON.stringify(value);
+        const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
         if (value === codeValue.codeValue) {
             return Promise.resolve();
         }
@@ -71,19 +74,26 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             codeValue.codeValue === undefined) {
             return Promise.resolve();
         }
-        return (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            value,
-            defaultValue,
-            schema,
+        return (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value,
+                    defaultValue,
+                    schema,
+                },
+            ],
             setCodeValues,
             clientId,
+            undoLabel: `Update ${fieldLabel}`,
+            redoLabel: `Update ${fieldLabel} again`,
         });
     }, [
         codeValue,
         clientId,
+        field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -111,6 +121,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -152,6 +163,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         codeValue.status !== 'computed';
     const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
+        var _a;
         if (!canShowReset ||
             !canResetToDefault ||
             previewServerState.type !== 'connected' ||
@@ -161,19 +173,27 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
-        (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            value: field.fieldSchema.default,
-            defaultValue,
-            schema,
+        const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: field.key,
+                    value: field.fieldSchema.default,
+                    defaultValue,
+                    schema,
+                },
+            ],
             setCodeValues,
             clientId: previewServerState.clientId,
+            undoLabel: `Reset ${fieldLabel}`,
+            redoLabel: `Reapply ${fieldLabel}`,
         });
     }, [
         canResetToDefault,
         canShowReset,
+        field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
@@ -218,8 +238,32 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
+    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
+        var _a;
+        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+            return;
+        }
+        setSelectedModal({
+            type: 'keyframe-settings',
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
+            status: codeValue,
+            schema,
+            effectIndex: null,
+        });
+    }, [
+        codeValue,
+        field.description,
+        field.key,
+        nodePath,
+        schema,
+        setSelectedModal,
+        validatedLocation.source,
+    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        return [
+        const values = [
             {
                 type: 'item',
                 id: 'reset-sequence-field',
@@ -233,7 +277,28 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canShowReset, onReset]);
+        if (codeValue !== null && isKeyframedStatus(codeValue)) {
+            values.push({
+                type: 'item',
+                id: 'keyframe-settings-sequence-field',
+                keyHint: null,
+                label: 'Keyframe settings...',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: onOpenKeyframeSettings,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'keyframe-settings-sequence-field',
+            });
+        }
+        return values;
+    }, [
+        canShowReset,
+        codeValue,
+        onOpenKeyframeSettings,
+        onReset,
+        previewServerState,
+    ]);
     if (codeValue === null) {
         return null;
     }

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -116,7 +116,12 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
     const targets = new Map();
     for (const nodePathInfo of targetNodePathInfos) {
         const track = findSequenceTrack({ tracks, nodePathInfo });
-        if (!track || !isDurationDraggableSequence(track.sequence)) {
+        const originalSequence = track
+            ? sequences.find((sequence) => sequence.id === track.sequence.id)
+            : null;
+        if (!track ||
+            !originalSequence ||
+            !isDurationDraggableSequence(originalSequence)) {
             return null;
         }
         const nodePath = nodePathInfo.sequenceSubscriptionKey;
@@ -127,7 +132,7 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         if (!targets.has(key)) {
             targets.set(key, {
                 fileName: nodePath.absolutePath,
-                initialDuration: track.sequence.duration,
+                initialDuration: originalSequence.duration,
                 nodePath,
             });
         }
@@ -239,19 +244,15 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             });
             return;
         }
-        const savePromise = changes.length === 1
-            ? (0, save_sequence_prop_1.saveSequenceProp)({
-                ...changes[0],
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-            })
-            : (0, save_sequence_prop_1.saveSequenceProps)({
-                changes,
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-                undoLabel: 'Move selected sequences',
-                redoLabel: 'Move selected sequences back',
-            });
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setCodeValues: latestSetCodeValues,
+            clientId: latestServerState.clientId,
+            undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
+            redoLabel: changes.length > 1
+                ? 'Move selected sequences back'
+                : 'Move sequence back',
+        });
         savePromise
             .catch((err) => {
             remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save from', err);
@@ -408,19 +409,15 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             });
             return;
         }
-        const savePromise = changes.length === 1
-            ? (0, save_sequence_prop_1.saveSequenceProp)({
-                ...changes[0],
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-            })
-            : (0, save_sequence_prop_1.saveSequenceProps)({
-                changes,
-                setCodeValues: latestSetCodeValues,
-                clientId: latestServerState.clientId,
-                undoLabel: 'Resize selected sequences',
-                redoLabel: 'Resize selected sequences back',
-            });
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setCodeValues: latestSetCodeValues,
+            clientId: latestServerState.clientId,
+            undoLabel: changes.length > 1 ? 'Resize selected sequences' : 'Resize sequence',
+            redoLabel: changes.length > 1
+                ? 'Resize selected sequences back'
+                : 'Resize sequence back',
+        });
         savePromise
             .catch((err) => {
             remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save durationInFrames', err);

package/dist/components/Timeline/apply-effect-response-to-code-values.d.ts

@@ -0,0 +1,5 @@
+import type { CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponse } from 'remotion';
+export declare const applyEffectResponseToCodeValues: ({ previous, response, }: {
+    previous: CanUpdateSequencePropsResponse;
+    response: CanUpdateEffectPropsResponse;
+}) => CanUpdateSequencePropsResponse;