wavesurfer.js 6.5.0 → 7.0.0-alpha.0

package/src/util/fetch.js

@@ -1,222 +0,0 @@
-/**
- * @since 3.0.0
- */
-
-import Observer from './observer';
-
-class ProgressHandler {
-    /**
-     * Instantiate ProgressHandler
-     *
-     * @param {Observer} instance The `fetchFile` observer instance.
-     * @param {Number} contentLength Content length.
-     * @param {Response} response Response object.
-     */
-    constructor(instance, contentLength, response) {
-        this.instance = instance;
-        this.instance._reader = response.body.getReader();
-
-        this.total = parseInt(contentLength, 10);
-        this.loaded = 0;
-    }
-
-    /**
-     * A method that is called once, immediately after the `ReadableStream``
-     * is constructed.
-     *
-     * @param {ReadableStreamDefaultController} controller Controller instance
-     *     used to control the stream.
-     */
-    start(controller) {
-        const read = () => {
-            // instance._reader.read() returns a promise that resolves
-            // when a value has been received
-            this.instance._reader
-                .read()
-                .then(({ done, value }) => {
-                    // result objects contain two properties:
-                    // done  - true if the stream has already given you all its data.
-                    // value - some data. Always undefined when done is true.
-                    if (done) {
-                        // ensure onProgress called when content-length=0
-                        if (this.total === 0) {
-                            this.instance.onProgress.call(this.instance, {
-                                loaded: this.loaded,
-                                total: this.total,
-                                lengthComputable: false
-                            });
-                        }
-                        // no more data needs to be consumed, close the stream
-                        controller.close();
-                        return;
-                    }
-
-                    this.loaded += value.byteLength;
-                    this.instance.onProgress.call(this.instance, {
-                        loaded: this.loaded,
-                        total: this.total,
-                        lengthComputable: !(this.total === 0)
-                    });
-                    // enqueue the next data chunk into our target stream
-                    controller.enqueue(value);
-                    read();
-                })
-                .catch(error => {
-                    controller.error(error);
-                });
-        };
-
-        read();
-    }
-}
-
-/**
- * Load a file using `fetch`.
- *
- * @param {object} options Request options to use. See example below.
- * @returns {Observer} Observer instance
- * @example
- * // default options
- * let options = {
- *     url: undefined,
- *     method: 'GET',
- *     mode: 'cors',
- *     credentials: 'same-origin',
- *     cache: 'default',
- *     responseType: 'json',
- *     requestHeaders: [],
- *     redirect: 'follow',
- *     referrer: 'client'
- * };
- *
- * // override some options
- * options.url = '../media/demo.wav';
-
- * // available types: 'arraybuffer', 'blob', 'json' or 'text'
- * options.responseType = 'arraybuffer';
- *
- * // make fetch call
- * let request = util.fetchFile(options);
- *
- * // listen for events
- * request.on('progress', e => {
- *     console.log('progress', e);
- * });
- *
- * request.on('success', data => {
- *     console.log('success!', data);
- * });
- *
- * request.on('error', e => {
- *     console.warn('fetchFile error: ', e);
- * });
- */
-export default function fetchFile(options) {
-    if (!options) {
-        throw new Error('fetch options missing');
-    } else if (!options.url) {
-        throw new Error('fetch url missing');
-    }
-    const instance = new Observer();
-    const fetchHeaders = new Headers();
-    const fetchRequest = new Request(options.url);
-
-    // add ability to abort
-    instance.controller = new AbortController();
-
-    // check if headers have to be added
-    if (options && options.requestHeaders) {
-        // add custom request headers
-        options.requestHeaders.forEach(header => {
-            fetchHeaders.append(header.key, header.value);
-        });
-    }
-
-    // parse fetch options
-    const responseType = options.responseType || 'json';
-    const fetchOptions = {
-        method: options.method || 'GET',
-        headers: fetchHeaders,
-        mode: options.mode || 'cors',
-        credentials: options.credentials || 'same-origin',
-        cache: options.cache || 'default',
-        redirect: options.redirect || 'follow',
-        referrer: options.referrer || 'client',
-        signal: instance.controller.signal
-    };
-
-    fetch(fetchRequest, fetchOptions)
-        .then(response => {
-            // store response reference
-            instance.response = response;
-
-            let progressAvailable = true;
-            if (!response.body) {
-                // ReadableStream is not yet supported in this browser
-                // see https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
-                progressAvailable = false;
-            }
-
-            // Server must send CORS header "Access-Control-Expose-Headers: content-length"
-            const contentLength = response.headers.get('content-length');
-            if (contentLength === null) {
-                // Content-Length server response header missing.
-                // Don't evaluate download progress if we can't compare against a total size
-                // see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Expose-Headers
-                progressAvailable = false;
-            }
-
-            if (!progressAvailable) {
-                // not able to check download progress so skip it
-                return response;
-            }
-
-            // fire progress event when during load
-            instance.onProgress = e => {
-                instance.fireEvent('progress', e);
-            };
-
-            return new Response(
-                new ReadableStream(
-                    new ProgressHandler(instance, contentLength, response)
-                ),
-                fetchOptions
-            );
-        })
-        .then(response => {
-            let errMsg;
-            if (response.ok) {
-                switch (responseType) {
-                    case 'arraybuffer':
-                        return response.arrayBuffer();
-
-                    case 'json':
-                        return response.json();
-
-                    case 'blob':
-                        return response.blob();
-
-                    case 'text':
-                        return response.text();
-
-                    default:
-                        errMsg = 'Unknown responseType: ' + responseType;
-                        break;
-                }
-            }
-            if (!errMsg) {
-                errMsg = 'HTTP error status: ' + response.status;
-            }
-            throw new Error(errMsg);
-        })
-        .then(response => {
-            instance.fireEvent('success', response);
-        })
-        .catch(error => {
-            instance.fireEvent('error', error);
-        });
-
-    // return the fetch request
-    instance.fetchRequest = fetchRequest;
-    return instance;
-}

