@remotion/studio 4.0.493 → 4.0.494

package/dist/components/Canvas.js

@@ -805,6 +805,7 @@ const Canvas = ({ canvasContent, size }) => {
                     files,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
                 });
             }
@@ -817,6 +818,7 @@ const Canvas = ({ canvasContent, size }) => {
                     assetPaths: [assetPath],
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
                 });
             }
@@ -873,6 +875,7 @@ const Canvas = ({ canvasContent, size }) => {
                     url,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
                 });
             }

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
-export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean) => void;
+export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean, frame?: number | null) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InitialCompositionLoader.js

@@ -16,14 +16,18 @@ const use_static_files_1 = require("./use-static-files");
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    return (0, react_1.useCallback)((c, push) => {
+    return (0, react_1.useCallback)((c, push, frame = null) => {
         var _a;
         if (push) {
             (0, url_state_1.pushUrl)(`/${c.id}`);
         }
         (_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
+        if (frame !== null) {
+            setFrame((current) => ({ ...current, [c.id]: frame }));
+        }
         setCanvasContent({ type: 'composition', compositionId: c.id });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
@@ -46,6 +50,7 @@ const useSelectComposition = () => {
         isMobileLayout,
         setCanvasContent,
         setCompositionFoldersExpanded,
+        setFrame,
         setSidebarCollapsedState,
     ]);
 };

package/dist/components/Timeline/Timeline.js

@@ -164,6 +164,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 files,
                 compositionFile,
                 compositionId: currentCompositionId,
+                destinationDimensions: null,
                 dropPosition: null,
             });
         }

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -532,6 +532,8 @@ const TimelineClipboardKeybindings = () => {
                         setPropStatuses,
                         clientId,
                         confirm,
+                        propStatuses,
+                        timelinePosition: timelinePositionRef.current,
                     });
                     return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
                         if (!deleted) {
@@ -621,6 +623,7 @@ const TimelineClipboardKeybindings = () => {
                         fieldKey: keyframeTarget.fieldKey,
                         sourceFrame,
                         schema: keyframeTarget.schema,
+                        valueWhenLastKeyframeDeleted: null,
                     }));
                     return (0, call_delete_keyframe_1.callDeleteKeyframes)({
                         sequenceKeyframes: effectIndex === null ? deletions : [],

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -57,6 +57,8 @@ const TimelineDeleteKeybindings = () => {
                 setPropStatuses,
                 clientId,
                 confirm,
+                propStatuses,
+                timelinePosition: timelinePositionRef.current,
             });
             if (deletePromise !== null) {
                 deletePromise

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -213,6 +213,7 @@ const getDeleteChange = (target) => {
         fieldKey: target.fieldKey,
         sourceFrame: target.sourceFrame,
         schema: target.schema,
+        valueWhenLastKeyframeDeleted: null,
     };
     if (target.effectIndex === null) {
         return change;

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

@@ -3,6 +3,7 @@ import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly s: TSequence;
+    readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -40,6 +40,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const format_file_location_1 = require("../../helpers/format-file-location");
+const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
@@ -49,6 +50,7 @@ const AudioWaveform_1 = require("../AudioWaveform");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
@@ -64,14 +66,14 @@ const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
-const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
+const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onDoubleClick, }) => {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -114,7 +116,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
             opacity: isInRange ? 1 : 0.5,
         };
     }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -148,7 +150,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
 };
-const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffset }) => {
+const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
@@ -190,6 +192,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     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)();
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
@@ -205,6 +208,39 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [canOpenInEditor, originalLocation]);
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
+            button: e.button,
+            canOpenInEditor,
+            numberOfConnectedCompositions: connectedCompositions.length,
+        });
+        if (action === null) {
+            return;
+        }
+        e.stopPropagation();
+        if (action === 'open-connected-composition') {
+            selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
+                timelinePosition,
+                sequence: s,
+                sequenceFrameOffset,
+            }));
+            return;
+        }
+        openInEditor();
+    }, [
+        canOpenInEditor,
+        connectedCompositions,
+        openInEditor,
+        s,
+        selectComposition,
+        sequenceFrameOffset,
+        timelinePosition,
+    ]);
+    const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
     const duplicateDisabled = deleteDisabled;
