@waveform-playlist/ui-components 9.4.1 → 9.5.1

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default, { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
-import { Peaks, Bits, Fade, FadeType, MidiNoteData, SpectrogramData, RenderMode } from '@waveform-playlist/core';
+import { Peaks, Bits, Fade, FadeType, MidiNoteData, RenderMode } from '@waveform-playlist/core';
 import * as styled_components_dist_utils_hoist from 'styled-components/dist/utils/hoist';
 import * as styled_components from 'styled-components';
 import { DefaultTheme } from 'styled-components';
@@ -476,8 +476,6 @@ interface SpectrogramChannelProps {
     index: number;
     /** Audio channel index for canvas ID construction. Defaults to `index` when omitted. */
     channelIndex?: number;
-    /** Computed spectrogram data (not needed when workerApi is provided) */
-    data?: SpectrogramData;
     /** Width in CSS pixels */
     length: number;
     /** Height in CSS pixels */
@@ -486,18 +484,10 @@ interface SpectrogramChannelProps {
     devicePixelRatio?: number;
     /** Samples per pixel at current zoom level */
     samplesPerPixel: number;
-    /** 256-entry RGB LUT (768 bytes) from getColorMap() */
-    colorLUT?: Uint8Array;
-    /** Frequency scale function: (freqHz, minF, maxF) => [0,1] */
-    frequencyScaleFn?: (f: number, minF: number, maxF: number) => number;
-    /** Min frequency in Hz */
-    minFrequency?: number;
-    /** Max frequency in Hz (defaults to sampleRate/2) */
-    maxFrequency?: number;
-    /** Worker API for transferring canvas ownership. When provided, rendering is done in the worker. */
-    workerApi?: SpectrogramWorkerCanvasApi;
+    /** Worker API for transferring canvas ownership. Rendering is done in the worker. */
+    workerApi: SpectrogramWorkerCanvasApi;
     /** Clip ID used to construct unique canvas IDs for worker registration */
-    clipId?: string;
+    clipId: string;
     /** Callback when canvases are registered with the worker, providing canvas IDs and widths */
     onCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
 }
@@ -514,18 +504,8 @@ interface SmartChannelProps {
     transparentBackground?: boolean;
     /** Render mode: waveform, spectrogram, or both */
     renderMode?: RenderMode;
-    /** Spectrogram data for this channel */
-    spectrogramData?: SpectrogramData;
-    /** 256-entry RGB LUT from getColorMap() */
-    spectrogramColorLUT?: Uint8Array;
     /** Samples per pixel at current zoom level */
     samplesPerPixel?: number;
-    /** Frequency scale function */
-    spectrogramFrequencyScaleFn?: (f: number, minF: number, maxF: number) => number;
-    /** Min frequency in Hz */
-    spectrogramMinFrequency?: number;
-    /** Max frequency in Hz */
-    spectrogramMaxFrequency?: number;
     /** Worker API for OffscreenCanvas transfer */
     spectrogramWorkerApi?: SpectrogramWorkerCanvasApi;
     /** Clip ID for worker canvas registration */

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default, { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
-import { Peaks, Bits, Fade, FadeType, MidiNoteData, SpectrogramData, RenderMode } from '@waveform-playlist/core';
+import { Peaks, Bits, Fade, FadeType, MidiNoteData, RenderMode } from '@waveform-playlist/core';
 import * as styled_components_dist_utils_hoist from 'styled-components/dist/utils/hoist';
 import * as styled_components from 'styled-components';
 import { DefaultTheme } from 'styled-components';
@@ -476,8 +476,6 @@ interface SpectrogramChannelProps {
     index: number;
     /** Audio channel index for canvas ID construction. Defaults to `index` when omitted. */
     channelIndex?: number;
-    /** Computed spectrogram data (not needed when workerApi is provided) */
-    data?: SpectrogramData;
     /** Width in CSS pixels */
     length: number;
     /** Height in CSS pixels */
@@ -486,18 +484,10 @@ interface SpectrogramChannelProps {
     devicePixelRatio?: number;
     /** Samples per pixel at current zoom level */
     samplesPerPixel: number;
-    /** 256-entry RGB LUT (768 bytes) from getColorMap() */
-    colorLUT?: Uint8Array;
-    /** Frequency scale function: (freqHz, minF, maxF) => [0,1] */
-    frequencyScaleFn?: (f: number, minF: number, maxF: number) => number;
-    /** Min frequency in Hz */
-    minFrequency?: number;
-    /** Max frequency in Hz (defaults to sampleRate/2) */
-    maxFrequency?: number;
-    /** Worker API for transferring canvas ownership. When provided, rendering is done in the worker. */
-    workerApi?: SpectrogramWorkerCanvasApi;
+    /** Worker API for transferring canvas ownership. Rendering is done in the worker. */
+    workerApi: SpectrogramWorkerCanvasApi;
     /** Clip ID used to construct unique canvas IDs for worker registration */
-    clipId?: string;
+    clipId: string;
     /** Callback when canvases are registered with the worker, providing canvas IDs and widths */
     onCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
 }
@@ -514,18 +504,8 @@ interface SmartChannelProps {
     transparentBackground?: boolean;
     /** Render mode: waveform, spectrogram, or both */
     renderMode?: RenderMode;
-    /** Spectrogram data for this channel */
-    spectrogramData?: SpectrogramData;
-    /** 256-entry RGB LUT from getColorMap() */
-    spectrogramColorLUT?: Uint8Array;
     /** Samples per pixel at current zoom level */
     samplesPerPixel?: number;
-    /** Frequency scale function */
-    spectrogramFrequencyScaleFn?: (f: number, minF: number, maxF: number) => number;
-    /** Min frequency in Hz */
-    spectrogramMinFrequency?: number;
-    /** Max frequency in Hz */
-    spectrogramMaxFrequency?: number;
     /** Worker API for OffscreenCanvas transfer */
     spectrogramWorkerApi?: SpectrogramWorkerCanvasApi;
     /** Clip ID for worker canvas registration */

package/dist/index.js

@@ -894,7 +894,7 @@ var Channel = (props) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH, clipOriginX);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react4.useLayoutEffect)(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
@@ -1466,7 +1466,7 @@ var PianoRollChannel = ({
     return { minMidi: Math.max(0, min - 1), maxMidi: Math.min(127, max + 1) };
   }, [midiNotes]);
   const color = isSelected ? selectedNoteColor : noteColor;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     const noteRange = maxMidi - minMidi + 1;
     const noteHeight = Math.max(2, waveHeight / noteRange);
     const pixelsPerSecond = sampleRate / samplesPerPixel;
@@ -2411,7 +2411,6 @@ var import_react20 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_core5 = require("@waveform-playlist/core");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper4 = import_styled_components21.default.div.attrs((props) => ({
   style: {
     top: `${props.$waveHeight * props.$index}px`,
@@ -2436,26 +2435,13 @@ var SpectrogramCanvas = import_styled_components21.default.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
@@ -2466,13 +2452,8 @@ var SpectrogramChannel = ({
   const transferredCanvasesRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakSet());
   const workerApiRef = (0, import_react20.useRef)(workerApi);
   const onCanvasesReadyRef = (0, import_react20.useRef)(onCanvasesReady);
-  const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, import_core5.MAX_CANVAS_WIDTH, 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);
   (0, import_react20.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
@@ -2480,7 +2461,6 @@ var SpectrogramChannel = ({
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
   (0, import_react20.useEffect)(() => {
-    if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
     const previousCount = registeredIdsRef.current.length;
@@ -2541,7 +2521,7 @@ var SpectrogramChannel = ({
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
-  }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
+  }, [canvasMapRef, clipId, channelIndex, length, visibleChunkIndices]);
   (0, import_react20.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
@@ -2556,94 +2536,6 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react20.useEffect)(() => {
-    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 * import_core5.MAX_CANVAS_WIDTH;
-      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 * import_core5.MAX_CANVAS_WIDTH;
     const currentWidth = Math.min(length - chunkLeft, import_core5.MAX_CANVAS_WIDTH);
@@ -2670,12 +2562,7 @@ var SmartChannel = ({
   isSelected,
   transparentBackground,
   renderMode = "waveform",
-  spectrogramData,
-  spectrogramColorLUT,
   samplesPerPixel: sppProp,
-  spectrogramFrequencyScaleFn,
-  spectrogramMinFrequency,
-  spectrogramMaxFrequency,
   spectrogramWorkerApi,
   spectrogramClipId,
   spectrogramOnCanvasesReady,
@@ -2697,21 +2584,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__ */ (0, import_jsx_runtime24.jsx)(
       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
@@ -2726,15 +2608,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