@remotion/studio 4.0.420 → 4.0.422

package/dist/components/Timeline/TimelineSequence.js

@@ -45,7 +45,7 @@ const Inner = ({ s, windowWidth }) => {
     const isPostmounting = relativeFrameWithPostmount >= 0 &&
         relativeFrameWithPostmount < ((_c = s.postmountDisplay) !== null && _c !== void 0 ? _c : 0) &&
         !isInRange;
-    const { marginLeft, width, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
+    const { marginLeft, width, naturalWidth, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
             durationInFrames: s.loopDisplay
                 ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
@@ -103,7 +103,7 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? ((0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration })) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? ((0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.loopDisplay === undefined &&
                 (isInRange || isPremounting || isPostmounting) ? ((0, jsx_runtime_1.jsx)("div", { style: {

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

@@ -2,6 +2,8 @@ import React from 'react';
 export declare const TimelineVideoInfo: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
-    readonly startFrom: number;
+    readonly naturalWidth: number;
+    readonly trimBefore: number;
     readonly durationInFrames: number;
+    readonly playbackRate: number;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -48,10 +48,10 @@ const calculateTimestampSlots = ({ visualizationWidth, fromSeconds, segmentDurat
     }
     return timestampTargets;
 };
-const ensureSlots = ({ filledSlots, visualizationWidth, fromSeconds, toSeconds, aspectRatio, }) => {
+const ensureSlots = ({ filledSlots, naturalWidth, fromSeconds, toSeconds, aspectRatio, }) => {
     const segmentDuration = toSeconds - fromSeconds;
     const timestampTargets = calculateTimestampSlots({
-        visualizationWidth,
+        visualizationWidth: naturalWidth,
         fromSeconds,
         segmentDuration,
         aspectRatio,
@@ -74,7 +74,7 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
     ctx.drawImage(frame, left, 0, frame.displayWidth / window.devicePixelRatio, frame.displayHeight / window.devicePixelRatio);
     filledSlots.set(timestamp, frame.timestamp);
 };
-const fillWithCachedFrames = ({ ctx, visualizationWidth, filledSlots, src, segmentDuration, fromSeconds, }) => {
+const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, }) => {
     const prefix = (0, frame_database_1.getFrameDatabaseKeyPrefix)(src);
     const keys = Array.from(frame_database_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
     const targets = Array.from(filledSlots.keys());
@@ -107,7 +107,7 @@ const fillWithCachedFrames = ({ ctx, visualizationWidth, filledSlots, src, segme
             ctx,
             frame: frame.frame,
             filledSlots,
-            visualizationWidth,
+            visualizationWidth: naturalWidth,
             timestamp,
             segmentDuration,
             fromSeconds,
@@ -138,7 +138,7 @@ const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, seg
         });
     }
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -168,19 +168,21 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
         current.appendChild(canvas);
         // desired-timestamp -> filled-timestamp
         const filledSlots = new Map();
-        const fromSeconds = startFrom / fps;
-        const toSeconds = (startFrom + durationInFrames) / fps;
+        const fromSeconds = trimBefore / fps;
+        // Trim is applied first, then playbackRate. Each composition frame
+        // advances the source video by `playbackRate` source frames.
+        const toSeconds = fromSeconds + (durationInFrames * playbackRate) / fps;
         if (aspectRatio.current !== null) {
             ensureSlots({
                 filledSlots,
-                visualizationWidth,
+                naturalWidth,
                 fromSeconds,
                 toSeconds,
                 aspectRatio: aspectRatio.current,
             });
             fillWithCachedFrames({
                 ctx,
-                visualizationWidth,
+                naturalWidth,
                 filledSlots,
                 src,
                 segmentDuration: toSeconds - fromSeconds,
@@ -204,7 +206,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
                     filledSlots,
                     fromSeconds,
                     toSeconds,
-                    visualizationWidth,
+                    naturalWidth,
                     aspectRatio: aspectRatio.current,
                 });
                 return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -236,13 +238,13 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
                     filledSlots,
                     fromSeconds,
                     toSeconds,
-                    visualizationWidth,
+                    naturalWidth,
                     aspectRatio: aspectRatio.current,
                 });
                 fillFrameWhereItFits({
                     ctx,
                     filledSlots,
-                    visualizationWidth,
+                    visualizationWidth: naturalWidth,
                     frame: transformed,
                     segmentDuration: toSeconds - fromSeconds,
                     fromSeconds,
@@ -254,7 +256,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
             .then(() => {
             fillWithCachedFrames({
                 ctx,
-                visualizationWidth,
+                naturalWidth,
                 filledSlots,
                 src,
                 segmentDuration: toSeconds - fromSeconds,
@@ -271,7 +273,16 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
             controller.abort();
             current.removeChild(canvas);
         };
-    }, [durationInFrames, error, fps, src, startFrom, visualizationWidth]);
+    }, [
+        durationInFrames,
+        error,
+        fps,
+        naturalWidth,
+        playbackRate,
+        src,
+        trimBefore,
+        visualizationWidth,
+    ]);
     return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: containerStyle });
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/esm/{chunk-wg48cezw.js → chunk-4153e552.js}

@@ -21116,13 +21116,16 @@ var getTimelineSequenceLayout = ({
   const maxMediaSequenceDuration = (maxMediaDuration ?? Infinity) - startFromMedia;
   const lastFrame = (video.durationInFrames ?? 1) - 1;
   let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+  let naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
   const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
   const shouldAddHalfAFrameAtStart = startFrom > 0;
   if (shouldAddHalfAFrameAtEnd) {
     spatialDuration += 0.5;
+    naturalSpatialDuration += 0.5;
   }
   if (shouldAddHalfAFrameAtStart) {
     spatialDuration += 0.5;
+    naturalSpatialDuration += 0.5;
   }
   const startFromWithOffset = shouldAddHalfAFrameAtStart ? startFrom - 0.5 : startFrom;
   const marginLeft = lastFrame === 0 ? 0 : startFromWithOffset / lastFrame * (windowWidth - TIMELINE_PADDING * 2);
@@ -21134,6 +21137,13 @@ var getTimelineSequenceLayout = ({
     spatialDuration,
     windowWidth
   });
+  const naturalWidth = getWidthOfTrack({
+    durationInFrames,
+    lastFrame,
+    nonNegativeMarginLeft,
+    spatialDuration: naturalSpatialDuration,
+    windowWidth
+  });
   const premountWidth = premountDisplay ? getWidthOfTrack({
     durationInFrames: premountDisplay,
     lastFrame,
@@ -21151,6 +21161,7 @@ var getTimelineSequenceLayout = ({
   return {
     marginLeft: Math.max(marginLeft, 0) - (premountWidth ?? 0),
     width: width + (premountWidth ?? 0) + (postmountWidth ?? 0),
+    naturalWidth: naturalWidth + (premountWidth ?? 0) + (postmountWidth ?? 0),
     premountWidth,
     postmountWidth
   };
@@ -36063,6 +36074,9 @@ var useMaxMediaDuration = (s, fps) => {
       input2.dispose();
     };
   }, [src, fps]);
+  if (maxMediaDuration !== null && (s.type === "audio" || s.type === "video")) {
+    return maxMediaDuration / s.playbackRate;
+  }
   return maxMediaDuration;
 };
 
@@ -36544,14 +36558,14 @@ var calculateTimestampSlots = ({
 };
 var ensureSlots = ({
   filledSlots,
-  visualizationWidth,
+  naturalWidth,
   fromSeconds,
   toSeconds,
   aspectRatio
 }) => {
   const segmentDuration = toSeconds - fromSeconds;
   const timestampTargets = calculateTimestampSlots({
-    visualizationWidth,
+    visualizationWidth: naturalWidth,
     fromSeconds,
     segmentDuration,
     aspectRatio
@@ -36584,7 +36598,7 @@ var drawSlot = ({
 };
 var fillWithCachedFrames = ({
   ctx,
-  visualizationWidth,
+  naturalWidth,
   filledSlots,
   src,
   segmentDuration,
@@ -36619,7 +36633,7 @@ var fillWithCachedFrames = ({
       ctx,
       frame: frame2.frame,
       filledSlots,
-      visualizationWidth,
+      visualizationWidth: naturalWidth,
       timestamp,
       segmentDuration,
       fromSeconds
@@ -36655,7 +36669,14 @@ var fillFrameWhereItFits = ({
     });
   }
 };
-var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames }) => {
+var TimelineVideoInfo = ({
+  src,
+  visualizationWidth,
+  naturalWidth,
+  trimBefore,
+  durationInFrames,
+  playbackRate
+}) => {
   const { fps } = useVideoConfig5();
   const ref = useRef40(null);
   const [error, setError] = useState69(null);
@@ -36683,19 +36704,19 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
     }
     current.appendChild(canvas);
     const filledSlots = new Map;
-    const fromSeconds = startFrom / fps;
-    const toSeconds = (startFrom + durationInFrames) / fps;
+    const fromSeconds = trimBefore / fps;
+    const toSeconds = fromSeconds + durationInFrames * playbackRate / fps;
     if (aspectRatio.current !== null) {
       ensureSlots({
         filledSlots,
-        visualizationWidth,
+        naturalWidth,
         fromSeconds,
         toSeconds,
         aspectRatio: aspectRatio.current
       });
       fillWithCachedFrames({
         ctx,
-        visualizationWidth,
+        naturalWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
@@ -36720,7 +36741,7 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
           filledSlots,
           fromSeconds,
           toSeconds,
-          visualizationWidth,
+          naturalWidth,
           aspectRatio: aspectRatio.current
         });
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -36752,13 +36773,13 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
           filledSlots,
           fromSeconds,
           toSeconds,
-          visualizationWidth,
+          naturalWidth,
           aspectRatio: aspectRatio.current
         });
         fillFrameWhereItFits({
           ctx,
           filledSlots,
-          visualizationWidth,
+          visualizationWidth: naturalWidth,
           frame: transformed,
           segmentDuration: toSeconds - fromSeconds,
           fromSeconds
@@ -36769,7 +36790,7 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
     }).then(() => {
       fillWithCachedFrames({
         ctx,
-        visualizationWidth,
+        naturalWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
@@ -36784,7 +36805,16 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
       controller.abort();
       current.removeChild(canvas);
     };
-  }, [durationInFrames, error, fps, src, startFrom, visualizationWidth]);
+  }, [
+    durationInFrames,
+    error,
+    fps,
+    naturalWidth,
+    playbackRate,
+    src,
+    trimBefore,
+    visualizationWidth
+  ]);
   return /* @__PURE__ */ jsx200("div", {
     ref,
     style: containerStyle3
@@ -36819,7 +36849,7 @@ var Inner4 = ({ s, windowWidth }) => {
   const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
   const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < s.duration && !isInRange;
   const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
-  const { marginLeft, width: width2, premountWidth, postmountWidth } = useMemo107(() => {
+  const { marginLeft, width: width2, naturalWidth, premountWidth, postmountWidth } = useMemo107(() => {
     return getTimelineSequenceLayout({
       durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
@@ -36893,8 +36923,10 @@ var Inner4 = ({ s, windowWidth }) => {
       s.type === "video" ? /* @__PURE__ */ jsx201(TimelineVideoInfo, {
         src: s.src,
         visualizationWidth: width2,
-        startFrom: s.startMediaFrom,
-        durationInFrames: s.duration
+        naturalWidth,
+        trimBefore: s.startMediaFrom,
+        durationInFrames: s.duration,
+        playbackRate: s.playbackRate
       }) : null,
       s.loopDisplay === undefined ? null : /* @__PURE__ */ jsx201(LoopedTimelineIndicator, {
         loops: s.loopDisplay.numberOfTimes

package/dist/esm/internals.mjs

@@ -21135,13 +21135,16 @@ var getTimelineSequenceLayout = ({
   const maxMediaSequenceDuration = (maxMediaDuration ?? Infinity) - startFromMedia;
   const lastFrame = (video.durationInFrames ?? 1) - 1;
   let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+  let naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
   const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
   const shouldAddHalfAFrameAtStart = startFrom > 0;
   if (shouldAddHalfAFrameAtEnd) {
     spatialDuration += 0.5;
+    naturalSpatialDuration += 0.5;
   }
   if (shouldAddHalfAFrameAtStart) {
     spatialDuration += 0.5;
+    naturalSpatialDuration += 0.5;
   }
   const startFromWithOffset = shouldAddHalfAFrameAtStart ? startFrom - 0.5 : startFrom;
   const marginLeft = lastFrame === 0 ? 0 : startFromWithOffset / lastFrame * (windowWidth - TIMELINE_PADDING * 2);
@@ -21153,6 +21156,13 @@ var getTimelineSequenceLayout = ({
     spatialDuration,
     windowWidth
   });
+  const naturalWidth = getWidthOfTrack({
+    durationInFrames,
+    lastFrame,
+    nonNegativeMarginLeft,
+    spatialDuration: naturalSpatialDuration,
+    windowWidth
+  });
   const premountWidth = premountDisplay ? getWidthOfTrack({
     durationInFrames: premountDisplay,
     lastFrame,
@@ -21170,6 +21180,7 @@ var getTimelineSequenceLayout = ({
   return {
     marginLeft: Math.max(marginLeft, 0) - (premountWidth ?? 0),
     width: width + (premountWidth ?? 0) + (postmountWidth ?? 0),
+    naturalWidth: naturalWidth + (premountWidth ?? 0) + (postmountWidth ?? 0),
     premountWidth,
     postmountWidth
   };
@@ -36082,6 +36093,9 @@ var useMaxMediaDuration = (s, fps) => {
       input2.dispose();
     };
   }, [src, fps]);
+  if (maxMediaDuration !== null && (s.type === "audio" || s.type === "video")) {
+    return maxMediaDuration / s.playbackRate;
+  }
   return maxMediaDuration;
 };
 
@@ -36563,14 +36577,14 @@ var calculateTimestampSlots = ({
 };
 var ensureSlots = ({
   filledSlots,
-  visualizationWidth,
+  naturalWidth,
   fromSeconds,
   toSeconds,
   aspectRatio
 }) => {
   const segmentDuration = toSeconds - fromSeconds;
   const timestampTargets = calculateTimestampSlots({
-    visualizationWidth,
+    visualizationWidth: naturalWidth,
     fromSeconds,
     segmentDuration,
     aspectRatio
@@ -36603,7 +36617,7 @@ var drawSlot = ({
 };
 var fillWithCachedFrames = ({
   ctx,
-  visualizationWidth,
+  naturalWidth,
   filledSlots,
   src,
   segmentDuration,
@@ -36638,7 +36652,7 @@ var fillWithCachedFrames = ({
       ctx,
       frame: frame2.frame,
       filledSlots,
-      visualizationWidth,
+      visualizationWidth: naturalWidth,
       timestamp,
       segmentDuration,
       fromSeconds
@@ -36674,7 +36688,14 @@ var fillFrameWhereItFits = ({
     });
   }
 };
-var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames }) => {
+var TimelineVideoInfo = ({
+  src,
+  visualizationWidth,
+  naturalWidth,
+  trimBefore,
+  durationInFrames,
+  playbackRate
+}) => {
   const { fps } = useVideoConfig5();
   const ref = useRef40(null);
   const [error, setError] = useState69(null);
@@ -36702,19 +36723,19 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
     }
     current.appendChild(canvas);
     const filledSlots = new Map;
-    const fromSeconds = startFrom / fps;
-    const toSeconds = (startFrom + durationInFrames) / fps;
+    const fromSeconds = trimBefore / fps;
+    const toSeconds = fromSeconds + durationInFrames * playbackRate / fps;
     if (aspectRatio.current !== null) {
       ensureSlots({
         filledSlots,
-        visualizationWidth,
+        naturalWidth,
         fromSeconds,
         toSeconds,
         aspectRatio: aspectRatio.current
       });
       fillWithCachedFrames({
         ctx,
-        visualizationWidth,
+        naturalWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
@@ -36739,7 +36760,7 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
           filledSlots,
           fromSeconds,
           toSeconds,
-          visualizationWidth,
+          naturalWidth,
           aspectRatio: aspectRatio.current
         });
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -36771,13 +36792,13 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
           filledSlots,
           fromSeconds,
           toSeconds,
-          visualizationWidth,
+          naturalWidth,
           aspectRatio: aspectRatio.current
         });
         fillFrameWhereItFits({
           ctx,
           filledSlots,
-          visualizationWidth,
+          visualizationWidth: naturalWidth,
           frame: transformed,
           segmentDuration: toSeconds - fromSeconds,
           fromSeconds
@@ -36788,7 +36809,7 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
     }).then(() => {
       fillWithCachedFrames({
         ctx,
-        visualizationWidth,
+        naturalWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
@@ -36803,7 +36824,16 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
       controller.abort();
       current.removeChild(canvas);
     };
-  }, [durationInFrames, error, fps, src, startFrom, visualizationWidth]);
+  }, [
+    durationInFrames,
+    error,
+    fps,
+    naturalWidth,
+    playbackRate,
+    src,
+    trimBefore,
+    visualizationWidth
+  ]);
   return /* @__PURE__ */ jsx200("div", {
     ref,
     style: containerStyle3
@@ -36838,7 +36868,7 @@ var Inner4 = ({ s, windowWidth }) => {
   const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
   const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < s.duration && !isInRange;
   const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
-  const { marginLeft, width: width2, premountWidth, postmountWidth } = useMemo107(() => {
+  const { marginLeft, width: width2, naturalWidth, premountWidth, postmountWidth } = useMemo107(() => {
     return getTimelineSequenceLayout({
       durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
@@ -36912,8 +36942,10 @@ var Inner4 = ({ s, windowWidth }) => {
       s.type === "video" ? /* @__PURE__ */ jsx201(TimelineVideoInfo, {
         src: s.src,
         visualizationWidth: width2,
-        startFrom: s.startMediaFrom,
-        durationInFrames: s.duration
+        naturalWidth,
+        trimBefore: s.startMediaFrom,
+        durationInFrames: s.duration,
+        playbackRate: s.playbackRate
       }) : null,
       s.loopDisplay === undefined ? null : /* @__PURE__ */ jsx201(LoopedTimelineIndicator, {
         loops: s.loopDisplay.numberOfTimes

package/dist/esm/previewEntry.mjs

@@ -21415,13 +21415,16 @@ var getTimelineSequenceLayout = ({
   const maxMediaSequenceDuration = (maxMediaDuration ?? Infinity) - startFromMedia;
   const lastFrame = (video.durationInFrames ?? 1) - 1;
   let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+  let naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
   const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
   const shouldAddHalfAFrameAtStart = startFrom > 0;
   if (shouldAddHalfAFrameAtEnd) {
     spatialDuration += 0.5;
+    naturalSpatialDuration += 0.5;
   }
   if (shouldAddHalfAFrameAtStart) {
     spatialDuration += 0.5;
+    naturalSpatialDuration += 0.5;
   }
   const startFromWithOffset = shouldAddHalfAFrameAtStart ? startFrom - 0.5 : startFrom;
   const marginLeft = lastFrame === 0 ? 0 : startFromWithOffset / lastFrame * (windowWidth - TIMELINE_PADDING * 2);
@@ -21433,6 +21436,13 @@ var getTimelineSequenceLayout = ({
     spatialDuration,
     windowWidth
   });
+  const naturalWidth = getWidthOfTrack({
+    durationInFrames,
+    lastFrame,
+    nonNegativeMarginLeft,
+    spatialDuration: naturalSpatialDuration,
+    windowWidth
+  });
   const premountWidth = premountDisplay ? getWidthOfTrack({
     durationInFrames: premountDisplay,
     lastFrame,
@@ -21450,6 +21460,7 @@ var getTimelineSequenceLayout = ({
   return {
     marginLeft: Math.max(marginLeft, 0) - (premountWidth ?? 0),
     width: width + (premountWidth ?? 0) + (postmountWidth ?? 0),
+    naturalWidth: naturalWidth + (premountWidth ?? 0) + (postmountWidth ?? 0),
     premountWidth,
     postmountWidth
   };
@@ -36362,6 +36373,9 @@ var useMaxMediaDuration = (s, fps) => {
       input2.dispose();
     };
   }, [src, fps]);
+  if (maxMediaDuration !== null && (s.type === "audio" || s.type === "video")) {
+    return maxMediaDuration / s.playbackRate;
+  }
   return maxMediaDuration;
 };
 
@@ -36843,14 +36857,14 @@ var calculateTimestampSlots = ({
 };
 var ensureSlots = ({
   filledSlots,
-  visualizationWidth,
+  naturalWidth,
   fromSeconds,
   toSeconds,
   aspectRatio
 }) => {
   const segmentDuration = toSeconds - fromSeconds;
   const timestampTargets = calculateTimestampSlots({
-    visualizationWidth,
+    visualizationWidth: naturalWidth,
     fromSeconds,
     segmentDuration,
     aspectRatio
@@ -36883,7 +36897,7 @@ var drawSlot = ({
 };
 var fillWithCachedFrames = ({
   ctx,
-  visualizationWidth,
+  naturalWidth,
   filledSlots,
   src,
   segmentDuration,
@@ -36918,7 +36932,7 @@ var fillWithCachedFrames = ({
       ctx,
       frame: frame2.frame,
       filledSlots,
-      visualizationWidth,
+      visualizationWidth: naturalWidth,
       timestamp,
       segmentDuration,
       fromSeconds
@@ -36954,7 +36968,14 @@ var fillFrameWhereItFits = ({
     });
   }
 };
-var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames }) => {
+var TimelineVideoInfo = ({
+  src,
+  visualizationWidth,
+  naturalWidth,
+  trimBefore,
+  durationInFrames,
+  playbackRate
+}) => {
   const { fps } = useVideoConfig5();
   const ref = useRef40(null);
   const [error, setError] = useState70(null);
@@ -36982,19 +37003,19 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
     }
     current.appendChild(canvas);
     const filledSlots = new Map;
-    const fromSeconds = startFrom / fps;
-    const toSeconds = (startFrom + durationInFrames) / fps;
+    const fromSeconds = trimBefore / fps;
+    const toSeconds = fromSeconds + durationInFrames * playbackRate / fps;
     if (aspectRatio.current !== null) {
       ensureSlots({
         filledSlots,
-        visualizationWidth,
+        naturalWidth,
         fromSeconds,
         toSeconds,
         aspectRatio: aspectRatio.current
       });
       fillWithCachedFrames({
         ctx,
-        visualizationWidth,
+        naturalWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
@@ -37019,7 +37040,7 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
           filledSlots,
           fromSeconds,
           toSeconds,
-          visualizationWidth,
+          naturalWidth,
           aspectRatio: aspectRatio.current
         });
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -37051,13 +37072,13 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
           filledSlots,
           fromSeconds,
           toSeconds,
-          visualizationWidth,
+          naturalWidth,
           aspectRatio: aspectRatio.current
         });
         fillFrameWhereItFits({
           ctx,
           filledSlots,
-          visualizationWidth,
+          visualizationWidth: naturalWidth,
           frame: transformed,
           segmentDuration: toSeconds - fromSeconds,
           fromSeconds
@@ -37068,7 +37089,7 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
     }).then(() => {
       fillWithCachedFrames({
         ctx,
-        visualizationWidth,
+        naturalWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
@@ -37083,7 +37104,16 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
       controller.abort();
       current.removeChild(canvas);
     };
-  }, [durationInFrames, error, fps, src, startFrom, visualizationWidth]);
+  }, [
+    durationInFrames,
+    error,
+    fps,
+    naturalWidth,
+    playbackRate,
+    src,
+    trimBefore,
+    visualizationWidth
+  ]);
   return /* @__PURE__ */ jsx201("div", {
     ref,
     style: containerStyle3
@@ -37118,7 +37148,7 @@ var Inner4 = ({ s, windowWidth }) => {
   const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
   const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < s.duration && !isInRange;
   const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
-  const { marginLeft, width: width2, premountWidth, postmountWidth } = useMemo107(() => {
+  const { marginLeft, width: width2, naturalWidth, premountWidth, postmountWidth } = useMemo107(() => {
     return getTimelineSequenceLayout({
       durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
@@ -37192,8 +37222,10 @@ var Inner4 = ({ s, windowWidth }) => {
       s.type === "video" ? /* @__PURE__ */ jsx202(TimelineVideoInfo, {
         src: s.src,
         visualizationWidth: width2,
-        startFrom: s.startMediaFrom,
-        durationInFrames: s.duration
+        naturalWidth,
+        trimBefore: s.startMediaFrom,
+        durationInFrames: s.duration,
+        playbackRate: s.playbackRate
       }) : null,
       s.loopDisplay === undefined ? null : /* @__PURE__ */ jsx202(LoopedTimelineIndicator, {
         loops: s.loopDisplay.numberOfTimes

package/dist/esm/renderEntry.mjs

@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-wg48cezw.js").then(({ StudioInternals }) => {
+    import("./chunk-4153e552.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-timeline-sequence-layout.d.ts

@@ -12,6 +12,7 @@ export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom,
 }) => {
     marginLeft: number;
     width: number;
+    naturalWidth: number;
     premountWidth: number | null;
     postmountWidth: number | null;
 };

package/dist/helpers/get-timeline-sequence-layout.js

@@ -15,13 +15,17 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+    // Unclipped spatial duration: without the lastFrame - startFrom constraint
+    let naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
     const shouldAddHalfAFrameAtStart = startFrom > 0;
     if (shouldAddHalfAFrameAtEnd) {
         spatialDuration += 0.5;
+        naturalSpatialDuration += 0.5;
     }
     if (shouldAddHalfAFrameAtStart) {
         spatialDuration += 0.5;
+        naturalSpatialDuration += 0.5;
     }
     const startFromWithOffset = shouldAddHalfAFrameAtStart
         ? startFrom - 0.5
@@ -38,6 +42,13 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
         spatialDuration,
         windowWidth,
     });
+    const naturalWidth = getWidthOfTrack({
+        durationInFrames,
+        lastFrame,
+        nonNegativeMarginLeft,
+        spatialDuration: naturalSpatialDuration,
+        windowWidth,
+    });
     const premountWidth = premountDisplay
         ? getWidthOfTrack({
             durationInFrames: premountDisplay,
@@ -59,6 +70,7 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
     return {
         marginLeft: Math.max(marginLeft, 0) - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
         width: width + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
+        naturalWidth: naturalWidth + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
         premountWidth,
         postmountWidth,
     };

package/dist/helpers/use-max-media-duration.js

@@ -52,6 +52,9 @@ const useMaxMediaDuration = (s, fps) => {
             input.dispose();
         };
     }, [src, fps]);
+    if (maxMediaDuration !== null && (s.type === 'audio' || s.type === 'video')) {
+        return maxMediaDuration / s.playbackRate;
+    }
     return maxMediaDuration;
 };
 exports.useMaxMediaDuration = useMaxMediaDuration;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.420",
+	"version": "4.0.422",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.420",
-		"@remotion/player": "4.0.420",
-		"@remotion/media-utils": "4.0.420",
-		"@remotion/renderer": "4.0.420",
-		"@remotion/web-renderer": "4.0.420",
-		"@remotion/studio-shared": "4.0.420",
-		"@remotion/zod-types": "4.0.420",
+		"remotion": "4.0.422",
+		"@remotion/player": "4.0.422",
+		"@remotion/media-utils": "4.0.422",
+		"@remotion/renderer": "4.0.422",
+		"@remotion/web-renderer": "4.0.422",
+		"@remotion/studio-shared": "4.0.422",
+		"@remotion/zod-types": "4.0.422",
 		"mediabunny": "1.29.0",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.420",
+		"@remotion/eslint-config-internal": "4.0.422",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {