@remotion/studio 4.0.496 → 4.0.498

package/dist/components/SelectedOutlineElement.js

@@ -114,12 +114,6 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         const [scaleX, scaleY] = no_react_1.NoReactInternals.parseScaleValue(transformOriginDrag.scaleValue);
         const startTranslate = (0, timeline_translate_utils_1.parseTranslate)(transformOriginDrag.translateValue);
         const svgRect = svg.getBoundingClientRect();
-        const defaultOrigin = transformOriginDrag.originDefault !== undefined
-            ? JSON.stringify(transformOriginDrag.originDefault)
-            : null;
-        const defaultTranslate = transformOriginDrag.translateDefault !== undefined
-            ? JSON.stringify(transformOriginDrag.translateDefault)
-            : null;
         let last = null;
         let currentPointerX = event.clientX;
         let currentPointerY = event.clientY;
@@ -182,11 +176,29 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 })
                 : remotion_1.Internals.makeStaticDragOverride(origin));
             setDragOverrides(transformOriginDrag.nodePath, selected_outline_types_1.translateFieldKey, transformOriginDrag.translatePropStatus.status === 'keyframed'
-                ? remotion_1.Internals.makeKeyframedDragOverride({
-                    status: transformOriginDrag.translatePropStatus,
-                    frame: transformOriginDrag.sourceFrame,
-                    value: translate,
-                })
+                ? transformOriginDrag.originPropStatus.status === 'keyframed'
+                    ? remotion_1.Internals.makeKeyframedDragOverride({
+                        status: transformOriginDrag.translatePropStatus,
+                        frame: transformOriginDrag.sourceFrame,
+                        value: translate,
+                    })
+                    : {
+                        type: 'keyframed',
+                        status: {
+                            ...transformOriginDrag.translatePropStatus,
+                            keyframes: transformOriginDrag.translatePropStatus.keyframes.map((keyframe) => {
+                                const keyframeTranslate = (0, timeline_translate_utils_1.parseTranslate)(String(keyframe.value));
+                                return {
+                                    ...keyframe,
+                                    value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] +
+                                        nextTranslateX -
+                                        startTranslate[0], keyframeTranslate[1] +
+                                        nextTranslateY -
+                                        startTranslate[1]),
+                                };
+                            }),
+                        },
+                    }
                 : remotion_1.Internals.makeStaticDragOverride(translate));
         };
         updateFromPointerPosition();
@@ -220,65 +232,27 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 clearDragOverrides(transformOriginDrag.nodePath);
                 return;
             }
-            const originChanged = last.origin !== transformOriginDrag.originValue;
-            const translateChanged = last.translate !== transformOriginDrag.translateValue;
-            if (!originChanged && !translateChanged) {
+            const { staticChanges, keyframedChanges } = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginDragChanges)({
+                target: transformOriginDrag,
+                startTranslate,
+                origin: last.origin,
+                translate: last.translate,
+            });
+            if (staticChanges.length === 0 && keyframedChanges.length === 0) {
                 clearDragOverrides(transformOriginDrag.nodePath);
                 return;
             }
-            const shouldSaveAsKeyframes = transformOriginDrag.originPropStatus.status === 'keyframed' ||
-                transformOriginDrag.translatePropStatus.status === 'keyframed';
-            const promise = shouldSaveAsKeyframes
+            const promise = staticChanges.length === 0
                 ? (0, call_add_keyframe_1.callAddKeyframes)({
-                    sequenceKeyframes: [
-                        originChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.transformOriginFieldKey,
-                                sourceFrame: transformOriginDrag.sourceFrame,
-                                value: last.origin,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                        translateChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.translateFieldKey,
-                                sourceFrame: transformOriginDrag.sourceFrame,
-                                value: last.translate,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                    ].filter(no_react_1.NoReactInternals.truthy),
+                    sequenceKeyframes: keyframedChanges,
                     effectKeyframes: [],
                     setPropStatuses,
                     clientId: transformOriginDrag.clientId,
                 })
                 : (0, save_sequence_prop_1.saveSequenceProps)({
-                    changes: [
-                        originChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.transformOriginFieldKey,
-                                value: last.origin,
-                                defaultValue: defaultOrigin,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                        translateChanged
-                            ? {
-                                fileName: transformOriginDrag.nodePath.absolutePath,
-                                nodePath: transformOriginDrag.nodePath,
-                                fieldKey: selected_outline_types_1.translateFieldKey,
-                                value: last.translate,
-                                defaultValue: defaultTranslate,
-                                schema: transformOriginDrag.schema,
-                            }
-                            : null,
-                    ].filter(no_react_1.NoReactInternals.truthy),
+                    changes: staticChanges,
+                    addedKeyframes: keyframedChanges,
+                    movedKeyframes: null,
                     setPropStatuses,
                     clientId: transformOriginDrag.clientId,
                     undoLabel: 'Move transform origin',
@@ -478,6 +452,8 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
                         setPropStatuses,
                         clientId: drag.clientId,
                         undoLabel: changes.length > 1
@@ -488,16 +464,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                             : 'Move sequence back',
                     })
                     : Promise.resolve(),
