wavesurfer.js 7.12.3 → 7.12.4

package/dist/plugins/regions.js

@@ -1,699 +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 EventEmitter from '../event-emitter.js';
-import createElement from '../dom.js';
-import { createDragStream } from '../reactive/drag-stream.js';
-import { effect } from '../reactive/store.js';
-import { fromEvent, cleanup as cleanupStream } from '../reactive/event-streams.js';
-class SingleRegion extends EventEmitter {
-    constructor(params, totalDuration, numberOfChannels = 0) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        super();
-        this.totalDuration = totalDuration;
-        this.numberOfChannels = numberOfChannels;
-        this.element = null; // Element is created on init
-        this.minLength = 0;
-        this.maxLength = Infinity;
-        this.contentEditable = false;
-        this.subscriptions = [];
-        this.updatingSide = undefined;
-        this.isRemoved = false;
-        this.subscriptions = [];
-        this.id = params.id || `region-${Math.random().toString(32).slice(2)}`;
-        this.start = this.clampPosition(params.start);
-        this.end = this.clampPosition((_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.resizeStart = (_d = params.resizeStart) !== null && _d !== void 0 ? _d : true;
-        this.resizeEnd = (_e = params.resizeEnd) !== null && _e !== void 0 ? _e : true;
-        this.color = (_f = params.color) !== null && _f !== void 0 ? _f : 'rgba(0, 0, 0, 0.1)';
-        this.minLength = (_g = params.minLength) !== null && _g !== void 0 ? _g : this.minLength;
-        this.maxLength = (_h = params.maxLength) !== null && _h !== void 0 ? _h : this.maxLength;
-        this.channelIdx = (_j = params.channelIdx) !== null && _j !== void 0 ? _j : -1;
-        this.contentEditable = (_k = params.contentEditable) !== null && _k !== void 0 ? _k : this.contentEditable;
-        this.element = this.initElement();
-        this.setContent(params.content);
-        this.setPart();
-        this.renderPosition();
-        this.initMouseEvents();
-    }
-    clampPosition(time) {
-        return Math.max(0, Math.min(this.totalDuration, time));
-    }
-    setPart() {
-        var _a;
-        const isMarker = this.start === this.end;
-        (_a = this.element) === null || _a === void 0 ? void 0 : _a.setAttribute('part', `${isMarker ? 'marker' : 'region'} ${this.id}`);
-    }
-    addResizeHandles(element) {
-        const handleStyle = {
-            position: 'absolute',
-            zIndex: '2',
-            width: '6px',
-            height: '100%',
-            top: '0',
-            cursor: 'ew-resize',
-            wordBreak: 'keep-all',
-        };
-        const leftHandle = createElement('div', {
-            part: 'region-handle region-handle-left',
-            style: Object.assign(Object.assign({}, handleStyle), { left: '0', borderLeft: '2px solid rgba(0, 0, 0, 0.5)', borderRadius: '2px 0 0 2px' }),
-        }, element);
-        const rightHandle = createElement('div', {
-            part: 'region-handle region-handle-right',
-            style: Object.assign(Object.assign({}, handleStyle), { right: '0', borderRight: '2px solid rgba(0, 0, 0, 0.5)', borderRadius: '0 2px 2px 0' }),
-        }, element);
-        // Resize
-        const resizeThreshold = 1;
-        const leftDragStream = createDragStream(leftHandle, { threshold: resizeThreshold });
-        const rightDragStream = createDragStream(rightHandle, { threshold: resizeThreshold });
-        const unsubscribeLeft = effect(() => {
-            const drag = leftDragStream.signal.value;
-            if (!drag)
-                return;
-            if (drag.type === 'move' && drag.deltaX !== undefined) {
-                this.onResize(drag.deltaX, 'start');
-            }
-            else if (drag.type === 'end') {
-                this.onEndResizing('start');
-            }
-        }, [leftDragStream.signal]);
-        const unsubscribeRight = effect(() => {
-            const drag = rightDragStream.signal.value;
-            if (!drag)
-                return;
-            if (drag.type === 'move' && drag.deltaX !== undefined) {
-                this.onResize(drag.deltaX, 'end');
-            }
-            else if (drag.type === 'end') {
-                this.onEndResizing('end');
-            }
-        }, [rightDragStream.signal]);
-        this.subscriptions.push(() => {
-            unsubscribeLeft();
-            unsubscribeRight();
-            leftDragStream.cleanup();
-            rightDragStream.cleanup();
-        });
-    }
-    removeResizeHandles(element) {
-        const leftHandle = element.querySelector('[part*="region-handle-left"]');
-        const rightHandle = element.querySelector('[part*="region-handle-right"]');
-        if (leftHandle) {
-            element.removeChild(leftHandle);
-        }
-        if (rightHandle) {
-            element.removeChild(rightHandle);
-        }
-    }
-    initElement() {
-        if (this.isRemoved)
-            return null;
-        const isMarker = this.start === this.end;
-        let elementTop = 0;
-        let elementHeight = 100;
-        if (this.channelIdx >= 0 && this.numberOfChannels > 0 && this.channelIdx < this.numberOfChannels) {
-            elementHeight = 100 / this.numberOfChannels;
-            elementTop = elementHeight * this.channelIdx;
-        }
-        const element = createElement('div', {
-            style: {
-                position: 'absolute',
-                top: `${elementTop}%`,
-                height: `${elementHeight}%`,
-                backgroundColor: isMarker ? 'none' : this.color,
-                borderLeft: isMarker ? '2px solid ' + this.color : 'none',
-                borderRadius: '2px',
-                boxSizing: 'border-box',
-                transition: 'background-color 0.2s ease',
-                cursor: this.drag ? 'grab' : 'default',
-                pointerEvents: 'all',
-            },
-        });
-        // Add resize handles
-        if (!isMarker && this.resize) {
-            this.addResizeHandles(element);
-        }
-        return element;
-    }
-    renderPosition() {
-        if (!this.element)
-            return;
-        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}%`;
-    }
-    toggleCursor(toggle) {
-        var _a;
-        if (!this.drag || !((_a = this.element) === null || _a === void 0 ? void 0 : _a.style))
-            return;
-        this.element.style.cursor = toggle ? 'grabbing' : 'grab';
-    }
-    initMouseEvents() {
-        const { element } = this;
-        if (!element)
-            return;
-        // Create event streams
-        const clicks = fromEvent(element, 'click');
-        const mouseenters = fromEvent(element, 'mouseenter');
-        const mouseleaves = fromEvent(element, 'mouseleave');
-        const dblclicks = fromEvent(element, 'dblclick');
-        const pointerdowns = fromEvent(element, 'pointerdown');
-        const pointerups = fromEvent(element, 'pointerup');
-        // Subscribe to streams
-        const unsubscribeClick = clicks.subscribe((e) => e && this.emit('click', e));
-        const unsubscribeMouseenter = mouseenters.subscribe((e) => e && this.emit('over', e));
-        const unsubscribeMouseleave = mouseleaves.subscribe((e) => e && this.emit('leave', e));
-        const unsubscribeDblclick = dblclicks.subscribe((e) => e && this.emit('dblclick', e));
-        const unsubscribePointerdown = pointerdowns.subscribe((e) => e && this.toggleCursor(true));
-        const unsubscribePointerup = pointerups.subscribe((e) => e && this.toggleCursor(false));
-        // Store cleanup
-        this.subscriptions.push(() => {
-            unsubscribeClick();
-            unsubscribeMouseenter();
-            unsubscribeMouseleave();
-            unsubscribeDblclick();
-            unsubscribePointerdown();
-            unsubscribePointerup();
-            cleanupStream(clicks);
-            cleanupStream(mouseenters);
-            cleanupStream(mouseleaves);
-            cleanupStream(dblclicks);
-            cleanupStream(pointerdowns);
-            cleanupStream(pointerups);
-        });
-        // Drag
-        const dragStream = createDragStream(element);
-        const unsubscribeDrag = effect(() => {
-            const drag = dragStream.signal.value;
-            if (!drag)
-                return;
-            if (drag.type === 'start') {
-                this.toggleCursor(true);
-            }
-            else if (drag.type === 'move' && drag.deltaX !== undefined) {
-                this.onMove(drag.deltaX);
-            }
-            else if (drag.type === 'end') {
-                this.toggleCursor(false);
-                if (this.drag)
-                    this.emit('update-end');
-            }
-        }, [dragStream.signal]);
-        this.subscriptions.push(() => {
-            unsubscribeDrag();
-            dragStream.cleanup();
-        });
-        if (this.contentEditable && this.content) {
-            this.contentClickListener = (e) => this.onContentClick(e);
-            this.contentBlurListener = () => this.onContentBlur();
-            this.content.addEventListener('click', this.contentClickListener);
-            this.content.addEventListener('blur', this.contentBlurListener);
-        }
-    }
-    _onUpdate(dx, side, startTime) {
-        var _a;
-        if (!((_a = this.element) === null || _a === void 0 ? void 0 : _a.parentElement))
-            return;
-        const { width } = this.element.parentElement.getBoundingClientRect();
-        const deltaSeconds = (dx / width) * this.totalDuration;
-        let newStart = !side || side === 'start' ? this.start + deltaSeconds : this.start;
-        let newEnd = !side || side === 'end' ? this.end + deltaSeconds : this.end;
-        const isRegionCreating = startTime !== undefined; // startTime is passed when the region is being created.
-        if (isRegionCreating) {
-            if (this.updatingSide && this.updatingSide !== side) {
-                if (this.updatingSide === 'start') {
-                    newStart = startTime;
-                }
-                else {
-                    newEnd = startTime;
-                }
-            }
-        }
-        newStart = Math.max(0, newStart);
-        newEnd = Math.min(this.totalDuration, newEnd);
-        const length = newEnd - newStart;
-        this.updatingSide = side;
-        const resizeValid = length >= this.minLength && length <= this.maxLength;
-        if (newStart <= newEnd && (resizeValid || isRegionCreating)) {
-            this.start = newStart;
-            this.end = newEnd;
-            this.renderPosition();
-            this.emit('update', side);
-        }
-    }
-    onMove(dx) {
-        if (!this.drag)
-            return;
-        this._onUpdate(dx);
-    }
-    onResize(dx, side) {
-        if (!this.resize)
-            return;
-        if (!this.resizeStart && side === 'start')
-            return;
-        if (!this.resizeEnd && side === 'end')
-            return;
-        this._onUpdate(dx, side);
-    }
-    onEndResizing(side) {
-        if (!this.resize)
-            return;
-        this.emit('update-end', side);
-        this.updatingSide = undefined;
-    }
-    onContentClick(event) {
-        event.stopPropagation();
-        const contentContainer = event.target;
-        contentContainer.focus();
-        this.emit('click', event);
-    }
-    onContentBlur() {
-        this.emit('update-end');
-    }
-    _setTotalDuration(totalDuration) {
-        this.totalDuration = totalDuration;
-        this.renderPosition();
-    }
-    /** Play the region from the start, pass `true` to stop at region end */
-    play(stopAtEnd) {
-        this.emit('play', stopAtEnd && this.end !== this.start ? this.end : undefined);
-    }
-    /** Get Content as html or string */
-    getContent(asHTML = false) {
-        var _a;
-        if (asHTML) {
-            return this.content || undefined;
-        }
-        if (this.element instanceof HTMLElement) {
-            return ((_a = this.content) === null || _a === void 0 ? void 0 : _a.innerHTML) || undefined;
-        }
-        return '';
-    }
-    /** Set the HTML content of the region */
-    setContent(content) {
-        var _a;
-        if (!this.element)
-            return;
-        // Remove event listeners from old content before removing it
-        if (this.content && this.contentEditable) {
-            if (this.contentClickListener) {
-                this.content.removeEventListener('click', this.contentClickListener);
-            }
-            if (this.contentBlurListener) {
-                this.content.removeEventListener('blur', this.contentBlurListener);
-            }
-        }
-        (_a = this.content) === null || _a === void 0 ? void 0 : _a.remove();
-        if (!content) {
-            this.content = undefined;
-            return;
-        }
-        if (typeof content === 'string') {
-            const isMarker = this.start === this.end;
-            this.content = createElement('div', {
-                style: {
-                    padding: `0.2em ${isMarker ? 0.2 : 0.4}em`,
-                    display: 'inline-block',
-                },
-                textContent: content,
-            });
-        }
-        else {
-            this.content = content;
-        }
-        if (this.contentEditable) {
-            this.content.contentEditable = 'true';
-            // Re-add event listeners to new content
-            this.contentClickListener = (e) => this.onContentClick(e);
-            this.contentBlurListener = () => this.onContentBlur();
-            this.content.addEventListener('click', this.contentClickListener);
-            this.content.addEventListener('blur', this.contentBlurListener);
-        }
-        this.content.setAttribute('part', 'region-content');
-        this.element.appendChild(this.content);
-        this.emit('content-changed');
-    }
-    /** Update the region's options */
-    setOptions(options) {
-        var _a, _b;
-        if (!this.element)
-            return;
-        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.start !== undefined || options.end !== undefined) {
-            const isMarker = this.start === this.end;
-            this.start = this.clampPosition((_a = options.start) !== null && _a !== void 0 ? _a : this.start);
-            this.end = this.clampPosition((_b = options.end) !== null && _b !== void 0 ? _b : (isMarker ? this.start : this.end));
-            this.renderPosition();
-            this.setPart();
-            this.emit('render');
-        }
-        if (options.content) {
-            this.setContent(options.content);
-        }
-        if (options.id) {
-            this.id = options.id;
-            this.setPart();
-        }
-        if (options.resize !== undefined && options.resize !== this.resize) {
-            const isMarker = this.start === this.end;
-            this.resize = options.resize;
-            if (this.resize && !isMarker) {
-                this.addResizeHandles(this.element);
-            }
-            else {
-                this.removeResizeHandles(this.element);
-            }
-        }
-        if (options.resizeStart !== undefined) {
-            this.resizeStart = options.resizeStart;
-        }
-        if (options.resizeEnd !== undefined) {
-            this.resizeEnd = options.resizeEnd;
-        }
-    }
-    /** Remove the region */
-    remove() {
-        this.isRemoved = true;
-        this.emit('remove');
-        // Clean up all subscriptions (drag streams, event listeners, etc.)
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
-        this.subscriptions = [];
-        // Clean up content event listeners
-        if (this.content && this.contentEditable) {
-            if (this.contentClickListener) {
-                this.content.removeEventListener('click', this.contentClickListener);
-                this.contentClickListener = undefined;
-            }
-            if (this.contentBlurListener) {
-                this.content.removeEventListener('blur', this.contentBlurListener);
-                this.contentBlurListener = undefined;
-            }
-        }
-        // Remove DOM element
-        if (this.element) {
-            this.element.remove();
-            this.element = null;
-        }
-        // Clear all event listeners from the EventEmitter
-        this.unAll();
-    }
-}
-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);
-        // Update region durations when a new audio file is loaded
-        this.subscriptions.push(this.wavesurfer.on('ready', (duration) => {
-            this.regions.forEach((region) => region._setTotalDuration(duration));
-        }));
-        let activeRegions = [];
-        this.subscriptions.push(this.wavesurfer.on('timeupdate', (currentTime) => {
-            // Detect when regions are being played
-            const playedRegions = this.regions.filter((region) => region.start <= currentTime &&
-                (region.end === region.start ? region.start + 0.05 : region.end) >= currentTime);
-            // Trigger region-in when activeRegions doesn't include a played regions
-            playedRegions.forEach((region) => {
-                if (!activeRegions.includes(region)) {
-                    this.emit('region-in', region);
-                }
-            });
-            // Trigger region-out when activeRegions include a un-played regions
-            activeRegions.forEach((region) => {
-                if (!playedRegions.includes(region)) {
-                    this.emit('region-out', region);
-                }
-            });
-            // Update activeRegions only played regions
-            activeRegions = playedRegions;
-        }));
-    }
-    initRegionsContainer() {
-        return createElement('div', {
-            part: 'regions-container',
-            style: {
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                width: '100%',
-                height: '100%',
-                zIndex: '5',
-                pointerEvents: 'none',
-            },
-        });
-    }
-    /** Get all created regions */
-    getRegions() {
-        return this.regions;
-    }
-    avoidOverlapping(region) {
-        if (!region.content || region.isRemoved)
-            return;
-        setTimeout(() => {
-            // Check that the label doesn't overlap with other labels
-            // If it does, push it down until it doesn't
-            // only check regions that are before us in the list -- otherwise
-            // both overlapping regions will try to move down away from each other.
-            const div = region.content;
-            const box = div.getBoundingClientRect();
-            const regionIndex = this.regions.indexOf(region);
-            const overlap = this.regions
-                .slice(0, regionIndex)
-                .filter((reg) => !reg.isRemoved)
-                .map((reg) => {
-                if (reg === region || !reg.content)
-                    return 0;
-                const otherBox = reg.content.getBoundingClientRect();
-                if (box.left < otherBox.left + otherBox.width && otherBox.left < box.left + box.width) {
-                    return otherBox.height + 2;
-                }
-                return 0;
-            })
-                .reduce((sum, val) => sum + val, 0);
-            div.style.marginTop = `${overlap}px`;
-        }, 10);
-    }
-    adjustScroll(region) {
-        var _a, _b;
-        if (!region.element)
-            return;
-        const scrollContainer = (_b = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getWrapper()) === null || _b === void 0 ? void 0 : _b.parentElement;
-        if (!scrollContainer)
-            return;
-        const { clientWidth, scrollWidth } = scrollContainer;
-        if (scrollWidth <= clientWidth)
-            return;
-        const scrollBbox = scrollContainer.getBoundingClientRect();
-        const bbox = region.element.getBoundingClientRect();
-        const left = bbox.left - scrollBbox.left;
-        const right = bbox.right - scrollBbox.left;
-        if (left < 0) {
-            scrollContainer.scrollLeft += left;
-        }
-        else if (right > clientWidth) {
-            scrollContainer.scrollLeft += right - clientWidth;
-        }
-    }
-    virtualAppend(region, container, element) {
-        const renderIfVisible = () => {
-            if (!this.wavesurfer)
-                return;
-            const clientWidth = this.wavesurfer.getWidth();
-            const scrollLeft = this.wavesurfer.getScroll();
-            const scrollWidth = container.clientWidth;
-            const duration = this.wavesurfer.getDuration();
-            const start = Math.round((region.start / duration) * scrollWidth);
-            const width = Math.round(((region.end - region.start) / duration) * scrollWidth) || 1;
-            // Check if the region is between the scrollLeft and scrollLeft + clientWidth
-            const isVisible = start + width > scrollLeft && start < scrollLeft + clientWidth;
-            if (isVisible && !element.parentElement) {
-                container.appendChild(element);
-            }
-            else if (!isVisible && element.parentElement) {
-                element.remove();
-            }
-        };
-        setTimeout(() => {
-            // Check if region was removed before setTimeout executed
-            if (!this.wavesurfer || !region.element)
-                return;
-            renderIfVisible();
-            const unsubscribeScroll = this.wavesurfer.on('scroll', renderIfVisible);
-            const unsubscribeZoom = this.wavesurfer.on('zoom', renderIfVisible);
-            const unsubscribeResize = this.wavesurfer.on('resize', renderIfVisible);
-            const unsubscribeRender = region.on('render', renderIfVisible);
-            // Only push the unsubscribe functions, not the once() return values
-            this.subscriptions.push(unsubscribeScroll, unsubscribeZoom, unsubscribeResize, unsubscribeRender);
-            // Clean up subscriptions when region is removed
-            region.once('remove', () => {
-                unsubscribeScroll();
-                unsubscribeZoom();
-                unsubscribeResize();
-                unsubscribeRender();
-            });
-        }, 0);
-    }
-    saveRegion(region) {
-        if (!region.element)
-            return;
-        this.virtualAppend(region, this.regionsContainer, region.element);
-        this.avoidOverlapping(region);
-        this.regions.push(region);
-        const regionSubscriptions = [
-            region.on('update', (side) => {
-                // Undefined side indicates that we are dragging not resizing
-                if (!side) {
-                    this.adjustScroll(region);
-                }
-                this.emit('region-update', region, side);
-            }),
-            region.on('update-end', (side) => {
-                this.avoidOverlapping(region);
-                this.emit('region-updated', region, side);
-            }),
-            region.on('play', (end) => {
-                var _a;
-                (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.play(region.start, end);
-            }),
-            region.on('click', (e) => {
-                this.emit('region-clicked', region, e);
-            }),
-            region.on('dblclick', (e) => {
-                this.emit('region-double-clicked', region, e);
-            }),
-            region.on('content-changed', () => {
-                this.emit('region-content-changed', region);
-            }),
-            // 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.emit('region-removed', region);
-            }),
-        ];
-        this.subscriptions.push(...regionSubscriptions);
-        this.emit('region-created', region);
-    }
-    /** Create a region with given parameters */
-    addRegion(options) {
-        var _a, _b;
-        if (!this.wavesurfer) {
-            throw Error('WaveSurfer is not initialized');
-        }
-        const duration = this.wavesurfer.getDuration();
-        const numberOfChannels = (_b = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDecodedData()) === null || _b === void 0 ? void 0 : _b.numberOfChannels;
-        const region = new SingleRegion(options, duration, numberOfChannels);
-        this.emit('region-initialized', region);
-        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, threshold = 3) {
-        var _a;
-        const wrapper = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getWrapper();
-        if (!wrapper || !(wrapper instanceof HTMLElement))
-            return () => undefined;
-        const initialSize = 5;
-        let region = null;
-        let startX = 0;
-        let startTime = 0;
-        const dragStream = createDragStream(wrapper, { threshold });
-        const unsubscribe = effect(() => {
-            var _a, _b;
-            const drag = dragStream.signal.value;
-            if (!drag)
-                return;
-            if (drag.type === 'start') {
-                // On drag start
-                startX = drag.x;
-                if (!this.wavesurfer)
-                    return;
-                const duration = this.wavesurfer.getDuration();
-                const numberOfChannels = (_b = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDecodedData()) === null || _b === void 0 ? void 0 : _b.numberOfChannels;
-                const { width } = this.wavesurfer.getWrapper().getBoundingClientRect();
-                startTime = (startX / width) * duration;
-                // Calculate the start time of the region
-                const start = (drag.x / width) * duration;
-                // Give the region a small initial size
-                const end = ((drag.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, numberOfChannels);
-                this.emit('region-initialized', region);
-                // Just add it to the DOM for now
-                if (region.element) {
-                    this.regionsContainer.appendChild(region.element);
-                }
-            }
-            else if (drag.type === 'move' && drag.deltaX !== undefined) {
-                // On drag move
-                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(drag.deltaX, drag.x > startX ? 'end' : 'start', startTime);
-                }
-            }
-            else if (drag.type === 'end') {
-                // On drag end
-                if (region) {
-                    this.saveRegion(region);
-                    region.updatingSide = undefined;
-                    region = null;
-                }
-            }
-        }, [dragStream.signal]);
-        return () => {
-            unsubscribe();
-            dragStream.cleanup();
-        };
-    }
-    /** Remove all regions */
-    clearRegions() {
-        const regions = this.regions.slice();
-        regions.forEach((region) => region.remove());
-        this.regions = [];
-    }
-    /** Destroy the plugin and clean up */
-    destroy() {
-        this.clearRegions();
-        super.destroy();
-        this.regionsContainer.remove();
-    }
-}
-export default RegionsPlugin;
+class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function i(t,e){const n=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?n.appendChild(e):"string"==typeof e?n.appendChild(document.createTextNode(e)):n.appendChild(i(t,e));else"style"===t?Object.assign(n.style,s):"textContent"===t?n.textContent=s:n.setAttribute(t,s.toString());return n}function n(t,e,n){const s=i(t,e||{});return null==n||n.appendChild(s),s}function s(t){let e=t;const i=new Set;return{get value(){return e},set(t){Object.is(e,t)||(e=t,i.forEach((t=>t(e))))},update(t){this.set(t(e))},subscribe:t=>(i.add(t),()=>i.delete(t))}}function r(t,e){let i;const n=()=>{i&&(i(),i=void 0),i=t()},s=e.map((t=>t.subscribe(n)));return n(),()=>{i&&(i(),i=void 0),s.forEach((t=>t()))}}function o(t,e){const i=s(null),n=t=>{i.set(t)};return t.addEventListener(e,n),i._cleanup=()=>{t.removeEventListener(e,n)},i}function l(t){const e=t._cleanup;"function"==typeof e&&e()}function h(t,e={}){const{threshold:i=3,mouseButton:n=0,touchDelay:r=100}=e,o=s(null),h=new Map,a=matchMedia("(pointer: coarse)").matches;let d=()=>{};const c=e=>{if(e.button!==n)return;if(h.set(e.pointerId,e),h.size>1)return;let s=e.clientX,l=e.clientY,c=!1;const u=Date.now(),v=t.getBoundingClientRect(),{left:p,top:g}=v,m=t=>{if(t.defaultPrevented||h.size>1)return;if(a&&Date.now()-u<r)return;const e=t.clientX,n=t.clientY,d=e-s,v=n-l;(c||Math.abs(d)>i||Math.abs(v)>i)&&(t.preventDefault(),t.stopPropagation(),c||(o.set({type:"start",x:s-p,y:l-g}),c=!0),o.set({type:"move",x:e-p,y:n-g,deltaX:d,deltaY:v}),s=e,l=n)},f=t=>{if(h.delete(t.pointerId),c){const e=t.clientX,i=t.clientY;o.set({type:"end",x:e-p,y:i-g})}d()},b=t=>{h.delete(t.pointerId),t.relatedTarget&&t.relatedTarget!==document.documentElement||f(t)},E=t=>{c&&(t.stopPropagation(),t.preventDefault())},C=t=>{t.defaultPrevented||h.size>1||c&&t.preventDefault()};document.addEventListener("pointermove",m),document.addEventListener("pointerup",f),document.addEventListener("pointerout",b),document.addEventListener("pointercancel",b),document.addEventListener("touchmove",C,{passive:!1}),document.addEventListener("click",E,{capture:!0}),d=()=>{document.removeEventListener("pointermove",m),document.removeEventListener("pointerup",f),document.removeEventListener("pointerout",b),document.removeEventListener("pointercancel",b),document.removeEventListener("touchmove",C),setTimeout((()=>{document.removeEventListener("click",E,{capture:!0})}),10)}};t.addEventListener("pointerdown",c);return{signal:o,cleanup:()=>{d(),t.removeEventListener("pointerdown",c),h.clear(),l(o)}}}class a extends t{constructor(t,e,i=0){var n,s,r,o,l,h,a,d,c,u;super(),this.totalDuration=e,this.numberOfChannels=i,this.element=null,this.minLength=0,this.maxLength=1/0,this.contentEditable=!1,this.subscriptions=[],this.updatingSide=void 0,this.isRemoved=!1,this.subscriptions=[],this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.resizeStart=null===(o=t.resizeStart)||void 0===o||o,this.resizeEnd=null===(l=t.resizeEnd)||void 0===l||l,this.color=null!==(h=t.color)&&void 0!==h?h:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(a=t.minLength)&&void 0!==a?a:this.minLength,this.maxLength=null!==(d=t.maxLength)&&void 0!==d?d:this.maxLength,this.channelIdx=null!==(c=t.channelIdx)&&void 0!==c?c:-1,this.contentEditable=null!==(u=t.contentEditable)&&void 0!==u?u:this.contentEditable,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){var t;const e=this.start===this.end;null===(t=this.element)||void 0===t||t.setAttribute("part",`${e?"marker":"region"} ${this.id}`)}addResizeHandles(t){const e={position:"absolute",zIndex:"2",width:"6px",height:"100%",top:"0",cursor:"ew-resize",wordBreak:"keep-all"},i=n("div",{part:"region-handle region-handle-left",style:Object.assign(Object.assign({},e),{left:"0",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"})},t),s=n("div",{part:"region-handle region-handle-right",style:Object.assign(Object.assign({},e),{right:"0",borderRight:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"})},t),o=h(i,{threshold:1}),l=h(s,{threshold:1}),a=r((()=>{const t=o.signal.value;t&&("move"===t.type&&void 0!==t.deltaX?this.onResize(t.deltaX,"start"):"end"===t.type&&this.onEndResizing("start"))}),[o.signal]),d=r((()=>{const t=l.signal.value;t&&("move"===t.type&&void 0!==t.deltaX?this.onResize(t.deltaX,"end"):"end"===t.type&&this.onEndResizing("end"))}),[l.signal]);this.subscriptions.push((()=>{a(),d(),o.cleanup(),l.cleanup()}))}removeResizeHandles(t){const e=t.querySelector('[part*="region-handle-left"]'),i=t.querySelector('[part*="region-handle-right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){if(this.isRemoved)return null;const t=this.start===this.end;let e=0,i=100;this.channelIdx>=0&&this.numberOfChannels>0&&this.channelIdx<this.numberOfChannels&&(i=100/this.numberOfChannels,e=i*this.channelIdx);const s=n("div",{style:{position:"absolute",top:`${e}%`,height:`${i}%`,backgroundColor:t?"none":this.color,borderLeft:t?"2px solid "+this.color:"none",borderRadius:"2px",boxSizing:"border-box",transition:"background-color 0.2s ease",cursor:this.drag?"grab":"default",pointerEvents:"all"}});return!t&&this.resize&&this.addResizeHandles(s),s}renderPosition(){if(!this.element)return;const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){var e;this.drag&&(null===(e=this.element)||void 0===e?void 0:e.style)&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;if(!t)return;const e=o(t,"click"),i=o(t,"mouseenter"),n=o(t,"mouseleave"),s=o(t,"dblclick"),a=o(t,"pointerdown"),d=o(t,"pointerup"),c=e.subscribe((t=>t&&this.emit("click",t))),u=i.subscribe((t=>t&&this.emit("over",t))),v=n.subscribe((t=>t&&this.emit("leave",t))),p=s.subscribe((t=>t&&this.emit("dblclick",t))),g=a.subscribe((t=>t&&this.toggleCursor(!0))),m=d.subscribe((t=>t&&this.toggleCursor(!1)));this.subscriptions.push((()=>{c(),u(),v(),p(),g(),m(),l(e),l(i),l(n),l(s),l(a),l(d)}));const f=h(t),b=r((()=>{const t=f.signal.value;t&&("start"===t.type?this.toggleCursor(!0):"move"===t.type&&void 0!==t.deltaX?this.onMove(t.deltaX):"end"===t.type&&(this.toggleCursor(!1),this.drag&&this.emit("update-end")))}),[f.signal]);this.subscriptions.push((()=>{b(),f.cleanup()})),this.contentEditable&&this.content&&(this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener))}_onUpdate(t,e,i){var n;if(!(null===(n=this.element)||void 0===n?void 0:n.parentElement))return;const{width:s}=this.element.parentElement.getBoundingClientRect(),r=t/s*this.totalDuration;let o=e&&"start"!==e?this.start:this.start+r,l=e&&"end"!==e?this.end:this.end+r;const h=void 0!==i;h&&this.updatingSide&&this.updatingSide!==e&&("start"===this.updatingSide?o=i:l=i),o=Math.max(0,o),l=Math.min(this.totalDuration,l);const a=l-o;this.updatingSide=e;const d=a>=this.minLength&&a<=this.maxLength;o<=l&&(d||h)&&(this.start=o,this.end=l,this.renderPosition(),this.emit("update",e))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&(this.resizeStart||"start"!==e)&&(this.resizeEnd||"end"!==e)&&this._onUpdate(t,e)}onEndResizing(t){this.resize&&(this.emit("update-end",t),this.updatingSide=void 0)}onContentClick(t){t.stopPropagation();t.target.focus(),this.emit("click",t)}onContentBlur(){this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(t){this.emit("play",t&&this.end!==this.start?this.end:void 0)}getContent(t=!1){var e;return t?this.content||void 0:this.element instanceof HTMLElement?(null===(e=this.content)||void 0===e?void 0:e.innerHTML)||void 0:""}setContent(t){var e;if(this.element)if(this.content&&this.contentEditable&&(this.contentClickListener&&this.content.removeEventListener("click",this.contentClickListener),this.contentBlurListener&&this.content.removeEventListener("blur",this.contentBlurListener)),null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){const e=this.start===this.end;this.content=n("div",{style:{padding:`0.2em ${e?.2:.4}em`,display:"inline-block"},textContent:t})}else this.content=t;this.contentEditable&&(this.content.contentEditable="true",this.contentClickListener=t=>this.onContentClick(t),this.contentBlurListener=()=>this.onContentBlur(),this.content.addEventListener("click",this.contentClickListener),this.content.addEventListener("blur",this.contentBlurListener)),this.content.setAttribute("part","region-content"),this.element.appendChild(this.content),this.emit("content-changed")}else this.content=void 0}setOptions(t){var e,i;if(this.element){if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart(),this.emit("render")}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}void 0!==t.resizeStart&&(this.resizeStart=t.resizeStart),void 0!==t.resizeEnd&&(this.resizeEnd=t.resizeEnd)}}remove(){this.isRemoved=!0,this.emit("remove"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.content&&this.contentEditable&&(this.contentClickListener&&(this.content.removeEventListener("click",this.contentClickListener),this.contentClickListener=void 0),this.contentBlurListener&&(this.content.removeEventListener("blur",this.contentBlurListener),this.contentBlurListener=void 0)),this.element&&(this.element.remove(),this.element=null),this.unAll()}}class d extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new d(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer),this.subscriptions.push(this.wavesurfer.on("ready",(t=>{this.regions.forEach((e=>e._setTotalDuration(t)))})));let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){return n("div",{part:"regions-container",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"5",pointerEvents:"none"}})}getRegions(){return this.regions}avoidOverlapping(t){t.content&&!t.isRemoved&&setTimeout((()=>{const e=t.content,i=e.getBoundingClientRect(),n=this.regions.indexOf(t),s=this.regions.slice(0,n).filter((t=>!t.isRemoved)).map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height+2:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}),10)}adjustScroll(t){var e,i;if(!t.element)return;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),l=t.element.getBoundingClientRect(),h=l.left-o.left,a=l.right-o.left;h<0?n.scrollLeft+=h:a>s&&(n.scrollLeft+=a-s)}virtualAppend(t,e,i){const n=()=>{if(!this.wavesurfer)return;const n=this.wavesurfer.getWidth(),s=this.wavesurfer.getScroll(),r=e.clientWidth,o=this.wavesurfer.getDuration(),l=Math.round(t.start/o*r),h=l+(Math.round((t.end-t.start)/o*r)||1)>s&&l<s+n;h&&!i.parentElement?e.appendChild(i):!h&&i.parentElement&&i.remove()};setTimeout((()=>{if(!this.wavesurfer||!t.element)return;n();const e=this.wavesurfer.on("scroll",n),i=this.wavesurfer.on("zoom",n),s=this.wavesurfer.on("resize",n),r=t.on("render",n);this.subscriptions.push(e,i,s,r),t.once("remove",(()=>{e(),i(),s(),r()}))}),0)}saveRegion(t){if(!t.element)return;this.virtualAppend(t,this.regionsContainer,t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(e=>{e||this.adjustScroll(t),this.emit("region-update",t,e)})),t.on("update-end",(e=>{this.avoidOverlapping(t),this.emit("region-updated",t,e)})),t.on("play",(e=>{var i;null===(i=this.wavesurfer)||void 0===i||i.play(t.start,e)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.on("content-changed",(()=>{this.emit("region-content-changed",t)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const n=this.wavesurfer.getDuration(),s=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,r=new a(t,n,s);return this.emit("region-initialized",r),n?this.saveRegion(r):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{r._setTotalDuration(t),this.saveRegion(r)}))),r}enableDragSelection(t,e=3){var i;const n=null===(i=this.wavesurfer)||void 0===i?void 0:i.getWrapper();if(!(n&&n instanceof HTMLElement))return()=>{};let s=null,o=0,l=0;const d=h(n,{threshold:e}),c=r((()=>{var e,i;const n=d.signal.value;if(n)if("start"===n.type){if(o=n.x,!this.wavesurfer)return;const r=this.wavesurfer.getDuration(),h=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,{width:d}=this.wavesurfer.getWrapper().getBoundingClientRect();l=o/d*r;const c=n.x/d*r,u=(n.x+5)/d*r;s=new a(Object.assign(Object.assign({},t),{start:c,end:u}),r,h),this.emit("region-initialized",s),s.element&&this.regionsContainer.appendChild(s.element)}else"move"===n.type&&void 0!==n.deltaX?s&&s._onUpdate(n.deltaX,n.x>o?"end":"start",l):"end"===n.type&&s&&(this.saveRegion(s),s.updatingSide=void 0,s=null)}),[d.signal]);return()=>{c(),d.cleanup()}}clearRegions(){this.regions.slice().forEach((t=>t.remove())),this.regions=[]}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}export{d as default};