@waveform-playlist/spectrogram 7.1.2 → 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,8 +3941,12 @@ function createSpectrogramWorker(worker) {
 
 // src/SpectrogramProvider.tsx
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback, useMemo } from "react";
-import { MAX_CANVAS_WIDTH } from "@waveform-playlist/core";
-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) {
@@ -3924,16 +3962,11 @@ var SpectrogramProvider = ({
   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);
@@ -4082,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";
@@ -4142,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
+                  )
                 );
               }
             }
@@ -4255,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 };
                 }
@@ -4278,7 +4318,14 @@ var SpectrogramProvider = ({
                 const channelInfo = clipCanvasInfo.get(ch);
                 if (!channelInfo) continue;
                 const { visibleIndices } = getVisibleChunkRange(channelInfo, clipPixelOffset);
-                await renderChunkSubset(workerApi, visibleCacheKey, channelInfo, visibleIndices, item, ch);
+                await renderChunkSubset(
+                  workerApi,
+                  visibleCacheKey,
+                  channelInfo,
+                  visibleIndices,
+                  item,
+                  ch
+                );
               }
               if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
             }
@@ -4299,7 +4346,14 @@ var SpectrogramProvider = ({
               if (!channelInfo) continue;
               const range = getVisibleChunkRange(channelInfo, clipPixelOffset);
               channelRanges.push({ ch, channelInfo, ...range });
-              await renderChunkSubset(workerApi, cacheKey, channelInfo, range.visibleIndices, item, ch);
+              await renderChunkSubset(
+                workerApi,
+                cacheKey,
+                channelInfo,
+                range.visibleIndices,
+                item,
+                ch
+              );
             }
             if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
             if (await renderBackgroundBatches(channelRanges, cacheKey, item)) return;
@@ -4335,7 +4389,10 @@ 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 { visibleIndices, remainingIndices } = getVisibleChunkRange(
+              channelInfo,
+              clipPixelOffset
+            );
             channelRanges.push({ ch, channelInfo, remainingIndices });
             await renderChunkSubset(workerApi, cacheKey, channelInfo, visibleIndices, item, ch);
           }
@@ -4349,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);
@@ -4358,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);
@@ -4388,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 {