wavesurfer.js 7.12.2 → 7.12.3

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

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

package/dist/__tests__/regions.test.js

@@ -0,0 +1,61 @@
+import RegionsPlugin from '../plugins/regions.js';
+const createEmitter = () => {
+    const listeners = new Map();
+    return {
+        on: jest.fn((event, listener) => {
+            if (!listeners.has(event)) {
+                listeners.set(event, new Set());
+            }
+            listeners.get(event).add(listener);
+            return () => { var _a; return (_a = listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(listener); };
+        }),
+    };
+};
+const createWaveSurfer = (duration = 10, width = 100, scroll = 0) => {
+    const emitter = createEmitter();
+    const wrapper = document.createElement('div');
+    document.body.appendChild(wrapper);
+    return Object.assign(Object.assign({}, emitter), { getDecodedData: jest.fn(() => ({ numberOfChannels: 1 })), getDuration: jest.fn(() => duration), getScroll: jest.fn(() => scroll), getWidth: jest.fn(() => width), getWrapper: jest.fn(() => wrapper) });
+};
+describe('RegionsPlugin', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+    afterEach(() => {
+        jest.runOnlyPendingTimers();
+        jest.useRealTimers();
+        document.body.innerHTML = '';
+        jest.clearAllMocks();
+    });
+    test('re-renders a lazily detached region when setOptions moves it into view', () => {
+        var _a, _b, _c, _d, _e;
+        const wavesurfer = createWaveSurfer();
+        const plugin = RegionsPlugin.create();
+        plugin._init(wavesurfer);
+        const regionsContainer = wavesurfer.getWrapper().querySelector('[part="regions-container"]');
+        expect(regionsContainer).toBeTruthy();
+        Object.defineProperty(regionsContainer, 'clientWidth', { configurable: true, value: 1000 });
+        const region = plugin.addRegion({ start: 8, end: 9 });
+        jest.runOnlyPendingTimers();
+        expect((_a = region.element) === null || _a === void 0 ? void 0 : _a.parentElement).toBeNull();
+        region.setOptions({ start: 0.5, end: 1.5 });
+        expect((_b = region.element) === null || _b === void 0 ? void 0 : _b.parentElement).toBe(regionsContainer);
+        expect((_c = region.element) === null || _c === void 0 ? void 0 : _c.style.left).toBe('5%');
+        expect((_d = region.element) === null || _d === void 0 ? void 0 : _d.style.right).toBe('85%');
+        region.setOptions({ start: 8, end: 9 });
+        expect((_e = region.element) === null || _e === void 0 ? void 0 : _e.parentElement).toBeNull();
+    });
+});

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

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

package/dist/__tests__/timeline.test.js

@@ -0,0 +1,46 @@
+import TimelinePlugin from '../plugins/timeline.js';
+import { signal } from '../reactive/store.js';
+const createEmitter = () => {
+    const listeners = new Map();
+    return {
+        on: jest.fn((event, listener) => {
+            if (!listeners.has(event)) {
+                listeners.set(event, new Set());
+            }
+            listeners.get(event).add(listener);
+            return () => { var _a; return (_a = listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(listener); };
+        }),
+    };
+};
+const createWaveSurfer = (duration = 1, scrollWidth = 100) => {
+    const emitter = createEmitter();
+    const durationSignal = signal(duration);
+    const wrapper = document.createElement('div');
+    Object.defineProperty(wrapper, 'scrollWidth', { configurable: true, value: scrollWidth });
+    document.body.appendChild(wrapper);
+    return Object.assign(Object.assign({}, emitter), { getDuration: jest.fn(() => duration), getScroll: jest.fn(() => 0), getState: jest.fn(() => ({ duration: durationSignal })), getWidth: jest.fn(() => scrollWidth * 2), getWrapper: jest.fn(() => wrapper) });
+};
+describe('TimelinePlugin', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+        jest.clearAllMocks();
+    });
+    test('preserves high precision offsets for notch positions', () => {
+        const wavesurfer = createWaveSurfer(1, 100);
+        const plugin = TimelinePlugin.create({
+            duration: 1,
+            timeInterval: 0.333,
+            timeOffset: 0.001,
+            primaryLabelInterval: 10,
+            secondaryLabelInterval: 10,
+        });
+        plugin._init(wavesurfer);
+        const notches = wavesurfer.getWrapper().querySelectorAll('[part^="timeline-notch"]');
+        expect(notches).toHaveLength(4);
+        const offsets = Array.from(notches, (notch) => parseFloat(notch.style.left));
+        expect(offsets[0]).toBeCloseTo(0.1);
+        expect(offsets[1]).toBeCloseTo(33.4);
+        expect(offsets[2]).toBeCloseTo(66.7);
+        expect(offsets[3]).toBeCloseTo(100);
+    });
+});

