wavesurfer.js 7.0.0-alpha.3 → 7.0.0-alpha.31

package/dist/plugins/regions.js

@@ -1,183 +1,316 @@
 import BasePlugin from '../base-plugin.js';
-const MIN_WIDTH = 10;
-class RegionsPlugin extends BasePlugin {
-    /** Create an instance of RegionsPlugin */
-    constructor(params) {
-        super(params);
-        this.dragStart = NaN;
-        this.regions = [];
-        this.createdRegion = null;
-        this.modifiedRegion = null;
-        this.isResizingLeft = false;
-        this.isMoving = false;
-        this.handleMouseDown = (e) => {
-            this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
+import EventEmitter from '../event-emitter.js';
+function makeDraggable(element, onStart, onMove, onEnd) {
+    if (!element)
+        return;
+    let preventClickPropagation = false;
+    element.addEventListener('click', (event) => {
+        preventClickPropagation && event.stopPropagation();
+    });
+    element.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+        let x = e.clientX;
+        onStart(x);
+        const onMouseMove = (e) => {
+            const newX = e.clientX;
+            const dx = newX - x;
+            x = newX;
+            preventClickPropagation = true;
+            onMove(dx);
         };
-        this.handleMouseMove = (e) => {
-            const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
-            if (this.modifiedRegion && this.isMoving) {
-                this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
-                this.dragStart = dragEnd;
-                return;
+        const onMouseUp = () => {
+            onEnd();
+            setTimeout(() => (preventClickPropagation = false), 10);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    });
+}
+class Region extends EventEmitter {
+    totalDuration;
+    element;
+    id;
+    start;
+    end;
+    drag;
+    resize;
+    color;
+    content;
+    constructor(params, totalDuration) {
+        super();
+        this.totalDuration = totalDuration;
+        this.id = params.id || Math.random().toString(32).slice(2);
+        this.start = params.start;
+        this.end = params.end ?? params.start;
+        this.drag = params.drag ?? true;
+        this.resize = params.resize ?? true;
+        this.color = params.color ?? 'rgba(0, 0, 0, 0.1)';
+        this.element = this.initElement(params.content);
+        this.renderPosition();
+        this.initMouseEvents();
+    }
+    initElement(content) {
+        const element = document.createElement('div');
+        const isMarker = this.start === this.end;
+        element.id = 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;
+      padding: 0.2em ${isMarker ? 0.2 : 0.4}em;
+      pointer-events: all;
+    `);
+        // Init content
+        if (content) {
+            if (typeof content === 'string') {
+                this.content = document.createElement('div');
+                this.content.textContent = content;
             }
-            if (this.modifiedRegion) {
-                this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
-                return;
+            else {
+                this.content = content;
             }
-            if (!isNaN(this.dragStart)) {
-                const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
-                if (dragEnd - this.dragStart >= MIN_WIDTH) {
-                    if (!this.createdRegion) {
-                        this.renderer.getContainer().style.pointerEvents = 'none';
-                        this.createdRegion = this.createRegion(this.dragStart, dragEnd);
-                    }
-                    else {
-                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
-                    }
-                }
+            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;
+      `);
+            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';
+            element.appendChild(leftHandle);
+            element.appendChild(rightHandle);
+        }
+        return element;
+    }
+    renderPosition() {
+        const start = this.start / this.totalDuration;
+        const end = this.end / this.totalDuration;
+        this.element.style.left = `${start * 100}%`;
+        this.element.style.width = `${(end - start) * 100}%`;
+    }
+    initMouseEvents() {
+        const { element } = this;
+        element.addEventListener('mouseenter', (event) => this.emit('over', { event }));
+        element.addEventListener('mouseleave', (event) => this.emit('leave', { event }));
+        element.addEventListener('click', (event) => this.emit('click', { event }));
+        element.addEventListener('dblclick', (event) => this.emit('dblclick', { event }));
+        // Drag
+        makeDraggable(element, () => this.onStartMoving(), (dx) => this.onMove(dx), () => this.onEndMoving());
+        // Resize
+        makeDraggable(element.querySelector('[data-resize="left"]'), () => null, (dx) => this.onResize(dx, 'start'), () => this.onEndResizing());
+        makeDraggable(element.querySelector('[data-resize="right"]'), () => null, (dx) => this.onResize(dx, 'end'), () => this.onEndResizing());
+    }
+    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, sides) {
+        if (!this.element.parentElement)
+            return;
+        const deltaSeconds = (dx / this.element.parentElement.clientWidth) * this.totalDuration;
+        sides.forEach((side) => {
+            this[side] += deltaSeconds;
+            if (side === 'start') {
+                this.start = Math.max(0, Math.min(this.start, this.end));
             }
-        };
-        this.handleMouseUp = () => {
-            if (this.createdRegion) {
-                this.addRegion(this.createdRegion);
-                this.createdRegion = null;
+            else {
+                this.end = Math.max(this.start, Math.min(this.end, this.totalDuration));
             }
-            this.modifiedRegion = null;
-            this.isMoving = false;
-            this.dragStart = NaN;
-            this.renderer.getContainer().style.pointerEvents = '';
-        };
-        this.container = this.initContainer();
-        const unsubscribeReady = this.wavesurfer.on('ready', () => {
-            const wrapper = this.renderer.getContainer();
-            wrapper.appendChild(this.container);
-            unsubscribeReady();
         });
-        this.subscriptions.push(unsubscribeReady);
-        const wsContainer = this.renderer.getContainer();
-        wsContainer.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('mousemove', this.handleMouseMove);
-        document.addEventListener('mouseup', this.handleMouseUp);
+        this.renderPosition();
+        this.emit('update');
     }
-    /** Unmounts the regions */
-    destroy() {
-        var _a;
-        this.renderer.getContainer().removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        document.removeEventListener('mouseup', this.handleMouseUp, true);
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
-        super.destroy();
+    onMove(dx) {
+        if (!this.drag)
+            return;
+        this.onUpdate(dx, ['start', 'end']);
+    }
+    onResize(dx, side) {
+        if (!this.resize)
+            return;
+        this.onUpdate(dx, [side]);
+    }
+    onEndResizing() {
+        if (!this.resize)
+            return;
+        this.emit('update-end');
+    }
+    // Play the region from start to end
+    play() {
+        this.emit('play');
+    }
+    setTotalDuration(totalDuration) {
+        this.totalDuration = totalDuration;
+        this.renderPosition();
+    }
+    // Remove the region
+    remove() {
+        this.emit('remove');
+        this.element.remove();
+    }
+}
+class RegionsPlugin extends BasePlugin {
+    regions = [];
+    regionsContainer;
+    /** Create an instance of RegionsPlugin */
+    constructor(options) {
+        super(options);
+        this.regionsContainer = this.initRegionsContainer();
     }
-    initContainer() {
+    static create(options) {
+        return new RegionsPlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        this.wrapper.appendChild(this.regionsContainer);
+    }
+    initRegionsContainer() {
         const div = document.createElement('div');
-        div.style.position = 'absolute';
-        div.style.top = '0';
-        div.style.left = '0';
-        div.style.width = '100%';
-        div.style.height = '100%';
-        div.style.zIndex = '3';
-        div.style.pointerEvents = 'none';
+        div.setAttribute('style', `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      pointer-events: none;
+    `);
         return div;
     }
-    createRegionElement(start, end, title = '') {
-        const el = document.createElement('div');
-        el.style.position = 'absolute';
-        el.style.left = `${start}px`;
-        el.style.width = `${end - start}px`;
-        el.style.height = '100%';
-        el.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
-        el.style.transition = 'background-color 0.2s ease';
-        el.style.cursor = 'move';
-        el.style.pointerEvents = 'all';
-        el.title = title;
-        const leftHandle = document.createElement('div');
-        leftHandle.style.position = 'absolute';
-        leftHandle.style.left = '0';
-        leftHandle.style.width = '6px';
-        leftHandle.style.height = '100%';
-        leftHandle.style.borderLeft = '2px solid rgba(0, 0, 0, 0.5)';
-        leftHandle.style.cursor = 'ew-resize';
-        leftHandle.style.pointerEvents = 'all';
-        el.appendChild(leftHandle);
-        const rightHandle = document.createElement('div');
-        rightHandle.style.position = 'absolute';
-        rightHandle.style.right = '0';
-        rightHandle.style.width = '6px';
-        rightHandle.style.height = '100%';
-        rightHandle.style.borderRight = '2px solid rgba(0, 0, 0, 0.5)';
-        rightHandle.style.cursor = 'ew-resize';
-        rightHandle.style.pointerEvents = 'all';
-        el.appendChild(rightHandle);
-        leftHandle.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
-            this.isResizingLeft = true;
-            this.isMoving = false;
-        });
-        rightHandle.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
-            this.isResizingLeft = false;
-            this.isMoving = false;
-        });
-        el.addEventListener('mousedown', () => {
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
-            this.isMoving = true;
-        });
-        el.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === el);
-            if (region) {
-                this.emit('region-clicked', { region });
-            }
-        });
-        this.container.appendChild(el);
-        return el;
+    getRegions() {
+        return this.regions;
     }