@@ -408,7 +444,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -563,11 +563,23 @@ const TimelineSequenceItem = ({ connectedCompositions, nestedDepth, sequence, no
         }
         e.stopPropagation();
         if (action === 'open-connected-composition') {
-            selectComposition(connectedCompositions[0], true);
+            selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
+                timelinePosition,
+                sequence,
+                sequenceFrameOffset,
+            }));
             return;
         }
         openInEditor();
-    }, [canOpenInEditor, connectedCompositions, openInEditor, selectComposition]);
+    }, [
+        canOpenInEditor,
+        connectedCompositions,
+        openInEditor,
+        selectComposition,
+        sequence,
+        sequenceFrameOffset,
+        timelinePosition,
+    ]);
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&

package/dist/components/Timeline/TimelineTrack.js

@@ -44,6 +44,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const TimelineTrackUnmemoized = ({ track }) => {
+    var _a;
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
@@ -58,7 +59,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

package/dist/components/Timeline/call-delete-keyframe.d.ts

@@ -6,6 +6,7 @@ export type DeleteSequenceKeyframeChange = {
     fieldKey: string;
     sourceFrame: number;
     schema: InteractivitySchema;
+    valueWhenLastKeyframeDeleted: unknown | null;
 };
 export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
     effectIndex: number;

package/dist/components/Timeline/call-delete-keyframe.js

@@ -83,6 +83,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             keyframes: keyframes.map((keyframe) => ({
                 fieldKey: keyframe.fieldKey,
                 frame: keyframe.sourceFrame,
+                valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
             })),
         }));
     }
@@ -97,6 +98,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
                 effectIndex: keyframe.effectIndex,
                 fieldKey: keyframe.fieldKey,
                 frame: keyframe.sourceFrame,
+                valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
             })),
         }));
     }
@@ -107,6 +109,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             key: keyframe.fieldKey,
             frame: keyframe.sourceFrame,
             schema: keyframe.schema,
+            valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
         })),
         effectKeyframes: effectKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
@@ -115,6 +118,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             key: keyframe.fieldKey,
             frame: keyframe.sourceFrame,
             schema: keyframe.schema,
+            valueWhenLastKeyframeDeleted: keyframe.valueWhenLastKeyframeDeleted,
         })),
         clientId,
     }).then(() => undefined);

package/dist/components/Timeline/delete-selected-keyframe.d.ts

@@ -1,4 +1,4 @@
-import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SetPropStatuses } from './save-sequence-prop';
 export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }: {
@@ -9,7 +9,7 @@ export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences,
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void> | null;
-export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }: {
+export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }: {
     keyframes: {
         nodePathInfo: SequenceNodePathInfo;
         frame: number;
@@ -18,4 +18,6 @@ export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideI
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setPropStatuses: SetPropStatuses;
     clientId: string;
+    propStatuses: PropStatuses;
+    timelinePosition: number;
 }) => Promise<void> | null;

package/dist/components/Timeline/delete-selected-keyframe.js

@@ -1,11 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedKeyframes = exports.deleteSelectedKeyframe = void 0;
+const remotion_1 = require("remotion");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
-const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, }) => {
-    var _a, _b;
+const getValueWhenLastKeyframeDeleted = ({ propStatus, playheadSourceFrame, }) => {
+    var _a;
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed' || playheadSourceFrame === null) {
+        return null;
+    }
+    return ((_a = remotion_1.Internals.interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
+        frame: playheadSourceFrame,
+        status: propStatus,
+    })) !== null && _a !== void 0 ? _a : null);
+};
+const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
+    var _a;
+    var _b, _c, _d;
     const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
     if (field === null) {
         return null;
@@ -15,11 +28,14 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         overrideIdsToNodePaths,
         nodePathInfo,
     });
