wavesurfer.js 7.11.1 → 7.12.1

package/dist/reactive/store.js

@@ -0,0 +1,115 @@
+/**
+ * Reactive primitives for managing state in WaveSurfer
+ *
+ * This module provides signal-based reactivity similar to SolidJS signals.
+ * Signals are reactive values that notify subscribers when they change.
+ */
+/**
+ * Create a reactive signal that notifies subscribers when its value changes
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * count.subscribe(val => console.log('Count:', val))
+ * count.set(5) // Logs: Count: 5
+ * ```
+ */
+export function signal(initialValue) {
+    let _value = initialValue;
+    const subscribers = new Set();
+    return {
+        get value() {
+            return _value;
+        },
+        set(newValue) {
+            // Only update and notify if value actually changed
+            if (!Object.is(_value, newValue)) {
+                _value = newValue;
+                subscribers.forEach((fn) => fn(_value));
+            }
+        },
+        update(fn) {
+            this.set(fn(_value));
+        },
+        subscribe(callback) {
+            subscribers.add(callback);
+            return () => subscribers.delete(callback);
+        },
+    };
+}
+/**
+ * Create a computed value that automatically updates when its dependencies change
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * const doubled = computed(() => count.value * 2, [count])
+ * console.log(doubled.value) // 0
+ * count.set(5)
+ * console.log(doubled.value) // 10
+ * ```
+ */
+export function computed(fn, dependencies) {
+    const result = signal(fn());
+    // Subscribe to all dependencies immediately
+    // This ensures the computed value stays in sync even if no one is subscribed to it
+    dependencies.forEach((dep) => dep.subscribe(() => {
+        const newValue = fn();
+        // Update the result signal, which will notify our subscribers if value changed
+        if (!Object.is(result.value, newValue)) {
+            ;
+            result.set(newValue);
+        }
+    }));
+    // Return a read-only signal that proxies the result
+    return {
+        get value() {
+            return result.value;
+        },
+        subscribe(callback) {
+            // Just subscribe to result changes
+            return result.subscribe(callback);
+        },
+    };
+}
+/**
+ * Run a side effect automatically when dependencies change
+ *
+ * @param fn - Effect function. Can return a cleanup function.
+ * @param dependencies - Signals that trigger the effect when they change
+ * @returns Unsubscribe function that stops the effect and runs cleanup
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * effect(() => {
+ *   console.log('Count is:', count.value)
+ *   return () => console.log('Cleanup')
+ * }, [count])
+ * count.set(5) // Logs: Cleanup, Count is: 5
+ * ```
+ */
+export function effect(fn, dependencies) {
+    let cleanup;
+    const run = () => {
+        // Run cleanup from previous execution
+        if (cleanup) {
+            cleanup();
+            cleanup = undefined;
+        }
+        // Run effect and capture new cleanup
+        cleanup = fn();
+    };
+    // Subscribe to all dependencies
+    const unsubscribes = dependencies.map((dep) => dep.subscribe(run));
+    // Run effect immediately
+    run();
+    // Return function that unsubscribes and runs cleanup
+    return () => {
+        if (cleanup) {
+            cleanup();
+            cleanup = undefined;
+        }
+        unsubscribes.forEach((unsub) => unsub());
+    };
+}

package/dist/renderer-utils.d.ts

