@remotion/studio 4.0.496 → 4.0.497

package/dist/components/Timeline/TimelineSequence.js

@@ -43,6 +43,7 @@ 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 is_video_with_last_frame_hold_1 = require("../../helpers/is-video-with-last-frame-hold");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
@@ -56,6 +57,7 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const get_timeline_media_visualization_layout_1 = require("./get-timeline-media-visualization-layout");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
@@ -159,6 +161,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
+    const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -407,6 +410,20 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         video,
         windowWidth,
     ]);
+    const mediaVisualizationLayout = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_media_visualization_layout_1.getTimelineMediaVisualizationLayout)({
+            visualizationWidth: width,
+            premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0,
+            postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0,
+        });
+    }, [postmountWidth, premountWidth, width]);
+    const mediaVisualizationStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: mediaVisualizationLayout.width,
+            marginLeft: mediaVisualizationLayout.marginLeft,
+            height: '100%',
+        };
+    }, [mediaVisualizationLayout]);
     const style = (0, react_1.useMemo)(() => {
         return {
             background: s.type === 'audio'
@@ -430,21 +447,16 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePath !== null &&
         validatedLocation !== null &&
         durationCanUpdate;
-    const showLeftEdgeDragHandle = (s.type === 'sequence' ||
-        s.type === 'image' ||
-        s.type === 'audio' ||
-        s.type === 'video') &&
-        !s.isInsideSeries &&
+    const showLeftEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceLeftEdgeDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
-        Boolean(s.controls) &&
-        fromCanUpdate &&
+        ((0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) || fromCanUpdate) &&
         durationCanUpdate &&
         trimBeforeCanUpdate;
     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, 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] }));
