wavesurfer.js 7.11.0 → 7.12.0

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

@@ -0,0 +1,126 @@
+import type { WaveSurferOptions } from './wavesurfer.js';
+export type ChannelData = Array<Float32Array | number[]>;
+export type BarSegment = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type LinePath = Array<{
+    x: number;
+    y: number;
+}>;
+export declare const DEFAULT_HEIGHT = 128;
+export declare const MAX_CANVAS_WIDTH = 8000;
+export declare const MAX_NODES = 10;
+export declare function clampToUnit(value: number): number;
+export declare function calculateBarRenderConfig({ width, height, length, options, pixelRatio, }: {
+    width: number;
+    height: number;
+    length: number;
+    options: WaveSurferOptions;
+    pixelRatio: number;
+}): {
+    halfHeight: number;
+    barWidth: number;
+    barGap: number;
+    barRadius: number;
+    barMinHeight: number;
+    barIndexScale: number;
+    barSpacing: number;
+};
+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;
+};
+export declare function resolveBarYPosition({ barAlign, halfHeight, topHeight, totalHeight, canvasHeight, }: {
+    barAlign: WaveSurferOptions['barAlign'];
+    halfHeight: number;
+    topHeight: number;
+    totalHeight: number;
+    canvasHeight: number;
+}): number;
+export declare function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, barMinHeight, }: {
+    channelData: ChannelData;
+    barIndexScale: number;
+    barSpacing: number;
+    barWidth: number;
+    halfHeight: number;
+    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, }: {
+    optionsHeight?: WaveSurferOptions['height'];
+    optionsSplitChannels?: WaveSurferOptions['splitChannels'];
+    parentHeight: number;
+    numberOfChannels: number;
+    defaultHeight?: number;
+}): 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 calculateWaveformLayout({ duration, minPxPerSec, parentWidth, fillParent, pixelRatio, }: {
+    duration: number;
+    minPxPerSec?: number;
+    parentWidth: number;
+    fillParent?: boolean;
+    pixelRatio: number;
+}): {
+    scrollWidth: number;
+    isScrollable: boolean;
+    useParentWidth: boolean;
+    width: number;
+};
+export declare function clampWidthToBarGrid(width: number, options: WaveSurferOptions): number;
+export declare function calculateSingleCanvasWidth({ clientWidth, totalWidth, options, }: {
+    clientWidth: number;
+    totalWidth: number;
+    options: WaveSurferOptions;
+}): number;
+export declare function sliceChannelData({ channelData, offset, clampedWidth, totalWidth, }: {
+    channelData: ChannelData;
+    offset: number;
+    clampedWidth: number;
+    totalWidth: number;
+}): ChannelData;
+export declare function shouldClearCanvases(currentNodeCount: number): boolean;
+export declare function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases, }: {
+    scrollLeft: number;
+    totalWidth: number;
+    numCanvases: number;
+}): number[];
+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;
+    width: number;
+    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;
+    scrollWidth: number;
+}): {
+    startX: number;
+    endX: number;
+};
+export declare function roundToHalfAwayFromZero(value: number): number;

package/dist/renderer-utils.js

