@remotion/studio 4.0.498 → 4.0.500

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -55,6 +55,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -186,7 +187,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
@@ -651,6 +652,29 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
+    const canCrop = (0, react_1.useMemo)(() => {
+        if (!previewInteractive ||
+            !sequence.controls ||
+            !nodePathInfo ||
+            !propStatusesForOverride ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return false;
+        }
+        const activeSchema = remotion_1.Internals.flattenActiveSchema(sequence.controls.schema, (key) => {
+            var _a;
+            return (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation[key];
+        });
+        return (0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+            schema: activeSchema,
+            propStatuses: propStatusesForOverride,
+        });
+    }, [
+        nodePathInfo,
+        previewInteractive,
+        propStatusesForOverride,
+        sequence.controls,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -671,10 +695,20 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         setSelectedModal,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
+    const onCrop = (0, react_1.useCallback)(() => {
+        if (!canCrop || !nodePathInfo) {
+            return;
         }
+        selectItem({
+            type: 'sequence-prop',
+            nodePathInfo: {
+                ...nodePathInfo,
+                auxiliaryKeys: ['controls', selected_outline_types_1.cropFieldKeys.left],
+            },
+            key: selected_outline_types_1.cropFieldKeys.left,
+        }, undefined, undefined, { reveal: true });
+    }, [canCrop, nodePathInfo, selectItem]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -706,12 +740,24 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                                 subMenu: null,
                                 value: 'add-effect',
                             },
-                            {
-                                type: 'divider',
-                                id: 'add-effect-divider',
-                            },
                         ]
                         : []),
+                    {
+                        type: 'item',
+                        id: 'crop',
+                        keyHint: null,
+                        label: 'Crop',
+                        leftItem: null,
+                        disabled: !canCrop,
+                        onClick: onCrop,
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'crop',
+                    },
+                    {
+                        type: 'divider',
+                        id: 'crop-divider',
+                    },
                     {
                         type: 'item',
                         id: 'rename-sequence',
@@ -733,6 +779,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     }, [
         assetLinkInfo,
         canAddEffect,
+        canCrop,
         canOpenInEditor,
         canRenameThisSequence,
         deleteDisabled,
@@ -742,13 +789,13 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         freezeFrameMenuItem,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
+        onCrop,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
         openInEditor,
         originalLocation,
-        previewConnected,
         selectAsset,
         sequence,
     ]);
@@ -818,7 +865,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
     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 &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&

package/dist/components/Timeline/TimelineSequenceName.js

@@ -24,6 +24,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             alignSelf: 'stretch',
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
+            flexShrink: 0,
             fontFamily: 'inherit',
             fontSize: 12,
             lineHeight: 'normal',

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -6,9 +6,10 @@ 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 open_in_editor_1 = require("../../helpers/open-in-editor");
 const ContextMenu_1 = require("../ContextMenu");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const call_add_keyframe_1 = require("./call-add-keyframe");
-const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
@@ -18,8 +19,17 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
+const inlineSourceFieldRow = {
+    alignItems: 'stretch',
+    display: 'flex',
+    minWidth: 0,
+    width: '100%',
+};
+const computedSourceFieldRow = {
+    boxSizing: 'border-box',
+    paddingInline: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
 };
@@ -167,9 +177,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
@@ -267,84 +274,29 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             },
         ];
     }, [canShowReset, onReset]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