package/src/util/frame.js

@@ -1,13 +0,0 @@
-import reqAnimationFrame from './request-animation-frame';
-
-/**
- * Create a function which will be called at the next requestAnimationFrame
- * cycle
- *
- * @param {function} func The function to call
- *
- * @return {func} The function wrapped within a requestAnimationFrame
- */
-export default function frame(func) {
-    return (...args) => reqAnimationFrame(() => func(...args));
-}

package/src/util/get-id.js

@@ -1,22 +0,0 @@
-/**
- * Get a random prefixed ID
- *
- * @param {String} prefix Prefix to use. Default is `'wavesurfer_'`.
- * @returns {String} Random prefixed ID
- * @example
- * console.log(getId()); // logs 'wavesurfer_b5pors4ru6g'
- *
- * let prefix = 'foo-';
- * console.log(getId(prefix)); // logs 'foo-b5pors4ru6g'
- */
-export default function getId(prefix) {
-    if (prefix === undefined) {
-        prefix = 'wavesurfer_';
-    }
-    return (
-        prefix +
-        Math.random()
-            .toString(32)
-            .substring(2)
-    );
-}

package/src/util/index.js

@@ -1,14 +0,0 @@
-export { default as getId } from './get-id';
-export { default as max } from './max';
-export { default as min } from './min';
-export { default as absMax } from './absMax';
-export { default as Observer } from './observer';
-export { default as style } from './style';
-export { default as requestAnimationFrame } from './request-animation-frame';
-export { default as frame } from './frame';
-export { default as debounce } from 'debounce';
-export { default as preventClick } from './prevent-click';
-export { default as fetchFile } from './fetch';
-export { default as clamp } from './clamp';
-export { default as withOrientation } from './orientation';
-export { default as ignoreSilenceMode } from './silence-mode';

package/src/util/max.js