package/dist/plugins/envelope.js

@@ -1 +1,426 @@
-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){const s=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?s.appendChild(e):"string"==typeof e?s.appendChild(document.createTextNode(e)):s.appendChild(i(t,e));else"style"===t?Object.assign(s.style,o):"textContent"===t?s.textContent=o:s.setAttribute(t,o.toString());return s}function s(t,e,s){const o=i(t,e||{});return null==s||s.appendChild(o),o}function o(t,e){let i;const s=()=>{i&&(i(),i=void 0),i=t()},o=e.map((t=>t.subscribe(s)));return s(),()=>{i&&(i(),i=void 0),o.forEach((t=>t()))}}function n(t,e={}){const{threshold:i=3,mouseButton:s=0,touchDelay:o=100}=e,n=function(t){let e=t;const i=new Set;return{get value(){return e},set(t){Object.is(e,t)||(e=t,i.forEach((t=>t(e))))},update(t){this.set(t(e))},subscribe:t=>(i.add(t),()=>i.delete(t))}}(null),r=new Map,l=matchMedia("(pointer: coarse)").matches;let h=()=>{};const a=e=>{if(e.button!==s)return;if(r.set(e.pointerId,e),r.size>1)return;let a=e.clientX,u=e.clientY,c=!1;const d=Date.now(),p=t.getBoundingClientRect(),{left:v,top:m}=p,g=t=>{if(t.defaultPrevented||r.size>1)return;if(l&&Date.now()-d<o)return;const e=t.clientX,s=t.clientY,h=e-a,p=s-u;(c||Math.abs(h)>i||Math.abs(p)>i)&&(t.preventDefault(),t.stopPropagation(),c||(n.set({type:"start",x:a-v,y:u-m}),c=!0),n.set({type:"move",x:e-v,y:s-m,deltaX:h,deltaY:p}),a=e,u=s)},f=t=>{if(r.delete(t.pointerId),c){const e=t.clientX,i=t.clientY;n.set({type:"end",x:e-v,y:i-m})}h()},y=t=>{r.delete(t.pointerId),t.relatedTarget&&t.relatedTarget!==document.documentElement||f(t)},P=t=>{c&&(t.stopPropagation(),t.preventDefault())},w=t=>{t.defaultPrevented||r.size>1||c&&t.preventDefault()};document.addEventListener("pointermove",g),document.addEventListener("pointerup",f),document.addEventListener("pointerout",y),document.addEventListener("pointercancel",y),document.addEventListener("touchmove",w,{passive:!1}),document.addEventListener("click",P,{capture:!0}),h=()=>{document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",f),document.removeEventListener("pointerout",y),document.removeEventListener("pointercancel",y),document.removeEventListener("touchmove",w),setTimeout((()=>{document.removeEventListener("click",P,{capture:!0})}),10)}};t.addEventListener("pointerdown",a);return{signal:n,cleanup:()=>{h(),t.removeEventListener("pointerdown",a),r.clear(),function(t){const e=t._cleanup;"function"==typeof e&&e()}(n)}}}const r={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 l extends t{constructor(t,e){super(),this.subscriptions=[],this.subscriptions=[],this.options=t,this.polyPoints=new Map;const i=e.clientWidth,r=e.clientHeight,l=s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:`0 0 ${i} ${r}`,preserveAspectRatio:"none",style:{position:"absolute",left:"0",top:"0",zIndex:"4"},part:"envelope"},e);this.svg=l;const h=s("polyline",{xmlns:"http://www.w3.org/2000/svg",points:`0,${r} ${i},${r}`,stroke:t.lineColor,"stroke-width":t.lineWidth,fill:"none",part:"polyline",style:t.dragLine?{cursor:"row-resize",pointerEvents:"stroke"}:{}},l);if(t.dragLine){const t=n(h),e=o((()=>{const e=t.signal.value;if(!e||"move"!==e.type||void 0===e.deltaY)return;const i=e.deltaY,{height:s}=l.viewBox.baseVal,{points:o}=h;for(let t=1;t<o.numberOfItems-1;t++){const e=o.getItem(t);e.y=Math.min(s,Math.max(0,e.y+i))}const n=l.querySelectorAll("ellipse");Array.from(n).forEach((t=>{const e=Math.min(s,Math.max(0,Number(t.getAttribute("cy"))+i));t.setAttribute("cy",e.toString())})),this.emit("line-move",i/s)}),[t.signal]);this.subscriptions.push((()=>{e(),t.cleanup()}))}this.dblClickListener=t=>{const e=l.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top;this.emit("point-create",i/e.width,s/e.height)},l.addEventListener("dblclick",this.dblClickListener);const a=()=>{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=l.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):a()},this.touchMoveListener=a,this.touchEndListener=a,l.addEventListener("touchstart",this.touchStartListener),l.addEventListener("touchmove",this.touchMoveListener),l.addEventListener("touchend",this.touchEndListener)}makeDraggable(t,e){const i=n(t,{threshold:1}),s=o((()=>{const s=i.signal.value;s&&("start"===s.type?t.style.cursor="grabbing":"move"===s.type&&void 0!==s.deltaX&&void 0!==s.deltaY?e(s.deltaX,s.deltaY):"end"===s.type&&(t.style.cursor="grab"))}),[i.signal]);this.subscriptions.push((()=>{s(),i.cleanup()}))}createCircle(t,e){const i=this.options.dragPointSize/2;return s("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,a=s.createSVGPoint();a.x=t*o,a.y=n-e*n;const u=this.createCircle(r,l),{points:c}=s.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 s=a.x+t,r=a.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>a.x)),d=Array.from(c).findLast((t=>t.x<a.x));l&&s>=l.x||d&&s<=d.x||(a.x=s,a.y=r,u.setAttribute("cx",s.toString()),u.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 h extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.volume=1,this.points=t.points||[],this.options=Object.assign({},r,t),this.options.lineColor=this.options.lineColor||r.lineColor,this.options.dragPointFill=this.options.dragPointFill||r.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||r.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||r.dragPointSize}static create(t){return new h(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 l(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{h as default};
+/**
+ * Envelope is a visual UI for controlling the audio volume and add fade-in and fade-out effects.
+ */
+import BasePlugin from '../base-plugin.js';
+import EventEmitter from '../event-emitter.js';
+import createElement from '../dom.js';
+import { createDragStream } from '../reactive/drag-stream.js';
+import { effect } from '../reactive/store.js';
+const defaultOptions = {
+    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 Polyline extends EventEmitter {
+    constructor(options, wrapper) {
+        super();
+        this.subscriptions = [];
+        this.subscriptions = [];
+        this.options = options;
+        this.polyPoints = new Map();
+        const width = wrapper.clientWidth;
+        const height = wrapper.clientHeight;
+        // SVG element
+        const svg = createElement('svg', {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: '100%',
+            height: '100%',
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: 'none',
+            style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                zIndex: '4',
+            },
+            part: 'envelope',
+        }, wrapper);
+        this.svg = svg;
+        // A polyline representing the envelope
+        const polyline = createElement('polyline', {
+            xmlns: 'http://www.w3.org/2000/svg',
+            points: `0,${height} ${width},${height}`,
+            stroke: options.lineColor,
+            'stroke-width': options.lineWidth,
+            fill: 'none',
+            part: 'polyline',
+            style: options.dragLine
+                ? {
+                    cursor: 'row-resize',
+                    pointerEvents: 'stroke',
+                }
+                : {},
+        }, svg);
+        // Make the polyline draggable along the Y axis
+        if (options.dragLine) {
+            const dragStream = createDragStream(polyline);
+            const unsubscribe = effect(() => {
+                const drag = dragStream.signal.value;
+                if (!drag || drag.type !== 'move' || drag.deltaY === undefined)
+                    return;
+                const deltaY = drag.deltaY;
+                const { height } = svg.viewBox.baseVal;
+                const { points } = polyline;
+                for (let i = 1; i < points.numberOfItems - 1; i++) {
+                    const point = points.getItem(i);
+                    point.y = Math.min(height, Math.max(0, point.y + deltaY));
+                }
+                const circles = svg.querySelectorAll('ellipse');
+                Array.from(circles).forEach((circle) => {
+                    const newY = Math.min(height, Math.max(0, Number(circle.getAttribute('cy')) + deltaY));
+                    circle.setAttribute('cy', newY.toString());
+                });
+                this.emit('line-move', deltaY / height);
+            }, [dragStream.signal]);
+            this.subscriptions.push(() => {
+                unsubscribe();
+                dragStream.cleanup();
+            });
+        }
+        // Listen to double click to add a new point
+        this.dblClickListener = (e) => {
+            const rect = svg.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            this.emit('point-create', x / rect.width, y / rect.height);
+        };
+        svg.addEventListener('dblclick', this.dblClickListener);
+        // Long press on touch devices
+        const clearTimer = () => {
+            if (this.pressTimer !== undefined) {
+                clearTimeout(this.pressTimer);
+                this.pressTimer = undefined;
+            }
+        };
+        this.touchStartListener = (e) => {
+            if (e.touches.length === 1) {
+                this.pressTimer = window.setTimeout(() => {
+                    e.preventDefault();
+                    const rect = svg.getBoundingClientRect();
+                    const x = e.touches[0].clientX - rect.left;
+                    const y = e.touches[0].clientY - rect.top;
+                    this.emit('point-create', x / rect.width, y / rect.height);
+                }, 500);
+            }
+            else {
+                clearTimer();
+            }
+        };
+        this.touchMoveListener = clearTimer;
+        this.touchEndListener = clearTimer;
+        svg.addEventListener('touchstart', this.touchStartListener);
+        svg.addEventListener('touchmove', this.touchMoveListener);
+        svg.addEventListener('touchend', this.touchEndListener);
+    }
+    makeDraggable(draggable, onDrag) {
+        const dragStream = createDragStream(draggable, { threshold: 1 });
+        const unsubscribe = effect(() => {
+            const drag = dragStream.signal.value;
+            if (!drag)
+                return;
+            if (drag.type === 'start') {
+                draggable.style.cursor = 'grabbing';
+            }
+            else if (drag.type === 'move' && drag.deltaX !== undefined && drag.deltaY !== undefined) {
+                onDrag(drag.deltaX, drag.deltaY);
+            }
+            else if (drag.type === 'end') {
+                draggable.style.cursor = 'grab';
+            }
+        }, [dragStream.signal]);
+        this.subscriptions.push(() => {
+            unsubscribe();
+            dragStream.cleanup();
+        });
+    }
+    createCircle(x, y) {
+        const size = this.options.dragPointSize;
+        const radius = size / 2;
+        return createElement('ellipse', {
+            xmlns: 'http://www.w3.org/2000/svg',
+            cx: x,
+            cy: y,
+            rx: radius,
+            ry: radius,
+            fill: this.options.dragPointFill,
+            stroke: this.options.dragPointStroke,
+            'stroke-width': '2',
+            style: {
+                cursor: 'grab',
+                pointerEvents: 'all',
+            },
+            part: 'envelope-circle',
+        }, this.svg);
+    }
+    removePolyPoint(point) {
+        const item = this.polyPoints.get(point);
+        if (!item)
+            return;
+        const { polyPoint, circle } = item;
+        const { points } = this.svg.querySelector('polyline');
+        const index = Array.from(points).findIndex((p) => p.x === polyPoint.x && p.y === polyPoint.y);
+        points.removeItem(index);
+        circle.remove();
+        this.polyPoints.delete(point);
+    }
+    addPolyPoint(relX, relY, refPoint) {
+        const { svg } = this;
+        const { width, height } = svg.viewBox.baseVal;
+        const x = relX * width;
+        const y = height - relY * height;
+        const threshold = this.options.dragPointSize / 2;
+        const newPoint = svg.createSVGPoint();
+        newPoint.x = relX * width;
+        newPoint.y = height - relY * height;
+        const circle = this.createCircle(x, y);
+        const { points } = svg.querySelector('polyline');
+        const newIndex = Array.from(points).findIndex((point) => point.x >= x);
+        points.insertItemBefore(newPoint, Math.max(newIndex, 1));
+        this.polyPoints.set(refPoint, { polyPoint: newPoint, circle });
+        this.makeDraggable(circle, (dx, dy) => {
+            const newX = newPoint.x + dx;
+            const newY = newPoint.y + dy;
+            // Remove the point if it's dragged out of the SVG
+            if (newX < -threshold || newY < -threshold || newX > width + threshold || newY > height + threshold) {
+                this.emit('point-dragout', refPoint);
+                return;
+            }
+            // Don't allow to drag past the next or previous point
+            const next = Array.from(points).find((point) => point.x > newPoint.x);
+            const prev = Array.from(points).findLast((point) => point.x < newPoint.x);
+            if ((next && newX >= next.x) || (prev && newX <= prev.x)) {
+                return;
+            }
+            // Update the point and the circle position
+            newPoint.x = newX;
+            newPoint.y = newY;
+            circle.setAttribute('cx', newX.toString());
+            circle.setAttribute('cy', newY.toString());
+            // Emit the event passing the point and new relative coordinates
+            this.emit('point-move', refPoint, newX / width, newY / height);
+        });
+    }
+    update() {
+        const { svg } = this;
+        // Skip the update if the container is hidden
+        const { clientWidth, clientHeight } = svg;
+        if (!clientWidth || !clientHeight) {
+            return;
+        }
+        const aspectRatioX = svg.viewBox.baseVal.width / clientWidth;
+        const aspectRatioY = svg.viewBox.baseVal.height / clientHeight;
+        const circles = svg.querySelectorAll('ellipse');
+        circles.forEach((circle) => {
+            const radius = this.options.dragPointSize / 2;
+            const rx = radius * aspectRatioX;
+            const ry = radius * aspectRatioY;
+            circle.setAttribute('rx', rx.toString());
+            circle.setAttribute('ry', ry.toString());
+        });
+    }
+    destroy() {
+        // Clear pending press timer
+        if (this.pressTimer !== undefined) {
+            clearTimeout(this.pressTimer);
+            this.pressTimer = undefined;
+        }
+        // Remove event listeners
+        if (this.dblClickListener) {
+            this.svg.removeEventListener('dblclick', this.dblClickListener);
+            this.dblClickListener = undefined;
+        }
+        if (this.touchStartListener) {
+            this.svg.removeEventListener('touchstart', this.touchStartListener);
+            this.touchStartListener = undefined;
+        }
+        if (this.touchMoveListener) {
+            this.svg.removeEventListener('touchmove', this.touchMoveListener);
+            this.touchMoveListener = undefined;
+        }
+        if (this.touchEndListener) {
+            this.svg.removeEventListener('touchend', this.touchEndListener);
+            this.touchEndListener = undefined;
+        }
+        this.subscriptions.forEach((unsubscribe) => unsubscribe());
+        this.polyPoints.clear();
+        this.svg.remove();
+    }
+}
+const randomId = () => Math.random().toString(36).slice(2);
+class EnvelopePlugin extends BasePlugin {
+    /**
+     * Create a new Envelope plugin.
+     */
+    constructor(options) {
+        super(options);
+        this.polyline = null;
+        this.throttleTimeout = null;
+        this.volume = 1;
+        this.points = options.points || [];
+        this.options = Object.assign({}, defaultOptions, options);
+        this.options.lineColor = this.options.lineColor || defaultOptions.lineColor;
+        this.options.dragPointFill = this.options.dragPointFill || defaultOptions.dragPointFill;
+        this.options.dragPointStroke = this.options.dragPointStroke || defaultOptions.dragPointStroke;
+        this.options.dragPointSize = this.options.dragPointSize || defaultOptions.dragPointSize;
+    }
+    static create(options) {
+        return new EnvelopePlugin(options);
+    }
+    /**
+     * Add an envelope point with a given time and volume.
+     */
+    addPoint(point) {
+        var _a;
+        if (!point.id)
+            point.id = randomId();
+        // Insert the point in the correct position to keep the array sorted
+        const index = this.points.findLastIndex((p) => p.time < point.time);
+        this.points.splice(index + 1, 0, point);
+        this.emitPoints();
+        // Add the point to the polyline if the duration is available
+        const duration = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDuration();
+        if (duration) {
+            this.addPolyPoint(point, duration);
+        }
+    }
+    /**
+     * Remove an envelope point.
+     */
+    removePoint(point) {
+        var _a;
+        const index = this.points.indexOf(point);
+        if (index > -1) {
+            this.points.splice(index, 1);
+            (_a = this.polyline) === null || _a === void 0 ? void 0 : _a.removePolyPoint(point);
+            this.emitPoints();
+        }
+    }
+    /**
+     * Get all envelope points. Should not be modified directly.
+     */
+    getPoints() {
+        return this.points;
+    }
+    /**
+     * Set new envelope points.
+     */
+    setPoints(newPoints) {
+        this.points.slice().forEach((point) => this.removePoint(point));
+        newPoints.forEach((point) => this.addPoint(point));
+    }
+    /**
+     * Destroy the plugin instance.
+     */
+    destroy() {
+        var _a;
+        // Clear pending throttle timeout
+        if (this.throttleTimeout) {
+            clearTimeout(this.throttleTimeout);
+            this.throttleTimeout = null;
+        }
+        (_a = this.polyline) === null || _a === void 0 ? void 0 : _a.destroy();
+        super.destroy();
+    }
+    /**
+     * Get the envelope volume.
+     */
+    getCurrentVolume() {
+        return this.volume;
+    }
+    /**
+     * Set the envelope volume. 0..1 (more than 1 will boost the volume).
+     */
+    setVolume(floatValue) {
+        var _a;
+        this.volume = floatValue;
+        (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.setVolume(floatValue);
+    }
+    /** Called by wavesurfer, don't call manually */
+    onInit() {
+        var _a;
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        const { options } = this;
+        options.volume = (_a = options.volume) !== null && _a !== void 0 ? _a : this.wavesurfer.getVolume();
+        this.setVolume(options.volume);
+        this.subscriptions.push(this.wavesurfer.on('decode', (duration) => {
+            this.initPolyline();
+            this.points.forEach((point) => {
+                this.addPolyPoint(point, duration);
+            });
+        }), this.wavesurfer.on('redraw', () => {
+            var _a;
+            (_a = this.polyline) === null || _a === void 0 ? void 0 : _a.update();
+        }), this.wavesurfer.on('timeupdate', (time) => {
+            this.onTimeUpdate(time);
+        }));
+    }
+    emitPoints() {
+        if (this.throttleTimeout) {
+            clearTimeout(this.throttleTimeout);
+        }
+        this.throttleTimeout = setTimeout(() => {
+            this.emit('points-change', this.points);
+        }, 200);
+    }
+    initPolyline() {
+        if (this.polyline)
+            this.polyline.destroy();
+        if (!this.wavesurfer)
+            return;
+        const wrapper = this.wavesurfer.getWrapper();
+        this.polyline = new Polyline(this.options, wrapper);
+        this.subscriptions.push(this.polyline.on('point-move', (point, relativeX, relativeY) => {
+            var _a;
+            const duration = ((_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDuration()) || 0;
+            point.time = relativeX * duration;
+            point.volume = 1 - relativeY;
+            this.emitPoints();
+        }), this.polyline.on('point-dragout', (point) => {
+            this.removePoint(point);
+        }), this.polyline.on('point-create', (relativeX, relativeY) => {
+            var _a;
+            this.addPoint({
+                time: relativeX * (((_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDuration()) || 0),
+                volume: 1 - relativeY,
+            });
+        }), this.polyline.on('line-move', (relativeY) => {
+            var _a;
+            this.points.forEach((point) => {
+                point.volume = Math.min(1, Math.max(0, point.volume - relativeY));
+            });
+            this.emitPoints();
+            this.onTimeUpdate(((_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getCurrentTime()) || 0);
+        }));
+    }
+    addPolyPoint(point, duration) {
+        var _a;
+        (_a = this.polyline) === null || _a === void 0 ? void 0 : _a.addPolyPoint(point.time / duration, point.volume, point);
+    }
+    onTimeUpdate(time) {
+        if (!this.wavesurfer)
+            return;
+        let nextPoint = this.points.find((point) => point.time > time);
+        if (!nextPoint) {
+            nextPoint = { time: this.wavesurfer.getDuration() || 0, volume: 0 };
+        }
+        let prevPoint = this.points.findLast((point) => point.time <= time);
+        if (!prevPoint) {
+            prevPoint = { time: 0, volume: 0 };
+        }
+        const timeDiff = nextPoint.time - prevPoint.time;
+        const volumeDiff = nextPoint.volume - prevPoint.volume;
+        const newVolume = prevPoint.volume + (time - prevPoint.time) * (volumeDiff / timeDiff);
+        const clampedVolume = Math.min(1, Math.max(0, newVolume));
+        const roundedVolume = Math.round(clampedVolume * 100) / 100;
+        if (roundedVolume !== this.getCurrentVolume()) {
+            this.setVolume(roundedVolume);
+            this.emit('volume-change', roundedVolume);
+        }
+    }
+}
+export default EnvelopePlugin;