wavesurfer.js 6.5.1 → 7.0.0-alpha.1

package/src/plugin/cursor/index.js

@@ -1,350 +0,0 @@
-/**
- * @typedef {Object} CursorPluginParams
- * @property {?boolean} deferInit Set to true to stop auto init in `addPlugin()`
- * @property {boolean} hideOnBlur=true Hide the cursor when the mouse leaves the
- * waveform
- * @property {string} width='1px' The width of the cursor
- * @property {string} color='black' The color of the cursor
- * @property {number|string} opacity='0.25' The opacity of the cursor
- * @property {string} style='solid' The border style of the cursor
- * @property {number} zIndex=3 The z-index of the cursor element
- * @property {object} customStyle An object with custom styles which are applied
- * to the cursor element
- * @property {boolean} showTime=false Show the time on the cursor.
- * @property {object} customShowTimeStyle An object with custom styles which are
- * applied to the cursor time element.
- * @property {boolean} followCursorY=false Use `true` to make the time on
- * the cursor follow the x and the y-position of the mouse. Use `false` to make the
- * it only follow the x-position of the mouse.
- * @property {function} formatTimeCallback Formats the timestamp on the cursor.
- * @property {boolean} isDestroyCalled  true if called destroy before the ready event fired
- */
-
-/**
- * Displays a thin line at the position of the cursor on the waveform.
- *
- * @implements {PluginClass}
- * @extends {Observer}
- * @example
- * // es6
- * import CursorPlugin from 'wavesurfer.cursor.js';
- *
- * // commonjs
- * var CursorPlugin = require('wavesurfer.cursor.js');
- *
- * // if you are using <script> tags
- * var CursorPlugin = window.WaveSurfer.cursor;
- *
- * // ... initialising wavesurfer with the plugin
- * var wavesurfer = WaveSurfer.create({
- *   // wavesurfer options ...
- *   plugins: [
- *     CursorPlugin.create({
- *       // plugin options ...
- *     })
- *   ]
- * });
- */
-export default class CursorPlugin {
-    /**
-     * Cursor 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  {CursorPluginParams} params parameters use to initialise the
-     * plugin
-     * @return {PluginDefinition} an object representing the plugin
-     */
-    static create(params) {
-        return {
-            name: 'cursor',
-            deferInit: params && params.deferInit ? params.deferInit : false,
-            params: params,
-            staticProps: {},
-            instance: CursorPlugin
-        };
-    }
-
-    /**
-     * @type {CursorPluginParams}
-     */
-    defaultParams = {
-        hideOnBlur: true,
-        width: '1px',
-        color: 'black',
-        opacity: '0.25',
-        style: 'solid',
-        zIndex: 4,
-        customStyle: {},
-        customShowTimeStyle: {},
-        showTime: false,
-        followCursorY: false,
-        formatTimeCallback: null
-    };
-
-    /**
-     * @param {object} e Mouse move event
-     */
-    _onMousemove = e => {
-        const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
-        const bbox = this.wrapper.getBoundingClientRect();
-        let y = 0;
-        let x = this.wrapper.scrollLeft + event.clientX - bbox.left;
-        const displayTimeWidth = this.displayTime ? this.displayTime.getBoundingClientRect().width : 0;
-        let flip = bbox.right < event.clientX + displayTimeWidth;
-
-        if (this.params.showTime && this.params.followCursorY) {
-            // follow y-position of the mouse
-            y = event.clientY - (bbox.top + bbox.height / 2);
-        }
-
-        this.updateCursorPosition(x, y, flip);
-    };
-
-    /**
-     * @returns {void}
-     */
-    _onMouseenter = () => this.showCursor();
-
-    /**
-     * @returns {void}
-     */
-    _onMouseleave = () => this.hideCursor();
-
-    /**
-     * Construct the plugin class. You probably want to use `CursorPlugin.create`
-     * instead.
-     *
-     * @param {CursorPluginParams} params Plugin parameters
-     * @param {object} ws Wavesurfer instance
-     */
-    constructor(params, ws) {
-        this.wavesurfer = ws;
-        this.style = ws.util.style;
-        this.util = ws.util;
-        /**
-         * The cursor HTML element
-         *
-         * @type {?HTMLElement}
-         */
-        this.cursor = null;
-        /**
-         * displays the time next to the cursor
-         *
-         * @type {?HTMLElement}
-         */
-        this.showTime = null;
-        /**
-         * The html container that will display the time
-         *
-         * @type {?HTMLElement}
-         */
-        this.displayTime = null;
-        /**
-         * true when `destroy` was called before `ready` event
-         * @type {boolean}
-         */
-        this.isDestroyCalled = false;
-
-        this.params = Object.assign({}, this.defaultParams, params);
-    }
-
-    _onReady() {
-        if (this.isDestroyCalled) {
-            return;
-        }
-        this.wrapper = this.wavesurfer.drawer.wrapper;
-        this.cursor = this.util.withOrientation(this.wrapper.appendChild(
-            document.createElement('cursor'),
-        ), this.wavesurfer.params.vertical);
-
-        this.style(this.cursor,
-            Object.assign(
-                {
-                    position: 'absolute',
-                    zIndex: this.params.zIndex,
-                    left: 0,
-                    top: 0,
-                    bottom: 0,
-                    width: '0',
-                    display: 'flex',
-                    borderRightStyle: this.params.style,
-                    borderRightWidth: this.params.width,
-                    borderRightColor: this.params.color,
-                    opacity: this.params.opacity,
-                    pointerEvents: 'none'
-                },
-                this.params.customStyle
-            )
-        );
-
-        if (this.params.showTime) {
-            this.showTime = this.util.withOrientation(this.wrapper.appendChild(
-                document.createElement('showTitle')
-            ), this.wavesurfer.params.vertical);
-            this.style(
-                this.showTime,
-                Object.assign(
-                    {
-                        position: 'absolute',
-                        zIndex: this.params.zIndex,
-                        left: 0,
-                        top: 0,
-                        bottom: 0,
-                        width: 'auto',
-                        display: 'flex',
-                        opacity: this.params.opacity,
-                        pointerEvents: 'none',
-                        height: '100%'
-                    },
-                    this.params.customStyle
-                )
-            );
-
-            this.displayTime = this.util.withOrientation(this.showTime.appendChild(
-                document.createElement('div'),
-            ), this.wavesurfer.params.vertical);
-
-            this.style(this.displayTime,
-                Object.assign(
-                    {
-                        display: 'inline',
-                        pointerEvents: 'none',
-                        margin: 'auto',
-                        visibility: 'hidden' // initial value will be hidden just for measuring purpose
-                    },
-                    this.params.customShowTimeStyle
-                )
-            );
-
-            // initial value to measure display width
-            this.displayTime.innerHTML = this.formatTime(0);
-        }
-
-        this.wrapper.addEventListener('mousemove', this._onMousemove);
-        if (this.params.hideOnBlur) {
-            // ensure elements are hidden initially
-            this.hideCursor();
-            this.wrapper.addEventListener('mouseenter', this._onMouseenter);
-            this.wrapper.addEventListener('mouseleave', this._onMouseleave);
-        }
-    }
-
-    /**
-     * Initialise the plugin (used by the Plugin API)
-     */
-    init() {
-        if (this.wavesurfer.isReady) {
-            this._onReady();
-        } else {
-            this.wavesurfer.once('ready', () => this._onReady());
-        }
-    }
-
-    /**
-     * Destroy the plugin (used by the Plugin API)
-     */
-    destroy() {
-        if (!this.cursorTime || !this.showTime){
-            this.isDestroyCalled = true;
-            return;
-        }
-        if (this.params.showTime) {
-            this.showTime && this.showTime.remove();
-        }
-        this.cursor && this.cursor.remove();
-        this.wrapper.removeEventListener('mousemove', this._onMousemove);
-        if (this.params.hideOnBlur) {
-            this.wrapper.removeEventListener('mouseenter', this._onMouseenter);
-            this.wrapper.removeEventListener('mouseleave', this._onMouseleave);
-        }
-    }
-
-    /**
-     * Update the cursor position
-     *
-     * @param {number} xpos The x offset of the cursor in pixels
-     * @param {number} ypos The y offset of the cursor in pixels
-     * @param {boolean} flip Flag to flip duration text from right to left
-     */
-    updateCursorPosition(xpos, ypos, flip = false) {
-        this.style(this.cursor, {
-            left: `${xpos}px`
-        });
-        if (this.params.showTime) {
-            const duration = this.wavesurfer.getDuration();
-            const elementWidth =
-                this.wavesurfer.drawer.width /
-                this.wavesurfer.params.pixelRatio;
-            const scrollWidth = this.wavesurfer.drawer.getScrollX();
-
-            const scrollTime =
-                (duration / this.wavesurfer.drawer.width) * scrollWidth;
-
-            const timeValue =
-                Math.max(0, ((xpos - this.wrapper.scrollLeft) / elementWidth) * duration) + scrollTime;
-            const formatValue = this.formatTime(timeValue);
-            if (flip) {
-                const textOffset = this.displayTime.getBoundingClientRect().width;
-                xpos -= textOffset;
-            }
-            this.style(this.showTime, {
-                left: `${xpos}px`,
-                top: `${ypos}px`
-            });
-            this.style(this.displayTime, {
-                visibility: 'visible'
-            });
-            this.displayTime.innerHTML = `${formatValue}`;
-        }
-    }
-
-    /**
-     * Show the cursor
-     */
-    showCursor() {
-        this.style(this.cursor, {
-            display: 'flex'
-        });
-        if (this.params.showTime) {
-            this.style(this.showTime, {
-                display: 'flex'
-            });
-        }
-    }
-
-    /**
-     * Hide the cursor
-     */
-    hideCursor() {
-        this.style(this.cursor, {
-            display: 'none'
-        });
-        if (this.params.showTime) {
-            this.style(this.showTime, {
-                display: 'none'
-            });
-        }
-    }
-
-    /**
-     * Format the timestamp for `cursorTime`.
-     *
-     * @param {number} cursorTime Time in seconds
-     * @returns {string} Formatted timestamp
-     */
-    formatTime(cursorTime) {
-        cursorTime = isNaN(cursorTime) ? 0 : cursorTime;
-        if (this.params.formatTimeCallback) {
-            return this.params.formatTimeCallback(cursorTime);
-        }
-        return [cursorTime].map(time =>
-            [
-                Math.floor((time % 3600) / 60), // minutes
-                ('00' + Math.floor(time % 60)).slice(-2), // seconds
-                ('000' + Math.floor((time % 1) * 1000)).slice(-3) // milliseconds
-            ].join(':')
-        );
-    }
-}

