@waveform-playlist/spectrogram 13.0.0 → 13.0.2

package/dist/index.mjs

@@ -389,7 +389,7 @@ var SpectrogramSettingsModal = ({
 // src/SpectrogramProvider.tsx
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback, useMemo } from "react";
 import {
-  MAX_CANVAS_WIDTH
+  MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2
 } from "@waveform-playlist/core";
 import {
   getColorMap,
@@ -397,11 +397,11 @@ import {
   createSpectrogramWorkerPool,
   SpectrogramAbortError
 } from "@dawcore/spectrogram";
+
+// src/spectrogram-helpers.ts
 import {
-  SpectrogramIntegrationProvider
-} from "@waveform-playlist/browser";
-import { usePlaylistData, usePlaylistControls } from "@waveform-playlist/browser";
-import { jsx as jsx3 } from "react/jsx-runtime";
+  MAX_CANVAS_WIDTH
+} from "@waveform-playlist/core";
 function extractChunkNumber(canvasId) {
   const match = canvasId.match(/chunk(\d+)$/);
   if (!match) {
@@ -410,6 +410,116 @@ function extractChunkNumber(canvasId) {
   }
   return parseInt(match[1], 10);
 }
+function parseCanvasId(canvasId) {
+  const match = canvasId.match(/^(.+)-ch(\d+)-chunk\d+$/);
+  if (!match) return null;
+  return { clipId: match[1], channelIndex: parseInt(match[2], 10) };
+}
+function 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;
+}
+function classifyChunkTiers(channelInfo, clipPixelOffset = 0, viewport) {
+  if (!viewport) {
+    return {
+      viewportIndices: channelInfo.canvasWidths.map((_, i) => i),
+      bufferIndices: [],
+      remainingIndices: []
+    };
+  }
+  const { scrollLeft, viewportWidth } = viewport;
+  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 + clipPixelOffset;
+    const chunkRight = chunkLeft + channelInfo.canvasWidths[i];
+    if (chunkRight > scrollLeft && chunkLeft < scrollLeft + viewportWidth) {
+      viewportIndices.push(i);
+    } else if (chunkRight > bufferStart && chunkLeft < bufferEnd) {
+      bufferIndices.push(i);
+    } else {
+      remainingIndices.push(i);
+    }
+  }
+  return { viewportIndices, bufferIndices, remainingIndices };
+}
+function computeChunkSampleRange({
+  channelInfo,
+  indices,
+  fftSize,
+  offsetSamples,
+  durationSamples,
+  samplesPerPixel
+}) {
+  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 rangeStartSample = offsetSamples + Math.floor(startPx * samplesPerPixel);
+  const rangeEndSample = Math.min(
+    offsetSamples + durationSamples,
+    offsetSamples + Math.ceil(endPx * samplesPerPixel)
+  );
+  const paddedStart = Math.max(offsetSamples, rangeStartSample - fftSize);
+  const paddedEnd = Math.min(offsetSamples + durationSamples, rangeEndSample + fftSize);
+  return { paddedStart, paddedEnd };
+}
+function resolveRenderMode(override, trackRenderMode) {
+  return override?.renderMode ?? trackRenderMode ?? "waveform";
+}
+function toComputeConfig(cfg) {
+  return {
+    fftSize: cfg?.fftSize,
+    hopSize: cfg?.hopSize,
+    windowFunction: cfg?.windowFunction,
+    alpha: cfg?.alpha,
+    zeroPaddingFactor: cfg?.zeroPaddingFactor
+  };
+}
+function buildConfigKey(params) {
+  const { mode, cfg, cm, mono } = params;
+  return JSON.stringify({ mode, cfg, cm, mono });
+}
+function buildFFTKey(params) {
+  const { mode, mono, computeConfig } = params;
+  return JSON.stringify({ mode, mono, ...computeConfig });
+}
+function mapsDiffer(prev, current) {
+  if (current.size !== prev.size) return true;
+  for (const [key, value] of current) {
+    if (prev.get(key) !== value) return true;
+  }
+  return false;
+}
+
+// src/SpectrogramProvider.tsx
+import {
+  SpectrogramIntegrationProvider
+} from "@waveform-playlist/browser";
+import { usePlaylistData, usePlaylistControls } from "@waveform-playlist/browser";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var SpectrogramProvider = ({
   config: spectrogramConfig,
   colorMap: spectrogramColorMap,
@@ -481,40 +591,21 @@ var SpectrogramProvider = ({
     const currentKeys = /* @__PURE__ */ new Map();
     const currentFFTKeys = /* @__PURE__ */ new Map();
     tracks.forEach((track) => {
-      const mode = trackSpectrogramOverrides.get(track.id)?.renderMode ?? track.renderMode ?? "waveform";
+      const override = trackSpectrogramOverrides.get(track.id);
+      const mode = resolveRenderMode(override, track.renderMode);
       if (mode === "waveform") return;
-      const cfg = trackSpectrogramOverrides.get(track.id)?.config ?? track.spectrogramConfig ?? spectrogramConfig;
-      const cm = trackSpectrogramOverrides.get(track.id)?.colorMap ?? track.spectrogramColorMap ?? spectrogramColorMap;
-      currentKeys.set(track.id, JSON.stringify({ mode, cfg, cm, mono }));
-      const computeConfig = {
-        fftSize: cfg?.fftSize,
-        hopSize: cfg?.hopSize,
-        windowFunction: cfg?.windowFunction,
-        alpha: cfg?.alpha,
-        zeroPaddingFactor: cfg?.zeroPaddingFactor
-      };
-      currentFFTKeys.set(track.id, JSON.stringify({ mode, mono, ...computeConfig }));
+      const cfg = override?.config ?? track.spectrogramConfig ?? spectrogramConfig;
+      const cm = override?.colorMap ?? track.spectrogramColorMap ?? spectrogramColorMap;
+      currentKeys.set(track.id, buildConfigKey({ mode, cfg, cm, mono }));
+      currentFFTKeys.set(
+        track.id,
+        buildFFTKey({ mode, mono, computeConfig: toComputeConfig(cfg) })
+      );
     });
     const prevKeys = prevSpectrogramConfigRef.current;
     const prevFFTKeys = prevSpectrogramFFTKeyRef.current;
-    let configChanged = currentKeys.size !== prevKeys.size;
-    if (!configChanged) {
-      for (const [idx, key] of currentKeys) {
-        if (prevKeys.get(idx) !== key) {
-          configChanged = true;
-          break;
-        }
-      }
-    }
-    let fftKeyChanged = currentFFTKeys.size !== prevFFTKeys.size;
-    if (!fftKeyChanged) {
-      for (const [idx, key] of currentFFTKeys) {
-        if (prevFFTKeys.get(idx) !== key) {
-          fftKeyChanged = true;
-          break;
-        }
-      }
-    }
+    const configChanged = mapsDiffer(prevKeys, currentKeys);
+    const fftKeyChanged = mapsDiffer(prevFFTKeys, currentFFTKeys);
     const canvasVersionChanged = spectrogramCanvasVersion !== prevCanvasVersionRef.current;
     prevCanvasVersionRef.current = spectrogramCanvasVersion;
     if (!configChanged && !canvasVersionChanged) return;
@@ -549,14 +640,15 @@ var SpectrogramProvider = ({
     const clipsNeedingFFT = [];
     const clipsNeedingDisplayOnly = [];
     tracks.forEach((track, i) => {
-      const mode = trackSpectrogramOverrides.get(track.id)?.renderMode ?? track.renderMode ?? "waveform";
+      const override = trackSpectrogramOverrides.get(track.id);
+      const mode = resolveRenderMode(override, track.renderMode);
       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));
       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";
+      const cfg = override?.config ?? track.spectrogramConfig ?? spectrogramConfig ?? {};
+      const cm = override?.colorMap ?? track.spectrogramColorMap ?? spectrogramColorMap ?? "viridis";
       for (const clip of track.clips) {
         if (!clip.audioBuffer) continue;
         const monoFlag = mono || clip.audioBuffer.numberOfChannels === 1;
@@ -601,34 +693,11 @@ var SpectrogramProvider = ({
     if (clipsNeedingFFT.length === 0 && clipsNeedingDisplayOnly.length === 0) return;
     const getVisibleChunkRange = (channelInfo, clipPixelOffset = 0) => {
       const container = scrollContainerRef.current;
-      if (!container) {
-        return {
-          viewportIndices: channelInfo.canvasWidths.map((_, i) => i),
-          bufferIndices: [],
-          remainingIndices: []
-        };
-      }
-      const scrollLeft = container.scrollLeft;
-      const viewportWidth = container.clientWidth;
-      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 + clipPixelOffset;
-        const chunkRight = chunkLeft + channelInfo.canvasWidths[i];
-        if (chunkRight > scrollLeft && chunkLeft < scrollLeft + viewportWidth) {
-          viewportIndices.push(i);
-        } else if (chunkRight > bufferStart && chunkLeft < bufferEnd) {
-          bufferIndices.push(i);
-        } else {
-          remainingIndices.push(i);
-        }
-      }
-      return { viewportIndices, bufferIndices, remainingIndices };
+      return classifyChunkTiers(
+        channelInfo,
+        clipPixelOffset,
+        container ? { scrollLeft: container.scrollLeft, viewportWidth: container.clientWidth } : null
+      );
     };
     const renderChunkSubset = async (api, cacheKey, channelInfo, indices, item, channelIndex, gen) => {
       if (indices.length === 0) return;
@@ -637,7 +706,7 @@ var SpectrogramProvider = ({
       const globalPixelOffsets = [];
       for (const idx of indices) {
         const chunkNumber = extractChunkNumber(channelInfo.canvasIds[idx]);
-        globalPixelOffsets.push(chunkNumber * MAX_CANVAS_WIDTH);
+        globalPixelOffsets.push(chunkNumber * MAX_CANVAS_WIDTH2);
       }
       const colorLUT = getColorMap(item.colorMap);
       await api.renderChunks(
@@ -661,24 +730,14 @@ var SpectrogramProvider = ({
       );
     };
     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 { paddedStart, paddedEnd } = computeChunkSampleRange({
+        channelInfo,
+        indices,
+        fftSize: item.config.fftSize ?? 2048,
+        offsetSamples: item.offsetSamples,
+        durationSamples: item.durationSamples,
+        samplesPerPixel
+      });
       const { cacheKey } = await api.computeFFT(
         {
           clipId: item.clipId,
@@ -694,24 +753,6 @@ var SpectrogramProvider = ({
       );
       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;
@@ -1001,10 +1042,9 @@ var SpectrogramProvider = ({
         );
       }
     }
-    const match = canvasId.match(/^(.+)-ch(\d+)-chunk\d+$/);
-    if (!match) return;
-    const clipId = match[1];
-    const channelIndex = parseInt(match[2], 10);
+    const parsed = parseCanvasId(canvasId);
+    if (!parsed) return;
+    const { clipId, channelIndex } = parsed;
     const registry = spectrogramCanvasRegistryRef.current;
     const perClip = registry.get(clipId);
     if (!perClip) return;