@waveform-playlist/ui-components 9.5.0 → 9.5.1

package/dist/index.mjs

@@ -2297,11 +2297,10 @@ var usePlayoutStatus = () => useContext8(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext8(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useRef as useRef6, useEffect as useEffect6, useLayoutEffect as useLayoutEffect4 } 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,13 +2342,8 @@ 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);
   useEffect6(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
@@ -2370,7 +2351,6 @@ var SpectrogramChannel = ({
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
   useEffect6(() => {
-    if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
     const previousCount = registeredIdsRef.current.length;
@@ -2431,7 +2411,7 @@ var SpectrogramChannel = ({
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
-  }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
+  }, [canvasMapRef, clipId, channelIndex, length, visibleChunkIndices]);
   useEffect6(() => {
     return () => {
       const api = workerApiRef.current;
@@ -2446,94 +2426,6 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  useLayoutEffect4(() => {
-    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 useLayoutEffect5 } 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;
-  useLayoutEffect5(() => {
+  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 useLayoutEffect6, 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);
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;