-    createRegion(start, end, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.container.clientWidth;
-        return {
-            element: this.createRegionElement(start, end, title),
-            start,
-            end,
-            startTime: (start / width) * duration,
-            endTime: (end / width) * duration,
-            title,
-        };
+    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) => reg.content?.getBoundingClientRect().height || 0)
+            .reduce((sum, val) => sum + val, 0);
+        div.style.marginTop = `${overlap}px`;
     }
-    addRegion(region) {
+    saveRegion(region) {
+        this.regionsContainer.appendChild(region.element);
+        this.avoidOverlapping(region);
         this.regions.push(region);
         this.emit('region-created', { region });
+        this.subscriptions.push(region.on('update-end', () => {
+            this.avoidOverlapping(region);
+            this.emit('region-updated', { region });
+        }), region.on('play', () => {
+            this.wavesurfer?.play();
+            this.wavesurfer?.setTime(region.start);
+        }), region.on('click', () => {
+            this.emit('region-clicked', { region });
+        }));
     }
-    updateRegion(region, start, end) {
-        if (start != null) {
-            region.start = start !== null && start !== void 0 ? start : region.start;
-            region.element.style.left = `${region.start}px`;
-            region.startTime = (start / this.container.clientWidth) * this.wavesurfer.getDuration();
+    addRegion(options) {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
         }
-        if (end != null) {
-            region.end = end;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.container.clientWidth) * this.wavesurfer.getDuration();
+        const duration = this.wavesurfer.getDuration();
+        const region = new Region(options, duration);
+        if (!duration) {
+            this.subscriptions.push(this.wavesurfer.once('canplay', ({ duration }) => {
+                region.setTotalDuration(duration);
+                this.saveRegion(region);
+            }));
+        }
+        else {
+            this.saveRegion(region);
         }
-        this.emit('region-updated', { region });
+        return region;
     }
-    moveRegion(region, delta) {
-        this.updateRegion(region, region.start + delta, region.end + delta);
+    // The same as addRegion but with spread params
+    add(start, end, content, color) {
+        return this.addRegion({ start, end, content, color });
     }
-    /** Create a region at a given start and end time, with an optional title */
-    addRegionAtTime(startTime, endTime, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.container.clientWidth;
-        const start = (startTime / duration) * width;
-        const end = (endTime / duration) * width;
-        const region = this.createRegion(start, end, title);
-        this.addRegion(region);
-        return region;
+    enableDragSelection(options) {
+        if (!this.wrapper)
+            return;
+        const minWidth = 5; // min 5 pixels
+        let region = null;
+        let startX = 0;
+        let sumDx = 0;
+        makeDraggable(this.wrapper, 
+        // On mousedown
+        (x) => (startX = x), 
+        // On mousemove
+        (dx) => {
+            sumDx += dx;
+            if (!this.wavesurfer || !this.wrapper)
+                return;
+            if (!region && sumDx > minWidth) {
+                const duration = this.wavesurfer.getDuration();
+                const box = this.wrapper.getBoundingClientRect();
+                const start = ((startX + sumDx - box.left) / box.width) * duration;
+                region = new Region({
+                    ...options,
+                    start,
+                    end: start,
+                }, duration);
+                this.regionsContainer.appendChild(region.element);
+            }
+            if (region) {
+                const privateRegion = region;
+                privateRegion.onUpdate(dx, ['end']);
+            }
+        }, 
+        // On mouseup
+        () => region && this.saveRegion(region));
     }
-    /** Set the background color of a region */
-    setRegionColor(region, color) {
-        region.element.style.backgroundColor = color;
+    clearRegions() {
+        this.regions.forEach((region) => region.remove());
+    }
+    destroy() {
+        this.clearRegions();
+        super.destroy();
     }
 }
 export default RegionsPlugin;

package/dist/plugins/regions.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Regions=t():e.Regions=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={284:(e,t,n)=>{n.d(t,{Z:()=>r});var i=n(139);class s extends i.Z{wavesurfer;container;wrapper;subscriptions=[];options;constructor(e){super(),this.options=e}init(e){this.wavesurfer=e.wavesurfer,this.container=e.container,this.wrapper=e.wrapper}destroy(){this.subscriptions.forEach((e=>e()))}}const r=s},139:(e,t,n)=>{n.d(t,{Z:()=>i});const i=class{eventTarget;constructor(){this.eventTarget=new EventTarget}emit(e,t){const n=new CustomEvent(String(e),{detail:t});this.eventTarget.dispatchEvent(n)}on(e,t,n){const i=e=>{e instanceof CustomEvent&&t(e.detail)},s=String(e);return this.eventTarget.addEventListener(s,i,{once:n}),()=>this.eventTarget.removeEventListener(s,i)}once(e,t){return this.on(e,t,!0)}}}},t={};function n(i){var s=t[i];if(void 0!==s)return s.exports;var r=t[i]={exports:{}};return e[i](r,r.exports,n),r.exports}n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var i={};return(()=>{n.d(i,{default:()=>a});var e=n(284),t=n(139);function s(e,t,n,i){if(!e)return;let s=!1;e.addEventListener("click",(e=>{s&&e.stopPropagation()})),e.addEventListener("mousedown",(e=>{e.stopPropagation();let r=e.clientX;t(r);const o=e=>{const t=e.clientX,i=t-r;r=t,s=!0,n(i)},a=()=>{i(),setTimeout((()=>s=!1),10),document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",a)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",a)}))}class r extends t.Z{totalDuration;element;id;start;end;drag;resize;color;content;constructor(e,t){super(),this.totalDuration=t,this.id=e.id||Math.random().toString(32).slice(2),this.start=e.start,this.end=e.end??e.start,this.drag=e.drag??!0,this.resize=e.resize??!0,this.color=e.color??"rgba(0, 0, 0, 0.1)",this.element=this.initElement(e.content),this.renderPosition(),this.initMouseEvents()}initElement(e){const t=document.createElement("div"),n=this.start===this.end;if(t.id=this.id,t.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${n?"none":this.color};\n      border-left: ${n?"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      padding: 0.2em ${n?.2:.4}em;\n      pointer-events: all;\n    `),e&&("string"==typeof e?(this.content=document.createElement("div"),this.content.textContent=e):this.content=e,t.appendChild(this.content)),!n){const e=document.createElement("div");e.setAttribute("data-resize","left"),e.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      `);const n=e.cloneNode();n.setAttribute("data-resize","right"),n.style.left="",n.style.right="0",n.style.borderRight=n.style.borderLeft,n.style.borderLeft="",n.style.borderRadius="0 2px 2px 0",t.appendChild(e),t.appendChild(n)}return t}renderPosition(){const e=this.start/this.totalDuration,t=this.end/this.totalDuration;this.element.style.left=100*e+"%",this.element.style.width=100*(t-e)+"%"}initMouseEvents(){const{element:e}=this;e.addEventListener("mouseenter",(e=>this.emit("over",{event:e}))),e.addEventListener("mouseleave",(e=>this.emit("leave",{event:e}))),e.addEventListener("click",(e=>this.emit("click",{event:e}))),e.addEventListener("dblclick",(e=>this.emit("dblclick",{event:e}))),s(e,(()=>this.onStartMoving()),(e=>this.onMove(e)),(()=>this.onEndMoving())),s(e.querySelector('[data-resize="left"]'),(()=>null),(e=>this.onResize(e,"start")),(()=>this.onEndResizing())),s(e.querySelector('[data-resize="right"]'),(()=>null),(e=>this.onResize(e,"end")),(()=>this.onEndResizing()))}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}onUpdate(e,t){if(!this.element.parentElement)return;const n=e/this.element.parentElement.clientWidth*this.totalDuration;t.forEach((e=>{this[e]+=n,"start"===e?this.start=Math.max(0,Math.min(this.start,this.end)):this.end=Math.max(this.start,Math.min(this.end,this.totalDuration))})),this.renderPosition(),this.emit("update")}onMove(e){this.drag&&this.onUpdate(e,["start","end"])}onResize(e,t){this.resize&&this.onUpdate(e,[t])}onEndResizing(){this.resize&&this.emit("update-end")}play(){this.emit("play")}setTotalDuration(e){this.totalDuration=e,this.renderPosition()}remove(){this.emit("remove"),this.element.remove()}}class o extends e.Z{regions=[];regionsContainer;constructor(e){super(e),this.regionsContainer=this.initRegionsContainer()}static create(e){return new o(e)}init(e){if(super.init(e),!this.wavesurfer||!this.wrapper)throw Error("WaveSurfer is not initialized");this.wrapper.appendChild(this.regionsContainer)}initRegionsContainer(){const e=document.createElement("div");return e.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    "),e}getRegions(){return this.regions}avoidOverlapping(e){if(!e.content)return;const t=e.content,n=t.getBoundingClientRect().left,i=e.element.scrollWidth,s=this.regions.filter((t=>{if(t===e||!t.content)return!1;const s=t.content.getBoundingClientRect().left,r=t.element.scrollWidth;return n<s+r&&s<n+i})).map((e=>e.content?.getBoundingClientRect().height||0)).reduce(((e,t)=>e+t),0);t.style.marginTop=`${s}px`}saveRegion(e){this.regionsContainer.appendChild(e.element),this.avoidOverlapping(e),this.regions.push(e),this.emit("region-created",{region:e}),this.subscriptions.push(e.on("update-end",(()=>{this.avoidOverlapping(e),this.emit("region-updated",{region:e})})),e.on("play",(()=>{this.wavesurfer?.play(),this.wavesurfer?.setTime(e.start)})),e.on("click",(()=>{this.emit("region-clicked",{region:e})})))}addRegion(e){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.getDuration(),n=new r(e,t);return t?this.saveRegion(n):this.subscriptions.push(this.wavesurfer.once("canplay",(({duration:e})=>{n.setTotalDuration(e),this.saveRegion(n)}))),n}add(e,t,n,i){return this.addRegion({start:e,end:t,content:n,color:i})}enableDragSelection(e){if(!this.wrapper)return;let t=null,n=0,i=0;s(this.wrapper,(e=>n=e),(s=>{if(i+=s,this.wavesurfer&&this.wrapper){if(!t&&i>5){const s=this.wavesurfer.getDuration(),o=this.wrapper.getBoundingClientRect(),a=(n+i-o.left)/o.width*s;t=new r({...e,start:a,end:a},s),this.regionsContainer.appendChild(t.element)}t&&t.onUpdate(s,["end"])}}),(()=>t&&this.saveRegion(t)))}clearRegions(){this.regions.forEach((e=>e.remove()))}destroy(){this.clearRegions(),super.destroy()}}const a=o})(),i.default})()));

package/dist/plugins/spectrogram.d.ts

@@ -0,0 +1,24 @@
+import BasePlugin from '../base-plugin.js';
+export type SpectrogramPluginOptions = {
+    waveColor?: string;
+    lineWidth?: number;
+};
+export type SpectrogramPluginEvents = {
+    startRecording: void;
+    stopRecording: void;
+};
+declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
+    private mediaSpectrogramer;
+    private recordedUrl;
+    static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
+    private loadBlob;
+    private processFrequencyData;
+    render(stream: MediaStream): () => void;
+    private cleanUp;
+    startSpectrograming(): Promise<void>;
+    isSpectrograming(): boolean;
+    stopSpectrograming(): void;
+    getSpectrogramedUrl(): string;
+    destroy(): void;
+}
+export default SpectrogramPlugin;