@waveform-playlist/ui-components 7.1.0 → 7.1.2

package/dist/index.mjs

@@ -327,7 +327,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-import { useLayoutEffect, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useLayoutEffect } from "react";
 import styled9 from "styled-components";
 
 // src/wfpl-theme.ts
@@ -493,6 +493,7 @@ import {
   useContext,
   useEffect,
   useCallback,
+  useMemo,
   useRef,
   useSyncExternalStore
 } from "react";
@@ -587,11 +588,52 @@ function useScrollViewportSelector(selector) {
     () => selector(null)
   );
 }
+function useVisibleChunkIndices(totalWidth, chunkWidth) {
+  const visibleChunkKey = useScrollViewportSelector((viewport) => {
+    const totalChunks = Math.ceil(totalWidth / chunkWidth);
+    const indices = [];
+    for (let i = 0; i < totalChunks; i++) {
+      const chunkLeft = i * chunkWidth;
+      const thisChunkWidth = Math.min(totalWidth - chunkLeft, chunkWidth);
+      if (viewport) {
+        const chunkEnd = chunkLeft + thisChunkWidth;
+        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
+          continue;
+        }
+      }
+      indices.push(i);
+    }
+    return indices.join(",");
+  });
+  return useMemo(
+    () => visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [],
+    [visibleChunkKey]
+  );
+}
 
-// src/constants.ts
-var MAX_CANVAS_WIDTH = 1e3;
+// src/hooks/useChunkedCanvasRefs.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+function useChunkedCanvasRefs() {
+  const canvasMapRef = useRef2(/* @__PURE__ */ new Map());
+  const canvasRef = useCallback2((canvas) => {
+    if (canvas !== null) {
+      const idx = parseInt(canvas.dataset.index, 10);
+      canvasMapRef.current.set(idx, canvas);
+    }
+  }, []);
+  useEffect2(() => {
+    const map = canvasMapRef.current;
+    for (const [idx, canvas] of map.entries()) {
+      if (!canvas.isConnected) {
+        map.delete(idx);
+      }
+    }
+  });
+  return { canvasRef, canvasMapRef };
+}
 
 // src/components/Channel.tsx
+import { MAX_CANVAS_WIDTH } from "@waveform-playlist/core";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
@@ -652,48 +694,11 @@ var Channel = (props) => {
     transparentBackground = false,
     drawMode = "inverted"
   } = props;