-        setFrame((current) => {
-            const next = { ...current, [videoConfig.id]: frame };
-            remotion_1.Internals.persistCurrentFrame(next);
-            return next;
-        });
-    }, [setFrame, videoConfig.id]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (propStatus === null || propStatus.status === 'computed') {
-            return;
-        }
-        const keyframeSelection = {
-            type: 'keyframe',
-            nodePathInfo,
-            frame: sourceFrame + keyframeDisplayOffset,
-        };
-        if (propStatus.status === 'static') {
-            if (!keyframable || previewServerState.type !== 'connected') {
-                return;
-            }
-            const value = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus,
-                dragOverrideValue,
-                frame: sourceFrame,
-                defaultValue: field.fieldSchema.default,
-                shouldResortToDefaultValueIfUndefined: true,
-            });
-            event.stopPropagation();
-            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                fileName: validatedLocation.source,
-                nodePath,
-                fieldKey: field.key,
-                sourceFrame,
-                value,
-                schema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            }).catch(() => undefined);
-            selectItems([keyframeSelection], { reveal: true });
-            seekToDisplayFrame(keyframeSelection.frame);
-            return;
-        }
-        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
-            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
-            keyframeDisplayOffset,
-            keyframes: propStatus.keyframes,
-            nodePathInfo,
-            sourceFrame,
-        });
-        if (targetSelection === null) {
+        var _a;
+        if (!window.remotion_editorName ||
+            previewServerState.type !== 'connected') {
             return;
         }
         event.stopPropagation();
-        selectItems([targetSelection], { reveal: true });
-        if (targetSelection.type === 'keyframe') {
-            seekToDisplayFrame(targetSelection.frame);
-        }
-    }, [
-        dragOverrideValue,
-        field.fieldSchema.default,
-        field.key,
-        keyframeDisplayOffset,
-        keyframable,
-        nodePath,
-        nodePathInfo,
-        previewServerState,
-        propStatus,
-        schema,
-        seekToDisplayFrame,
-        selectItems,
-        setPropStatuses,
-        sourceFrame,
-        validatedLocation.source,
-    ]);
+        (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            originalPosition: validatedLocation,
+            property: (_a = field.key.split('.').at(-1)) !== null && _a !== void 0 ? _a : field.key,
+        }).catch(() => undefined);
+    }, [field.key, previewServerState.type, validatedLocation]);
     if (propStatus === null) {
         return null;
     }
     const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
+    if (field.typeName === 'asset' && field.key === 'src') {
+        return (jsx_runtime_1.jsx("div", { style: {
+                ...inlineSourceFieldRow,
+                ...(propStatus.status === 'computed' ? computedSourceFieldRow : null),
+                ...style,
+            }, children: fieldValue }));
+    }
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';
@@ -42,6 +42,10 @@ type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarg
 export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
 export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
+export declare const canResizeTimelineSequenceDuration: ({ sequence, status, }: {
+    readonly sequence: TSequence;
+    readonly status: CanUpdateSequencePropStatus | undefined;
+}) => boolean;
 export declare const isTimelineSequenceLeftEdgeDraggable: (sequence: TSequence) => boolean;
 export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, minimumDuration, }: {
     readonly initialDuration: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -107,7 +107,6 @@ const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
         return 1;
     }
     const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
-        candidate.rootId === sequence.rootId &&
         ((0, exports.isTransitionSeriesSequence)(candidate) ||
             isTransitionSeriesTransition(candidate))));
     const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);
@@ -129,6 +128,16 @@ const isTimelineSequenceDurationDraggable = (sequence) => {
         Boolean(sequence.controls));
 };
 exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
+const canResizeTimelineSequenceDuration = ({ sequence, status, }) => {
+    if ((status === null || status === void 0 ? void 0 : status.status) !== 'static') {
+        return false;
+    }
+    if (sequence.type === 'audio' || sequence.type === 'video') {
+        return status.codeValue !== undefined;
+    }
+    return true;
+};
+exports.canResizeTimelineSequenceDuration = canResizeTimelineSequenceDuration;
 const isTimelineSequenceLeftEdgeDraggable = (sequence) => {
     return ((!sequence.isInsideSeries || (0, exports.isCascadingSequence)(sequence)) &&
         Boolean(sequence.controls) &&
@@ -338,6 +347,7 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
     });
 };
 const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a;
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -363,7 +373,11 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             return null;
         }
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
-        if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
+        const durationStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames;
+        if (!(0, exports.canResizeTimelineSequenceDuration)({
+            sequence: originalSequence,
+            status: durationStatus,
+        })) {
             return null;
         }
         const { controls } = originalSequence;