+    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("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.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, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.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/TimelineSequenceFrame.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
+const snowflake_1 = require("../../icons/snowflake");
 const relativeFrameStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -20,11 +21,8 @@ const snowflakeStyle = {
     height: 12,
     width: 12,
 };
-const FreezeFrameIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: snowflakeStyle, fill: colors_1.CURRENT_COLOR, children: jsx_runtime_1.jsx("path", { d: "M288 32l0-32-64 0 0 88.4-64-64-39.6 39.6 103.6 103.6 0 56.4-56.4 0-103.6-103.6-39.6 39.6 64 64-88.4 0 0 64 88.4 0c-33.5 33.5-54.9 54.9-64 64L64 391.6c2.5-2.5 37.1-37.1 103.6-103.6l56.4 0 0 56.4C157.5 410.9 122.9 445.5 120.4 448L160 487.6c9.1-9.1 30.5-30.5 64-64l0 88.4 64 0 0-88.4 64 64 39.6-39.6-103.6-103.6 0-56.4 56.4 0 103.6 103.6 39.6-39.6-64-64 88.4 0 0-64-88.4 0c33.5-33.5 54.9-54.9 64-64L448 120.4c-2.5 2.5-37.1 37.1-103.6 103.6l-56.4 0 0-56.4C354.5 101.1 389.1 66.5 391.6 64L352 24.4c-9.1 9.1-30.5 30.5-64 64L288 32z" }) }));
-};
 const TimelineSequenceFrame = ({ roundedFrame, frozenFrame, premounted, postmounted }) => {
-    return (jsx_runtime_1.jsxs("div", { style: relativeFrameStyle, children: [frozenFrame === null ? null : jsx_runtime_1.jsx(FreezeFrameIcon, {}), frozenFrame !== null && frozenFrame !== void 0 ? frozenFrame : (premounted
+    return (jsx_runtime_1.jsxs("div", { style: relativeFrameStyle, children: [frozenFrame === null ? null : (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: snowflakeStyle, color: colors_1.CURRENT_COLOR })), frozenFrame !== null && frozenFrame !== void 0 ? frozenFrame : (premounted
                 ? '0 (Premounted)'
                 : postmounted !== null
                     ? `${postmounted} (Postmounted)`

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -504,6 +504,8 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             ? JSON.stringify(fieldSchema.default)
             : null;
         (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -77,6 +77,8 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
             return Promise.resolve();
         }
         return (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,
@@ -219,6 +221,8 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             : null;
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
         (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes: [
                 {
                     fileName: validatedLocation.source,

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

@@ -7,6 +7,7 @@ import { type TimelineSelection } from './TimelineSelection';
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
     readonly initialDuration: number;
+    readonly minimumDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
 };
@@ -15,7 +16,10 @@ export type TimelineSequenceLeftEdgeDragTarget = {
     readonly initialDuration: number;
     readonly initialFrom: number;
     readonly initialTrimBefore: number;
+    readonly minimumDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly playbackRate: number;
+    readonly positionField: 'from' | null;
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceFromDragTarget = {
@@ -33,21 +37,29 @@ type TimelineSequenceKeyframeDragTarget = {
 type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
     readonly effectIndex: number;
 };
+export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
+export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
-export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, }: {
+export declare const isTimelineSequenceLeftEdgeDraggable: (sequence: TSequence) => boolean;
+export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, minimumDuration, }: {
     readonly initialDuration: number;
     readonly deltaFrames: number;
+    readonly minimumDuration?: number | undefined;
 }) => number;
-export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, }: {
+export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration, }: {
     readonly initialDuration: number;
     readonly initialTrimBefore: number;
     readonly deltaFrames: number;
+    readonly playbackRate: number;
+    readonly minimumDuration?: number | undefined;
 }) => number;
-export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }: {
+export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, playbackRate, minimumDuration, }: {
     readonly initialDuration: number;
     readonly initialFrom: number;
     readonly initialTrimBefore: number;
     readonly deltaFrames: number;
+    readonly playbackRate: number;
+    readonly minimumDuration?: number | undefined;
 }) => {
     durationInFrames: number;
     from: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceDurationDraggable = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -9,6 +9,7 @@ const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const save_sequence_prop_1 = require("./save-sequence-prop");
@@ -81,50 +82,102 @@ const canUpdateTrimBefore = ({ propStatuses, nodePath, }) => {
     const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.trimBefore) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
-const isTimelineSequenceDurationDraggable = (sequence) => {
+const isTransitionSeriesSequence = (sequence) => {
+    var _a;
+    return ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+        'dev.remotion.transitions.TransitionSeries.Sequence';
+};
+exports.isTransitionSeriesSequence = isTransitionSeriesSequence;
+const isSeriesSequence = (sequence) => {
     var _a;
-    const isInteractiveSeriesSequence = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+    return ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
         'dev.remotion.remotion.Series.Sequence';
+};
+const isCascadingSequence = (sequence) => isSeriesSequence(sequence) || (0, exports.isTransitionSeriesSequence)(sequence);
+exports.isCascadingSequence = isCascadingSequence;
+const isTransitionSeriesTransition = (sequence) => {
+    var _a;
+    return ((_a = sequence === null || sequence === void 0 ? void 0 : sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+        'dev.remotion.transitions.TransitionSeries.Transition';
+};
+const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
+    if (!(0, exports.isTransitionSeriesSequence)(sequence)) {
+        return 1;
+    }
+    const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
+        candidate.rootId === sequence.rootId &&
+        ((0, exports.isTransitionSeriesSequence)(candidate) ||
+            isTransitionSeriesTransition(candidate))));
+    const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);
+    if (sequenceIndex === -1) {
+        return 1;
+    }
+    const previous = siblings[sequenceIndex - 1];
+    const next = siblings[sequenceIndex + 1];
+    return Math.max(1, isTransitionSeriesTransition(previous) ? previous.duration : 1, isTransitionSeriesTransition(next) ? next.duration : 1);
+};
+const isTimelineSequenceDurationDraggable = (sequence) => {
+    const isInteractiveCascadingSequence = (0, exports.isCascadingSequence)(sequence);
     return ((sequence.type === 'sequence' ||
         sequence.type === 'image' ||
         sequence.type === 'audio' ||
         sequence.type === 'video') &&
         !sequence.loopDisplay &&
-        (!sequence.isInsideSeries || isInteractiveSeriesSequence) &&
+        (!sequence.isInsideSeries || isInteractiveCascadingSequence) &&
         Boolean(sequence.controls));
 };
 exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
-const isLeftEdgeDraggableSequence = (sequence) => {
-    return (!sequence.isInsideSeries &&
+const isTimelineSequenceLeftEdgeDraggable = (sequence) => {
+    return ((!sequence.isInsideSeries || (0, exports.isCascadingSequence)(sequence)) &&
         Boolean(sequence.controls) &&
         (sequence.type === 'sequence' ||
             sequence.type === 'image' ||
             sequence.type === 'audio' ||
             sequence.type === 'video'));
 };
+exports.isTimelineSequenceLeftEdgeDraggable = isTimelineSequenceLeftEdgeDraggable;
+const playbackRateComponentIdentities = new Set([
+    'dev.remotion.gif.Gif',
+    'dev.remotion.media.Audio',
+    'dev.remotion.media.Video',
+    'dev.remotion.remotion.AnimatedImage',
+]);
+const getTrimBeforePlaybackRate = (sequence) => {
+    var _a, _b;
+    const componentIdentity = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity;
+    if (componentIdentity === null ||
+        componentIdentity === undefined ||
+        !playbackRateComponentIdentities.has(componentIdentity)) {
+        return 1;
+    }
+    const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.currentRuntimeValueDotNotation.playbackRate;
+    return typeof runtimePlaybackRate === 'number' ? runtimePlaybackRate : 1;
+};
 const isFromDraggableSequence = (sequence) => {
     return (!sequence.loopDisplay &&
         !sequence.isInsideSeries &&
         Boolean(sequence.controls));
 };
-const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, }) => Math.max(1, initialDuration + deltaFrames);
+const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, minimumDuration = 1, }) => Math.max(minimumDuration, initialDuration + deltaFrames);
 exports.getTimelineSequenceDurationDragValue = getTimelineSequenceDurationDragValue;
-const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, }) => {
-    const minDeltaFrames = 0 - initialTrimBefore;
-    const maxDeltaFrames = initialDuration - 1;
+const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration = 1, }) => {
+    const minDeltaFrames = 0 - initialTrimBefore / playbackRate;
+    const maxDeltaFrames = initialDuration - minimumDuration;
     return Math.max(minDeltaFrames, Math.min(deltaFrames, maxDeltaFrames));
 };
 exports.getTimelineSequenceLeftEdgeDragDelta = getTimelineSequenceLeftEdgeDragDelta;
-const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }) => {
+const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, playbackRate, minimumDuration = 1, }) => {
     const clampedDeltaFrames = (0, exports.getTimelineSequenceLeftEdgeDragDelta)({
         initialDuration,
         initialTrimBefore,
         deltaFrames,
+        playbackRate,
+        minimumDuration,
     });
     return {
         durationInFrames: initialDuration - clampedDeltaFrames,
         from: initialFrom + clampedDeltaFrames,
-        trimBefore: initialTrimBefore + clampedDeltaFrames,
+        trimBefore: initialTrimBefore + clampedDeltaFrames * playbackRate,
     };
 };
 exports.getTimelineSequenceLeftEdgeDragValues = getTimelineSequenceLeftEdgeDragValues;
