wavesurfer.js 7.9.6 → 7.9.8

package/dist/__tests__/draggable.test.js

@@ -15,9 +15,9 @@ describe('makeDraggable', () => {
                     super(type, props);
                 }
             }
-            // @ts-ignore
+            // @ts-expect-error
             window.PointerEvent = FakePointerEvent;
-            // @ts-ignore
+            // @ts-expect-error
             global.PointerEvent = FakePointerEvent;
         }
     });

package/dist/__tests__/renderer.test.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        HTMLCanvasElement: typeof HTMLCanvasElement;
+    }
+}
+export {};

package/dist/__tests__/renderer.test.js

@@ -0,0 +1,180 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Renderer from '../renderer.js';
+const createAudioBuffer = (channels, duration = 1) => {
+    return {
+        duration,
+        length: channels[0].length,
+        sampleRate: channels[0].length / duration,
+        numberOfChannels: channels.length,
+        getChannelData: (i) => Float32Array.from(channels[i]),
+        copyFromChannel: jest.fn(),
+        copyToChannel: jest.fn(),
+    };
+};
+describe('Renderer', () => {
+    let container;
+    let renderer;
+    const originalGetContext = window.HTMLCanvasElement.prototype.getContext;
+    const originalToDataURL = window.HTMLCanvasElement.prototype.toDataURL;
+    const originalToBlob = window.HTMLCanvasElement.prototype.toBlob;
+    beforeAll(() => {
+        Object.defineProperty(window, 'devicePixelRatio', { value: 1, writable: true });
+        window.HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
+            beginPath: jest.fn(),
+            rect: jest.fn(),
+            roundRect: jest.fn(),
+            moveTo: jest.fn(),
+            lineTo: jest.fn(),
+            closePath: jest.fn(),
+            fill: jest.fn(),
+            drawImage: jest.fn(),
+            fillRect: jest.fn(),
+            createLinearGradient: jest.fn(() => ({ addColorStop: jest.fn() })),
+            globalCompositeOperation: '',
+            canvas: { width: 100, height: 100 },
+        }));
+        window.HTMLCanvasElement.prototype.toDataURL = jest.fn(() => 'data:mock');
+        window.HTMLCanvasElement.prototype.toBlob = jest.fn((cb) => cb(new Blob([''])));
+    });
+    afterAll(() => {
+        window.HTMLCanvasElement.prototype.getContext = originalGetContext;
+        window.HTMLCanvasElement.prototype.toDataURL = originalToDataURL;
+        window.HTMLCanvasElement.prototype.toBlob = originalToBlob;
+    });
+    beforeEach(() => {
+        container = document.createElement('div');
+        container.id = 'root';
+        document.body.appendChild(container);
+        renderer = new Renderer({ container });
+    });
+    afterEach(() => {
+        renderer.destroy();
+        container.remove();
+        jest.clearAllMocks();
+    });
+    test('parentFromOptionsContainer returns element and throws', () => {
+        expect(renderer.parentFromOptionsContainer(container)).toBe(container);
+        expect(renderer.parentFromOptionsContainer('#root')).toBe(container);
+        expect(() => renderer.parentFromOptionsContainer('#missing')).toThrow();
+    });
+    test('initHtml creates shadow root', () => {
+        const [el, shadow] = renderer.initHtml();
+        expect(el.shadowRoot).toBe(shadow);
+        expect(shadow.querySelector('.scroll')).not.toBeNull();
+    });
+    test('getHeight calculates values', () => {
+        ;
+        renderer.audioData = { numberOfChannels: 2 };
+        expect(renderer.getHeight(undefined, undefined)).toBe(128);
+        expect(renderer.getHeight(50, undefined)).toBe(50);
+        container.style.height = '200px';
+        expect(renderer.getHeight('auto', [{ overlay: false }])).toBe(64);
+    });
+    test('createDelay resolves after time', () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.useFakeTimers();
+        const delay = renderer.createDelay(10);
+        const spy = jest.fn();
+        const p = delay().then(spy);
+        jest.advanceTimersByTime(10);
+        yield p;
+        expect(spy).toHaveBeenCalled();
+        jest.useRealTimers();
+    }));
+    test('convertColorValues supports gradients', () => {
+        const result = renderer.convertColorValues(['red', 'blue']);
+        expect(typeof result).toBe('object');
+        expect(renderer.convertColorValues('red')).toBe('red');
+    });
+    test('getPixelRatio returns positive', () => {
+        window.devicePixelRatio = 2;
+        expect(renderer.getPixelRatio()).toBe(2);
+    });
+    test('renderBarWaveform and renderLineWaveform draw on context', () => {
+        const ctx = renderer.canvasWrapper.ownerDocument.createElement('canvas').getContext('2d');
+        const data = [new Float32Array([0, 0.5, -0.5]), new Float32Array([0, -0.5, 0.5])];
+        renderer.renderBarWaveform(data, {}, ctx, 1);
+        expect(ctx.beginPath).toHaveBeenCalled();
+        renderer.renderLineWaveform(data, {}, ctx, 1);
+        expect(ctx.lineTo).toHaveBeenCalled();
+    });
+    test('renderWaveform chooses rendering path', () => {
+        const ctx = document.createElement('canvas').getContext('2d');
+        const data = [new Float32Array([0, 1])];
+        const spyBar = jest.spyOn(renderer, 'renderBarWaveform');
+        const spyLine = jest.spyOn(renderer, 'renderLineWaveform');
+        renderer.renderWaveform(data, { barWidth: 1 }, ctx);
+        expect(spyBar).toHaveBeenCalled();
+        renderer.renderWaveform(data, {}, ctx);
+        expect(spyLine).toHaveBeenCalled();
+    });
+    test('renderSingleCanvas appends canvases', () => {
+        const canvasContainer = document.createElement('div');
+        const progressContainer = document.createElement('div');
+        const data = [new Float32Array([0, 1])];
+        renderer.renderSingleCanvas(data, {}, 10, 10, 0, canvasContainer, progressContainer);
+        expect(canvasContainer.querySelector('canvas')).not.toBeNull();
+        expect(progressContainer.querySelector('canvas')).not.toBeNull();
+    });
+    test('renderMultiCanvas draws and subscribes', () => {
+        const canvasContainer = document.createElement('div');
+        const progressContainer = document.createElement('div');
+        const data = [new Float32Array([0, 1])];
+        Object.defineProperty(renderer.scrollContainer, 'clientWidth', { configurable: true, value: 200 });
+        renderer.renderMultiCanvas(data, { barWidth: 1 }, 200, 10, canvasContainer, progressContainer);
+        expect(canvasContainer.querySelector('canvas')).not.toBeNull();
+    });
+    test('renderChannel creates containers', () => {
+        const data = [new Float32Array([0, 1])];
+        renderer.renderChannel(data, {}, 10, 0);
+        expect(renderer.canvasWrapper.children.length).toBeGreaterThan(0);
+    });
+    test('render processes audio buffer', () => __awaiter(void 0, void 0, void 0, function* () {
+        const buffer = createAudioBuffer([[0, 0.5, -0.5]]);
+        const spy = jest.fn();
+        renderer.on('render', spy);
+        yield renderer.render(buffer);
+        expect(spy).toHaveBeenCalled();
+    }));
+    test('reRender keeps scroll position', () => __awaiter(void 0, void 0, void 0, function* () {
+        const buffer = createAudioBuffer([[0, 0.5, -0.5]]);
+        yield renderer.render(buffer);
+        renderer.setScroll(10);
+        renderer.reRender();
+        expect(renderer.getScroll()).toBe(10);
+    }));
+    test('zoom updates option', () => {
+        renderer.zoom(20);
+        expect(renderer.options.minPxPerSec).toBe(20);
+    });
+    test('scrollIntoView updates scroll', () => {
+        Object.defineProperty(renderer.scrollContainer, 'scrollWidth', { configurable: true, value: 100 });
+        Object.defineProperty(renderer.scrollContainer, 'clientWidth', { configurable: true, value: 50 });
+        renderer.renderProgress(0);
+        renderer.scrollIntoView(0.8);
+        expect(renderer.getScroll()).toBeGreaterThanOrEqual(0);
+    });
+    test('renderProgress updates styles', () => {
+        renderer.renderProgress(0.5);
+        expect(renderer.progressWrapper.style.width).toBe('50%');
+    });
+    test('exportImage returns data', () => __awaiter(void 0, void 0, void 0, function* () {
+        const canvas = document.createElement('canvas');
+        renderer.canvasWrapper.appendChild(canvas);
+        const urls = yield renderer.exportImage('image/png', 1, 'dataURL');
+        expect(urls).toHaveLength(1);
+        const blobs = yield renderer.exportImage('image/png', 1, 'blob');
+        expect(blobs).toHaveLength(1);
+    }));
+    test('destroy cleans up', () => {
+        renderer.destroy();
+        expect(container.contains(renderer.getWrapper())).toBe(false);
+    });
+});