-                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                    fileName: change.fileName,
-                    nodePath: change.nodePath,
-                    fieldKey: change.fieldKey,
-                    sourceFrame: change.sourceFrame,
-                    value: change.value,
-                    schema: change.schema,
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
                     setPropStatuses,
-                    clientId: change.clientId,
-                })),
+                    clientId: drag.clientId,
+                }),
             ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
@@ -692,6 +664,8 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
                         setPropStatuses,
                         clientId: scaleDrag.clientId,
                         undoLabel: changes.length > 1
@@ -702,16 +676,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                             : 'Scale sequence back',
                     })
                     : Promise.resolve(),
-                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                    fileName: change.fileName,
-                    nodePath: change.nodePath,
-                    fieldKey: change.fieldKey,
-                    sourceFrame: change.sourceFrame,
-                    value: change.value,
-                    schema: change.schema,
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
                     setPropStatuses,
-                    clientId: change.clientId,
-                })),
+                    clientId: scaleDrag.clientId,
+                }),
             ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
@@ -911,6 +881,8 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
                         setPropStatuses,
                         clientId: rotationDrag.clientId,
                         undoLabel: changes.length > 1
@@ -921,16 +893,12 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                             : 'Rotate sequence back',
                     })
                     : Promise.resolve(),
-                ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                    fileName: change.fileName,
-                    nodePath: change.nodePath,
-                    fieldKey: change.fieldKey,
-                    sourceFrame: change.sourceFrame,
-                    value: change.value,
-                    schema: change.schema,
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
                     setPropStatuses,
-                    clientId: change.clientId,
-                })),
+                    clientId: rotationDrag.clientId,
+                }),
             ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -74,6 +74,7 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragChanges", { enumerabl
 Object.defineProperty(exports, "getSelectedOutlineScaleDragStates", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragStates; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleEdgeInfo", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleEdgeInfo; } });
+Object.defineProperty(exports, "getSelectedOutlineTransformOriginDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineTransformOriginLockedAxis", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginLockedAxis; } });
 Object.defineProperty(exports, "isSelectedOutlineDragPastThreshold", { enumerable: true, get: function () { return selected_outline_drag_2.isSelectedOutlineDragPastThreshold; } });
 Object.defineProperty(exports, "selectedOutlineTransformOriginSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineTransformOriginSnapThresholdPx; } });
@@ -397,7 +398,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!interactivity_enabled_1.studioInteractivityEnabled || !editorShowOutlines) {
+        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() || !editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
@@ -707,6 +708,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             staticChanges.length > 0
                 ? (0, save_sequence_prop_1.saveSequenceProps)({
                     changes: staticChanges,
+                    addedKeyframes: null,
+                    movedKeyframes: null,
                     setPropStatuses,
                     clientId: session.clientId,
                     undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
@@ -715,16 +718,12 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                         : 'Move sequence back',
                 })
                 : Promise.resolve(),
-            ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                fileName: change.fileName,
-                nodePath: change.nodePath,
-                fieldKey: change.fieldKey,
-                sourceFrame: change.sourceFrame,
-                value: change.value,
-                schema: change.schema,
+            (0, call_add_keyframe_1.callAddKeyframes)({
+                sequenceKeyframes: keyframedChanges,
+                effectKeyframes: [],
                 setPropStatuses,
-                clientId: change.clientId,
-            })),
+                clientId: session.clientId,
+            }),
         ])
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);

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

@@ -1,4 +1,3 @@
 import React from 'react';