@@ -1,16 +0,0 @@
-/**
- * Get the largest value
- *
- * @param   {Array} values Array of numbers
- * @returns {Number} Largest number found
- * @example console.log(max([1, 2, 3])); // logs 3
- */
-export default function max(values) {
-    let largest = -Infinity;
-    Object.keys(values).forEach(i => {
-        if (values[i] > largest) {
-            largest = values[i];
-        }
-    });
-    return largest;
-}

package/src/util/min.js

@@ -1,16 +0,0 @@
-/**
- * Get the smallest value
- *
- * @param   {Array} values Array of numbers
- * @returns {Number} Smallest number found
- * @example console.log(min([1, 2, 3])); // logs 1
- */
-export default function min(values) {
-    let smallest = Number(Infinity);
-    Object.keys(values).forEach(i => {
-        if (values[i] < smallest) {
-            smallest = values[i];
-        }
-    });
-    return smallest;
-}

package/src/util/observer.js

@@ -1,144 +0,0 @@
-/**
- * @typedef {Object} ListenerDescriptor
- * @property {string} name The name of the event
- * @property {function} callback The callback
- * @property {function} un The function to call to remove the listener
- */
-
-/**
- * Observer class
- */
-export default class Observer {
-    /**
-     * Instantiate Observer
-     */
-    constructor() {
-        /**
-         * @private
-         * @todo Initialise the handlers here already and remove the conditional
-         * assignment in `on()`
-         */
-        this._disabledEventEmissions = [];
-        this.handlers = null;
-    }
-    /**
-     * Attach a handler function for an event.
-     *
-     * @param {string} event Name of the event to listen to
-     * @param {function} fn The callback to trigger when the event is fired
-     * @return {ListenerDescriptor} The event descriptor
-     */
-    on(event, fn) {
-        if (!this.handlers) {
-            this.handlers = {};
-        }
-
-        let handlers = this.handlers[event];
-        if (!handlers) {
-            handlers = this.handlers[event] = [];
-        }
-        handlers.push(fn);
-
-        // Return an event descriptor
-        return {
-            name: event,
-            callback: fn,
-            un: (e, fn) => this.un(e, fn)
-        };
-    }
-
-    /**
-     * Remove an event handler.
-     *
-     * @param {string} event Name of the event the listener that should be
-     * removed listens to
-     * @param {function} fn The callback that should be removed
-     */
-    un(event, fn) {
-        if (!this.handlers) {
-            return;
-        }
-
-        const handlers = this.handlers[event];
-        let i;
-        if (handlers) {
-            if (fn) {
-                for (i = handlers.length - 1; i >= 0; i--) {
-                    if (handlers[i] == fn) {
-                        handlers.splice(i, 1);
-                    }
-                }
-            } else {
-                handlers.length = 0;
-            }
-        }
-    }
-
-    /**
-     * Remove all event handlers.
-     */
-    unAll() {
-        this.handlers = null;
-    }
-
-    /**
-     * Attach a handler to an event. The handler is executed at most once per
-     * event type.
-     *
-     * @param {string} event The event to listen to
-     * @param {function} handler The callback that is only to be called once
-     * @return {ListenerDescriptor} The event descriptor
-     */
-    once(event, handler) {
-        const fn = (...args) => {
-            /*  eslint-disable no-invalid-this */
-            handler.apply(this, args);
-            /*  eslint-enable no-invalid-this */
-            setTimeout(() => {
-                this.un(event, fn);
-            }, 0);
-        };
-        return this.on(event, fn);
-    }
-
-    /**
-     * Disable firing a list of events by name. When specified, event handlers for any event type
-     * passed in here will not be called.
-     *
-     * @since 4.0.0
-     * @param {string[]} eventNames an array of event names to disable emissions for
-     * @example
-     * // disable seek and interaction events
-     * wavesurfer.setDisabledEventEmissions(['seek', 'interaction']);
-     */
-    setDisabledEventEmissions(eventNames) {
-        this._disabledEventEmissions = eventNames;
-    }
-
-    /**
-     * plugins borrow part of this class without calling the constructor,
-     * so we have to be careful about _disabledEventEmissions
-     */
-
-    _isDisabledEventEmission(event) {
-        return this._disabledEventEmissions && this._disabledEventEmissions.includes(event);
-    }
-
-    /**
-     * Manually fire an event
-     *
-     * @param {string} event The event to fire manually
-     * @param {...any} args The arguments with which to call the listeners
-     */
-    fireEvent(event, ...args) {
-        if (!this.handlers || this._isDisabledEventEmission(event)) {
-            return;
-        }
-
-        const handlers = this.handlers[event];
-        handlers &&
-            handlers.forEach(fn => {
-                fn(...args);
-            });
-    }
-}

