@waveform-playlist/ui-components 13.0.1 → 13.1.1

package/dist/index.mjs

@@ -718,6 +718,13 @@ function calculateBarRects(x, barWidth, halfHeight, minPeak, maxPeak, drawMode)
     { x, y: halfHeight + min, width: barWidth, height: halfHeight - min }
   ];
 }
+function addBarToPath(ctx, rect, radius) {
+  if (typeof ctx.roundRect === "function") {
+    ctx.roundRect(rect.x, rect.y, rect.width, rect.height, radius);
+  } else {
+    ctx.rect(rect.x, rect.y, rect.width, rect.height);
+  }
+}
 function calculateFirstBarPosition(canvasStartGlobal, barWidth, step) {
   return Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
 }
@@ -778,6 +785,7 @@ var Channel = (props) => {
     waveFillColor = "grey",
     barWidth = 1,
     barGap = 0,
+    roundedBars = false,
     transparentBackground = false,
     drawMode = "inverted"
   } = props;
@@ -790,7 +798,7 @@ var Channel = (props) => {
     dataVersionRef.current += 1;
     prevDataRef.current = data;
   }
-  const drawVersion = `${dataVersionRef.current}-${bits}-${waveHeight}-${devicePixelRatio}-${length}-${barWidth}-${barGap}-${drawMode}-${waveformColorToCss(waveOutlineColor)}-${waveformColorToCss(waveFillColor)}`;
+  const drawVersion = `${dataVersionRef.current}-${bits}-${waveHeight}-${devicePixelRatio}-${length}-${barWidth}-${barGap}-${drawMode}-${roundedBars}-${waveformColorToCss(waveOutlineColor)}-${waveformColorToCss(waveFillColor)}`;
   useLayoutEffect2(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
@@ -814,18 +822,36 @@ var Channel = (props) => {
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
         const firstBarGlobal = calculateFirstBarPosition(canvasStartGlobal, barWidth, step);
+        const rectMode = roundedBars ? "normal" : drawMode;
+        const barRadius = barWidth / 2;
+        const complementFill = roundedBars && drawMode === "inverted";
+        if (roundedBars) {
+          ctx.beginPath();
+        }
+        if (complementFill) {
+          ctx.rect(0, 0, canvasWidth, waveHeight);
+        }
         for (let barGlobal = Math.max(0, firstBarGlobal); barGlobal < canvasEndGlobal; barGlobal += step) {
           const x = barGlobal - canvasStartGlobal;
           if (x + barWidth <= 0) continue;
           const peakEnd = Math.min(barGlobal + step, length);
           const peak = aggregatePeaks(data, bits, barGlobal, peakEnd);
           if (peak) {
-            const rects = calculateBarRects(x, barWidth, h2, peak.min, peak.max, drawMode);
+            const rects = calculateBarRects(x, barWidth, h2, peak.min, peak.max, rectMode);
             for (const rect of rects) {
-              ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+              if (roundedBars) {
+                addBarToPath(ctx, rect, barRadius);
+              } else {
+                ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+              }
             }
           }
         }
+        if (complementFill) {
+          ctx.fill("evenodd");
+        } else if (roundedBars) {
+          ctx.fill();
+        }
         canvas.dataset.drawVersion = drawVersion;
       }
     }
@@ -840,6 +866,7 @@ var Channel = (props) => {
     length,
     barWidth,
     barGap,
+    roundedBars,
     drawVersion,
     drawMode,
     visibleChunkIndices,
@@ -2259,7 +2286,8 @@ var PlaylistInfoContext = createContext5({
   },
   duration: 3e4,
   barWidth: 1,
-  barGap: 0
+  barGap: 0,
+  roundedBars: false
 });
 var usePlaylistInfo = () => useContext5(PlaylistInfoContext);
 
@@ -2317,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: {
@@ -2374,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);
@@ -2394,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();
@@ -2473,6 +2505,7 @@ var SmartChannel = ({
     waveHeight,
     barWidth,
     barGap,
+    roundedBars,
     samplesPerPixel: contextSpp,
     sampleRate: contextSampleRate
   } = usePlaylistInfo();
@@ -2534,6 +2567,7 @@ var SmartChannel = ({
               devicePixelRatio,
               barWidth,
               barGap,
+              roundedBars,
               transparentBackground,
               drawMode
             }
@@ -2572,6 +2606,7 @@ var SmartChannel = ({
       devicePixelRatio,
       barWidth,
       barGap,
+      roundedBars,
       transparentBackground,
       drawMode
     }