@remotion/timeline-utils 4.0.513 → 4.0.515

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";
 
@@ -277,12 +353,6 @@ async function loadWaveformPeaks(url, signal, options) {
     input.dispose();
   }
 }
-// src/audio-waveform/make-audio-waveform-worker.ts
-var makeAudioWaveformWorker = () => {
-  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
-    type: "module"
-  });
-};
 // src/audio-waveform/slice-waveform-peaks.ts
 var sliceWaveformPeaks = ({
   durationInFrames,
@@ -312,70 +382,197 @@ var sliceWaveformPeaks = ({
   }
   return portion;
 };
-// src/image-thumbnail/get-scaled-image-thumbnail-dimensions.ts
-var getScaledImageThumbnailDimensions = ({
-  naturalWidth,
-  naturalHeight,
-  canvasHeight
+
+// src/audio-waveform/slice-visible-waveform-peaks.ts
+var sliceVisibleWaveformPeaks = ({
+  displayDurationInFrames,
+  displayOffsetInFrames,
+  durationInFrames,
+  fps,
+  loopDisplay,
+  peaks,
+  playbackRate,
+  startFrom
 }) => {
-  if (naturalWidth === 0 || naturalHeight === 0 || canvasHeight === 0) {
-    return {
-      scaledWidth: 0,
-      scaledHeight: 0
-    };
+  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 scale = canvasHeight / naturalHeight;
-  return {
-    scaledWidth: naturalWidth * scale,
-    scaledHeight: canvasHeight
-  };
+  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/make-audio-waveform-worker.ts
+var makeAudioWaveformWorker = () => {
+  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
+    type: "module"
+  });
 };
 
-// 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;
+// src/audio-waveform/subscribe-to-waveform-peaks.ts
+var peaksCache2 = new Map;
+var inFlightBySrc = 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);
+    if (load.requestId !== null) {
+      inFlightByRequestId.delete(load.requestId);
+    }
+  } else {
+    load.latestPeaks = peaks;
   }
-  if (typeof OffscreenCanvas !== "undefined") {
-    return new OffscreenCanvas(width, height);
+  for (const listener of load.listeners) {
+    listener.onPeaks(peaks, final);
   }
-  throw new Error("No canvas implementation available");
 };
-var drawRepeatingImageThumbnail = ({
-  canvas,
-  image
-}) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
+var emitError = (load, error) => {
+  inFlightBySrc.delete(load.src);
+  if (load.requestId !== null) {
+    inFlightByRequestId.delete(load.requestId);
   }
-  const { width, height } = canvas;
-  if (width === 0 || height === 0) {
-    return;
+  for (const listener of load.listeners) {
+    listener.onError(error);
   }
-  const { scaledWidth, scaledHeight } = getScaledImageThumbnailDimensions({
-    naturalWidth: image.naturalWidth,
-    naturalHeight: image.naturalHeight,
-    canvasHeight: height
+};
+var startMainThreadLoad = (load) => {
+  load.requestId = null;
+  const controller = new AbortController;
+  loadWaveformPeaks(load.src, controller.signal, {
+    onProgress: ({ peaks, final }) => {
+      if (final) {
+        return;
+      }
+      emitPeaks(load, peaks.slice(), false);
+    }
+  }).then((peaks) => {
+    emitPeaks(load, peaks, true);
+  }).catch((error) => {
+    emitError(load, error instanceof Error ? error : new Error("Failed to load waveform peaks"));
   });
-  if (scaledWidth === 0 || scaledHeight === 0) {
-    return;
+};
+var handleWorkerFailure = () => {
+  workerFailed = true;
+  worker?.terminate();
+  worker = null;
+  const pending = [...inFlightByRequestId.values()];
+  inFlightByRequestId.clear();
+  for (const load of pending) {
+    startMainThreadLoad(load);
   }
-  const offscreen = createOffscreenCanvas(scaledWidth, scaledHeight);
-  const offCtx = offscreen.getContext("2d");
-  if (!offCtx) {
-    throw new Error("Failed to get offscreen canvas context");
+};
+var getOrCreateWorker = () => {
+  if (workerFailed || typeof Worker === "undefined") {
+    return null;
   }
-  offCtx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
-  const pattern = ctx.createPattern(offscreen, "repeat-x");
-  if (!pattern) {
-    return;
+  if (worker) {
+    return worker;
   }
-  ctx.fillStyle = pattern;
-  ctx.fillRect(0, 0, width, height);
+  try {
+    worker = makeAudioWaveformWorker();
+  } catch {
+    workerFailed = true;
+    return null;
+  }
+  worker.addEventListener("message", (event) => {
+    const message = event.data;
+    const load = inFlightByRequestId.get(message.requestId);
+    if (!load) {
+      return;
+    }
+    if (message.type === "error") {
+      emitError(load, new Error(message.message));
+      return;
+    }
+    emitPeaks(load, message.peaks, message.final);
+  });
+  worker.addEventListener("error", (event) => {
+    event.preventDefault();
+    handleWorkerFailure();
+  });
+  return worker;
+};
+var subscribeToWaveformPeaks = ({
+  src,
+  onPeaks,
+  onError
+}) => {
+  const cached = peaksCache2.get(src);
+  if (cached) {
+    onPeaks(cached, true);
+    return () => {
+      return;
+    };
+  }
+  const listener = { onPeaks, onError };
+  const existing = inFlightBySrc.get(src);
+  if (existing) {
+    existing.listeners.add(listener);
+    if (existing.latestPeaks) {
+      onPeaks(existing.latestPeaks, false);
+    }
+    return () => {
+      existing.listeners.delete(listener);
+    };
+  }
+  const load = {
+    src,
+    listeners: new Set([listener]),
+    latestPeaks: null,
+    requestId: null
+  };
+  inFlightBySrc.set(src, load);
+  const workerInstance = getOrCreateWorker();
+  if (workerInstance) {
+    const requestId = nextRequestId++;
+    load.requestId = requestId;
+    inFlightByRequestId.set(requestId, load);
+    const message = {
+      type: "load",
+      requestId,
+      src
+    };
+    workerInstance.postMessage(message);
+  } else {
+    startMainThreadLoad(load);
+  }
+  return () => {
+    load.listeners.delete(listener);
+  };
 };
 // src/clamp-timestamps-to-duration.ts
 var LAST_FRAME_EPSILON_IN_SECONDS = 1 / 1e6;
@@ -397,6 +594,7 @@ import {
   UrlSource as UrlSource2,
   VideoSampleSink
 } from "mediabunny";
+import { Internals } from "remotion";
 
 // src/get-duration-or-compute.ts
 var getDurationOrCompute = async (input) => {
@@ -413,22 +611,34 @@ async function extractFrames({
   signal,
   repeatLastFrame = false
 }) {
-  const input = new Input2({
-    formats: ALL_FORMATS2,
-    source: new UrlSource2(src)
+  const lease = Internals.globalMediaResourceManager.acquire({
+    key: Internals.getMediabunnyInputResourceKey({
+      src,
+      credentials: null,
+      requestInitFingerprint: null,
+      revision: null
+    }),
+    create: () => {
+      const createdInput = new Input2({
+        formats: ALL_FORMATS2,
+        source: new UrlSource2(src)
+      });
+      return {
+        resource: createdInput,
+        dispose: () => createdInput.dispose()
+      };
+    }
   });
-  const dispose = () => {
-    input.dispose();
-  };
-  if (signal) {
-    signal.addEventListener("abort", dispose, { once: true });
-  }
+  const input = lease.resource;
   try {
     const [durationInSeconds, format, videoTrack] = await Promise.all([
-      getDurationOrCompute(input),
+      lease.getOrCreateValue(Internals.MEDIABUNNY_DURATION_VALUE_KEY, () => getDurationOrCompute(input)),
       input.getFormat(),
       input.getPrimaryVideoTrack()
     ]);
+    if (signal?.aborted) {
+      return;
+    }
     if (!videoTrack) {
       throw new Error("No video track found in the input");
     }
@@ -477,10 +687,7 @@ async function extractFrames({
     }
     throw error;
   } finally {
-    dispose();
-    if (signal) {
-      signal.removeEventListener("abort", dispose);
-    }
+    lease.release();
   }
 }
 // src/frame-database.ts
@@ -540,18 +747,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;
@@ -891,16 +1152,19 @@ var renderFrameStripToCanvas = async ({
   });
 };
 export {
+  subscribeToWaveformPeaks,
   sliceWaveformPeaks,
+  sliceVisibleWaveformPeaks,
   shouldTileLoopDisplay,
   resizeVideoFrame,
   renderFrameStripToCanvas,
   makeFrameDatabaseKey,
-  makeAudioWaveformWorker,
   loadWaveformPeaks,
+  getVisibleWaveformVolume,
   getTimestampFromFrameDatabaseKey,
   getScaledImageThumbnailDimensions,
   getLoopDisplayWidth,
+  getLoopDisplaySegments,
   getFrameDatabaseKeyPrefix,
   getDurationOfOneFrame,
   getAspectRatioFromCache,

package/dist/extract-frames.js

@@ -2,26 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractFrames = extractFrames;
 const mediabunny_1 = require("mediabunny");
+const remotion_1 = require("remotion");
 const clamp_timestamps_to_duration_1 = require("./clamp-timestamps-to-duration");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, repeatLastFrame = false, }) {
     var _a;
-    const input = new mediabunny_1.Input({
-        formats: mediabunny_1.ALL_FORMATS,
-        source: new mediabunny_1.UrlSource(src),
+    const lease = remotion_1.Internals.globalMediaResourceManager.acquire({
+        key: remotion_1.Internals.getMediabunnyInputResourceKey({
+            src,
+            credentials: null,
+            requestInitFingerprint: null,
+            revision: null,
+        }),
+        create: () => {
+            const createdInput = new mediabunny_1.Input({
+                formats: mediabunny_1.ALL_FORMATS,
+                source: new mediabunny_1.UrlSource(src),
+            });
+            return {
+                resource: createdInput,
+                dispose: () => createdInput.dispose(),
+            };
+        },
     });
-    const dispose = () => {
-        input.dispose();
-    };
-    if (signal) {
-        signal.addEventListener('abort', dispose, { once: true });
-    }
+    const input = lease.resource;
     try {
         const [durationInSeconds, format, videoTrack] = await Promise.all([
-            (0, get_duration_or_compute_1.getDurationOrCompute)(input),
+            lease.getOrCreateValue(remotion_1.Internals.MEDIABUNNY_DURATION_VALUE_KEY, () => (0, get_duration_or_compute_1.getDurationOrCompute)(input)),
             input.getFormat(),
             input.getPrimaryVideoTrack(),
         ]);
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            return;
+        }
         if (!videoTrack) {
             throw new Error('No video track found in the input');
         }
@@ -84,9 +97,6 @@ async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal,
         throw error;
     }
     finally {
-        dispose();
-        if (signal) {
-            signal.removeEventListener('abort', dispose);
-        }
+        lease.release();
     }
 }

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 type { AudioWaveformWorkerIncomingMessage, AudioWaveformWorkerOutgoingMessage, } 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 { subscribeToWaveformPeaks } from './audio-waveform/subscribe-to-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';