@@ -135,13 +188,16 @@ const getTimelineSequenceLeftEdgeDragChanges = ({ targets, deltaFrames, }) => {
             initialFrom: target.initialFrom,
             initialTrimBefore: target.initialTrimBefore,
             deltaFrames,
+            playbackRate: target.playbackRate,
+            minimumDuration: target.minimumDuration,
         });
         const changes = [];
-        if (nextValues.from !== target.initialFrom) {
+        if (target.positionField !== null &&
+            nextValues.from !== target.initialFrom) {
             changes.push({
                 fileName: target.fileName,
                 nodePath: target.nodePath,
-                fieldKey: 'from',
+                fieldKey: target.positionField,
                 value: nextValues.from,
                 defaultValue: '0',
                 schema: target.schema,
@@ -176,6 +232,7 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
         const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
             initialDuration: target.initialDuration,
             deltaFrames,
+            minimumDuration: target.minimumDuration,
         });
         if (nextValue === target.initialDuration) {
             return [];
@@ -289,6 +346,10 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             targets.set(key, {
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
+                minimumDuration: getMinimumSequenceDuration({
+                    sequence: originalSequence,
+                    sequences,
+                }),
                 nodePath,
                 schema: controls.schema,
             });
@@ -320,12 +381,13 @@ const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedI
         if (!track ||
             !track.nodePathInfo ||
             !originalSequence ||
-            !isLeftEdgeDraggableSequence(originalSequence)) {
+            !(0, exports.isTimelineSequenceLeftEdgeDraggable)(originalSequence)) {
             return null;
         }
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const trimsMedia = originalSequence.type === 'audio' || originalSequence.type === 'video';
-        if (!canUpdateFrom({ propStatuses, nodePath }) ||
+        const positionField = (0, exports.isCascadingSequence)(originalSequence) ? null : 'from';
+        if ((positionField === 'from' && !canUpdateFrom({ propStatuses, nodePath })) ||
             !canUpdateDurationInFrames({ propStatuses, nodePath }) ||
             !canUpdateTrimBefore({ propStatuses, nodePath })) {
             return null;
@@ -339,11 +401,17 @@ const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedI
             targets.set(key, {
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
-                initialFrom: originalSequence.from,
+                initialFrom: positionField === 'from' ? originalSequence.from : 0,
                 initialTrimBefore: trimsMedia
                     ? ((_a = originalSequence.trimBefore) !== null && _a !== void 0 ? _a : Math.max(0, originalSequence.startMediaFrom))
                     : ((_b = originalSequence.trimBefore) !== null && _b !== void 0 ? _b : 0),
+                minimumDuration: getMinimumSequenceDuration({
+                    sequence: originalSequence,
+                    sequences,
+                }),
                 nodePath,
+                playbackRate: getTrimBeforePlaybackRate(originalSequence),
+                positionField,
                 schema: controls.schema,
             });
         }
@@ -468,6 +536,8 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes,
             setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
@@ -549,8 +619,12 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
                     initialFrom: target.initialFrom,
                     initialTrimBefore: target.initialTrimBefore,
                     deltaFrames,
+                    playbackRate: target.playbackRate,
+                    minimumDuration: target.minimumDuration,
                 });
-                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextValues.from));
+                if (target.positionField !== null) {
+                    latestRef.current.setDragOverrides(target.nodePath, target.positionField, remotion_1.Internals.makeStaticDragOverride(nextValues.from));
+                }
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(nextValues.durationInFrames));
                 latestRef.current.setDragOverrides(target.nodePath, 'trimBefore', remotion_1.Internals.makeStaticDragOverride(nextValues.trimBefore));
             }
