@remotion/studio 4.0.497 → 4.0.499

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -252,17 +252,41 @@ const TimelineInOutDragHandlerInner = () => {
         videoConfig,
         width,
     ]);
+    const onPointerCancelInOut = (0, react_1.useCallback)(() => {
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setInOutDragging({
+            dragging: false,
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (inOutDragging.dragging === false) {
             return;
         }
         window.addEventListener('pointermove', onPointerMoveInOut);
         window.addEventListener('pointerup', onPointerUpInOut);
+        window.addEventListener('pointercancel', onPointerCancelInOut);
+        window.addEventListener('blur', onPointerCancelInOut);
         return () => {
             window.removeEventListener('pointermove', onPointerMoveInOut);
             window.removeEventListener('pointerup', onPointerUpInOut);
+            window.removeEventListener('pointercancel', onPointerCancelInOut);
+            window.removeEventListener('blur', onPointerCancelInOut);
+        };
+    }, [
+        inOutDragging.dragging,
+        onPointerCancelInOut,
+        onPointerMoveInOut,
+        onPointerUpInOut,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            document.body.style.userSelect = '';
+            document.body.style.webkitUserSelect = '';
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         };
-    }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
+    }, []);
     const inContextMenu = (0, react_1.useMemo)(() => {
         return [
             {

package/dist/components/Timeline/TimelineLayerEye.js

@@ -64,7 +64,10 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    const onDoubleClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineSelection.js

@@ -595,7 +595,7 @@ const TimelineSelectionProvider = ({ children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const canSelect = interactivity_enabled_1.studioInteractivityEnabled &&
+    const canSelect = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);

package/dist/components/Timeline/TimelineSequence.js

@@ -183,15 +183,20 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
     }, [propStatuses, nodePath]);
-    const durationCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+    const durationCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
-    const fromCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+    const durationCanResize = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+        (0, TimelineSequenceRightEdgeDragHandle_1.canResizeTimelineSequenceDuration)({
+            sequence: s,
+            status: propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
+        }));
+    const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
-    const trimBeforeCanUpdate = Boolean(interactivity_enabled_1.studioInteractivityEnabled &&
+    const trimBeforeCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
@@ -346,7 +351,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
+            includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -354,7 +359,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: interactivity_enabled_1.studioInteractivityEnabled && freezeFrameMenuItem
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)() && freezeFrameMenuItem
                 ? [freezeFrameMenuItem]
                 : [],
         });
@@ -446,7 +451,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
-        durationCanUpdate;
+        durationCanResize;
     const showLeftEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceLeftEdgeDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -177,7 +177,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -549,7 +549,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             }
             : inner;
     }, [effectDropHovered, inner]);
-    const hasExpandableContent = interactivity_enabled_1.studioInteractivityEnabled &&
+    const hasExpandableContent = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         (Boolean(sequence.controls) || sequence.effects.length > 0);
     const canToggleVisibility = previewInteractive &&
         Boolean(sequence.controls) &&
@@ -682,7 +682,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
+            includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -690,7 +690,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             originalLocation,
             selectAsset,
             sequence,
