@waveform-playlist/spectrogram 7.1.1 → 7.1.3

package/dist/index.mjs

@@ -3563,7 +3563,14 @@ var ModalButton = styled2.button`
   }
 `;
 var FFT_SIZES = [256, 512, 1024, 2048, 4096, 8192];
-var WINDOW_FUNCTIONS = ["hann", "hamming", "blackman", "blackman-harris", "bartlett", "rectangular"];
+var WINDOW_FUNCTIONS = [
+  "hann",
+  "hamming",
+  "blackman",
+  "blackman-harris",
+  "bartlett",
+  "rectangular"
+];
 var FREQ_SCALES = ["linear", "logarithmic", "mel", "bark", "erb"];
 var COLOR_MAPS = ["viridis", "magma", "inferno", "grayscale", "igray", "roseus"];
 var SpectrogramSettingsModal = ({
@@ -3585,7 +3592,9 @@ var SpectrogramSettingsModal = ({
   const [gainDb, setGainDb] = useState(config.gainDb ?? 20);
   const [rangeDb, setRangeDb] = useState(config.rangeDb ?? 80);
   const [zeroPadding, setZeroPadding] = useState(config.zeroPaddingFactor ?? 2);
-  const [hopSize, setHopSize] = useState(config.hopSize ?? Math.floor((config.fftSize ?? 2048) / 4));
+  const [hopSize, setHopSize] = useState(
+    config.hopSize ?? Math.floor((config.fftSize ?? 2048) / 4)
+  );
   const [showLabels, setShowLabels] = useState(config.labels ?? false);
   useEffect(() => {
     setFftSize(config.fftSize ?? 2048);
@@ -3639,11 +3648,18 @@ var SpectrogramSettingsModal = ({
     /* @__PURE__ */ jsxs2(FormGrid, { children: [
       /* @__PURE__ */ jsxs2(Field, { children: [
         /* @__PURE__ */ jsx2(Label, { children: "FFT Size" }),
-        /* @__PURE__ */ jsx2(Select, { value: fftSize, onChange: (e) => {
-          const v = Number(e.target.value);
-          setFftSize(v);
-          setHopSize(Math.floor(v / 4));
-        }, children: FFT_SIZES.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: s }, s)) })
+        /* @__PURE__ */ jsx2(
+          Select,
+          {
+            value: fftSize,
+            onChange: (e) => {
+              const v = Number(e.target.value);
+              setFftSize(v);
+              setHopSize(Math.floor(v / 4));
+            },
+            children: FFT_SIZES.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: s }, s))
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs2(Field, { children: [
         /* @__PURE__ */ jsx2(Label, { children: "Hop Size" }),
@@ -3664,11 +3680,25 @@ var SpectrogramSettingsModal = ({
       ] }),
       /* @__PURE__ */ jsxs2(Field, { children: [
         /* @__PURE__ */ jsx2(Label, { children: "Frequency Scale" }),
-        /* @__PURE__ */ jsx2(Select, { value: freqScale, onChange: (e) => setFreqScale(e.target.value), children: FREQ_SCALES.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: s }, s)) })
+        /* @__PURE__ */ jsx2(
+          Select,
+          {
+            value: freqScale,
+            onChange: (e) => setFreqScale(e.target.value),
+            children: FREQ_SCALES.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: s }, s))
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs2(Field, { children: [
         /* @__PURE__ */ jsx2(Label, { children: "Color Map" }),
-        /* @__PURE__ */ jsx2(Select, { value: localColorMap, onChange: (e) => setLocalColorMap(e.target.value), children: COLOR_MAPS.map((c) => /* @__PURE__ */ jsx2("option", { value: c, children: c }, c)) })
+        /* @__PURE__ */ jsx2(
+          Select,
+          {
+            value: localColorMap,
+            onChange: (e) => setLocalColorMap(e.target.value),
+            children: COLOR_MAPS.map((c) => /* @__PURE__ */ jsx2("option", { value: c, children: c }, c))
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs2(Field, { children: [
         /* @__PURE__ */ jsx2(Label, { children: "Min Frequency (Hz)" }),
@@ -3727,7 +3757,14 @@ var SpectrogramSettingsModal = ({
         )
       ] }),
       /* @__PURE__ */ jsx2(Field, { $span: true, children: /* @__PURE__ */ jsxs2(CheckboxLabel, { children: [
-        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: showLabels, onChange: (e) => setShowLabels(e.target.checked) }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "checkbox",
+            checked: showLabels,
+            onChange: (e) => setShowLabels(e.target.checked)
+          }
+        ),
         "Show Frequency Labels"
       ] }) })
     ] }),
@@ -3850,10 +3887,7 @@ function createSpectrogramWorker(worker) {
       });
     },
     registerCanvas(canvasId, canvas) {
-      worker.postMessage(
-        { type: "register-canvas", canvasId, canvas },
-        [canvas]
-      );
+      worker.postMessage({ type: "register-canvas", canvasId, canvas }, [canvas]);
     },
     unregisterCanvas(canvasId) {
       worker.postMessage({ type: "unregister-canvas", canvasId });
@@ -3907,24 +3941,32 @@ function createSpectrogramWorker(worker) {
 
 // src/SpectrogramProvider.tsx
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback, useMemo } from "react";
-import { SpectrogramIntegrationProvider } from "@waveform-playlist/browser";
+import {
+  MAX_CANVAS_WIDTH
+} from "@waveform-playlist/core";
+import {
+  SpectrogramIntegrationProvider
+} from "@waveform-playlist/browser";
 import { usePlaylistData, usePlaylistControls } from "@waveform-playlist/browser";
 import { jsx as jsx3 } from "react/jsx-runtime";
+function extractChunkNumber(canvasId) {
+  const match = canvasId.match(/chunk(\d+)$/);
+  if (!match) {
+    console.warn(`[spectrogram] Unexpected canvas ID format: ${canvasId}`);
+    return 0;
+  }
+  return parseInt(match[1], 10);
+}
 var SpectrogramProvider = ({
   config: spectrogramConfig,
   colorMap: spectrogramColorMap,
   children
 }) => {
-  const {
-    tracks,
-    waveHeight,
-    samplesPerPixel,
-    isReady,
-    mono,
-    controls
-  } = usePlaylistData();
+  const { tracks, waveHeight, samplesPerPixel, isReady, mono, controls } = usePlaylistData();
   const { scrollContainerRef } = usePlaylistControls();
-  const [spectrogramDataMap, setSpectrogramDataMap] = useState2(/* @__PURE__ */ new Map());
+  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);
@@ -4073,9 +4115,7 @@ var SpectrogramProvider = ({
       if (mode === "waveform") return;
       const trackConfigChanged = configChanged && currentKeys.get(track.id) !== prevKeys.get(track.id);
       const trackFFTChanged = fftKeyChanged && currentFFTKeys.get(track.id) !== prevFFTKeys.get(track.id);
-      const hasRegisteredCanvases = canvasVersionChanged && track.clips.some(
-        (clip) => spectrogramCanvasRegistryRef.current.has(clip.id)
-      );
+      const hasRegisteredCanvases = canvasVersionChanged && track.clips.some((clip) => spectrogramCanvasRegistryRef.current.has(clip.id));
       if (!trackConfigChanged && !hasRegisteredCanvases) return;
       const cfg = trackSpectrogramOverrides.get(track.id)?.config ?? track.spectrogramConfig ?? spectrogramConfig ?? {};
       const cm = trackSpectrogramOverrides.get(track.id)?.colorMap ?? track.spectrogramColorMap ?? spectrogramColorMap ?? "viridis";
@@ -4133,7 +4173,13 @@ var SpectrogramProvider = ({
             } else {
               for (let ch = 0; ch < clip.audioBuffer.numberOfChannels; ch++) {
                 channelSpectrograms.push(
-                  computeSpectrogram(clip.audioBuffer, item.config, item.offsetSamples, item.durationSamples, ch)
+                  computeSpectrogram(
+                    clip.audioBuffer,
+                    item.config,
+                    item.offsetSamples,
+                    item.durationSamples,
+                    ch
+                  )
                 );
               }
             }
@@ -4146,26 +4192,25 @@ var SpectrogramProvider = ({
       }
       return;
     }
-    const getVisibleChunkRange = (canvasWidths, clipPixelOffset = 0) => {
+    const getVisibleChunkRange = (channelInfo, clipPixelOffset = 0) => {
       const container = scrollContainerRef.current;
       if (!container) {
-        return { visibleIndices: canvasWidths.map((_, i) => i), remainingIndices: [] };
+        return { visibleIndices: channelInfo.canvasWidths.map((_, i) => i), remainingIndices: [] };
       }
       const scrollLeft = container.scrollLeft;
       const viewportWidth = container.clientWidth;
       const controlWidth = controls.show ? controls.width : 0;
       const visibleIndices = [];
       const remainingIndices = [];
-      let offset = 0;
-      for (let i = 0; i < canvasWidths.length; i++) {
-        const chunkLeft = offset + controlWidth + clipPixelOffset;
-        const chunkRight = chunkLeft + canvasWidths[i];
+      for (let i = 0; i < channelInfo.canvasWidths.length; i++) {
+        const chunkNumber = extractChunkNumber(channelInfo.canvasIds[i]);
+        const chunkLeft = chunkNumber * MAX_CANVAS_WIDTH + controlWidth + clipPixelOffset;
+        const chunkRight = chunkLeft + channelInfo.canvasWidths[i];
         if (chunkRight > scrollLeft && chunkLeft < scrollLeft + viewportWidth) {
           visibleIndices.push(i);
         } else {
           remainingIndices.push(i);
         }
-        offset += canvasWidths[i];
       }
       return { visibleIndices, remainingIndices };
     };
@@ -4175,11 +4220,8 @@ var SpectrogramProvider = ({
       const canvasWidths = indices.map((i) => channelInfo.canvasWidths[i]);
       const globalPixelOffsets = [];
       for (const idx of indices) {
-        let offset = 0;
-        for (let j = 0; j < idx; j++) {
-          offset += channelInfo.canvasWidths[j];
-        }
-        globalPixelOffsets.push(offset);
+        const chunkNumber = extractChunkNumber(channelInfo.canvasIds[idx]);
+        globalPixelOffsets.push(chunkNumber * MAX_CANVAS_WIDTH);
       }
       const colorLUT = getColorMap(item.colorMap);
       await api.renderChunks({
@@ -4202,6 +4244,25 @@ var SpectrogramProvider = ({
     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);
+              }
+            });
+            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return true;
+            await renderChunkSubset(workerApi, cacheKey, channelInfo, batch, item, ch);
+          }
+        }
+        return false;
+      };
       for (const item of clipsNeedingFFT) {
         if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
         try {
@@ -4231,7 +4292,10 @@ var SpectrogramProvider = ({
                   item.offsetSamples + Math.ceil(localEndPx * samplesPerPixel)
                 );
                 const paddedStart = Math.max(item.offsetSamples, visStartSample - windowSize);
-                const paddedEnd = Math.min(item.offsetSamples + item.durationSamples, visEndSample + windowSize);
+                const paddedEnd = Math.min(
+                  item.offsetSamples + item.durationSamples,
+                  visEndSample + windowSize
+                );
                 if (paddedEnd - paddedStart < item.durationSamples * 0.8) {
                   visibleRange = { start: paddedStart, end: paddedEnd };
                 }
@@ -4253,8 +4317,15 @@ var SpectrogramProvider = ({
               for (let ch = 0; ch < numChannels; ch++) {
                 const channelInfo = clipCanvasInfo.get(ch);
                 if (!channelInfo) continue;
-                const { visibleIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
-                await renderChunkSubset(workerApi, visibleCacheKey, channelInfo, visibleIndices, item, ch);
+                const { visibleIndices } = getVisibleChunkRange(channelInfo, clipPixelOffset);
+                await renderChunkSubset(
+                  workerApi,
+                  visibleCacheKey,
+                  channelInfo,
+                  visibleIndices,
+                  item,
+                  ch
+                );
               }
               if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
             }
@@ -4269,27 +4340,23 @@ var SpectrogramProvider = ({
             });
             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 { visibleIndices, remainingIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
-              await renderChunkSubset(workerApi, cacheKey, channelInfo, visibleIndices, item, ch);
-              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-              const BATCH_SIZE = 4;
-              for (let batchStart = 0; batchStart < remainingIndices.length; batchStart += BATCH_SIZE) {
-                if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-                const batch = remainingIndices.slice(batchStart, batchStart + BATCH_SIZE);
-                await new Promise((resolve) => {
-                  if (typeof requestIdleCallback === "function") {
-                    requestIdleCallback(() => resolve());
-                  } else {
-                    setTimeout(resolve, 0);
-                  }
-                });
-                if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-                await renderChunkSubset(workerApi, cacheKey, channelInfo, batch, item, ch);
-              }
+              const range = getVisibleChunkRange(channelInfo, clipPixelOffset);
+              channelRanges.push({ ch, channelInfo, ...range });
+              await renderChunkSubset(
+                workerApi,
+                cacheKey,
+                channelInfo,
+                range.visibleIndices,
+                item,
+                ch
+              );
             }
+            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+            if (await renderBackgroundBatches(channelRanges, cacheKey, item)) return;
           } else {
             const spectrograms = await workerApi.compute({
               channelDataArrays: item.channelDataArrays,
@@ -4318,27 +4385,19 @@ var SpectrogramProvider = ({
         if (!clipCanvasInfo || clipCanvasInfo.size === 0) continue;
         try {
           const clipPixelOffset = Math.floor(item.clipStartSample / samplesPerPixel);
+          const channelRanges = [];
           for (let ch = 0; ch < item.numChannels; ch++) {
             const channelInfo = clipCanvasInfo.get(ch);
             if (!channelInfo) continue;
-            const { visibleIndices, remainingIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
+            const { visibleIndices, remainingIndices } = getVisibleChunkRange(
+              channelInfo,
+              clipPixelOffset
+            );
+            channelRanges.push({ ch, channelInfo, remainingIndices });
             await renderChunkSubset(workerApi, cacheKey, channelInfo, visibleIndices, item, ch);
-            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-            const BATCH_SIZE = 4;
-            for (let batchStart = 0; batchStart < remainingIndices.length; batchStart += BATCH_SIZE) {
-              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-              const batch = remainingIndices.slice(batchStart, batchStart + BATCH_SIZE);
-              await new Promise((resolve) => {
-                if (typeof requestIdleCallback === "function") {
-                  requestIdleCallback(() => resolve());
-                } else {
-                  setTimeout(resolve, 0);
-                }
-              });
-              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
-              await renderChunkSubset(workerApi, cacheKey, channelInfo, batch, item, ch);
-            }
           }
+          if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+          if (await renderBackgroundBatches(channelRanges, cacheKey, item)) return;
         } catch (err) {
           console.warn("Spectrogram display re-render error for clip", item.clipId, err);
         }
@@ -4347,7 +4406,18 @@ var SpectrogramProvider = ({
     computeAsync().catch((err) => {
       console.error("[waveform-playlist] Spectrogram computation failed:", err);
     });
-  }, [tracks, mono, spectrogramConfig, spectrogramColorMap, trackSpectrogramOverrides, waveHeight, samplesPerPixel, spectrogramCanvasVersion, controls, scrollContainerRef]);
+  }, [
+    tracks,
+    mono,
+    spectrogramConfig,
+    spectrogramColorMap,
+    trackSpectrogramOverrides,
+    waveHeight,
+    samplesPerPixel,
+    spectrogramCanvasVersion,
+    controls,
+    scrollContainerRef
+  ]);
   const setTrackRenderMode = useCallback((trackId, mode) => {
     setTrackSpectrogramOverrides((prev) => {
       const next = new Map(prev);
@@ -4356,26 +4426,32 @@ var SpectrogramProvider = ({
       return next;
     });
   }, []);
-  const setTrackSpectrogramConfig = useCallback((trackId, config, colorMap) => {
-    setTrackSpectrogramOverrides((prev) => {
-      const next = new Map(prev);
-      const existing = next.get(trackId);
-      next.set(trackId, {
-        renderMode: existing?.renderMode ?? "waveform",
-        config,
-        ...colorMap !== void 0 ? { colorMap } : { colorMap: existing?.colorMap }
+  const setTrackSpectrogramConfig = useCallback(
+    (trackId, config, colorMap) => {
+      setTrackSpectrogramOverrides((prev) => {
+        const next = new Map(prev);
+        const existing = next.get(trackId);
+        next.set(trackId, {
+          renderMode: existing?.renderMode ?? "waveform",
+          config,
+          ...colorMap !== void 0 ? { colorMap } : { colorMap: existing?.colorMap }
+        });
+        return next;
       });
-      return next;
-    });
-  }, []);
-  const registerSpectrogramCanvases = useCallback((clipId, channelIndex, canvasIds, canvasWidths) => {
-    const registry = spectrogramCanvasRegistryRef.current;
-    if (!registry.has(clipId)) {
-      registry.set(clipId, /* @__PURE__ */ new Map());
-    }
-    registry.get(clipId).set(channelIndex, { canvasIds, canvasWidths });
-    setSpectrogramCanvasVersion((v) => v + 1);
-  }, []);
+    },
+    []
+  );
+  const registerSpectrogramCanvases = useCallback(
+    (clipId, channelIndex, canvasIds, canvasWidths) => {
+      const registry = spectrogramCanvasRegistryRef.current;
+      if (!registry.has(clipId)) {
+        registry.set(clipId, /* @__PURE__ */ new Map());
+      }
+      registry.get(clipId).set(channelIndex, { canvasIds, canvasWidths });
+      setSpectrogramCanvasVersion((v) => v + 1);
+    },
+    []
+  );
   const unregisterSpectrogramCanvases = useCallback((clipId, channelIndex) => {
     const registry = spectrogramCanvasRegistryRef.current;
     const clipChannels = registry.get(clipId);
@@ -4386,40 +4462,46 @@ var SpectrogramProvider = ({
       }
     }
   }, []);
-  const renderMenuItems = useCallback((props) => {
-    return SpectrogramMenuItems({
-      renderMode: props.renderMode,
-      onRenderModeChange: props.onRenderModeChange,
-      onOpenSettings: props.onOpenSettings,
-      onClose: props.onClose
-    });
-  }, []);
-  const value = useMemo(() => ({
-    spectrogramDataMap,
-    trackSpectrogramOverrides,
-    spectrogramWorkerApi: spectrogramWorkerReady ? spectrogramWorkerRef.current : null,
-    spectrogramConfig,
-    spectrogramColorMap,
-    setTrackRenderMode,
-    setTrackSpectrogramConfig,
-    registerSpectrogramCanvases,
-    unregisterSpectrogramCanvases,
-    renderMenuItems,
-    SettingsModal: SpectrogramSettingsModal,
-    getColorMap,
-    getFrequencyScale
-  }), [
-    spectrogramDataMap,
-    trackSpectrogramOverrides,
-    spectrogramWorkerReady,
-    spectrogramConfig,
-    spectrogramColorMap,
-    setTrackRenderMode,
-    setTrackSpectrogramConfig,
-    registerSpectrogramCanvases,
-    unregisterSpectrogramCanvases,
-    renderMenuItems
-  ]);
+  const renderMenuItems = useCallback(
+    (props) => {
+      return SpectrogramMenuItems({
+        renderMode: props.renderMode,
+        onRenderModeChange: props.onRenderModeChange,
+        onOpenSettings: props.onOpenSettings,
+        onClose: props.onClose
+      });
+    },
+    []
+  );
+  const value = useMemo(
+    () => ({
+      spectrogramDataMap,
+      trackSpectrogramOverrides,
+      spectrogramWorkerApi: spectrogramWorkerReady ? spectrogramWorkerRef.current : null,
+      spectrogramConfig,
+      spectrogramColorMap,
+      setTrackRenderMode,
+      setTrackSpectrogramConfig,
+      registerSpectrogramCanvases,
+      unregisterSpectrogramCanvases,
+      renderMenuItems,
+      SettingsModal: SpectrogramSettingsModal,
+      getColorMap,
+      getFrequencyScale
+    }),
+    [
+      spectrogramDataMap,
+      trackSpectrogramOverrides,
+      spectrogramWorkerReady,
+      spectrogramConfig,
+      spectrogramColorMap,
+      setTrackRenderMode,
+      setTrackSpectrogramConfig,
+      registerSpectrogramCanvases,
+      unregisterSpectrogramCanvases,
+      renderMenuItems
+    ]
+  );
   return /* @__PURE__ */ jsx3(SpectrogramIntegrationProvider, { value, children });
 };
 export {