package/src/plugin/elan/index.js

@@ -1,307 +0,0 @@
-/**
- * @typedef {Object} ElanPluginParams
- * @property {string|HTMLElement} container CSS selector or HTML element where
- * the ELAN information should be rendered.
- * @property {string} url The location of ELAN XML data
- * @property {?boolean} deferInit Set to true to manually call
- * @property {?Object} tiers If set only shows the data tiers with the `TIER_ID`
- * in this map.
- */
-
-/**
- * Downloads and renders ELAN audio transcription documents alongside the
- * waveform.
- *
- * @implements {PluginClass}
- * @extends {Observer}
- * @example
- * // es6
- * import ElanPlugin from 'wavesurfer.elan.js';
- *
- * // commonjs
- * var ElanPlugin = require('wavesurfer.elan.js');
- *
- * // if you are using <script> tags
- * var ElanPlugin = window.WaveSurfer.elan;
- *
- * // ... initialising wavesurfer with the plugin
- * var wavesurfer = WaveSurfer.create({
- *   // wavesurfer options ...
- *   plugins: [
- *     ElanPlugin.create({
- *       // plugin options ...
- *     })
- *   ]
- * });
- */
-export default class ElanPlugin {
-    /**
-     * Elan 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  {ElanPluginParams} params parameters use to initialise the plugin
-     * @return {PluginDefinition} an object representing the plugin
-     */
-    static create(params) {
-        return {
-            name: 'elan',
-            deferInit: params && params.deferInit ? params.deferInit : false,
-            params: params,
-            instance: ElanPlugin
-        };
-    }
-
-    Types = {
-        ALIGNABLE_ANNOTATION: 'ALIGNABLE_ANNOTATION',
-        REF_ANNOTATION: 'REF_ANNOTATION'
-    };
-
-    constructor(params, ws) {
-        this.data = null;
-        this.params = params;
-        this.container =
-            'string' == typeof params.container
-                ? document.querySelector(params.container)
-                : params.container;
-
-        if (!this.container) {
-            throw Error('No container for ELAN');
-        }
-    }
-
-    init() {
-        this.bindClick();
-
-        if (this.params.url) {
-            this.load(this.params.url);
-        }
-    }
-
-    destroy() {
-        this.container.removeEventListener('click', this._onClick);
-        this.container.removeChild(this.table);
-    }
-
-    load(url) {
-        this.loadXML(url, xml => {
-            this.data = this.parseElan(xml);
-            this.render();
-            this.fireEvent('ready', this.data);
-        });
-    }
-
-    loadXML(url, callback) {
-        const xhr = new XMLHttpRequest();
-        xhr.open('GET', url, true);
-        xhr.responseType = 'document';
-        xhr.send();
-        xhr.addEventListener('load', e => {
-            callback && callback(e.target.responseXML);
-        });
-    }
-
-    parseElan(xml) {
-        const _forEach = Array.prototype.forEach;
-        const _map = Array.prototype.map;
-
-        const data = {
-            media: {},
-            timeOrder: {},
-            tiers: [],
-            annotations: {},
-            alignableAnnotations: []
-        };
-
-        const header = xml.querySelector('HEADER');
-        const inMilliseconds =
-            header.getAttribute('TIME_UNITS') == 'milliseconds';
-        const media = header.querySelector('MEDIA_DESCRIPTOR');
-        data.media.url = media.getAttribute('MEDIA_URL');
-        data.media.type = media.getAttribute('MIME_TYPE');
-
-        const timeSlots = xml.querySelectorAll('TIME_ORDER TIME_SLOT');
-        const timeOrder = {};
-        _forEach.call(timeSlots, slot => {
-            let value = parseFloat(slot.getAttribute('TIME_VALUE'));
-            // If in milliseconds, convert to seconds with rounding
-            if (inMilliseconds) {
-                value = Math.round(value * 1e2) / 1e5;
-            }
-            timeOrder[slot.getAttribute('TIME_SLOT_ID')] = value;
-        });
-
-        data.tiers = _map.call(xml.querySelectorAll('TIER'), tier => ({
-            id: tier.getAttribute('TIER_ID'),
-            linguisticTypeRef: tier.getAttribute('LINGUISTIC_TYPE_REF'),
-            defaultLocale: tier.getAttribute('DEFAULT_LOCALE'),
-            annotations: _map.call(
-                tier.querySelectorAll('REF_ANNOTATION, ALIGNABLE_ANNOTATION'),
-                node => {
-                    const annot = {
-                        type: node.nodeName,
-                        id: node.getAttribute('ANNOTATION_ID'),
-                        ref: node.getAttribute('ANNOTATION_REF'),
-                        value: node
-                            .querySelector('ANNOTATION_VALUE')
-                            .textContent.trim()
-                    };
-
-                    if (this.Types.ALIGNABLE_ANNOTATION == annot.type) {
-                        // Add start & end to alignable annotation
-                        annot.start =
-                            timeOrder[node.getAttribute('TIME_SLOT_REF1')];
-                        annot.end =
-                            timeOrder[node.getAttribute('TIME_SLOT_REF2')];
-                        // Add to the list of alignable annotations
-                        data.alignableAnnotations.push(annot);
-                    }
-
-                    // Additionally, put into the flat map of all annotations
-                    data.annotations[annot.id] = annot;
-
-                    return annot;
-                }
-            )
-        }));
-
-        // Create JavaScript references between annotations
-        data.tiers.forEach(tier => {
-            tier.annotations.forEach(annot => {
-                if (null != annot.ref) {
-                    annot.reference = data.annotations[annot.ref];
-                }
-            });
-        });
-
-        // Sort alignable annotations by start & end
-        data.alignableAnnotations.sort((a, b) => {
-            let d = a.start - b.start;
-            if (d == 0) {
-                d = b.end - a.end;
-            }
-            return d;
-        });
-
-        data.length = data.alignableAnnotations.length;
-
-        return data;
-    }
-
-    render() {
-        // apply tiers filter
-        let tiers = this.data.tiers;
-        if (this.params.tiers) {
-            tiers = tiers.filter(tier => tier.id in this.params.tiers);
-        }
-
-        // denormalize references to alignable annotations
-        const backRefs = {};
-        let indeces = {};
-        tiers.forEach((tier, index) => {
-            tier.annotations.forEach(annot => {
-                if (
-                    annot.reference &&
-                    annot.reference.type == this.Types.ALIGNABLE_ANNOTATION
-                ) {
-                    if (!(annot.reference.id in backRefs)) {
-                        backRefs[annot.ref] = {};
-                    }
-                    backRefs[annot.ref][index] = annot;
-                    indeces[index] = true;
-                }
-            });
-        });
-        indeces = Object.keys(indeces).sort();
-
-        this.renderedAlignable = this.data.alignableAnnotations.filter(
-            alignable => backRefs[alignable.id]
-        );
-
-        // table
-        const table = (this.table = document.createElement('table'));
-        table.className = 'wavesurfer-annotations';
-
-        // head
-        const thead = document.createElement('thead');
-        const headRow = document.createElement('tr');
-        thead.appendChild(headRow);
-        table.appendChild(thead);
-        const th = document.createElement('th');
-        th.textContent = 'Time';
-        th.className = 'wavesurfer-time';
-        headRow.appendChild(th);
-        indeces.forEach(index => {
-            const tier = tiers[index];
-            const th = document.createElement('th');
-            th.className = 'wavesurfer-tier-' + tier.id;
-            th.textContent = tier.id;
-            if (this.params.tiers) { th.style.width = this.params.tiers[tier.id]; }
-            headRow.appendChild(th);
-        });
-
-        // body
-        const tbody = document.createElement('tbody');
-        table.appendChild(tbody);
-        this.renderedAlignable.forEach(alignable => {
-            const row = document.createElement('tr');
-            row.id = 'wavesurfer-alignable-' + alignable.id;
-            tbody.appendChild(row);
-
-            const td = document.createElement('td');
-            td.className = 'wavesurfer-time';
-            td.textContent =
-                alignable.start.toFixed(1) + '–' + alignable.end.toFixed(1);
-            row.appendChild(td);
-
-            const backRef = backRefs[alignable.id];
-            indeces.forEach(index => {
-                const tier = tiers[index];
-                const td = document.createElement('td');
-                const annotation = backRef[index];
-                if (annotation) {
-                    td.id = 'wavesurfer-annotation-' + annotation.id;
-                    td.dataset.ref = alignable.id;
-                    td.dataset.start = alignable.start;
-                    td.dataset.end = alignable.end;
-                    td.textContent = annotation.value;
-                }
-                td.className = 'wavesurfer-tier-' + tier.id;
-                row.appendChild(td);
-            });
-        });
-
-        this.container.innerHTML = '';
-        this.container.appendChild(table);
-    }
-
-    bindClick() {
-        this._onClick = e => {
-            const ref = e.target.dataset.ref;
-            if (null != ref) {
-                const annot = this.data.annotations[ref];
-                if (annot) {
-                    this.fireEvent('select', annot.start, annot.end);
-                }
-            }
-        };
-        this.container.addEventListener('click', this._onClick);
-    }
-
-    getRenderedAnnotation(time) {
-        let result;
-        this.renderedAlignable.some(annotation => {
-            if (annotation.start <= time && annotation.end >= time) {
-                result = annotation;
-                return true;
-            }
-            return false;
-        });
-        return result;
-    }
-
-    getAnnotationNode(annotation) {
-        return document.getElementById('wavesurfer-alignable-' + annotation.id);
-    }
-}