@remotion/timeline-utils 4.0.512 → 4.0.514

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

@@ -13,6 +13,8 @@ export type AudioWaveformWorkerRenderMessage = {
     readonly volume: WaveformVolume;
     readonly startFrom: number;
     readonly durationInFrames: number;
+    readonly displayOffsetInFrames: number;
+    readonly displayDurationInFrames: number;
     readonly fps: number;
     readonly playbackRate: number;
     readonly loopDisplay: TimelineLoopDisplay | undefined;

package/dist/audio-waveform/get-visible-waveform-volume.d.ts

@@ -0,0 +1,8 @@
+import { type TimelineLoopDisplay } from '../loop-display';
+import type { WaveformVolume } from './draw-peaks';
+export declare const getVisibleWaveformVolume: ({ displayDurationInFrames, displayOffsetInFrames, loopDisplay, volume, }: {
+    readonly displayDurationInFrames: number;
+    readonly displayOffsetInFrames: number;
+    readonly loopDisplay: TimelineLoopDisplay | undefined;
+    readonly volume: WaveformVolume;
+}) => WaveformVolume;

package/dist/audio-waveform/get-visible-waveform-volume.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVisibleWaveformVolume = void 0;
+const loop_display_1 = require("../loop-display");
+const getVisibleWaveformVolume = ({ displayDurationInFrames, displayOffsetInFrames, loopDisplay, volume, }) => {
+    if (!Array.isArray(volume)) {
+        return volume;
+    }
+    if (!Number.isFinite(displayDurationInFrames) ||
+        displayDurationInFrames <= 0) {
+        return [];
+    }
+    if (!(0, loop_display_1.shouldTileLoopDisplay)(loopDisplay) ||
+        loopDisplay.durationInFrames <= 0) {
+        const start = Math.max(0, Math.floor(displayOffsetInFrames));
+        const end = Math.min(volume.length, Math.ceil(displayOffsetInFrames + displayDurationInFrames));
+        return volume.slice(start, end);
+    }
+    const segments = (0, loop_display_1.getLoopDisplaySegments)({
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDurationInFrames: loopDisplay.durationInFrames,
+    });
+    const result = [];
+    for (const segment of segments) {
+        const start = Math.max(0, Math.floor(segment.loopOffsetInFrames));
+        const end = Math.min(volume.length, Math.ceil(segment.loopOffsetInFrames + segment.durationInFrames));
+        // Do not `push(...slice)`: Chrome throws RangeError: Invalid array length
+        // once a loop segment is longer than ~65k frames.
+        for (let index = start; index < end; index++) {
+            result.push(volume[index]);
+        }
+    }
+    return result;
+};
+exports.getVisibleWaveformVolume = getVisibleWaveformVolume;

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

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

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

@@ -0,0 +1,46 @@
+"use strict";
+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, }) => {
+    if (!(0, loop_display_1.shouldTileLoopDisplay)(loopDisplay) ||
+        loopDisplay.durationInFrames <= 0) {
+        return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+            durationInFrames: Math.min(displayDurationInFrames, Math.max(0, durationInFrames - displayOffsetInFrames)),
+            fps,
+            peaks,
+            playbackRate,
+            startFrom: startFrom + displayOffsetInFrames * playbackRate,
+        });
+    }
+    const segments = (0, loop_display_1.getLoopDisplaySegments)({
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDurationInFrames: loopDisplay.durationInFrames,
+    });
+    const parts = [];
+    let totalLength = 0;
+    for (const segment of segments) {
+        const part = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+            durationInFrames: segment.durationInFrames,
+            fps,
+            peaks,
+            playbackRate,
+            startFrom: startFrom + segment.loopOffsetInFrames * playbackRate,
+        });
+        parts.push(part);
+        totalLength += part.length;
+    }
+    if (parts.length === 1) {
+        return parts[0];
+    }
+    const result = new Float32Array(totalLength);
+    let writeOffset = 0;
+    for (const part of parts) {
+        result.set(part, writeOffset);
+        writeOffset += part.length;
+    }
+    return result;
+};
+exports.sliceVisibleWaveformPeaks = sliceVisibleWaveformPeaks;

package/dist/audio-waveform-worker.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const draw_peaks_1 = require("./audio-waveform/draw-peaks");
 const load_waveform_peaks_1 = require("./audio-waveform/load-waveform-peaks");
-const slice_waveform_peaks_1 = require("./audio-waveform/slice-waveform-peaks");
-const loop_display_1 = require("./loop-display");
+const slice_visible_waveform_peaks_1 = require("./audio-waveform/slice-visible-waveform-peaks");
 let canvas = null;
 let currentController = null;
 let latestRequestId = 0;
