wavesurfer.js 6.5.1 → 7.0.0-alpha.1

package/src/plugin/minimap/index.js

@@ -1,403 +0,0 @@
-/*eslint no-console: ["error", { allow: ["warn"] }] */
-/**
- * @typedef {Object} MinimapPluginParams
- * @desc Extends the `WavesurferParams` wavesurfer was initialised with
- * @property {?string|HTMLElement} container CSS selector or HTML element where
- * the map should be rendered. By default it is simply appended
- * after the waveform.
- * @property {?boolean} deferInit Set to true to manually call
- * `initPlugin('minimap')`
- */
-
-/**
- * Renders a smaller version waveform as a minimap of the main waveform.
- *
- * @implements {PluginClass}
- * @extends {Observer}
- * @example
- * // es6
- * import MinimapPlugin from 'wavesurfer.minimap.js';
- *
- * // commonjs
- * var MinimapPlugin = require('wavesurfer.minimap.js');
- *
- * // if you are using <script> tags
- * var MinimapPlugin = window.WaveSurfer.minimap;
- *
- * // ... initialising wavesurfer with the plugin
- * var wavesurfer = WaveSurfer.create({
- *   // wavesurfer options ...
- *   plugins: [
- *     MinimapPlugin.create({
- *       // plugin options ...
- *     })
- *   ]
- * });
- */
-export default class MinimapPlugin {
-    /**
-     * Minimap plugin definition factory
-     *
-     * This function must be used to create a plugin definition which can be
-     * used by wavesurfer to correctly instantiate the plugin.
-     *
-     * @param  {MinimapPluginParams} params parameters use to initialise the plugin
-     * @return {PluginDefinition} an object representing the plugin
-     */
-    static create(params) {
-        return {
-            name: 'minimap',
-            deferInit: params && params.deferInit ? params.deferInit : false,
-            params: params,
-            staticProps: {},
-            instance: MinimapPlugin
-        };
-    }
-
-    constructor(params, ws) {
-        this.params = Object.assign(
-            {},
-            ws.params,
-            {
-                showRegions: false,
-                regionsPluginName: params.regionsPluginName || 'regions',
-                showOverview: false,
-                overviewBorderColor: 'green',
-                overviewBorderSize: 2,
-                // the container should be different
-                container: false,
-                height: Math.max(Math.round(ws.params.height / 4), 20)
-            },
-            params,
-            {
-                scrollParent: false,
-                fillParent: true
-            }
-        );
-        // if container is a selector, get the element
-        if (typeof params.container === 'string') {
-            const el = document.querySelector(params.container);
-            if (!el) {
-                console.warn(
-                    `Wavesurfer minimap container ${params.container} was not found! The minimap will be automatically appended below the waveform.`
-                );
-            }
-            this.params.container = el;
-        }
-        // if no container is specified add a new element and insert it
-        if (!params.container) {
-            this.params.container = ws.util.style(
-                document.createElement('minimap'),
-                {
-                    display: 'block'
-                }
-            );
-        }
-        this.drawer = new ws.Drawer(this.params.container, this.params);
-        this.wavesurfer = ws;
-        this.util = ws.util;
-        this.cleared = false;
-        this.renderEvent = 'redraw';
-        this.overviewRegion = null;
-        this.regionsPlugin = this.wavesurfer[this.params.regionsPluginName];
-
-        this.drawer.createWrapper();
-        this.createElements();
-        let isInitialised = false;
-
-        // ws ready event listener
-        this._onShouldRender = () => {
-            // only bind the events in the first run
-            if (!isInitialised) {
-                this.bindWavesurferEvents();
-                this.bindMinimapEvents();
-                isInitialised = true;
-            }
-            // if there is no such element, append it to the container (below
-            // the waveform)
-            if (!document.body.contains(this.params.container)) {
-                ws.container.insertBefore(this.params.container, null);
-            }
-
-            if (this.regionsPlugin && this.params.showRegions) {
-                this.drawRegions();
-            }
-            this.render();
-        };
-
-        this._onAudioprocess = currentTime => {
-            this.drawer.progress(this.wavesurfer.backend.getPlayedPercents());
-        };
-
-        // ws seek event listener
-        this._onSeek = () =>
-            this.drawer.progress(ws.backend.getPlayedPercents());
-
-        // event listeners for the overview region
-        this._onScroll = e => {
-            if (!this.draggingOverview) {
-                const orientedTarget = this.util.withOrientation(e.target, this.wavesurfer.params.vertical);
-                this.moveOverviewRegion(orientedTarget.scrollLeft / this.ratio);
-            }
-        };
-        this._onMouseover = e => {
-            if (this.draggingOverview) {
-                this.draggingOverview = false;
-            }
-        };
-        let prevWidth = 0;
-        this._onResize = ws.util.debounce(() => {
-            if (prevWidth != this.drawer.wrapper.clientWidth) {
-                prevWidth = this.drawer.wrapper.clientWidth;
-                this.render();
-                this.drawer.progress(
-                    this.wavesurfer.backend.getPlayedPercents()
-                );
-            }
-        });
-        this._onLoading = percent => {
-            if (percent >= 100) {
-                this.cleared = false;
-                return;
-            }
-            if (this.cleared === true) {
-                return;
-            }
-            const len = this.drawer.getWidth();
-            this.drawer.drawPeaks([0], len, 0, len);
-            this.cleared = true;
-        };
-        this._onZoom = e => {
-            this.render();
-        };
-        this.wavesurfer.on('zoom', this._onZoom);
-    }
-
-    init() {
-        if (this.wavesurfer.isReady) {
-            this._onShouldRender();
-        }
-        this.wavesurfer.on(this.renderEvent, this._onShouldRender);
-    }
-
-    destroy() {
-        window.removeEventListener('resize', this._onResize, true);
-        window.removeEventListener('orientationchange', this._onResize, true);
-        this.wavesurfer.drawer.wrapper.removeEventListener(
-            'mouseover',
-            this._onMouseover
-        );
-        this.wavesurfer.un(this.renderEvent, this._onShouldRender);
-        this.wavesurfer.un('seek', this._onSeek);
-        this.wavesurfer.un('scroll', this._onScroll);
-        this.wavesurfer.un('audioprocess', this._onAudioprocess);
-        this.wavesurfer.un('zoom', this._onZoom);
-        this.wavesurfer.un('loading', this._onLoading);
-        this.drawer.destroy();
-        this.overviewRegion = null;
-        this.unAll();
-    }
-
-    drawRegions() {
-        this.regions = {};
-
-        this.wavesurfer.on('region-created', region => {
-            this.regions[region.id] = region;
-            this.drawer.wrapper && this.renderRegions();
-        });
-
-        this.wavesurfer.on('region-updated', region => {
-            this.regions[region.id] = region;
-            this.drawer.wrapper && this.renderRegions();
-        });
-
-        this.wavesurfer.on('region-removed', region => {
-            delete this.regions[region.id];
-            this.drawer.wrapper && this.renderRegions();
-        });
-    }
-
-    renderRegions() {
-        const regionElements = this.drawer.wrapper.querySelectorAll('region');
-        let i;
-        for (i = 0; i < regionElements.length; ++i) {
-            this.drawer.wrapper.removeChild(regionElements[i]);
-        }
-
-        Object.keys(this.regions).forEach(id => {
-            const region = this.regions[id];
-            const width =
-                this.getWidth() *
-                ((region.end - region.start) / this.wavesurfer.getDuration());
-            const left =
-                this.getWidth() *
-                (region.start / this.wavesurfer.getDuration());
-            const regionElement = this.util.style(
-                document.createElement('region'),
-                {
-                    height: 'inherit',
-                    backgroundColor: region.color,
-                    width: width + 'px',
-                    left: left + 'px',
-                    display: 'block',
-                    position: 'absolute'
-                }
-            );
-            regionElement.classList.add(id);
-            this.drawer.wrapper.appendChild(regionElement);
-        });
-    }
-
-    createElements() {
-        this.drawer.createElements();
-        if (this.params.showOverview) {
-            this.overviewRegion = this.util.withOrientation(
-                this.drawer.wrapper.appendChild(document.createElement('overview')),
-                this.wavesurfer.params.vertical
-            );
-
-            this.util.style(
-                this.overviewRegion,
-                {
-                    top: 0,
-                    bottom: 0,
-                    width: '0px',
-                    display: 'block',
-                    position: 'absolute',
-                    cursor: 'move',
-                    border:
-                        this.params.overviewBorderSize +
-                        'px solid ' +
-                        this.params.overviewBorderColor,
-                    zIndex: 2,
-                    opacity: this.params.overviewOpacity
-                }
-            );
-        }
-    }
-
-    bindWavesurferEvents() {
-        window.addEventListener('resize', this._onResize, true);
-        window.addEventListener('orientationchange', this._onResize, true);
-        this.wavesurfer.on('audioprocess', this._onAudioprocess);
-        this.wavesurfer.on('seek', this._onSeek);
-        this.wavesurfer.on('loading', this._onLoading);
-        if (this.params.showOverview) {
-            this.wavesurfer.on('scroll', this._onScroll);
-            this.wavesurfer.drawer.wrapper.addEventListener(
-                'mouseover',
-                this._onMouseover
-            );
-        }
-    }
-
-    bindMinimapEvents() {
-        const positionMouseDown = {
-            clientX: 0,
-            clientY: 0
-        };
-        let relativePositionX = 0;
-        let seek = true;
-
-        // the following event listeners will be destroyed by using
-        // this.unAll() and nullifying the DOM node references after
-        // removing them
-        if (this.params.interact) {
-            this.drawer.wrapper.addEventListener('click', event => {
-                this.fireEvent('click', event, this.drawer.handleEvent(event));
-            });
-
-            this.on('click', (event, position) => {
-                if (seek) {
-                    this.drawer.progress(position);
-                    this.wavesurfer.seekAndCenter(position);
-                } else {
-                    seek = true;
-                }
-            });
-        }
-
-        if (this.params.showOverview) {
-            this.overviewRegion.domElement.addEventListener('mousedown', e => {
-                const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
-                this.draggingOverview = true;
-                relativePositionX = event.layerX;
-                positionMouseDown.clientX = event.clientX;
-                positionMouseDown.clientY = event.clientY;
-            });
-
-            this.drawer.wrapper.addEventListener('mousemove', e => {
-                if (this.draggingOverview) {
-                    const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
-                    this.moveOverviewRegion(
-                        event.clientX -
-                        this.drawer.container.getBoundingClientRect().left -
-                        relativePositionX
-                    );
-                }
-            });
-
-            this.drawer.wrapper.addEventListener('mouseup', e => {
-                const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
-                if (
-                    positionMouseDown.clientX - event.clientX === 0 &&
-                    positionMouseDown.clientX - event.clientX === 0
-                ) {
-                    seek = true;
-                    this.draggingOverview = false;
-                } else if (this.draggingOverview) {
-                    seek = false;
-                    this.draggingOverview = false;
-                }
-            });
-        }
-    }
-
-    render() {
-        const len = this.drawer.getWidth();
-        const peaks = this.wavesurfer.backend.getPeaks(len, 0, len);
-        this.drawer.drawPeaks(peaks, len, 0, len);
-        this.drawer.progress(this.wavesurfer.backend.getPlayedPercents());
-
-        if (this.params.showOverview) {
-            //get proportional width of overview region considering the respective
-            //width of the drawers
-            this.ratio = this.wavesurfer.drawer.width / this.drawer.width;
-            this.waveShowedWidth = this.wavesurfer.drawer.width / this.ratio;
-            this.waveWidth = this.wavesurfer.drawer.width;
-            this.overviewWidth = this.drawer.container.offsetWidth / this.ratio;
-            this.overviewPosition = 0;
-            this.moveOverviewRegion(
-                this.wavesurfer.drawer.wrapper.scrollLeft / this.ratio
-            );
-            this.util.style(this.overviewRegion, {
-                width: this.overviewWidth + 'px'
-            });
-        }
-    }
-
-    moveOverviewRegion(pixels) {
-        if (pixels < 0) {
-            this.overviewPosition = 0;
-        } else if (
-            pixels + this.overviewWidth <
-            this.drawer.container.offsetWidth
-        ) {
-            this.overviewPosition = pixels;
-        } else {
-            this.overviewPosition =
-                this.drawer.container.offsetWidth - this.overviewWidth;
-        }
-        this.util.style(this.overviewRegion, {
-            left: this.overviewPosition + 'px'
-        });
-        if (this.draggingOverview) {
-            this.wavesurfer.drawer.wrapper.scrollLeft =
-                this.overviewPosition * this.ratio;
-        }
-    }
-
-    getWidth() {
-        return this.drawer.width / this.params.pixelRatio;
-    }
-}

