wavesurfer.js 6.2.0 → 6.4.0

package/dist/plugin/wavesurfer.timeline.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js timeline plugin 6.2.0 (2022-05-16)
+ * wavesurfer.js timeline plugin 6.4.0 (2022-11-05)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -29,15 +29,10 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = void 0;
-
 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, 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 /**
  * @typedef {Object} TimelinePluginParams
  * @desc Extends the `WavesurferParams` wavesurfer was initialised with
@@ -71,7 +66,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @property {?boolean} deferInit Set to true to manually call
  * `initPlugin('timeline')`
  */
-
 /**
  * Adds a timeline to the waveform.
  *
@@ -108,46 +102,37 @@ var TimelinePlugin = /*#__PURE__*/function () {
    */
   function TimelinePlugin(params, _ws) {
     var _this = this;
-
     _classCallCheck(this, TimelinePlugin);
-
     _defineProperty(this, "_onScroll", function () {
       if (_this.wrapper && _this.drawer.wrapper) {
         _this.wrapper.scrollLeft = _this.drawer.wrapper.scrollLeft;
       }
     });
-
     _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
+      _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();
     });
-
     _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({}, {
@@ -184,18 +169,16 @@ var TimelinePlugin = /*#__PURE__*/function () {
      *
      * @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() {
@@ -206,10 +189,10 @@ var TimelinePlugin = /*#__PURE__*/function () {
         this.wavesurfer.once('ready', this._onReady);
       }
     }
+
     /**
      * Destroy function used by the plugin API
      */
-
   }, {
     key: "destroy",
     value: function destroy() {
@@ -218,18 +201,17 @@ var TimelinePlugin = /*#__PURE__*/function () {
       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() {
@@ -243,7 +225,6 @@ var TimelinePlugin = /*#__PURE__*/function () {
         webkitUserSelect: 'none',
         height: "".concat(this.params.height, "px")
       });
-
       if (wsParams.fillParent || wsParams.scrollParent) {
         this.util.style(this.wrapper, {
           width: '100%',
@@ -251,30 +232,28 @@ var TimelinePlugin = /*#__PURE__*/function () {
           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() {
@@ -285,59 +264,55 @@ var TimelinePlugin = /*#__PURE__*/function () {
         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,
+        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"),
@@ -345,22 +320,19 @@ var TimelinePlugin = /*#__PURE__*/function () {
         });
       });
     }
+
     /**
      * 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;
@@ -368,61 +340,60 @@ var TimelinePlugin = /*#__PURE__*/function () {
       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
+      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,
+      var i;
+      // build an array of position data with index, second and pixel data,
       // this is then used multiple times below
+      var positioning = [];
 
-      var positioning = []; // render until end in case we have a negative offset
-
+      // 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
-
+      }
 
+      // iterate over each position
       var renderPositions = function renderPositions(cb) {
         positioning.forEach(function (pos) {
           cb(pos[0], pos[1], pos[2]);
         });
-      }; // render primary labels
-
+      };
 
+      // 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
+      });
 
+      // 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)
+      });
 
+      // 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) {
@@ -430,41 +401,40 @@ var TimelinePlugin = /*#__PURE__*/function () {
         }
       });
     }
+
     /**
      * 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
      *
@@ -475,12 +445,10 @@ var TimelinePlugin = /*#__PURE__*/function () {
      * @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 = {
@@ -489,16 +457,15 @@ var TimelinePlugin = /*#__PURE__*/function () {
           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
      *
@@ -506,7 +473,6 @@ var TimelinePlugin = /*#__PURE__*/function () {
      * @param {number} x X-position
      * @param {number} y Y-position
      */
-
   }, {
     key: "fillText",
     value: function fillText(text, x, y) {
@@ -514,23 +480,20 @@ var TimelinePlugin = /*#__PURE__*/function () {
       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.
      *
@@ -538,28 +501,26 @@ var TimelinePlugin = /*#__PURE__*/function () {
      * @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 = 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) {
@@ -570,16 +531,15 @@ var TimelinePlugin = /*#__PURE__*/function () {
       } 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) {
@@ -590,16 +550,15 @@ var TimelinePlugin = /*#__PURE__*/function () {
       } 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) {
@@ -610,7 +569,6 @@ var TimelinePlugin = /*#__PURE__*/function () {
       } else if (pxPerSec * 15 >= 25) {
         return 2;
       }
-
       return 2;
     }
   }], [{
@@ -632,13 +590,12 @@ var TimelinePlugin = /*#__PURE__*/function () {
         params: params,
         instance: TimelinePlugin
       };
-    } // event handlers
+    }
 
+    // event handlers
   }]);
-
   return TimelinePlugin;
 }();
-
 exports["default"] = TimelinePlugin;
 module.exports = exports.default;