@waveform-playlist/ui-components 9.0.0 → 9.0.2

package/dist/index.d.mts

@@ -142,8 +142,8 @@ interface ChannelProps {
     transparentBackground?: boolean;
     /**
      * Drawing mode:
-     * - 'inverted': Draw waveOutlineColor where there's NO audio (current default). Good for gradient bars.
-     * - 'normal': Draw waveFillColor where there IS audio. Good for gradient backgrounds.
+     * - 'inverted': Canvas draws waveOutlineColor where there's NO audio, revealing waveFillColor background as bars (default). Good for gradient bars.
+     * - 'normal': Canvas draws waveFillColor where there IS audio. Use with transparentBackground for progress overlays.
      */
     drawMode?: WaveformDrawMode;
 }

package/dist/index.d.ts

@@ -142,8 +142,8 @@ interface ChannelProps {
     transparentBackground?: boolean;
     /**
      * Drawing mode:
-     * - 'inverted': Draw waveOutlineColor where there's NO audio (current default). Good for gradient bars.
-     * - 'normal': Draw waveFillColor where there IS audio. Good for gradient backgrounds.
+     * - 'inverted': Canvas draws waveOutlineColor where there's NO audio, revealing waveFillColor background as bars (default). Good for gradient bars.
+     * - 'normal': Canvas draws waveFillColor where there IS audio. Use with transparentBackground for progress overlays.
      */
     drawMode?: WaveformDrawMode;
 }

package/dist/index.js

@@ -758,6 +758,40 @@ function useChunkedCanvasRefs() {
 
 // src/components/Channel.tsx
 var import_core = require("@waveform-playlist/core");
+
+// src/utils/peakRendering.ts
+function aggregatePeaks(data, bits, startIndex, endIndex) {
+  if (startIndex * 2 + 1 >= data.length) {
+    return null;
+  }
+  const maxValue = 2 ** (bits - 1);
+  let minPeak = data[startIndex * 2] / maxValue;
+  let maxPeak = data[startIndex * 2 + 1] / maxValue;
+  for (let p = startIndex + 1; p < endIndex; p++) {
+    if (p * 2 + 1 >= data.length) break;
+    const pMin = data[p * 2] / maxValue;
+    const pMax = data[p * 2 + 1] / maxValue;
+    if (pMin < minPeak) minPeak = pMin;
+    if (pMax > maxPeak) maxPeak = pMax;
+  }
+  return { min: minPeak, max: maxPeak };
+}
+function calculateBarRects(x, barWidth, halfHeight, minPeak, maxPeak, drawMode) {
+  const min = Math.abs(minPeak * halfHeight);
+  const max = Math.abs(maxPeak * halfHeight);
+  if (drawMode === "normal") {
+    return [{ x, y: halfHeight - max, width: barWidth, height: max + min }];
+  }
+  return [
+    { x, y: 0, width: barWidth, height: halfHeight - max },
+    { x, y: halfHeight + min, width: barWidth, height: halfHeight - min }
+  ];
+}
+function calculateFirstBarPosition(canvasStartGlobal, barWidth, step) {
+  return Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
+}
+
+// src/components/Channel.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
@@ -827,7 +861,6 @@ var Channel = (props) => {
       const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
-      const maxValue = 2 ** (bits - 1);
       if (ctx) {
         ctx.resetTransform();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -843,21 +876,16 @@ var Channel = (props) => {
         ctx.fillStyle = createCanvasFillStyle(ctx, fillColor, canvasWidth, waveHeight);
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
-        const firstBarGlobal = Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
+        const firstBarGlobal = calculateFirstBarPosition(canvasStartGlobal, barWidth, step);
         for (let barGlobal = Math.max(0, firstBarGlobal); barGlobal < canvasEndGlobal; barGlobal += step) {
           const x = barGlobal - canvasStartGlobal;
           if (x + barWidth <= 0) continue;
-          const peakIndex = barGlobal;
-          if (peakIndex * 2 + 1 < data.length) {
-            const minPeak = data[peakIndex * 2] / maxValue;
-            const maxPeak = data[peakIndex * 2 + 1] / maxValue;
-            const min = Math.abs(minPeak * h2);
-            const max = Math.abs(maxPeak * h2);
-            if (drawMode === "normal") {
-              ctx.fillRect(x, h2 - max, barWidth, max + min);
-            } else {
-              ctx.fillRect(x, 0, barWidth, h2 - max);
-              ctx.fillRect(x, h2 + min, barWidth, h2 - min);
+          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);
+            for (const rect of rects) {
+              ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
             }
           }
         }