package/src/plugin/playhead/index.js

@@ -1,226 +0,0 @@
-
-/**
- * The playhead plugin separates the notion of the currently playing position from
- * a 'play-start' position.  Having a playhead enables a listening pattern
- * (commonly found in DAWs) that involves listening to a section of a track
- * repeatedly, rather than listening to an entire track in a linear fashion.
- *
- * @implements {PluginClass}
- *
- * @example
- * import PlayheadPlugin from 'wavesurfer.playhead.js';
- *
- * // if you are using <script> tags
- * var PlayheadPlugin = window.WaveSurfer.playhead;
- *
- * // ... initialising wavesurfer with the plugin
- * var wavesurfer = WaveSurfer.create({
- *   // wavesurfer options ...
- *   plugins: [
- *     PlayheadPlugin.create({
- *        movePlayheadOnSeek: true,
- *        drawPlayhead: false,
- *        movePlayheadOnPause: false
- *     })
- *   ]
- * });
- */
-
-const DEFAULT_FILL_COLOR = '#CF2F00';
-
-export default class PlayheadPlugin {
-    /**
-     * @typedef {Object} PlayheadPluginParams
-     * @property {?boolean} draw=true Draw the playhead as a triangle/line
-     * @property {?boolean} moveOnSeek=true Seeking (via clicking) while playing moves the playhead
-     * @property {?boolean} returnOnPause=true Pausing the track returns the seek position to the playhead
-     */
-
-    /**
-     * Playhead plugin definition factory
-     *
-     * This function must be used to create a plugin definition which can be
-     * used by wavesurfer to correctly instantiate the plugin.
-     *
-     * @param {PlayheadPluginParams} params parameters use to initialise the plugin
-     * @since 5.0.0
-     * @return {PluginDefinition} an object representing the plugin
-     */
-    static create(params) {
-        return {
-            name: 'playhead',
-            deferInit: params && params.deferInit ? params.deferInit : false,
-            params: params,
-            instance: PlayheadPlugin
-        };
-    }
-
-    constructor(params, ws) {
-        this.params = params;
-        this.options = {};
-
-        ['draw', 'moveOnSeek', 'returnOnPause'].forEach(opt => {
-            if (opt in params) {
-                this.options[opt] = params[opt];
-            } else {
-                this.options[opt] = true;
-            }
-        });
-
-
-        this.wavesurfer = ws;
-        this.util = ws.util;
-        this.style = this.util.style;
-        this.markerWidth = 21;
-        this.markerHeight = 16;
-        this.playheadTime = 0;
-        this.unFuns = [];
-
-        this._onResize = () => {
-            this._updatePlayheadPosition();
-        };
-
-        this._onReady = () => {
-            this.wrapper = this.wavesurfer.drawer.wrapper;
-            this._updatePlayheadPosition();
-        };
-    }
-
-    _onBackendCreated() {
-        this.wrapper = this.wavesurfer.drawer.wrapper;
-
-        if (this.options.draw) {
-            this._createPlayheadElement();
-            window.addEventListener('resize', this._onResize, true);
-            window.addEventListener('orientationchange', this._onResize, true);
-
-            this.wavesurferOn('zoom', this._onResize);
-        }
-
-        this.wavesurferOn('pause', () => {
-            if ( this.options.returnOnPause ) {
-                this.wavesurfer.setCurrentTime(this.playheadTime);
-            }
-        });
-
-        this.wavesurferOn('seek', () => {
-            if ( this.options.moveOnSeek ) {
-                this.playheadTime = this.wavesurfer.getCurrentTime();
-                this._updatePlayheadPosition();
-            }
-        });
-
-        this.playheadTime = this.wavesurfer.getCurrentTime();
-    }
-
-    wavesurferOn(ev, fn) {
-        let ret = this.wavesurfer.on(ev, fn);
-        this.unFuns.push(() => {
-            this.wavesurfer.un(ev, fn);
-        });
-        return ret;
-    }
-
-    init() {
-        if (this.wavesurfer.isReady) {
-            this._onBackendCreated();
-            this._onReady();
-        } else {
-            let r;
-
-            this.wavesurfer.once('ready', () => this._onReady());
-            this.wavesurfer.once('backend-created', () => this._onBackendCreated());
-        }
-    }
-
-    destroy() {
-        this.unFuns.forEach(f => f());
-        this.unFuns = [];
-
-        this.wrapper.removeChild(this.element);
-
-        window.removeEventListener('resize', this._onResize, true);
-        window.removeEventListener('orientationchange', this._onResize, true);
-    }
-
-    setPlayheadTime(time) {
-        this.playheadTime = time;
-
-        if (!this.wavesurfer.isPlaying()) {
-            this.wavesurfer.setCurrentTime(time);
-        }
-        this._updatePlayheadPosition();
-    }
-
-    _createPointerSVG() {
-        const svgNS = 'http://www.w3.org/2000/svg';
-
-        const el = document.createElementNS(svgNS, 'svg');
-        const path = document.createElementNS(svgNS, 'path');
-
-        el.setAttribute('viewBox', '0 0 33 30');
-        path.setAttribute('d', 'M16.75 31 31.705 5.566A3 3 0 0 0 29.146 1H4.354a3 3 0 0 0-2.56 4.566L16.75 31z');
-        path.setAttribute('stroke', '#979797');
-        path.setAttribute('fill', DEFAULT_FILL_COLOR);
-
-        el.appendChild(path);
-
-        this.style(el, {
-            width: this.markerWidth + 'px',
-            height: this.markerHeight + 'px',
-            cursor: 'pointer',
-            'z-index': 5
-        });
-        return el;
-    }
-
-    _createPlayheadElement() {
-        const el = document.createElement('playhead');
-        el.className = 'wavesurfer-playhead';
-
-        this.style(el, {
-            position: 'absolute',
-            height: '100%',
-            display: 'flex',
-            'flex-direction': 'column'
-        });
-
-        const pointer = this._createPointerSVG();
-        el.appendChild(pointer);
-
-        pointer.addEventListener('click', e => {
-            e.stopPropagation();
-            this.wavesurfer.setCurrentTime(this.playheadTime);
-        });
-
-        const line = document.createElement('div');
-        this.style(line, {
-            'flex-grow': 1,
-            'margin-left': (this.markerWidth / 2 - 0.5) + 'px',
-            background: 'black',
-            width: '1px',
-            opacity: 0.1
-        });
-
-        el.appendChild(line);
-
-        this.element = el;
-        this.wrapper.appendChild(el);
-    }
-
-    _updatePlayheadPosition() {
-        if (!this.element) {
-            return;
-        }
-
-        const duration = this.wavesurfer.getDuration();
-        const elementWidth =
-            this.wavesurfer.drawer.width /
-            this.wavesurfer.params.pixelRatio;
-
-        const positionPct = this.playheadTime / duration;
-        this.style(this.element, {
-            left: ((elementWidth * positionPct) - (this.markerWidth / 2)) + 'px'
-        });
-    }
-}