wavesurfer.js 7.11.0 → 7.11.1

package/dist/plugins/regions.js

@@ -1 +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=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,n,s=3,r=0,o=100){if(!t)return()=>{};const h=matchMedia("(pointer: coarse)").matches;let a=()=>{};const l=l=>{if(l.button!==r)return;l.preventDefault(),l.stopPropagation();let d=l.clientX,c=l.clientY,u=!1;const v=Date.now(),g=n=>{if(n.preventDefault(),n.stopPropagation(),h&&Date.now()-v<o)return;const r=n.clientX,a=n.clientY,l=r-d,g=a-c;if(u||Math.abs(l)>s||Math.abs(g)>s){const n=t.getBoundingClientRect(),{left:s,top:o}=n;u||(null==i||i(d-s,c-o),u=!0),e(l,g,r-s,a-o),d=r,c=a}},p=e=>{if(u){const i=e.clientX,s=e.clientY,r=t.getBoundingClientRect(),{left:o,top:h}=r;null==n||n(i-o,s-h)}a()},m=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||p(t)},f=t=>{u&&(t.stopPropagation(),t.preventDefault())},b=t=>{u&&t.preventDefault()};document.addEventListener("pointermove",g),document.addEventListener("pointerup",p),document.addEventListener("pointerout",m),document.addEventListener("pointercancel",m),document.addEventListener("touchmove",b,{passive:!1}),document.addEventListener("click",f,{capture:!0}),a=()=>{document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",p),document.removeEventListener("pointerout",m),document.removeEventListener("pointercancel",m),document.removeEventListener("touchmove",b),setTimeout((()=>{document.removeEventListener("click",f,{capture:!0})}),10)}};return t.addEventListener("pointerdown",l),()=>{a(),t.removeEventListener("pointerdown",l)}}function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}class r extends t{constructor(t,e,i=0){var n,s,r,o,h,a,l,d,c,u;super(),this.totalDuration=e,this.numberOfChannels=i,this.element=null,this.minLength=0,this.maxLength=1/0,this.contentEditable=!1,this.subscriptions=[],this.updatingSide=void 0,this.isRemoved=!1,this.subscriptions=[],this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.resizeStart=null===(o=t.resizeStart)||void 0===o||o,this.resizeEnd=null===(h=t.resizeEnd)||void 0===h||h,this.color=null!==(a=t.color)&&void 0!==a?a:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(l=t.minLength)&&void 0!==l?l:this.minLength,this.maxLength=null!==(d=t.maxLength)&&void 0!==d?d:this.maxLength,this.channelIdx=null!==(c=t.channelIdx)&&void 0!==c?c:-1,this.contentEditable=null!==(u=t.contentEditable)&&void 0!==u?u:this.contentEditable,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){var t;const e=this.start===this.end;null===(t=this.element)||void 0===t||t.setAttribute("part",`${e?"marker":"region"} ${this.id}`)}addResizeHandles(t){const e={position:"absolute",zIndex:"2",width:"6px",height:"100%",top:"0",cursor:"ew-resize",wordBreak:"keep-all"},n=s("div",{part:"region-handle region-handle-left",style:Object.assign(Object.assign({},e),{left:"0",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"})},t),r=s("div",{part:"region-handle region-handle-right",style:Object.assign(Object.assign({},e),{right:"0",borderRight:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"})},t);this.subscriptions.push(i(n,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing("start")),1),i(r,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing("end")),1))}removeResizeHandles(t){const e=t.querySelector('[part*="region-handle-left"]'),i=t.querySelector('[part*="region-handle-right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){if(this.isRemoved)return null;const t=this.start===this.end;let e=0,i=100;this.channelIdx>=0&&this.numberOfChannels>0&&this.channelIdx<this.numberOfChannels&&(i=100/this.numberOfChannels,e=i*this.channelIdx);const n=s("div",{style:{position:"absolute",top:`${e}%`,height:`${i}%`,backgroundColor:t?"none":this.color,borderLeft:t?"2px solid "+this.color:"none",borderRadius:"2px",boxSizing:"border-box",transition:"background-color 0.2s ease",cursor:this.drag?"grab":"default",pointerEvents:"all"}});return!t&&this.resize&&this.addResizeHandles(n),n}renderPosition(){if(!this.element)return;const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){var e;this.drag&&(null===(e=this.element)||void 0===e?void 0:e.style)&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),this.subscriptions.push(i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")}))),this.contentEditable&&this.content&&(this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)))}_onUpdate(t,e,i){var n;if(!(null===(n=this.element)||void 0===n?void 0:n.parentElement))return;const{width:s}=this.element.parentElement.getBoundingClientRect(),r=t/s*this.totalDuration;let o=e&&"start"!==e?this.start:this.start+r,h=e&&"end"!==e?this.end:this.end+r;const a=void 0!==i;a&&this.updatingSide&&this.updatingSide!==e&&("start"===this.updatingSide?o=i:h=i),o=Math.max(0,o),h=Math.min(this.totalDuration,h);const l=h-o;this.updatingSide=e;const d=l>=this.minLength&&l<=this.maxLength;o<=h&&(d||a)&&(this.start=o,this.end=h,this.renderPosition(),this.emit("update",e))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&(this.resizeStart||"start"!==e)&&(this.resizeEnd||"end"!==e)&&this._onUpdate(t,e)}onEndResizing(t){this.resize&&(this.emit("update-end",t),this.updatingSide=void 0)}onContentClick(t){t.stopPropagation();t.target.focus(),this.emit("click",t)}onContentBlur(){this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(t){this.emit("play",t&&this.end!==this.start?this.end:void 0)}getContent(t=!1){var e;return t?this.content||void 0:this.element instanceof HTMLElement?(null===(e=this.content)||void 0===e?void 0:e.innerHTML)||void 0:""}setContent(t){var e;if(this.element)if(this.content&&this.contentEditable&&(this.contentClickListener&&this.content.removeEventListener("click",this.contentClickListener),this.contentBlurListener&&this.content.removeEventListener("blur",this.contentBlurListener)),null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){const e=this.start===this.end;this.content=s("div",{style:{padding:`0.2em ${e?.2:.4}em`,display:"inline-block"},textContent:t})}else this.content=t;this.contentEditable&&(this.content.contentEditable="true",this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)),this.content.setAttribute("part","region-content"),this.element.appendChild(this.content),this.emit("content-changed")}else this.content=void 0}setOptions(t){var e,i;if(this.element){if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}void 0!==t.resizeStart&&(this.resizeStart=t.resizeStart),void 0!==t.resizeEnd&&(this.resizeEnd=t.resizeEnd)}}remove(){this.isRemoved=!0,this.emit("remove"),this.subscriptions.forEach((t=>t())),this.element&&(this.element.remove(),this.element=null)}}class o extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new o(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer),this.subscriptions.push(this.wavesurfer.on("ready",(t=>{this.regions.forEach((e=>e._setTotalDuration(t)))})));let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){return s("div",{part:"regions-container",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"5",pointerEvents:"none"}})}getRegions(){return this.regions}avoidOverlapping(t){t.content&&setTimeout((()=>{const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}),10)}adjustScroll(t){var e,i;if(!t.element)return;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),h=t.element.getBoundingClientRect(),a=h.left-o.left,l=h.right-o.left;a<0?n.scrollLeft+=a:l>s&&(n.scrollLeft+=l-s)}virtualAppend(t,e,i){const n=()=>{if(!this.wavesurfer)return;const n=this.wavesurfer.getWidth(),s=this.wavesurfer.getScroll(),r=e.clientWidth,o=this.wavesurfer.getDuration(),h=Math.round(t.start/o*r),a=h+(Math.round((t.end-t.start)/o*r)||1)>s&&h<s+n;a&&!i.parentElement?e.appendChild(i):!a&&i.parentElement&&i.remove()};setTimeout((()=>{if(!this.wavesurfer||!t.element)return;n();const e=this.wavesurfer.on("scroll",n),i=this.wavesurfer.on("zoom",n);this.subscriptions.push(e,i),t.once("remove",(()=>{e(),i()}))}),0)}saveRegion(t){if(!t.element)return;this.virtualAppend(t,this.regionsContainer,t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(e=>{e||this.adjustScroll(t),this.emit("region-update",t,e)})),t.on("update-end",(e=>{this.avoidOverlapping(t),this.emit("region-updated",t,e)})),t.on("play",(e=>{var i;null===(i=this.wavesurfer)||void 0===i||i.play(t.start,e)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.on("content-changed",(()=>{this.emit("region-content-changed",t)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const n=this.wavesurfer.getDuration(),s=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new r(t,n,s);return this.emit("region-initialized",o),n?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o)}))),o}enableDragSelection(t,e=3){var n;const s=null===(n=this.wavesurfer)||void 0===n?void 0:n.getWrapper();if(!(s&&s instanceof HTMLElement))return()=>{};let o=null,h=0,a=0;return i(s,((t,e,i)=>{o&&o._onUpdate(t,i>h?"end":"start",a)}),(e=>{var i,n;if(h=e,!this.wavesurfer)return;const s=this.wavesurfer.getDuration(),l=null===(n=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===n?void 0:n.numberOfChannels,{width:d}=this.wavesurfer.getWrapper().getBoundingClientRect();a=h/d*s;const c=e/d*s,u=(e+5)/d*s;o=new r(Object.assign(Object.assign({},t),{start:c,end:u}),s,l),this.emit("region-initialized",o),o.element&&this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o.updatingSide=void 0,o=null)}),e)}clearRegions(){this.regions.slice().forEach((t=>t.remove())),this.regions=[]}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}export{o as default};
+class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,n,s=3,r=0,o=100){if(!t)return()=>{};const h=new Map,a=matchMedia("(pointer: coarse)").matches;let l=()=>{};const d=d=>{if(d.button!==r)return;if(h.set(d.pointerId,d),h.size>1)return;let c=d.clientX,u=d.clientY,v=!1;const g=Date.now(),p=n=>{if(n.defaultPrevented||h.size>1)return;if(a&&Date.now()-g<o)return;const r=n.clientX,l=n.clientY,d=r-c,p=l-u;if(v||Math.abs(d)>s||Math.abs(p)>s){n.preventDefault(),n.stopPropagation();const s=t.getBoundingClientRect(),{left:o,top:h}=s;v||(null==i||i(c-o,u-h),v=!0),e(d,p,r-o,l-h),c=r,u=l}},m=e=>{if(h.delete(e.pointerId),v){const i=e.clientX,s=e.clientY,r=t.getBoundingClientRect(),{left:o,top:h}=r;null==n||n(i-o,s-h)}l()},f=t=>{h.delete(t.pointerId),t.relatedTarget&&t.relatedTarget!==document.documentElement||m(t)},b=t=>{v&&(t.stopPropagation(),t.preventDefault())},E=t=>{t.defaultPrevented||h.size>1||v&&t.preventDefault()};document.addEventListener("pointermove",p),document.addEventListener("pointerup",m),document.addEventListener("pointerout",f),document.addEventListener("pointercancel",f),document.addEventListener("touchmove",E,{passive:!1}),document.addEventListener("click",b,{capture:!0}),l=()=>{document.removeEventListener("pointermove",p),document.removeEventListener("pointerup",m),document.removeEventListener("pointerout",f),document.removeEventListener("pointercancel",f),document.removeEventListener("touchmove",E),setTimeout((()=>{document.removeEventListener("click",b,{capture:!0})}),10)}};return t.addEventListener("pointerdown",d),()=>{l(),t.removeEventListener("pointerdown",d),h.clear()}}function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}class r extends t{constructor(t,e,i=0){var n,s,r,o,h,a,l,d,c,u;super(),this.totalDuration=e,this.numberOfChannels=i,this.element=null,this.minLength=0,this.maxLength=1/0,this.contentEditable=!1,this.subscriptions=[],this.updatingSide=void 0,this.isRemoved=!1,this.subscriptions=[],this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.resizeStart=null===(o=t.resizeStart)||void 0===o||o,this.resizeEnd=null===(h=t.resizeEnd)||void 0===h||h,this.color=null!==(a=t.color)&&void 0!==a?a:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(l=t.minLength)&&void 0!==l?l:this.minLength,this.maxLength=null!==(d=t.maxLength)&&void 0!==d?d:this.maxLength,this.channelIdx=null!==(c=t.channelIdx)&&void 0!==c?c:-1,this.contentEditable=null!==(u=t.contentEditable)&&void 0!==u?u:this.contentEditable,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){var t;const e=this.start===this.end;null===(t=this.element)||void 0===t||t.setAttribute("part",`${e?"marker":"region"} ${this.id}`)}addResizeHandles(t){const e={position:"absolute",zIndex:"2",width:"6px",height:"100%",top:"0",cursor:"ew-resize",wordBreak:"keep-all"},n=s("div",{part:"region-handle region-handle-left",style:Object.assign(Object.assign({},e),{left:"0",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"})},t),r=s("div",{part:"region-handle region-handle-right",style:Object.assign(Object.assign({},e),{right:"0",borderRight:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"})},t);this.subscriptions.push(i(n,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing("start")),1),i(r,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing("end")),1))}removeResizeHandles(t){const e=t.querySelector('[part*="region-handle-left"]'),i=t.querySelector('[part*="region-handle-right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){if(this.isRemoved)return null;const t=this.start===this.end;let e=0,i=100;this.channelIdx>=0&&this.numberOfChannels>0&&this.channelIdx<this.numberOfChannels&&(i=100/this.numberOfChannels,e=i*this.channelIdx);const n=s("div",{style:{position:"absolute",top:`${e}%`,height:`${i}%`,backgroundColor:t?"none":this.color,borderLeft:t?"2px solid "+this.color:"none",borderRadius:"2px",boxSizing:"border-box",transition:"background-color 0.2s ease",cursor:this.drag?"grab":"default",pointerEvents:"all"}});return!t&&this.resize&&this.addResizeHandles(n),n}renderPosition(){if(!this.element)return;const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){var e;this.drag&&(null===(e=this.element)||void 0===e?void 0:e.style)&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),this.subscriptions.push(i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")}))),this.contentEditable&&this.content&&(this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)))}_onUpdate(t,e,i){var n;if(!(null===(n=this.element)||void 0===n?void 0:n.parentElement))return;const{width:s}=this.element.parentElement.getBoundingClientRect(),r=t/s*this.totalDuration;let o=e&&"start"!==e?this.start:this.start+r,h=e&&"end"!==e?this.end:this.end+r;const a=void 0!==i;a&&this.updatingSide&&this.updatingSide!==e&&("start"===this.updatingSide?o=i:h=i),o=Math.max(0,o),h=Math.min(this.totalDuration,h);const l=h-o;this.updatingSide=e;const d=l>=this.minLength&&l<=this.maxLength;o<=h&&(d||a)&&(this.start=o,this.end=h,this.renderPosition(),this.emit("update",e))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&(this.resizeStart||"start"!==e)&&(this.resizeEnd||"end"!==e)&&this._onUpdate(t,e)}onEndResizing(t){this.resize&&(this.emit("update-end",t),this.updatingSide=void 0)}onContentClick(t){t.stopPropagation();t.target.focus(),this.emit("click",t)}onContentBlur(){this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(t){this.emit("play",t&&this.end!==this.start?this.end:void 0)}getContent(t=!1){var e;return t?this.content||void 0:this.element instanceof HTMLElement?(null===(e=this.content)||void 0===e?void 0:e.innerHTML)||void 0:""}setContent(t){var e;if(this.element)if(this.content&&this.contentEditable&&(this.contentClickListener&&this.content.removeEventListener("click",this.contentClickListener),this.contentBlurListener&&this.content.removeEventListener("blur",this.contentBlurListener)),null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){const e=this.start===this.end;this.content=s("div",{style:{padding:`0.2em ${e?.2:.4}em`,display:"inline-block"},textContent:t})}else this.content=t;this.contentEditable&&(this.content.contentEditable="true",this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)),this.content.setAttribute("part","region-content"),this.element.appendChild(this.content),this.emit("content-changed")}else this.content=void 0}setOptions(t){var e,i;if(this.element){if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}void 0!==t.resizeStart&&(this.resizeStart=t.resizeStart),void 0!==t.resizeEnd&&(this.resizeEnd=t.resizeEnd)}}remove(){this.isRemoved=!0,this.emit("remove"),this.subscriptions.forEach((t=>t())),this.element&&(this.element.remove(),this.element=null)}}class o extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new o(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer),this.subscriptions.push(this.wavesurfer.on("ready",(t=>{this.regions.forEach((e=>e._setTotalDuration(t)))})));let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){return s("div",{part:"regions-container",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"5",pointerEvents:"none"}})}getRegions(){return this.regions}avoidOverlapping(t){t.content&&setTimeout((()=>{const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}),10)}adjustScroll(t){var e,i;if(!t.element)return;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),h=t.element.getBoundingClientRect(),a=h.left-o.left,l=h.right-o.left;a<0?n.scrollLeft+=a:l>s&&(n.scrollLeft+=l-s)}virtualAppend(t,e,i){const n=()=>{if(!this.wavesurfer)return;const n=this.wavesurfer.getWidth(),s=this.wavesurfer.getScroll(),r=e.clientWidth,o=this.wavesurfer.getDuration(),h=Math.round(t.start/o*r),a=h+(Math.round((t.end-t.start)/o*r)||1)>s&&h<s+n;a&&!i.parentElement?e.appendChild(i):!a&&i.parentElement&&i.remove()};setTimeout((()=>{if(!this.wavesurfer||!t.element)return;n();const e=this.wavesurfer.on("scroll",n),i=this.wavesurfer.on("zoom",n),s=this.wavesurfer.on("resize",n);this.subscriptions.push(e,i,s),t.once("remove",(()=>{e(),i(),s()}))}),0)}saveRegion(t){if(!t.element)return;this.virtualAppend(t,this.regionsContainer,t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(e=>{e||this.adjustScroll(t),this.emit("region-update",t,e)})),t.on("update-end",(e=>{this.avoidOverlapping(t),this.emit("region-updated",t,e)})),t.on("play",(e=>{var i;null===(i=this.wavesurfer)||void 0===i||i.play(t.start,e)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.on("content-changed",(()=>{this.emit("region-content-changed",t)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const n=this.wavesurfer.getDuration(),s=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new r(t,n,s);return this.emit("region-initialized",o),n?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o)}))),o}enableDragSelection(t,e=3){var n;const s=null===(n=this.wavesurfer)||void 0===n?void 0:n.getWrapper();if(!(s&&s instanceof HTMLElement))return()=>{};let o=null,h=0,a=0;return i(s,((t,e,i)=>{o&&o._onUpdate(t,i>h?"end":"start",a)}),(e=>{var i,n;if(h=e,!this.wavesurfer)return;const s=this.wavesurfer.getDuration(),l=null===(n=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===n?void 0:n.numberOfChannels,{width:d}=this.wavesurfer.getWrapper().getBoundingClientRect();a=h/d*s;const c=e/d*s,u=(e+5)/d*s;o=new r(Object.assign(Object.assign({},t),{start:c,end:u}),s,l),this.emit("region-initialized",o),o.element&&this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o.updatingSide=void 0,o=null)}),e)}clearRegions(){this.regions.slice().forEach((t=>t.remove())),this.regions=[]}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}export{o as default};

package/dist/plugins/regions.min.js

@@ -1 +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.Regions=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=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,n,s=3,r=0,o=100){if(!t)return()=>{};const h=matchMedia("(pointer: coarse)").matches;let a=()=>{};const l=l=>{if(l.button!==r)return;l.preventDefault(),l.stopPropagation();let d=l.clientX,c=l.clientY,u=!1;const v=Date.now(),g=n=>{if(n.preventDefault(),n.stopPropagation(),h&&Date.now()-v<o)return;const r=n.clientX,a=n.clientY,l=r-d,g=a-c;if(u||Math.abs(l)>s||Math.abs(g)>s){const n=t.getBoundingClientRect(),{left:s,top:o}=n;u||(null==i||i(d-s,c-o),u=!0),e(l,g,r-s,a-o),d=r,c=a}},p=e=>{if(u){const i=e.clientX,s=e.clientY,r=t.getBoundingClientRect(),{left:o,top:h}=r;null==n||n(i-o,s-h)}a()},m=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||p(t)},f=t=>{u&&(t.stopPropagation(),t.preventDefault())},b=t=>{u&&t.preventDefault()};document.addEventListener("pointermove",g),document.addEventListener("pointerup",p),document.addEventListener("pointerout",m),document.addEventListener("pointercancel",m),document.addEventListener("touchmove",b,{passive:!1}),document.addEventListener("click",f,{capture:!0}),a=()=>{document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",p),document.removeEventListener("pointerout",m),document.removeEventListener("pointercancel",m),document.removeEventListener("touchmove",b),setTimeout((()=>{document.removeEventListener("click",f,{capture:!0})}),10)}};return t.addEventListener("pointerdown",l),()=>{a(),t.removeEventListener("pointerdown",l)}}function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}class r extends t{constructor(t,e,i=0){var n,s,r,o,h,a,l,d,c,u;super(),this.totalDuration=e,this.numberOfChannels=i,this.element=null,this.minLength=0,this.maxLength=1/0,this.contentEditable=!1,this.subscriptions=[],this.updatingSide=void 0,this.isRemoved=!1,this.subscriptions=[],this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.resizeStart=null===(o=t.resizeStart)||void 0===o||o,this.resizeEnd=null===(h=t.resizeEnd)||void 0===h||h,this.color=null!==(a=t.color)&&void 0!==a?a:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(l=t.minLength)&&void 0!==l?l:this.minLength,this.maxLength=null!==(d=t.maxLength)&&void 0!==d?d:this.maxLength,this.channelIdx=null!==(c=t.channelIdx)&&void 0!==c?c:-1,this.contentEditable=null!==(u=t.contentEditable)&&void 0!==u?u:this.contentEditable,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){var t;const e=this.start===this.end;null===(t=this.element)||void 0===t||t.setAttribute("part",`${e?"marker":"region"} ${this.id}`)}addResizeHandles(t){const e={position:"absolute",zIndex:"2",width:"6px",height:"100%",top:"0",cursor:"ew-resize",wordBreak:"keep-all"},n=s("div",{part:"region-handle region-handle-left",style:Object.assign(Object.assign({},e),{left:"0",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"})},t),r=s("div",{part:"region-handle region-handle-right",style:Object.assign(Object.assign({},e),{right:"0",borderRight:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"})},t);this.subscriptions.push(i(n,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing("start")),1),i(r,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing("end")),1))}removeResizeHandles(t){const e=t.querySelector('[part*="region-handle-left"]'),i=t.querySelector('[part*="region-handle-right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){if(this.isRemoved)return null;const t=this.start===this.end;let e=0,i=100;this.channelIdx>=0&&this.numberOfChannels>0&&this.channelIdx<this.numberOfChannels&&(i=100/this.numberOfChannels,e=i*this.channelIdx);const n=s("div",{style:{position:"absolute",top:`${e}%`,height:`${i}%`,backgroundColor:t?"none":this.color,borderLeft:t?"2px solid "+this.color:"none",borderRadius:"2px",boxSizing:"border-box",transition:"background-color 0.2s ease",cursor:this.drag?"grab":"default",pointerEvents:"all"}});return!t&&this.resize&&this.addResizeHandles(n),n}renderPosition(){if(!this.element)return;const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){var e;this.drag&&(null===(e=this.element)||void 0===e?void 0:e.style)&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),this.subscriptions.push(i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")}))),this.contentEditable&&this.content&&(this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)))}_onUpdate(t,e,i){var n;if(!(null===(n=this.element)||void 0===n?void 0:n.parentElement))return;const{width:s}=this.element.parentElement.getBoundingClientRect(),r=t/s*this.totalDuration;let o=e&&"start"!==e?this.start:this.start+r,h=e&&"end"!==e?this.end:this.end+r;const a=void 0!==i;a&&this.updatingSide&&this.updatingSide!==e&&("start"===this.updatingSide?o=i:h=i),o=Math.max(0,o),h=Math.min(this.totalDuration,h);const l=h-o;this.updatingSide=e;const d=l>=this.minLength&&l<=this.maxLength;o<=h&&(d||a)&&(this.start=o,this.end=h,this.renderPosition(),this.emit("update",e))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&(this.resizeStart||"start"!==e)&&(this.resizeEnd||"end"!==e)&&this._onUpdate(t,e)}onEndResizing(t){this.resize&&(this.emit("update-end",t),this.updatingSide=void 0)}onContentClick(t){t.stopPropagation();t.target.focus(),this.emit("click",t)}onContentBlur(){this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(t){this.emit("play",t&&this.end!==this.start?this.end:void 0)}getContent(t=!1){var e;return t?this.content||void 0:this.element instanceof HTMLElement?(null===(e=this.content)||void 0===e?void 0:e.innerHTML)||void 0:""}setContent(t){var e;if(this.element)if(this.content&&this.contentEditable&&(this.contentClickListener&&this.content.removeEventListener("click",this.contentClickListener),this.contentBlurListener&&this.content.removeEventListener("blur",this.contentBlurListener)),null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){const e=this.start===this.end;this.content=s("div",{style:{padding:`0.2em ${e?.2:.4}em`,display:"inline-block"},textContent:t})}else this.content=t;this.contentEditable&&(this.content.contentEditable="true",this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)),this.content.setAttribute("part","region-content"),this.element.appendChild(this.content),this.emit("content-changed")}else this.content=void 0}setOptions(t){var e,i;if(this.element){if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}void 0!==t.resizeStart&&(this.resizeStart=t.resizeStart),void 0!==t.resizeEnd&&(this.resizeEnd=t.resizeEnd)}}remove(){this.isRemoved=!0,this.emit("remove"),this.subscriptions.forEach((t=>t())),this.element&&(this.element.remove(),this.element=null)}}class o extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new o(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer),this.subscriptions.push(this.wavesurfer.on("ready",(t=>{this.regions.forEach((e=>e._setTotalDuration(t)))})));let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){return s("div",{part:"regions-container",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"5",pointerEvents:"none"}})}getRegions(){return this.regions}avoidOverlapping(t){t.content&&setTimeout((()=>{const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}),10)}adjustScroll(t){var e,i;if(!t.element)return;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),h=t.element.getBoundingClientRect(),a=h.left-o.left,l=h.right-o.left;a<0?n.scrollLeft+=a:l>s&&(n.scrollLeft+=l-s)}virtualAppend(t,e,i){const n=()=>{if(!this.wavesurfer)return;const n=this.wavesurfer.getWidth(),s=this.wavesurfer.getScroll(),r=e.clientWidth,o=this.wavesurfer.getDuration(),h=Math.round(t.start/o*r),a=h+(Math.round((t.end-t.start)/o*r)||1)>s&&h<s+n;a&&!i.parentElement?e.appendChild(i):!a&&i.parentElement&&i.remove()};setTimeout((()=>{if(!this.wavesurfer||!t.element)return;n();const e=this.wavesurfer.on("scroll",n),i=this.wavesurfer.on("zoom",n);this.subscriptions.push(e,i),t.once("remove",(()=>{e(),i()}))}),0)}saveRegion(t){if(!t.element)return;this.virtualAppend(t,this.regionsContainer,t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(e=>{e||this.adjustScroll(t),this.emit("region-update",t,e)})),t.on("update-end",(e=>{this.avoidOverlapping(t),this.emit("region-updated",t,e)})),t.on("play",(e=>{var i;null===(i=this.wavesurfer)||void 0===i||i.play(t.start,e)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.on("content-changed",(()=>{this.emit("region-content-changed",t)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const n=this.wavesurfer.getDuration(),s=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new r(t,n,s);return this.emit("region-initialized",o),n?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o)}))),o}enableDragSelection(t,e=3){var n;const s=null===(n=this.wavesurfer)||void 0===n?void 0:n.getWrapper();if(!(s&&s instanceof HTMLElement))return()=>{};let o=null,h=0,a=0;return i(s,((t,e,i)=>{o&&o._onUpdate(t,i>h?"end":"start",a)}),(e=>{var i,n;if(h=e,!this.wavesurfer)return;const s=this.wavesurfer.getDuration(),l=null===(n=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===n?void 0:n.numberOfChannels,{width:d}=this.wavesurfer.getWrapper().getBoundingClientRect();a=h/d*s;const c=e/d*s,u=(e+5)/d*s;o=new r(Object.assign(Object.assign({},t),{start:c,end:u}),s,l),this.emit("region-initialized",o),o.element&&this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o.updatingSide=void 0,o=null)}),e)}clearRegions(){this.regions.slice().forEach((t=>t.remove())),this.regions=[]}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}return o}));
+!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.Regions=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=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e,i,n,s=3,r=0,o=100){if(!t)return()=>{};const h=new Map,a=matchMedia("(pointer: coarse)").matches;let l=()=>{};const d=d=>{if(d.button!==r)return;if(h.set(d.pointerId,d),h.size>1)return;let c=d.clientX,u=d.clientY,v=!1;const p=Date.now(),g=n=>{if(n.defaultPrevented||h.size>1)return;if(a&&Date.now()-p<o)return;const r=n.clientX,l=n.clientY,d=r-c,g=l-u;if(v||Math.abs(d)>s||Math.abs(g)>s){n.preventDefault(),n.stopPropagation();const s=t.getBoundingClientRect(),{left:o,top:h}=s;v||(null==i||i(c-o,u-h),v=!0),e(d,g,r-o,l-h),c=r,u=l}},m=e=>{if(h.delete(e.pointerId),v){const i=e.clientX,s=e.clientY,r=t.getBoundingClientRect(),{left:o,top:h}=r;null==n||n(i-o,s-h)}l()},f=t=>{h.delete(t.pointerId),t.relatedTarget&&t.relatedTarget!==document.documentElement||m(t)},b=t=>{v&&(t.stopPropagation(),t.preventDefault())},E=t=>{t.defaultPrevented||h.size>1||v&&t.preventDefault()};document.addEventListener("pointermove",g),document.addEventListener("pointerup",m),document.addEventListener("pointerout",f),document.addEventListener("pointercancel",f),document.addEventListener("touchmove",E,{passive:!1}),document.addEventListener("click",b,{capture:!0}),l=()=>{document.removeEventListener("pointermove",g),document.removeEventListener("pointerup",m),document.removeEventListener("pointerout",f),document.removeEventListener("pointercancel",f),document.removeEventListener("touchmove",E),setTimeout((()=>{document.removeEventListener("click",b,{capture:!0})}),10)}};return t.addEventListener("pointerdown",d),()=>{l(),t.removeEventListener("pointerdown",d),h.clear()}}function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}class r extends t{constructor(t,e,i=0){var n,s,r,o,h,a,l,d,c,u;super(),this.totalDuration=e,this.numberOfChannels=i,this.element=null,this.minLength=0,this.maxLength=1/0,this.contentEditable=!1,this.subscriptions=[],this.updatingSide=void 0,this.isRemoved=!1,this.subscriptions=[],this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.resizeStart=null===(o=t.resizeStart)||void 0===o||o,this.resizeEnd=null===(h=t.resizeEnd)||void 0===h||h,this.color=null!==(a=t.color)&&void 0!==a?a:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(l=t.minLength)&&void 0!==l?l:this.minLength,this.maxLength=null!==(d=t.maxLength)&&void 0!==d?d:this.maxLength,this.channelIdx=null!==(c=t.channelIdx)&&void 0!==c?c:-1,this.contentEditable=null!==(u=t.contentEditable)&&void 0!==u?u:this.contentEditable,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){var t;const e=this.start===this.end;null===(t=this.element)||void 0===t||t.setAttribute("part",`${e?"marker":"region"} ${this.id}`)}addResizeHandles(t){const e={position:"absolute",zIndex:"2",width:"6px",height:"100%",top:"0",cursor:"ew-resize",wordBreak:"keep-all"},n=s("div",{part:"region-handle region-handle-left",style:Object.assign(Object.assign({},e),{left:"0",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"})},t),r=s("div",{part:"region-handle region-handle-right",style:Object.assign(Object.assign({},e),{right:"0",borderRight:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"})},t);this.subscriptions.push(i(n,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing("start")),1),i(r,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing("end")),1))}removeResizeHandles(t){const e=t.querySelector('[part*="region-handle-left"]'),i=t.querySelector('[part*="region-handle-right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){if(this.isRemoved)return null;const t=this.start===this.end;let e=0,i=100;this.channelIdx>=0&&this.numberOfChannels>0&&this.channelIdx<this.numberOfChannels&&(i=100/this.numberOfChannels,e=i*this.channelIdx);const n=s("div",{style:{position:"absolute",top:`${e}%`,height:`${i}%`,backgroundColor:t?"none":this.color,borderLeft:t?"2px solid "+this.color:"none",borderRadius:"2px",boxSizing:"border-box",transition:"background-color 0.2s ease",cursor:this.drag?"grab":"default",pointerEvents:"all"}});return!t&&this.resize&&this.addResizeHandles(n),n}renderPosition(){if(!this.element)return;const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){var e;this.drag&&(null===(e=this.element)||void 0===e?void 0:e.style)&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),this.subscriptions.push(i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")}))),this.contentEditable&&this.content&&(this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)))}_onUpdate(t,e,i){var n;if(!(null===(n=this.element)||void 0===n?void 0:n.parentElement))return;const{width:s}=this.element.parentElement.getBoundingClientRect(),r=t/s*this.totalDuration;let o=e&&"start"!==e?this.start:this.start+r,h=e&&"end"!==e?this.end:this.end+r;const a=void 0!==i;a&&this.updatingSide&&this.updatingSide!==e&&("start"===this.updatingSide?o=i:h=i),o=Math.max(0,o),h=Math.min(this.totalDuration,h);const l=h-o;this.updatingSide=e;const d=l>=this.minLength&&l<=this.maxLength;o<=h&&(d||a)&&(this.start=o,this.end=h,this.renderPosition(),this.emit("update",e))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&(this.resizeStart||"start"!==e)&&(this.resizeEnd||"end"!==e)&&this._onUpdate(t,e)}onEndResizing(t){this.resize&&(this.emit("update-end",t),this.updatingSide=void 0)}onContentClick(t){t.stopPropagation();t.target.focus(),this.emit("click",t)}onContentBlur(){this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(t){this.emit("play",t&&this.end!==this.start?this.end:void 0)}getContent(t=!1){var e;return t?this.content||void 0:this.element instanceof HTMLElement?(null===(e=this.content)||void 0===e?void 0:e.innerHTML)||void 0:""}setContent(t){var e;if(this.element)if(this.content&&this.contentEditable&&(this.contentClickListener&&this.content.removeEventListener("click",this.contentClickListener),this.contentBlurListener&&this.content.removeEventListener("blur",this.contentBlurListener)),null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){const e=this.start===this.end;this.content=s("div",{style:{padding:`0.2em ${e?.2:.4}em`,display:"inline-block"},textContent:t})}else this.content=t;this.contentEditable&&(this.content.contentEditable="true",this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)),this.content.setAttribute("part","region-content"),this.element.appendChild(this.content),this.emit("content-changed")}else this.content=void 0}setOptions(t){var e,i;if(this.element){if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}void 0!==t.resizeStart&&(this.resizeStart=t.resizeStart),void 0!==t.resizeEnd&&(this.resizeEnd=t.resizeEnd)}}remove(){this.isRemoved=!0,this.emit("remove"),this.subscriptions.forEach((t=>t())),this.element&&(this.element.remove(),this.element=null)}}class o extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new o(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer),this.subscriptions.push(this.wavesurfer.on("ready",(t=>{this.regions.forEach((e=>e._setTotalDuration(t)))})));let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){return s("div",{part:"regions-container",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"5",pointerEvents:"none"}})}getRegions(){return this.regions}avoidOverlapping(t){t.content&&setTimeout((()=>{const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}),10)}adjustScroll(t){var e,i;if(!t.element)return;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),h=t.element.getBoundingClientRect(),a=h.left-o.left,l=h.right-o.left;a<0?n.scrollLeft+=a:l>s&&(n.scrollLeft+=l-s)}virtualAppend(t,e,i){const n=()=>{if(!this.wavesurfer)return;const n=this.wavesurfer.getWidth(),s=this.wavesurfer.getScroll(),r=e.clientWidth,o=this.wavesurfer.getDuration(),h=Math.round(t.start/o*r),a=h+(Math.round((t.end-t.start)/o*r)||1)>s&&h<s+n;a&&!i.parentElement?e.appendChild(i):!a&&i.parentElement&&i.remove()};setTimeout((()=>{if(!this.wavesurfer||!t.element)return;n();const e=this.wavesurfer.on("scroll",n),i=this.wavesurfer.on("zoom",n),s=this.wavesurfer.on("resize",n);this.subscriptions.push(e,i,s),t.once("remove",(()=>{e(),i(),s()}))}),0)}saveRegion(t){if(!t.element)return;this.virtualAppend(t,this.regionsContainer,t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(e=>{e||this.adjustScroll(t),this.emit("region-update",t,e)})),t.on("update-end",(e=>{this.avoidOverlapping(t),this.emit("region-updated",t,e)})),t.on("play",(e=>{var i;null===(i=this.wavesurfer)||void 0===i||i.play(t.start,e)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.on("content-changed",(()=>{this.emit("region-content-changed",t)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const n=this.wavesurfer.getDuration(),s=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new r(t,n,s);return this.emit("region-initialized",o),n?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o)}))),o}enableDragSelection(t,e=3){var n;const s=null===(n=this.wavesurfer)||void 0===n?void 0:n.getWrapper();if(!(s&&s instanceof HTMLElement))return()=>{};let o=null,h=0,a=0;return i(s,((t,e,i)=>{o&&o._onUpdate(t,i>h?"end":"start",a)}),(e=>{var i,n;if(h=e,!this.wavesurfer)return;const s=this.wavesurfer.getDuration(),l=null===(n=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===n?void 0:n.numberOfChannels,{width:d}=this.wavesurfer.getWrapper().getBoundingClientRect();a=h/d*s;const c=e/d*s,u=(e+5)/d*s;o=new r(Object.assign(Object.assign({},t),{start:c,end:u}),s,l),this.emit("region-initialized",o),o.element&&this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o.updatingSide=void 0,o=null)}),e)}clearRegions(){this.regions.slice().forEach((t=>t.remove())),this.regions=[]}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}return o}));

package/dist/plugins/zoom.cjs

@@ -1 +1 @@
-"use strict";class t{constructor(){this.listeners={}}on(t,s,e){if(this.listeners[t]||(this.listeners[t]=new Set),null==e?void 0:e.once){const e=(...i)=>{this.un(t,e),s(...i)};return this.listeners[t].add(e),()=>this.un(t,e)}return this.listeners[t].add(s),()=>this.un(t,s)}un(t,s){var e;null===(e=this.listeners[t])||void 0===e||e.delete(s)}once(t,s){return this.on(t,s,{once:!0})}unAll(){this.listeners={}}emit(t,...s){this.listeners[t]&&this.listeners[t].forEach((t=>t(...s)))}}class s 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}}const e={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class i extends s{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const s=this.wavesurfer.getDuration(),e=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/s:this.wavesurfer.options.minPxPerSec,i=t.clientX-this.container.getBoundingClientRect().left,o=this.container.clientWidth,n=this.wavesurfer.getScroll();i===this.oldX&&0!==this.oldX||(this.pointerTime=(n+i)/e),this.oldX=i;const r=this.calculateNewZoom(e,this.accumulatedDelta),h=o/r*(i/o);r*s<o?(this.wavesurfer.zoom(o/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(r),this.container.scrollLeft=(this.pointerTime-h)*r),this.accumulatedDelta=0}},this.calculateNewZoom=(t,s)=>{let e;if(this.options.exponentialZooming){const i=s>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));e=Math.max(0,t*i)}else e=Math.max(0,t+s*this.options.scale);return Math.min(e,this.options.maxZoom)},this.options=Object.assign({},e,t)}static create(t){return new i(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}destroy(){this.container&&this.container.removeEventListener("wheel",this.onWheel),super.destroy()}}module.exports=i;
+"use strict";class t{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),null==e?void 0:e.once){const e=(...s)=>{this.un(t,e),i(...s)};return this.listeners[t].add(e),()=>this.un(t,e)}return this.listeners[t].add(i),()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class i 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}}const e={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class s extends i{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const i=this.wavesurfer.getDuration(),e=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec,s=t.clientX-this.container.getBoundingClientRect().left,n=this.container.clientWidth,o=this.wavesurfer.getScroll();s===this.oldX&&0!==this.oldX||(this.pointerTime=(o+s)/e),this.oldX=s;const h=this.calculateNewZoom(e,this.accumulatedDelta),r=n/h*(s/n);h*i<n?(this.wavesurfer.zoom(n/i),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(this.pointerTime-r)*h),this.accumulatedDelta=0}},this.calculateNewZoom=(t,i)=>{let e;if(this.options.exponentialZooming){const s=i>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));e=Math.max(0,t*s)}else e=Math.max(0,t+i*this.options.scale);return Math.min(e,this.options.maxZoom)},this.onTouchStart=t=>{if(this.wavesurfer&&this.container&&2===t.touches.length){t.preventDefault(),this.isPinching=!0,this.initialPinchDistance=this.getTouchDistance(t);const i=this.wavesurfer.getDuration();this.initialZoom=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec;const e=this.getTouchCenterX(t)-this.container.getBoundingClientRect().left,s=this.wavesurfer.getScroll();this.pointerTime=(s+e)/this.initialZoom,this.oldX=e}},this.onTouchMove=t=>{if(!this.isPinching||2!==t.touches.length||!this.wavesurfer||!this.container)return;t.preventDefault();const i=this.getTouchDistance(t)/this.initialPinchDistance;let e=this.initialZoom*i;e=Math.min(e,this.options.maxZoom);const s=this.wavesurfer.getDuration(),n=this.container.clientWidth,o=n/s;e<o&&(e=o);const h=n/e*(this.oldX/n);e===o?(this.wavesurfer.zoom(o),this.container.scrollLeft=0):(this.wavesurfer.zoom(e),this.container.scrollLeft=(this.pointerTime-h)*e)},this.onTouchEnd=t=>{this.isPinching&&t.touches.length<2&&(this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0)},this.options=Object.assign({},e,t)}static create(t){return new s(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),this.container.addEventListener("touchstart",this.onTouchStart,{passive:!1,capture:!0}),this.container.addEventListener("touchmove",this.onTouchMove,{passive:!1,capture:!0}),this.container.addEventListener("touchend",this.onTouchEnd,{passive:!1,capture:!0}),this.container.addEventListener("touchcancel",this.onTouchEnd,{passive:!1,capture:!0}),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}getTouchDistance(t){const i=t.touches[0],e=t.touches[1];return Math.sqrt(Math.pow(e.clientX-i.clientX,2)+Math.pow(e.clientY-i.clientY,2))}getTouchCenterX(t){const i=t.touches[0],e=t.touches[1];return(i.clientX+e.clientX)/2}destroy(){this.container&&(this.container.removeEventListener("wheel",this.onWheel),this.container.removeEventListener("touchstart",this.onTouchStart),this.container.removeEventListener("touchmove",this.onTouchMove),this.container.removeEventListener("touchend",this.onTouchEnd),this.container.removeEventListener("touchcancel",this.onTouchEnd)),super.destroy()}}module.exports=s;