-    const sequence = (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null;
+    const sequence = (_b = track === null || track === void 0 ? void 0 : track.sequence) !== null && _b !== void 0 ? _b : null;
     if (!(sequence === null || sequence === void 0 ? void 0 : sequence.controls)) {
         return null;
     }
-    const sourceFrame = frame - ((_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0);
+    const sourceFrame = frame - ((_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0);
+    const playheadSourceFrame = timelinePosition === null
+        ? null
+        : timelinePosition - ((_d = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _d !== void 0 ? _d : 0);
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
     const fileName = nodePath.absolutePath;
     if (field.type === 'effect') {
@@ -27,6 +43,20 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         if (!effect) {
             return null;
         }
+        const effectStatus = propStatuses !== null
+            ? remotion_1.Internals.getEffectPropStatusesCtx({
+                propStatuses,
+                nodePath,
+                effectIndex: field.effectIndex,
+            })
+            : null;
+        const effectPropStatus = (effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.type) === 'can-update-effect'
+            ? effectStatus.props[field.fieldKey]
+            : null;
+        const effectValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
+            propStatus: effectPropStatus,
+            playheadSourceFrame,
+        });
         return {
             type: 'effect',
             fileName,
@@ -35,8 +65,16 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
             fieldKey: field.fieldKey,
             sourceFrame,
             schema: effect.schema,
+            valueWhenLastKeyframeDeleted: effectValueWhenLastKeyframeDeleted,
         };
     }
+    const sequencePropStatus = propStatuses !== null
+        ? (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey]
+        : null;
+    const sequenceValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
+        propStatus: sequencePropStatus,
+        playheadSourceFrame,
+    });
     return {
         type: 'sequence',
         fileName,
@@ -44,6 +82,7 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         fieldKey: field.fieldKey,
         sourceFrame,
         schema: sequence.controls.schema,
+        valueWhenLastKeyframeDeleted: sequenceValueWhenLastKeyframeDeleted,
     };
 };
 const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }) => {
@@ -52,6 +91,8 @@ const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToN
         frame,
         sequences,
         overrideIdsToNodePaths,
+        propStatuses: null,
+        timelinePosition: null,
     });
     if (deletion === null) {
         return null;
@@ -70,13 +111,15 @@ const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToN
     });
 };
 exports.deleteSelectedKeyframe = deleteSelectedKeyframe;
-const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }) => {
+const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }) => {
     const deletions = keyframes
         .map((keyframe) => getSelectedKeyframeDeletion({
         nodePathInfo: keyframe.nodePathInfo,
         frame: keyframe.frame,
         sequences,
         overrideIdsToNodePaths,
+        propStatuses,
+        timelinePosition,
     }))
         .filter((deletion) => deletion !== null);
     if (deletions.length === 0) {

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -17,11 +17,13 @@ export declare const getTimelineSelectionAfterDeletingItems: ({ selections, sequ
     readonly propStatuses?: PropStatuses | undefined;
     readonly timelinePosition?: number | undefined;
 }) => readonly TimelineSelection[];
-export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
+export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, propStatuses, timelinePosition, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     setPropStatuses: SetPropStatuses;
     clientId: string;
     confirm: ConfirmationDialogFunction;
+    propStatuses: PropStatuses;
+    timelinePosition: number;
 }) => Promise<boolean> | null;

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -253,7 +253,7 @@ const assertTimelineSelectionsHaveSameType = (selections) => {
     }
 };
 const containsOnlyKeyframesAndEasings = (selections) => selections.every((selection) => selection.type === 'keyframe' || selection.type === 'easing');
-const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }) => {
+const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, propStatuses, timelinePosition, }) => {
     var _a;
     const firstSelection = selections[0];
     if (!firstSelection) {
@@ -273,6 +273,8 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
             overrideIdsToNodePaths,
             setPropStatuses,
             clientId,
+            propStatuses,
+            timelinePosition,
         });
         return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
     }

package/dist/components/import-assets.d.ts

@@ -29,6 +29,20 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+export declare const getAssetElementForDroppedFile: ({ fileType, src, }: {
+    fileType: FileType;
+    src: string;
+}) => {
+    type: "asset";
+    assetType: "animated-image" | "audio" | "gif" | "image" | "video";
+    src: string;
+    srcType: "remote" | "static";
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+    position: InsertableCompositionElementPosition | null;
+} | null;
 export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }: {
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
@@ -38,6 +52,11 @@ export declare const getCompositionPositionForDrop: ({ compositionDimensions, de
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => InsertableCompositionElementPosition | null;
+export declare const getAssetPositionForDrop: ({ assetDimensions, destinationDimensions, dropPosition, }: {
+    assetDimensions: Dimensions | null;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+}) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
     dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
@@ -48,15 +67,17 @@ export declare const getComponentDimensions: (component: {
 export declare const pickFilesToImport: ({ multiple, }?: {
     readonly multiple?: boolean | undefined;
 }) => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
+export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, }: {
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     files: File[];
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, dropPosition, url, }: {
+export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }: {
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     url: string;
 }) => Promise<void>;
@@ -65,10 +86,11 @@ export declare const insertRemoteAudio: ({ compositionFile, compositionId, url,
     compositionId: string;
     url: string;
 }) => Promise<void>;
-export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, dropPosition, }: {
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {