@remotion/timeline-utils 4.0.513 → 4.0.515

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

@@ -1,101 +1,3 @@
-// src/audio-waveform/parse-color.ts
-var colorCache = new Map;
-var parseColor = (color) => {
-  const cached = colorCache.get(color);
-  if (cached)
-    return cached;
-  const ctx = new OffscreenCanvas(1, 1).getContext("2d");
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, 1, 1);
-  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
-  const result = [r, g, b, a];
-  colorCache.set(color, result);
-  return result;
-};
-
-// src/audio-waveform/draw-peaks.ts
-var CLIPPING_COLOR = "#FF7F50";
-var getVolumeAtBar = ({
-  barIndex,
-  numBars,
-  volume
-}) => {
-  if (typeof volume === "number") {
-    return volume;
-  }
-  if (volume.length === 0) {
-    return 1;
-  }
-  if (volume.length === 1 || numBars <= 1) {
-    return volume[0];
-  }
-  const volumeIndex = Math.round(barIndex / (numBars - 1) * (volume.length - 1));
-  return volume[volumeIndex] ?? 1;
-};
-var drawBars = ({
-  canvas,
-  color,
-  peaks,
-  volume,
-  width
-}) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
-  }
-  const { height } = canvas;
-  const w = canvas.width;
-  if (w === 0 || height === 0) {
-    return;
-  }
-  ctx.clearRect(0, 0, w, height);
-  const [r, g, b, a] = parseColor(color);
-  const [cr, cg, cb, ca] = parseColor(CLIPPING_COLOR);
-  const imageData = ctx.createImageData(w, height);
-  const { data } = imageData;
-  const numBars = width;
-  for (let barIndex = 0;barIndex < numBars; barIndex++) {
-    const x = barIndex;
-    if (x >= w)
-      break;
-    const peakIndex = Math.floor(barIndex / numBars * peaks.length);
-    const peak = peaks[peakIndex] || 0;
-    const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
-    const scaledPeak = peak * barVolume;
-    const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * height / 2));
-    if (halfBar === 0)
-      continue;
-    const mid = height / 2;
-    const barY = Math.round(mid - halfBar);
-    const barEnd = Math.round(mid + halfBar);
-    const isClipping = scaledPeak > 1;
-    const clipTopEnd = isClipping ? Math.min(barY + 2, barEnd) : barY;
-    const clipBotStart = isClipping ? Math.max(barEnd - 2, barY) : barEnd;
-    for (let y = barY;y < clipTopEnd; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = cr;
-      data[idx + 1] = cg;
-      data[idx + 2] = cb;
-      data[idx + 3] = ca;
-    }
-    for (let y = clipTopEnd;y < clipBotStart; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = r;
-      data[idx + 1] = g;
-      data[idx + 2] = b;
-      data[idx + 3] = a;
-    }
-    for (let y = clipBotStart;y < barEnd; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = cr;
-      data[idx + 1] = cg;
-      data[idx + 2] = cb;
-      data[idx + 3] = ca;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
-};
-
 // src/audio-waveform/load-waveform-peaks.ts
 import { ALL_FORMATS, AudioSampleSink, Input, UrlSource } from "mediabunny";
 
@@ -280,56 +182,18 @@ async function loadWaveformPeaks(url, signal, options) {
   }
 }
 
-// src/audio-waveform/slice-waveform-peaks.ts
-var sliceWaveformPeaks = ({
-  durationInFrames,
-  fps,
-  peaks,
-  playbackRate,
-  startFrom
-}) => {
-  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);
-  if (!Number.isFinite(startPeakIndex) || !Number.isFinite(endPeakIndex)) {
-    return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-  }
-  if (startPeakIndex >= 0 && endPeakIndex <= peaks.length) {
-    return peaks.subarray(startPeakIndex, endPeakIndex);
-  }
-  const portion = new Float32Array(Math.max(0, endPeakIndex - startPeakIndex));
-  const sourceStart = Math.max(0, startPeakIndex);
-  const sourceEnd = Math.min(peaks.length, endPeakIndex);
-  if (sourceStart < sourceEnd) {
-    portion.set(peaks.subarray(sourceStart, sourceEnd), sourceStart - startPeakIndex);
-  }
-  return portion;
-};
-
-// src/loop-display.ts
-var shouldTileLoopDisplay = (loopDisplay) => {
-  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
-};
-var getLoopDisplayWidth = ({
-  visualizationWidth,
-  loopDisplay
-}) => {
-  if (!shouldTileLoopDisplay(loopDisplay)) {
-    return visualizationWidth;
-  }
-  return visualizationWidth / loopDisplay.numberOfTimes;
-};
-
 // src/audio-waveform-worker.ts
-var canvas = null;
-var currentController = null;
-var latestRequestId = 0;
+var postPeaks = (requestId, peaks, final) => {
+  const payload = {
+    type: "peaks",
+    requestId,
+    peaks,
+    final
+  };
+  self.postMessage(payload);
+};
 var postError = (requestId, error) => {
-  const message = error instanceof Error ? error.message : "Failed to render waveform";
+  const message = error instanceof Error ? error.message : "Failed to load waveform";
   const payload = {
     type: "error",
     requestId,
@@ -337,96 +201,18 @@ var postError = (requestId, error) => {
   };
   self.postMessage(payload);
 };
-var drawPartialWaveform = (message, peaks) => {
-  if (!canvas) {
-    return;
-  }
-  const portionPeaks = sliceWaveformPeaks({
-    durationInFrames: shouldTileLoopDisplay(message.loopDisplay) ? message.loopDisplay.durationInFrames : message.durationInFrames,
-    fps: message.fps,
-    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,
-    peaks: portionPeaks,
-    color: "rgba(255, 255, 255, 0.6)",
-    volume: message.volume,
-    width: targetCanvas.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) {
-    postError(message.requestId, new Error("Waveform canvas not initialized"));
-    return;
-  }
+self.addEventListener("message", (event) => {
+  const message = event.data;
   const controller = new AbortController;
-  currentController?.abort();
-  currentController = controller;
-  latestRequestId = message.requestId;
-  try {
-    canvas.width = message.width;
-    canvas.height = message.height;
-    const peaks = await loadWaveformPeaks(message.src, controller.signal, {
-      onProgress: ({ peaks: nextPeaks }) => {
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-          return;
-        }
-        drawPartialWaveform(message, nextPeaks);
+  loadWaveformPeaks(message.src, controller.signal, {
+    onProgress: ({ peaks, final }) => {
+      if (!final) {
+        postPeaks(message.requestId, peaks, false);
       }
-    });
-    if (controller.signal.aborted || latestRequestId !== message.requestId) {
-      return;
-    }
-    drawPartialWaveform(message, peaks);
-  } catch (error) {
-    if (controller.signal.aborted || latestRequestId !== message.requestId) {
-      return;
     }
-    postError(message.requestId, error);
-  }
-};
-self.addEventListener("message", (event) => {
-  const message = event.data;
-  if (message.type === "init") {
-    canvas = message.canvas;
-    return;
-  }
-  if (message.type === "dispose") {
-    currentController?.abort();
-    currentController = null;
-    canvas = null;
-    return;
-  }
-  renderWaveform(message).catch((error) => {
+  }).then((peaks) => {
+    postPeaks(message.requestId, peaks, true);
+  }).catch((error) => {
     postError(message.requestId, error);
   });
 });