@@ -651,6 +725,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
             changes,
             movedKeyframes: {
                 sequenceKeyframes: keyframeMoves.sequenceKeyframes,
@@ -843,6 +918,8 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            addedKeyframes: null,
+            movedKeyframes: null,
             changes,
             setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
@@ -923,6 +1000,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,
                     deltaFrames,
+                    minimumDuration: target.minimumDuration,
                 })));
             }
         };

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

@@ -2,4 +2,20 @@ import React from 'react';
 export declare const TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 export declare const TimelineTimePlaceholders: React.FC;
 export declare const TimelineTimePadding: React.FC;
+export declare const getNiceSecondInterval: (rawNthSecond: number) => number;
+type TickInterval = {
+    readonly interval: number;
+    readonly unit: 'frames' | 'seconds';
+};
+export type TimelineTickScale = {
+    readonly labelEverySeconds: number;
+    readonly mediumTickEvery: TickInterval | null;
+    readonly minorTickEvery: TickInterval | null;
+};
+export declare const getTimelineTickScale: ({ fps, frameInterval, rawSecondMarkerEveryNth, }: {
+    readonly fps: number;
+    readonly frameInterval: number;
+    readonly rawSecondMarkerEveryNth: number;
+}) => TimelineTickScale;
 export declare const TimelineTimeIndicators: React.FC;
+export {};