@@ -25,14 +25,17 @@ export declare function calculateBarRenderConfig({ width, height, length, option
     barWidth: number;
     barGap: number;
     barRadius: number;
+    barMinHeight: number;
     barIndexScale: number;
     barSpacing: number;
 };
-export declare function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, }: {
+export declare function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, barMinHeight, barAlign, }: {
     maxTop: number;
     maxBottom: number;
     halfHeight: number;
     vScale: number;
+    barMinHeight?: number;
+    barAlign?: WaveSurferOptions['barAlign'];
 }): {
     topHeight: number;
     totalHeight: number;
@@ -44,7 +47,7 @@ export declare function resolveBarYPosition({ barAlign, halfHeight, topHeight, t
     totalHeight: number;
     canvasHeight: number;
 }): number;
-export declare function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, }: {
+export declare function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, barMinHeight, }: {
     channelData: ChannelData;
     barIndexScale: number;
     barSpacing: number;
@@ -53,6 +56,7 @@ export declare function calculateBarSegments({ channelData, barIndexScale, barSp
     vScale: number;
     canvasHeight: number;
     barAlign: WaveSurferOptions['barAlign'];
+    barMinHeight: number;
 }): BarSegment[];
 export declare function getRelativePointerPosition(rect: DOMRect, clientX: number, clientY: number): [number, number];
 export declare function resolveChannelHeight({ optionsHeight, optionsSplitChannels, parentHeight, numberOfChannels, defaultHeight, }: {
@@ -64,7 +68,7 @@ export declare function resolveChannelHeight({ optionsHeight, optionsSplitChanne
 }): number;
 export declare function getPixelRatio(devicePixelRatio?: number): number;
 export declare function shouldRenderBars(options: WaveSurferOptions): boolean;
-export declare function resolveColorValue(color: WaveSurferOptions['waveColor'], devicePixelRatio: number): string | CanvasGradient;
+export declare function resolveColorValue(color: WaveSurferOptions['waveColor'], devicePixelRatio: number, canvasHeight?: number): string | CanvasGradient;
 export declare function calculateWaveformLayout({ duration, minPxPerSec, parentWidth, fillParent, pixelRatio, }: {
     duration: number;
     minPxPerSec?: number;
@@ -95,10 +99,11 @@ export declare function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases
     totalWidth: number;
     numCanvases: number;
 }): number[];
-export declare function calculateVerticalScale({ channelData, barHeight, normalize, }: {
+export declare function calculateVerticalScale({ channelData, barHeight, normalize, maxPeak, }: {
     channelData: ChannelData;
     barHeight?: WaveSurferOptions['barHeight'];
     normalize?: WaveSurferOptions['normalize'];
+    maxPeak?: WaveSurferOptions['maxPeak'];
 }): number;
 export declare function calculateLinePaths({ channelData, width, height, vScale, }: {
     channelData: ChannelData;
@@ -106,6 +111,10 @@ export declare function calculateLinePaths({ channelData, width, height, vScale,
     height: number;
     vScale: number;
 }): LinePath[];
+/**
+ * @deprecated Use calculateScrollPercentages from './reactive/scroll-stream.js' instead.
+ * This function is maintained for backward compatibility but will be removed in a future version.
+ */
 export declare function calculateScrollPercentages({ scrollLeft, clientWidth, scrollWidth, }: {
     scrollLeft: number;
     clientWidth: number;

package/dist/renderer-utils.js

@@ -13,6 +13,7 @@ export function calculateBarRenderConfig({ width, height, length, options, pixel
     const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
     const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
     const barRadius = options.barRadius || 0;
+    const barMinHeight = options.barMinHeight ? options.barMinHeight * pixelRatio : 0;
     const spacing = barWidth + barGap || 1;
     const barIndexScale = length > 0 ? width / spacing / length : 0;
     return {
@@ -20,14 +21,21 @@ export function calculateBarRenderConfig({ width, height, length, options, pixel
         barWidth,
         barGap,
         barRadius,
+        barMinHeight,
         barIndexScale,
         barSpacing: spacing,
     };
 }
-export function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, }) {
-    const topHeight = Math.round(maxTop * halfHeight * vScale);
+export function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, barMinHeight = 0, barAlign, }) {
+    let topHeight = Math.round(maxTop * halfHeight * vScale);
     const bottomHeight = Math.round(maxBottom * halfHeight * vScale);
-    const totalHeight = topHeight + bottomHeight || 1;
+    let totalHeight = topHeight + bottomHeight || 1;
+    if (totalHeight < barMinHeight) {
+        totalHeight = barMinHeight;
+        if (!barAlign) {
+            topHeight = totalHeight / 2;
+        }
+    }
     return { topHeight, totalHeight };
 }
 export function resolveBarYPosition({ barAlign, halfHeight, topHeight, totalHeight, canvasHeight, }) {
@@ -37,7 +45,7 @@ export function resolveBarYPosition({ barAlign, halfHeight, topHeight, totalHeig
         return canvasHeight - totalHeight;
     return halfHeight - topHeight;
 }
-export function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, }) {
+export function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, barMinHeight, }) {
     const topChannel = channelData[0] || [];
     const bottomChannel = channelData[1] || topChannel;
     const length = topChannel.length;
@@ -53,6 +61,8 @@ export function calculateBarSegments({ channelData, barIndexScale, barSpacing, b
                 maxBottom,
                 halfHeight,
                 vScale,
+                barMinHeight,
+                barAlign,
             });
             const y = resolveBarYPosition({
                 barAlign,
@@ -108,7 +118,7 @@ export function getPixelRatio(devicePixelRatio) {
 export function shouldRenderBars(options) {
     return Boolean(options.barWidth || options.barGap || options.barAlign);
 }
-export function resolveColorValue(color, devicePixelRatio) {
+export function resolveColorValue(color, devicePixelRatio, canvasHeight) {
     if (!Array.isArray(color))
         return color || '';
     if (color.length === 0)
@@ -117,7 +127,7 @@ export function resolveColorValue(color, devicePixelRatio) {
         return color[0] || '';
     const canvasElement = document.createElement('canvas');
     const ctx = canvasElement.getContext('2d');
-    const gradientHeight = canvasElement.height * devicePixelRatio;
+    const gradientHeight = canvasHeight !== null && canvasHeight !== void 0 ? canvasHeight : canvasElement.height * devicePixelRatio;
     const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight || devicePixelRatio);
     const colorStopPercentage = 1 / (color.length - 1);
     color.forEach((value, index) => {
@@ -168,7 +178,7 @@ export function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases, }) {
     const startCanvas = Math.floor(viewPosition * numCanvases);
     return [startCanvas - 1, startCanvas, startCanvas + 1];
 }
-export function calculateVerticalScale({ channelData, barHeight, normalize, }) {
+export function calculateVerticalScale({ channelData, barHeight, normalize, maxPeak, }) {
     var _a;
     const baseScale = barHeight || 1;
     if (!normalize)
@@ -176,12 +186,15 @@ export function calculateVerticalScale({ channelData, barHeight, normalize, }) {
     const firstChannel = channelData[0];
     if (!firstChannel || firstChannel.length === 0)
         return baseScale;
-    let max = 0;
-    for (let i = 0; i < firstChannel.length; i++) {
-        const value = (_a = firstChannel[i]) !== null && _a !== void 0 ? _a : 0;
-        const magnitude = Math.abs(value);
-        if (magnitude > max)
-            max = magnitude;
+    // Use fixed max peak if provided, otherwise calculate from data
+    let max = maxPeak !== null && maxPeak !== void 0 ? maxPeak : 0;
+    if (!maxPeak) {
+        for (let i = 0; i < firstChannel.length; i++) {
+            const value = (_a = firstChannel[i]) !== null && _a !== void 0 ? _a : 0;
+            const magnitude = Math.abs(value);
+            if (magnitude > max)
+                max = magnitude;
+        }
     }
     if (!max)
         return baseScale;
@@ -217,13 +230,20 @@ export function calculateLinePaths({ channelData, width, height, vScale, }) {
         return path;
     });
 }
+/**
+ * @deprecated Use calculateScrollPercentages from './reactive/scroll-stream.js' instead.
+ * This function is maintained for backward compatibility but will be removed in a future version.
+ */
 export function calculateScrollPercentages({ scrollLeft, clientWidth, scrollWidth, }) {
     if (scrollWidth === 0) {
-        return { startX: 0, endX: 0 };
+        return { startX: 0, endX: 1 };
     }
     const startX = scrollLeft / scrollWidth;
     const endX = (scrollLeft + clientWidth) / scrollWidth;
-    return { startX, endX };
+    return {
+        startX: Math.max(0, Math.min(1, startX)),
+        endX: Math.max(0, Math.min(1, endX)),
+    };
 }
 export function roundToHalfAwayFromZero(value) {
     const scaled = value * 2;

package/dist/renderer.d.ts

@@ -28,7 +28,8 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     private isDragging;
     private subscriptions;
     private unsubscribeOnScroll;
-    private dragUnsubscribe;
+    private dragStream;
+    private scrollStream;
     constructor(options: WaveSurferOptions, audioElement?: HTMLElement);
     private parentFromOptionsContainer;
     private initEvents;

package/dist/renderer.js

@@ -18,9 +18,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
 import * as utils from './renderer-utils.js';
+import { createDragStream } from './reactive/drag-stream.js';
+import { createScrollStream } from './reactive/scroll-stream.js';
+import { effect } from './reactive/store.js';
 class Renderer extends EventEmitter {
     constructor(options, audioElement) {
         super();
@@ -32,7 +34,8 @@ class Renderer extends EventEmitter {
         this.isDragging = false;
         this.subscriptions = [];
         this.unsubscribeOnScroll = [];
-        this.dragUnsubscribe = null;
+        this.dragStream = null;
+        this.scrollStream = null;
         this.subscriptions = [];
         this.options = options;
         const parent = this.parentFromOptionsContainer(options.container);
@@ -80,16 +83,14 @@ class Renderer extends EventEmitter {
         if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
             this.initDrag();
         }
-        // Add a scroll listener
-        this.scrollContainer.addEventListener('scroll', () => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const { startX, endX } = utils.calculateScrollPercentages({
-                scrollLeft,
-                scrollWidth,
-                clientWidth,
-            });
-            this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
-        });
+        // Add a scroll listener using reactive stream
+        this.scrollStream = createScrollStream(this.scrollContainer);
+        const unsubscribeScroll = effect(() => {
+            const { startX, endX } = this.scrollStream.percentages.value;
+            const { left, right } = this.scrollStream.bounds.value;
+            this.emit('scroll', startX, endX, left, right);
+        }, [this.scrollStream.percentages, this.scrollStream.bounds]);
+        this.subscriptions.push(unsubscribeScroll);
         // Re-render the waveform on container resize
         if (typeof ResizeObserver === 'function') {
             const delay = this.createDelay(100);
@@ -111,27 +112,28 @@ class Renderer extends EventEmitter {
     }
     initDrag() {
         // Don't initialize drag if it's already set up
-        if (this.dragUnsubscribe)
+        if (this.dragStream)
             return;
-        this.dragUnsubscribe = makeDraggable(this.wrapper, 
-        // On drag
-        (_, __, x) => {
-            const width = this.wrapper.getBoundingClientRect().width;
-            this.emit('drag', utils.clampToUnit(x / width));
-        }, 
-        // On start drag
-        (x) => {
-            this.isDragging = true;
-            const width = this.wrapper.getBoundingClientRect().width;
-            this.emit('dragstart', utils.clampToUnit(x / width));
-        }, 
-        // On end drag
-        (x) => {
-            this.isDragging = false;
+        this.dragStream = createDragStream(this.wrapper);
+        const unsubscribeDrag = effect(() => {
+            const drag = this.dragStream.signal.value;
+            if (!drag)
+                return;
             const width = this.wrapper.getBoundingClientRect().width;
-            this.emit('dragend', utils.clampToUnit(x / width));
-        });
-        this.subscriptions.push(this.dragUnsubscribe);
+            const relX = utils.clampToUnit(drag.x / width);
+            if (drag.type === 'start') {
+                this.isDragging = true;
+                this.emit('dragstart', relX);
+            }
+            else if (drag.type === 'move') {
+                this.emit('drag', relX);
+            }
+            else if (drag.type === 'end') {
+                this.isDragging = false;
+                this.emit('dragend', relX);
+            }
+        }, [this.dragStream.signal]);
+        this.subscriptions.push(unsubscribeDrag);
     }
     initHtml() {
         const div = document.createElement('div');
@@ -254,6 +256,14 @@ class Renderer extends EventEmitter {
         }
         (_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.forEach((unsubscribe) => unsubscribe());
         this.unsubscribeOnScroll = [];
+        if (this.dragStream) {
+            this.dragStream.cleanup();
+            this.dragStream = null;
+        }
+        if (this.scrollStream) {
+            this.scrollStream.cleanup();
+            this.scrollStream = null;
+        }
     }
     createDelay(delayMs = 10) {
         let timeout;
@@ -295,15 +305,15 @@ class Renderer extends EventEmitter {
             defaultHeight: utils.DEFAULT_HEIGHT,
         });
     }
-    convertColorValues(color) {
-        return utils.resolveColorValue(color, this.getPixelRatio());
+    convertColorValues(color, ctx) {
+        return utils.resolveColorValue(color, this.getPixelRatio(), ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
     }
     getPixelRatio() {
         return utils.getPixelRatio(window.devicePixelRatio);
     }
     renderBarWaveform(channelData, options, ctx, vScale) {
         const { width, height } = ctx.canvas;
-        const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing } = utils.calculateBarRenderConfig({
+        const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing, barMinHeight } = utils.calculateBarRenderConfig({
             width,
             height,
             length: (channelData[0] || []).length,
@@ -319,6 +329,7 @@ class Renderer extends EventEmitter {
             vScale,
             canvasHeight: height,
             barAlign: options.barAlign,
+            barMinHeight,
         });
         ctx.beginPath();
         for (const segment of segments) {
@@ -350,7 +361,7 @@ class Renderer extends EventEmitter {
         ctx.closePath();
     }
     renderWaveform(channelData, options, ctx) {
-        ctx.fillStyle = this.convertColorValues(options.waveColor);
+        ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
         if (options.renderFunction) {
             options.renderFunction(channelData, ctx);
             return;
@@ -359,6 +370,7 @@ class Renderer extends EventEmitter {
             channelData,
             barHeight: options.barHeight,
             normalize: options.normalize,
+            maxPeak: options.maxPeak,
         });
         if (utils.shouldRenderBars(options)) {
             this.renderBarWaveform(channelData, options, ctx, vScale);
@@ -377,7 +389,7 @@ class Renderer extends EventEmitter {
         canvasContainer.appendChild(canvas);
         const ctx = canvas.getContext('2d');
         if (options.renderFunction) {
-            ctx.fillStyle = this.convertColorValues(options.waveColor);
+            ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
             options.renderFunction(data, ctx);
         }
         else {
@@ -390,7 +402,7 @@ class Renderer extends EventEmitter {
             progressCtx.drawImage(canvas, 0, 0);
             // Set the composition method to draw only where the waveform is drawn
             progressCtx.globalCompositeOperation = 'source-in';
-            progressCtx.fillStyle = this.convertColorValues(options.progressColor);
+            progressCtx.fillStyle = this.convertColorValues(options.progressColor, progressCtx);
             // This rectangle acts as a mask thanks to the composition method
             progressCtx.fillRect(0, 0, canvas.width, canvas.height);
             progressContainer.appendChild(progressCanvas);
@@ -574,16 +586,6 @@ class Renderer extends EventEmitter {
                 this.scrollContainer.scrollLeft += center;
             }
         }
-        // Emit the scroll event
-        {
-            const newScroll = this.scrollContainer.scrollLeft;
-            const { startX, endX } = utils.calculateScrollPercentages({
-                scrollLeft: newScroll,
-                scrollWidth,
-                clientWidth,
-            });
-            this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
-        }
     }
     renderProgress(progress, isPlaying) {
         if (isNaN(progress))
@@ -595,7 +597,8 @@ class Renderer extends EventEmitter {
         this.cursor.style.transform = this.options.cursorWidth
             ? `translateX(-${progress * this.options.cursorWidth}px)`
             : '';
-        if (this.isScrollable && this.options.autoScroll) {
+        // Only scroll if we have valid audio data to prevent race conditions during loading
+        if (this.isScrollable && this.options.autoScroll && this.audioData && this.audioData.duration > 0) {
             this.scrollIntoView(progress, isPlaying);
         }
     }

package/dist/state/__tests__/wavesurfer-state.test.d.ts

@@ -0,0 +1 @@
+export {};