@remotion/studio 4.0.497 → 4.0.498

package/dist/components/Timeline/Timeline.js

@@ -43,6 +43,7 @@ const colors_1 = require("../../helpers/colors");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -51,7 +52,6 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
-const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const SequencePropsObserver_1 = require("./SequencePropsObserver");
 const should_show_track_in_timeline_1 = require("./should-show-track-in-timeline");
 const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequence-props");
@@ -92,7 +92,7 @@ const TimelineContextMenuArea = ({ children }) => {
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     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 currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -219,7 +219,7 @@ const TimelineInner = () => {
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     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 videoConfigIsNull = videoConfig === null;
     const timeline = (0, react_1.useMemo)(() => {
         if (videoConfigIsNull) {
@@ -240,21 +240,22 @@ const TimelineInner = () => {
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
     }, [durationInFrames, timeline]);
+    const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return filtered.length > MaxTimelineTracks_1.MAX_TIMELINE_TRACKS
-            ? filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS)
+        return filtered.length > maxTimelineTracks
+            ? filtered.slice(0, maxTimelineTracks)
             : filtered;
-    }, [filtered]);
+    }, [filtered, maxTimelineTracks]);
     const hasBeenCut = filtered.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), interactivity_enabled_1.studioInteractivityEnabled ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                     jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })
                                         ] })
                                 ] })) })

package/dist/components/Timeline/TimelineDragHandler.js

@@ -89,7 +89,7 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {

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,15 @@ 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 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 +346,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 +354,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]
                 : [],
         });

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

@@ -4,6 +4,7 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 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;
@@ -77,6 +79,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.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,
@@ -252,6 +254,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)({
@@ -456,6 +485,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
                 propStatuses,
             });
             targets.set(key, {
+                canSnapToTimelineStart: originalSequence.parent === null,
                 effectKeyframes,
                 fileName: nodePath.absolutePath,
                 initialFrom: originalSequence.from,
@@ -672,6 +702,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 +714,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        editorSnapping,
     });
     latestRef.current = {
         nodePathInfo,
@@ -693,6 +725,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
+        editorSnapping,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -805,7 +838,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)({

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 &&