package/dist/plugins/zoom.d.ts

@@ -6,7 +6,8 @@
  * @author HoodyHuo (https://github.com/HoodyHuo)
  * @author Chris Morbitzer (https://github.com/cmorbitzer)
  * @author Sam Hulick (https://github.com/ffxsam)
- * @autor Gustav Sollenius (https://github.com/gustavsollenius)
+ * @author Gustav Sollenius (https://github.com/gustavsollenius)
+ * @author Viktor Jevdokimov (https://github.com/vitar)
  *
  * @example
  * // ... initialising wavesurfer with the plugin
@@ -66,11 +67,19 @@ declare class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions>
     private oldX;
     private endZoom;
     private startZoom;
+    private isPinching;
+    private initialPinchDistance;
+    private initialZoom;
     constructor(options?: ZoomPluginOptions);
     static create(options?: ZoomPluginOptions): ZoomPlugin;
     onInit(): void;
     private onWheel;
     private calculateNewZoom;
+    private getTouchDistance;
+    private getTouchCenterX;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
     destroy(): void;
 }
 export default ZoomPlugin;

package/dist/plugins/zoom.esm.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,s,e){if(this.listeners[t]||(this.listeners[t]=new Set),null==e?void 0:e.once){const e=(...i)=>{this.un(t,e),s(...i)};return this.listeners[t].add(e),()=>this.un(t,e)}return this.listeners[t].add(s),()=>this.un(t,s)}un(t,s){var e;null===(e=this.listeners[t])||void 0===e||e.delete(s)}once(t,s){return this.on(t,s,{once:!0})}unAll(){this.listeners={}}emit(t,...s){this.listeners[t]&&this.listeners[t].forEach((t=>t(...s)))}}class s 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}}const e={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class i extends s{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const s=this.wavesurfer.getDuration(),e=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/s:this.wavesurfer.options.minPxPerSec,i=t.clientX-this.container.getBoundingClientRect().left,o=this.container.clientWidth,n=this.wavesurfer.getScroll();i===this.oldX&&0!==this.oldX||(this.pointerTime=(n+i)/e),this.oldX=i;const r=this.calculateNewZoom(e,this.accumulatedDelta),h=o/r*(i/o);r*s<o?(this.wavesurfer.zoom(o/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(r),this.container.scrollLeft=(this.pointerTime-h)*r),this.accumulatedDelta=0}},this.calculateNewZoom=(t,s)=>{let e;if(this.options.exponentialZooming){const i=s>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));e=Math.max(0,t*i)}else e=Math.max(0,t+s*this.options.scale);return Math.min(e,this.options.maxZoom)},this.options=Object.assign({},e,t)}static create(t){return new i(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}destroy(){this.container&&this.container.removeEventListener("wheel",this.onWheel),super.destroy()}}export{i as default};
+class t{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),null==e?void 0:e.once){const e=(...s)=>{this.un(t,e),i(...s)};return this.listeners[t].add(e),()=>this.un(t,e)}return this.listeners[t].add(i),()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class i 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}}const e={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class s extends i{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const i=this.wavesurfer.getDuration(),e=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec,s=t.clientX-this.container.getBoundingClientRect().left,n=this.container.clientWidth,o=this.wavesurfer.getScroll();s===this.oldX&&0!==this.oldX||(this.pointerTime=(o+s)/e),this.oldX=s;const h=this.calculateNewZoom(e,this.accumulatedDelta),r=n/h*(s/n);h*i<n?(this.wavesurfer.zoom(n/i),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(this.pointerTime-r)*h),this.accumulatedDelta=0}},this.calculateNewZoom=(t,i)=>{let e;if(this.options.exponentialZooming){const s=i>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));e=Math.max(0,t*s)}else e=Math.max(0,t+i*this.options.scale);return Math.min(e,this.options.maxZoom)},this.onTouchStart=t=>{if(this.wavesurfer&&this.container&&2===t.touches.length){t.preventDefault(),this.isPinching=!0,this.initialPinchDistance=this.getTouchDistance(t);const i=this.wavesurfer.getDuration();this.initialZoom=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec;const e=this.getTouchCenterX(t)-this.container.getBoundingClientRect().left,s=this.wavesurfer.getScroll();this.pointerTime=(s+e)/this.initialZoom,this.oldX=e}},this.onTouchMove=t=>{if(!this.isPinching||2!==t.touches.length||!this.wavesurfer||!this.container)return;t.preventDefault();const i=this.getTouchDistance(t)/this.initialPinchDistance;let e=this.initialZoom*i;e=Math.min(e,this.options.maxZoom);const s=this.wavesurfer.getDuration(),n=this.container.clientWidth,o=n/s;e<o&&(e=o);const h=n/e*(this.oldX/n);e===o?(this.wavesurfer.zoom(o),this.container.scrollLeft=0):(this.wavesurfer.zoom(e),this.container.scrollLeft=(this.pointerTime-h)*e)},this.onTouchEnd=t=>{this.isPinching&&t.touches.length<2&&(this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0)},this.options=Object.assign({},e,t)}static create(t){return new s(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),this.container.addEventListener("touchstart",this.onTouchStart,{passive:!1,capture:!0}),this.container.addEventListener("touchmove",this.onTouchMove,{passive:!1,capture:!0}),this.container.addEventListener("touchend",this.onTouchEnd,{passive:!1,capture:!0}),this.container.addEventListener("touchcancel",this.onTouchEnd,{passive:!1,capture:!0}),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}getTouchDistance(t){const i=t.touches[0],e=t.touches[1];return Math.sqrt(Math.pow(e.clientX-i.clientX,2)+Math.pow(e.clientY-i.clientY,2))}getTouchCenterX(t){const i=t.touches[0],e=t.touches[1];return(i.clientX+e.clientX)/2}destroy(){this.container&&(this.container.removeEventListener("wheel",this.onWheel),this.container.removeEventListener("touchstart",this.onTouchStart),this.container.removeEventListener("touchmove",this.onTouchMove),this.container.removeEventListener("touchend",this.onTouchEnd),this.container.removeEventListener("touchcancel",this.onTouchEnd)),super.destroy()}}export{s as default};

