@waveform-playlist/spectrogram 7.1.1 → 7.1.2

package/dist/index.mjs

@@ -3907,9 +3907,18 @@ 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 { 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,
@@ -4146,26 +4155,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 +4183,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 +4207,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 {
@@ -4253,7 +4277,7 @@ var SpectrogramProvider = ({
               for (let ch = 0; ch < numChannels; ch++) {
                 const channelInfo = clipCanvasInfo.get(ch);
                 if (!channelInfo) continue;
-                const { visibleIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
+                const { visibleIndices } = getVisibleChunkRange(channelInfo, clipPixelOffset);
                 await renderChunkSubset(workerApi, visibleCacheKey, channelInfo, visibleIndices, item, ch);
               }
               if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
@@ -4269,27 +4293,16 @@ 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 +4331,16 @@ 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);
         }