-  const canvasesRef = useRef2([]);
-  const visibleChunkKey = useScrollViewportSelector((viewport) => {
-    const totalChunks = Math.ceil(length / MAX_CANVAS_WIDTH);
-    const indices = [];
-    for (let i = 0; i < totalChunks; i++) {
-      const chunkLeft = i * MAX_CANVAS_WIDTH;
-      const chunkWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-      if (viewport) {
-        const chunkEnd = chunkLeft + chunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
-          continue;
-        }
-      }
-      indices.push(i);
-    }
-    return indices.join(",");
-  });
-  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
-  const canvasRef = useCallback2(
-    (canvas) => {
-      if (canvas !== null) {
-        const index2 = parseInt(canvas.dataset.index, 10);
-        canvasesRef.current[index2] = canvas;
-      }
-    },
-    []
-  );
-  useEffect2(() => {
-    const canvases = canvasesRef.current;
-    for (let i = canvases.length - 1; i >= 0; i--) {
-      if (canvases[i] && !canvases[i].isConnected) {
-        delete canvases[i];
-      }
-    }
-  });
+  const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
+  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH);
   useLayoutEffect(() => {
-    const canvases = canvasesRef.current;
     const step = barWidth + barGap;
-    for (let i = 0; i < canvases.length; i++) {
-      const canvas = canvases[i];
-      if (!canvas) continue;
-      const canvasIdx = parseInt(canvas.dataset.index, 10);
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
@@ -739,6 +744,7 @@ var Channel = (props) => {
       }
     }
   }, [
+    canvasMapRef,
     data,
     bits,
     waveHeight,
@@ -749,7 +755,7 @@ var Channel = (props) => {
     barWidth,
     barGap,
     drawMode,
-    visibleChunkKey
+    visibleChunkIndices
   ]);
   const waveforms = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH;
@@ -2061,8 +2067,9 @@ var usePlayoutStatus = () => useContext6(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext6(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useLayoutEffect as useLayoutEffect2, useCallback as useCallback5, useRef as useRef6, useEffect as useEffect6 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useEffect as useEffect6 } from "react";
 import styled19 from "styled-components";
+import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2 } from "@waveform-playlist/core";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper3 = styled19.div.attrs((props) => ({
@@ -2116,38 +2123,13 @@ var SpectrogramChannel = ({
   onCanvasesReady
 }) => {
   const channelIndex = channelIndexProp ?? index;
-  const canvasesRef = useRef6([]);
+  const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const registeredIdsRef = useRef6([]);
   const transferredCanvasesRef = useRef6(/* @__PURE__ */ new WeakSet());
   const workerApiRef = useRef6(workerApi);
   const onCanvasesReadyRef = useRef6(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
-  const visibleChunkKey = useScrollViewportSelector((viewport) => {
-    const totalChunks = Math.ceil(length / MAX_CANVAS_WIDTH);
-    const indices = [];
-    for (let i = 0; i < totalChunks; i++) {
-      const chunkLeft = i * MAX_CANVAS_WIDTH;
-      const chunkWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-      if (viewport) {
-        const chunkEnd = chunkLeft + chunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
-          continue;
-        }
-      }
-      indices.push(i);
-    }
-    return indices.join(",");
-  });
-  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
-  const canvasRef = useCallback5(
-    (canvas) => {
-      if (canvas !== null) {
-        const idx = parseInt(canvas.dataset.index, 10);
-        canvasesRef.current[idx] = canvas;
-      }
-    },
-    []
-  );
+  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH2);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
@@ -2162,14 +2144,30 @@ var SpectrogramChannel = ({
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
-    const canvases2 = canvasesRef.current;
+    const previousCount = registeredIdsRef.current.length;
+    const remaining = [];
+    for (const id of registeredIdsRef.current) {
+      const match = id.match(/chunk(\d+)$/);
+      if (!match) {
+        remaining.push(id);
+        continue;
+      }
+      const chunkIdx = parseInt(match[1], 10);
+      const canvas = canvasMapRef.current.get(chunkIdx);
+      if (canvas && canvas.isConnected) {
+        remaining.push(id);
+      } else {
+        try {
+          currentWorkerApi.unregisterCanvas(id);
+        } catch (err) {
+          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+        }
+      }
+    }
+    registeredIdsRef.current = remaining;
     const newIds = [];
-    const newWidths = [];
-    for (let i = 0; i < canvases2.length; i++) {
-      const canvas = canvases2[i];
-      if (!canvas) continue;
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       if (transferredCanvasesRef.current.has(canvas)) continue;
-      const canvasIdx = parseInt(canvas.dataset.index, 10);
       const canvasId = `${clipId}-ch${channelIndex}-chunk${canvasIdx}`;
       let offscreen;
       try {
@@ -2182,7 +2180,6 @@ var SpectrogramChannel = ({
       try {
         currentWorkerApi.registerCanvas(canvasId, offscreen);
         newIds.push(canvasId);
-        newWidths.push(Math.min(length - canvasIdx * MAX_CANVAS_WIDTH, MAX_CANVAS_WIDTH));
       } catch (err) {
         console.warn(`[spectrogram] registerCanvas failed for ${canvasId}:`, err);
         continue;
@@ -2190,34 +2187,22 @@ var SpectrogramChannel = ({
     }
     if (newIds.length > 0) {
       registeredIdsRef.current = [...registeredIdsRef.current, ...newIds];
-      onCanvasesReadyRef.current?.(newIds, newWidths);
     }
-  }, [isWorkerMode, clipId, channelIndex, length, visibleChunkKey]);
-  useEffect6(() => {
-    if (!isWorkerMode) return;
-    const currentWorkerApi = workerApiRef.current;
-    if (!currentWorkerApi) return;
-    const remaining = [];
-    for (const id of registeredIdsRef.current) {
-      const match = id.match(/chunk(\d+)$/);
-      if (!match) {
-        remaining.push(id);
-        continue;
-      }
-      const chunkIdx = parseInt(match[1], 10);
-      const canvas = canvasesRef.current[chunkIdx];
-      if (canvas && canvas.isConnected) {
-        remaining.push(id);
-      } else {
-        try {
-          currentWorkerApi.unregisterCanvas(id);
-        } catch (err) {
-          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+    const canvasSetChanged = newIds.length > 0 || remaining.length < previousCount;
+    if (canvasSetChanged) {
+      const allIds = registeredIdsRef.current;
+      const allWidths = allIds.map((id) => {
+        const match = id.match(/chunk(\d+)$/);
+        if (!match) {
+          console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
+          return MAX_CANVAS_WIDTH2;
         }
-      }
+        const chunkIdx = parseInt(match[1], 10);
+        return Math.min(length - chunkIdx * MAX_CANVAS_WIDTH2, MAX_CANVAS_WIDTH2);
+      });
+      onCanvasesReadyRef.current?.(allIds, allWidths);
     }
-    registeredIdsRef.current = remaining;
-  });
+  }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
   useEffect6(() => {
     return () => {
       const api = workerApiRef.current;
@@ -2234,15 +2219,11 @@ var SpectrogramChannel = ({
   }, []);
   useLayoutEffect2(() => {
     if (isWorkerMode || !data) return;
-    const canvases2 = canvasesRef.current;
     const { frequencyBinCount, frameCount, hopSize, sampleRate, gainDb, rangeDb: rawRangeDb } = data;
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
-    for (let i = 0; i < canvases2.length; i++) {
-      const canvas = canvases2[i];
-      if (!canvas) continue;
-      const canvasIdx = parseInt(canvas.dataset.index, 10);
-      const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
+      const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH2;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2302,10 +2283,10 @@ var SpectrogramChannel = ({
         ctx.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
       }
     }
-  }, [isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, minFrequency, maxF, scaleFn, hasCustomFrequencyScale, visibleChunkKey]);
+  }, [canvasMapRef, isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, minFrequency, maxF, scaleFn, hasCustomFrequencyScale, visibleChunkIndices]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
+    const chunkLeft = i * MAX_CANVAS_WIDTH2;
+    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH2);
     return /* @__PURE__ */ jsx20(
       SpectrogramCanvas,
       {
@@ -2527,7 +2508,7 @@ var SpectrogramLabels = ({
 import { useContext as useContext8 } from "react";
 
 // src/components/TimeScale.tsx
-import React15, { useRef as useRef8, useEffect as useEffect7, useLayoutEffect as useLayoutEffect4, useContext as useContext7, useMemo, useCallback as useCallback6 } from "react";
+import React15, { useLayoutEffect as useLayoutEffect4, useContext as useContext7, useMemo as useMemo2 } from "react";
 import styled21, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
@@ -2551,6 +2532,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
+import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
 import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
@@ -2602,7 +2584,7 @@ var TimeScale = (props) => {
     secondStep,
     renderTimestamp
   } = props;
-  const canvasRefsMap = useRef8(/* @__PURE__ */ new Map());
+  const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const {
     sampleRate,
     samplesPerPixel,
@@ -2610,13 +2592,7 @@ var TimeScale = (props) => {
     controls: { show: showControls, width: controlWidth }
   } = useContext7(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const canvasRefCallback = useCallback6((canvas) => {
-    if (canvas !== null) {
-      const idx = parseInt(canvas.dataset.index, 10);
-      canvasRefsMap.current.set(idx, canvas);
-    }
-  }, []);
-  const { widthX, canvasInfo, timeMarkersWithPositions } = useMemo(() => {
+  const { widthX, canvasInfo, timeMarkersWithPositions } = useMemo2(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2643,26 +2619,10 @@ var TimeScale = (props) => {
       timeMarkersWithPositions: nextMarkers
     };
   }, [duration, samplesPerPixel, sampleRate, marker, bigStep, secondStep, renderTimestamp, timeScaleHeight]);
-  const visibleChunkKey = useScrollViewportSelector((viewport) => {
-    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH);
-    const indices = [];
-    for (let i = 0; i < totalChunks; i++) {
-      const chunkLeft = i * MAX_CANVAS_WIDTH;
-      const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH);
-      if (viewport) {
-        const chunkEnd = chunkLeft + chunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
-          continue;
-        }
-      }
-      indices.push(i);
-    }
-    return indices.join(",");
-  });
-  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, MAX_CANVAS_WIDTH3);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH;
-    const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH);
+    const chunkLeft = i * MAX_CANVAS_WIDTH3;
+    const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH3);
     return /* @__PURE__ */ jsx23(
       TimeTickChunk,
       {
@@ -2672,27 +2632,19 @@ var TimeScale = (props) => {
         width: chunkWidth * devicePixelRatio,
         height: timeScaleHeight * devicePixelRatio,
         "data-index": i,
-        ref: canvasRefCallback
+        ref: canvasRef
       },
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * MAX_CANVAS_WIDTH : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * MAX_CANVAS_WIDTH : Infinity;
+  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * MAX_CANVAS_WIDTH3 : 0;
+  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * MAX_CANVAS_WIDTH3 : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  useEffect7(() => {
-    const currentMap = canvasRefsMap.current;
-    for (const [idx, canvas] of currentMap.entries()) {
-      if (!canvas.isConnected) {
-        currentMap.delete(idx);
-      }
-    }
-  });
   useLayoutEffect4(() => {
-    for (const [chunkIdx, canvas] of canvasRefsMap.current.entries()) {
+    for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * MAX_CANVAS_WIDTH;
+      const chunkLeft = chunkIdx * MAX_CANVAS_WIDTH3;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -2706,7 +2658,7 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkKey]);
+  }, [canvasMapRef, duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkIndices]);
   return /* @__PURE__ */ jsxs10(
     PlaylistTimeScaleScroll,
     {
@@ -3178,7 +3130,7 @@ var SliderWrapper = styled30.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React17, { useState as useState6, useEffect as useEffect8, useRef as useRef9 } from "react";
+import React17, { useState as useState6, useEffect as useEffect7, useRef as useRef8 } from "react";
 import { createPortal } from "react-dom";
 import styled31 from "styled-components";
 import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -3226,9 +3178,9 @@ var TrackMenu = ({
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
   const [dropdownPos, setDropdownPos] = useState6({ top: 0, left: 0 });
-  const buttonRef = useRef9(null);
-  const dropdownRef = useRef9(null);
-  useEffect8(() => {
+  const buttonRef = useRef8(null);
+  const dropdownRef = useRef8(null);
+  useEffect7(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3237,7 +3189,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3312,7 +3264,6 @@ export {
   InlineLabel,
   LoopRegion,
   LoopRegionMarkers,
-  MAX_CANVAS_WIDTH,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -3361,6 +3312,7 @@ export {
   useScrollViewportSelector,
   useTheme2 as useTheme,
   useTrackControls,
+  useVisibleChunkIndices,
   waveformColorToCss
 };
 //# sourceMappingURL=index.mjs.map