@remotion/studio 4.0.493 → 4.0.495

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/Timeline/nest-timeline-tracks.d.ts

@@ -0,0 +1,8 @@
+export type NestedTimelineTrack<T> = {
+    readonly track: T;
+    readonly siblingIndex: number;
+    readonly children: NestedTimelineTrack<T>[];
+};
+export declare const nestTimelineTracks: <T extends {
+    readonly depth: number;
+}>(timeline: readonly T[]) => NestedTimelineTrack<T>[];

package/dist/components/Timeline/nest-timeline-tracks.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nestTimelineTracks = void 0;
+const nestTimelineTracks = (timeline) => {
+    const roots = [];
+    const stack = [];
+    for (let trackIndex = 0; trackIndex < timeline.length; trackIndex++) {
+        const track = timeline[trackIndex];
+        while (stack.length > 0 &&
+            stack[stack.length - 1].track.depth >= track.depth) {
+            stack.pop();
+        }
+        const parent = stack[stack.length - 1];
+        const siblings = parent ? parent.children : roots;
+        const nestedTrack = {
+            track,
+            siblingIndex: siblings.length,
+            children: [],
+        };
+        siblings.push(nestedTrack);
+        stack.push(nestedTrack);
+    }
+    return roots;
+};
+exports.nestTimelineTracks = nestTimelineTracks;

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -44,12 +44,16 @@ export declare const viewportClientXToScrollContentX: ({ clientX, scrollEl, }: {
     clientX: number;
     scrollEl: HTMLDivElement;
 }) => number;
-export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
-    oldZoom: number;
-    newZoom: number;
+export declare const getScrollLeftToKeepCursorInPlace: ({ anchorContentX, oldScrollLeft, oldTimelineWidth, newTimelineWidth, }: {
+    anchorContentX: number;
+    oldScrollLeft: number;
+    oldTimelineWidth: number;
+    newTimelineWidth: number;
+}) => number;
+export declare const prepareToPreserveTimelineCursor: ({ currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
     currentFrame: number;
     currentDurationInFrames: number;
     anchorFrame: number | null;
     /** Prefer this over `anchorFrame` when not null (subpixel-accurate anchor). */
     anchorContentX: number | null;
-}) => void;
+}) => () => void;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.prepareToPreserveTimelineCursor = exports.getScrollLeftToKeepCursorInPlace = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -214,24 +214,38 @@ const viewportClientXToScrollContentX = ({ clientX, scrollEl, }) => {
     return clampedClientX + scrollEl.scrollLeft - rect.left;
 };
 exports.viewportClientXToScrollContentX = viewportClientXToScrollContentX;
-const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
-    const ratio = newZoom / oldZoom;
-    if (ratio === 1) {
-        return;
-    }
+const getScrollLeftToKeepCursorInPlace = ({ anchorContentX, oldScrollLeft, oldTimelineWidth, newTimelineWidth, }) => {
+    const oldUsableWidth = getUsableTimelineWidth(oldTimelineWidth);
+    const newUsableWidth = getUsableTimelineWidth(newTimelineWidth);
+    const clampedAnchorContentX = Math.min(Math.max(anchorContentX, timeline_layout_1.TIMELINE_PADDING), timeline_layout_1.TIMELINE_PADDING + oldUsableWidth);
+    const cursorX = clampedAnchorContentX - oldScrollLeft;
+    const anchorInUsableWidth = clampedAnchorContentX - timeline_layout_1.TIMELINE_PADDING;
+    const newAnchorContentX = timeline_layout_1.TIMELINE_PADDING + (anchorInUsableWidth / oldUsableWidth) * newUsableWidth;
+    return newAnchorContentX - cursorX;
+};
+exports.getScrollLeftToKeepCursorInPlace = getScrollLeftToKeepCursorInPlace;
+const prepareToPreserveTimelineCursor = ({ currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
     const { current } = timeline_refs_1.scrollableRef;
     if (!current) {
-        return;
+        return () => undefined;
     }
-    const frameIncrement = getFrameIncrement(currentDurationInFrames);
+    const oldTimelineWidth = current.scrollWidth;
+    const oldScrollLeft = current.scrollLeft;
+    const frameIncrement = (0, exports.getFrameIncrementFromWidth)(currentDurationInFrames, oldTimelineWidth);
     const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
     const prevCursorPosition = anchorContentX !== null
-        ? Math.min(Math.max(anchorContentX, 0), current.scrollWidth)
+        ? anchorContentX
         : frameIncrement * frameForScroll + timeline_layout_1.TIMELINE_PADDING;
-    const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
-    current.scrollLeft += newCursorPosition - prevCursorPosition;
-    // Playhead position is synced in `TimelineSlider` `useLayoutEffect` using
-    // measured `sliderAreaRef.clientWidth` so it matches layout after zoom
-    // (avoids fighting React `style` with stale `timelineWidth` during pinch).
+    return () => {
+        if (timeline_refs_1.scrollableRef.current !== current) {
+            return;
+        }
+        current.scrollLeft = (0, exports.getScrollLeftToKeepCursorInPlace)({
+            anchorContentX: prevCursorPosition,
+            oldScrollLeft,
+            oldTimelineWidth,
+            newTimelineWidth: current.scrollWidth,
+        });
+    };
 };
-exports.zoomAndPreserveCursor = zoomAndPreserveCursor;
+exports.prepareToPreserveTimelineCursor = prepareToPreserveTimelineCursor;

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

@@ -29,6 +29,21 @@ 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 hasSvgFile: (files: File[]) => boolean;
 export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }: {
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
@@ -38,6 +53,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 +68,32 @@ 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, svgImportMode, }: {
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     files: File[];
+    svgImportMode: "image" | "inline";
+}) => Promise<void>;
+export declare const importFigmaClipboard: ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }: {
+    compositionFile: string;
+    compositionId: string;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+    html: string;
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, dropPosition, url, }: {
+export declare const insertSvgMarkup: ({ compositionFile, compositionId, destinationDimensions, dropPosition, markup, }: {
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+    markup: string;
+}) => Promise<void>;
+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 +102,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, }: {