wavesurfer.js 7.0.0-alpha.9 → 7.0.0-beta.10

package/dist/plugins/regions.js

@@ -1,215 +1,350 @@
+/**
+ * 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';
-const MIN_WIDTH = 10;
-const defaultOptions = {
-    dragSelection: true,
-    draggable: true,
-    resizable: true,
-};
-const style = (element, styles) => {
-    for (const key in styles) {
-        element.style[key] = styles[key] || '';
-    }
-};
-const el = (tagName, css) => {
-    const element = document.createElement(tagName);
-    style(element, css);
-    return element;
-};
-class RegionsPlugin extends BasePlugin {
-    /** Create an instance of RegionsPlugin */
-    constructor(params, options) {
-        super(params, options);
-        this.dragStart = NaN;
-        this.regions = [];
-        this.createdRegion = null;
-        this.modifiedRegion = null;
-        this.isResizingLeft = false;
-        this.isMoving = false;
-        this.handleMouseDown = (e) => {
-            if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
-                this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
-            }
-        };
-        this.handleMouseMove = (e) => {
-            const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
-            if (this.options.draggable && this.modifiedRegion && this.isMoving) {
-                this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
-                this.dragStart = dragEnd;
-                return;
+import { makeDraggable } from '../draggable.js';
+import EventEmitter from '../event-emitter.js';
+export class Region extends EventEmitter {
+    constructor(params, totalDuration) {
+        super();
+        this.totalDuration = totalDuration;
+        this.id = params.id || `region-${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.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;
+      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.options.resizable && this.modifiedRegion) {
-                this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
-                return;
+            else {
+                this.content = content;
             }
-            if (this.options.dragSelection && !isNaN(this.dragStart)) {
-                const dragEnd = e.clientX - this.wrapper.getBoundingClientRect().left;
-                if (dragEnd - this.dragStart >= MIN_WIDTH) {
-                    if (!this.createdRegion) {
-                        this.container.style.pointerEvents = 'none';
-                        this.createdRegion = this.createRegion(this.dragStart, dragEnd);
-                    }
-                    else {
-                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
-                    }
-                }
+            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.end / this.totalDuration;
+        this.element.style.left = `${start * 100}%`;
+        this.element.style.width = `${(end - start) * 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, 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.container.style.pointerEvents = '';
-        };
-        this.options = Object.assign({}, defaultOptions, options);
-        this.wrapper = this.initWrapper();
-        const unsubscribe = this.wavesurfer.once('decode', () => {
-            this.container.appendChild(this.wrapper);
         });
-        this.subscriptions.push(unsubscribe);
-        this.container.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('mousemove', this.handleMouseMove);
-        document.addEventListener('mouseup', this.handleMouseUp);
+        this.renderPosition();
+        this.emit('update');
     }
-    /** Unmount */
-    destroy() {
-        this.container.removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        document.removeEventListener('mouseup', this.handleMouseUp, true);
-        this.wrapper.remove();
-        super.destroy();
+    onMove(dx) {
+        if (!this.drag)
+            return;
+        this.onUpdate(dx, ['start', 'end']);
     }
-    initWrapper() {
-        return el('div', {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            zIndex: '3',
-            pointerEvents: 'none',
-        });
+    onResize(dx, side) {
+        if (!this.resize)
+            return;
+        this.onUpdate(dx, [side]);
     }
-    createRegionElement(start, end, title = '') {
-        const noWidth = start === end;
-        const div = el('div', {
-            position: 'absolute',
-            left: `${start}px`,
-            width: `${end - start}px`,
-            height: '100%',
-            backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
-            borderRadius: '2px',
-            boxSizing: 'border-box',
-            borderLeft: '2px solid rgba(0, 0, 0, 0.5)',
-            borderRight: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
-            transition: 'background-color 0.2s ease',
-            cursor: this.options.draggable ? 'move' : '',
-            pointerEvents: 'all',
-            padding: '0.2em',
-        });
-        div.textContent = title;
-        const leftHandle = el('div', {
-            position: 'absolute',
-            left: '0',
-            width: '6px',
-            height: '100%',
-            cursor: this.options.resizable ? 'ew-resize' : '',
-            pointerEvents: 'all',
-        });
-        div.appendChild(leftHandle);
-        const rightHandle = leftHandle.cloneNode();
-        style(rightHandle, {
-            left: '',
-            right: '0',
-            borderLeft: '',
-        });
-        div.appendChild(rightHandle);
-        leftHandle.addEventListener('mousedown', (e) => {
-            if (!this.options.resizable)
-                return;
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isResizingLeft = true;
-            this.isMoving = false;
-        });
-        rightHandle.addEventListener('mousedown', (e) => {
-            if (!this.options.resizable)
-                return;
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isResizingLeft = false;
-            this.isMoving = false;
-        });
-        div.addEventListener('mousedown', () => {
-            if (!this.options.draggable)
-                return;
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isMoving = true;
-        });
-        div.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === div);
-            if (region) {
-                this.emit('region-clicked', { region });
-            }
-        });
-        this.wrapper.appendChild(div);
-        return div;
+    onEndResizing() {
+        if (!this.resize)
+            return;
+        this.emit('update-end');
     }
-    createRegion(start, end, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.wrapper.clientWidth;
-        start = Math.max(0, Math.min(start, width - 1));
-        end = Math.max(0, Math.min(end, width - 1));
-        return {
-            element: this.createRegionElement(start, end, title),
-            start,
-            end,
-            startTime: (start / width) * duration,
-            endTime: (end / width) * duration,
-            title,
-        };
-    }
-    addRegion(region) {
-        this.regions.push(region);
-        this.emit('region-created', { region });
-    }
-    updateRegion(region, start, end) {
-        const width = this.wrapper.clientWidth;
-        if (start != null) {
-            start = Math.max(0, Math.min(start, width));
-            region.start = start;
-            region.element.style.left = `${region.start}px`;
-            region.startTime = (start / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
+    _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) {
+        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 = options.start ?? this.start;
+            this.end = options.end ?? this.end;
+            this.renderPosition();
         }
-        if (end != null) {
-            end = Math.max(0, Math.min(end, width));
-            region.end = end;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
+    }
+    /** 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.emit('region-updated', { region });
+        this.wavesurfer.getWrapper().appendChild(this.regionsContainer);
     }
-    moveRegion(region, delta) {
-        this.updateRegion(region, region.start + delta, region.end + delta);
+    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;
     }
-    /** Create a region at a given start and end time, with an optional title */
-    add(startTime, endTime, title = '', color = '') {
+    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`;
+    }
+    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', () => {
+                this.wavesurfer?.play();
+                this.wavesurfer?.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 width = this.wrapper.clientWidth;
-        const start = (startTime / duration) * width;
-        const end = (endTime / duration) * width;
-        const region = this.createRegion(start, end, title);
-        this.addRegion(region);
-        if (color)
-            this.setRegionColor(region, color);
+        const region = new Region(options, duration);
+        if (!duration) {
+            this.subscriptions.push(this.wavesurfer.once('ready', (duration) => {
+                region._setTotalDuration(duration);
+                this.saveRegion(region);
+            }));
+        }
+        else {
+            this.saveRegion(region);
+        }
         return region;
     }
-    /** Set the background color of a region */
-    setRegionColor(region, color) {
-        region.element.style[region.startTime === region.endTime ? 'borderColor' : 'backgroundColor'] = color;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options) {
+        const wrapper = this.wavesurfer?.getWrapper()?.querySelector('div');
+        if (!wrapper)
+            return () => undefined;
+        let region = null;
+        let sumDx = 0;
+        return makeDraggable(wrapper, 
+        // On drag move
+        (dx, _, x) => {
+            if (!this.wavesurfer)
+                return;
+            if (!region) {
+                const duration = this.wavesurfer.getDuration();
+                const box = wrapper.getBoundingClientRect();
+                let start = (x / box.width) * duration;
+                let end = ((x - box.left) / box.width) * duration;
+                if (start > end)
+                    [start, end] = [end, start];
+                region = new Region({
+                    ...options,
+                    start,
+                    end,
+                }, duration);
+                this.regionsContainer.appendChild(region.element);
+            }
+            sumDx += dx;
+            if (region) {
+                const privateRegion = region;
+                privateRegion.onUpdate(dx, [sumDx > 0 ? 'end' : 'start']);
+            }
+        }, 
+        // On drag start
+        () => null, 
+        // On drag end
+        () => {
+            if (region) {
+                this.saveRegion(region);
+                region = null;
+                sumDx = 0;
+                // Prevent a click event on the waveform
+                if (this.wavesurfer) {
+                    const { interact } = this.wavesurfer.options;
+                    if (interact) {
+                        this.wavesurfer.toggleInteraction(false);
+                        setTimeout(() => this.wavesurfer?.toggleInteraction(interact), 10);
+                    }
+                }
+            }
+        });
+    }
+    /** Remove all regions */
+    clearRegions() {
+        this.regions.forEach((region) => region.remove());
+    }
+    /** Destroy the plugin and clean up */
+    destroy() {
+        this.clearRegions();
+        super.destroy();
     }
 }
 export default RegionsPlugin;

package/dist/plugins/regions.min.cjs

@@ -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={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>a});const i=class{constructor(){this.listeners={}}on(e,t){return this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),()=>this.un(e,t)}once(e,t){const i=this.on(e,t),n=this.on(e,(()=>{i(),n()}));return i}un(e,t){this.listeners[e]&&(t?this.listeners[e].delete(t):delete this.listeners[e])}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}},n=class extends i{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.subscriptions.forEach((e=>e()))}};function s(e,t,i,n,s=5){let r=()=>{};if(!e)return r;const o=o=>{o.preventDefault(),o.stopPropagation();let a=o.clientX,l=o.clientY,d=!1;const h=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(d||Math.abs(r-a)>=s||Math.abs(o-l)>=s){d||(d=!0,i?.(a,l));const{left:n,top:s}=e.getBoundingClientRect();t(r-a,o-l,r-n,o-s),a=r,l=o}},c=e=>{d&&(e.preventDefault(),e.stopPropagation())},u=()=>{d&&n?.(),r()};r=()=>{document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",u),document.removeEventListener("pointerleave",u),setTimeout((()=>{document.removeEventListener("click",c,!0)}),10)},document.addEventListener("pointermove",h),document.addEventListener("pointerup",u),document.addEventListener("pointerleave",u),document.addEventListener("click",c,!0)};return e.addEventListener("pointerdown",o),()=>{r(),e.removeEventListener("pointerdown",o)}}class r extends i{constructor(e,t){super(),this.totalDuration=t,this.id=e.id||`region-${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"),i=this.start===this.end;if(t.setAttribute("part",`${i?"marker":"region"} ${this.id}`),t.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      padding: 0.2em ${i?.2:.4}em;\n      pointer-events: all;\n    `),e&&("string"==typeof e?(this.content=document.createElement("div"),this.content.textContent=e):this.content=e,this.content.setAttribute("part","region-content"),t.appendChild(this.content)),!i){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      `),e.setAttribute("part","region-handle region-handle-left");const i=e.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"),t.appendChild(e),t.appendChild(i)}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&&(e.addEventListener("click",(e=>this.emit("click",e))),e.addEventListener("mouseenter",(e=>this.emit("over",e))),e.addEventListener("mouseleave",(e=>this.emit("leave",e))),e.addEventListener("dblclick",(e=>this.emit("dblclick",e))),s(e,(e=>this.onMove(e)),(()=>this.onStartMoving()),(()=>this.onEndMoving())),s(e.querySelector('[data-resize="left"]'),(e=>this.onResize(e,"start")),(()=>null),(()=>this.onEndResizing()),1),s(e.querySelector('[data-resize="right"]'),(e=>this.onResize(e,"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(e,t){if(!this.element.parentElement)return;const i=e/this.element.parentElement.clientWidth*this.totalDuration;t.forEach((e=>{this[e]+=i,"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")}_setTotalDuration(e){this.totalDuration=e,this.renderPosition()}play(){this.emit("play")}setOptions(e){e.color&&(this.color=e.color,this.element.style.backgroundColor=this.color),void 0!==e.drag&&(this.drag=e.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==e.resize&&(this.resize=e.resize,this.element.querySelectorAll("[data-resize]").forEach((e=>{e.style.cursor=this.resize?"ew-resize":"default"}))),void 0===e.start&&void 0===e.end||(this.start=e.start??this.start,this.end=e.end??this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class o extends n{constructor(e){super(e),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(e){return new o(e)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().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,i=t.getBoundingClientRect().left,n=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 i<s+r&&s<i+n})).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",e);const t=[e.on("update-end",(()=>{this.avoidOverlapping(e),this.emit("region-updated",e)})),e.on("play",(()=>{this.wavesurfer?.play(),this.wavesurfer?.setTime(e.start)})),e.on("click",(t=>{this.emit("region-clicked",e,t)})),e.on("dblclick",(t=>{this.emit("region-double-clicked",e,t)})),e.once("remove",(()=>{t.forEach((e=>e())),this.regions=this.regions.filter((t=>t!==e))}))];this.subscriptions.push(...t)}addRegion(e){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.getDuration(),i=new r(e,t);return t?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("ready",(e=>{i._setTotalDuration(e),this.saveRegion(i)}))),i}enableDragSelection(e){const t=this.wavesurfer?.getWrapper()?.querySelector("div");if(!t)return()=>{};let i=null,n=0;return s(t,((s,o,a)=>{if(this.wavesurfer){if(!i){const n=this.wavesurfer.getDuration(),s=t.getBoundingClientRect();let o=a/s.width*n,l=(a-s.left)/s.width*n;o>l&&([o,l]=[l,o]),i=new r({...e,start:o,end:l},n),this.regionsContainer.appendChild(i.element)}n+=s,i&&i.onUpdate(s,[n>0?"end":"start"])}}),(()=>null),(()=>{if(i&&(this.saveRegion(i),i=null,n=0,this.wavesurfer)){const{interact:e}=this.wavesurfer.options;e&&(this.wavesurfer.toggleInteraction(!1),setTimeout((()=>this.wavesurfer?.toggleInteraction(e)),10))}}))}clearRegions(){this.regions.forEach((e=>e.remove()))}destroy(){this.clearRegions(),super.destroy()}}const a=o;return t.default})()));

package/dist/plugins/spectrogram-fft.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
+ *
+ * @param {Number} bufferSize Buffer size
+ * @param {Number} sampleRate Sample rate
+ * @param {Function} windowFunc Window function
+ * @param {Number} alpha Alpha channel
+ */
+export default function FFT(bufferSize: any, sampleRate: any, windowFunc: any, alpha: any): void;