wavesurfer.js 7.12.3 → 7.12.5

package/dist/__tests__/minimap.test.js

@@ -42,12 +42,25 @@ const createMainWaveSurfer = (dragToSeek = true) => {
     const wrapper = document.createElement('div');
     const renderer = { renderProgress: jest.fn() };
     const channelData = new Float32Array([0, 1, -1]);
+    let scroll = 0;
+    let width = 200;
+    let wrapperWidth = 500;
+    Object.defineProperty(wrapper, 'clientWidth', {
+        configurable: true,
+        get: () => wrapperWidth,
+    });
     wrapperParent.appendChild(wrapper);
-    return Object.assign(Object.assign({}, emitter), { options: { dragToSeek }, getCurrentTime: jest.fn(() => 12), getDecodedData: jest.fn(() => ({
+    return Object.assign(Object.assign({}, emitter), { __setScroll: (value) => {
+            scroll = value;
+        }, __setWidth: (value) => {
+            width = value;
+        }, __setWrapperWidth: (value) => {
+            wrapperWidth = value;
+        }, options: { dragToSeek }, getCurrentTime: jest.fn(() => 12), getDecodedData: jest.fn(() => ({
             duration: 30,
             numberOfChannels: 1,
             getChannelData: jest.fn(() => channelData),
-        })), getDuration: jest.fn(() => 30), getRenderer: jest.fn(() => renderer), getWrapper: jest.fn(() => wrapper), isPlaying: jest.fn(() => false), seekTo: jest.fn(), renderer });
+        })), getDuration: jest.fn(() => 30), getRenderer: jest.fn(() => renderer), getScroll: jest.fn(() => scroll), getWidth: jest.fn(() => width), getWrapper: jest.fn(() => wrapper), isPlaying: jest.fn(() => false), seekTo: jest.fn(), renderer });
 };
 const createMock = WaveSurfer.create;
 describe('MinimapPlugin', () => {
@@ -89,4 +102,27 @@ describe('MinimapPlugin', () => {
         jest.advanceTimersByTime(200);
         expect(mainWaveSurfer.seekTo).toHaveBeenLastCalledWith(0.75);
     }));
+    test('keeps the overlay contained while redraw and scroll updates are catching up during zoom-out', () => __awaiter(void 0, void 0, void 0, function* () {
+        const miniWaveSurfer = createMiniWaveSurfer();
+        const mainWaveSurfer = createMainWaveSurfer();
+        createMock.mockReturnValue(miniWaveSurfer);
+        const plugin = MinimapPlugin.create({ height: 20 });
+        plugin._init(mainWaveSurfer);
+        yield Promise.resolve();
+        const minimapContainer = createMock.mock.calls[0][0].container;
+        const overlay = minimapContainer.querySelector('[part="minimap-overlay"]');
+        expect(overlay.style.transition).toBe('left 100ms ease-out, width 100ms ease-out');
+        mainWaveSurfer.__setScroll(180);
+        mainWaveSurfer.emit('redraw');
+        mainWaveSurfer.emit('scroll', 10.8, 22.8, 180, 380);
+        mainWaveSurfer.__setScroll(300);
+        mainWaveSurfer.__setWrapperWidth(400);
+        mainWaveSurfer.emit('redraw');
+        expect(overlay.style.left).toBe('75%');
+        expect(overlay.style.width).toBe('25%');
+        mainWaveSurfer.__setScroll(200);
+        mainWaveSurfer.emit('scroll', 15, 30, 200, 400);
+        expect(overlay.style.left).toBe('50%');
+        expect(overlay.style.width).toBe('50%');
+    }));
 });

package/dist/__tests__/renderer.test.js

@@ -161,6 +161,39 @@ describe('Renderer', () => {
         renderer.scrollIntoView(0.8);
         expect(renderer.getScroll()).toBeGreaterThanOrEqual(0);
     });
+    test('renderProgress clamps only at low zoom when auto-centering', () => {
+        ;
+        renderer.options.autoScroll = true;
+        renderer.options.autoCenter = true;
+        renderer.isScrollable = true;
+        const viewportWidth = 100;
+        const lowZoomDuration = 2;
+        const lowZoomScrollWidth = 200;
+        const highZoomDuration = 1;
+        const highZoomScrollWidth = 800;
+        Object.defineProperty(renderer.scrollContainer, 'clientWidth', {
+            configurable: true,
+            value: viewportWidth,
+        });
+        renderer.audioData = { duration: lowZoomDuration };
+        Object.defineProperty(renderer.scrollContainer, 'scrollWidth', {
+            configurable: true,
+            value: lowZoomScrollWidth,
+        });
+        renderer.setScroll(0);
+        renderer.renderProgress(0.35, true);
+        // 200 / 2 = 100 px/s, so low zoom keeps Math.min(20, 10) = 10
+        expect(renderer.getScroll()).toBe(10);
+        renderer.audioData = { duration: highZoomDuration };
+        Object.defineProperty(renderer.scrollContainer, 'scrollWidth', {
+            configurable: true,
+            value: highZoomScrollWidth,
+        });
+        renderer.setScroll(0);
+        renderer.renderProgress(0.0875, true);
+        // 800 / 1 = 800 px/s, so high zoom applies no clamp and scrolls by the full center offset
+        expect(renderer.getScroll()).toBe(20);
+    });
     test('renderProgress updates styles', () => {
         renderer.renderProgress(0.5);
         expect(renderer.progressWrapper.style.width).toBe('50%');

package/dist/plugins/envelope.cjs

@@ -0,0 +1 @@
+"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){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))}}module.exports=h;

package/dist/plugins/envelope.esm.js

@@ -0,0 +1 @@
+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};

package/dist/plugins/envelope.js

@@ -1,426 +1 @@
-/**
- * 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;
+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};

package/dist/plugins/envelope.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Envelope=e())}(this,(function(){"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){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,f=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)},g=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||g(t)},P=t=>{c&&(t.stopPropagation(),t.preventDefault())},b=t=>{t.defaultPrevented||r.size>1||c&&t.preventDefault()};document.addEventListener("pointermove",f),document.addEventListener("pointerup",g),document.addEventListener("pointerout",y),document.addEventListener("pointercancel",y),document.addEventListener("touchmove",b,{passive:!1}),document.addEventListener("click",P,{capture:!0}),h=()=>{document.removeEventListener("pointermove",f),document.removeEventListener("pointerup",g),document.removeEventListener("pointerout",y),document.removeEventListener("pointercancel",y),document.removeEventListener("touchmove",b),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))}}return h}));

package/dist/plugins/hover.cjs

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