package/dist/__tests__/timer.test.js

@@ -15,14 +15,4 @@ describe('Timer', () => {
         timer.start();
         expect(tick).toHaveBeenCalledTimes(2);
     });
-    test('stop unsubscribes', () => {
-        const timer = new Timer();
-        const tick = jest.fn();
-        timer.on('tick', tick);
-        timer.start();
-        timer.stop();
-        tick.mockClear();
-        timer.emit('tick');
-        expect(tick).not.toHaveBeenCalled();
-    });
 });

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

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

package/dist/__tests__/wavesurfer.test.js

@@ -0,0 +1,227 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+jest.mock('../renderer.js', () => {
+    let lastInstance;
+    class Renderer {
+        constructor(options) {
+            this.wrapper = document.createElement('div');
+            this.renderProgress = jest.fn();
+            this.on = jest.fn(() => () => undefined);
+            this.setOptions = jest.fn();
+            this.getWrapper = jest.fn(() => this.wrapper);
+            this.getWidth = jest.fn(() => 100);
+            this.getScroll = jest.fn(() => 0);
+            this.setScroll = jest.fn();
+            this.setScrollPercentage = jest.fn();
+            this.render = jest.fn();
+            this.zoom = jest.fn();
+            this.exportImage = jest.fn(() => []);
+            this.destroy = jest.fn();
+            this.options = options;
+            lastInstance = this;
+        }
+    }
+    return { __esModule: true, default: Renderer, getLastInstance: () => lastInstance };
+});
+jest.mock('../timer.js', () => {
+    let lastInstance;
+    class Timer {
+        constructor() {
+            this.on = jest.fn(() => () => undefined);
+            this.start = jest.fn();
+            this.stop = jest.fn();
+            this.destroy = jest.fn();
+        }
+    }
+    const ctor = jest.fn(() => {
+        lastInstance = new Timer();
+        return lastInstance;
+    });
+    return { __esModule: true, default: ctor, getLastInstance: () => lastInstance };
+});
+jest.mock('../decoder.js', () => {
+    const createBuffer = jest.fn((data, duration) => ({
+        duration,
+        numberOfChannels: data.length,
+        getChannelData: (i) => Float32Array.from(data[i]),
+    }));
+    return { __esModule: true, default: { decode: jest.fn(), createBuffer } };
+});
+import WaveSurfer from '../wavesurfer.js';
+import { BasePlugin } from '../base-plugin.js';
+import * as RendererModule from '../renderer.js';
+import * as TimerModule from '../timer.js';
+const getRenderer = RendererModule.getLastInstance;
+const getTimer = TimerModule.getLastInstance;
+const createMedia = () => {
+    const media = document.createElement('audio');
+    media.play = jest.fn().mockResolvedValue(undefined);
+    media.pause = jest.fn();
+    Object.defineProperty(media, 'duration', { configurable: true, value: 100, writable: true });
+    return media;
+};
+const createWs = (opts = {}) => {
+    const container = document.createElement('div');
+    return WaveSurfer.create(Object.assign({ container, media: createMedia() }, opts));
+};
+afterEach(() => {
+    jest.clearAllMocks();
+});
+describe('WaveSurfer public methods', () => {
+    test('create returns instance', () => {
+        const ws = createWs();
+        expect(ws).toBeInstanceOf(WaveSurfer);
+    });
+    test('setOptions merges options and updates renderer', () => {
+        const ws = createWs();
+        ws.setOptions({ height: 200, audioRate: 2, mediaControls: true });
+        const renderer = getRenderer();
+        expect(ws.options.height).toBe(200);
+        expect(renderer.setOptions).toHaveBeenCalledWith(ws.options);
+        expect(ws.getPlaybackRate()).toBe(2);
+        expect(ws.getMediaElement().controls).toBe(true);
+    });
+    test('registerPlugin adds and removes plugin', () => {
+        const ws = createWs();
+        class TestPlugin extends BasePlugin {
+        }
+        const plugin = new TestPlugin({});
+        ws.registerPlugin(plugin);
+        expect(ws.getActivePlugins()).toContain(plugin);
+        plugin.destroy();
+        expect(ws.getActivePlugins()).not.toContain(plugin);
+    });
+    test('wrapper and scroll helpers call renderer', () => {
+        const ws = createWs();
+        const renderer = getRenderer();
+        ws.getWrapper();
+        expect(renderer.getWrapper).toHaveBeenCalled();
+        ws.getWidth();
+        expect(renderer.getWidth).toHaveBeenCalled();
+        ws.getScroll();
+        expect(renderer.getScroll).toHaveBeenCalled();
+        ws.setScroll(42);
+        expect(renderer.setScroll).toHaveBeenCalledWith(42);
+        jest.spyOn(ws, 'getDuration').mockReturnValue(10);
+        ws.setScrollTime(5);
+        expect(renderer.setScrollPercentage).toHaveBeenCalledWith(0.5);
+    });
+    test('load and loadBlob call loadAudio', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ws = createWs();
+        const spy = jest.spyOn(ws, 'loadAudio').mockResolvedValue(undefined);
+        yield ws.load('url');
+        expect(spy).toHaveBeenCalledWith('url', undefined, undefined, undefined);
+        const blob = new Blob([]);
+        yield ws.loadBlob(blob);
+        expect(spy).toHaveBeenCalledWith('', blob, undefined, undefined);
+    }));
+    test('zoom requires decoded data', () => {
+        const ws = createWs();
+        expect(() => ws.zoom(10)).toThrow();
+        ws.decodedData = { duration: 1 };
+        ws.zoom(10);
+        expect(getRenderer().zoom).toHaveBeenCalledWith(10);
+    });
+    test('getDecodedData returns buffer', () => {
+        const ws = createWs();
+        ws.decodedData = 123;
+        expect(ws.getDecodedData()).toBe(123);
+    });
+    test('exportPeaks reads data from buffer', () => {
+        const ws = createWs();
+        ws.decodedData = {
+            numberOfChannels: 1,
+            getChannelData: () => new Float32Array([0, 1, -1]),
+            duration: 3,
+        };
+        const peaks = ws.exportPeaks({ maxLength: 3, precision: 100 });
+        expect(peaks[0]).toEqual([0, 1, -1]);
+    });
+    test('getDuration falls back to decoded data', () => {
+        const ws = createWs();
+        const media = ws.getMediaElement();
+        Object.defineProperty(media, 'duration', { configurable: true, value: Infinity });
+        ws.decodedData = { duration: 2 };
+        expect(ws.getDuration()).toBe(2);
+    });
+    test('toggleInteraction sets option', () => {
+        const ws = createWs();
+        ws.toggleInteraction(false);
+        expect(ws.options.interact).toBe(false);
+    });
+    test('setTime updates progress and emits event', () => {
+        const ws = createWs();
+        const spy = jest.fn();
+        ws.on('timeupdate', spy);
+        ws.setTime(1);
+        expect(spy).toHaveBeenCalledWith(1);
+        expect(getRenderer().renderProgress).toHaveBeenCalled();
+    });
+    test('seekTo calculates correct time', () => {
+        const ws = createWs();
+        jest.spyOn(ws, 'getDuration').mockReturnValue(10);
+        const setTimeSpy = jest.spyOn(ws, 'setTime');
+        ws.seekTo(0.5);
+        expect(setTimeSpy).toHaveBeenCalledWith(5);
+    });
+    test('play sets start and end', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ws = createWs();
+        const spy = jest.spyOn(ws, 'setTime');
+        yield ws.play(2, 4);
+        expect(spy).toHaveBeenCalledWith(2);
+        expect(ws.stopAtPosition).toBe(4);
+    }));
+    test('playPause toggles play and pause', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ws = createWs();
+        const media = ws.getMediaElement();
+        yield ws.playPause();
+        expect(media.play).toHaveBeenCalled();
+        Object.defineProperty(media, 'paused', { configurable: true, value: false });
+        yield ws.playPause();
+        expect(media.pause).toHaveBeenCalled();
+    }));
+    test('stop resets time', () => {
+        const ws = createWs();
+        ws.setTime(5);
+        ws.stop();
+        expect(ws.getCurrentTime()).toBe(0);
+    });
+    test('skip and empty', () => {
+        const ws = createWs();
+        ws.getMediaElement().currentTime = 1;
+        const spy = jest.spyOn(ws, 'setTime');
+        ws.skip(2);
+        expect(spy).toHaveBeenCalledWith(3);
+        const loadSpy = jest.spyOn(ws, 'load').mockResolvedValue(undefined);
+        ws.empty();
+        expect(loadSpy).toHaveBeenCalledWith('', [[0]], 0.001);
+    });
+    test('setMediaElement reinitializes events', () => {
+        const ws = createWs();
+        const unsub = jest.spyOn(ws, 'unsubscribePlayerEvents');
+        const init = jest.spyOn(ws, 'initPlayerEvents');
+        const el = createMedia();
+        ws.setMediaElement(el);
+        expect(unsub).toHaveBeenCalled();
+        expect(init).toHaveBeenCalled();
+        expect(ws.getMediaElement()).toBe(el);
+    });
+    test('exportImage uses renderer', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ws = createWs();
+        yield ws.exportImage('image/png', 1, 'dataURL');
+        expect(getRenderer().exportImage).toHaveBeenCalled();
+    }));
+    test('destroy cleans up renderer and timer', () => {
+        const ws = createWs();
+        ws.destroy();
+        expect(getRenderer().destroy).toHaveBeenCalled();
+        expect(getTimer().destroy).toHaveBeenCalled();
+    });
+});

