wavesurfer.js 7.10.3 → 7.11.1

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

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

package/dist/__tests__/renderer-utils.test.js

@@ -0,0 +1,320 @@
+import { MAX_CANVAS_WIDTH, MAX_NODES, calculateBarHeights, calculateBarRenderConfig, calculateBarSegments, calculateLinePaths, calculateScrollPercentages, calculateSingleCanvasWidth, calculateVerticalScale, calculateWaveformLayout, clampToUnit, clampWidthToBarGrid, getLazyRenderRange, getPixelRatio, getRelativePointerPosition, resolveBarYPosition, resolveChannelHeight, resolveColorValue, shouldClearCanvases, shouldRenderBars, sliceChannelData, } from '../renderer-utils.js';
+describe('renderer-utils', () => {
+    describe('clampToUnit', () => {
+        it('clamps numbers to the [0, 1] range', () => {
+            expect(clampToUnit(-0.5)).toBe(0);
+            expect(clampToUnit(0.3)).toBe(0.3);
+            expect(clampToUnit(1.8)).toBe(1);
+        });
+    });
+    describe('calculateBarRenderConfig', () => {
+        const options = {
+            container: document.createElement('div'),
+            barWidth: 2,
+            barGap: 1,
+            barRadius: 3,
+        };
+        it('derives spacing values and scaling information', () => {
+            const config = calculateBarRenderConfig({
+                width: 100,
+                height: 50,
+                length: 10,
+                options,
+                pixelRatio: 2,
+            });
+            expect(config).toEqual({
+                halfHeight: 25,
+                barWidth: 4,
+                barGap: 2,
+                barRadius: 3,
+                barIndexScale: 100 / ((4 + 2) * 10),
+                barSpacing: 6,
+            });
+        });
+    });
+    describe('calculateBarHeights', () => {
+        it('returns rounded heights and ensures total height is at least 1', () => {
+            expect(calculateBarHeights({
+                maxTop: 0.5,
+                maxBottom: 0.25,
+                halfHeight: 20,
+                vScale: 1,
+            })).toEqual({ topHeight: 10, totalHeight: 15 });
+            expect(calculateBarHeights({
+                maxTop: 0,
+                maxBottom: 0,
+                halfHeight: 20,
+                vScale: 1,
+            })).toEqual({ topHeight: 0, totalHeight: 1 });
+        });
+    });
+    describe('resolveBarYPosition', () => {
+        const baseArgs = {
+            halfHeight: 20,
+            topHeight: 10,
+            totalHeight: 20,
+            canvasHeight: 40,
+        };
+        it('positions bars relative to alignment', () => {
+            expect(resolveBarYPosition(Object.assign({ barAlign: 'top' }, baseArgs))).toBe(0);
+            expect(resolveBarYPosition(Object.assign({ barAlign: 'bottom' }, baseArgs))).toBe(20);
+            expect(resolveBarYPosition(Object.assign({ barAlign: undefined }, baseArgs))).toBe(10);
+        });
+    });
+    describe('calculateBarSegments', () => {
+        const options = {
+            container: document.createElement('div'),
+        };
+        it('aggregates bar segments across the channel data', () => {
+            const { barIndexScale, barSpacing, barWidth, halfHeight } = calculateBarRenderConfig({
+                width: 6,
+                height: 20,
+                length: 6,
+                options,
+                pixelRatio: 1,
+            });
+            const segments = calculateBarSegments({
+                channelData: [
+                    new Float32Array([0.2, -0.4, 0.6, -0.8, 1, -1]),
+                    new Float32Array([0.1, -0.2, 0.3, -0.4, 0.5, -0.6]),
+                ],
+                barIndexScale,
+                barSpacing,
+                barWidth,
+                halfHeight,
+                vScale: 1,
+                canvasHeight: 40,
+                barAlign: undefined,
+            });
+            expect(segments).toEqual([
+                { x: 0, y: 8, width: 1, height: 3 },
+                { x: 1, y: 6, width: 1, height: 6 },
+                { x: 2, y: 4, width: 1, height: 9 },
+                { x: 3, y: 2, width: 1, height: 12 },
+                { x: 4, y: 0, width: 1, height: 15 },
+                { x: 5, y: 0, width: 1, height: 16 },
+            ]);
+        });
+    });
+    describe('getRelativePointerPosition', () => {
+        it('returns pointer coordinates as relative offsets', () => {
+            const rect = {
+                left: 10,
+                top: 20,
+                width: 200,
+                height: 100,
+            };
+            expect(getRelativePointerPosition(rect, 110, 70)).toEqual([0.5, 0.5]);
+        });
+    });
+    describe('resolveChannelHeight', () => {
+        it('returns numeric height when provided', () => {
+            expect(resolveChannelHeight({
+                optionsHeight: 150,
+                parentHeight: 0,
+                numberOfChannels: 2,
+            })).toBe(150);
+        });
+        it('splits height across channels when auto with overlays disabled', () => {
+            const splitChannels = [{ overlay: false }, { overlay: false }];
+            expect(resolveChannelHeight({
+                optionsHeight: 'auto',
+                optionsSplitChannels: splitChannels,
+                parentHeight: 200,
+                numberOfChannels: 2,
+            })).toBe(100);
+        });
+        it('falls back to default height when invalid', () => {
+            expect(resolveChannelHeight({
+                optionsHeight: 'invalid',
+                parentHeight: 0,
+                numberOfChannels: 2,
+                defaultHeight: 75,
+            })).toBe(75);
+        });
+    });
+    describe('getPixelRatio', () => {
+        it('never returns less than 1', () => {
+            expect(getPixelRatio(undefined)).toBe(1);
+            expect(getPixelRatio(0.5)).toBe(1);
+            expect(getPixelRatio(2)).toBe(2);
+        });
+    });
+    describe('shouldRenderBars', () => {
+        const options = { container: document.createElement('div') };
+        it('returns true when any bar option is configured', () => {
+            expect(shouldRenderBars(Object.assign(Object.assign({}, options), { barWidth: 1 }))).toBe(true);
+            expect(shouldRenderBars(Object.assign(Object.assign({}, options), { barGap: 2 }))).toBe(true);
+            expect(shouldRenderBars(Object.assign(Object.assign({}, options), { barAlign: 'top' }))).toBe(true);
+        });
+        it('returns false when bars are not configured', () => {
+            expect(shouldRenderBars(options)).toBe(false);
+        });
+    });
+    describe('resolveColorValue', () => {
+        const canvas = document.createElement('canvas');
+        let createLinearGradient;
+        let addColorStop;
+        beforeEach(() => {
+            createLinearGradient = jest.fn(() => ({ addColorStop }));
+            addColorStop = jest.fn();
+            jest.spyOn(document, 'createElement').mockImplementation(() => canvas);
+            jest
+                .spyOn(canvas, 'getContext')
+                .mockImplementation(() => ({ createLinearGradient }));
+        });
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+        it('returns string values unchanged', () => {
+            expect(resolveColorValue('#000', 2)).toBe('#000');
+        });
+        it('falls back to default gray when gradient list is empty', () => {
+            expect(resolveColorValue([], 2)).toBe('#999');
+        });
+        it('uses the single color when gradient list has one item', () => {
+            expect(resolveColorValue(['#111'], 2)).toBe('#111');
+        });
+        it('creates a canvas gradient for multiple colors', () => {
+            const gradient = resolveColorValue(['#000', '#fff'], 2);
+            expect(createLinearGradient).toHaveBeenCalledWith(0, 0, 0, 300);
+            expect(addColorStop).toHaveBeenCalledTimes(2);
+            expect(addColorStop).toHaveBeenNthCalledWith(1, 0, '#000');
+            expect(addColorStop).toHaveBeenNthCalledWith(2, 1, '#fff');
+            expect(gradient.addColorStop).toBe(addColorStop);
+        });
+    });
+    describe('calculateWaveformLayout', () => {
+        const baseArgs = {
+            duration: 2,
+            parentWidth: 300,
+            pixelRatio: 1,
+        };
+        it('uses parent width when not scrollable and fillParent is true', () => {
+            expect(calculateWaveformLayout(Object.assign(Object.assign({}, baseArgs), { minPxPerSec: 10, fillParent: true }))).toEqual({
+                scrollWidth: 20,
+                isScrollable: false,
+                useParentWidth: true,
+                width: 300,
+            });
+        });
+        it('uses scroll width when waveform exceeds parent width', () => {
+            expect(calculateWaveformLayout(Object.assign(Object.assign({}, baseArgs), { minPxPerSec: 500, fillParent: true }))).toEqual({
+                scrollWidth: 1000,
+                isScrollable: true,
+                useParentWidth: false,
+                width: 1000,
+            });
+        });
+    });
+    describe('clampWidthToBarGrid', () => {
+        const options = { container: document.createElement('div'), barWidth: 2, barGap: 1 };
+        it('returns original width when bars are disabled', () => {
+            expect(clampWidthToBarGrid(123, { container: document.createElement('div') })).toBe(123);
+        });
+        it('clamps width down to align with bar grid spacing', () => {
+            expect(clampWidthToBarGrid(10, options)).toBe(9);
+        });
+    });
+    describe('calculateSingleCanvasWidth', () => {
+        const options = { container: document.createElement('div'), barWidth: 2, barGap: 1 };
+        it('limits width by canvas cap, client size, and total width', () => {
+            expect(calculateSingleCanvasWidth({
+                clientWidth: 9000,
+                totalWidth: 5000,
+                options,
+            })).toBe(clampWidthToBarGrid(Math.min(MAX_CANVAS_WIDTH, 5000), options));
+        });
+    });
+    describe('sliceChannelData', () => {
+        it('returns proportional slices based on offset and width', () => {
+            const channel = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]);
+            const slices = sliceChannelData({
+                channelData: [channel, channel],
+                offset: 100,
+                clampedWidth: 50,
+                totalWidth: 200,
+            });
+            expect(slices[0]).toEqual(new Float32Array([5, 6]));
+            expect(slices[1]).toEqual(new Float32Array([5, 6]));
+        });
+    });
+    describe('shouldClearCanvases', () => {
+        it('clears when exceeding maximum nodes', () => {
+            expect(shouldClearCanvases(MAX_NODES)).toBe(false);
+            expect(shouldClearCanvases(MAX_NODES + 1)).toBe(true);
+        });
+    });
+    describe('getLazyRenderRange', () => {
+        it('returns surrounding canvas indices', () => {
+            expect(getLazyRenderRange({
+                scrollLeft: 50,
+                totalWidth: 200,
+                numCanvases: 5,
+            })).toEqual([0, 1, 2]);
+        });
+        it('defaults to the first canvas when width is zero', () => {
+            expect(getLazyRenderRange({ scrollLeft: 0, totalWidth: 0, numCanvases: 3 })).toEqual([0]);
+        });
+    });
+    describe('calculateVerticalScale', () => {
+        it('returns base scale when not normalizing', () => {
+            expect(calculateVerticalScale({
+                channelData: [new Float32Array([0.5])],
+                barHeight: 2,
+                normalize: false,
+            })).toBe(2);
+        });
+        it('normalizes against the maximum magnitude when requested', () => {
+            expect(calculateVerticalScale({
+                channelData: [new Float32Array([0.25, -0.5])],
+                barHeight: 2,
+                normalize: true,
+            })).toBe(4);
+        });
+    });
+    describe('calculateLinePaths', () => {
+        it('produces symmetrical paths for mirrored channel data', () => {
+            const [topPath, bottomPath] = calculateLinePaths({
+                channelData: [new Float32Array([0, 0.5, 1]), new Float32Array([0, 0.25, 0.75])],
+                width: 6,
+                height: 8,
+                vScale: 1,
+            });
+            expect(topPath[0]).toEqual({ x: 0, y: 4 });
+            expect(topPath[topPath.length - 1]).toEqual({ x: 6, y: 4 });
+            expect(bottomPath[0]).toEqual({ x: 0, y: 4 });
+            expect(bottomPath[bottomPath.length - 1]).toEqual({ x: 6, y: 4 });
+            expect(topPath).toEqual([
+                { x: 0, y: 4 },
+                { x: 0, y: 3 },
+                { x: 2, y: 2 },
+                { x: 4, y: 0 },
+                { x: 6, y: 4 },
+            ]);
+            expect(bottomPath).toEqual([
+                { x: 0, y: 4 },
+                { x: 0, y: 5 },
+                { x: 2, y: 5 },
+                { x: 4, y: 7 },
+                { x: 6, y: 4 },
+            ]);
+        });
+    });
+    describe('calculateScrollPercentages', () => {
+        it('returns zero percentages when scroll width is zero', () => {
+            expect(calculateScrollPercentages({
+                scrollLeft: 0,
+                clientWidth: 100,
+                scrollWidth: 0,
+            })).toEqual({ startX: 0, endX: 0 });
+        });
+        it('returns start and end ratios relative to scroll width', () => {
+            expect(calculateScrollPercentages({
+                scrollLeft: 50,
+                clientWidth: 100,
+                scrollWidth: 400,
+            })).toEqual({ startX: 0.125, endX: 0.375 });
+        });
+    });
+});