package/src/util/orientation.js

@@ -1,98 +0,0 @@
-const verticalPropMap = {
-    width: 'height',
-    height: 'width',
-
-    overflowX: 'overflowY',
-    overflowY: 'overflowX',
-
-    clientWidth: 'clientHeight',
-    clientHeight: 'clientWidth',
-
-    clientX: 'clientY',
-    clientY: 'clientX',
-
-    scrollWidth: 'scrollHeight',
-    scrollLeft: 'scrollTop',
-
-    offsetLeft: 'offsetTop',
-    offsetTop: 'offsetLeft',
-    offsetHeight: 'offsetWidth',
-    offsetWidth: 'offsetHeight',
-
-    left: 'top',
-    right: 'bottom',
-    top: 'left',
-    bottom: 'right',
-
-    borderRightStyle: 'borderBottomStyle',
-    borderRightWidth: 'borderBottomWidth',
-    borderRightColor: 'borderBottomColor'
-};
-
-/**
- * Convert a horizontally-oriented property name to a vertical one.
- *
- * @param {string} prop A property name
- * @param {bool} vertical Whether the element is oriented vertically
- * @returns {string} prop, converted appropriately
- */
-function mapProp(prop, vertical) {
-    if (Object.prototype.hasOwnProperty.call(verticalPropMap, prop)) {
-        return vertical ? verticalPropMap[prop] : prop;
-    } else {
-        return prop;
-    }
-}
-
-const isProxy = Symbol("isProxy");
-
-/**
- * Returns an appropriately oriented object based on vertical.
- * If vertical is true, attribute getting and setting will be mapped through
- * verticalPropMap, so that e.g. getting the object's .width will give its
- * .height instead.
- * Certain methods of an oriented object will return oriented objects as well.
- * Oriented objects can't be added to the DOM directly since they are Proxy objects
- * and thus fail typechecks. Use domElement to get the actual element for this.
- *
- * @param {object} target The object to be wrapped and oriented
- * @param {bool} vertical Whether the element is oriented vertically
- * @returns {Proxy} An oriented object with attr translation via verticalAttrMap
- * @since 5.0.0
- */
-export default function withOrientation(target, vertical) {
-    if (target[isProxy]) {
-        return target;
-    } else {
-        return new Proxy(
-            target, {
-                get: function(obj, prop, receiver) {
-                    if (prop === isProxy) {
-                        return true;
-                    } else if (prop === 'domElement') {
-                        return obj;
-                    } else if (prop === 'style') {
-                        return withOrientation(obj.style, vertical);
-                    } else if (prop === 'canvas') {
-                        return withOrientation(obj.canvas, vertical);
-                    } else if (prop === 'getBoundingClientRect') {
-                        return function(...args) {
-                            return withOrientation(obj.getBoundingClientRect(...args), vertical);
-                        };
-                    } else if (prop === 'getContext') {
-                        return function(...args) {
-                            return withOrientation(obj.getContext(...args), vertical);
-                        };
-                    } else {
-                        let value = obj[mapProp(prop, vertical)];
-                        return typeof value == 'function' ? value.bind(obj) : value;
-                    }
-                },
-                set: function(obj, prop, value) {
-                    obj[mapProp(prop, vertical)] = value;
-                    return true;
-                }
-            }
-        );
-    }
-}

package/src/util/prevent-click.js