@@ -21,49 +20,23 @@ const drawPartialWaveform = (message, peaks) => {
     if (!canvas) {
         return;
     }
-    const portionPeaks = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-        durationInFrames: (0, loop_display_1.shouldTileLoopDisplay)(message.loopDisplay)
-            ? message.loopDisplay.durationInFrames
-            : message.durationInFrames,
+    const portionPeaks = (0, slice_visible_waveform_peaks_1.sliceVisibleWaveformPeaks)({
+        displayDurationInFrames: message.displayDurationInFrames,
+        displayOffsetInFrames: message.displayOffsetInFrames,
+        durationInFrames: message.durationInFrames,
         fps: message.fps,
+        loopDisplay: message.loopDisplay,
         peaks,
         playbackRate: message.playbackRate,
         startFrom: message.startFrom,
     });
-    if (!(0, loop_display_1.shouldTileLoopDisplay)(message.loopDisplay)) {
-        (0, draw_peaks_1.drawBars)({
-            canvas,
-            peaks: portionPeaks,
-            color: 'rgba(255, 255, 255, 0.6)',
-            volume: message.volume,
-            width: message.width,
-        });
-        return;
-    }
-    const loopWidth = (0, loop_display_1.getLoopDisplayWidth)({
-        visualizationWidth: message.width,
-        loopDisplay: message.loopDisplay,
-    });
-    const targetCanvas = new OffscreenCanvas(Math.max(1, Math.ceil(loopWidth)), message.height);
     (0, draw_peaks_1.drawBars)({
-        canvas: targetCanvas,
+        canvas,
         peaks: portionPeaks,
         color: 'rgba(255, 255, 255, 0.6)',
         volume: message.volume,
-        width: targetCanvas.width,
+        width: message.width,
     });
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
-    if (!pattern) {
-        return;
-    }
-    pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
-    ctx.clearRect(0, 0, message.width, message.height);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, message.width, message.height);
 };
 const renderWaveform = async (message) => {
     if (!canvas) {

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

@@ -280,6 +280,49 @@ async function loadWaveformPeaks(url, signal, options) {
   }
 }
 
+// src/loop-display.ts
+var shouldTileLoopDisplay = (loopDisplay) => {
+  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+};
+var getLoopDisplaySegments = ({
+  displayDurationInFrames,
+  displayOffsetInFrames,
+  loopDurationInFrames
+}) => {
+  if (!Number.isFinite(displayDurationInFrames) || displayDurationInFrames <= 0 || !Number.isFinite(displayOffsetInFrames) || !Number.isFinite(loopDurationInFrames) || loopDurationInFrames <= 0) {
+    return [];
+  }
+  const displayEndInFrames = displayOffsetInFrames + displayDurationInFrames;
+  const firstLoopIndex = Math.floor(displayOffsetInFrames / loopDurationInFrames);
+  const lastLoopIndex = Math.floor(displayEndInFrames / loopDurationInFrames);
+  const segments = [];
+  for (let loopIndex = firstLoopIndex;loopIndex <= lastLoopIndex; loopIndex++) {
+    const loopStartInFrames = loopIndex * loopDurationInFrames;
+    const segmentStart = Math.max(displayOffsetInFrames, loopStartInFrames);
+    const segmentEnd = Math.min(displayEndInFrames, loopStartInFrames + loopDurationInFrames);
+    const durationInFrames = segmentEnd - segmentStart;
+    if (durationInFrames <= 0) {
+      continue;
+    }
+    segments.push({
+      loopIndex,
+      absoluteOffsetInFrames: segmentStart,
+      loopOffsetInFrames: segmentStart - loopStartInFrames,
+      durationInFrames
+    });
+  }
+  return segments;
+};
+var getLoopDisplayWidth = ({
+  visualizationWidth,
+  loopDisplay
+}) => {
+  if (!shouldTileLoopDisplay(loopDisplay)) {
+    return visualizationWidth;
+  }
+  return visualizationWidth / loopDisplay.numberOfTimes;
+};
+
 // src/audio-waveform/slice-waveform-peaks.ts
 var sliceWaveformPeaks = ({
   durationInFrames,
@@ -310,18 +353,54 @@ var sliceWaveformPeaks = ({
   return portion;
 };
 
-// src/loop-display.ts
-var shouldTileLoopDisplay = (loopDisplay) => {
-  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
-};
-var getLoopDisplayWidth = ({
-  visualizationWidth,
-  loopDisplay
+// src/audio-waveform/slice-visible-waveform-peaks.ts
+var sliceVisibleWaveformPeaks = ({
+  displayDurationInFrames,
+  displayOffsetInFrames,
+  durationInFrames,
+  fps,
+  loopDisplay,
+  peaks,
+  playbackRate,
+  startFrom
 }) => {
-  if (!shouldTileLoopDisplay(loopDisplay)) {
-    return visualizationWidth;
+  if (!shouldTileLoopDisplay(loopDisplay) || loopDisplay.durationInFrames <= 0) {
+    return sliceWaveformPeaks({
+      durationInFrames: Math.min(displayDurationInFrames, Math.max(0, durationInFrames - displayOffsetInFrames)),
+      fps,
+      peaks,
+      playbackRate,
+      startFrom: startFrom + displayOffsetInFrames * playbackRate
+    });
   }
-  return visualizationWidth / loopDisplay.numberOfTimes;
+  const segments = getLoopDisplaySegments({
+    displayDurationInFrames,
+    displayOffsetInFrames,
+    loopDurationInFrames: loopDisplay.durationInFrames
+  });
+  const parts = [];
+  let totalLength = 0;
+  for (const segment of segments) {
+    const part = sliceWaveformPeaks({
+      durationInFrames: segment.durationInFrames,
+      fps,
+      peaks,
+      playbackRate,
+      startFrom: startFrom + segment.loopOffsetInFrames * playbackRate
+    });
+    parts.push(part);
+    totalLength += part.length;
+  }
+  if (parts.length === 1) {
+    return parts[0];
+  }
+  const result = new Float32Array(totalLength);
+  let writeOffset = 0;
+  for (const part of parts) {
+    result.set(part, writeOffset);
+    writeOffset += part.length;
+  }
+  return result;
 };
 
 // src/audio-waveform-worker.ts
@@ -341,47 +420,23 @@ var drawPartialWaveform = (message, peaks) => {
   if (!canvas) {
     return;
   }
-  const portionPeaks = sliceWaveformPeaks({
-    durationInFrames: shouldTileLoopDisplay(message.loopDisplay) ? message.loopDisplay.durationInFrames : message.durationInFrames,
+  const portionPeaks = sliceVisibleWaveformPeaks({
+    displayDurationInFrames: message.displayDurationInFrames,
+    displayOffsetInFrames: message.displayOffsetInFrames,
+    durationInFrames: message.durationInFrames,
     fps: message.fps,
+    loopDisplay: message.loopDisplay,
     peaks,
     playbackRate: message.playbackRate,
     startFrom: message.startFrom
   });
-  if (!shouldTileLoopDisplay(message.loopDisplay)) {
-    drawBars({
-      canvas,
-      peaks: portionPeaks,
-      color: "rgba(255, 255, 255, 0.6)",
-      volume: message.volume,
-      width: message.width
-    });
-    return;
-  }
-  const loopWidth = getLoopDisplayWidth({
-    visualizationWidth: message.width,
-    loopDisplay: message.loopDisplay
-  });
-  const targetCanvas = new OffscreenCanvas(Math.max(1, Math.ceil(loopWidth)), message.height);
   drawBars({
-    canvas: targetCanvas,
+    canvas,
     peaks: portionPeaks,
     color: "rgba(255, 255, 255, 0.6)",
     volume: message.volume,
-    width: targetCanvas.width
+    width: message.width
   });
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
-  }
-  const pattern = ctx.createPattern(targetCanvas, "repeat-x");
-  if (!pattern) {
-    return;
-  }
-  pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
-  ctx.clearRect(0, 0, message.width, message.height);
-  ctx.fillStyle = pattern;
-  ctx.fillRect(0, 0, message.width, message.height);
 };
 var renderWaveform = async (message) => {
   if (!canvas) {

package/dist/esm/index.mjs

@@ -97,6 +97,82 @@ var drawBars = ({
   }
   ctx.putImageData(imageData, 0, 0);
 };
+// src/loop-display.ts
+var shouldTileLoopDisplay = (loopDisplay) => {
+  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+};
+var getLoopDisplaySegments = ({
+  displayDurationInFrames,
+  displayOffsetInFrames,
+  loopDurationInFrames
+}) => {
+  if (!Number.isFinite(displayDurationInFrames) || displayDurationInFrames <= 0 || !Number.isFinite(displayOffsetInFrames) || !Number.isFinite(loopDurationInFrames) || loopDurationInFrames <= 0) {
+    return [];
+  }
+  const displayEndInFrames = displayOffsetInFrames + displayDurationInFrames;
+  const firstLoopIndex = Math.floor(displayOffsetInFrames / loopDurationInFrames);
+  const lastLoopIndex = Math.floor(displayEndInFrames / loopDurationInFrames);
+  const segments = [];
+  for (let loopIndex = firstLoopIndex;loopIndex <= lastLoopIndex; loopIndex++) {
+    const loopStartInFrames = loopIndex * loopDurationInFrames;
+    const segmentStart = Math.max(displayOffsetInFrames, loopStartInFrames);
+    const segmentEnd = Math.min(displayEndInFrames, loopStartInFrames + loopDurationInFrames);
+    const durationInFrames = segmentEnd - segmentStart;
+    if (durationInFrames <= 0) {
+      continue;
+    }
+    segments.push({
+      loopIndex,
+      absoluteOffsetInFrames: segmentStart,
+      loopOffsetInFrames: segmentStart - loopStartInFrames,
+      durationInFrames
+    });
+  }
+  return segments;
+};
+var getLoopDisplayWidth = ({
+  visualizationWidth,
+  loopDisplay
+}) => {
+  if (!shouldTileLoopDisplay(loopDisplay)) {
+    return visualizationWidth;
+  }
+  return visualizationWidth / loopDisplay.numberOfTimes;
+};
+
+// src/audio-waveform/get-visible-waveform-volume.ts
+var getVisibleWaveformVolume = ({
+  displayDurationInFrames,
+  displayOffsetInFrames,
+  loopDisplay,
+  volume
+}) => {
+  if (!Array.isArray(volume)) {
+    return volume;
+  }
+  if (!Number.isFinite(displayDurationInFrames) || displayDurationInFrames <= 0) {
+    return [];
+  }
+  if (!shouldTileLoopDisplay(loopDisplay) || loopDisplay.durationInFrames <= 0) {
+    const start = Math.max(0, Math.floor(displayOffsetInFrames));
+    const end = Math.min(volume.length, Math.ceil(displayOffsetInFrames + displayDurationInFrames));
+    return volume.slice(start, end);
+  }
+  const segments = getLoopDisplaySegments({
+    displayDurationInFrames,
+    displayOffsetInFrames,
+    loopDurationInFrames: loopDisplay.durationInFrames
+  });
+  const result = [];
+  for (const segment of segments) {
+    const start = Math.max(0, Math.floor(segment.loopOffsetInFrames));
+    const end = Math.min(volume.length, Math.ceil(segment.loopOffsetInFrames + segment.durationInFrames));
+    for (let index = start;index < end; index++) {
+      result.push(volume[index]);
+    }
+  }
+  return result;
+};
 // src/audio-waveform/load-waveform-peaks.ts
 import { ALL_FORMATS, AudioSampleSink, Input, UrlSource } from "mediabunny";
 
@@ -312,70 +388,55 @@ var sliceWaveformPeaks = ({
   }
   return portion;
 };
-// src/image-thumbnail/get-scaled-image-thumbnail-dimensions.ts
-var getScaledImageThumbnailDimensions = ({
-  naturalWidth,
-  naturalHeight,
-  canvasHeight
-}) => {
-  if (naturalWidth === 0 || naturalHeight === 0 || canvasHeight === 0) {
-    return {
-      scaledWidth: 0,
-      scaledHeight: 0
-    };
-  }
-  const scale = canvasHeight / naturalHeight;
-  return {
-    scaledWidth: naturalWidth * scale,
-    scaledHeight: canvasHeight
-  };
-};
 
-// src/image-thumbnail/draw-repeating-image-thumbnail.ts
-var createOffscreenCanvas = (width, height) => {
-  if (typeof document !== "undefined") {
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    return canvas;
-  }
-  if (typeof OffscreenCanvas !== "undefined") {
-    return new OffscreenCanvas(width, height);
-  }
-  throw new Error("No canvas implementation available");
-};
-var drawRepeatingImageThumbnail = ({
-  canvas,
-  image
+// src/audio-waveform/slice-visible-waveform-peaks.ts
+var sliceVisibleWaveformPeaks = ({
+  displayDurationInFrames,
+  displayOffsetInFrames,
+  durationInFrames,
+  fps,
+  loopDisplay,
+  peaks,
+  playbackRate,
+  startFrom
 }) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
-  }
-  const { width, height } = canvas;
-  if (width === 0 || height === 0) {
-    return;
+  if (!shouldTileLoopDisplay(loopDisplay) || loopDisplay.durationInFrames <= 0) {
+    return sliceWaveformPeaks({
+      durationInFrames: Math.min(displayDurationInFrames, Math.max(0, durationInFrames - displayOffsetInFrames)),
+      fps,
+      peaks,
+      playbackRate,
+      startFrom: startFrom + displayOffsetInFrames * playbackRate
+    });
   }
-  const { scaledWidth, scaledHeight } = getScaledImageThumbnailDimensions({
-    naturalWidth: image.naturalWidth,
-    naturalHeight: image.naturalHeight,
-    canvasHeight: height
+  const segments = getLoopDisplaySegments({
+    displayDurationInFrames,
+    displayOffsetInFrames,
+    loopDurationInFrames: loopDisplay.durationInFrames
   });
-  if (scaledWidth === 0 || scaledHeight === 0) {
-    return;
+  const parts = [];
+  let totalLength = 0;
+  for (const segment of segments) {
+    const part = sliceWaveformPeaks({
+      durationInFrames: segment.durationInFrames,
+      fps,
+      peaks,
+      playbackRate,
+      startFrom: startFrom + segment.loopOffsetInFrames * playbackRate
+    });
+    parts.push(part);
+    totalLength += part.length;
   }
-  const offscreen = createOffscreenCanvas(scaledWidth, scaledHeight);
-  const offCtx = offscreen.getContext("2d");
-  if (!offCtx) {
-    throw new Error("Failed to get offscreen canvas context");
+  if (parts.length === 1) {
+    return parts[0];
   }
-  offCtx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
-  const pattern = ctx.createPattern(offscreen, "repeat-x");
-  if (!pattern) {
-    return;
+  const result = new Float32Array(totalLength);
+  let writeOffset = 0;
+  for (const part of parts) {
+    result.set(part, writeOffset);
+    writeOffset += part.length;
   }
-  ctx.fillStyle = pattern;
-  ctx.fillRect(0, 0, width, height);
+  return result;
 };
 // src/clamp-timestamps-to-duration.ts
 var LAST_FRAME_EPSILON_IN_SECONDS = 1 / 1e6;
@@ -540,18 +601,72 @@ var addFrameToCache = (key, frame) => {
   });
   evictLRU();
 };
-// src/loop-display.ts
-var shouldTileLoopDisplay = (loopDisplay) => {
-  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+// src/image-thumbnail/get-scaled-image-thumbnail-dimensions.ts
+var getScaledImageThumbnailDimensions = ({
+  naturalWidth,
+  naturalHeight,
+  canvasHeight
+}) => {
+  if (naturalWidth === 0 || naturalHeight === 0 || canvasHeight === 0) {
+    return {
+      scaledWidth: 0,
+      scaledHeight: 0
+    };
+  }
+  const scale = canvasHeight / naturalHeight;
+  return {
+    scaledWidth: naturalWidth * scale,
+    scaledHeight: canvasHeight
+  };
 };
-var getLoopDisplayWidth = ({
-  visualizationWidth,
-  loopDisplay
+
+// src/image-thumbnail/draw-repeating-image-thumbnail.ts
+var createOffscreenCanvas = (width, height) => {
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  }
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(width, height);
+  }
+  throw new Error("No canvas implementation available");
+};
+var drawRepeatingImageThumbnail = ({
+  canvas,
+  image,
+  offsetInPixels = 0
 }) => {
-  if (!shouldTileLoopDisplay(loopDisplay)) {
-    return visualizationWidth;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
   }
-  return visualizationWidth / loopDisplay.numberOfTimes;
+  const { width, height } = canvas;
+  if (width === 0 || height === 0) {
+    return;
+  }
+  const { scaledWidth, scaledHeight } = getScaledImageThumbnailDimensions({
+    naturalWidth: image.naturalWidth,
+    naturalHeight: image.naturalHeight,
+    canvasHeight: height
+  });
+  if (scaledWidth === 0 || scaledHeight === 0) {
+    return;
+  }
+  const offscreen = createOffscreenCanvas(scaledWidth, scaledHeight);
+  const offCtx = offscreen.getContext("2d");
+  if (!offCtx) {
+    throw new Error("Failed to get offscreen canvas context");
+  }
+  offCtx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
+  const pattern = ctx.createPattern(offscreen, "repeat-x");
+  if (!pattern) {
+    return;
+  }
+  pattern.setTransform(new DOMMatrix().translate(-offsetInPixels, 0));
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, 0, width, height);
 };
 // src/render-frame-strip.ts
 var WEBCODECS_TIMESCALE = 1e6;
@@ -892,15 +1007,18 @@ var renderFrameStripToCanvas = async ({
 };
 export {
   sliceWaveformPeaks,
+  sliceVisibleWaveformPeaks,
   shouldTileLoopDisplay,
   resizeVideoFrame,
   renderFrameStripToCanvas,
   makeFrameDatabaseKey,
   makeAudioWaveformWorker,
   loadWaveformPeaks,
+  getVisibleWaveformVolume,
   getTimestampFromFrameDatabaseKey,
   getScaledImageThumbnailDimensions,
   getLoopDisplayWidth,
+  getLoopDisplaySegments,
   getFrameDatabaseKeyPrefix,
   getDurationOfOneFrame,
   getAspectRatioFromCache,

package/dist/image-thumbnail/draw-repeating-image-thumbnail.d.ts

@@ -2,8 +2,9 @@ type ImageWithNaturalDimensions = CanvasImageSource & {
     readonly naturalWidth: number;
     readonly naturalHeight: number;
 };
-export declare const drawRepeatingImageThumbnail: ({ canvas, image, }: {
+export declare const drawRepeatingImageThumbnail: ({ canvas, image, offsetInPixels, }: {
     readonly canvas: HTMLCanvasElement | OffscreenCanvas;
     readonly image: ImageWithNaturalDimensions;
+    readonly offsetInPixels?: number | undefined;
 }) => void;
 export {};

package/dist/image-thumbnail/draw-repeating-image-thumbnail.js

@@ -14,7 +14,7 @@ const createOffscreenCanvas = (width, height) => {
     }
     throw new Error('No canvas implementation available');
 };
-const drawRepeatingImageThumbnail = ({ canvas, image, }) => {
+const drawRepeatingImageThumbnail = ({ canvas, image, offsetInPixels = 0, }) => {
     const ctx = canvas.getContext('2d');
     if (!ctx) {
         throw new Error('Failed to get canvas context');
@@ -41,6 +41,7 @@ const drawRepeatingImageThumbnail = ({ canvas, image, }) => {
     if (!pattern) {
         return;
     }
+    pattern.setTransform(new DOMMatrix().translate(-offsetInPixels, 0));
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, width, height);
 };

package/dist/index.d.ts

@@ -1,20 +1,22 @@
 export type { AudioWaveformWorkerIncomingMessage, AudioWaveformWorkerOutgoingMessage, AudioWaveformWorkerRenderMessage, } from './audio-waveform/audio-waveform-worker-types';
 export { TARGET_SAMPLE_RATE } from './audio-waveform/constants';
 export { drawBars, type WaveformVolume } from './audio-waveform/draw-peaks';
+export { getVisibleWaveformVolume } from './audio-waveform/get-visible-waveform-volume';
 export { loadWaveformPeaks } from './audio-waveform/load-waveform-peaks';
 export { makeAudioWaveformWorker } from './audio-waveform/make-audio-waveform-worker';
+export { sliceVisibleWaveformPeaks } from './audio-waveform/slice-visible-waveform-peaks';
 export { sliceWaveformPeaks } from './audio-waveform/slice-waveform-peaks';
 export { createWaveformPeakProcessor, emitWaveformProgress, } from './audio-waveform/waveform-peak-processor';
-export { drawRepeatingImageThumbnail } from './image-thumbnail/draw-repeating-image-thumbnail';
-export { getScaledImageThumbnailDimensions } from './image-thumbnail/get-scaled-image-thumbnail-dimensions';
 export { clampTimestampsToDuration } from './clamp-timestamps-to-duration';
 export { extractFrames } from './extract-frames';
 export type { ExtractFramesProps, ExtractFramesTimestampsInSecondsFn, } from './extract-frames';
 export { addFrameToCache, aspectRatioCache, frameDatabase, getAspectRatioFromCache, getFrameDatabaseKeyPrefix, getTimestampFromFrameDatabaseKey, makeFrameDatabaseKey, } from './frame-database';
 export type { FrameDatabaseKey } from './frame-database';
-export { getLoopDisplayWidth, shouldTileLoopDisplay } from './loop-display';
-export type { TimelineLoopDisplay } from './loop-display';
-export { calculateTimestampSlots, drawSlot, ensureSlots, fillFrameWhereItFits, fillWithCachedFrames, getDurationOfOneFrame, WEBCODECS_TIMESCALE, } from './render-frame-strip';
+export { drawRepeatingImageThumbnail } from './image-thumbnail/draw-repeating-image-thumbnail';
+export { getScaledImageThumbnailDimensions } from './image-thumbnail/get-scaled-image-thumbnail-dimensions';
+export { getLoopDisplaySegments, getLoopDisplayWidth, shouldTileLoopDisplay, } from './loop-display';
+export type { LoopDisplaySegment, TimelineLoopDisplay } from './loop-display';
+export { WEBCODECS_TIMESCALE, calculateTimestampSlots, drawSlot, ensureSlots, fillFrameWhereItFits, fillWithCachedFrames, getDurationOfOneFrame, } from './render-frame-strip';
 export { renderFrameStripToCanvas } from './render-frame-strip-to-canvas';
 export type { RenderFrameStripToCanvasOptions } from './render-frame-strip-to-canvas';
 export { resizeVideoFrame } from './resize-video-frame';

package/dist/index.js

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resizeVideoFrame = exports.renderFrameStripToCanvas = exports.WEBCODECS_TIMESCALE = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.clampTimestampsToDuration = exports.getScaledImageThumbnailDimensions = exports.drawRepeatingImageThumbnail = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.makeAudioWaveformWorker = exports.loadWaveformPeaks = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
+exports.resizeVideoFrame = exports.renderFrameStripToCanvas = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.WEBCODECS_TIMESCALE = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.getLoopDisplaySegments = exports.getScaledImageThumbnailDimensions = exports.drawRepeatingImageThumbnail = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.clampTimestampsToDuration = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.sliceVisibleWaveformPeaks = exports.makeAudioWaveformWorker = exports.loadWaveformPeaks = exports.getVisibleWaveformVolume = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
 const constants_1 = require("./audio-waveform/constants");
 Object.defineProperty(exports, "TARGET_SAMPLE_RATE", { enumerable: true, get: function () { return constants_1.TARGET_SAMPLE_RATE; } });
 const draw_peaks_1 = require("./audio-waveform/draw-peaks");
 Object.defineProperty(exports, "drawBars", { enumerable: true, get: function () { return draw_peaks_1.drawBars; } });
+const get_visible_waveform_volume_1 = require("./audio-waveform/get-visible-waveform-volume");
+Object.defineProperty(exports, "getVisibleWaveformVolume", { enumerable: true, get: function () { return get_visible_waveform_volume_1.getVisibleWaveformVolume; } });
 const load_waveform_peaks_1 = require("./audio-waveform/load-waveform-peaks");
 Object.defineProperty(exports, "loadWaveformPeaks", { enumerable: true, get: function () { return load_waveform_peaks_1.loadWaveformPeaks; } });
 const make_audio_waveform_worker_1 = require("./audio-waveform/make-audio-waveform-worker");
 Object.defineProperty(exports, "makeAudioWaveformWorker", { enumerable: true, get: function () { return make_audio_waveform_worker_1.makeAudioWaveformWorker; } });
+const slice_visible_waveform_peaks_1 = require("./audio-waveform/slice-visible-waveform-peaks");
+Object.defineProperty(exports, "sliceVisibleWaveformPeaks", { enumerable: true, get: function () { return slice_visible_waveform_peaks_1.sliceVisibleWaveformPeaks; } });
 const slice_waveform_peaks_1 = require("./audio-waveform/slice-waveform-peaks");
 Object.defineProperty(exports, "sliceWaveformPeaks", { enumerable: true, get: function () { return slice_waveform_peaks_1.sliceWaveformPeaks; } });
 const waveform_peak_processor_1 = require("./audio-waveform/waveform-peak-processor");
 Object.defineProperty(exports, "createWaveformPeakProcessor", { enumerable: true, get: function () { return waveform_peak_processor_1.createWaveformPeakProcessor; } });
 Object.defineProperty(exports, "emitWaveformProgress", { enumerable: true, get: function () { return waveform_peak_processor_1.emitWaveformProgress; } });
-const draw_repeating_image_thumbnail_1 = require("./image-thumbnail/draw-repeating-image-thumbnail");
-Object.defineProperty(exports, "drawRepeatingImageThumbnail", { enumerable: true, get: function () { return draw_repeating_image_thumbnail_1.drawRepeatingImageThumbnail; } });
-const get_scaled_image_thumbnail_dimensions_1 = require("./image-thumbnail/get-scaled-image-thumbnail-dimensions");
-Object.defineProperty(exports, "getScaledImageThumbnailDimensions", { enumerable: true, get: function () { return get_scaled_image_thumbnail_dimensions_1.getScaledImageThumbnailDimensions; } });
 const clamp_timestamps_to_duration_1 = require("./clamp-timestamps-to-duration");
 Object.defineProperty(exports, "clampTimestampsToDuration", { enumerable: true, get: function () { return clamp_timestamps_to_duration_1.clampTimestampsToDuration; } });
 const extract_frames_1 = require("./extract-frames");
@@ -30,17 +30,22 @@ Object.defineProperty(exports, "getAspectRatioFromCache", { enumerable: true, ge
 Object.defineProperty(exports, "getFrameDatabaseKeyPrefix", { enumerable: true, get: function () { return frame_database_1.getFrameDatabaseKeyPrefix; } });
 Object.defineProperty(exports, "getTimestampFromFrameDatabaseKey", { enumerable: true, get: function () { return frame_database_1.getTimestampFromFrameDatabaseKey; } });
 Object.defineProperty(exports, "makeFrameDatabaseKey", { enumerable: true, get: function () { return frame_database_1.makeFrameDatabaseKey; } });
+const draw_repeating_image_thumbnail_1 = require("./image-thumbnail/draw-repeating-image-thumbnail");
+Object.defineProperty(exports, "drawRepeatingImageThumbnail", { enumerable: true, get: function () { return draw_repeating_image_thumbnail_1.drawRepeatingImageThumbnail; } });
+const get_scaled_image_thumbnail_dimensions_1 = require("./image-thumbnail/get-scaled-image-thumbnail-dimensions");
+Object.defineProperty(exports, "getScaledImageThumbnailDimensions", { enumerable: true, get: function () { return get_scaled_image_thumbnail_dimensions_1.getScaledImageThumbnailDimensions; } });
 const loop_display_1 = require("./loop-display");
+Object.defineProperty(exports, "getLoopDisplaySegments", { enumerable: true, get: function () { return loop_display_1.getLoopDisplaySegments; } });
 Object.defineProperty(exports, "getLoopDisplayWidth", { enumerable: true, get: function () { return loop_display_1.getLoopDisplayWidth; } });
 Object.defineProperty(exports, "shouldTileLoopDisplay", { enumerable: true, get: function () { return loop_display_1.shouldTileLoopDisplay; } });
 const render_frame_strip_1 = require("./render-frame-strip");
+Object.defineProperty(exports, "WEBCODECS_TIMESCALE", { enumerable: true, get: function () { return render_frame_strip_1.WEBCODECS_TIMESCALE; } });
 Object.defineProperty(exports, "calculateTimestampSlots", { enumerable: true, get: function () { return render_frame_strip_1.calculateTimestampSlots; } });
 Object.defineProperty(exports, "drawSlot", { enumerable: true, get: function () { return render_frame_strip_1.drawSlot; } });
 Object.defineProperty(exports, "ensureSlots", { enumerable: true, get: function () { return render_frame_strip_1.ensureSlots; } });
 Object.defineProperty(exports, "fillFrameWhereItFits", { enumerable: true, get: function () { return render_frame_strip_1.fillFrameWhereItFits; } });
 Object.defineProperty(exports, "fillWithCachedFrames", { enumerable: true, get: function () { return render_frame_strip_1.fillWithCachedFrames; } });
 Object.defineProperty(exports, "getDurationOfOneFrame", { enumerable: true, get: function () { return render_frame_strip_1.getDurationOfOneFrame; } });
-Object.defineProperty(exports, "WEBCODECS_TIMESCALE", { enumerable: true, get: function () { return render_frame_strip_1.WEBCODECS_TIMESCALE; } });
 const render_frame_strip_to_canvas_1 = require("./render-frame-strip-to-canvas");
 Object.defineProperty(exports, "renderFrameStripToCanvas", { enumerable: true, get: function () { return render_frame_strip_to_canvas_1.renderFrameStripToCanvas; } });
 const resize_video_frame_1 = require("./resize-video-frame");

package/dist/loop-display.d.ts

@@ -4,6 +4,17 @@ export type TimelineLoopDisplay = {
     startOffset: number;
 };
 export declare const shouldTileLoopDisplay: (loopDisplay: TimelineLoopDisplay | undefined) => loopDisplay is TimelineLoopDisplay;
+export type LoopDisplaySegment = {
+    loopIndex: number;
+    absoluteOffsetInFrames: number;
+    loopOffsetInFrames: number;
+    durationInFrames: number;
+};
+export declare const getLoopDisplaySegments: ({ displayDurationInFrames, displayOffsetInFrames, loopDurationInFrames, }: {
+    readonly displayDurationInFrames: number;
+    readonly displayOffsetInFrames: number;
+    readonly loopDurationInFrames: number;
+}) => LoopDisplaySegment[];
 export declare const getLoopDisplayWidth: ({ visualizationWidth, loopDisplay, }: {
     visualizationWidth: number;
     loopDisplay: TimelineLoopDisplay | undefined;

package/dist/loop-display.js

@@ -1,10 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLoopDisplayWidth = exports.shouldTileLoopDisplay = void 0;
+exports.getLoopDisplayWidth = exports.getLoopDisplaySegments = exports.shouldTileLoopDisplay = void 0;
 const shouldTileLoopDisplay = (loopDisplay) => {
     return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
 };
 exports.shouldTileLoopDisplay = shouldTileLoopDisplay;
+// Computes the visible loop segments by loop index instead of accumulating
+// floating-point segment durations. With fractional display offsets (e.g. from
+// horizontal timeline virtualization), an accumulating `processed += segment`
+// loop can stall once the residue is smaller than the ULP of `processed`,
+// growing arrays unboundedly until the tab runs out of memory.
+const getLoopDisplaySegments = ({ displayDurationInFrames, displayOffsetInFrames, loopDurationInFrames, }) => {
+    if (!Number.isFinite(displayDurationInFrames) ||
+        displayDurationInFrames <= 0 ||
+        !Number.isFinite(displayOffsetInFrames) ||
+        !Number.isFinite(loopDurationInFrames) ||
+        loopDurationInFrames <= 0) {
+        return [];
+    }
+    const displayEndInFrames = displayOffsetInFrames + displayDurationInFrames;
+    const firstLoopIndex = Math.floor(displayOffsetInFrames / loopDurationInFrames);
+    const lastLoopIndex = Math.floor(displayEndInFrames / loopDurationInFrames);
+    const segments = [];
+    for (let loopIndex = firstLoopIndex; loopIndex <= lastLoopIndex; loopIndex++) {
+        const loopStartInFrames = loopIndex * loopDurationInFrames;
+        const segmentStart = Math.max(displayOffsetInFrames, loopStartInFrames);
+        const segmentEnd = Math.min(displayEndInFrames, loopStartInFrames + loopDurationInFrames);
+        const durationInFrames = segmentEnd - segmentStart;
+        if (durationInFrames <= 0) {
+            continue;
+        }
+        segments.push({
+            loopIndex,
+            absoluteOffsetInFrames: segmentStart,
+            loopOffsetInFrames: segmentStart - loopStartInFrames,
+            durationInFrames,
+        });
+    }
+    return segments;
+};
+exports.getLoopDisplaySegments = getLoopDisplaySegments;
 const getLoopDisplayWidth = ({ visualizationWidth, loopDisplay, }) => {
     if (!(0, exports.shouldTileLoopDisplay)(loopDisplay)) {
         return visualizationWidth;

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.512",
+	"version": "4.0.514",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -21,11 +21,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"mediabunny": "1.50.8"
+		"mediabunny": "1.55.1"
 	},
 	"devDependencies": {
-		"@mediabunny/server": "1.50.8",
-		"@remotion/eslint-config-internal": "4.0.512",
+		"@mediabunny/server": "1.55.1",
+		"@remotion/eslint-config-internal": "4.0.514",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},