@remotion/studio 4.0.496 → 4.0.497

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineTimeIndicators = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
+exports.TimelineTimeIndicators = exports.getTimelineTickScale = exports.getNiceSecondInterval = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -33,6 +33,10 @@ const secondTick = {
 const TICK_LABEL_FONT_SIZE = 12;
 const TICK_LABEL_MARGIN_LEFT = 8;
 const TICK_LABEL_MIN_GAP = 16;
+const MIN_SPACING_BETWEEN_FRAME_TICKS_PX = 5;
+const MIN_SPACING_BETWEEN_TIME_TICKS_PX = 16;
+const MIN_SPACING_BETWEEN_MEDIUM_FRAME_TICKS_PX = 24;
+const MIN_SPACING_BETWEEN_MEDIUM_TIME_TICKS_PX = 48;
 const tickLabel = {
     fontSize: TICK_LABEL_FONT_SIZE,
     marginLeft: TICK_LABEL_MARGIN_LEFT,
@@ -60,6 +64,101 @@ const TimelineTimePadding = () => {
         } }));
 };
 exports.TimelineTimePadding = TimelineTimePadding;
+const NICE_SECOND_INTERVALS = [
+    1,
+    2,
+    5,
+    10,
+    15,
+    30,
+    60,
+    2 * 60,
+    3 * 60,
+    5 * 60,
+    10 * 60,
+    15 * 60,
+    20 * 60,
+    30 * 60,
+    60 * 60,
+];
+const getNiceSecondInterval = (rawNthSecond) => {
+    for (const n of NICE_SECOND_INTERVALS) {
+        if (n >= rawNthSecond) {
+            return n;
+        }
+    }
+    return Math.ceil(rawNthSecond / 3600) * 3600;
+};
+exports.getNiceSecondInterval = getNiceSecondInterval;
+const getIntegerDivisors = (value) => {
+    const lowerDivisors = [];
+    const upperDivisors = [];
+    for (let candidate = 1; candidate <= Math.sqrt(value); candidate++) {
+        if (value % candidate !== 0) {
+            continue;
+        }
+        lowerDivisors.push(candidate);
+        if (candidate !== value / candidate) {
+            upperDivisors.unshift(value / candidate);
+        }
+    }
+    return [...lowerDivisors, ...upperDivisors];
+};
+const getFrameIntervals = (fps) => {
+    if (Number.isInteger(fps)) {
+        return getIntegerDivisors(fps);
+    }
+    return [1, 2, 5, 10, 15, 20, 30, 60].filter((interval) => interval < fps);
+};
+const getSecondIntervals = (labelEverySeconds) => {
+    const hourlyIntervals = getIntegerDivisors(labelEverySeconds / 3600).map((hours) => hours * 3600);
+    return [...new Set([...NICE_SECOND_INTERVALS, ...hourlyIntervals])].sort((a, b) => a - b);
+};
+const getTimelineTickScale = ({ fps, frameInterval, rawSecondMarkerEveryNth, }) => {
+    const labelEverySeconds = (0, exports.getNiceSecondInterval)(rawSecondMarkerEveryNth);
+    const frameIntervals = getFrameIntervals(fps);
+    const rawFrameInterval = MIN_SPACING_BETWEEN_FRAME_TICKS_PX / frameInterval;
+    const minorFrameInterval = frameIntervals.find((interval) => interval >= rawFrameInterval && interval < fps);
+    if (minorFrameInterval !== undefined) {
+        const rawMediumFrameInterval = MIN_SPACING_BETWEEN_MEDIUM_FRAME_TICKS_PX / frameInterval;
+        const mediumFrameInterval = frameIntervals.find((interval) => interval >= rawMediumFrameInterval &&
+            interval < fps &&
+            interval % minorFrameInterval === 0);
+        return {
+            labelEverySeconds,
+            mediumTickEvery: mediumFrameInterval === undefined
+                ? null
+                : { interval: mediumFrameInterval, unit: 'frames' },
+            minorTickEvery: { interval: minorFrameInterval, unit: 'frames' },
+        };
+    }
+    const pixelsPerSecond = frameInterval * fps;
+    const secondIntervals = getSecondIntervals(labelEverySeconds);
+    const rawMinorSecondInterval = MIN_SPACING_BETWEEN_TIME_TICKS_PX / pixelsPerSecond;
+    const minorSecondInterval = secondIntervals.find((interval) => interval >= rawMinorSecondInterval &&
+        interval < labelEverySeconds &&
+        labelEverySeconds % interval === 0);
+    if (minorSecondInterval === undefined) {
+        return {
+            labelEverySeconds,
+            mediumTickEvery: null,
+            minorTickEvery: null,
+        };
+    }
+    const rawMediumSecondInterval = MIN_SPACING_BETWEEN_MEDIUM_TIME_TICKS_PX / pixelsPerSecond;
+    const mediumSecondInterval = secondIntervals.find((interval) => interval >= rawMediumSecondInterval &&
+        interval < labelEverySeconds &&
+        interval % minorSecondInterval === 0 &&
+        labelEverySeconds % interval === 0);
+    return {
+        labelEverySeconds,
+        mediumTickEvery: mediumSecondInterval === undefined
+            ? null
+            : { interval: mediumSecondInterval, unit: 'seconds' },
+        minorTickEvery: { interval: minorSecondInterval, unit: 'seconds' },
+    };
+};
+exports.getTimelineTickScale = getTimelineTickScale;
 const TimelineTimeIndicators = () => {
     const sliderTrack = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const video = remotion_1.Internals.useVideo();
@@ -101,53 +200,73 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     }, [windowWidth]);
     const ticks = (0, react_1.useMemo)(() => {
         const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
-        const MIN_SPACING_BETWEEN_TICKS_PX = 5;
         const maxTickLabelWidth = (0, render_frame_1.renderFrame)(durationInFrames - 1, fps).length *
             TICK_LABEL_FONT_SIZE *
             0.6;
         const minSpacingBetweenTickLabelsPx = TICK_LABEL_MARGIN_LEFT + maxTickLabelWidth + TICK_LABEL_MIN_GAP;
         const seconds = Math.floor(durationInFrames / fps);
-        const secondMarkerEveryNth = Math.ceil(minSpacingBetweenTickLabelsPx / (frameInterval * fps));
-        const frameMarkerEveryNth = Math.ceil(MIN_SPACING_BETWEEN_TICKS_PX / frameInterval);
-        // Big ticks showing for every second
-        const secondTicks = new Array(seconds)
-            .fill(true)
-            .map((_, index) => {
-            return {
+        const rawSecondMarkerEveryNth = minSpacingBetweenTickLabelsPx / (frameInterval * fps);
+        const tickScale = (0, exports.getTimelineTickScale)({
+            fps,
+            frameInterval,
+            rawSecondMarkerEveryNth,
+        });
+        // Labeled ticks use human-friendly time intervals.
+        const secondTicks = [];
+        for (let index = 0; index < seconds; index += tickScale.labelEverySeconds) {
+            secondTicks.push({
                 frame: index * fps,
                 style: {
                     ...secondTick,
                     left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
                 },
                 showTime: index > 0,
-            };
-        })
-            .filter((_, idx) => idx % secondMarkerEveryNth === 0);
-        const frameTicks = new Array(durationInFrames)
-            .fill(true)
-            .map((_, index) => {
-            return {
-                frame: index,
-                style: {
-                    ...tick,
-                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
-                    height: index % fps === 0
-                        ? 10
-                        : (index / frameMarkerEveryNth) % 2 === 0
+            });
+        }
+        const hasSecondTick = new Set(secondTicks.map((t) => t.frame));
+        const subdivisionTicks = [];
+        const { minorTickEvery, mediumTickEvery } = tickScale;
+        if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'frames') {
+            for (let frame = 0; frame < durationInFrames; frame += minorTickEvery.interval) {
+                if (hasSecondTick.has(frame)) {
+                    continue;
+                }
+                subdivisionTicks.push({
+                    frame,
+                    style: {
+                        ...tick,
+                        left: frameInterval * frame + timeline_layout_1.TIMELINE_PADDING,
+                        height: (Number.isInteger(fps) && frame % fps === 0) ||
+                            ((mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'frames' &&
+                                frame % mediumTickEvery.interval === 0)
                             ? 5
                             : 2,
-                },
-                showTime: false,
-            };
-        })
-            .filter((_, idx) => idx % frameMarkerEveryNth === 0);
-        // Merge and deduplicate ticks
-        const hasTicks = [];
-        return [...secondTicks, ...frameTicks].filter((t) => {
-            const alreadyUsed = hasTicks.find((ht) => ht === t.frame) !== undefined;
-            hasTicks.push(t.frame);
-            return !alreadyUsed;
-        });
+                    },
+                    showTime: false,
+                });
+            }
+        }
+        if ((minorTickEvery === null || minorTickEvery === void 0 ? void 0 : minorTickEvery.unit) === 'seconds') {
+            for (let second = 0; second < seconds; second += minorTickEvery.interval) {
+                const frame = second * fps;
+                if (hasSecondTick.has(frame)) {
+                    continue;
+                }
+                subdivisionTicks.push({
+                    frame,
+                    style: {
+                        ...tick,
+                        left: frameInterval * frame + timeline_layout_1.TIMELINE_PADDING,
+                        height: (mediumTickEvery === null || mediumTickEvery === void 0 ? void 0 : mediumTickEvery.unit) === 'seconds' &&
+                            second % mediumTickEvery.interval === 0
+                            ? 5
+                            : 2,
+                    },
+                    showTime: false,
+                });
+            }
+        }
+        return [...secondTicks, ...subdivisionTicks];
     }, [durationInFrames, fps, windowWidth]);
     return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
             return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));

