wavesurfer.js 7.1.0 → 7.1.2

package/dist/plugins/regions.js

@@ -1,363 +1 @@
-/**
- * Regions are visual overlays on the waveform that can be used to mark segments of audio.
- * Regions can be clicked on, dragged and resized.
- * You can set the color and content of each region, as well as their HTML content.
- */
-import BasePlugin from '../base-plugin.js';
-import { makeDraggable } from '../draggable.js';
-import EventEmitter from '../event-emitter.js';
-class SingleRegion extends EventEmitter {
-    constructor(params, totalDuration) {
-        var _a, _b, _c, _d, _e, _f;
-        super();
-        this.totalDuration = totalDuration;
-        this.minLength = 0;
-        this.maxLength = Infinity;
-        this.id = params.id || `region-${Math.random().toString(32).slice(2)}`;
-        this.start = params.start;
-        this.end = (_a = params.end) !== null && _a !== void 0 ? _a : params.start;
-        this.drag = (_b = params.drag) !== null && _b !== void 0 ? _b : true;
-        this.resize = (_c = params.resize) !== null && _c !== void 0 ? _c : true;
-        this.color = (_d = params.color) !== null && _d !== void 0 ? _d : 'rgba(0, 0, 0, 0.1)';
-        this.minLength = (_e = params.minLength) !== null && _e !== void 0 ? _e : this.minLength;
-        this.maxLength = (_f = params.maxLength) !== null && _f !== void 0 ? _f : this.maxLength;
-        this.element = this.initElement(params.content);
-        this.renderPosition();
-        this.initMouseEvents();
-    }
-    initElement(content) {
-        const element = document.createElement('div');
-        const isMarker = this.start === this.end;
-        element.setAttribute('part', `${isMarker ? 'marker' : 'region'} ${this.id}`);
-        element.setAttribute('style', `
-      position: absolute;
-      height: 100%;
-      background-color: ${isMarker ? 'none' : this.color};
-      border-left: ${isMarker ? '2px solid ' + this.color : 'none'};
-      border-radius: 2px;
-      box-sizing: border-box;
-      transition: background-color 0.2s ease;
-      cursor: ${this.drag ? 'grab' : 'default'};
-      pointer-events: all;
-    `);
-        // Init content
-        if (content) {
-            if (typeof content === 'string') {
-                this.content = document.createElement('div');
-                this.content.style.padding = `0.2em ${isMarker ? 0.2 : 0.4}em`;
-                this.content.textContent = content;
-            }
-            else {
-                this.content = content;
-            }
-            this.content.setAttribute('part', 'region-content');
-            element.appendChild(this.content);
-        }
-        // Add resize handles
-        if (!isMarker) {
-            const leftHandle = document.createElement('div');
-            leftHandle.setAttribute('data-resize', 'left');
-            leftHandle.setAttribute('style', `
-        position: absolute;
-        z-index: 2;
-        width: 6px;
-        height: 100%;
-        top: 0;
-        left: 0;
-        border-left: 2px solid rgba(0, 0, 0, 0.5);
-        border-radius: 2px 0 0 2px;
-        cursor: ${this.resize ? 'ew-resize' : 'default'};
-        word-break: keep-all;
-      `);
-            leftHandle.setAttribute('part', 'region-handle region-handle-left');
-            const rightHandle = leftHandle.cloneNode();
-            rightHandle.setAttribute('data-resize', 'right');
-            rightHandle.style.left = '';
-            rightHandle.style.right = '0';
-            rightHandle.style.borderRight = rightHandle.style.borderLeft;
-            rightHandle.style.borderLeft = '';
-            rightHandle.style.borderRadius = '0 2px 2px 0';
-            rightHandle.setAttribute('part', 'region-handle region-handle-right');
-            element.appendChild(leftHandle);
-            element.appendChild(rightHandle);
-        }
-        return element;
-    }
-    renderPosition() {
-        const start = this.start / this.totalDuration;
-        const end = (this.totalDuration - this.end) / this.totalDuration;
-        this.element.style.left = `${start * 100}%`;
-        this.element.style.right = `${end * 100}%`;
-    }
-    initMouseEvents() {
-        const { element } = this;
-        if (!element)
-            return;
-        element.addEventListener('click', (e) => this.emit('click', e));
-        element.addEventListener('mouseenter', (e) => this.emit('over', e));
-        element.addEventListener('mouseleave', (e) => this.emit('leave', e));
-        element.addEventListener('dblclick', (e) => this.emit('dblclick', e));
-        // Drag
-        makeDraggable(element, (dx) => this.onMove(dx), () => this.onStartMoving(), () => this.onEndMoving());
-        // Resize
-        const resizeThreshold = 1;
-        makeDraggable(element.querySelector('[data-resize="left"]'), (dx) => this.onResize(dx, 'start'), () => null, () => this.onEndResizing(), resizeThreshold);
-        makeDraggable(element.querySelector('[data-resize="right"]'), (dx) => this.onResize(dx, 'end'), () => null, () => this.onEndResizing(), resizeThreshold);
-    }
-    onStartMoving() {
-        if (!this.drag)
-            return;
-        this.element.style.cursor = 'grabbing';
-    }
-    onEndMoving() {
-        if (!this.drag)
-            return;
-        this.element.style.cursor = 'grab';
-        this.emit('update-end');
-    }
-    _onUpdate(dx, side) {
-        if (!this.element.parentElement)
-            return;
-        const deltaSeconds = (dx / this.element.parentElement.clientWidth) * this.totalDuration;
-        const newStart = !side || side === 'start' ? this.start + deltaSeconds : this.start;
-        const newEnd = !side || side === 'end' ? this.end + deltaSeconds : this.end;
-        const length = newEnd - newStart;
-        if (newStart >= 0 &&
-            newEnd <= this.totalDuration &&
-            newStart <= newEnd &&
-            length >= this.minLength &&
-            length <= this.maxLength) {
-            this.start = newStart;
-            this.end = newEnd;
-            this.renderPosition();
-            this.emit('update');
-        }
-    }
-    onMove(dx) {
-        if (!this.drag)
-            return;
-        this._onUpdate(dx);
-    }
-    onResize(dx, side) {
-        if (!this.resize)
-            return;
-        this._onUpdate(dx, side);
-    }
-    onEndResizing() {
-        if (!this.resize)
-            return;
-        this.emit('update-end');
-    }
-    _setTotalDuration(totalDuration) {
-        this.totalDuration = totalDuration;
-        this.renderPosition();
-    }
-    /** Play the region from start to end */
-    play() {
-        this.emit('play');
-    }
-    /** Update the region's options */
-    setOptions(options) {
-        var _a, _b;
-        if (options.color) {
-            this.color = options.color;
-            this.element.style.backgroundColor = this.color;
-        }
-        if (options.drag !== undefined) {
-            this.drag = options.drag;
-            this.element.style.cursor = this.drag ? 'grab' : 'default';
-        }
-        if (options.resize !== undefined) {
-            this.resize = options.resize;
-            this.element.querySelectorAll('[data-resize]').forEach((handle) => {
-                ;
-                handle.style.cursor = this.resize ? 'ew-resize' : 'default';
-            });
-        }
-        if (options.start !== undefined || options.end !== undefined) {
-            this.start = (_a = options.start) !== null && _a !== void 0 ? _a : this.start;
-            this.end = (_b = options.end) !== null && _b !== void 0 ? _b : this.end;
-            this.renderPosition();
-        }
-    }
-    /** Remove the region */
-    remove() {
-        this.emit('remove');
-        this.element.remove();
-        // This violates the type but we want to clean up the DOM reference
-        // w/o having to have a nullable type of the element
-        this.element = null;
-    }
-}
-class RegionsPlugin extends BasePlugin {
-    /** Create an instance of RegionsPlugin */
-    constructor(options) {
-        super(options);
-        this.regions = [];
-        this.regionsContainer = this.initRegionsContainer();
-    }
-    /** Create an instance of RegionsPlugin */
-    static create(options) {
-        return new RegionsPlugin(options);
-    }
-    /** Called by wavesurfer, don't call manually */
-    onInit() {
-        if (!this.wavesurfer) {
-            throw Error('WaveSurfer is not initialized');
-        }
-        this.wavesurfer.getWrapper().appendChild(this.regionsContainer);
-        // Detect when a region is being played
-        let activeRegion = null;
-        this.subscriptions.push(this.wavesurfer.on('timeupdate', (currentTime) => {
-            const playedRegion = this.regions.find((region) => region.start <= currentTime && region.end >= currentTime);
-            if (activeRegion && activeRegion !== playedRegion) {
-                this.emit('region-out', activeRegion);
-                activeRegion = null;
-            }
-            if (playedRegion && playedRegion !== activeRegion) {
-                activeRegion = playedRegion;
-                this.emit('region-in', playedRegion);
-            }
-        }));
-    }
-    initRegionsContainer() {
-        const div = document.createElement('div');
-        div.setAttribute('style', `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 3;
-      pointer-events: none;
-    `);
-        return div;
-    }
-    /** Get all created regions */
-    getRegions() {
-        return this.regions;
-    }
-    avoidOverlapping(region) {
-        if (!region.content)
-            return;
-        // Check that the label doesn't overlap with other labels
-        // If it does, push it down until it doesn't
-        const div = region.content;
-        const labelLeft = div.getBoundingClientRect().left;
-        const labelWidth = region.element.scrollWidth;
-        const overlap = this.regions
-            .filter((reg) => {
-            if (reg === region || !reg.content)
-                return false;
-            const left = reg.content.getBoundingClientRect().left;
-            const width = reg.element.scrollWidth;
-            return labelLeft < left + width && left < labelLeft + labelWidth;
-        })
-            .map((reg) => { var _a; return ((_a = reg.content) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0; })
-            .reduce((sum, val) => sum + val, 0);
-        div.style.marginTop = `${overlap}px`;
-    }
-    saveRegion(region) {
-        this.regionsContainer.appendChild(region.element);
-        this.avoidOverlapping(region);
-        this.regions.push(region);
-        this.emit('region-created', region);
-        const regionSubscriptions = [
-            region.on('update-end', () => {
-                this.avoidOverlapping(region);
-                this.emit('region-updated', region);
-            }),
-            region.on('play', () => {
-                var _a, _b;
-                (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.play();
-                (_b = this.wavesurfer) === null || _b === void 0 ? void 0 : _b.setTime(region.start);
-            }),
-            region.on('click', (e) => {
-                this.emit('region-clicked', region, e);
-            }),
-            region.on('dblclick', (e) => {
-                this.emit('region-double-clicked', region, e);
-            }),
-            // Remove the region from the list when it's removed
-            region.once('remove', () => {
-                regionSubscriptions.forEach((unsubscribe) => unsubscribe());
-                this.regions = this.regions.filter((reg) => reg !== region);
-            }),
-        ];
-        this.subscriptions.push(...regionSubscriptions);
-    }
-    /** Create a region with given parameters */
-    addRegion(options) {
-        if (!this.wavesurfer) {
-            throw Error('WaveSurfer is not initialized');
-        }
-        const duration = this.wavesurfer.getDuration();
-        const region = new SingleRegion(options, duration);
-        if (!duration) {
-            this.subscriptions.push(this.wavesurfer.once('ready', (duration) => {
-                region._setTotalDuration(duration);
-                this.saveRegion(region);
-            }));
-        }
-        else {
-            this.saveRegion(region);
-        }
-        return region;
-    }
-    /**
-     * Enable creation of regions by dragging on an empty space on the waveform.
-     * Returns a function to disable the drag selection.
-     */
-    enableDragSelection(options) {
-        var _a, _b;
-        const wrapper = (_b = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getWrapper()) === null || _b === void 0 ? void 0 : _b.querySelector('div');
-        if (!wrapper)
-            return () => undefined;
-        const initialSize = 5;
-        let region = null;
-        let startX = 0;
-        return makeDraggable(wrapper, 
-        // On drag move
-        (dx, _dy, x) => {
-            if (region) {
-                // Update the end position of the region
-                // If we're dragging to the left, we need to update the start instead
-                region._onUpdate(dx, x > startX ? 'end' : 'start');
-            }
-        }, 
-        // On drag start
-        (x) => {
-            startX = x;
-            if (!this.wavesurfer)
-                return;
-            const duration = this.wavesurfer.getDuration();
-            const width = this.wavesurfer.getWrapper().clientWidth;
-            // Calculate the start time of the region
-            const start = (x / width) * duration;
-            // Give the region a small initial size
-            const end = ((x + initialSize) / width) * duration;
-            // Create a region but don't save it until the drag ends
-            region = new SingleRegion(Object.assign(Object.assign({}, options), { start,
-                end }), duration);
-            // Just add it to the DOM for now
-            this.regionsContainer.appendChild(region.element);
-        }, 
-        // On drag end
-        () => {
-            if (region) {
-                this.saveRegion(region);
-                region = null;
-            }
-        });
-    }
-    /** Remove all regions */
-    clearRegions() {
-        this.regions.forEach((region) => region.remove());
-    }
-    /** Destroy the plugin and clean up */
-    destroy() {
-        this.clearRegions();
-        super.destroy();
-    }
-}
-export default RegionsPlugin;
+class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),n=this.on(t,(()=>{i(),n()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=5){let r=()=>{};if(!t)return r;const o=o=>{if(2===o.button)return;o.preventDefault(),o.stopPropagation();let l=o.clientX,a=o.clientY,h=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(h||Math.abs(r-l)>=s||Math.abs(o-a)>=s){const{left:n,top:s}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-n,a-s)),e(r-l,o-a,r-n,o-s),l=r,a=o}},u=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==n||n()),r()};document.addEventListener("pointermove",d),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",u,!0),r=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",u,!0)}),10)}};return t.addEventListener("pointerdown",o),()=>{r(),t.removeEventListener("pointerdown",o)}}class n extends t{constructor(t,e){var i,n,s,r,o,l;super(),this.totalDuration=e,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=null!==(i=t.end)&&void 0!==i?i:t.start,this.drag=null===(n=t.drag)||void 0===n||n,this.resize=null===(s=t.resize)||void 0===s||s,this.color=null!==(r=t.color)&&void 0!==r?r:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(o=t.minLength)&&void 0!==o?o:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.style.padding=`0.2em ${i?.2:.4}em`,this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){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+"%"}initMouseEvents(){const{element:t}=this;if(!t)return;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))),i(t,(t=>this.onMove(t)),(()=>this.onStartMoving()),(()=>this.onEndMoving()));i(t.querySelector('[data-resize="left"]'),(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(t.querySelector('[data-resize="right"]'),(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>=0&&s<=this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){var e,i;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.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=null!==(e=t.start)&&void 0!==e?e:this.start,this.end=null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end,this.renderPosition()}}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=null;this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.find((t=>t.start<=e&&t.end>=e));t&&t!==i&&(this.emit("region-out",t),t=null),i&&i!==t&&(t=i,this.emit("region-in",i))})))}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>{var e;return(null===(e=t.content)||void 0===e?void 0:e.getBoundingClientRect().height)||0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new n(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){var e,s;const r=null===(s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===s?void 0:s.querySelector("div");if(!r)return()=>{};let o=null,l=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>l?"end":"start")}),(e=>{if(l=e,!this.wavesurfer)return;const i=this.wavesurfer.getDuration(),s=this.wavesurfer.getWrapper().clientWidth,r=e/s*i,a=(e+5)/s*i;o=new n(Object.assign(Object.assign({},t),{start:r,end:a}),i),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}export{s 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){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),n=this.on(t,(()=>{i(),n()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=5){let r=()=>{};if(!t)return r;const o=o=>{if(2===o.button)return;o.preventDefault(),o.stopPropagation();let l=o.clientX,a=o.clientY,h=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(h||Math.abs(r-l)>=s||Math.abs(o-a)>=s){const{left:n,top:s}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-n,a-s)),e(r-l,o-a,r-n,o-s),l=r,a=o}},u=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==n||n()),r()};document.addEventListener("pointermove",d),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",u,!0),r=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",u,!0)}),10)}};return t.addEventListener("pointerdown",o),()=>{r(),t.removeEventListener("pointerdown",o)}}class n extends t{constructor(t,e){var i,n,s,r,o,l;super(),this.totalDuration=e,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=null!==(i=t.end)&&void 0!==i?i:t.start,this.drag=null===(n=t.drag)||void 0===n||n,this.resize=null===(s=t.resize)||void 0===s||s,this.color=null!==(r=t.color)&&void 0!==r?r:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(o=t.minLength)&&void 0!==o?o:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.style.padding=`0.2em ${i?.2:.4}em`,this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){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+"%"}initMouseEvents(){const{element:t}=this;if(!t)return;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))),i(t,(t=>this.onMove(t)),(()=>this.onStartMoving()),(()=>this.onEndMoving()));i(t.querySelector('[data-resize="left"]'),(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(t.querySelector('[data-resize="right"]'),(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>=0&&s<=this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){var e,i;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.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0===t.start&&void 0===t.end||(this.start=null!==(e=t.start)&&void 0!==e?e:this.start,this.end=null!==(i=t.end)&&void 0!==i?i:this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=null;this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.find((t=>t.start<=e&&t.end>=e));t&&t!==i&&(this.emit("region-out",t),t=null),i&&i!==t&&(t=i,this.emit("region-in",i))})))}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>{var e;return(null===(e=t.content)||void 0===e?void 0:e.getBoundingClientRect().height)||0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new n(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){var e,s;const r=null===(s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===s?void 0:s.querySelector("div");if(!r)return()=>{};let o=null,l=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>l?"end":"start")}),(e=>{if(l=e,!this.wavesurfer)return;const i=this.wavesurfer.getDuration(),s=this.wavesurfer.getWrapper().clientWidth,r=e/s*i,a=(e+5)/s*i;o=new n(Object.assign(Object.assign({},t),{start:r,end:a}),i),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}return s}));
+!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){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),n=this.on(t,(()=>{i(),n()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=5){let r=()=>{};if(!t)return r;const o=o=>{if(2===o.button)return;o.preventDefault(),o.stopPropagation();let l=o.clientX,a=o.clientY,h=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(h||Math.abs(r-l)>=s||Math.abs(o-a)>=s){const{left:n,top:s}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-n,a-s)),e(r-l,o-a,r-n,o-s),l=r,a=o}},u=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==n||n()),r()};document.addEventListener("pointermove",d),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",u,!0),r=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",u,!0)}),10)}};return t.addEventListener("pointerdown",o),()=>{r(),t.removeEventListener("pointerdown",o)}}class n extends t{constructor(t,e){var i,n,s,r,o,l;super(),this.totalDuration=e,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=null!==(i=t.end)&&void 0!==i?i:t.start,this.drag=null===(n=t.drag)||void 0===n||n,this.resize=null===(s=t.resize)||void 0===s||s,this.color=null!==(r=t.color)&&void 0!==r?r:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(o=t.minLength)&&void 0!==o?o:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.style.padding=`0.2em ${i?.2:.4}em`,this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){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+"%"}initMouseEvents(){const{element:t}=this;if(!t)return;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))),i(t,(t=>this.onMove(t)),(()=>this.onStartMoving()),(()=>this.onEndMoving()));i(t.querySelector('[data-resize="left"]'),(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(t.querySelector('[data-resize="right"]'),(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>=0&&s<=this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){var e,i;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.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=null!==(e=t.start)&&void 0!==e?e:this.start,this.end=null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end,this.renderPosition()}}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=null;this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.find((t=>t.start<=e&&t.end>=e));t&&t!==i&&(this.emit("region-out",t),t=null),i&&i!==t&&(t=i,this.emit("region-in",i))})))}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>{var e;return(null===(e=t.content)||void 0===e?void 0:e.getBoundingClientRect().height)||0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new n(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){var e,s;const r=null===(s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===s?void 0:s.querySelector("div");if(!r)return()=>{};let o=null,l=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>l?"end":"start")}),(e=>{if(l=e,!this.wavesurfer)return;const i=this.wavesurfer.getDuration(),s=this.wavesurfer.getWrapper().clientWidth,r=e/s*i,a=(e+5)/s*i;o=new n(Object.assign(Object.assign({},t),{start:r,end:a}),i),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}return s}));