-            sourceActions: interactivity_enabled_1.studioInteractivityEnabled
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
                 ? [
                     ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
                         ? [
@@ -819,7 +819,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                     ] })) : 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 &&
-                interactivity_enabled_1.studioInteractivityEnabled &&
+                (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&

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/TimelineSequenceRightEdgeDragHandle.d.ts

@@ -1,9 +1,10 @@
 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';
 import { type TimelineSelection } from './TimelineSelection';
+export declare const timelineSequenceFromDragSnapThresholdPx = 10;
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
     readonly initialDuration: number;
@@ -23,6 +24,7 @@ export type TimelineSequenceLeftEdgeDragTarget = {
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceFromDragTarget = {
+    readonly canSnapToTimelineStart: boolean;
     readonly effectKeyframes: TimelineSequenceEffectKeyframeDragTarget[];
     readonly fileName: string;
     readonly initialFrom: number;
@@ -40,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;
@@ -77,6 +83,12 @@ export declare const getTimelineSequenceFromDragValue: ({ initialFrom, deltaFram
     readonly initialFrom: number;
     readonly deltaFrames: number;
 }) => number;
+export declare const getTimelineSequenceFromDragDelta: ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }: {
+    readonly deltaFrames: number;
+    readonly pxPerFrame: number;
+    readonly snappingEnabled: boolean;
+    readonly targets: readonly TimelineSequenceFromDragTarget[];
+}) => number;
 export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames, }: {
     readonly targets: readonly TimelineSequenceFromDragTarget[];
     readonly deltaFrames: 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.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = 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");
@@ -11,10 +11,12 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const editor_snapping_1 = require("../../state/editor-snapping");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
 const HANDLE_WIDTH = 6;
+exports.timelineSequenceFromDragSnapThresholdPx = 10;
 const baseStyle = {
     position: 'absolute',
     top: 0,
@@ -127,6 +129,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) &&
@@ -252,6 +264,33 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
 exports.getTimelineSequenceDurationDragChanges = getTimelineSequenceDurationDragChanges;
 const getTimelineSequenceFromDragValue = ({ initialFrom, deltaFrames, }) => initialFrom + deltaFrames;
 exports.getTimelineSequenceFromDragValue = getTimelineSequenceFromDragValue;
+const getTimelineSequenceFromDragDelta = ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }) => {
+    var _a;
+    if (!snappingEnabled) {
+        return deltaFrames;
+    }
+    let closestSnap;
+    for (const target of targets) {
+        if (!target.canSnapToTimelineStart) {
+            continue;
+        }
+        const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
+            initialFrom: target.initialFrom,
+            deltaFrames,
+        });
+        const distancePx = Math.abs(nextFrom * pxPerFrame);
+        if (distancePx > exports.timelineSequenceFromDragSnapThresholdPx ||
+            (closestSnap && closestSnap.distancePx <= distancePx)) {
+            continue;
+        }
+        closestSnap = {
+            deltaFrames: -target.initialFrom,
+            distancePx,
+        };
+    }
+    return (_a = closestSnap === null || closestSnap === void 0 ? void 0 : closestSnap.deltaFrames) !== null && _a !== void 0 ? _a : deltaFrames;
+};
+exports.getTimelineSequenceFromDragDelta = getTimelineSequenceFromDragDelta;
 const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
     return targets.flatMap((target) => {
         const nextValue = (0, exports.getTimelineSequenceFromDragValue)({
@@ -309,6 +348,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) ===
@@ -334,7 +374,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;
@@ -456,6 +500,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
                 propStatuses,
             });
             targets.set(key, {
+                canSnapToTimelineStart: originalSequence.parent === null,
                 effectKeyframes,
                 fileName: nodePath.absolutePath,
                 initialFrom: originalSequence.from,
@@ -513,14 +558,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,
@@ -655,6 +700,7 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     const style = {
@@ -672,6 +718,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
@@ -683,6 +730,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        editorSnapping,
     });
     latestRef.current = {
         nodePathInfo,
@@ -693,16 +741,17 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        editorSnapping,
     };
     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,
@@ -805,7 +854,12 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 return;
             }
             const dx = e.clientX - dragState.initialClientX;
-            const deltaFrames = Math.round(dx / dragState.pxPerFrame);
+            const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
+                deltaFrames: Math.round(dx / dragState.pxPerFrame),
+                pxPerFrame: dragState.pxPerFrame,
+                snappingEnabled: latestRef.current.editorSnapping,
+                targets: dragState.targets,
+            });
             dragState.latestDeltaFrames = deltaFrames;
             for (const target of dragState.targets) {
                 const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
@@ -859,6 +913,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     return {
@@ -895,14 +950,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,
@@ -1031,6 +1086,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/call-update-keyframe-settings.d.ts

@@ -20,3 +20,20 @@ export declare const callUpdateEffectKeyframeSettings: ({ fileName, nodePath, ef
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
+type BatchSequenceKeyframeSettingsUpdate = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    settings: KeyframeSettings;
+    schema: InteractivitySchema;
+};
+type BatchEffectKeyframeSettingsUpdate = BatchSequenceKeyframeSettingsUpdate & {
+    effectIndex: number;
+};
+export declare const callBatchUpdateKeyframeSettings: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
+    sequenceKeyframes: BatchSequenceKeyframeSettingsUpdate[];
+    effectKeyframes: BatchEffectKeyframeSettingsUpdate[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;
+export {};

package/dist/components/Timeline/call-update-keyframe-settings.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
+exports.callBatchUpdateKeyframeSettings = exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 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 callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }) => {
@@ -50,3 +51,44 @@ const callUpdateEffectKeyframeSettings = ({ fileName, nodePath, effectIndex, fie
     });
 };
 exports.callUpdateEffectKeyframeSettings = callUpdateEffectKeyframeSettings;
+const callBatchUpdateKeyframeSettings = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
+    for (const update of sequenceKeyframes) {
+        setPropStatuses(update.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateSequenceKeyframeSettings)({
+            previous: prev,
+            fieldKey: update.fieldKey,
+            settings: update.settings,
+        }));
+    }
+    for (const update of effectKeyframes) {
+        setPropStatuses(update.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateEffectKeyframeSettings)({
+            previous: prev,
+            effectIndex: update.effectIndex,
+            fieldKey: update.fieldKey,
+            settings: update.settings,
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/batch-update-keyframe-settings', {
+        sequenceKeyframes: sequenceKeyframes.map((update) => ({
+            fileName: update.fileName,
+            nodePath: update.nodePath,
+            key: update.fieldKey,
+            settings: update.settings,
+            schema: update.schema,
+        })),
+        effectKeyframes: effectKeyframes.map((update) => ({
+            fileName: update.fileName,
+            sequenceNodePath: update.nodePath,
+            effectIndex: update.effectIndex,
+            key: update.fieldKey,
+            settings: update.settings,
+            schema: update.schema,
+        })),
+        clientId,
+    })
+        .then(() => undefined)
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(`Could not update keyframe settings: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        throw err;
+    });
+};
+exports.callBatchUpdateKeyframeSettings = callBatchUpdateKeyframeSettings;

package/dist/components/Timeline/update-selected-easing.js

@@ -132,33 +132,36 @@ const updateSelectedTimelineEasings = ({ selections, sequences, overrideIdsToNod
     if (updates.length === 0) {
         return null;
     }
-    return Promise.all(updates.map((update) => {
-        const settings = {
-            type: 'easing',
-            segmentIndex: update.segmentIndex,
-            easing,
-        };
-        if (update.type === 'sequence') {
-            return (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
-                fileName: update.fileName,
-                nodePath: update.nodePath,
-                fieldKey: update.fieldKey,
-                settings,
-                schema: update.schema,
-                setPropStatuses,
-                clientId,
-            });
-        }
-        return (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+    return (0, call_update_keyframe_settings_1.callBatchUpdateKeyframeSettings)({
+        sequenceKeyframes: updates
+            .filter((update) => update.type === 'sequence')
+            .map((update) => ({
+            fileName: update.fileName,
+            nodePath: update.nodePath,
+            fieldKey: update.fieldKey,
+            settings: {
+                type: 'easing',
+                segmentIndex: update.segmentIndex,
+                easing,
+            },
+            schema: update.schema,
+        })),
+        effectKeyframes: updates
+            .filter((update) => update.type === 'effect')
+            .map((update) => ({
             fileName: update.fileName,
             nodePath: update.nodePath,
             effectIndex: update.effectIndex,
             fieldKey: update.fieldKey,
-            settings,
+            settings: {
+                type: 'easing',
+                segmentIndex: update.segmentIndex,
+                easing,
+            },
             schema: update.schema,
-            setPropStatuses,
-            clientId,
-        });
-    })).then(() => undefined);
+        })),
+        setPropStatuses,
+        clientId,
+    });
 };
 exports.updateSelectedTimelineEasings = updateSelectedTimelineEasings;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -2,6 +2,11 @@ import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequen
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
 export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
+export declare const calculateSequenceFreezeFrame: ({ sequence, sequenceFrameOffset, timelinePosition, }: {
+    readonly sequence: TSequence;
+    readonly sequenceFrameOffset: number;
+    readonly timelinePosition: number;
+}) => number;
 export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
     readonly clientId: string | null;
     readonly nodePath: SequencePropsSubscriptionKey | null;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = exports.shouldShowFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const shouldShowFreezeFrameMenuItem = (sequence) => {
     return sequence.type !== 'audio';
 };
 exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
+const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
+    const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
+    const minFrame = sequenceFrameOffset;
+    const maxFrame = Number.isFinite(sequence.duration)
+        ? Math.max(minFrame, sequence.duration + sequenceFrameOffset - 1)
+        : Infinity;
+    return Math.min(Math.max(minFrame, rawFreezeFrame), maxFrame);
+};
+exports.calculateSequenceFreezeFrame = calculateSequenceFreezeFrame;
 const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
@@ -26,11 +35,11 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
             clientId === null) {
             return;
         }
-        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
-        const maxFrame = Number.isFinite(sequence.duration)
-            ? Math.max(0, sequence.duration - 1)
-            : rawFreezeFrame;
-        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
+        const freezeFrame = (0, exports.calculateSequenceFreezeFrame)({
+            sequence,
+            sequenceFrameOffset,
+            timelinePosition,
+        });
         const remove = isFrozen;
         (0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
@@ -55,9 +64,7 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
         clientId,
         isFrozen,
         nodePath,
-        sequence.controls,
-        sequence.duration,
-        sequence.from,
+        sequence,
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -44,7 +44,7 @@ const useTimelineAssetDrop = () => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const previewInteractive = previewServerState.type === 'connected' && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const canInsertAsset = previewInteractive &&
         !window.remotion_isReadOnlyStudio &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&