-export declare const MAX_TIMELINE_TRACKS: number;
 export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 export declare const MaxTimelineTracksReached: React.FC;

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.MAX_TIMELINE_TRACKS = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
     height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -18,6 +17,7 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+    const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
+    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", maxTimelineTracks, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

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,11 +52,11 @@ 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");
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
+const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
@@ -72,6 +73,7 @@ const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_1 = require("./use-resolved-stack");
+const use_timeline_asset_drop_1 = require("./use-timeline-asset-drop");
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -83,13 +85,14 @@ const container = {
 const noop = () => undefined;
 const TimelineContextMenuArea = ({ children }) => {
     var _a, _b;
+    const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     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;
@@ -128,6 +131,7 @@ const TimelineContextMenuArea = ({ children }) => {
             const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
                 compositionFile,
                 compositionId: currentCompositionId,
+                from: null,
                 element: {
                     type: 'solid',
                     width: videoConfig.width,
@@ -151,7 +155,8 @@ const TimelineContextMenuArea = ({ children }) => {
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
-            compositionFile === null) {
+            compositionFile === null ||
+            videoConfig === null) {
             return;
         }
         const files = await (0, import_assets_1.pickFilesToImport)();
@@ -162,17 +167,19 @@ const TimelineContextMenuArea = ({ children }) => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: videoConfig.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: null,
                 dropPosition: null,
+                from: null,
                 svgImportMode: 'image',
             });
         }
         finally {
             setIsAddingAsset(false);
         }
-    }, [canInsertAsset, compositionFile, currentCompositionId]);
+    }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
     const contextMenuItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -201,7 +208,7 @@ const TimelineContextMenuArea = ({ children }) => {
             },
         ];
     }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
 };
 const TimelineInner = () => {
     var _a;
@@ -212,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) {
@@ -233,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/TimelineAssetDropIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineAssetDropIndicator: React.FC;

package/dist/components/Timeline/TimelineAssetDropIndicator.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineAssetDropIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const indicator = {
+    backgroundColor: colors_1.RULER_COLOR,
+    bottom: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0,
+    width: 1,
+    zIndex: 10,
+};
+const TimelineAssetDropIndicator = () => {
+    var _a;
+    var _b;
+    const frame = (0, react_1.useContext)(timeline_asset_drop_context_1.TimelineAssetDropFrameContext);
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    if (frame === null || timelineWidth === null || videoConfig === null) {
+        return null;
+    }
+    const width = (_b = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : timelineWidth;
+    const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
+    return (jsx_runtime_1.jsx("div", { "data-timeline-asset-drop-indicator": "true", style: {
+            ...indicator,
+            transform: `translateX(${left - 0.5}px)`,
+        } }));
+};
+exports.TimelineAssetDropIndicator = TimelineAssetDropIndicator;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -710,13 +710,7 @@ const TimelineClipboardKeybindings = () => {
                         (0, NotificationCenter_1.showNotification)('Cannot paste onto an easing that cannot be updated', 3000);
                         return;
                     }
-                    return updatePromise
-                        .then(() => {
-                        (0, NotificationCenter_1.showNotification)(easingSelections.length === 1
-                            ? 'Pasted easing'
-                            : 'Pasted easing to selected segments', 2000);
-                    })
-                        .catch((err) => {
+                    return updatePromise.catch((err) => {
                         (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
                     });
                 }

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/TimelineScrollable.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
+const TimelineAssetDropIndicator_1 = require("./TimelineAssetDropIndicator");
 const TimelineSelection_1 = require("./TimelineSelection");
 const outer = {
     width: '100%',
@@ -31,8 +32,8 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
-            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, "data-timeline-scrollable": "true", style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
+            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), jsx_runtime_1.jsx(TimelineAssetDropIndicator_1.TimelineAssetDropIndicator, {}), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
                     ...marqueeStyle,
                     height: marqueeRect.bottom - marqueeRect.top,
                     left: marqueeRect.left,

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

@@ -117,6 +117,10 @@ export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelection
     readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
     readonly selectedItems: readonly TimelineSelection[];
 };
+export declare const extendTimelineMarqueeSelection: ({ currentSelection, marqueeSelection, }: {
+    readonly currentSelection: readonly TimelineSelection[];
+    readonly marqueeSelection: readonly TimelineSelection[];
+}) => readonly TimelineSelection[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly selectedItems: readonly TimelineSelection[];