@remotion/timeline-utils 4.0.519 → 4.0.521

package/dist/audio-waveform/audio-waveform-worker-types.d.ts

@@ -2,6 +2,7 @@ export type AudioWaveformWorkerLoadMessage = {
     readonly type: 'load';
     readonly requestId: number;
     readonly src: string;
+    readonly waveformSampleRate: number;
 };
 export type AudioWaveformWorkerIncomingMessage = AudioWaveformWorkerLoadMessage;
 export type AudioWaveformWorkerPeaksMessage = {

package/dist/audio-waveform/load-waveform-peaks.d.ts

@@ -9,5 +9,6 @@ type Progress = {
 type LoadWaveformPeaksOptions = {
     readonly onProgress?: (progress: Progress) => void;
     readonly progressIntervalInMs?: number;
+    readonly waveformSampleRate?: number;
 };
 export declare function loadWaveformPeaks(url: string, signal: AbortSignal, options?: LoadWaveformPeaksOptions): Promise<Float32Array>;

package/dist/audio-waveform/load-waveform-peaks.js

@@ -10,8 +10,13 @@ const waveform_peak_processor_1 = require("./waveform-peak-processor");
 const DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 const peaksCache = new Map();
 async function loadWaveformPeaks(url, signal, options) {
-    var _a, _b;
-    const cached = peaksCache.get(url);
+    var _a, _b, _c;
+    const waveformSampleRate = (_a = options === null || options === void 0 ? void 0 : options.waveformSampleRate) !== null && _a !== void 0 ? _a : constants_1.TARGET_SAMPLE_RATE;
+    if (!Number.isFinite(waveformSampleRate) || waveformSampleRate <= 0) {
+        throw new Error('The waveform sample rate must be a positive number.');
+    }
+    const cacheKey = `${waveformSampleRate}:${url}`;
+    const cached = peaksCache.get(cacheKey);
     if (cached) {
         (0, waveform_peak_processor_1.emitWaveformProgress)({
             peaks: cached,
@@ -39,16 +44,17 @@ async function loadWaveformPeaks(url, signal, options) {
             throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
                 url);
         }
-        const sampleRate = await audioTrack.getSampleRate();
-        const durationInSeconds = (_a = (await audioTrack.getDurationFromMetadata({ skipLiveWait: true }))) !== null && _a !== void 0 ? _a : (await audioTrack.computeDuration({ skipLiveWait: true }));
-        const totalPeaks = Math.ceil(durationInSeconds * constants_1.TARGET_SAMPLE_RATE);
-        const samplesPerPeak = Math.max(1, Math.floor(sampleRate / constants_1.TARGET_SAMPLE_RATE));
+        const audioSampleRate = await audioTrack.getSampleRate();
+        const durationInSeconds = (_b = (await audioTrack.getDurationFromMetadata({ skipLiveWait: true }))) !== null && _b !== void 0 ? _b : (await audioTrack.computeDuration({ skipLiveWait: true }));
+        const totalPeaks = Math.ceil(durationInSeconds * waveformSampleRate);
+        const samplesPerPeak = Math.max(1, Math.floor(audioSampleRate / waveformSampleRate));
         const sink = new mediabunny_1.AudioSampleSink(audioTrack);
         const processor = (0, waveform_peak_processor_1.createWaveformPeakProcessor)({
             totalPeaks,
             samplesPerPeak,
             onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
-            progressIntervalInMs: (_b = options === null || options === void 0 ? void 0 : options.progressIntervalInMs) !== null && _b !== void 0 ? _b : DEFAULT_PROGRESS_INTERVAL_IN_MS,
+            progressIntervalInMs: (_c = options === null || options === void 0 ? void 0 : options.progressIntervalInMs) !== null && _c !== void 0 ? _c : DEFAULT_PROGRESS_INTERVAL_IN_MS *
+                Math.max(1, waveformSampleRate / constants_1.TARGET_SAMPLE_RATE),
             now: () => Date.now(),
         });
         for await (const sample of sink.samples()) {
@@ -85,7 +91,7 @@ async function loadWaveformPeaks(url, signal, options) {
         }
         processor.finalize();
         const { peaks } = processor;
-        peaksCache.set(url, peaks);
+        peaksCache.set(cacheKey, peaks);
         return peaks;
     }
     finally {

package/dist/audio-waveform/slice-visible-waveform-peaks.d.ts

@@ -1,5 +1,5 @@
 import type { TimelineLoopDisplay } from '../loop-display';
-export declare const sliceVisibleWaveformPeaks: ({ displayDurationInFrames, displayOffsetInFrames, durationInFrames, fps, loopDisplay, peaks, playbackRate, startFrom, }: {
+export declare const sliceVisibleWaveformPeaks: ({ displayDurationInFrames, displayOffsetInFrames, durationInFrames, fps, loopDisplay, peaks, playbackRate, startFrom, waveformSampleRate, }: {
     readonly displayDurationInFrames: number;
     readonly displayOffsetInFrames: number;
     readonly durationInFrames: number;
@@ -8,4 +8,5 @@ export declare const sliceVisibleWaveformPeaks: ({ displayDurationInFrames, disp
     readonly peaks: Float32Array<ArrayBufferLike>;
     readonly playbackRate: number;
     readonly startFrom: number;
+    readonly waveformSampleRate?: number | undefined;
 }) => Float32Array<ArrayBufferLike>;

package/dist/audio-waveform/slice-visible-waveform-peaks.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.sliceVisibleWaveformPeaks = void 0;
 const loop_display_1 = require("../loop-display");
 const slice_waveform_peaks_1 = require("./slice-waveform-peaks");
-const sliceVisibleWaveformPeaks = ({ displayDurationInFrames, displayOffsetInFrames, durationInFrames, fps, loopDisplay, peaks, playbackRate, startFrom, }) => {
+const sliceVisibleWaveformPeaks = ({ displayDurationInFrames, displayOffsetInFrames, durationInFrames, fps, loopDisplay, peaks, playbackRate, startFrom, waveformSampleRate, }) => {
     if (!(0, loop_display_1.shouldTileLoopDisplay)(loopDisplay) ||
         loopDisplay.durationInFrames <= 0) {
         return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
@@ -12,6 +12,7 @@ const sliceVisibleWaveformPeaks = ({ displayDurationInFrames, displayOffsetInFra
             peaks,
             playbackRate,
             startFrom: startFrom + displayOffsetInFrames * playbackRate,
+            waveformSampleRate,
         });
     }
     const segments = (0, loop_display_1.getLoopDisplaySegments)({
@@ -28,6 +29,7 @@ const sliceVisibleWaveformPeaks = ({ displayDurationInFrames, displayOffsetInFra
             peaks,
             playbackRate,
             startFrom: startFrom + segment.loopOffsetInFrames * playbackRate,
+            waveformSampleRate,
         });
         parts.push(part);
         totalLength += part.length;

package/dist/audio-waveform/slice-waveform-peaks.d.ts

@@ -1,7 +1,8 @@
-export declare const sliceWaveformPeaks: ({ durationInFrames, fps, peaks, playbackRate, startFrom, }: {
+export declare const sliceWaveformPeaks: ({ durationInFrames, fps, peaks, playbackRate, startFrom, waveformSampleRate, }: {
     readonly peaks: Float32Array<ArrayBufferLike>;
     readonly startFrom: number;
     readonly durationInFrames: number;
     readonly fps: number;
     readonly playbackRate: number;
+    readonly waveformSampleRate?: number | undefined;
 }) => Float32Array<ArrayBufferLike>;

package/dist/audio-waveform/slice-waveform-peaks.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sliceWaveformPeaks = void 0;
 const constants_1 = require("./constants");
-const sliceWaveformPeaks = ({ durationInFrames, fps, peaks, playbackRate, startFrom, }) => {
+const sliceWaveformPeaks = ({ durationInFrames, fps, peaks, playbackRate, startFrom, waveformSampleRate = constants_1.TARGET_SAMPLE_RATE, }) => {
     if (peaks.length === 0) {
         return peaks;
     }
     const startTimeInSeconds = startFrom / fps;
     const durationInSeconds = (durationInFrames / fps) * playbackRate;
-    const startPeakIndex = Math.floor(startTimeInSeconds * constants_1.TARGET_SAMPLE_RATE);
-    const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * constants_1.TARGET_SAMPLE_RATE);
+    const startPeakIndex = Math.floor(startTimeInSeconds * waveformSampleRate);
+    const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * waveformSampleRate);
     if (!Number.isFinite(startPeakIndex) || !Number.isFinite(endPeakIndex)) {
         return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
     }

package/dist/audio-waveform/subscribe-to-waveform-peaks.d.ts

@@ -1,5 +1,6 @@
-export declare const subscribeToWaveformPeaks: ({ src, onPeaks, onError, }: {
+export declare const subscribeToWaveformPeaks: ({ src, waveformSampleRate, onPeaks, onError, }: {
     readonly src: string;
+    readonly waveformSampleRate?: number | undefined;
     readonly onPeaks: (peaks: Float32Array<ArrayBufferLike>, final: boolean) => void;
     readonly onError: (error: Error) => void;
 }) => () => void;

package/dist/audio-waveform/subscribe-to-waveform-peaks.js

@@ -1,21 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToWaveformPeaks = void 0;
+const constants_1 = require("./constants");
 const load_waveform_peaks_1 = require("./load-waveform-peaks");
 const make_audio_waveform_worker_1 = require("./make-audio-waveform-worker");
 // All AudioWaveform instances share one decode worker and one peaks cache,
 // so remounts (timeline virtualization, zoom window cropping) and multiple
 // clips with the same src never re-fetch or re-decode the audio.
 const peaksCache = new Map();
-const inFlightBySrc = new Map();
+const inFlightByCacheKey = new Map();
 const inFlightByRequestId = new Map();
 let worker = null;
 let workerFailed = false;
 let nextRequestId = 0;
 const emitPeaks = (load, peaks, final) => {
     if (final) {
-        peaksCache.set(load.src, peaks);
-        inFlightBySrc.delete(load.src);
+        peaksCache.set(load.cacheKey, peaks);
+        load.latestPeaks = null;
+        inFlightByCacheKey.delete(load.cacheKey);
         if (load.requestId !== null) {
             inFlightByRequestId.delete(load.requestId);
         }
@@ -28,7 +30,7 @@ const emitPeaks = (load, peaks, final) => {
     }
 };
 const emitError = (load, error) => {
-    inFlightBySrc.delete(load.src);
+    inFlightByCacheKey.delete(load.cacheKey);
     if (load.requestId !== null) {
         inFlightByRequestId.delete(load.requestId);
     }
@@ -42,6 +44,7 @@ const startMainThreadLoad = (load) => {
     // decode fills the cache for the next mount.
     const controller = new AbortController();
     (0, load_waveform_peaks_1.loadWaveformPeaks)(load.src, controller.signal, {
+        waveformSampleRate: load.waveformSampleRate,
         onProgress: ({ peaks, final }) => {
             if (final) {
                 return;
@@ -102,14 +105,15 @@ const getOrCreateWorker = () => {
     });
     return worker;
 };
-const subscribeToWaveformPeaks = ({ src, onPeaks, onError, }) => {
-    const cached = peaksCache.get(src);
+const subscribeToWaveformPeaks = ({ src, waveformSampleRate = constants_1.TARGET_SAMPLE_RATE, onPeaks, onError, }) => {
+    const cacheKey = `${waveformSampleRate}:${src}`;
+    const cached = peaksCache.get(cacheKey);
     if (cached) {
         onPeaks(cached, true);
         return () => undefined;
     }
     const listener = { onPeaks, onError };
-    const existing = inFlightBySrc.get(src);
+    const existing = inFlightByCacheKey.get(cacheKey);
     if (existing) {
         existing.listeners.add(listener);
         if (existing.latestPeaks) {
@@ -121,11 +125,13 @@ const subscribeToWaveformPeaks = ({ src, onPeaks, onError, }) => {
     }
     const load = {
         src,
+        cacheKey,
+        waveformSampleRate,
         listeners: new Set([listener]),
         latestPeaks: null,
         requestId: null,
     };
-    inFlightBySrc.set(src, load);
+    inFlightByCacheKey.set(cacheKey, load);
     const workerInstance = getOrCreateWorker();
     if (workerInstance) {
         const requestId = nextRequestId++;
@@ -135,6 +141,7 @@ const subscribeToWaveformPeaks = ({ src, onPeaks, onError, }) => {
             type: 'load',
             requestId,
             src,
+            waveformSampleRate,
         };
         workerInstance.postMessage(message);
     }

package/dist/audio-waveform-worker.js

@@ -26,6 +26,7 @@ self.addEventListener('message', (event) => {
     const message = event.data;
     const controller = new AbortController();
     (0, load_waveform_peaks_1.loadWaveformPeaks)(message.src, controller.signal, {
+        waveformSampleRate: message.waveformSampleRate,
         onProgress: ({ peaks, final }) => {
             if (!final) {
                 postPeaks(message.requestId, peaks, false);

package/dist/esm/audio-waveform-worker.mjs

@@ -103,7 +103,12 @@ var createWaveformPeakProcessor = ({
 var DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 var peaksCache = new Map;
 async function loadWaveformPeaks(url, signal, options) {
-  const cached = peaksCache.get(url);
+  const waveformSampleRate = options?.waveformSampleRate ?? TARGET_SAMPLE_RATE;
+  if (!Number.isFinite(waveformSampleRate) || waveformSampleRate <= 0) {
+    throw new Error("The waveform sample rate must be a positive number.");
+  }
+  const cacheKey = `${waveformSampleRate}:${url}`;
+  const cached = peaksCache.get(cacheKey);
   if (cached) {
     emitWaveformProgress({
       peaks: cached,
@@ -129,16 +134,16 @@ async function loadWaveformPeaks(url, signal, options) {
     if (await audioTrack.isRelativeToUnixEpoch()) {
       throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + url);
     }
-    const sampleRate = await audioTrack.getSampleRate();
+    const audioSampleRate = await audioTrack.getSampleRate();
     const durationInSeconds = await audioTrack.getDurationFromMetadata({ skipLiveWait: true }) ?? await audioTrack.computeDuration({ skipLiveWait: true });
-    const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
-    const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
+    const totalPeaks = Math.ceil(durationInSeconds * waveformSampleRate);
+    const samplesPerPeak = Math.max(1, Math.floor(audioSampleRate / waveformSampleRate));
     const sink = new AudioSampleSink(audioTrack);
     const processor = createWaveformPeakProcessor({
       totalPeaks,
       samplesPerPeak,
       onProgress: options?.onProgress,
-      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS,
+      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS * Math.max(1, waveformSampleRate / TARGET_SAMPLE_RATE),
       now: () => Date.now()
     });
     for await (const sample of sink.samples()) {
@@ -175,7 +180,7 @@ async function loadWaveformPeaks(url, signal, options) {
     }
     processor.finalize();
     const { peaks } = processor;
-    peaksCache.set(url, peaks);
+    peaksCache.set(cacheKey, peaks);
     return peaks;
   } finally {
     input.dispose();
@@ -205,6 +210,7 @@ self.addEventListener("message", (event) => {
   const message = event.data;
   const controller = new AbortController;
   loadWaveformPeaks(message.src, controller.signal, {
+    waveformSampleRate: message.waveformSampleRate,
     onProgress: ({ peaks, final }) => {
       if (!final) {
         postPeaks(message.requestId, peaks, false);

package/dist/esm/index.mjs

@@ -275,7 +275,12 @@ var createWaveformPeakProcessor = ({
 var DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 var peaksCache = new Map;
 async function loadWaveformPeaks(url, signal, options) {
-  const cached = peaksCache.get(url);
+  const waveformSampleRate = options?.waveformSampleRate ?? TARGET_SAMPLE_RATE;
+  if (!Number.isFinite(waveformSampleRate) || waveformSampleRate <= 0) {
+    throw new Error("The waveform sample rate must be a positive number.");
+  }
+  const cacheKey = `${waveformSampleRate}:${url}`;
+  const cached = peaksCache.get(cacheKey);
   if (cached) {
     emitWaveformProgress({
       peaks: cached,
@@ -301,16 +306,16 @@ async function loadWaveformPeaks(url, signal, options) {
     if (await audioTrack.isRelativeToUnixEpoch()) {
       throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + url);
     }
-    const sampleRate = await audioTrack.getSampleRate();
+    const audioSampleRate = await audioTrack.getSampleRate();
     const durationInSeconds = await audioTrack.getDurationFromMetadata({ skipLiveWait: true }) ?? await audioTrack.computeDuration({ skipLiveWait: true });
-    const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
-    const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
+    const totalPeaks = Math.ceil(durationInSeconds * waveformSampleRate);
+    const samplesPerPeak = Math.max(1, Math.floor(audioSampleRate / waveformSampleRate));
     const sink = new AudioSampleSink(audioTrack);
     const processor = createWaveformPeakProcessor({
       totalPeaks,
       samplesPerPeak,
       onProgress: options?.onProgress,
-      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS,
+      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS * Math.max(1, waveformSampleRate / TARGET_SAMPLE_RATE),
       now: () => Date.now()
     });
     for await (const sample of sink.samples()) {
@@ -347,7 +352,7 @@ async function loadWaveformPeaks(url, signal, options) {
     }
     processor.finalize();
     const { peaks } = processor;
-    peaksCache.set(url, peaks);
+    peaksCache.set(cacheKey, peaks);
     return peaks;
   } finally {
     input.dispose();
@@ -359,15 +364,16 @@ var sliceWaveformPeaks = ({
   fps,
   peaks,
   playbackRate,
-  startFrom
+  startFrom,
+  waveformSampleRate = TARGET_SAMPLE_RATE
 }) => {
   if (peaks.length === 0) {
     return peaks;
   }
   const startTimeInSeconds = startFrom / fps;
   const durationInSeconds = durationInFrames / fps * playbackRate;
-  const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
-  const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
+  const startPeakIndex = Math.floor(startTimeInSeconds * waveformSampleRate);
+  const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * waveformSampleRate);
   if (!Number.isFinite(startPeakIndex) || !Number.isFinite(endPeakIndex)) {
     return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
   }
@@ -392,7 +398,8 @@ var sliceVisibleWaveformPeaks = ({
   loopDisplay,
   peaks,
   playbackRate,
-  startFrom
+  startFrom,
+  waveformSampleRate
 }) => {
   if (!shouldTileLoopDisplay(loopDisplay) || loopDisplay.durationInFrames <= 0) {
     return sliceWaveformPeaks({
@@ -400,7 +407,8 @@ var sliceVisibleWaveformPeaks = ({
       fps,
       peaks,
       playbackRate,
-      startFrom: startFrom + displayOffsetInFrames * playbackRate
+      startFrom: startFrom + displayOffsetInFrames * playbackRate,
+      waveformSampleRate
     });
   }
   const segments = getLoopDisplaySegments({
@@ -416,7 +424,8 @@ var sliceVisibleWaveformPeaks = ({
       fps,
       peaks,
       playbackRate,
-      startFrom: startFrom + segment.loopOffsetInFrames * playbackRate
+      startFrom: startFrom + segment.loopOffsetInFrames * playbackRate,
+      waveformSampleRate
     });
     parts.push(part);
     totalLength += part.length;
@@ -441,15 +450,16 @@ var makeAudioWaveformWorker = () => {
 
 // src/audio-waveform/subscribe-to-waveform-peaks.ts
 var peaksCache2 = new Map;
-var inFlightBySrc = new Map;
+var inFlightByCacheKey = new Map;
 var inFlightByRequestId = new Map;
 var worker = null;
 var workerFailed = false;
 var nextRequestId = 0;
 var emitPeaks = (load, peaks, final) => {
   if (final) {
-    peaksCache2.set(load.src, peaks);
-    inFlightBySrc.delete(load.src);
+    peaksCache2.set(load.cacheKey, peaks);
+    load.latestPeaks = null;
+    inFlightByCacheKey.delete(load.cacheKey);
     if (load.requestId !== null) {
       inFlightByRequestId.delete(load.requestId);
     }
@@ -461,7 +471,7 @@ var emitPeaks = (load, peaks, final) => {
   }
 };
 var emitError = (load, error) => {
-  inFlightBySrc.delete(load.src);
+  inFlightByCacheKey.delete(load.cacheKey);
   if (load.requestId !== null) {
     inFlightByRequestId.delete(load.requestId);
   }
@@ -473,6 +483,7 @@ var startMainThreadLoad = (load) => {
   load.requestId = null;
   const controller = new AbortController;
   loadWaveformPeaks(load.src, controller.signal, {
+    waveformSampleRate: load.waveformSampleRate,
     onProgress: ({ peaks, final }) => {
       if (final) {
         return;
@@ -528,10 +539,12 @@ var getOrCreateWorker = () => {
 };
 var subscribeToWaveformPeaks = ({
   src,
+  waveformSampleRate = TARGET_SAMPLE_RATE,
   onPeaks,
   onError
 }) => {
-  const cached = peaksCache2.get(src);
+  const cacheKey = `${waveformSampleRate}:${src}`;
+  const cached = peaksCache2.get(cacheKey);
   if (cached) {
     onPeaks(cached, true);
     return () => {
@@ -539,7 +552,7 @@ var subscribeToWaveformPeaks = ({
     };
   }
   const listener = { onPeaks, onError };
-  const existing = inFlightBySrc.get(src);
+  const existing = inFlightByCacheKey.get(cacheKey);
   if (existing) {
     existing.listeners.add(listener);
     if (existing.latestPeaks) {
@@ -551,11 +564,13 @@ var subscribeToWaveformPeaks = ({
   }
   const load = {
     src,
+    cacheKey,
+    waveformSampleRate,
     listeners: new Set([listener]),
     latestPeaks: null,
     requestId: null
   };
-  inFlightBySrc.set(src, load);
+  inFlightByCacheKey.set(cacheKey, load);
   const workerInstance = getOrCreateWorker();
   if (workerInstance) {
     const requestId = nextRequestId++;
@@ -564,7 +579,8 @@ var subscribeToWaveformPeaks = ({
     const message = {
       type: "load",
       requestId,
-      src
+      src,
+      waveformSampleRate
     };
     workerInstance.postMessage(message);
   } else {
@@ -830,9 +846,8 @@ var drawSlot = ({
   const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
   const frameIndex = relativeTimestamp / durationOfOneFrame;
   const thumbnailWidth = frame.displayWidth / devicePixelRatio;
-  const left = Math.floor(frameIndex * thumbnailWidth);
-  const right = Math.ceil((frameIndex + 1) * thumbnailWidth);
-  ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / devicePixelRatio);
+  const left = frameIndex * thumbnailWidth;
+  ctx.drawImage(frame, left, 0, thumbnailWidth, frame.displayHeight / devicePixelRatio);
   filledSlots.set(timestamp, frame.timestamp);
 };
 var fillWithCachedFrames = ({

package/dist/render-frame-strip.js

@@ -60,9 +60,8 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
     const relativeTimestamp = timestamp - fromSeconds * exports.WEBCODECS_TIMESCALE;
     const frameIndex = relativeTimestamp / durationOfOneFrame;
     const thumbnailWidth = frame.displayWidth / devicePixelRatio;
-    const left = Math.floor(frameIndex * thumbnailWidth);
-    const right = Math.ceil((frameIndex + 1) * thumbnailWidth);
-    ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / devicePixelRatio);
+    const left = frameIndex * thumbnailWidth;
+    ctx.drawImage(frame, left, 0, thumbnailWidth, frame.displayHeight / devicePixelRatio);
     filledSlots.set(timestamp, frame.timestamp);
 };
 exports.drawSlot = drawSlot;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/timeline-utils"
 	},
 	"name": "@remotion/timeline-utils",
-	"version": "4.0.519",
+	"version": "4.0.521",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -21,12 +21,12 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"mediabunny": "1.55.1",
-		"remotion": "4.0.519"
+		"mediabunny": "1.55.5",
+		"remotion": "4.0.521"
 	},
 	"devDependencies": {
-		"@mediabunny/server": "1.55.1",
-		"@remotion/eslint-config-internal": "4.0.519",
+		"@mediabunny/server": "1.55.5",
+		"@remotion/eslint-config-internal": "4.0.521",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},