@waveform-playlist/ui-components 9.4.1 → 9.5.1

package/dist/index.mjs

@@ -334,7 +334,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-import { useEffect as useEffect3 } from "react";
+import { useLayoutEffect as useLayoutEffect2 } from "react";
 import styled9 from "styled-components";
 
 // src/wfpl-theme.ts
@@ -780,7 +780,7 @@ var Channel = (props) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH, clipOriginX);
-  useEffect3(() => {
+  useLayoutEffect2(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
@@ -1296,7 +1296,7 @@ var MasterVolumeControl = ({
 };
 
 // src/components/PianoRollChannel.tsx
-import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2 } from "react";
 import styled15 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2 } from "@waveform-playlist/core";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -1352,7 +1352,7 @@ var PianoRollChannel = ({
     return { minMidi: Math.max(0, min - 1), maxMidi: Math.min(127, max + 1) };
   }, [midiNotes]);
   const color = isSelected ? selectedNoteColor : noteColor;
-  useEffect4(() => {
+  useLayoutEffect3(() => {
     const noteRange = maxMidi - minMidi + 1;
     const noteHeight = Math.max(2, waveHeight / noteRange);
     const pixelsPerSecond = sampleRate / samplesPerPixel;
@@ -1421,7 +1421,7 @@ var PianoRollChannel = ({
 };
 
 // src/components/Playhead.tsx
-import { useRef as useRef3, useEffect as useEffect5 } from "react";
+import { useRef as useRef3, useEffect as useEffect3 } from "react";
 import styled16 from "styled-components";
 import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var PlayheadLine = styled16.div.attrs((props) => ({
@@ -1483,7 +1483,7 @@ var PlayheadWithMarker = ({
 }) => {
   const containerRef = useRef3(null);
   const animationFrameRef = useRef3(null);
-  useEffect5(() => {
+  useEffect3(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1528,7 +1528,7 @@ var PlayheadWithMarker = ({
     getAudioContextTime,
     getPlaybackTime
   ]);
-  useEffect5(() => {
+  useEffect3(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
@@ -2013,10 +2013,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { useEffect as useEffect7, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 
 // src/components/TimeInput.tsx
-import { useEffect as useEffect6, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -2077,7 +2077,7 @@ var TimeInput = ({
   readOnly = false
 }) => {
   const [displayValue, setDisplayValue] = useState2("");
-  useEffect6(() => {
+  useEffect4(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2124,7 +2124,7 @@ var SelectionTimeInputs = ({
   className
 }) => {
   const [timeFormat, setTimeFormat] = useState3("hh:mm:ss.uuu");
-  useEffect7(() => {
+  useEffect5(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2297,11 +2297,10 @@ var usePlayoutStatus = () => useContext8(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext8(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useRef as useRef6, useEffect as useEffect8 } from "react";
+import { useRef as useRef6, useEffect as useEffect6 } from "react";
 import styled20 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper4 = styled20.div.attrs((props) => ({
   style: {
     top: `${props.$waveHeight * props.$index}px`,
@@ -2326,26 +2325,13 @@ var SpectrogramCanvas = styled20.canvas.attrs((props) => ({
   image-rendering: pixelated;
   image-rendering: crisp-edges;
 `;
-function defaultGetColorMap() {
-  const lut = new Uint8Array(256 * 3);
-  for (let i = 0; i < 256; i++) {
-    lut[i * 3] = lut[i * 3 + 1] = lut[i * 3 + 2] = i;
-  }
-  return lut;
-}
-var DEFAULT_COLOR_LUT = defaultGetColorMap();
 var SpectrogramChannel = ({
   index,
   channelIndex: channelIndexProp,
-  data,
   length,
   waveHeight,
   devicePixelRatio = 1,
-  samplesPerPixel,
-  colorLUT,
-  frequencyScaleFn,
-  minFrequency = 0,
-  maxFrequency,
+  samplesPerPixel: _samplesPerPixel,
   workerApi,
   clipId,
   onCanvasesReady
@@ -2356,21 +2342,15 @@ var SpectrogramChannel = ({
   const transferredCanvasesRef = useRef6(/* @__PURE__ */ new WeakSet());
   const workerApiRef = useRef6(workerApi);
   const onCanvasesReadyRef = useRef6(onCanvasesReady);
-  const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH3, clipOriginX);
-  const lut = colorLUT ?? DEFAULT_COLOR_LUT;
-  const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
-  const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
-  const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
-  useEffect8(() => {
+  useEffect6(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  useEffect8(() => {
+  useEffect6(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  useEffect8(() => {
-    if (!isWorkerMode) return;
+  useEffect6(() => {
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
     const previousCount = registeredIdsRef.current.length;
@@ -2431,8 +2411,8 @@ var SpectrogramChannel = ({
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
-  }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  useEffect8(() => {
+  }, [canvasMapRef, clipId, channelIndex, length, visibleChunkIndices]);
+  useEffect6(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2446,94 +2426,6 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  useEffect8(() => {
-    if (isWorkerMode || !data) return;
-    const {
-      frequencyBinCount,
-      frameCount,
-      hopSize,
-      sampleRate,
-      gainDb,
-      rangeDb: rawRangeDb
-    } = data;
-    const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
-    const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
-    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH3;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) continue;
-      const canvasWidth = canvas.width / devicePixelRatio;
-      const canvasHeight = waveHeight;
-      ctx.resetTransform();
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.imageSmoothingEnabled = false;
-      ctx.scale(devicePixelRatio, devicePixelRatio);
-      const imgData = ctx.createImageData(canvasWidth, canvasHeight);
-      const pixels = imgData.data;
-      for (let x = 0; x < canvasWidth; x++) {
-        const globalX = globalPixelOffset + x;
-        const samplePos = globalX * samplesPerPixel;
-        const frame = Math.floor(samplePos / hopSize);
-        if (frame < 0 || frame >= frameCount) continue;
-        const frameOffset = frame * frequencyBinCount;
-        for (let y = 0; y < canvasHeight; y++) {
-          const normalizedY = 1 - y / canvasHeight;
-          let bin = Math.floor(normalizedY * frequencyBinCount);
-          if (hasCustomFrequencyScale) {
-            let lo = 0;
-            let hi = frequencyBinCount - 1;
-            while (lo < hi) {
-              const mid = lo + hi >> 1;
-              const freq = binToFreq(mid);
-              const scaled = scaleFn(freq, minFrequency, maxF);
-              if (scaled < normalizedY) {
-                lo = mid + 1;
-              } else {
-                hi = mid;
-              }
-            }
-            bin = lo;
-          }
-          if (bin < 0 || bin >= frequencyBinCount) continue;
-          const db = data.data[frameOffset + bin];
-          const normalized = Math.max(0, Math.min(1, (db + rangeDb + gainDb) / rangeDb));
-          const colorIdx = Math.floor(normalized * 255);
-          const pixelIdx = (y * canvasWidth + x) * 4;
-          pixels[pixelIdx] = lut[colorIdx * 3];
-          pixels[pixelIdx + 1] = lut[colorIdx * 3 + 1];
-          pixels[pixelIdx + 2] = lut[colorIdx * 3 + 2];
-          pixels[pixelIdx + 3] = 255;
-        }
-      }
-      ctx.resetTransform();
-      ctx.putImageData(imgData, 0, 0);
-      if (devicePixelRatio !== 1) {
-        const tmpCanvas = document.createElement("canvas");
-        tmpCanvas.width = canvasWidth;
-        tmpCanvas.height = canvasHeight;
-        const tmpCtx = tmpCanvas.getContext("2d");
-        if (!tmpCtx) continue;
-        tmpCtx.putImageData(imgData, 0, 0);
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.imageSmoothingEnabled = false;
-        ctx.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
-      }
-    }
-  }, [
-    canvasMapRef,
-    isWorkerMode,
-    data,
-    length,
-    waveHeight,
-    devicePixelRatio,
-    samplesPerPixel,
-    lut,
-    minFrequency,
-    maxF,
-    scaleFn,
-    hasCustomFrequencyScale,
-    visibleChunkIndices
-  ]);
   const canvases = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH3;
     const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH3);
@@ -2560,12 +2452,7 @@ var SmartChannel = ({
   isSelected,
   transparentBackground,
   renderMode = "waveform",
-  spectrogramData,
-  spectrogramColorLUT,
   samplesPerPixel: sppProp,
-  spectrogramFrequencyScaleFn,
-  spectrogramMinFrequency,
-  spectrogramMaxFrequency,
   spectrogramWorkerApi,
   spectrogramClipId,
   spectrogramOnCanvasesReady,
@@ -2587,21 +2474,16 @@ var SmartChannel = ({
   const waveOutlineColor = isSelected && theme ? theme.selectedWaveOutlineColor : theme?.waveOutlineColor;
   const waveFillColor = isSelected && theme ? theme.selectedWaveFillColor : theme?.waveFillColor;
   const drawMode = theme?.waveformDrawMode || "inverted";
-  const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
+  const hasSpectrogram = spectrogramWorkerApi && spectrogramClipId;
   if (renderMode === "spectrogram" && hasSpectrogram) {
     return /* @__PURE__ */ jsx24(
       SpectrogramChannel,
       {
         index: props.index,
-        data: spectrogramData,
         length: props.length,
         waveHeight,
         devicePixelRatio,
         samplesPerPixel,
-        colorLUT: spectrogramColorLUT,
-        frequencyScaleFn: spectrogramFrequencyScaleFn,
-        minFrequency: spectrogramMinFrequency,
-        maxFrequency: spectrogramMaxFrequency,
         workerApi: spectrogramWorkerApi,
         clipId: spectrogramClipId,
         onCanvasesReady: spectrogramOnCanvasesReady
@@ -2616,15 +2498,10 @@ var SmartChannel = ({
         {
           index: props.index * 2,
           channelIndex: props.index,
-          data: spectrogramData,
           length: props.length,
           waveHeight: halfHeight,
           devicePixelRatio,
           samplesPerPixel,
-          colorLUT: spectrogramColorLUT,
-          frequencyScaleFn: spectrogramFrequencyScaleFn,
-          minFrequency: spectrogramMinFrequency,
-          maxFrequency: spectrogramMaxFrequency,
           workerApi: spectrogramWorkerApi,
           clipId: spectrogramClipId,
           onCanvasesReady: spectrogramOnCanvasesReady
@@ -2695,7 +2572,7 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect2 } from "react";
+import { useRef as useRef7, useLayoutEffect as useLayoutEffect4 } from "react";
 import styled21 from "styled-components";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
@@ -2752,7 +2629,7 @@ var SpectrogramLabels = ({
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  useLayoutEffect2(() => {
+  useLayoutEffect4(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2810,7 +2687,7 @@ import React19, { useContext as useContext10, useMemo as useMemo4 } from "react"
 import styled23 from "styled-components";
 
 // src/components/TimeScale.tsx
-import { useLayoutEffect as useLayoutEffect3, useContext as useContext9 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useContext as useContext9 } from "react";
 import styled22, { withTheme as withTheme2 } from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH4 } from "@waveform-playlist/core";
 import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -2865,7 +2742,7 @@ var TimeScale = (props) => {
   const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * MAX_CANVAS_WIDTH4 : 0;
   const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * MAX_CANVAS_WIDTH4 : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  useLayoutEffect3(() => {
+  useLayoutEffect5(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
@@ -3358,7 +3235,7 @@ var SliderWrapper = styled32.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React20, { useState as useState6, useEffect as useEffect9, useRef as useRef8, useCallback as useCallback5 } from "react";
+import React20, { useState as useState6, useEffect as useEffect7, useRef as useRef8, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
 import styled33 from "styled-components";
 import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -3424,7 +3301,7 @@ var TrackMenu = ({ items: itemsProp }) => {
     }
     setDropdownPos({ top, left });
   }, []);
-  useEffect9(() => {
+  useEffect7(() => {
     if (!open) return;
     updatePosition();
     const rafId = requestAnimationFrame(() => updatePosition());
@@ -3438,7 +3315,7 @@ var TrackMenu = ({ items: itemsProp }) => {
       window.removeEventListener("resize", onResize);
     };
   }, [open, updatePosition]);
-  useEffect9(() => {
+  useEffect7(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;