package/dist/plugins/zoom.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,s,e){if(this.listeners[t]||(this.listeners[t]=new Set),null==e?void 0:e.once){const e=(...i)=>{this.un(t,e),s(...i)};return this.listeners[t].add(e),()=>this.un(t,e)}return this.listeners[t].add(s),()=>this.un(t,s)}un(t,s){var e;null===(e=this.listeners[t])||void 0===e||e.delete(s)}once(t,s){return this.on(t,s,{once:!0})}unAll(){this.listeners={}}emit(t,...s){this.listeners[t]&&this.listeners[t].forEach((t=>t(...s)))}}class s 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}}const e={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class i extends s{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const s=this.wavesurfer.getDuration(),e=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/s:this.wavesurfer.options.minPxPerSec,i=t.clientX-this.container.getBoundingClientRect().left,o=this.container.clientWidth,n=this.wavesurfer.getScroll();i===this.oldX&&0!==this.oldX||(this.pointerTime=(n+i)/e),this.oldX=i;const r=this.calculateNewZoom(e,this.accumulatedDelta),h=o/r*(i/o);r*s<o?(this.wavesurfer.zoom(o/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(r),this.container.scrollLeft=(this.pointerTime-h)*r),this.accumulatedDelta=0}},this.calculateNewZoom=(t,s)=>{let e;if(this.options.exponentialZooming){const i=s>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));e=Math.max(0,t*i)}else e=Math.max(0,t+s*this.options.scale);return Math.min(e,this.options.maxZoom)},this.options=Object.assign({},e,t)}static create(t){return new i(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}destroy(){this.container&&this.container.removeEventListener("wheel",this.onWheel),super.destroy()}}export{i as default};
+class t{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),null==e?void 0:e.once){const e=(...s)=>{this.un(t,e),i(...s)};return this.listeners[t].add(e),()=>this.un(t,e)}return this.listeners[t].add(i),()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class i 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}}const e={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class s extends i{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const i=this.wavesurfer.getDuration(),e=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec,s=t.clientX-this.container.getBoundingClientRect().left,n=this.container.clientWidth,o=this.wavesurfer.getScroll();s===this.oldX&&0!==this.oldX||(this.pointerTime=(o+s)/e),this.oldX=s;const h=this.calculateNewZoom(e,this.accumulatedDelta),r=n/h*(s/n);h*i<n?(this.wavesurfer.zoom(n/i),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(this.pointerTime-r)*h),this.accumulatedDelta=0}},this.calculateNewZoom=(t,i)=>{let e;if(this.options.exponentialZooming){const s=i>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));e=Math.max(0,t*s)}else e=Math.max(0,t+i*this.options.scale);return Math.min(e,this.options.maxZoom)},this.onTouchStart=t=>{if(this.wavesurfer&&this.container&&2===t.touches.length){t.preventDefault(),this.isPinching=!0,this.initialPinchDistance=this.getTouchDistance(t);const i=this.wavesurfer.getDuration();this.initialZoom=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec;const e=this.getTouchCenterX(t)-this.container.getBoundingClientRect().left,s=this.wavesurfer.getScroll();this.pointerTime=(s+e)/this.initialZoom,this.oldX=e}},this.onTouchMove=t=>{if(!this.isPinching||2!==t.touches.length||!this.wavesurfer||!this.container)return;t.preventDefault();const i=this.getTouchDistance(t)/this.initialPinchDistance;let e=this.initialZoom*i;e=Math.min(e,this.options.maxZoom);const s=this.wavesurfer.getDuration(),n=this.container.clientWidth,o=n/s;e<o&&(e=o);const h=n/e*(this.oldX/n);e===o?(this.wavesurfer.zoom(o),this.container.scrollLeft=0):(this.wavesurfer.zoom(e),this.container.scrollLeft=(this.pointerTime-h)*e)},this.onTouchEnd=t=>{this.isPinching&&t.touches.length<2&&(this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0)},this.options=Object.assign({},e,t)}static create(t){return new s(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),this.container.addEventListener("touchstart",this.onTouchStart,{passive:!1,capture:!0}),this.container.addEventListener("touchmove",this.onTouchMove,{passive:!1,capture:!0}),this.container.addEventListener("touchend",this.onTouchEnd,{passive:!1,capture:!0}),this.container.addEventListener("touchcancel",this.onTouchEnd,{passive:!1,capture:!0}),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}getTouchDistance(t){const i=t.touches[0],e=t.touches[1];return Math.sqrt(Math.pow(e.clientX-i.clientX,2)+Math.pow(e.clientY-i.clientY,2))}getTouchCenterX(t){const i=t.touches[0],e=t.touches[1];return(i.clientX+e.clientX)/2}destroy(){this.container&&(this.container.removeEventListener("wheel",this.onWheel),this.container.removeEventListener("touchstart",this.onTouchStart),this.container.removeEventListener("touchmove",this.onTouchMove),this.container.removeEventListener("touchend",this.onTouchEnd),this.container.removeEventListener("touchcancel",this.onTouchEnd)),super.destroy()}}export{s as default};