@@ -0,0 +1,252 @@
+export const DEFAULT_HEIGHT = 128;
+export const MAX_CANVAS_WIDTH = 8000;
+export const MAX_NODES = 10;
+export function clampToUnit(value) {
+    if (value < 0)
+        return 0;
+    if (value > 1)
+        return 1;
+    return value;
+}
+export function calculateBarRenderConfig({ width, height, length, options, pixelRatio, }) {
+    const halfHeight = height / 2;
+    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 {
+        halfHeight,
+        barWidth,
+        barGap,
+        barRadius,
+        barMinHeight,
+        barIndexScale,
+        barSpacing: spacing,
+    };
+}
+export function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, barMinHeight = 0, barAlign, }) {
+    let topHeight = Math.round(maxTop * halfHeight * vScale);
+    const bottomHeight = Math.round(maxBottom * halfHeight * vScale);
+    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, }) {
+    if (barAlign === 'top')
+        return 0;
+    if (barAlign === 'bottom')
+        return canvasHeight - totalHeight;
+    return halfHeight - topHeight;
+}
+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;
+    const segments = [];
+    let prevX = 0;
+    let maxTop = 0;
+    let maxBottom = 0;
+    for (let i = 0; i <= length; i++) {
+        const x = Math.round(i * barIndexScale);
+        if (x > prevX) {
+            const { topHeight, totalHeight } = calculateBarHeights({
+                maxTop,
+                maxBottom,
+                halfHeight,
+                vScale,
+                barMinHeight,
+                barAlign,
+            });
+            const y = resolveBarYPosition({
+                barAlign,
+                halfHeight,
+                topHeight,
+                totalHeight,
+                canvasHeight,
+            });
+            segments.push({
+                x: prevX * barSpacing,
+                y,
+                width: barWidth,
+                height: totalHeight,
+            });
+            prevX = x;
+            maxTop = 0;
+            maxBottom = 0;
+        }
+        const magnitudeTop = Math.abs(topChannel[i] || 0);
+        const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
+        if (magnitudeTop > maxTop)
+            maxTop = magnitudeTop;
+        if (magnitudeBottom > maxBottom)
+            maxBottom = magnitudeBottom;
+    }
+    return segments;
+}
+export function getRelativePointerPosition(rect, clientX, clientY) {
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const relativeX = x / rect.width;
+    const relativeY = y / rect.height;
+    return [relativeX, relativeY];
+}
+export function resolveChannelHeight({ optionsHeight, optionsSplitChannels, parentHeight, numberOfChannels, defaultHeight = DEFAULT_HEIGHT, }) {
+    if (optionsHeight == null)
+        return defaultHeight;
+    const numericHeight = Number(optionsHeight);
+    if (!isNaN(numericHeight))
+        return numericHeight;
+    if (optionsHeight === 'auto') {
+        const height = parentHeight || defaultHeight;
+        if (optionsSplitChannels === null || optionsSplitChannels === void 0 ? void 0 : optionsSplitChannels.every((channel) => !channel.overlay)) {
+            return height / numberOfChannels;
+        }
+        return height;
+    }
+    return defaultHeight;
+}
+export function getPixelRatio(devicePixelRatio) {
+    return Math.max(1, devicePixelRatio || 1);
+}
+export function shouldRenderBars(options) {
+    return Boolean(options.barWidth || options.barGap || options.barAlign);
+}
+export function resolveColorValue(color, devicePixelRatio) {
+    if (!Array.isArray(color))
+        return color || '';
+    if (color.length === 0)
+        return '#999';
+    if (color.length < 2)
+        return color[0] || '';
+    const canvasElement = document.createElement('canvas');
+    const ctx = canvasElement.getContext('2d');
+    const gradientHeight = canvasElement.height * devicePixelRatio;
+    const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight || devicePixelRatio);
+    const colorStopPercentage = 1 / (color.length - 1);
+    color.forEach((value, index) => {
+        gradient.addColorStop(index * colorStopPercentage, value);
+    });
+    return gradient;
+}
+export function calculateWaveformLayout({ duration, minPxPerSec = 0, parentWidth, fillParent, pixelRatio, }) {
+    const scrollWidth = Math.ceil(duration * minPxPerSec);
+    const isScrollable = scrollWidth > parentWidth;
+    const useParentWidth = Boolean(fillParent && !isScrollable);
+    const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+    return {
+        scrollWidth,
+        isScrollable,
+        useParentWidth,
+        width,
+    };
+}
+export function clampWidthToBarGrid(width, options) {
+    if (!shouldRenderBars(options))
+        return width;
+    const barWidth = options.barWidth || 0.5;
+    const barGap = options.barGap || barWidth / 2;
+    const totalBarWidth = barWidth + barGap;
+    if (totalBarWidth === 0)
+        return width;
+    return Math.floor(width / totalBarWidth) * totalBarWidth;
+}
+export function calculateSingleCanvasWidth({ clientWidth, totalWidth, options, }) {
+    const baseWidth = Math.min(MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+    return clampWidthToBarGrid(baseWidth, options);
+}
+export function sliceChannelData({ channelData, offset, clampedWidth, totalWidth, }) {
+    return channelData.map((channel) => {
+        const start = Math.floor((offset / totalWidth) * channel.length);
+        const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
+        return channel.slice(start, end);
+    });
+}
+export function shouldClearCanvases(currentNodeCount) {
+    return currentNodeCount > MAX_NODES;
+}
+export function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases, }) {
+    if (totalWidth === 0)
+        return [0];
+    const viewPosition = scrollLeft / totalWidth;
+    const startCanvas = Math.floor(viewPosition * numCanvases);
+    return [startCanvas - 1, startCanvas, startCanvas + 1];
+}
+export function calculateVerticalScale({ channelData, barHeight, normalize, maxPeak, }) {
+    var _a;
+    const baseScale = barHeight || 1;
+    if (!normalize)
+        return baseScale;
+    const firstChannel = channelData[0];
+    if (!firstChannel || firstChannel.length === 0)
+        return baseScale;
+    // 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;
+    return baseScale / max;
+}
+export function calculateLinePaths({ channelData, width, height, vScale, }) {
+    const halfHeight = height / 2;
+    const primaryChannel = channelData[0] || [];
+    const secondaryChannel = channelData[1] || primaryChannel;
+    const channels = [primaryChannel, secondaryChannel];
+    return channels.map((channel, index) => {
+        const length = channel.length;
+        const hScale = length ? width / length : 0;
+        const baseY = halfHeight;
+        const direction = index === 0 ? -1 : 1;
+        const path = [{ x: 0, y: baseY }];
+        let prevX = 0;
+        let max = 0;
+        for (let i = 0; i <= length; i++) {
+            const x = Math.round(i * hScale);
+            if (x > prevX) {
+                const heightDelta = Math.round(max * halfHeight * vScale) || 1;
+                const y = baseY + heightDelta * direction;
+                path.push({ x: prevX, y });
+                prevX = x;
+                max = 0;
+            }
+            const value = Math.abs(channel[i] || 0);
+            if (value > max)
+                max = value;
+        }
+        path.push({ x: prevX, y: baseY });
+        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: 1 };
+    }
+    const startX = scrollLeft / scrollWidth;
+    const endX = (scrollLeft + clientWidth) / scrollWidth;
+    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;
+    const rounded = scaled < 0 ? Math.floor(scaled) : Math.ceil(scaled);
+    return rounded / 2;
+}

package/dist/renderer.d.ts

@@ -9,10 +9,9 @@ type RendererEvents = {
     scroll: [relativeStart: number, relativeEnd: number, scrollLeft: number, scrollRight: number];
     render: [];
     rendered: [];
+    resize: [];
 };
 declare class Renderer extends EventEmitter<RendererEvents> {
-    private static MAX_CANVAS_WIDTH;
-    private static MAX_NODES;
     private options;
     private parent;
     private container;
@@ -29,13 +28,13 @@ 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;
     private onContainerResize;
     private initDrag;
-    private getHeight;
     private initHtml;
     /** Wavesurfer itself calls this method. Do not call it manually. */
     setOptions(options: WaveSurferOptions): void;
@@ -46,6 +45,7 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     setScrollPercentage(percent: number): void;
     destroy(): void;
     private createDelay;
+    private getHeight;
     private convertColorValues;
     private getPixelRatio;
     private renderBarWaveform;