package/dist/decoder.js

@@ -11,8 +11,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 function decode(audioData, sampleRate) {
     return __awaiter(this, void 0, void 0, function* () {
         const audioCtx = new AudioContext({ sampleRate });
-        const decode = audioCtx.decodeAudioData(audioData);
-        return decode.finally(() => audioCtx.close());
+        try {
+            return yield audioCtx.decodeAudioData(audioData);
+        }
+        finally {
+            // Ensure AudioContext is always closed, even on synchronous errors
+            audioCtx.close();
+        }
     });
 }
 /** Normalize peaks to -1..1 */
@@ -36,17 +41,36 @@ function normalize(channelData) {
 }
 /** Create an audio buffer from pre-decoded audio data */
 function createBuffer(channelData, duration) {
+    // Validate inputs
+    if (!channelData || channelData.length === 0) {
+        throw new Error('channelData must be a non-empty array');
+    }
+    if (duration <= 0) {
+        throw new Error('duration must be greater than 0');
+    }
     // If a single array of numbers is passed, make it an array of arrays
     if (typeof channelData[0] === 'number')
         channelData = [channelData];
+    // Validate channel data after conversion
+    if (!channelData[0] || channelData[0].length === 0) {
+        throw new Error('channelData must contain non-empty channel arrays');
+    }
     // Normalize to -1..1
     normalize(channelData);
+    // Convert to Float32Array for consistency
+    const float32Channels = channelData.map((channel) => channel instanceof Float32Array ? channel : Float32Array.from(channel));
     return {
         duration,
-        length: channelData[0].length,
-        sampleRate: channelData[0].length / duration,
-        numberOfChannels: channelData.length,
-        getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
+        length: float32Channels[0].length,
+        sampleRate: float32Channels[0].length / duration,
+        numberOfChannels: float32Channels.length,
+        getChannelData: (i) => {
+            const channel = float32Channels[i];
+            if (!channel) {
+                throw new Error(`Channel ${i} not found`);
+            }
+            return channel;
+        },
         copyFromChannel: AudioBuffer.prototype.copyFromChannel,
         copyToChannel: AudioBuffer.prototype.copyToChannel,
     };

package/dist/draggable.js

@@ -1,20 +1,24 @@
 export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {
     if (!element)
         return () => void 0;
+    const activePointers = new Map();
     const isTouchDevice = matchMedia('(pointer: coarse)').matches;
     let unsubscribeDocument = () => void 0;
     const onPointerDown = (event) => {
         if (event.button !== mouseButton)
             return;
-        event.preventDefault();
-        event.stopPropagation();
+        activePointers.set(event.pointerId, event);
+        if (activePointers.size > 1) {
+            return;
+        }
         let startX = event.clientX;
         let startY = event.clientY;
         let isDragging = false;
         const touchStartTime = Date.now();
         const onPointerMove = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+            if (event.defaultPrevented || activePointers.size > 1) {
+                return;
+            }
             if (isTouchDevice && Date.now() - touchStartTime < touchDelay)
                 return;
             const x = event.clientX;
@@ -22,6 +26,8 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
             const dx = x - startX;
             const dy = y - startY;
             if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
+                event.preventDefault();
+                event.stopPropagation();
                 const rect = element.getBoundingClientRect();
                 const { left, top } = rect;
                 if (!isDragging) {
@@ -34,6 +40,7 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
             }
         };
         const onPointerUp = (event) => {
+            activePointers.delete(event.pointerId);
             if (isDragging) {
                 const x = event.clientX;
                 const y = event.clientY;
@@ -44,7 +51,7 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
             unsubscribeDocument();
         };
         const onPointerLeave = (e) => {
-            // Listen to events only on the document and not on inner elements
+            activePointers.delete(e.pointerId);
             if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
                 onPointerUp(e);
             }
@@ -56,6 +63,9 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
             }
         };
         const onTouchMove = (event) => {
+            if (event.defaultPrevented || activePointers.size > 1) {
+                return;
+            }
             if (isDragging) {
                 event.preventDefault();
             }
@@ -81,5 +91,6 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
     return () => {
         unsubscribeDocument();
         element.removeEventListener('pointerdown', onPointerDown);
+        activePointers.clear();
     };
 }

package/dist/event-emitter.js

@@ -8,15 +8,16 @@ class EventEmitter {
         if (!this.listeners[event]) {
             this.listeners[event] = new Set();
         }
-        this.listeners[event].add(listener);
         if (options === null || options === void 0 ? void 0 : options.once) {
-            const unsubscribeOnce = () => {
-                this.un(event, unsubscribeOnce);
-                this.un(event, listener);
+            // Create a wrapper that removes itself after being called once
+            const onceWrapper = (...args) => {
+                this.un(event, onceWrapper);
+                listener(...args);
             };
-            this.on(event, unsubscribeOnce);
-            return unsubscribeOnce;
+            this.listeners[event].add(onceWrapper);
+            return () => this.un(event, onceWrapper);
         }
+        this.listeners[event].add(listener);
         return () => this.un(event, listener);
     }
     /** Unsubscribe from an event */

package/dist/fetcher.js

@@ -15,28 +15,26 @@ function watchProgress(response, progressCallback) {
         const contentLength = Number(response.headers.get('Content-Length')) || 0;
         let receivedLength = 0;
         // Process the data
-        const processChunk = (value) => __awaiter(this, void 0, void 0, function* () {
+        const processChunk = (value) => {
             // Add to the received length
             receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0;
             const percentage = Math.round((receivedLength / contentLength) * 100);
             progressCallback(percentage);
-        });
-        const read = () => __awaiter(this, void 0, void 0, function* () {
-            let data;
-            try {
-                data = yield reader.read();
-            }
-            catch (_a) {
-                // Ignore errors because we can only handle the main response
-                return;
-            }
-            // Continue reading data until done
-            if (!data.done) {
+        };
+        // Use iteration instead of recursion to avoid stack issues
+        try {
+            while (true) {
+                const data = yield reader.read();
+                if (data.done) {
+                    break;
+                }
                 processChunk(data.value);
-                yield read();
             }
-        });
-        read();
+        }
+        catch (err) {
+            // Ignore errors because we can only handle the main response
+            console.warn('Progress tracking error:', err);
+        }
     });
 }
 function fetchBlob(url, progressCallback, requestInit) {

package/dist/player.js

@@ -75,11 +75,12 @@ class Player extends EventEmitter {
         if (this.isExternalMedia)
             return;
         this.media.pause();
-        this.media.remove();
         this.revokeSrc();
         this.media.removeAttribute('src');
         // Load resets the media element to its initial state
         this.media.load();
+        // Remove from DOM after cleanup
+        this.media.remove();
     }
     setMediaElement(element) {
         this.media = element;

package/dist/plugins/envelope.cjs

@@ -1 +1 @@
-"use strict";class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==i?void 0:i.once){const i=()=>{this.un(t,i),this.un(t,e)};return this.on(t,i),i}return()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.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.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,o,n=3,s=0,r=100){if(!t)return()=>{};const l=matchMedia("(pointer: coarse)").matches;let h=()=>{};const a=a=>{if(a.button!==s)return;a.preventDefault(),a.stopPropagation();let u=a.clientX,c=a.clientY,d=!1;const p=Date.now(),m=o=>{if(o.preventDefault(),o.stopPropagation(),l&&Date.now()-p<r)return;const s=o.clientX,h=o.clientY,a=s-u,m=h-c;if(d||Math.abs(a)>n||Math.abs(m)>n){const o=t.getBoundingClientRect(),{left:n,top:r}=o;d||(null==i||i(u-n,c-r),d=!0),e(a,m,s-n,h-r),u=s,c=h}},v=e=>{if(d){const i=e.clientX,n=e.clientY,s=t.getBoundingClientRect(),{left:r,top:l}=s;null==o||o(i-r,n-l)}h()},g=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||v(t)},f=t=>{d&&(t.stopPropagation(),t.preventDefault())},y=t=>{d&&t.preventDefault()};document.addEventListener("pointermove",m),document.addEventListener("pointerup",v),document.addEventListener("pointerout",g),document.addEventListener("pointercancel",g),document.addEventListener("touchmove",y,{passive:!1}),document.addEventListener("click",f,{capture:!0}),h=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",v),document.removeEventListener("pointerout",g),document.removeEventListener("pointercancel",g),document.removeEventListener("touchmove",y),setTimeout((()=>{document.removeEventListener("click",f,{capture:!0})}),10)}};return t.addEventListener("pointerdown",a),()=>{h(),t.removeEventListener("pointerdown",a)}}function o(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(o(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function n(t,e,i){const n=o(t,e||{});return null==i||i.appendChild(n),n}const s={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class r extends t{constructor(t,e){super(),this.subscriptions=[],this.subscriptions=[],this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,r=n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:`0 0 ${o} ${s}`,preserveAspectRatio:"none",style:{position:"absolute",left:"0",top:"0",zIndex:"4"},part:"envelope"},e);this.svg=r;const l=n("polyline",{xmlns:"http://www.w3.org/2000/svg",points:`0,${s} ${o},${s}`,stroke:t.lineColor,"stroke-width":t.lineWidth,fill:"none",part:"polyline",style:t.dragLine?{cursor:"row-resize",pointerEvents:"stroke"}:{}},r);t.dragLine&&this.subscriptions.push(i(l,((t,e)=>{const{height:i}=r.viewBox.baseVal,{points:o}=l;for(let t=1;t<o.numberOfItems-1;t++){const n=o.getItem(t);n.y=Math.min(i,Math.max(0,n.y+e))}const n=r.querySelectorAll("ellipse");Array.from(n).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)}))),r.addEventListener("dblclick",(t=>{const e=r.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}));{let t;const e=()=>clearTimeout(t);r.addEventListener("touchstart",(i=>{1===i.touches.length?t=window.setTimeout((()=>{i.preventDefault();const t=r.getBoundingClientRect(),e=i.touches[0].clientX-t.left,o=i.touches[0].clientY-t.top;this.emit("point-create",e/t.width,o/t.height)}),500):e()})),r.addEventListener("touchmove",e),r.addEventListener("touchend",e)}}makeDraggable(t,e){this.subscriptions.push(i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"),1))}createCircle(t,e){const i=this.options.dragPointSize/2;return n("ellipse",{xmlns:"http://www.w3.org/2000/svg",cx:t,cy:e,rx:i,ry:i,fill:this.options.dragPointFill,stroke:this.options.dragPointStroke,"stroke-width":"2",style:{cursor:"grab",pointerEvents:"all"},part:"envelope-circle"},this.svg)}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:n}=this.svg.querySelector("polyline"),s=Array.from(n).findIndex((t=>t.x===i.x&&t.y===i.y));n.removeItem(s),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:n,height:s}=o.viewBox.baseVal,r=t*n,l=s-e*s,h=this.options.dragPointSize/2,a=o.createSVGPoint();a.x=t*n,a.y=s-e*s;const u=this.createCircle(r,l),{points:c}=o.querySelector("polyline"),d=Array.from(c).findIndex((t=>t.x>=r));c.insertItemBefore(a,Math.max(d,1)),this.polyPoints.set(i,{polyPoint:a,circle:u}),this.makeDraggable(u,((t,e)=>{const o=a.x+t,r=a.y+e;if(o<-h||r<-h||o>n+h||r>s+h)return void this.emit("point-dragout",i);const l=Array.from(c).find((t=>t.x>a.x)),d=Array.from(c).findLast((t=>t.x<a.x));l&&o>=l.x||d&&o<=d.x||(a.x=o,a.y=r,u.setAttribute("cx",o.toString()),u.setAttribute("cy",r.toString()),this.emit("point-move",i,o/n,r/s))}))}update(){const{svg:t}=this,{clientWidth:e,clientHeight:i}=t;if(!e||!i)return;const o=t.viewBox.baseVal.width/e,n=t.viewBox.baseVal.height/i;t.querySelectorAll("ellipse").forEach((t=>{const e=this.options.dragPointSize/2,i=e*o,s=e*n;t.setAttribute("rx",i.toString()),t.setAttribute("ry",s.toString())}))}destroy(){this.subscriptions.forEach((t=>t())),this.polyPoints.clear(),this.svg.remove()}}class l extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.volume=1,this.points=t.points||[],this.options=Object.assign({},s,t),this.options.lineColor=this.options.lineColor||s.lineColor,this.options.dragPointFill=this.options.dragPointFill||s.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||s.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||s.dragPointSize}static create(t){return new l(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t;null===(t=this.polyline)||void 0===t||t.destroy(),super.destroy()}getCurrentVolume(){return this.volume}setVolume(t){var e;this.volume=t,null===(e=this.wavesurfer)||void 0===e||e.setVolume(t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.setVolume(e.volume),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})))}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new r(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const n=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*n,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,n=e.volume-i.volume,s=i.volume+(t-i.time)*(n/o),r=Math.min(1,Math.max(0,s)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",l))}}module.exports=l;
+"use strict";class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...s)=>{this.un(t,i),e(...s)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.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.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,s,o=3,n=0,r=100){if(!t)return()=>{};const l=new Map,h=matchMedia("(pointer: coarse)").matches;let u=()=>{};const c=c=>{if(c.button!==n)return;if(l.set(c.pointerId,c),l.size>1)return;let a=c.clientX,d=c.clientY,p=!1;const v=Date.now(),m=s=>{if(s.defaultPrevented||l.size>1)return;if(h&&Date.now()-v<r)return;const n=s.clientX,u=s.clientY,c=n-a,m=u-d;if(p||Math.abs(c)>o||Math.abs(m)>o){s.preventDefault(),s.stopPropagation();const o=t.getBoundingClientRect(),{left:r,top:l}=o;p||(null==i||i(a-r,d-l),p=!0),e(c,m,n-r,u-l),a=n,d=u}},g=e=>{if(l.delete(e.pointerId),p){const i=e.clientX,o=e.clientY,n=t.getBoundingClientRect(),{left:r,top:l}=n;null==s||s(i-r,o-l)}u()},f=t=>{l.delete(t.pointerId),t.relatedTarget&&t.relatedTarget!==document.documentElement||g(t)},y=t=>{p&&(t.stopPropagation(),t.preventDefault())},P=t=>{t.defaultPrevented||l.size>1||p&&t.preventDefault()};document.addEventListener("pointermove",m),document.addEventListener("pointerup",g),document.addEventListener("pointerout",f),document.addEventListener("pointercancel",f),document.addEventListener("touchmove",P,{passive:!1}),document.addEventListener("click",y,{capture:!0}),u=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",g),document.removeEventListener("pointerout",f),document.removeEventListener("pointercancel",f),document.removeEventListener("touchmove",P),setTimeout((()=>{document.removeEventListener("click",y,{capture:!0})}),10)}};return t.addEventListener("pointerdown",c),()=>{u(),t.removeEventListener("pointerdown",c),l.clear()}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,o]of Object.entries(e))if("children"===t&&o)for(const[t,e]of Object.entries(o))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,o):"textContent"===t?i.textContent=o:i.setAttribute(t,o.toString());return i}function o(t,e,i){const o=s(t,e||{});return null==i||i.appendChild(o),o}const n={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class r extends t{constructor(t,e){super(),this.subscriptions=[],this.subscriptions=[],this.options=t,this.polyPoints=new Map;const s=e.clientWidth,n=e.clientHeight,r=o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:`0 0 ${s} ${n}`,preserveAspectRatio:"none",style:{position:"absolute",left:"0",top:"0",zIndex:"4"},part:"envelope"},e);this.svg=r;const l=o("polyline",{xmlns:"http://www.w3.org/2000/svg",points:`0,${n} ${s},${n}`,stroke:t.lineColor,"stroke-width":t.lineWidth,fill:"none",part:"polyline",style:t.dragLine?{cursor:"row-resize",pointerEvents:"stroke"}:{}},r);t.dragLine&&this.subscriptions.push(i(l,((t,e)=>{const{height:i}=r.viewBox.baseVal,{points:s}=l;for(let t=1;t<s.numberOfItems-1;t++){const o=s.getItem(t);o.y=Math.min(i,Math.max(0,o.y+e))}const o=r.querySelectorAll("ellipse");Array.from(o).forEach((t=>{const s=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",s.toString())})),this.emit("line-move",e/i)}))),this.dblClickListener=t=>{const e=r.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top;this.emit("point-create",i/e.width,s/e.height)},r.addEventListener("dblclick",this.dblClickListener);const h=()=>{void 0!==this.pressTimer&&(clearTimeout(this.pressTimer),this.pressTimer=void 0)};this.touchStartListener=t=>{1===t.touches.length?this.pressTimer=window.setTimeout((()=>{t.preventDefault();const e=r.getBoundingClientRect(),i=t.touches[0].clientX-e.left,s=t.touches[0].clientY-e.top;this.emit("point-create",i/e.width,s/e.height)}),500):h()},this.touchMoveListener=h,this.touchEndListener=h,r.addEventListener("touchstart",this.touchStartListener),r.addEventListener("touchmove",this.touchMoveListener),r.addEventListener("touchend",this.touchEndListener)}makeDraggable(t,e){this.subscriptions.push(i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"),1))}createCircle(t,e){const i=this.options.dragPointSize/2;return o("ellipse",{xmlns:"http://www.w3.org/2000/svg",cx:t,cy:e,rx:i,ry:i,fill:this.options.dragPointFill,stroke:this.options.dragPointStroke,"stroke-width":"2",style:{cursor:"grab",pointerEvents:"all"},part:"envelope-circle"},this.svg)}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:s}=e,{points:o}=this.svg.querySelector("polyline"),n=Array.from(o).findIndex((t=>t.x===i.x&&t.y===i.y));o.removeItem(n),s.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:s}=this,{width:o,height:n}=s.viewBox.baseVal,r=t*o,l=n-e*n,h=this.options.dragPointSize/2,u=s.createSVGPoint();u.x=t*o,u.y=n-e*n;const c=this.createCircle(r,l),{points:a}=s.querySelector("polyline"),d=Array.from(a).findIndex((t=>t.x>=r));a.insertItemBefore(u,Math.max(d,1)),this.polyPoints.set(i,{polyPoint:u,circle:c}),this.makeDraggable(c,((t,e)=>{const s=u.x+t,r=u.y+e;if(s<-h||r<-h||s>o+h||r>n+h)return void this.emit("point-dragout",i);const l=Array.from(a).find((t=>t.x>u.x)),d=Array.from(a).findLast((t=>t.x<u.x));l&&s>=l.x||d&&s<=d.x||(u.x=s,u.y=r,c.setAttribute("cx",s.toString()),c.setAttribute("cy",r.toString()),this.emit("point-move",i,s/o,r/n))}))}update(){const{svg:t}=this,{clientWidth:e,clientHeight:i}=t;if(!e||!i)return;const s=t.viewBox.baseVal.width/e,o=t.viewBox.baseVal.height/i;t.querySelectorAll("ellipse").forEach((t=>{const e=this.options.dragPointSize/2,i=e*s,n=e*o;t.setAttribute("rx",i.toString()),t.setAttribute("ry",n.toString())}))}destroy(){void 0!==this.pressTimer&&(clearTimeout(this.pressTimer),this.pressTimer=void 0),this.dblClickListener&&(this.svg.removeEventListener("dblclick",this.dblClickListener),this.dblClickListener=void 0),this.touchStartListener&&(this.svg.removeEventListener("touchstart",this.touchStartListener),this.touchStartListener=void 0),this.touchMoveListener&&(this.svg.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=void 0),this.touchEndListener&&(this.svg.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=void 0),this.subscriptions.forEach((t=>t())),this.polyPoints.clear(),this.svg.remove()}}class l extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.volume=1,this.points=t.points||[],this.options=Object.assign({},n,t),this.options.lineColor=this.options.lineColor||n.lineColor,this.options.dragPointFill=this.options.dragPointFill||n.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||n.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||n.dragPointSize}static create(t){return new l(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();s&&this.addPolyPoint(t,s)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t;this.throttleTimeout&&(clearTimeout(this.throttleTimeout),this.throttleTimeout=null),null===(t=this.polyline)||void 0===t||t.destroy(),super.destroy()}getCurrentVolume(){return this.volume}setVolume(t){var e;this.volume=t,null===(e=this.wavesurfer)||void 0===e||e.setVolume(t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.setVolume(e.volume),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})))}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new r(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var s;const o=(null===(s=this.wavesurfer)||void 0===s?void 0:s.getDuration())||0;t.time=e*o,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const s=e.time-i.time,o=e.volume-i.volume,n=i.volume+(t-i.time)*(o/s),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",l))}}module.exports=l;

package/dist/plugins/envelope.esm.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==i?void 0:i.once){const i=()=>{this.un(t,i),this.un(t,e)};return this.on(t,i),i}return()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.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.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,o,n=3,s=0,r=100){if(!t)return()=>{};const l=matchMedia("(pointer: coarse)").matches;let h=()=>{};const a=a=>{if(a.button!==s)return;a.preventDefault(),a.stopPropagation();let u=a.clientX,c=a.clientY,d=!1;const p=Date.now(),m=o=>{if(o.preventDefault(),o.stopPropagation(),l&&Date.now()-p<r)return;const s=o.clientX,h=o.clientY,a=s-u,m=h-c;if(d||Math.abs(a)>n||Math.abs(m)>n){const o=t.getBoundingClientRect(),{left:n,top:r}=o;d||(null==i||i(u-n,c-r),d=!0),e(a,m,s-n,h-r),u=s,c=h}},v=e=>{if(d){const i=e.clientX,n=e.clientY,s=t.getBoundingClientRect(),{left:r,top:l}=s;null==o||o(i-r,n-l)}h()},g=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||v(t)},f=t=>{d&&(t.stopPropagation(),t.preventDefault())},y=t=>{d&&t.preventDefault()};document.addEventListener("pointermove",m),document.addEventListener("pointerup",v),document.addEventListener("pointerout",g),document.addEventListener("pointercancel",g),document.addEventListener("touchmove",y,{passive:!1}),document.addEventListener("click",f,{capture:!0}),h=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",v),document.removeEventListener("pointerout",g),document.removeEventListener("pointercancel",g),document.removeEventListener("touchmove",y),setTimeout((()=>{document.removeEventListener("click",f,{capture:!0})}),10)}};return t.addEventListener("pointerdown",a),()=>{h(),t.removeEventListener("pointerdown",a)}}function o(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(o(t,e));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function n(t,e,i){const n=o(t,e||{});return null==i||i.appendChild(n),n}const s={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class r extends t{constructor(t,e){super(),this.subscriptions=[],this.subscriptions=[],this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,r=n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:`0 0 ${o} ${s}`,preserveAspectRatio:"none",style:{position:"absolute",left:"0",top:"0",zIndex:"4"},part:"envelope"},e);this.svg=r;const l=n("polyline",{xmlns:"http://www.w3.org/2000/svg",points:`0,${s} ${o},${s}`,stroke:t.lineColor,"stroke-width":t.lineWidth,fill:"none",part:"polyline",style:t.dragLine?{cursor:"row-resize",pointerEvents:"stroke"}:{}},r);t.dragLine&&this.subscriptions.push(i(l,((t,e)=>{const{height:i}=r.viewBox.baseVal,{points:o}=l;for(let t=1;t<o.numberOfItems-1;t++){const n=o.getItem(t);n.y=Math.min(i,Math.max(0,n.y+e))}const n=r.querySelectorAll("ellipse");Array.from(n).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)}))),r.addEventListener("dblclick",(t=>{const e=r.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}));{let t;const e=()=>clearTimeout(t);r.addEventListener("touchstart",(i=>{1===i.touches.length?t=window.setTimeout((()=>{i.preventDefault();const t=r.getBoundingClientRect(),e=i.touches[0].clientX-t.left,o=i.touches[0].clientY-t.top;this.emit("point-create",e/t.width,o/t.height)}),500):e()})),r.addEventListener("touchmove",e),r.addEventListener("touchend",e)}}makeDraggable(t,e){this.subscriptions.push(i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"),1))}createCircle(t,e){const i=this.options.dragPointSize/2;return n("ellipse",{xmlns:"http://www.w3.org/2000/svg",cx:t,cy:e,rx:i,ry:i,fill:this.options.dragPointFill,stroke:this.options.dragPointStroke,"stroke-width":"2",style:{cursor:"grab",pointerEvents:"all"},part:"envelope-circle"},this.svg)}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:n}=this.svg.querySelector("polyline"),s=Array.from(n).findIndex((t=>t.x===i.x&&t.y===i.y));n.removeItem(s),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:n,height:s}=o.viewBox.baseVal,r=t*n,l=s-e*s,h=this.options.dragPointSize/2,a=o.createSVGPoint();a.x=t*n,a.y=s-e*s;const u=this.createCircle(r,l),{points:c}=o.querySelector("polyline"),d=Array.from(c).findIndex((t=>t.x>=r));c.insertItemBefore(a,Math.max(d,1)),this.polyPoints.set(i,{polyPoint:a,circle:u}),this.makeDraggable(u,((t,e)=>{const o=a.x+t,r=a.y+e;if(o<-h||r<-h||o>n+h||r>s+h)return void this.emit("point-dragout",i);const l=Array.from(c).find((t=>t.x>a.x)),d=Array.from(c).findLast((t=>t.x<a.x));l&&o>=l.x||d&&o<=d.x||(a.x=o,a.y=r,u.setAttribute("cx",o.toString()),u.setAttribute("cy",r.toString()),this.emit("point-move",i,o/n,r/s))}))}update(){const{svg:t}=this,{clientWidth:e,clientHeight:i}=t;if(!e||!i)return;const o=t.viewBox.baseVal.width/e,n=t.viewBox.baseVal.height/i;t.querySelectorAll("ellipse").forEach((t=>{const e=this.options.dragPointSize/2,i=e*o,s=e*n;t.setAttribute("rx",i.toString()),t.setAttribute("ry",s.toString())}))}destroy(){this.subscriptions.forEach((t=>t())),this.polyPoints.clear(),this.svg.remove()}}class l extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.volume=1,this.points=t.points||[],this.options=Object.assign({},s,t),this.options.lineColor=this.options.lineColor||s.lineColor,this.options.dragPointFill=this.options.dragPointFill||s.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||s.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||s.dragPointSize}static create(t){return new l(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t;null===(t=this.polyline)||void 0===t||t.destroy(),super.destroy()}getCurrentVolume(){return this.volume}setVolume(t){var e;this.volume=t,null===(e=this.wavesurfer)||void 0===e||e.setVolume(t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.setVolume(e.volume),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})))}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new r(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const n=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*n,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,n=e.volume-i.volume,s=i.volume+(t-i.time)*(n/o),r=Math.min(1,Math.max(0,s)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",l))}}export{l as default};
+class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...s)=>{this.un(t,i),e(...s)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.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.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,s,o=3,n=0,r=100){if(!t)return()=>{};const l=new Map,h=matchMedia("(pointer: coarse)").matches;let u=()=>{};const a=a=>{if(a.button!==n)return;if(l.set(a.pointerId,a),l.size>1)return;let c=a.clientX,d=a.clientY,p=!1;const v=Date.now(),m=s=>{if(s.defaultPrevented||l.size>1)return;if(h&&Date.now()-v<r)return;const n=s.clientX,u=s.clientY,a=n-c,m=u-d;if(p||Math.abs(a)>o||Math.abs(m)>o){s.preventDefault(),s.stopPropagation();const o=t.getBoundingClientRect(),{left:r,top:l}=o;p||(null==i||i(c-r,d-l),p=!0),e(a,m,n-r,u-l),c=n,d=u}},g=e=>{if(l.delete(e.pointerId),p){const i=e.clientX,o=e.clientY,n=t.getBoundingClientRect(),{left:r,top:l}=n;null==s||s(i-r,o-l)}u()},f=t=>{l.delete(t.pointerId),t.relatedTarget&&t.relatedTarget!==document.documentElement||g(t)},y=t=>{p&&(t.stopPropagation(),t.preventDefault())},P=t=>{t.defaultPrevented||l.size>1||p&&t.preventDefault()};document.addEventListener("pointermove",m),document.addEventListener("pointerup",g),document.addEventListener("pointerout",f),document.addEventListener("pointercancel",f),document.addEventListener("touchmove",P,{passive:!1}),document.addEventListener("click",y,{capture:!0}),u=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",g),document.removeEventListener("pointerout",f),document.removeEventListener("pointercancel",f),document.removeEventListener("touchmove",P),setTimeout((()=>{document.removeEventListener("click",y,{capture:!0})}),10)}};return t.addEventListener("pointerdown",a),()=>{u(),t.removeEventListener("pointerdown",a),l.clear()}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,o]of Object.entries(e))if("children"===t&&o)for(const[t,e]of Object.entries(o))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,o):"textContent"===t?i.textContent=o:i.setAttribute(t,o.toString());return i}function o(t,e,i){const o=s(t,e||{});return null==i||i.appendChild(o),o}const n={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class r extends t{constructor(t,e){super(),this.subscriptions=[],this.subscriptions=[],this.options=t,this.polyPoints=new Map;const s=e.clientWidth,n=e.clientHeight,r=o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:`0 0 ${s} ${n}`,preserveAspectRatio:"none",style:{position:"absolute",left:"0",top:"0",zIndex:"4"},part:"envelope"},e);this.svg=r;const l=o("polyline",{xmlns:"http://www.w3.org/2000/svg",points:`0,${n} ${s},${n}`,stroke:t.lineColor,"stroke-width":t.lineWidth,fill:"none",part:"polyline",style:t.dragLine?{cursor:"row-resize",pointerEvents:"stroke"}:{}},r);t.dragLine&&this.subscriptions.push(i(l,((t,e)=>{const{height:i}=r.viewBox.baseVal,{points:s}=l;for(let t=1;t<s.numberOfItems-1;t++){const o=s.getItem(t);o.y=Math.min(i,Math.max(0,o.y+e))}const o=r.querySelectorAll("ellipse");Array.from(o).forEach((t=>{const s=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",s.toString())})),this.emit("line-move",e/i)}))),this.dblClickListener=t=>{const e=r.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top;this.emit("point-create",i/e.width,s/e.height)},r.addEventListener("dblclick",this.dblClickListener);const h=()=>{void 0!==this.pressTimer&&(clearTimeout(this.pressTimer),this.pressTimer=void 0)};this.touchStartListener=t=>{1===t.touches.length?this.pressTimer=window.setTimeout((()=>{t.preventDefault();const e=r.getBoundingClientRect(),i=t.touches[0].clientX-e.left,s=t.touches[0].clientY-e.top;this.emit("point-create",i/e.width,s/e.height)}),500):h()},this.touchMoveListener=h,this.touchEndListener=h,r.addEventListener("touchstart",this.touchStartListener),r.addEventListener("touchmove",this.touchMoveListener),r.addEventListener("touchend",this.touchEndListener)}makeDraggable(t,e){this.subscriptions.push(i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"),1))}createCircle(t,e){const i=this.options.dragPointSize/2;return o("ellipse",{xmlns:"http://www.w3.org/2000/svg",cx:t,cy:e,rx:i,ry:i,fill:this.options.dragPointFill,stroke:this.options.dragPointStroke,"stroke-width":"2",style:{cursor:"grab",pointerEvents:"all"},part:"envelope-circle"},this.svg)}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:s}=e,{points:o}=this.svg.querySelector("polyline"),n=Array.from(o).findIndex((t=>t.x===i.x&&t.y===i.y));o.removeItem(n),s.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:s}=this,{width:o,height:n}=s.viewBox.baseVal,r=t*o,l=n-e*n,h=this.options.dragPointSize/2,u=s.createSVGPoint();u.x=t*o,u.y=n-e*n;const a=this.createCircle(r,l),{points:c}=s.querySelector("polyline"),d=Array.from(c).findIndex((t=>t.x>=r));c.insertItemBefore(u,Math.max(d,1)),this.polyPoints.set(i,{polyPoint:u,circle:a}),this.makeDraggable(a,((t,e)=>{const s=u.x+t,r=u.y+e;if(s<-h||r<-h||s>o+h||r>n+h)return void this.emit("point-dragout",i);const l=Array.from(c).find((t=>t.x>u.x)),d=Array.from(c).findLast((t=>t.x<u.x));l&&s>=l.x||d&&s<=d.x||(u.x=s,u.y=r,a.setAttribute("cx",s.toString()),a.setAttribute("cy",r.toString()),this.emit("point-move",i,s/o,r/n))}))}update(){const{svg:t}=this,{clientWidth:e,clientHeight:i}=t;if(!e||!i)return;const s=t.viewBox.baseVal.width/e,o=t.viewBox.baseVal.height/i;t.querySelectorAll("ellipse").forEach((t=>{const e=this.options.dragPointSize/2,i=e*s,n=e*o;t.setAttribute("rx",i.toString()),t.setAttribute("ry",n.toString())}))}destroy(){void 0!==this.pressTimer&&(clearTimeout(this.pressTimer),this.pressTimer=void 0),this.dblClickListener&&(this.svg.removeEventListener("dblclick",this.dblClickListener),this.dblClickListener=void 0),this.touchStartListener&&(this.svg.removeEventListener("touchstart",this.touchStartListener),this.touchStartListener=void 0),this.touchMoveListener&&(this.svg.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=void 0),this.touchEndListener&&(this.svg.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=void 0),this.subscriptions.forEach((t=>t())),this.polyPoints.clear(),this.svg.remove()}}class l extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.volume=1,this.points=t.points||[],this.options=Object.assign({},n,t),this.options.lineColor=this.options.lineColor||n.lineColor,this.options.dragPointFill=this.options.dragPointFill||n.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||n.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||n.dragPointSize}static create(t){return new l(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();s&&this.addPolyPoint(t,s)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t;this.throttleTimeout&&(clearTimeout(this.throttleTimeout),this.throttleTimeout=null),null===(t=this.polyline)||void 0===t||t.destroy(),super.destroy()}getCurrentVolume(){return this.volume}setVolume(t){var e;this.volume=t,null===(e=this.wavesurfer)||void 0===e||e.setVolume(t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.setVolume(e.volume),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})))}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new r(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var s;const o=(null===(s=this.wavesurfer)||void 0===s?void 0:s.getDuration())||0;t.time=e*o,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const s=e.time-i.time,o=e.volume-i.volume,n=i.volume+(t-i.time)*(o/s),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",l))}}export{l as default};