@waveform-playlist/ui-components 6.0.0 → 6.0.2

package/dist/index.mjs

@@ -1927,6 +1927,7 @@ function defaultGetColorMap() {
 }
 var SpectrogramChannel = ({
   index,
+  channelIndex: channelIndexProp,
   data,
   length,
   waveHeight,
@@ -1940,6 +1941,7 @@ var SpectrogramChannel = ({
   clipId,
   onCanvasesReady
 }) => {
+  const channelIndex = channelIndexProp ?? index;
   const canvasesRef = useRef4([]);
   const registeredIdsRef = useRef4([]);
   const transferredCanvasesRef = useRef4(/* @__PURE__ */ new WeakSet());
@@ -1964,7 +1966,7 @@ var SpectrogramChannel = ({
       const canvas = canvases2[i];
       if (!canvas) continue;
       if (transferredCanvasesRef.current.has(canvas)) continue;
-      const canvasId = `${clipId}-ch${index}-chunk${i}`;
+      const canvasId = `${clipId}-ch${channelIndex}-chunk${i}`;
       try {
         const offscreen = canvas.transferControlToOffscreen();
         workerApi.registerCanvas(canvasId, offscreen);
@@ -1986,7 +1988,7 @@ var SpectrogramChannel = ({
       }
       registeredIdsRef.current = [];
     };
-  }, [isWorkerMode, clipId, index, length]);
+  }, [isWorkerMode, clipId, channelIndex, length]);
   const lut = colorLUT ?? defaultGetColorMap();
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? ((f, minF, maxF2) => (f - minF) / (maxF2 - minF));
@@ -2138,6 +2140,7 @@ var SmartChannel = ({
         SpectrogramChannel,
         {
           index: props.index * 2,
+          channelIndex: props.index,
           data: spectrogramData,
           length: props.length,
           waveHeight: halfHeight,