@remotion/studio 4.0.459 → 4.0.461

package/dist/components/draw-peaks.d.ts

@@ -1 +0,0 @@
-export declare const drawBars: (canvas: HTMLCanvasElement | OffscreenCanvas, peaks: Float32Array<ArrayBufferLike>, color: string, volume: number, width: number) => void;

package/dist/components/draw-peaks.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawBars = void 0;
-const parse_color_1 = require("./parse-color");
-const CLIPPING_COLOR = '#FF7F50';
-const 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;
-    // Skip drawing when the target canvas has not been laid out yet.
-    // `createImageData(0, h)` / `(w, 0)` throws a DOMException, which
-    // surfaces in Studio's console for compositions with many audio
-    // sequences — some segments are 0 px wide at certain zoom levels.
-    if (w === 0 || height === 0) {
-        return;
-    }
-    ctx.clearRect(0, 0, w, height);
-    if (volume === 0)
-        return;
-    const [r, g, b, a] = (0, parse_color_1.parseColor)(color);
-    const [cr, cg, cb, ca] = (0, parse_color_1.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);
-};
-exports.drawBars = drawBars;

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

@@ -1,13 +0,0 @@
-declare const TARGET_SAMPLE_RATE = 100;
-export { TARGET_SAMPLE_RATE };
-type Progress = {
-    readonly peaks: Float32Array;
-    readonly completedPeaks: number;
-    readonly totalPeaks: number;
-    readonly final: boolean;
-};
-type LoadWaveformPeaksOptions = {
-    readonly onProgress?: (progress: Progress) => void;
-    readonly progressIntervalInMs?: number;
-};
-export declare function loadWaveformPeaks(url: string, signal: AbortSignal, options?: LoadWaveformPeaksOptions): Promise<Float32Array>;

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

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TARGET_SAMPLE_RATE = void 0;
-exports.loadWaveformPeaks = loadWaveformPeaks;
-const mediabunny_1 = require("mediabunny");
-const waveform_peak_processor_1 = require("./waveform-peak-processor");
-const TARGET_SAMPLE_RATE = 100;
-exports.TARGET_SAMPLE_RATE = TARGET_SAMPLE_RATE;
-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);
-    if (cached) {
-        (0, waveform_peak_processor_1.emitWaveformProgress)({
-            peaks: cached,
-            completedPeaks: cached.length,
-            totalPeaks: cached.length,
-            final: true,
-            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
-        });
-        return cached;
-    }
-    const input = new mediabunny_1.Input({
-        formats: mediabunny_1.ALL_FORMATS,
-        source: new mediabunny_1.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 = (_a = (await audioTrack.getDurationFromMetadata({ skipLiveWait: true }))) !== null && _a !== void 0 ? _a : (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 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,
-            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();
-    }
-}

package/dist/components/looped-media-timeline.d.ts

@@ -1,6 +0,0 @@
-import type { LoopDisplay } from 'remotion';
-export declare const shouldTileLoopDisplay: (loopDisplay: LoopDisplay | undefined) => loopDisplay is LoopDisplay;
-export declare const getLoopDisplayWidth: ({ visualizationWidth, loopDisplay, }: {
-    visualizationWidth: number;
-    loopDisplay: LoopDisplay | undefined;
-}) => number;

package/dist/components/looped-media-timeline.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLoopDisplayWidth = exports.shouldTileLoopDisplay = void 0;
-const shouldTileLoopDisplay = (loopDisplay) => {
-    return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
-};
-exports.shouldTileLoopDisplay = shouldTileLoopDisplay;
-const getLoopDisplayWidth = ({ visualizationWidth, loopDisplay, }) => {
-    if (!(0, exports.shouldTileLoopDisplay)(loopDisplay)) {
-        return visualizationWidth;
-    }
-    return visualizationWidth / loopDisplay.numberOfTimes;
-};
-exports.getLoopDisplayWidth = getLoopDisplayWidth;

package/dist/components/parse-color.d.ts

@@ -1 +0,0 @@
-export declare const parseColor: (color: string) => [number, number, number, number];

package/dist/components/parse-color.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseColor = void 0;
-const colorCache = new Map();
-const 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;
-};
-exports.parseColor = parseColor;

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

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

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sliceWaveformPeaks = void 0;
-const load_waveform_peaks_1 = require("./load-waveform-peaks");
-const 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 * load_waveform_peaks_1.TARGET_SAMPLE_RATE);
-    const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * load_waveform_peaks_1.TARGET_SAMPLE_RATE);
-    return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-};
-exports.sliceWaveformPeaks = sliceWaveformPeaks;

package/dist/components/waveform-peak-processor.d.ts

@@ -1,23 +0,0 @@
-type Progress = {
-    readonly peaks: Float32Array;
-    readonly completedPeaks: number;
-    readonly totalPeaks: number;
-    readonly final: boolean;
-};
-type WaveformPeakProcessorOptions = {
-    readonly totalPeaks: number;
-    readonly samplesPerPeak: number;
-    readonly onProgress?: (progress: Progress) => void;
-    readonly progressIntervalInMs: number;
-    readonly now: () => number;
-};
-type WaveformPeakProcessor = {
-    readonly peaks: Float32Array;
-    processSampleChunk: (floats: Float32Array, channels: number) => void;
-    finalize: () => void;
-};
-export declare const emitWaveformProgress: ({ completedPeaks, final, onProgress, peaks, totalPeaks, }: Progress & {
-    readonly onProgress?: ((progress: Progress) => void) | undefined;
-}) => void;
-export declare const createWaveformPeakProcessor: ({ totalPeaks, samplesPerPeak, onProgress, progressIntervalInMs, now, }: WaveformPeakProcessorOptions) => WaveformPeakProcessor;
-export {};

package/dist/components/waveform-peak-processor.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createWaveformPeakProcessor = exports.emitWaveformProgress = void 0;
-const emitWaveformProgress = ({ completedPeaks, final, onProgress, peaks, totalPeaks, }) => {
-    onProgress === null || onProgress === void 0 ? void 0 : onProgress({
-        peaks,
-        completedPeaks,
-        totalPeaks,
-        final,
-    });
-};
-exports.emitWaveformProgress = emitWaveformProgress;
-const 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;
-        (0, exports.emitWaveformProgress)({
-            peaks,
-            completedPeaks: peakIndex,
-            totalPeaks,
-            final: force,
-            onProgress,
-        });
-    };
-    return {
-        peaks,
-        processSampleChunk: (floats, channels) => {
-            var _a;
-            const frameCount = Math.floor(floats.length / Math.max(1, channels));
-            for (let frame = 0; frame < frameCount; frame++) {
-                // `f32` copies are interleaved, so timing advances per frame.
-                let framePeak = 0;
-                for (let channel = 0; channel < channels; channel++) {
-                    const sampleIndex = frame * channels + channel;
-                    const abs = Math.abs((_a = floats[sampleIndex]) !== null && _a !== void 0 ? _a : 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);
-        },
-    };
-};
-exports.createWaveformPeakProcessor = createWaveformPeakProcessor;

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

@@ -1,354 +0,0 @@
-// 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;
-  if (w === 0 || height === 0) {
-    return;
-  }
-  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);
-});