@waveform-playlist/ui-components 13.0.0 → 13.1.0

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);
 
@@ -2473,6 +2501,7 @@ var SmartChannel = ({
     waveHeight,
     barWidth,
     barGap,
+    roundedBars,
     samplesPerPixel: contextSpp,
     sampleRate: contextSampleRate
   } = usePlaylistInfo();
@@ -2534,6 +2563,7 @@ var SmartChannel = ({
               devicePixelRatio,
               barWidth,
               barGap,
+              roundedBars,
               transparentBackground,
               drawMode
             }
@@ -2572,6 +2602,7 @@ var SmartChannel = ({
       devicePixelRatio,
       barWidth,
       barGap,
+      roundedBars,
       transparentBackground,
       drawMode
     }