@@ -1,19 +0,0 @@
-/**
- * Stops propagation of click event and removes event listener
- *
- * @private
- * @param {object} event The click event
- */
-function preventClickHandler(event) {
-    event.stopPropagation();
-    document.body.removeEventListener('click', preventClickHandler, true);
-}
-
-/**
- * Starts listening for click event and prevent propagation
- *
- * @param {object} values Values
- */
-export default function preventClick(values) {
-    document.body.addEventListener('click', preventClickHandler, true);
-}

package/src/util/request-animation-frame.js

@@ -1,15 +0,0 @@
-/* eslint-disable valid-jsdoc */
-/**
- * Returns the `requestAnimationFrame` function for the browser, or a shim with
- * `setTimeout` if the function is not found
- *
- * @return {function} Available `requestAnimationFrame` function for the browser
- */
-export default (
-    window.requestAnimationFrame ||
-    window.webkitRequestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    window.oRequestAnimationFrame ||
-    window.msRequestAnimationFrame ||
-    ((callback, element) => setTimeout(callback, 1000 / 60))
-).bind(window);

package/src/util/silence-mode.js

@@ -1,42 +0,0 @@
-/**
- * Ignores device silence mode when using the `WebAudio` backend.
- *
- * Many mobile devices contain a hardware button to mute the ringtone for incoming
- * calls and messages. Unfortunately, on some platforms like iOS, this also mutes
- * wavesurfer's audio when using the `WebAudio` backend. This function creates a
- * temporary `<audio>` element that makes sure the WebAudio backend keeps playing
- * when muting the device ringer.
- *
- * @since 5.2.0
- */
-export default function ignoreSilenceMode() {
-    // Set webaudio context with 1 second silent audio 44100 bit rate buffer to allow playing audio even if silent switch is on the device
-    const silentAC = new AudioContext();
-    const silentBS = silentAC.createBufferSource();
-    silentBS.buffer = silentAC.createBuffer(1, 1, 44100);
-    silentBS.connect(silentAC.destination);
-    silentBS.start();
-
-    // Set the src to a short bit of url encoded as a silent mp3
-    // NOTE The silence MP3 must be high quality, when web audio sounds are played
-    // in parallel the web audio sound is mixed to match the bitrate of the html sound
-    // 0.01 seconds of silence VBR220-260 Joint Stereo 859B
-    const audioData = "data:audio/mpeg;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAACcQCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA//////////////////////////////////////////////////////////////////8AAABhTEFNRTMuMTAwA8MAAAAAAAAAABQgJAUHQQAB9AAAAnGMHkkIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//sQxAADgnABGiAAQBCqgCRMAAgEAH///////////////7+n/9FTuQsQH//////2NG0jWUGlio5gLQTOtIoeR2WX////X4s9Atb/JRVCbBUpeRUq//////////////////9RUi0f2jn/+xDECgPCjAEQAABN4AAANIAAAAQVTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==";
-
-    // disable iOS Airplay (setting the attribute in js doesn't work)
-    let tmp = document.createElement("div");
-    tmp.innerHTML = '<audio x-webkit-airplay="deny"></audio>';
-
-    let audioSilentMode = tmp.children.item(0);
-    audioSilentMode.src = audioData;
-    audioSilentMode.preload = "auto";
-    audioSilentMode.type = "audio/mpeg";
-    audioSilentMode.disableRemotePlayback = true;
-
-    // play
-    audioSilentMode.play();
-
-    // cleanup
-    audioSilentMode.remove();
-    tmp.remove();
-}

package/src/util/style.js

@@ -1,16 +0,0 @@
-/**
- * Apply a map of styles to an element
- *
- * @param {HTMLElement} el The element that the styles will be applied to
- * @param {Object} styles The map of propName: attribute, both are used as-is
- *
- * @return {HTMLElement} el
- */
-export default function style(el, styles) {
-    Object.keys(styles).forEach(prop => {
-        if (el.style[prop] !== styles[prop]) {
-            el.style[prop] = styles[prop];
-        }
-    });
-    return el;
-}