@waveform-playlist/spectrogram 9.4.1 → 9.5.1

package/dist/index.mjs

@@ -3776,6 +3776,12 @@ var SpectrogramSettingsModal = ({
 };
 
 // src/worker/createSpectrogramWorker.ts
+var SpectrogramAbortError = class extends Error {
+  constructor() {
+    super("aborted");
+    this.name = "SpectrogramAbortError";
+  }
+};
 function addPending(map, id, resolve, reject) {
   map.set(id, { resolve, reject });
 }
@@ -3793,15 +3799,15 @@ function createSpectrogramWorker(worker) {
         case "error":
           entry.reject(new Error(msg.error));
           break;
+        case "aborted":
+          entry.reject(new SpectrogramAbortError());
+          break;
         case "cache-key":
           entry.resolve({ cacheKey: msg.cacheKey });
           break;
         case "done":
           entry.resolve(void 0);
           break;
-        case "spectrograms":
-          entry.resolve(msg.spectrograms);
-          break;
       }
     } else if (msg.id) {
       console.warn(`[spectrogram] Received response for unknown message ID: ${msg.id}`);
@@ -3815,28 +3821,7 @@ function createSpectrogramWorker(worker) {
     pending.clear();
   };
   return {
-    compute(params) {
-      if (terminated) return Promise.reject(new Error("Worker terminated"));
-      const id = String(++idCounter);
-      return new Promise((resolve, reject) => {
-        addPending(pending, id, resolve, reject);
-        const transferableArrays = params.channelDataArrays.map((arr) => arr.slice());
-        const transferables = transferableArrays.map((arr) => arr.buffer);
-        worker.postMessage(
-          {
-            id,
-            channelDataArrays: transferableArrays,
-            config: params.config,
-            sampleRate: params.sampleRate,
-            offsetSamples: params.offsetSamples,
-            durationSamples: params.durationSamples,
-            mono: params.mono
-          },
-          transferables
-        );
-      });
-    },
-    computeFFT(params) {
+    computeFFT(params, generation = 0) {
       if (terminated) return Promise.reject(new Error("Worker terminated"));
       const id = String(++idCounter);
       return new Promise((resolve, reject) => {
@@ -3848,6 +3833,7 @@ function createSpectrogramWorker(worker) {
           {
             type: "compute-fft",
             id,
+            generation,
             clipId: params.clipId,
             channelDataArrays: transferableArrays,
             config: params.config,
@@ -3855,13 +3841,14 @@ function createSpectrogramWorker(worker) {
             offsetSamples: params.offsetSamples,
             durationSamples: params.durationSamples,
             mono: params.mono,
-            ...params.sampleRange ? { sampleRange: params.sampleRange } : {}
+            ...params.sampleRange ? { sampleRange: params.sampleRange } : {},
+            ...params.channelFilter !== void 0 ? { channelFilter: params.channelFilter } : {}
           },
           transferables
         );
       });
     },
-    renderChunks(params) {
+    renderChunks(params, generation = 0) {
       if (terminated) return Promise.reject(new Error("Worker terminated"));
       const id = String(++idCounter);
       return new Promise((resolve, reject) => {
@@ -3869,6 +3856,7 @@ function createSpectrogramWorker(worker) {
         worker.postMessage({
           type: "render-chunks",
           id,
+          generation,
           cacheKey: params.cacheKey,
           canvasIds: params.canvasIds,
           canvasWidths: params.canvasWidths,
@@ -3886,6 +3874,10 @@ function createSpectrogramWorker(worker) {
         });
       });
     },
+    abortGeneration(generation) {
+      if (terminated) return;
+      worker.postMessage({ type: "abort-generation", generation });
+    },
     registerCanvas(canvasId, canvas) {
       worker.postMessage({ type: "register-canvas", canvasId, canvas }, [canvas]);
     },
@@ -3905,29 +3897,6 @@ function createSpectrogramWorker(worker) {
       worker.postMessage({ type: "unregister-audio-data", clipId });
       registeredClipIds.delete(clipId);
     },
-    computeAndRender(params) {
-      if (terminated) return Promise.reject(new Error("Worker terminated"));
-      const id = String(++idCounter);
-      return new Promise((resolve, reject) => {
-        addPending(pending, id, resolve, reject);
-        const transferableArrays = params.channelDataArrays.map((arr) => arr.slice());
-        const transferables = transferableArrays.map((arr) => arr.buffer);
-        worker.postMessage(
-          {
-            type: "compute-render",
-            id,
-            channelDataArrays: transferableArrays,
-            config: params.config,
-            sampleRate: params.sampleRate,
-            offsetSamples: params.offsetSamples,
-            durationSamples: params.durationSamples,
-            mono: params.mono,
-            render: params.render
-          },
-          transferables
-        );
-      });
-    },
     terminate() {
       terminated = true;
       worker.terminate();
@@ -3939,6 +3908,76 @@ function createSpectrogramWorker(worker) {
   };
 }
 
+// src/worker/createSpectrogramWorkerPool.ts
+function parseChannelFromCanvasId(canvasId) {
+  const match = canvasId.match(/-ch(\d+)-/);
+  return match ? parseInt(match[1], 10) : 0;
+}
+function defaultPoolSize() {
+  return 2;
+}
+function createSpectrogramWorkerPool(createWorker, poolSize = defaultPoolSize()) {
+  const workers = [];
+  try {
+    for (let i = 0; i < poolSize; i++) {
+      workers.push(createSpectrogramWorker(createWorker()));
+    }
+  } catch (err) {
+    for (const w of workers) {
+      w.terminate();
+    }
+    throw err;
+  }
+  function getWorkerForChannel(channelIndex) {
+    return workers[channelIndex % workers.length];
+  }
+  return {
+    computeFFT(params, generation = 0) {
+      if (params.mono) {
+        return workers[0].computeFFT(params, generation);
+      }
+      const channelCount = params.channelDataArrays.length;
+      const activeWorkers = workers.slice(0, channelCount);
+      const promises = activeWorkers.map(
+        (w, i) => w.computeFFT({ ...params, channelFilter: i }, generation)
+      );
+      return Promise.all(promises).then((results) => results[0]);
+    },
+    renderChunks(params, generation = 0) {
+      const worker = getWorkerForChannel(params.channelIndex);
+      return worker.renderChunks({ ...params, channelIndex: 0 }, generation);
+    },
+    abortGeneration(generation) {
+      for (const w of workers) {
+        w.abortGeneration(generation);
+      }
+    },
+    registerCanvas(canvasId, canvas) {
+      const ch = parseChannelFromCanvasId(canvasId);
+      getWorkerForChannel(ch).registerCanvas(canvasId, canvas);
+    },
+    unregisterCanvas(canvasId) {
+      const ch = parseChannelFromCanvasId(canvasId);
+      getWorkerForChannel(ch).unregisterCanvas(canvasId);
+    },
+    registerAudioData(clipId, channelDataArrays, sampleRate) {
+      for (const w of workers) {
+        w.registerAudioData(clipId, channelDataArrays, sampleRate);
+      }
+    },
+    unregisterAudioData(clipId) {
+      for (const w of workers) {
+        w.unregisterAudioData(clipId);
+      }
+    },
+    terminate() {
+      for (const w of workers) {
+        w.terminate();
+      }
+    }
+  };
+}
+
 // src/SpectrogramProvider.tsx
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback, useMemo } from "react";
 import {
@@ -3960,13 +3999,11 @@ function extractChunkNumber(canvasId) {
 var SpectrogramProvider = ({
   config: spectrogramConfig,
   colorMap: spectrogramColorMap,
+  workerPoolSize,
   children
 }) => {
-  const { tracks, waveHeight, samplesPerPixel, isReady, mono, controls } = usePlaylistData();
+  const { tracks, waveHeight, samplesPerPixel, isReady, mono } = usePlaylistData();
   const { scrollContainerRef } = usePlaylistControls();
-  const [spectrogramDataMap, setSpectrogramDataMap] = useState2(
-    /* @__PURE__ */ new Map()
-  );
   const [trackSpectrogramOverrides, setTrackSpectrogramOverrides] = useState2(/* @__PURE__ */ new Map());
   const spectrogramCanvasRegistryRef = useRef2(/* @__PURE__ */ new Map());
   const [spectrogramCanvasVersion, setSpectrogramCanvasVersion] = useState2(0);
@@ -3976,7 +4013,7 @@ var SpectrogramProvider = ({
   const spectrogramGenerationRef = useRef2(0);
   const prevCanvasVersionRef = useRef2(0);
   const [spectrogramWorkerReady, setSpectrogramWorkerReady] = useState2(false);
-  const clipCacheKeysRef = useRef2(/* @__PURE__ */ new Map());
+  const renderedClipIdsRef = useRef2(/* @__PURE__ */ new Set());
   const backgroundRenderAbortRef = useRef2(null);
   const registeredAudioClipIdsRef = useRef2(/* @__PURE__ */ new Set());
   useEffect2(() => {
@@ -3990,15 +4027,19 @@ var SpectrogramProvider = ({
     let workerApi = spectrogramWorkerRef.current;
     if (!workerApi) {
       try {
-        const rawWorker = new Worker(
-          new URL("@waveform-playlist/spectrogram/worker/spectrogram.worker", import.meta.url),
-          { type: "module" }
+        workerApi = createSpectrogramWorkerPool(
+          () => new Worker(
+            new URL("@waveform-playlist/spectrogram/worker/spectrogram.worker", import.meta.url),
+            { type: "module" }
+          ),
+          workerPoolSize
         );
-        workerApi = createSpectrogramWorker(rawWorker);
         spectrogramWorkerRef.current = workerApi;
         setSpectrogramWorkerReady(true);
-      } catch {
-        console.warn("Spectrogram Web Worker unavailable for pre-transfer");
+      } catch (err) {
+        console.warn(
+          `[waveform-playlist] Spectrogram Web Worker unavailable for pre-transfer: ${err instanceof Error ? err.message : String(err)}`
+        );
         return;
       }
     }
@@ -4070,42 +4111,28 @@ var SpectrogramProvider = ({
       prevSpectrogramConfigRef.current = currentKeys;
       prevSpectrogramFFTKeyRef.current = currentFFTKeys;
     }
-    if (configChanged) {
-      setSpectrogramDataMap((prevMap) => {
-        const activeClipIds = /* @__PURE__ */ new Set();
-        for (const track of tracks) {
-          const mode = trackSpectrogramOverrides.get(track.id)?.renderMode ?? track.renderMode ?? "waveform";
-          if (mode === "spectrogram" || mode === "both") {
-            for (const clip of track.clips) {
-              activeClipIds.add(clip.id);
-            }
-          }
-        }
-        const newMap = new Map(prevMap);
-        for (const clipId of newMap.keys()) {
-          if (!activeClipIds.has(clipId)) {
-            newMap.delete(clipId);
-          }
-        }
-        return newMap;
-      });
-    }
     if (backgroundRenderAbortRef.current) {
       backgroundRenderAbortRef.current.aborted = true;
     }
     const generation = ++spectrogramGenerationRef.current;
+    if (spectrogramWorkerRef.current) {
+      spectrogramWorkerRef.current.abortGeneration(generation);
+    }
     let workerApi = spectrogramWorkerRef.current;
     if (!workerApi) {
       try {
-        const rawWorker = new Worker(
-          new URL("@waveform-playlist/spectrogram/worker/spectrogram.worker", import.meta.url),
-          { type: "module" }
+        workerApi = createSpectrogramWorkerPool(
+          () => new Worker(
+            new URL("@waveform-playlist/spectrogram/worker/spectrogram.worker", import.meta.url),
+            { type: "module" }
+          ),
+          workerPoolSize
         );
-        workerApi = createSpectrogramWorker(rawWorker);
         spectrogramWorkerRef.current = workerApi;
         setSpectrogramWorkerReady(true);
-      } catch {
-        console.warn("Spectrogram Web Worker unavailable, falling back to synchronous computation");
+      } catch (err) {
+        console.error(`[waveform-playlist] Spectrogram Web Worker required but unavailable: ${err instanceof Error ? err.message : String(err)}`);
+        return;
       }
     }
     const clipsNeedingFFT = [];
@@ -4122,11 +4149,19 @@ var SpectrogramProvider = ({
       for (const clip of track.clips) {
         if (!clip.audioBuffer) continue;
         const monoFlag = mono || clip.audioBuffer.numberOfChannels === 1;
-        if (!trackFFTChanged && !hasRegisteredCanvases && clipCacheKeysRef.current.has(clip.id)) {
+        if (!trackFFTChanged && !hasRegisteredCanvases && renderedClipIdsRef.current.has(clip.id)) {
+          const channelDataArrays2 = [];
+          for (let ch = 0; ch < clip.audioBuffer.numberOfChannels; ch++) {
+            channelDataArrays2.push(clip.audioBuffer.getChannelData(ch));
+          }
           clipsNeedingDisplayOnly.push({
             clipId: clip.id,
             trackIndex: i,
+            channelDataArrays: channelDataArrays2,
             config: cfg,
+            sampleRate: clip.audioBuffer.sampleRate,
+            offsetSamples: clip.offsetSamples,
+            durationSamples: clip.durationSamples,
             clipStartSample: clip.startSample,
             monoFlag,
             colorMap: cm,
@@ -4153,68 +4188,38 @@ var SpectrogramProvider = ({
       }
     });
     if (clipsNeedingFFT.length === 0 && clipsNeedingDisplayOnly.length === 0) return;
-    if (!workerApi) {
-      try {
-        setSpectrogramDataMap((prevMap) => {
-          const newMap = new Map(prevMap);
-          for (const item of clipsNeedingFFT) {
-            const clip = tracks.flatMap((t) => t.clips).find((c) => c.id === item.clipId);
-            if (!clip?.audioBuffer) continue;
-            const channelSpectrograms = [];
-            if (item.monoFlag) {
-              channelSpectrograms.push(
-                computeSpectrogramMono(
-                  clip.audioBuffer,
-                  item.config,
-                  item.offsetSamples,
-                  item.durationSamples
-                )
-              );
-            } else {
-              for (let ch = 0; ch < clip.audioBuffer.numberOfChannels; ch++) {
-                channelSpectrograms.push(
-                  computeSpectrogram(
-                    clip.audioBuffer,
-                    item.config,
-                    item.offsetSamples,
-                    item.durationSamples,
-                    ch
-                  )
-                );
-              }
-            }
-            newMap.set(item.clipId, channelSpectrograms);
-          }
-          return newMap;
-        });
-      } catch (err) {
-        console.error("[waveform-playlist] Synchronous spectrogram computation failed:", err);
-      }
-      return;
-    }
     const getVisibleChunkRange = (channelInfo, clipPixelOffset = 0) => {
       const container = scrollContainerRef.current;
       if (!container) {
-        return { visibleIndices: channelInfo.canvasWidths.map((_, i) => i), remainingIndices: [] };
+        return {
+          viewportIndices: channelInfo.canvasWidths.map((_, i) => i),
+          bufferIndices: [],
+          remainingIndices: []
+        };
       }
       const scrollLeft = container.scrollLeft;
       const viewportWidth = container.clientWidth;
-      const controlWidth = controls.show ? controls.width : 0;
-      const visibleIndices = [];
+      const buffer = viewportWidth * 1.5;
+      const bufferStart = Math.max(0, scrollLeft - buffer);
+      const bufferEnd = scrollLeft + viewportWidth + buffer;
+      const viewportIndices = [];
+      const bufferIndices = [];
       const remainingIndices = [];
       for (let i = 0; i < channelInfo.canvasWidths.length; i++) {
         const chunkNumber = extractChunkNumber(channelInfo.canvasIds[i]);
-        const chunkLeft = chunkNumber * MAX_CANVAS_WIDTH + controlWidth + clipPixelOffset;
+        const chunkLeft = chunkNumber * MAX_CANVAS_WIDTH + clipPixelOffset;
         const chunkRight = chunkLeft + channelInfo.canvasWidths[i];
         if (chunkRight > scrollLeft && chunkLeft < scrollLeft + viewportWidth) {
-          visibleIndices.push(i);
+          viewportIndices.push(i);
+        } else if (chunkRight > bufferStart && chunkLeft < bufferEnd) {
+          bufferIndices.push(i);
         } else {
           remainingIndices.push(i);
         }
       }
-      return { visibleIndices, remainingIndices };
+      return { viewportIndices, bufferIndices, remainingIndices };
     };
-    const renderChunkSubset = async (api, cacheKey, channelInfo, indices, item, channelIndex) => {
+    const renderChunkSubset = async (api, cacheKey, channelInfo, indices, item, channelIndex, gen) => {
       if (indices.length === 0) return;
       const canvasIds = indices.map((i) => channelInfo.canvasIds[i]);
       const canvasWidths = indices.map((i) => channelInfo.canvasWidths[i]);
@@ -4224,41 +4229,117 @@ var SpectrogramProvider = ({
         globalPixelOffsets.push(chunkNumber * MAX_CANVAS_WIDTH);
       }
       const colorLUT = getColorMap(item.colorMap);
-      await api.renderChunks({
-        cacheKey,
-        canvasIds,
-        canvasWidths,
-        globalPixelOffsets,
-        canvasHeight: waveHeight,
-        devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
-        samplesPerPixel,
-        colorLUT,
-        frequencyScale: item.config.frequencyScale ?? "mel",
-        minFrequency: item.config.minFrequency ?? 0,
-        maxFrequency: item.config.maxFrequency ?? 0,
-        gainDb: item.config.gainDb ?? 20,
-        rangeDb: item.config.rangeDb ?? 80,
-        channelIndex
-      });
+      await api.renderChunks(
+        {
+          cacheKey,
+          canvasIds,
+          canvasWidths,
+          globalPixelOffsets,
+          canvasHeight: waveHeight,
+          devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
+          samplesPerPixel,
+          colorLUT,
+          frequencyScale: item.config.frequencyScale ?? "mel",
+          minFrequency: item.config.minFrequency ?? 0,
+          maxFrequency: item.config.maxFrequency ?? 0,
+          gainDb: item.config.gainDb ?? 20,
+          rangeDb: item.config.rangeDb ?? 80,
+          channelIndex
+        },
+        gen
+      );
+    };
+    const computeFFTForChunks = async (api, channelInfo, indices, item, gen) => {
+      const chunkNumbers = indices.map((i) => extractChunkNumber(channelInfo.canvasIds[i]));
+      const minChunk = Math.min(...chunkNumbers);
+      const maxChunk = Math.max(...chunkNumbers);
+      const maxChunkIdx = indices[chunkNumbers.indexOf(maxChunk)];
+      const lastChunkWidth = channelInfo.canvasWidths[maxChunkIdx];
+      const startPx = minChunk * MAX_CANVAS_WIDTH;
+      const endPx = maxChunk * MAX_CANVAS_WIDTH + lastChunkWidth;
+      const windowSize = item.config.fftSize ?? 2048;
+      const rangeStartSample = item.offsetSamples + Math.floor(startPx * samplesPerPixel);
+      const rangeEndSample = Math.min(
+        item.offsetSamples + item.durationSamples,
+        item.offsetSamples + Math.ceil(endPx * samplesPerPixel)
+      );
+      const paddedStart = Math.max(item.offsetSamples, rangeStartSample - windowSize);
+      const paddedEnd = Math.min(
+        item.offsetSamples + item.durationSamples,
+        rangeEndSample + windowSize
+      );
+      const { cacheKey } = await api.computeFFT(
+        {
+          clipId: item.clipId,
+          channelDataArrays: item.channelDataArrays,
+          config: item.config,
+          sampleRate: item.sampleRate,
+          offsetSamples: item.offsetSamples,
+          durationSamples: item.durationSamples,
+          mono: item.monoFlag,
+          sampleRange: { start: paddedStart, end: paddedEnd }
+        },
+        gen
+      );
+      return cacheKey;
+    };
+    const groupContiguousIndices = (channelInfo, indices) => {
+      if (indices.length === 0) return [];
+      const groups = [];
+      let currentGroup = [indices[0]];
+      let prevChunk = extractChunkNumber(channelInfo.canvasIds[indices[0]]);
+      for (let i = 1; i < indices.length; i++) {
+        const chunk = extractChunkNumber(channelInfo.canvasIds[indices[i]]);
+        if (chunk === prevChunk + 1) {
+          currentGroup.push(indices[i]);
+        } else {
+          groups.push(currentGroup);
+          currentGroup = [indices[i]];
+        }
+        prevChunk = chunk;
+      }
+      groups.push(currentGroup);
+      return groups;
     };
     const computeAsync = async () => {
       const abortToken = { aborted: false };
       backgroundRenderAbortRef.current = abortToken;
-      const renderBackgroundBatches = async (channelRanges, cacheKey, item) => {
-        const BATCH_SIZE = 4;
-        for (const { ch, channelInfo, remainingIndices } of channelRanges) {
-          for (let batchStart = 0; batchStart < remainingIndices.length; batchStart += BATCH_SIZE) {
-            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return true;
-            const batch = remainingIndices.slice(batchStart, batchStart + BATCH_SIZE);
-            await new Promise((resolve) => {
-              if (typeof requestIdleCallback === "function") {
-                requestIdleCallback(() => resolve());
-              } else {
-                setTimeout(resolve, 0);
-              }
+      const renderBackgroundBatches = async (channelRanges, item) => {
+        const allGroups = [];
+        if (channelRanges.length > 0) {
+          const { channelInfo, remainingIndices } = channelRanges[0];
+          const groups = groupContiguousIndices(channelInfo, remainingIndices);
+          for (const group of groups) {
+            allGroups.push({
+              group,
+              channelRangeEntries: channelRanges.map(({ ch, channelInfo: ci }) => ({
+                ch,
+                channelInfo: ci
+              }))
             });
+          }
+        }
+        for (const { group, channelRangeEntries } of allGroups) {
+          if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return true;
+          await new Promise((resolve) => {
+            if (typeof requestIdleCallback === "function") {
+              requestIdleCallback(() => resolve());
+            } else {
+              setTimeout(resolve, 0);
+            }
+          });
+          if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return true;
+          const { channelInfo: firstChannelInfo } = channelRangeEntries[0];
+          const cacheKey = await computeFFTForChunks(
+            workerApi,
+            firstChannelInfo,
+            group,
+            item,
+            generation
+          );
+          for (const { ch, channelInfo: ci } of channelRangeEntries) {
             if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return true;
-            await renderChunkSubset(workerApi, cacheKey, channelInfo, batch, item, ch);
+            await renderChunkSubset(workerApi, cacheKey, ci, group, item, ch, generation);
           }
         }
         return false;
@@ -4270,117 +4351,76 @@ var SpectrogramProvider = ({
           if (clipCanvasInfo && clipCanvasInfo.size > 0) {
             const numChannels = item.monoFlag ? 1 : item.channelDataArrays.length;
             const clipPixelOffset = Math.floor(item.clipStartSample / samplesPerPixel);
-            const container = scrollContainerRef.current;
-            const windowSize = item.config.fftSize ?? 2048;
-            let visibleRange;
-            if (container) {
-              const scrollLeft = container.scrollLeft;
-              const viewportWidth = container.clientWidth;
-              const controlWidth = controls.show ? controls.width : 0;
-              const vpStartPx = Math.max(0, scrollLeft - controlWidth);
-              const vpEndPx = vpStartPx + viewportWidth;
-              const clipStartPx = clipPixelOffset;
-              const clipEndPx = clipStartPx + Math.ceil(item.durationSamples / samplesPerPixel);
-              const overlapStartPx = Math.max(vpStartPx, clipStartPx);
-              const overlapEndPx = Math.min(vpEndPx, clipEndPx);
-              if (overlapEndPx > overlapStartPx) {
-                const localStartPx = overlapStartPx - clipStartPx;
-                const localEndPx = overlapEndPx - clipStartPx;
-                const visStartSample = item.offsetSamples + Math.floor(localStartPx * samplesPerPixel);
-                const visEndSample = Math.min(
-                  item.offsetSamples + item.durationSamples,
-                  item.offsetSamples + Math.ceil(localEndPx * samplesPerPixel)
-                );
-                const paddedStart = Math.max(item.offsetSamples, visStartSample - windowSize);
-                const paddedEnd = Math.min(
-                  item.offsetSamples + item.durationSamples,
-                  visEndSample + windowSize
-                );
-                if (paddedEnd - paddedStart < item.durationSamples * 0.8) {
-                  visibleRange = { start: paddedStart, end: paddedEnd };
-                }
-              }
+            const channelRanges = [];
+            for (let ch = 0; ch < numChannels; ch++) {
+              const channelInfo = clipCanvasInfo.get(ch);
+              if (!channelInfo) continue;
+              const range = getVisibleChunkRange(channelInfo, clipPixelOffset);
+              channelRanges.push({ ch, channelInfo, ...range });
             }
-            const fullClipAlreadyCached = clipCacheKeysRef.current.has(item.clipId);
-            if (visibleRange && !fullClipAlreadyCached) {
-              const { cacheKey: visibleCacheKey } = await workerApi.computeFFT({
-                clipId: item.clipId,
-                channelDataArrays: item.channelDataArrays,
-                config: item.config,
-                sampleRate: item.sampleRate,
-                offsetSamples: item.offsetSamples,
-                durationSamples: item.durationSamples,
-                mono: item.monoFlag,
-                sampleRange: visibleRange
-              });
+            if (channelRanges.length > 0 && channelRanges[0].viewportIndices.length > 0) {
+              const cacheKey = await computeFFTForChunks(
+                workerApi,
+                channelRanges[0].channelInfo,
+                channelRanges[0].viewportIndices,
+                item,
+                generation
+              );
               if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-              for (let ch = 0; ch < numChannels; ch++) {
-                const channelInfo = clipCanvasInfo.get(ch);
-                if (!channelInfo) continue;
-                const { visibleIndices } = getVisibleChunkRange(channelInfo, clipPixelOffset);
+              for (const { ch, channelInfo, viewportIndices } of channelRanges) {
                 await renderChunkSubset(
                   workerApi,
-                  visibleCacheKey,
+                  cacheKey,
                   channelInfo,
-                  visibleIndices,
+                  viewportIndices,
                   item,
-                  ch
+                  ch,
+                  generation
                 );
               }
-              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
             }
-            const { cacheKey } = await workerApi.computeFFT({
-              clipId: item.clipId,
-              channelDataArrays: item.channelDataArrays,
-              config: item.config,
-              sampleRate: item.sampleRate,
-              offsetSamples: item.offsetSamples,
-              durationSamples: item.durationSamples,
-              mono: item.monoFlag
-            });
             if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-            clipCacheKeysRef.current.set(item.clipId, cacheKey);
-            const channelRanges = [];
-            for (let ch = 0; ch < numChannels; ch++) {
-              const channelInfo = clipCanvasInfo.get(ch);
-              if (!channelInfo) continue;
-              const range = getVisibleChunkRange(channelInfo, clipPixelOffset);
-              channelRanges.push({ ch, channelInfo, ...range });
-              await renderChunkSubset(
-                workerApi,
-                cacheKey,
-                channelInfo,
-                range.visibleIndices,
-                item,
-                ch
+            if (channelRanges.length > 0 && channelRanges[0].bufferIndices.length > 0) {
+              const bufferGroups = groupContiguousIndices(
+                channelRanges[0].channelInfo,
+                channelRanges[0].bufferIndices
               );
+              for (const group of bufferGroups) {
+                if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+                const cacheKey = await computeFFTForChunks(
+                  workerApi,
+                  channelRanges[0].channelInfo,
+                  group,
+                  item,
+                  generation
+                );
+                if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+                for (const { ch, channelInfo } of channelRanges) {
+                  await renderChunkSubset(
+                    workerApi,
+                    cacheKey,
+                    channelInfo,
+                    group,
+                    item,
+                    ch,
+                    generation
+                  );
+                }
+              }
             }
+            renderedClipIdsRef.current.add(item.clipId);
             if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-            if (await renderBackgroundBatches(channelRanges, cacheKey, item)) return;
-          } else {
-            const spectrograms = await workerApi.compute({
-              channelDataArrays: item.channelDataArrays,
-              config: item.config,
-              sampleRate: item.sampleRate,
-              offsetSamples: item.offsetSamples,
-              durationSamples: item.durationSamples,
-              mono: item.monoFlag
-            });
-            if (spectrogramGenerationRef.current !== generation) return;
-            setSpectrogramDataMap((prevMap) => {
-              const newMap = new Map(prevMap);
-              newMap.set(item.clipId, spectrograms);
-              return newMap;
-            });
+            if (await renderBackgroundBatches(channelRanges, item)) return;
           }
         } catch (err) {
-          console.warn("Spectrogram worker error for clip", item.clipId, err);
+          if (err instanceof SpectrogramAbortError) return;
+          console.warn(
+            `[waveform-playlist] Spectrogram worker error for clip ${item.clipId}: ${err instanceof Error ? err.message : String(err)}`
+          );
         }
       }
       for (const item of clipsNeedingDisplayOnly) {
         if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-        const cacheKey = clipCacheKeysRef.current.get(item.clipId);
-        if (!cacheKey) continue;
         const clipCanvasInfo = spectrogramCanvasRegistryRef.current.get(item.clipId);
         if (!clipCanvasInfo || clipCanvasInfo.size === 0) continue;
         try {
@@ -4389,22 +4429,71 @@ var SpectrogramProvider = ({
           for (let ch = 0; ch < item.numChannels; ch++) {
             const channelInfo = clipCanvasInfo.get(ch);
             if (!channelInfo) continue;
-            const { visibleIndices, remainingIndices } = getVisibleChunkRange(
-              channelInfo,
-              clipPixelOffset
+            const range = getVisibleChunkRange(channelInfo, clipPixelOffset);
+            channelRanges.push({ ch, channelInfo, ...range });
+          }
+          if (channelRanges.length > 0 && channelRanges[0].viewportIndices.length > 0) {
+            const cacheKey = await computeFFTForChunks(
+              workerApi,
+              channelRanges[0].channelInfo,
+              channelRanges[0].viewportIndices,
+              item,
+              generation
+            );
+            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+            for (const { ch, channelInfo, viewportIndices } of channelRanges) {
+              await renderChunkSubset(
+                workerApi,
+                cacheKey,
+                channelInfo,
+                viewportIndices,
+                item,
+                ch,
+                generation
+              );
+            }
+          }
+          if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+          if (channelRanges.length > 0 && channelRanges[0].bufferIndices.length > 0) {
+            const bufferGroups = groupContiguousIndices(
+              channelRanges[0].channelInfo,
+              channelRanges[0].bufferIndices
             );
-            channelRanges.push({ ch, channelInfo, remainingIndices });
-            await renderChunkSubset(workerApi, cacheKey, channelInfo, visibleIndices, item, ch);
+            for (const group of bufferGroups) {
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+              const cacheKey = await computeFFTForChunks(
+                workerApi,
+                channelRanges[0].channelInfo,
+                group,
+                item,
+                generation
+              );
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+              for (const { ch, channelInfo } of channelRanges) {
+                await renderChunkSubset(
+                  workerApi,
+                  cacheKey,
+                  channelInfo,
+                  group,
+                  item,
+                  ch,
+                  generation
+                );
+              }
+            }
           }
           if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-          if (await renderBackgroundBatches(channelRanges, cacheKey, item)) return;
+          if (await renderBackgroundBatches(channelRanges, item)) return;
         } catch (err) {
-          console.warn("Spectrogram display re-render error for clip", item.clipId, err);
+          if (err instanceof SpectrogramAbortError) return;
+          console.warn(
+            `[waveform-playlist] Spectrogram display re-render error for clip ${item.clipId}: ${err instanceof Error ? err.message : String(err)}`
+          );
         }
       }
     };
     computeAsync().catch((err) => {
-      console.error("[waveform-playlist] Spectrogram computation failed:", err);
+      console.error(`[waveform-playlist] Spectrogram computation failed: ${err instanceof Error ? err.message : String(err)}`);
     });
   }, [
     tracks,
@@ -4415,7 +4504,6 @@ var SpectrogramProvider = ({
     waveHeight,
     samplesPerPixel,
     spectrogramCanvasVersion,
-    controls,
     scrollContainerRef
   ]);
   const setTrackRenderMode = useCallback((trackId, mode) => {
@@ -4475,7 +4563,6 @@ var SpectrogramProvider = ({
   );
   const value = useMemo(
     () => ({
-      spectrogramDataMap,
       trackSpectrogramOverrides,
       spectrogramWorkerApi: spectrogramWorkerReady ? spectrogramWorkerRef.current : null,
       spectrogramConfig,
@@ -4490,7 +4577,6 @@ var SpectrogramProvider = ({
       getFrequencyScale
     }),
     [
-      spectrogramDataMap,
       trackSpectrogramOverrides,
       spectrogramWorkerReady,
       spectrogramConfig,
@@ -4505,12 +4591,14 @@ var SpectrogramProvider = ({
   return /* @__PURE__ */ jsx3(SpectrogramIntegrationProvider, { value, children });
 };
 export {
+  SpectrogramAbortError,
   SpectrogramMenuItems,
   SpectrogramProvider,
   SpectrogramSettingsModal,
   computeSpectrogram,
   computeSpectrogramMono,
   createSpectrogramWorker,
+  createSpectrogramWorkerPool,
   getColorMap,
   getFrequencyScale
 };