wavesurfer.js 6.5.1 → 7.0.0-alpha.0

package/dist/plugin/wavesurfer.timeline.js

@@ -1,649 +0,0 @@
-/*!
- * wavesurfer.js timeline plugin 6.5.1 (2023-03-12)
- * https://wavesurfer-js.org
- * @license BSD-3-Clause
- */
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory();
-	else if(typeof define === 'function' && define.amd)
-		define("WaveSurfer", [], factory);
-	else if(typeof exports === 'object')
-		exports["WaveSurfer"] = factory();
-	else
-		root["WaveSurfer"] = root["WaveSurfer"] || {}, root["WaveSurfer"]["timeline"] = factory();
-})(self, () => {
-return /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
-
-/***/ "./src/plugin/timeline/index.js":
-/*!**************************************!*\
-  !*** ./src/plugin/timeline/index.js ***!
-  \**************************************/
-/***/ ((module, exports) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports["default"] = void 0;
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-/**
- * @typedef {Object} TimelinePluginParams
- * @desc Extends the `WavesurferParams` wavesurfer was initialised with
- * @property {!string|HTMLElement} container CSS selector or HTML element where
- * the timeline should be drawn. This is the only required parameter.
- * @property {number} notchPercentHeight=90 Height of notches in percent
- * @property {string} unlabeledNotchColor='#c0c0c0' The colour of the notches
- * that do not have labels
- * @property {string} primaryColor='#000' The colour of the main notches
- * @property {string} secondaryColor='#c0c0c0' The colour of the secondary
- * notches
- * @property {string} primaryFontColor='#000' The colour of the labels next to
- * the main notches
- * @property {string} secondaryFontColor='#000' The colour of the labels next to
- * the secondary notches
- * @property {number} labelPadding=5 The padding between the label and the notch
- * @property {?number} zoomDebounce A debounce timeout to increase rendering
- * performance for large files
- * @property {string} fontFamily='Arial'
- * @property {number} fontSize=10 Font size of labels in pixels
- * @property {?number} duration Length of the track in seconds. Overrides
- * getDuration() for setting length of timeline
- * @property {function} formatTimeCallback (sec, pxPerSec) -> label
- * @property {function} timeInterval (pxPerSec) -> seconds between notches
- * @property {function} primaryLabelInterval (pxPerSec) -> cadence between
- * labels in primary color
- * @property {function} secondaryLabelInterval (pxPerSec) -> cadence between
- * labels in secondary color
- * @property {?number} offset Offset for the timeline start in seconds. May also be
- * negative.
- * @property {?boolean} deferInit Set to true to manually call
- * `initPlugin('timeline')`
- */
-/**
- * Adds a timeline to the waveform.
- *
- * @implements {PluginClass}
- * @extends {Observer}
- * @example
- * // es6
- * import TimelinePlugin from 'wavesurfer.timeline.js';
- *
- * // commonjs
- * var TimelinePlugin = require('wavesurfer.timeline.js');
- *
- * // if you are using <script> tags
- * var TimelinePlugin = window.WaveSurfer.timeline;
- *
- * // ... initialising wavesurfer with the plugin
- * var wavesurfer = WaveSurfer.create({
- *   // wavesurfer options ...
- *   plugins: [
- *     TimelinePlugin.create({
- *       // plugin options ...
- *     })
- *   ]
- * });
- */
-var TimelinePlugin = /*#__PURE__*/function () {
-  /**
-   * Creates an instance of TimelinePlugin.
-   *
-   * You probably want to use TimelinePlugin.create()
-   *
-   * @param {TimelinePluginParams} params Plugin parameters
-   * @param {object} ws Wavesurfer instance
-   */
-  function TimelinePlugin(params, _ws) {
-    var _this = this;
-    _classCallCheck(this, TimelinePlugin);
-    // event handlers
-    _defineProperty(this, "_onScroll", function () {
-      if (_this.wrapper && _this.drawer.wrapper) {
-        _this.wrapper.scrollLeft = _this.drawer.wrapper.scrollLeft;
-      }
-    });
-    /**
-     * @returns {void}
-     */
-    _defineProperty(this, "_onRedraw", function () {
-      return _this.render();
-    });
-    _defineProperty(this, "_onReady", function () {
-      var ws = _this.wavesurfer;
-      _this.drawer = ws.drawer;
-      _this.pixelRatio = ws.drawer.params.pixelRatio;
-      _this.maxCanvasWidth = ws.drawer.maxCanvasWidth || ws.drawer.width;
-      _this.maxCanvasElementWidth = ws.drawer.maxCanvasElementWidth || Math.round(_this.maxCanvasWidth / _this.pixelRatio);
-
-      // add listeners
-      ws.drawer.wrapper.addEventListener('scroll', _this._onScroll);
-      ws.on('redraw', _this._onRedraw);
-      ws.on('zoom', _this._onZoom);
-      _this.render();
-    });
-    /**
-     * @param {object} e Click event
-     */
-    _defineProperty(this, "_onWrapperClick", function (e) {
-      e.preventDefault();
-      var relX = 'offsetX' in e ? e.offsetX : e.layerX;
-      _this.fireEvent('click', relX / _this.wrapper.scrollWidth || 0);
-    });
-    this.container = 'string' == typeof params.container ? document.querySelector(params.container) : params.container;
-    if (!this.container) {
-      throw new Error('No container for wavesurfer timeline');
-    }
-    this.wavesurfer = _ws;
-    this.util = _ws.util;
-    this.params = Object.assign({}, {
-      height: 20,
-      notchPercentHeight: 90,
-      labelPadding: 5,
-      unlabeledNotchColor: '#c0c0c0',
-      primaryColor: '#000',
-      secondaryColor: '#c0c0c0',
-      primaryFontColor: '#000',
-      secondaryFontColor: '#000',
-      fontFamily: 'Arial',
-      fontSize: 10,
-      duration: null,
-      zoomDebounce: false,
-      formatTimeCallback: this.defaultFormatTimeCallback,
-      timeInterval: this.defaultTimeInterval,
-      primaryLabelInterval: this.defaultPrimaryLabelInterval,
-      secondaryLabelInterval: this.defaultSecondaryLabelInterval,
-      offset: 0
-    }, params);
-    this.canvases = [];
-    this.wrapper = null;
-    this.drawer = null;
-    this.pixelRatio = null;
-    this.maxCanvasWidth = null;
-    this.maxCanvasElementWidth = null;
-    /**
-     * This event handler has to be in the constructor function because it
-     * relies on the debounce function which is only available after
-     * instantiation
-     *
-     * Use a debounced function if `params.zoomDebounce` is defined
-     *
-     * @returns {void}
-     */
-    this._onZoom = this.params.zoomDebounce ? this.wavesurfer.util.debounce(function () {
-      return _this.render();
-    }, this.params.zoomDebounce) : function () {
-      return _this.render();
-    };
-  }
-
-  /**
-   * Initialisation function used by the plugin API
-   */
-  _createClass(TimelinePlugin, [{
-    key: "init",
-    value: function init() {
-      // Check if ws is ready
-      if (this.wavesurfer.isReady) {
-        this._onReady();
-      } else {
-        this.wavesurfer.once('ready', this._onReady);
-      }
-    }
-
-    /**
-     * Destroy function used by the plugin API
-     */
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.unAll();
-      this.wavesurfer.un('redraw', this._onRedraw);
-      this.wavesurfer.un('zoom', this._onZoom);
-      this.wavesurfer.un('ready', this._onReady);
-      this.wavesurfer.drawer.wrapper.removeEventListener('scroll', this._onScroll);
-      if (this.wrapper && this.wrapper.parentNode) {
-        this.wrapper.removeEventListener('click', this._onWrapperClick);
-        this.wrapper.parentNode.removeChild(this.wrapper);
-        this.wrapper = null;
-      }
-    }
-
-    /**
-     * Create a timeline element to wrap the canvases drawn by this plugin
-     *
-     */
-  }, {
-    key: "createWrapper",
-    value: function createWrapper() {
-      var wsParams = this.wavesurfer.params;
-      this.container.innerHTML = '';
-      this.wrapper = this.container.appendChild(document.createElement('timeline'));
-      this.util.style(this.wrapper, {
-        display: 'block',
-        position: 'relative',
-        userSelect: 'none',
-        webkitUserSelect: 'none',
-        height: "".concat(this.params.height, "px")
-      });
-      if (wsParams.fillParent || wsParams.scrollParent) {
-        this.util.style(this.wrapper, {
-          width: '100%',
-          overflowX: 'hidden',
-          overflowY: 'hidden'
-        });
-      }
-      this.wrapper.addEventListener('click', this._onWrapperClick);
-    }
-
-    /**
-     * Render the timeline (also updates the already rendered timeline)
-     *
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.wrapper) {
-        this.createWrapper();
-      }
-      this.updateCanvases();
-      this.updateCanvasesPositioning();
-      this.renderCanvases();
-    }
-
-    /**
-     * Add new timeline canvas
-     *
-     */
-  }, {
-    key: "addCanvas",
-    value: function addCanvas() {
-      var canvas = this.wrapper.appendChild(document.createElement('canvas'));
-      this.canvases.push(canvas);
-      this.util.style(canvas, {
-        position: 'absolute',
-        zIndex: 4
-      });
-    }
-
-    /**
-     * Remove timeline canvas
-     *
-     */
-  }, {
-    key: "removeCanvas",
-    value: function removeCanvas() {
-      var canvas = this.canvases.pop();
-      canvas.parentElement.removeChild(canvas);
-    }
-
-    /**
-     * Make sure the correct of timeline canvas elements exist and are cached in
-     * this.canvases
-     *
-     */
-  }, {
-    key: "updateCanvases",
-    value: function updateCanvases() {
-      var totalWidth = Math.round(this.drawer.wrapper.scrollWidth);
-      var requiredCanvases = Math.ceil(totalWidth / this.maxCanvasElementWidth);
-      while (this.canvases.length < requiredCanvases) {
-        this.addCanvas();
-      }
-      while (this.canvases.length > requiredCanvases) {
-        this.removeCanvas();
-      }
-    }
-
-    /**
-     * Update the dimensions and positioning style for all the timeline canvases
-     *
-     */
-  }, {
-    key: "updateCanvasesPositioning",
-    value: function updateCanvasesPositioning() {
-      var _this2 = this;
-      // cache length for performance
-      var canvasesLength = this.canvases.length;
-      this.canvases.forEach(function (canvas, i) {
-        // canvas width is the max element width, or if it is the last the
-        // required width
-        var canvasWidth = i === canvasesLength - 1 ? _this2.drawer.wrapper.scrollWidth - _this2.maxCanvasElementWidth * (canvasesLength - 1) : _this2.maxCanvasElementWidth;
-        // set dimensions and style
-        canvas.width = canvasWidth * _this2.pixelRatio;
-        // on certain pixel ratios the canvas appears cut off at the bottom,
-        // therefore leave 1px extra
-        canvas.height = (_this2.params.height + 1) * _this2.pixelRatio;
-        _this2.util.style(canvas, {
-          width: "".concat(canvasWidth, "px"),
-          height: "".concat(_this2.params.height, "px"),
-          left: "".concat(i * _this2.maxCanvasElementWidth, "px")
-        });
-      });
-    }
-
-    /**
-     * Render the timeline labels and notches
-     *
-     */
-  }, {
-    key: "renderCanvases",
-    value: function renderCanvases() {
-      var _this3 = this;
-      var duration = this.params.duration || this.wavesurfer.backend.getDuration();
-      if (duration <= 0) {
-        return;
-      }
-      var wsParams = this.wavesurfer.params;
-      var fontSize = this.params.fontSize * wsParams.pixelRatio;
-      var totalSeconds = parseInt(duration, 10) + 1;
-      var width = wsParams.fillParent && !wsParams.scrollParent ? this.drawer.getWidth() : this.drawer.wrapper.scrollWidth * wsParams.pixelRatio;
-      var height1 = this.params.height * this.pixelRatio;
-      var height2 = this.params.height * (this.params.notchPercentHeight / 100) * this.pixelRatio;
-      var pixelsPerSecond = width / duration;
-      var formatTime = this.params.formatTimeCallback;
-      // if parameter is function, call the function with
-      // pixelsPerSecond, otherwise simply take the value as-is
-      var intervalFnOrVal = function intervalFnOrVal(option) {
-        return typeof option === 'function' ? option(pixelsPerSecond) : option;
-      };
-      var timeInterval = intervalFnOrVal(this.params.timeInterval);
-      var primaryLabelInterval = intervalFnOrVal(this.params.primaryLabelInterval);
-      var secondaryLabelInterval = intervalFnOrVal(this.params.secondaryLabelInterval);
-      var curPixel = pixelsPerSecond * this.params.offset;
-      var curSeconds = 0;
-      var i;
-      // build an array of position data with index, second and pixel data,
-      // this is then used multiple times below
-      var positioning = [];
-
-      // render until end in case we have a negative offset
-      var renderSeconds = this.params.offset < 0 ? totalSeconds - this.params.offset : totalSeconds;
-      for (i = 0; i < renderSeconds / timeInterval; i++) {
-        positioning.push([i, curSeconds, curPixel]);
-        curSeconds += timeInterval;
-        curPixel += pixelsPerSecond * timeInterval;
-      }
-
-      // iterate over each position
-      var renderPositions = function renderPositions(cb) {
-        positioning.forEach(function (pos) {
-          cb(pos[0], pos[1], pos[2]);
-        });
-      };
-
-      // render primary labels
-      this.setFillStyles(this.params.primaryColor);
-      this.setFonts("".concat(fontSize, "px ").concat(this.params.fontFamily));
-      this.setFillStyles(this.params.primaryFontColor);
-      renderPositions(function (i, curSeconds, curPixel) {
-        if (i % primaryLabelInterval === 0) {
-          _this3.fillRect(curPixel, 0, 1, height1);
-          _this3.fillText(formatTime(curSeconds, pixelsPerSecond), curPixel + _this3.params.labelPadding * _this3.pixelRatio, height1);
-        }
-      });
-
-      // render secondary labels
-      this.setFillStyles(this.params.secondaryColor);
-      this.setFonts("".concat(fontSize, "px ").concat(this.params.fontFamily));
-      this.setFillStyles(this.params.secondaryFontColor);
-      renderPositions(function (i, curSeconds, curPixel) {
-        if (i % secondaryLabelInterval === 0) {
-          _this3.fillRect(curPixel, 0, 1, height1);
-          _this3.fillText(formatTime(curSeconds, pixelsPerSecond), curPixel + _this3.params.labelPadding * _this3.pixelRatio, height1);
-        }
-      });
-
-      // render the actual notches (when no labels are used)
-      this.setFillStyles(this.params.unlabeledNotchColor);
-      renderPositions(function (i, curSeconds, curPixel) {
-        if (i % secondaryLabelInterval !== 0 && i % primaryLabelInterval !== 0) {
-          _this3.fillRect(curPixel, 0, 1, height2);
-        }
-      });
-    }
-
-    /**
-     * Set the canvas fill style
-     *
-     * @param {DOMString|CanvasGradient|CanvasPattern} fillStyle Fill style to
-     * use
-     */
-  }, {
-    key: "setFillStyles",
-    value: function setFillStyles(fillStyle) {
-      this.canvases.forEach(function (canvas) {
-        var context = canvas.getContext('2d');
-        if (context) {
-          context.fillStyle = fillStyle;
-        }
-      });
-    }
-
-    /**
-     * Set the canvas font
-     *
-     * @param {DOMString} font Font to use
-     */
-  }, {
-    key: "setFonts",
-    value: function setFonts(font) {
-      this.canvases.forEach(function (canvas) {
-        var context = canvas.getContext('2d');
-        if (context) {
-          context.font = font;
-        }
-      });
-    }
-
-    /**
-     * Draw a rectangle on the canvases
-     *
-     * (it figures out the offset for each canvas)
-     *
-     * @param {number} x X-position
-     * @param {number} y Y-position
-     * @param {number} width Width
-     * @param {number} height Height
-     */
-  }, {
-    key: "fillRect",
-    value: function fillRect(x, y, width, height) {
-      var _this4 = this;
-      this.canvases.forEach(function (canvas, i) {
-        var leftOffset = i * _this4.maxCanvasWidth;
-        var intersection = {
-          x1: Math.max(x, i * _this4.maxCanvasWidth),
-          y1: y,
-          x2: Math.min(x + width, i * _this4.maxCanvasWidth + canvas.width),
-          y2: y + height
-        };
-        if (intersection.x1 < intersection.x2) {
-          var context = canvas.getContext('2d');
-          if (context) {
-            context.fillRect(intersection.x1 - leftOffset, intersection.y1, intersection.x2 - intersection.x1, intersection.y2 - intersection.y1);
-          }
-        }
-      });
-    }
-
-    /**
-     * Fill a given text on the canvases
-     *
-     * @param {string} text Text to render
-     * @param {number} x X-position
-     * @param {number} y Y-position
-     */
-  }, {
-    key: "fillText",
-    value: function fillText(text, x, y) {
-      var textWidth;
-      var xOffset = 0;
-      this.canvases.forEach(function (canvas) {
-        var context = canvas.getContext('2d');
-        if (context) {
-          var canvasWidth = context.canvas.width;
-          if (xOffset > x + textWidth) {
-            return;
-          }
-          if (xOffset + canvasWidth > x && context) {
-            textWidth = context.measureText(text).width;
-            context.fillText(text, x - xOffset, y);
-          }
-          xOffset += canvasWidth;
-        }
-      });
-    }
-
-    /**
-     * Turn the time into a suitable label for the time.
-     *
-     * @param {number} seconds Seconds to format
-     * @param {number} pxPerSec Pixels per second
-     * @returns {number} Time
-     */
-  }, {
-    key: "defaultFormatTimeCallback",
-    value: function defaultFormatTimeCallback(seconds, pxPerSec) {
-      if (seconds / 60 > 1) {
-        // calculate minutes and seconds from seconds count
-        var minutes = parseInt(seconds / 60, 10);
-        seconds = parseInt(seconds % 60, 10);
-        // fill up seconds with zeroes
-        seconds = seconds < 10 ? '0' + seconds : seconds;
-        return "".concat(minutes, ":").concat(seconds);
-      }
-      return Math.round(seconds * 1000) / 1000;
-    }
-
-    /**
-     * Return how many seconds should be between each notch
-     *
-     * @param {number} pxPerSec Pixels per second
-     * @returns {number} Time
-     */
-  }, {
-    key: "defaultTimeInterval",
-    value: function defaultTimeInterval(pxPerSec) {
-      if (pxPerSec >= 25) {
-        return 1;
-      } else if (pxPerSec * 5 >= 25) {
-        return 5;
-      } else if (pxPerSec * 15 >= 25) {
-        return 15;
-      }
-      return Math.ceil(0.5 / pxPerSec) * 60;
-    }
-
-    /**
-     * Return the cadence of notches that get labels in the primary color.
-     *
-     * @param {number} pxPerSec Pixels per second
-     * @returns {number} Cadence
-     */
-  }, {
-    key: "defaultPrimaryLabelInterval",
-    value: function defaultPrimaryLabelInterval(pxPerSec) {
-      if (pxPerSec >= 25) {
-        return 10;
-      } else if (pxPerSec * 5 >= 25) {
-        return 6;
-      } else if (pxPerSec * 15 >= 25) {
-        return 4;
-      }
-      return 4;
-    }
-
-    /**
-     * Return the cadence of notches that get labels in the secondary color.
-     *
-     * @param {number} pxPerSec Pixels per second
-     * @returns {number} Cadence
-     */
-  }, {
-    key: "defaultSecondaryLabelInterval",
-    value: function defaultSecondaryLabelInterval(pxPerSec) {
-      if (pxPerSec >= 25) {
-        return 5;
-      } else if (pxPerSec * 5 >= 25) {
-        return 2;
-      } else if (pxPerSec * 15 >= 25) {
-        return 2;
-      }
-      return 2;
-    }
-  }], [{
-    key: "create",
-    value:
-    /**
-     * Timeline 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  {TimelinePluginParams} params parameters use to initialise the plugin
-     * @return {PluginDefinition} an object representing the plugin
-     */
-    function create(params) {
-      return {
-        name: 'timeline',
-        deferInit: params && params.deferInit ? params.deferInit : false,
-        params: params,
-        instance: TimelinePlugin
-      };
-    }
-  }]);
-  return TimelinePlugin;
-}();
-exports["default"] = TimelinePlugin;
-module.exports = exports.default;
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/plugin/timeline/index.js");
-/******/ 	
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});
-//# sourceMappingURL=wavesurfer.timeline.js.map