package/dist/player.js

@@ -65,7 +65,7 @@ class Player extends EventEmitter {
         try {
             this.media.src = newSrc;
         }
-        catch (e) {
+        catch (_a) {
             this.media.src = url;
         }
     }

package/dist/plugins/hover.cjs

@@ -1 +1 @@
-"use strict";class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t&&n)for(const[t,e]of Object.entries(n))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(s(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class o extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth;this.label.style.transform=o+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}module.exports=o;
+"use strict";class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t&&n)for(const[t,e]of Object.entries(n))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(s(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,labelPreferLeft:!1,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class o extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth,l=this.options.labelPreferLeft?o-a>0:o+a>s;this.label.style.transform=l?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}module.exports=o;

package/dist/plugins/hover.d.ts

@@ -3,16 +3,35 @@
  */
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
 export type HoverPluginOptions = {
+    /** The hover cursor color (playback cursor and progress mask colors used as falllback in this order)
+     */
     lineColor?: string;
+    /**
+     * The hover cursor width (pixels used if no units specified)
+     * @default 1
+     */
     lineWidth?: string | number;
+    /** The color of the label text */
     labelColor?: string;
+    /**
+     * The font size of the label text (pixels used if no units specified)
+     * @default 11
+     */
     labelSize?: string | number;
+    /** The background color of the label */
     labelBackground?: string;
+    /**
+     * Whether to display the label to the left of the cursor if possible
+     * @default false
+     */
+    labelPreferLeft?: boolean;
+    /** Custom function to customize the displayed label text (m:ss used if not specified) */
     formatTimeCallback?: (seconds: number) => string;
 };
 declare const defaultOptions: {
     lineWidth: number;
     labelSize: number;
+    labelPreferLeft: boolean;
     formatTimeCallback(seconds: number): string;
 };
 export type HoverPluginEvents = BasePluginEvents & {

package/dist/plugins/hover.esm.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t&&n)for(const[t,e]of Object.entries(n))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(s(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class o extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth;this.label.style.transform=o+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{o as default};
+class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t&&n)for(const[t,e]of Object.entries(n))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(s(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,labelPreferLeft:!1,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class o extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth,l=this.options.labelPreferLeft?o-a>0:o+a>s;this.label.style.transform=l?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{o as default};

package/dist/plugins/hover.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t&&n)for(const[t,e]of Object.entries(n))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(s(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class o extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth;this.label.style.transform=o+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{o as default};
+class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t&&n)for(const[t,e]of Object.entries(n))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(s(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,labelPreferLeft:!1,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class o extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth,l=this.options.labelPreferLeft?o-a>0:o+a>s;this.label.style.transform=l?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{o as default};

package/dist/plugins/hover.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Hover=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={}}on(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.un(e,s),this.un(e,t)};return this.on(e,s),s}return()=>this.un(e,t)}un(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}_init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function s(e,t){const i=t.xmlns?document.createElementNS(t.xmlns,e):document.createElement(e);for(const[e,n]of Object.entries(t))if("children"===e&&n)for(const[e,t]of Object.entries(n))t instanceof Node?i.appendChild(t):"string"==typeof t?i.appendChild(document.createTextNode(t)):i.appendChild(s(e,t));else"style"===e?Object.assign(i.style,n):"textContent"===e?i.textContent=n:i.setAttribute(e,n.toString());return i}function i(e,t,i){const n=s(e,t||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,formatTimeCallback:e=>`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`};class o extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=t,i=e.clientX-t.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth;this.label.style.transform=o+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,e),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(e){return new o(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${t}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}return o}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Hover=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={}}on(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.un(e,s),this.un(e,t)};return this.on(e,s),s}return()=>this.un(e,t)}un(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}_init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function s(e,t){const i=t.xmlns?document.createElementNS(t.xmlns,e):document.createElement(e);for(const[e,n]of Object.entries(t))if("children"===e&&n)for(const[e,t]of Object.entries(n))t instanceof Node?i.appendChild(t):"string"==typeof t?i.appendChild(document.createTextNode(t)):i.appendChild(s(e,t));else"style"===e?Object.assign(i.style,n):"textContent"===e?i.textContent=n:i.setAttribute(e,n.toString());return i}function i(e,t,i){const n=s(e,t||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,labelPreferLeft:!1,formatTimeCallback:e=>`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`};class o extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=t,i=e.clientX-t.left,n=Math.min(1,Math.max(0,i/s)),o=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${o}px)`,this.wrapper.style.opacity="1";const r=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(r*n);const a=this.label.offsetWidth,l=this.options.labelPreferLeft?o-a>0:o+a>s;this.label.style.transform=l?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,e),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(e){return new o(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${t}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerMove)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}return o}));