package/dist/plugins/zoom.min.js

@@ -1 +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.Zoom=e())}(this,(function(){"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}}const s={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class i extends e{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const e=this.wavesurfer.getDuration(),s=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/e:this.wavesurfer.options.minPxPerSec,i=t.clientX-this.container.getBoundingClientRect().left,o=this.container.clientWidth,n=this.wavesurfer.getScroll();i===this.oldX&&0!==this.oldX||(this.pointerTime=(n+i)/s),this.oldX=i;const r=this.calculateNewZoom(s,this.accumulatedDelta),h=o/r*(i/o);r*e<o?(this.wavesurfer.zoom(o/e),this.container.scrollLeft=0):(this.wavesurfer.zoom(r),this.container.scrollLeft=(this.pointerTime-h)*r),this.accumulatedDelta=0}},this.calculateNewZoom=(t,e)=>{let s;if(this.options.exponentialZooming){const i=e>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));s=Math.max(0,t*i)}else s=Math.max(0,t+e*this.options.scale);return Math.min(s,this.options.maxZoom)},this.options=Object.assign({},s,t)}static create(t){return new i(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}destroy(){this.container&&this.container.removeEventListener("wheel",this.onWheel),super.destroy()}}return i}));
+!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.Zoom=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}}const i={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class s extends e{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const e=this.wavesurfer.getDuration(),i=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/e:this.wavesurfer.options.minPxPerSec,s=t.clientX-this.container.getBoundingClientRect().left,n=this.container.clientWidth,o=this.wavesurfer.getScroll();s===this.oldX&&0!==this.oldX||(this.pointerTime=(o+s)/i),this.oldX=s;const h=this.calculateNewZoom(i,this.accumulatedDelta),r=n/h*(s/n);h*e<n?(this.wavesurfer.zoom(n/e),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(this.pointerTime-r)*h),this.accumulatedDelta=0}},this.calculateNewZoom=(t,e)=>{let i;if(this.options.exponentialZooming){const s=e>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));i=Math.max(0,t*s)}else i=Math.max(0,t+e*this.options.scale);return Math.min(i,this.options.maxZoom)},this.onTouchStart=t=>{if(this.wavesurfer&&this.container&&2===t.touches.length){t.preventDefault(),this.isPinching=!0,this.initialPinchDistance=this.getTouchDistance(t);const e=this.wavesurfer.getDuration();this.initialZoom=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/e:this.wavesurfer.options.minPxPerSec;const i=this.getTouchCenterX(t)-this.container.getBoundingClientRect().left,s=this.wavesurfer.getScroll();this.pointerTime=(s+i)/this.initialZoom,this.oldX=i}},this.onTouchMove=t=>{if(!this.isPinching||2!==t.touches.length||!this.wavesurfer||!this.container)return;t.preventDefault();const e=this.getTouchDistance(t)/this.initialPinchDistance;let i=this.initialZoom*e;i=Math.min(i,this.options.maxZoom);const s=this.wavesurfer.getDuration(),n=this.container.clientWidth,o=n/s;i<o&&(i=o);const h=n/i*(this.oldX/n);i===o?(this.wavesurfer.zoom(o),this.container.scrollLeft=0):(this.wavesurfer.zoom(i),this.container.scrollLeft=(this.pointerTime-h)*i)},this.onTouchEnd=t=>{this.isPinching&&t.touches.length<2&&(this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0)},this.options=Object.assign({},i,t)}static create(t){return new s(t)}onInit(){var t;this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.container.addEventListener("wheel",this.onWheel),this.container.addEventListener("touchstart",this.onTouchStart,{passive:!1,capture:!0}),this.container.addEventListener("touchmove",this.onTouchMove,{passive:!1,capture:!0}),this.container.addEventListener("touchend",this.onTouchEnd,{passive:!1,capture:!0}),this.container.addEventListener("touchcancel",this.onTouchEnd,{passive:!1,capture:!0}),void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom)}getTouchDistance(t){const e=t.touches[0],i=t.touches[1];return Math.sqrt(Math.pow(i.clientX-e.clientX,2)+Math.pow(i.clientY-e.clientY,2))}getTouchCenterX(t){const e=t.touches[0],i=t.touches[1];return(e.clientX+i.clientX)/2}destroy(){this.container&&(this.container.removeEventListener("wheel",this.onWheel),this.container.removeEventListener("touchstart",this.onTouchStart),this.container.removeEventListener("touchmove",this.onTouchMove),this.container.removeEventListener("touchend",this.onTouchEnd),this.container.removeEventListener("touchcancel",this.onTouchEnd)),super.destroy()}}return s}));

