@waveform-playlist/spectrogram 7.1.2 → 7.1.3

package/dist/index.js

@@ -3606,7 +3606,14 @@ var ModalButton = import_styled_components2.default.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 = ({
@@ -3628,7 +3635,9 @@ var SpectrogramSettingsModal = ({
   const [gainDb, setGainDb] = (0, import_react.useState)(config.gainDb ?? 20);
   const [rangeDb, setRangeDb] = (0, import_react.useState)(config.rangeDb ?? 80);
   const [zeroPadding, setZeroPadding] = (0, import_react.useState)(config.zeroPaddingFactor ?? 2);
-  const [hopSize, setHopSize] = (0, import_react.useState)(config.hopSize ?? Math.floor((config.fftSize ?? 2048) / 4));
+  const [hopSize, setHopSize] = (0, import_react.useState)(
+    config.hopSize ?? Math.floor((config.fftSize ?? 2048) / 4)
+  );
   const [showLabels, setShowLabels] = (0, import_react.useState)(config.labels ?? false);
   (0, import_react.useEffect)(() => {
     setFftSize(config.fftSize ?? 2048);
@@ -3682,11 +3691,18 @@ var SpectrogramSettingsModal = ({
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(FormGrid, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Field, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children: "FFT Size" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { value: fftSize, onChange: (e) => {
-          const v = Number(e.target.value);
-          setFftSize(v);
-          setHopSize(Math.floor(v / 4));
-        }, children: FFT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: s, children: s }, s)) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Select,
+          {
+            value: fftSize,
+            onChange: (e) => {
+              const v = Number(e.target.value);
+              setFftSize(v);
+              setHopSize(Math.floor(v / 4));
+            },
+            children: FFT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: s, children: s }, s))
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Field, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children: "Hop Size" }),
@@ -3707,11 +3723,25 @@ var SpectrogramSettingsModal = ({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Field, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children: "Frequency Scale" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { value: freqScale, onChange: (e) => setFreqScale(e.target.value), children: FREQ_SCALES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: s, children: s }, s)) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Select,
+          {
+            value: freqScale,
+            onChange: (e) => setFreqScale(e.target.value),
+            children: FREQ_SCALES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: s, children: s }, s))
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Field, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children: "Color Map" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { value: localColorMap, onChange: (e) => setLocalColorMap(e.target.value), children: COLOR_MAPS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: c, children: c }, c)) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Select,
+          {
+            value: localColorMap,
+            onChange: (e) => setLocalColorMap(e.target.value),
+            children: COLOR_MAPS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: c, children: c }, c))
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Field, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children: "Min Frequency (Hz)" }),
@@ -3770,7 +3800,14 @@ var SpectrogramSettingsModal = ({
         )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Field, { $span: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CheckboxLabel, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", checked: showLabels, onChange: (e) => setShowLabels(e.target.checked) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: showLabels,
+            onChange: (e) => setShowLabels(e.target.checked)
+          }
+        ),
         "Show Frequency Labels"
       ] }) })
     ] }),
@@ -3893,10 +3930,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 });
@@ -3968,16 +4002,11 @@ var SpectrogramProvider = ({
   colorMap: spectrogramColorMap,
   children
 }) => {
-  const {
-    tracks,
-    waveHeight,
-    samplesPerPixel,
-    isReady,
-    mono,
-    controls
-  } = (0, import_browser2.usePlaylistData)();
+  const { tracks, waveHeight, samplesPerPixel, isReady, mono, controls } = (0, import_browser2.usePlaylistData)();
   const { scrollContainerRef } = (0, import_browser2.usePlaylistControls)();
-  const [spectrogramDataMap, setSpectrogramDataMap] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
+  const [spectrogramDataMap, setSpectrogramDataMap] = (0, import_react2.useState)(
+    /* @__PURE__ */ new Map()
+  );
   const [trackSpectrogramOverrides, setTrackSpectrogramOverrides] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
   const spectrogramCanvasRegistryRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const [spectrogramCanvasVersion, setSpectrogramCanvasVersion] = (0, import_react2.useState)(0);
@@ -4126,9 +4155,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";
@@ -4186,7 +4213,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
+                  )
                 );
               }
             }
@@ -4299,7 +4332,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 };
                 }
@@ -4322,7 +4358,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;
             }
@@ -4343,7 +4386,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;
@@ -4379,7 +4429,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);
           }
@@ -4393,7 +4446,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 = (0, import_react2.useCallback)((trackId, mode) => {
     setTrackSpectrogramOverrides((prev) => {
       const next = new Map(prev);
@@ -4402,26 +4466,32 @@ var SpectrogramProvider = ({
       return next;
     });
   }, []);
-  const setTrackSpectrogramConfig = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.useCallback)((clipId, channelIndex) => {
     const registry = spectrogramCanvasRegistryRef.current;
     const clipChannels = registry.get(clipId);
@@ -4432,40 +4502,46 @@ var SpectrogramProvider = ({
       }
     }
   }, []);
-  const renderMenuItems = (0, import_react2.useCallback)((props) => {
-    return SpectrogramMenuItems({
-      renderMode: props.renderMode,
-      onRenderModeChange: props.onRenderModeChange,
-      onOpenSettings: props.onOpenSettings,
-      onClose: props.onClose
-    });
-  }, []);
-  const value = (0, import_react2.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 = (0, import_react2.useCallback)(
+    (props) => {
+      return SpectrogramMenuItems({
+        renderMode: props.renderMode,
+        onRenderModeChange: props.onRenderModeChange,
+        onOpenSettings: props.onOpenSettings,
+        onClose: props.onClose
+      });
+    },
+    []
+  );
+  const value = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsx)(import_browser.SpectrogramIntegrationProvider, { value, children });
 };
 // Annotate the CommonJS export names for ESM import in node: