@remotion/studio 4.0.452 → 4.0.454

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

@@ -0,0 +1,351 @@
+// src/components/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/components/draw-peaks.ts
+var CLIPPING_COLOR = "#FF7F50";
+var drawBars = (canvas, peaks, color, volume, width) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+  const { height } = canvas;
+  const w = canvas.width;
+  ctx.clearRect(0, 0, w, height);
+  if (volume === 0)
+    return;
+  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 scaledPeak = peak * volume;
+    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/components/load-waveform-peaks.ts
+import { ALL_FORMATS, AudioSampleSink, Input, UrlSource } from "mediabunny";
+
+// src/components/waveform-peak-processor.ts
+var emitWaveformProgress = ({
+  completedPeaks,
+  final,
+  onProgress,
+  peaks,
+  totalPeaks
+}) => {
+  onProgress?.({
+    peaks,
+    completedPeaks,
+    totalPeaks,
+    final
+  });
+};
+var createWaveformPeakProcessor = ({
+  totalPeaks,
+  samplesPerPeak,
+  onProgress,
+  progressIntervalInMs,
+  now
+}) => {
+  const peaks = new Float32Array(totalPeaks);
+  let peakIndex = 0;
+  let peakMax = 0;
+  let sampleInPeak = 0;
+  let lastProgressAt = 0;
+  let lastProgressPeak = 0;
+  const emitProgress = (force) => {
+    const timestamp = now();
+    if (!force && peakIndex === lastProgressPeak && sampleInPeak === 0) {
+      return;
+    }
+    if (!force && timestamp - lastProgressAt < progressIntervalInMs) {
+      return;
+    }
+    lastProgressAt = timestamp;
+    lastProgressPeak = peakIndex;
+    emitWaveformProgress({
+      peaks,
+      completedPeaks: peakIndex,
+      totalPeaks,
+      final: force,
+      onProgress
+    });
+  };
+  return {
+    peaks,
+    processSampleChunk: (floats, channels) => {
+      const frameCount = Math.floor(floats.length / Math.max(1, channels));
+      for (let frame = 0;frame < frameCount; frame++) {
+        let framePeak = 0;
+        for (let channel = 0;channel < channels; channel++) {
+          const sampleIndex = frame * channels + channel;
+          const abs = Math.abs(floats[sampleIndex] ?? 0);
+          if (abs > framePeak) {
+            framePeak = abs;
+          }
+        }
+        if (framePeak > peakMax) {
+          peakMax = framePeak;
+        }
+        sampleInPeak++;
+        if (sampleInPeak >= samplesPerPeak) {
+          if (peakIndex < totalPeaks) {
+            peaks[peakIndex] = peakMax;
+          }
+          peakIndex++;
+          peakMax = 0;
+          sampleInPeak = 0;
+        }
+      }
+      emitProgress(false);
+    },
+    finalize: () => {
+      if (sampleInPeak > 0 && peakIndex < totalPeaks) {
+        peaks[peakIndex] = peakMax;
+        peakIndex++;
+      }
+      emitProgress(true);
+    }
+  };
+};
+
+// src/components/load-waveform-peaks.ts
+var TARGET_SAMPLE_RATE = 100;
+var DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
+var peaksCache = new Map;
+async function loadWaveformPeaks(url, signal, options) {
+  const cached = peaksCache.get(url);
+  if (cached) {
+    emitWaveformProgress({
+      peaks: cached,
+      completedPeaks: cached.length,
+      totalPeaks: cached.length,
+      final: true,
+      onProgress: options?.onProgress
+    });
+    return cached;
+  }
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(url)
+  });
+  try {
+    const audioTrack = await input.getPrimaryAudioTrack();
+    if (!audioTrack) {
+      return new Float32Array(0);
+    }
+    if (await audioTrack.isLive()) {
+      throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + url);
+    }
+    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 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 sink = new AudioSampleSink(audioTrack);
+    const processor = createWaveformPeakProcessor({
+      totalPeaks,
+      samplesPerPeak,
+      onProgress: options?.onProgress,
+      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS,
+      now: () => Date.now()
+    });
+    for await (const sample of sink.samples()) {
+      if (signal.aborted) {
+        sample.close();
+        return new Float32Array(0);
+      }
+      const bytesNeeded = sample.allocationSize({
+        format: "f32",
+        planeIndex: 0
+      });
+      const floats = new Float32Array(bytesNeeded / 4);
+      sample.copyTo(floats, { format: "f32", planeIndex: 0 });
+      const channels = Math.max(1, sample.numberOfChannels);
+      sample.close();
+      processor.processSampleChunk(floats, channels);
+    }
+    processor.finalize();
+    const { peaks } = processor;
+    peaksCache.set(url, peaks);
+    return peaks;
+  } finally {
+    input.dispose();
+  }
+}
+
+// src/components/looped-media-timeline.ts
+var shouldTileLoopDisplay = (loopDisplay) => {
+  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+};
+var getLoopDisplayWidth = ({
+  visualizationWidth,
+  loopDisplay
+}) => {
+  if (!shouldTileLoopDisplay(loopDisplay)) {
+    return visualizationWidth;
+  }
+  return visualizationWidth / loopDisplay.numberOfTimes;
+};
+
+// src/components/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);
+  return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
+};
+
+// src/audio-waveform-worker.ts
+var canvas = null;
+var currentController = null;
+var latestRequestId = 0;
+var postError = (requestId, error) => {
+  const message = error instanceof Error ? error.message : "Failed to render waveform";
+  const payload = {
+    type: "error",
+    requestId,
+    message
+  };
+  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, portionPeaks, "rgba(255, 255, 255, 0.6)", message.volume, 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(targetCanvas, portionPeaks, "rgba(255, 255, 255, 0.6)", message.volume, 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;
+  }
+  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);
+      }
+    });
+    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);
+});