@@ -543,14 +557,14 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
+        if (!dragState) {
+            return;
+        }
         dragStateRef.current = null;
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         setDragging(false);
-        if (!dragState) {
-            return;
-        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceLeftEdgeDragChanges)({
             targets: dragState.targets,
@@ -685,6 +699,7 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     const style = {
@@ -729,13 +744,13 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
+        if (!dragState) {
+            return;
+        }
         dragStateRef.current = null;
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         setDragging(false);
-        if (!dragState) {
-            return;
-        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, clearEffectDragOverrides: latestClearEffect, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
@@ -897,6 +912,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     return {
@@ -933,14 +949,14 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
+        if (!dragState) {
+            return;
+        }
         dragStateRef.current = null;
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         setDragging(false);
-        if (!dragState) {
-            return;
-        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceDurationDragChanges)({
             targets: dragState.targets,
@@ -1069,6 +1085,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     const style = {

package/dist/components/Timeline/TimelineTrack.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTrack: React.NamedExoticComponent<{
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;

package/dist/components/Timeline/TimelineTracks.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTracks: React.NamedExoticComponent<{
-    readonly timeline: TrackWithHash[];
+    readonly timeline: TimelineTrackData[];
     readonly hasBeenCut: boolean;
 }>;

package/dist/components/Timeline/find-track-for-node-path-info.d.ts

@@ -4,4 +4,4 @@ export declare const findTrackForNodePathInfo: ({ sequences, overrideIdsToNodePa
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     nodePathInfo: SequenceNodePathInfo;
-}) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | undefined;
+}) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | undefined;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -145,18 +145,20 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             }
             : null,
         ...sourceActions,
-        {
-            type: 'item',
-            id: 'disable-interactivity',
-            keyHint: null,
-            label: 'Disable interactivity',
-            leftItem: null,
-            disabled: disableInteractivityDisabled,
-            onClick: onDisableSequenceInteractivity,
-            quickSwitcherLabel: null,
-            subMenu: null,
-            value: 'disable-interactivity',
-        },
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'disable-interactivity',
+                keyHint: null,
+                label: 'Disable interactivity',
+                leftItem: null,
+                disabled: disableInteractivityDisabled,
+                onClick: onDisableSequenceInteractivity,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'disable-interactivity',
+            }
+            : null,
         includeSourceEditItems
             ? {
                 type: 'item',

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -175,18 +175,26 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
                 : 'Reapply sequence prop',
         }));
     }
-    for (const target of effectPropTargets) {
-        resetPromises.push((0, save_effect_prop_1.saveEffectProp)({
-            type: 'value',
-            fileName: target.fileName,
-            nodePath: target.nodePath,
-            effectIndex: target.effectIndex,
-            fieldKey: target.fieldKey,
-            value: target.value,
-            defaultValue: target.defaultValue,
-            schema: target.schema,
+    if (effectPropTargets.length > 0) {
+        resetPromises.push((0, save_effect_prop_1.saveMultipleEffectProps)({
+            changes: effectPropTargets.map((target) => ({
+                type: 'value',
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                effectIndex: target.effectIndex,
+                fieldKey: target.fieldKey,
+                value: target.value,
+                defaultValue: target.defaultValue,
+                schema: target.schema,
+            })),
             setPropStatuses,
             clientId,
+            undoLabel: effectPropTargets.length > 1
+                ? 'Reset selected effect props'
+                : 'Reset effect prop',
+            redoLabel: effectPropTargets.length > 1
+                ? 'Reapply selected effect props'
+                : 'Reapply effect prop',
         }));
     }
     return Promise.all(resetPromises).then(() => undefined);

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

@@ -20,5 +20,15 @@ type SaveEffectPropEffectParam = SaveEffectPropBase & {
     effectParam: EffectClipboardParam;
 };
 type SaveEffectPropInput = SaveEffectPropValue | SaveEffectPropEffectParam;
+type WithoutSaveContext<T> = T extends unknown ? Omit<T, 'setPropStatuses' | 'clientId'> : never;
+type SaveMultipleEffectPropChange = WithoutSaveContext<SaveEffectPropInput>;
+type SaveMultipleEffectPropsOptions = {
+    changes: SaveMultipleEffectPropChange[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
+};
+export declare const saveMultipleEffectProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveMultipleEffectPropsOptions) => Promise<void>;
 export declare const saveEffectProp: (input: SaveEffectPropInput) => Promise<void>;
 export {};

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

@@ -1,10 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveEffectProp = void 0;
+exports.saveEffectProp = exports.saveMultipleEffectProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    if (changes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const change of changes) {
+        if (change.type === 'effect-param') {
+            continue;
+        }
+        setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
+            previous: prev,
+            effectIndex: change.effectIndex,
+            fieldKey: change.fieldKey,
+            value: change.value,
+            schema: change.schema,
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/save-multiple-effect-props', {
+        edits: changes.map((change) => change.type === 'effect-param'
+            ? {
+                type: 'effect-param',
+                fileName: change.fileName,
+                sequenceNodePath: change.nodePath,
+                effectIndex: change.effectIndex,
+                key: change.fieldKey,
+                effectParam: change.effectParam,
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            }
+            : {
+                type: 'value',
+                fileName: change.fileName,
+                sequenceNodePath: change.nodePath,
+                effectIndex: change.effectIndex,
+                key: change.fieldKey,
+                value: JSON.stringify(change.value),
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            }),
+        clientId,
+        undoLabel,
+        redoLabel,
+    }).then((response) => {
+        for (const result of response.results) {
+            setPropStatuses(result.sequenceNodePath, (prev) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({
+                previous: prev,
+                response: result.status,
+            }));
+        }
+    });
+};
+exports.saveMultipleEffectProps = saveMultipleEffectProps;
 const saveEffectProp = (input) => {
     const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setPropStatuses, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({

package/dist/components/Timeline/should-show-track-in-timeline.d.ts

@@ -1,2 +1,2 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const shouldShowTrackInTimeline: (track: TrackWithHash, durationInFrames: number) => boolean;
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const shouldShowTrackInTimeline: (track: TimelineTrackData, durationInFrames: number) => boolean;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = exports.getTimelineAssetSrcFromSchema = exports.splitRemoteSourceForMiddleEllipsis = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const no_react_1 = require("remotion/no-react");
 const url_state_1 = require("../../helpers/url-state");
 const splitRemoteSourceForMiddleEllipsis = (src) => {
     const protocolEnd = src.indexOf('://');
@@ -29,6 +30,21 @@ const getTimelineAssetSrcFromSchema = (controls) => {
 };
 exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;
 const getTimelineAssetLinkInfo = (src) => {
+    if (src.startsWith(no_react_1.NoReactInternals.FILE_TOKEN)) {
+        const encodedAssetPath = src.slice(no_react_1.NoReactInternals.FILE_TOKEN.length);
+        let assetPath = encodedAssetPath;
+        try {
+            assetPath = encodedAssetPath.split('/').map(decodeURIComponent).join('/');
+        }
+        catch (_a) {
+            // Keep the encoded path if it contains an invalid escape sequence.
+        }
+        return {
+            kind: 'local',
+            assetPath,
+            title: assetPath,
+        };
+    }
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {
         const assetPath = src.slice(staticBase.length + 1);
@@ -45,7 +61,7 @@ const getTimelineAssetLinkInfo = (src) => {
             const url = new URL(src.startsWith('//') ? 'https:' + src : src);
             return { kind: 'remote', href: src, title: url.hostname };
         }
-        catch (_a) {
+        catch (_b) {
             return { kind: 'remote', href: src, title: src };
         }
     }