package/dist/components/Timeline/TimelineTranslateField.js

@@ -17,6 +17,7 @@ const containerStyle = {
     display: 'flex',
     gap: 4,
 };
+const translateDragSensitivity = 3;
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
@@ -100,7 +101,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         }
     }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, dragSensitivity: translateDragSensitivity })
         ] }));
 };
 exports.TimelineTranslateField = TimelineTranslateField;

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

@@ -15,4 +15,5 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly postmountWidth: number;
     readonly loopDisplay: LoopDisplay | undefined;
     readonly frozenMediaFrame: number | null;
+    readonly extendLastFrame: boolean;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -26,7 +26,7 @@ const filmstripContainerStyle = {
     fontFamily: 'Arial, Helvetica',
 };
 const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -108,6 +108,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
                 };
             }
             (0, timeline_utils_1.extractFrames)({
+                repeatLastFrame: extendLastFrame,
                 timestampsInSeconds: ({ track, }) => {
                     aspectRatio.current = track.width / track.height;
                     timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
@@ -216,6 +217,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
             }
         }
         (0, timeline_utils_1.extractFrames)({
+            repeatLastFrame: extendLastFrame,
             timestampsInSeconds: ({ track, }) => {
                 aspectRatio.current = track.width / track.height;
                 timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
@@ -307,6 +309,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
     }, [
         durationInFrames,
         error,
+        extendLastFrame,
         fps,
         frozenMediaFrame,
         loopDisplay,

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

@@ -1,7 +1,9 @@
 import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
+export declare const deleteSequencesFromSource: (nodePathInfos: SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<boolean>;
 export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selection: TimelineSelection;
     sequences: TSequence[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = void 0;
+exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -32,7 +32,7 @@ const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
         confirmLabel: 'Delete',
     });
 };
-const deleteSequences = async (nodePathInfos, confirm) => {
+const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
@@ -61,6 +61,7 @@ const deleteSequences = async (nodePathInfos, confirm) => {
         return true;
     });
 };
+exports.deleteSequencesFromSource = deleteSequencesFromSource;
 const deleteEffects = (effects) => {
     if (effects.length === 0) {
         return Promise.resolve(false);
@@ -115,7 +116,7 @@ const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePat
         case 'guide':
             return null;
         case 'sequence':
-            return deleteSequences([selection.nodePathInfo], confirm);
+            return (0, exports.deleteSequencesFromSource)([selection.nodePathInfo], confirm);
         case 'sequence-effect':
             return deleteEffects([
                 {
@@ -286,7 +287,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
         case 'guide':
             return null;
         case 'sequence':
-            return deleteSequences(selections
+            return (0, exports.deleteSequencesFromSource)(selections
                 .filter(isSequenceRowSelection)
                 .map((selection) => selection.nodePathInfo), confirm);
         case 'sequence-effect':

package/dist/components/Timeline/disable-sequence-interactivity.js

@@ -5,6 +5,8 @@ const no_react_1 = require("remotion/no-react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const disableSequenceInteractivity = ({ clientId, fileName, nodePath, setPropStatuses, }) => {
     return (0, save_sequence_prop_1.saveSequenceProps)({
+        addedKeyframes: null,
+        movedKeyframes: null,
         changes: [
             {
                 fileName,

package/dist/components/Timeline/get-timeline-media-visualization-layout.d.ts

@@ -0,0 +1,8 @@
+export declare const getTimelineMediaVisualizationLayout: ({ visualizationWidth, premountWidth, postmountWidth, }: {
+    readonly visualizationWidth: number;
+    readonly premountWidth: number;
+    readonly postmountWidth: number;
+}) => {
+    marginLeft: number;
+    width: number;
+};

package/dist/components/Timeline/get-timeline-media-visualization-layout.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineMediaVisualizationLayout = void 0;
+const getTimelineMediaVisualizationLayout = ({ visualizationWidth, premountWidth, postmountWidth, }) => {
+    return {
+        marginLeft: premountWidth,
+        width: Math.max(0, visualizationWidth - premountWidth - postmountWidth),
+    };
+};
+exports.getTimelineMediaVisualizationLayout = getTimelineMediaVisualizationLayout;

package/dist/components/Timeline/get-timeline-video-info-widths.js

@@ -1,11 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineVideoInfoWidths = void 0;
+const get_timeline_media_visualization_layout_1 = require("./get-timeline-media-visualization-layout");
 const getTimelineVideoInfoWidths = ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }) => {
-    const mountWidth = premountWidth + postmountWidth;
     return {
-        mediaVisualizationWidth: Math.max(0, visualizationWidth - mountWidth),
-        mediaNaturalWidth: Math.max(0, naturalWidth - mountWidth),
+        mediaVisualizationWidth: (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
+            visualizationWidth,
+            premountWidth,
+            postmountWidth,
+        }).width,
+        mediaNaturalWidth: (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
+            visualizationWidth: naturalWidth,
+            premountWidth,
+            postmountWidth,
+        }).width,
     };
 };
 exports.getTimelineVideoInfoWidths = getTimelineVideoInfoWidths;

package/dist/components/Timeline/keyframe-clipboard.js

@@ -182,6 +182,10 @@ const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrid
         version: 1,
         remotionClipboard: 'keyframe',
         fieldType: firstResolved.fieldType,
+        field: {
+            type: firstResolved.identity.type,
+            fieldKey: firstResolved.identity.fieldKey,
+        },
         keyframes: keyframes.map((keyframe) => {
             return {
                 frameOffset: keyframe.frame - firstFrame,
@@ -214,15 +218,27 @@ const isKeyframeValueCompatible = ({ value, fieldType, }) => {
     return typeof value === 'string';
 };
 const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (selectedItems.length === 0) {
         return { type: 'none' };
     }
-    const selection = selectedItems[0];
+    const resolvedSelectedItems = selectedItems.length === 1 &&
+        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) === 'sequence' &&
+        payload.field !== null &&
+        payload.field.type === 'sequence'
+        ? [
+            {
+                type: 'sequence-prop',
+                nodePathInfo: selectedItems[0].nodePathInfo,
+                key: payload.field.fieldKey,
+            },
+        ]
+        : selectedItems;
+    const selection = resolvedSelectedItems[0];
     if (!selection || getKeyframeFieldIdentity(selection) === null) {
         return { type: 'none' };
     }
-    const resolvedFields = selectedItems.map((item) => resolveKeyframeField({
+    const resolvedFields = resolvedSelectedItems.map((item) => resolveKeyframeField({
         selection: item,
         sequences,
         overrideIdsToNodePaths,
@@ -239,8 +255,8 @@ const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequ
         sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
         value: keyframe.value,
     }));
-    const firstFrame = (_a = keyframes[0]) === null || _a === void 0 ? void 0 : _a.sourceFrame;
-    const lastFrame = (_b = keyframes.at(-1)) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    const lastFrame = (_c = keyframes.at(-1)) === null || _c === void 0 ? void 0 : _c.sourceFrame;
     if (firstFrame === undefined || lastFrame === undefined) {
         return { type: 'incompatible' };
     }

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -155,6 +155,8 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
     const resetPromises = [];
     if (sequencePropTargets.length > 0) {
         resetPromises.push((0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: sequencePropTargets.map((target) => ({
                 fileName: target.fileName,
                 nodePath: target.nodePath,

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,5 +1,6 @@
 import { type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { AddSequenceKeyframeChange } from './call-add-keyframe';
 import { type MoveEffectKeyframeChange, type MoveSequenceKeyframeChange } from './call-move-keyframe';
 export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
@@ -13,14 +14,15 @@ export type SaveSequencePropChange = {
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
-    movedKeyframes?: {
+    addedKeyframes: AddSequenceKeyframeChange[] | null;
+    movedKeyframes: {
         sequenceKeyframes: MoveSequenceKeyframeChange[];
         effectKeyframes: MoveEffectKeyframeChange[];
-    };
+    } | null;
     setPropStatuses: SetPropStatuses;
     clientId: string;
     undoLabel: string;
     redoLabel: string;
 };
-export declare const saveSequenceProps: ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
+export declare const saveSequenceProps: ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -11,16 +11,18 @@ const serializeSequencePropValue = (value) => {
     }
     return { type: 'json', serialized: JSON.stringify(value) };
 };
-const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
-    var _a, _b;
-    const sequenceKeyframes = (_a = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.sequenceKeyframes) !== null && _a !== void 0 ? _a : [];
-    const effectKeyframes = (_b = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.effectKeyframes) !== null && _b !== void 0 ? _b : [];
+const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
+    const sequenceKeyframes = movedKeyframes === null ? [] : movedKeyframes.sequenceKeyframes;
+    const effectKeyframes = movedKeyframes === null ? [] : movedKeyframes.effectKeyframes;
     if (changes.length === 0 &&
+        keyframesToAdd.length === 0 &&
         sequenceKeyframes.length === 0 &&
         effectKeyframes.length === 0) {
         return Promise.resolve();
     }
     if (changes.length === 1 &&
+        keyframesToAdd.length === 0 &&
         sequenceKeyframes.length === 0 &&
         effectKeyframes.length === 0) {
         const change = changes[0];
@@ -51,6 +53,8 @@ const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId,
                             sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
                         },
                     ],
+                    addedKeyframes: null,
+                    movedKeyframes: null,
                     clientId,
                     undoLabel,
                     redoLabel,
@@ -64,6 +68,15 @@ const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId,
         effectKeyframes,
         setPropStatuses,
     });
+    for (const keyframe of keyframesToAdd) {
+        setPropStatuses(keyframe.nodePath, (prev) => (0, studio_shared_1.optimisticAddSequenceKeyframe)({
+            previous: prev,
+            fieldKey: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            value: keyframe.value,
+            schema: keyframe.schema,
+        }));
+    }
     for (const change of changes) {
         setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
@@ -86,25 +99,37 @@ const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId,
                 sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
             };
         }),
-        movedKeyframes: {
-            sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+        addedKeyframes: addedKeyframes === null
+            ? null
+            : addedKeyframes.map((keyframe) => ({
                 fileName: keyframe.fileName,
                 nodePath: keyframe.nodePath,
                 key: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
-                schema: keyframe.schema,
-            })),
-            effectKeyframes: effectKeyframes.map((keyframe) => ({
-                fileName: keyframe.fileName,
-                sequenceNodePath: keyframe.nodePath,
-                effectIndex: keyframe.effectIndex,
-                key: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
+                frame: keyframe.sourceFrame,
+                value: JSON.stringify(keyframe.value),
                 schema: keyframe.schema,
             })),
-        },
+        movedKeyframes: movedKeyframes === null
+            ? null
+            : {
+                sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+                    fileName: keyframe.fileName,
+                    nodePath: keyframe.nodePath,
+                    key: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                    schema: keyframe.schema,
+                })),
+                effectKeyframes: effectKeyframes.map((keyframe) => ({
+                    fileName: keyframe.fileName,
+                    sequenceNodePath: keyframe.nodePath,
+                    effectIndex: keyframe.effectIndex,
+                    key: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                    schema: keyframe.schema,
+                })),
+            },
         clientId,
         undoLabel,
         redoLabel,

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -1,5 +1,7 @@
 export declare const PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = "data-remotion-prevent-selection-clear";
 export declare const shouldClearSelectionOnPointerDown: (event: {
     readonly button: number;
+    readonly ctrlKey: boolean | null;
+    readonly metaKey: boolean | null;
     readonly target?: EventTarget | null | undefined;
 }) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -13,7 +13,7 @@ const isSelectionClearBlocked = (target) => {
     return (target.closest(`[${exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR}]`) !== null);
 };
 const shouldClearSelectionOnPointerDown = (event) => {
-    if (event.button !== 0) {
+    if (event.button !== 0 || event.metaKey === true || event.ctrlKey === true) {
         return false;
     }
     return !isSelectionClearBlocked(event.target);

package/dist/components/Timeline/timeline-asset-drop-context.d.ts

@@ -0,0 +1 @@
+export declare const TimelineAssetDropFrameContext: import("react").Context<number | null>;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineAssetDropFrameContext = void 0;
+const react_1 = require("react");
+exports.TimelineAssetDropFrameContext = (0, react_1.createContext)(null);

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

@@ -35,6 +35,13 @@ export declare const getFrameFromX: ({ clientX, durationInFrames, width, extrapo
     width: number;
     extrapolate: "clamp" | "extend";
 }) => number;
+export declare const getFrameFromTimelineDrop: ({ clientX, durationInFrames, scrollLeft, timelineLeft, timelineWidth, }: {
+    clientX: number;
+    durationInFrames: number;
+    scrollLeft: number;
+    timelineLeft: number;
+    timelineWidth: number;
+}) => number;
 /**
  * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
  * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a