@waveform-playlist/ui-components 13.1.0 → 13.1.1

package/dist/index.mjs

@@ -2345,7 +2345,11 @@ var usePlayoutStatusUpdate = () => useContext8(PlayoutStatusUpdateContext);
 // src/components/SpectrogramChannel.tsx
 import { useRef as useRef7, useEffect as useEffect6 } from "react";
 import styled20 from "styled-components";
-import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
+import {
+  MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3,
+  buildSpectrogramCanvasId,
+  parseSpectrogramCanvasId
+} from "@waveform-playlist/core";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Wrapper4 = styled20.div.attrs((props) => ({
   style: {
@@ -2402,12 +2406,12 @@ var SpectrogramChannel = ({
     const register = onCanvasRegisterRef.current;
     const remaining = [];
     for (const id of registeredIdsRef.current) {
-      const match = id.match(/chunk(\d+)$/);
-      if (!match) {
+      const parsed = parseSpectrogramCanvasId(id);
+      if (!parsed) {
         remaining.push(id);
         continue;
       }
-      const chunkIdx = parseInt(match[1], 10);
+      const chunkIdx = parsed.chunkIndex;
       const canvas = canvasMapRef.current.get(chunkIdx);
       if (canvas && canvas.isConnected) {
         remaining.push(id);
@@ -2422,7 +2426,7 @@ var SpectrogramChannel = ({
     registeredIdsRef.current = remaining;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       if (transferredCanvasesRef.current.has(canvas)) continue;
-      const canvasId = `${clipId}-ch${channelIndex}-chunk${canvasIdx}`;
+      const canvasId = buildSpectrogramCanvasId({ clipId, channelIndex, chunkIndex: canvasIdx });
       let offscreen;
       try {
         offscreen = canvas.transferControlToOffscreen();