package/dist/renderer-utils.d.ts

@@ -0,0 +1,117 @@
+import type { WaveSurferOptions } from './wavesurfer.js';
+export type ChannelData = Array<Float32Array | number[]>;
+export type BarSegment = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type LinePath = Array<{
+    x: number;
+    y: number;
+}>;
+export declare const DEFAULT_HEIGHT = 128;
+export declare const MAX_CANVAS_WIDTH = 8000;
+export declare const MAX_NODES = 10;
+export declare function clampToUnit(value: number): number;
+export declare function calculateBarRenderConfig({ width, height, length, options, pixelRatio, }: {
+    width: number;
+    height: number;
+    length: number;
+    options: WaveSurferOptions;
+    pixelRatio: number;
+}): {
+    halfHeight: number;
+    barWidth: number;
+    barGap: number;
+    barRadius: number;
+    barIndexScale: number;
+    barSpacing: number;
+};
+export declare function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, }: {
+    maxTop: number;
+    maxBottom: number;
+    halfHeight: number;
+    vScale: number;
+}): {
+    topHeight: number;
+    totalHeight: number;
+};
+export declare function resolveBarYPosition({ barAlign, halfHeight, topHeight, totalHeight, canvasHeight, }: {
+    barAlign: WaveSurferOptions['barAlign'];
+    halfHeight: number;
+    topHeight: number;
+    totalHeight: number;
+    canvasHeight: number;
+}): number;
+export declare function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, }: {
+    channelData: ChannelData;
+    barIndexScale: number;
+    barSpacing: number;
+    barWidth: number;
+    halfHeight: number;
+    vScale: number;
+    canvasHeight: number;
+    barAlign: WaveSurferOptions['barAlign'];
+}): BarSegment[];
+export declare function getRelativePointerPosition(rect: DOMRect, clientX: number, clientY: number): [number, number];
+export declare function resolveChannelHeight({ optionsHeight, optionsSplitChannels, parentHeight, numberOfChannels, defaultHeight, }: {
+    optionsHeight?: WaveSurferOptions['height'];
+    optionsSplitChannels?: WaveSurferOptions['splitChannels'];
+    parentHeight: number;
+    numberOfChannels: number;
+    defaultHeight?: number;
+}): number;
+export declare function getPixelRatio(devicePixelRatio?: number): number;
+export declare function shouldRenderBars(options: WaveSurferOptions): boolean;
+export declare function resolveColorValue(color: WaveSurferOptions['waveColor'], devicePixelRatio: number): string | CanvasGradient;
+export declare function calculateWaveformLayout({ duration, minPxPerSec, parentWidth, fillParent, pixelRatio, }: {
+    duration: number;
+    minPxPerSec?: number;
+    parentWidth: number;
+    fillParent?: boolean;
+    pixelRatio: number;
+}): {
+    scrollWidth: number;
+    isScrollable: boolean;
+    useParentWidth: boolean;
+    width: number;
+};
+export declare function clampWidthToBarGrid(width: number, options: WaveSurferOptions): number;
+export declare function calculateSingleCanvasWidth({ clientWidth, totalWidth, options, }: {
+    clientWidth: number;
+    totalWidth: number;
+    options: WaveSurferOptions;
+}): number;
+export declare function sliceChannelData({ channelData, offset, clampedWidth, totalWidth, }: {
+    channelData: ChannelData;
+    offset: number;
+    clampedWidth: number;
+    totalWidth: number;
+}): ChannelData;
+export declare function shouldClearCanvases(currentNodeCount: number): boolean;
+export declare function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases, }: {
+    scrollLeft: number;
+    totalWidth: number;
+    numCanvases: number;
+}): number[];
+export declare function calculateVerticalScale({ channelData, barHeight, normalize, }: {
+    channelData: ChannelData;
+    barHeight?: WaveSurferOptions['barHeight'];
+    normalize?: WaveSurferOptions['normalize'];
+}): number;
+export declare function calculateLinePaths({ channelData, width, height, vScale, }: {
+    channelData: ChannelData;
+    width: number;
+    height: number;
+    vScale: number;
+}): LinePath[];
+export declare function calculateScrollPercentages({ scrollLeft, clientWidth, scrollWidth, }: {
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+}): {
+    startX: number;
+    endX: number;
+};
+export declare function roundToHalfAwayFromZero(value: number): number;

package/dist/renderer-utils.js

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