@waveform-playlist/ui-components 13.0.1 → 13.1.1

package/dist/index.d.mts

@@ -142,6 +142,14 @@ interface ChannelProps {
     barWidth?: number;
     /** Spacing in pixels between waveform bars. Default: 0 */
     barGap?: number;
+    /**
+     * Draw bars with pill-shaped rounded caps (radius barWidth/2). Most visible
+     * with barWidth >= 3 and a non-zero barGap. In 'inverted' draw mode the
+     * canvas paints the complement around the rounded bars, so gap columns and
+     * regions without peak data are covered by waveOutlineColor (square inverted
+     * mode leaves them transparent). Default: false
+     */
+    roundedBars?: boolean;
     /** If true, background is transparent (for use with external progress overlay) */
     transparentBackground?: boolean;
     /**
@@ -354,15 +362,16 @@ interface PlayheadProps {
     getAudioContextTime?: () => number;
     /**
      * Returns raw playback time from the engine (auto-wraps at loop boundaries).
-     * This is the scheduling position — for playhead display use `visualTimeRef`
-     * which already has `outputLatency` and `lookAhead` subtracted.
+     * This is the scheduling position — for playhead display use `visualTimeRef`,
+     * which is latency-compensated while playing.
      */
     getPlaybackTime?: () => number;
     /**
-     * Ref to the visually-aligned playback time (raw time minus `outputLatency`
-     * and `engine.lookAhead`), kept current by the provider's animation loop
-     * during playback and by pause/stop/seek paths when stopped. Use this for
-     * playhead positioning so it lines up with audible output and matches the
+     * Ref to the visually-aligned playback time: engine-compensated audible time
+     * (raw minus `outputLatency` and `engine.lookAhead`) while playing, the raw
+     * commanded position when resting (seek/pause/stop). Kept current by the
+     * provider's animation loop during playback and by pause/stop/seek paths
+     * when stopped. Use this for playhead positioning so it matches the
      * progress fill in `ChannelWithProgress`.
      */
     visualTimeRef?: react__default.RefObject<number>;
@@ -781,6 +790,8 @@ type PlaylistInfo = {
     barWidth: number;
     /** Spacing in pixels between waveform bars. Default: 0 */
     barGap: number;
+    /** Draw bars with pill-shaped rounded caps (radius barWidth/2). Default: false */
+    roundedBars?: boolean;
     /** Width in pixels of progress bars. Default: barWidth + barGap (fills gaps). Set to barWidth for no gap fill. */
     progressBarWidth?: number;
 };

package/dist/index.d.ts

@@ -142,6 +142,14 @@ interface ChannelProps {
     barWidth?: number;
     /** Spacing in pixels between waveform bars. Default: 0 */
     barGap?: number;
+    /**
+     * Draw bars with pill-shaped rounded caps (radius barWidth/2). Most visible
+     * with barWidth >= 3 and a non-zero barGap. In 'inverted' draw mode the
+     * canvas paints the complement around the rounded bars, so gap columns and
+     * regions without peak data are covered by waveOutlineColor (square inverted
+     * mode leaves them transparent). Default: false
+     */
+    roundedBars?: boolean;
     /** If true, background is transparent (for use with external progress overlay) */
     transparentBackground?: boolean;
     /**
@@ -354,15 +362,16 @@ interface PlayheadProps {
     getAudioContextTime?: () => number;
     /**
      * Returns raw playback time from the engine (auto-wraps at loop boundaries).
-     * This is the scheduling position — for playhead display use `visualTimeRef`
-     * which already has `outputLatency` and `lookAhead` subtracted.
+     * This is the scheduling position — for playhead display use `visualTimeRef`,
+     * which is latency-compensated while playing.
      */
     getPlaybackTime?: () => number;
     /**
-     * Ref to the visually-aligned playback time (raw time minus `outputLatency`
-     * and `engine.lookAhead`), kept current by the provider's animation loop
-     * during playback and by pause/stop/seek paths when stopped. Use this for
-     * playhead positioning so it lines up with audible output and matches the
+     * Ref to the visually-aligned playback time: engine-compensated audible time
+     * (raw minus `outputLatency` and `engine.lookAhead`) while playing, the raw
+     * commanded position when resting (seek/pause/stop). Kept current by the
+     * provider's animation loop during playback and by pause/stop/seek paths
+     * when stopped. Use this for playhead positioning so it matches the
      * progress fill in `ChannelWithProgress`.
      */
     visualTimeRef?: react__default.RefObject<number>;
@@ -781,6 +790,8 @@ type PlaylistInfo = {
     barWidth: number;
     /** Spacing in pixels between waveform bars. Default: 0 */
     barGap: number;
+    /** Draw bars with pill-shaped rounded caps (radius barWidth/2). Default: false */
+    roundedBars?: boolean;
     /** Width in pixels of progress bars. Default: barWidth + barGap (fills gaps). Set to barWidth for no gap fill. */
     progressBarWidth?: number;
 };

package/dist/index.js

@@ -833,6 +833,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;
 }
@@ -893,6 +900,7 @@ var Channel = (props) => {
     waveFillColor = "grey",
     barWidth = 1,
     barGap = 0,
+    roundedBars = false,
     transparentBackground = false,
     drawMode = "inverted"
   } = props;
@@ -905,7 +913,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)}`;
   (0, import_react4.useLayoutEffect)(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
@@ -929,18 +937,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;
       }
     }
@@ -955,6 +981,7 @@ var Channel = (props) => {
     length,
     barWidth,
     barGap,
+    roundedBars,
     drawVersion,
     drawMode,
     visibleChunkIndices,
@@ -2374,7 +2401,8 @@ var PlaylistInfoContext = (0, import_react16.createContext)({
   },
   duration: 3e4,
   barWidth: 1,
-  barGap: 0
+  barGap: 0,
+  roundedBars: false
 });
 var usePlaylistInfo = () => (0, import_react16.useContext)(PlaylistInfoContext);
 
@@ -2485,12 +2513,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 = (0, import_core5.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);
@@ -2505,7 +2533,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 = (0, import_core5.buildSpectrogramCanvasId)({ clipId, channelIndex, chunkIndex: canvasIdx });
       let offscreen;
       try {
         offscreen = canvas.transferControlToOffscreen();
@@ -2584,6 +2612,7 @@ var SmartChannel = ({
     waveHeight,
     barWidth,
     barGap,
+    roundedBars,
     samplesPerPixel: contextSpp,
     sampleRate: contextSampleRate
   } = usePlaylistInfo();
@@ -2645,6 +2674,7 @@ var SmartChannel = ({
               devicePixelRatio,
               barWidth,
               barGap,
+              roundedBars,
               transparentBackground,
               drawMode
             }
@@ -2683,6 +2713,7 @@ var SmartChannel = ({
       devicePixelRatio,
       barWidth,
       barGap,
+      roundedBars,
       transparentBackground,
       drawMode
     }