wavesurfer.js 6.0.0 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.0.0",
+  "version": "6.0.3",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,7 +55,7 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.5",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
@@ -74,22 +74,22 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.8.0",
+    "eslint": "^8.10.0",
     "htmlhint": "^1.1.2",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^4.0.0",
-    "karma": "^6.3.15",
+    "jasmine-core": "^4.0.1",
+    "karma": "^6.3.17",
     "karma-chrome-launcher": "3.1.0",
-    "karma-coverage": "^2.1.1",
+    "karma-coverage": "^2.2.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-matchers": "5.0.0",
     "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^12.3.3",
+    "lint-staged": "^12.3.4",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.68.0",
+    "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0"

package/src/drawer.canvasentry.js

@@ -161,17 +161,20 @@ export default class CanvasEntry {
     /**
      * Utility function to handle wave color arguments
      *
-     * When the color argument type is a string, it will be returned as is.
-     * Otherwise, it will be treated as an array, and a canvas gradient will
-     * be returned
+     * When the color argument type is a string or CanvasGradient instance,
+     * it will be returned as is. Otherwise, it will be treated as an array,
+     * and a new CanvasGradient will be returned
      *
-     * @since 5.3.0
+     * @since 6.0.0
      * @param {CanvasRenderingContext2D} ctx Rendering context of target canvas
-     * @param {string|string[]} color Fill color for the wave canvas, or an array of colors to apply as a gradient
-     * @returns {string|CanvasGradient} Returns a string fillstyle value, or a canvas gradient
+     * @param {string|string[]|CanvasGradient} color Either a single fill color
+     *     for the wave canvas, an existing CanvasGradient instance, or an array
+     *     of colors to apply as a gradient
+     * @returns {string|CanvasGradient} Returns a string fillstyle value, or a
+     *     canvas gradient
      */
     getFillStyle(ctx, color) {
-        if (typeof color == 'string') {
+        if (typeof color == 'string' || color instanceof CanvasGradient) {
             return color;
         }
 

package/src/drawer.multicanvas.js

@@ -313,7 +313,7 @@ export default class MultiCanvas extends Drawer {
                     let peakIndexRange = Math.floor(peakIndex * scale) * peakIndexScale; // start index
                     const peakIndexEnd = Math.floor((peakIndex + step) * scale) * peakIndexScale;
                     do { // do..while makes sure at least one peak is always evaluated
-                        const newPeak = peaks[peakIndexRange];
+                        const newPeak = Math.abs(peaks[peakIndexRange]); // for arrays starting with negative values
                         if (newPeak > peak) {
                             peak = newPeak; // higher
                         }

package/src/plugin/cursor/index.js

@@ -5,7 +5,7 @@
  * waveform
  * @property {string} width='1px' The width of the cursor
  * @property {string} color='black' The color of the cursor
- * @property {string} opacity='0.25' The opacity 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
@@ -13,7 +13,7 @@
  * @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 {string} followCursorY=false Use `true` to make the time on
+ * @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.
@@ -237,9 +237,9 @@ export default class CursorPlugin {
      */
     destroy() {
         if (this.params.showTime) {
-            this.cursor.parentNode.removeChild(this.showTime);
+            this.showTime.remove();
         }
-        this.cursor.parentNode.removeChild(this.cursor);
+        this.cursor.remove();
         this.wrapper.removeEventListener('mousemove', this._onMousemove);
         if (this.params.hideOnBlur) {
             this.wrapper.removeEventListener('mouseenter', this._onMouseenter);

package/src/plugin/regions/index.js

@@ -10,7 +10,7 @@
  * @property {?number} snapToGridInterval Snap the regions to a grid of the specified multiples in seconds
  * @property {?number} snapToGridOffset Shift the snap-to-grid by the specified seconds. May also be negative.
  * @property {?boolean} deferInit Set to true to manually call
- * @property {number[]} maxRegions Maximum number of regions that may be created by the user at one time.
+ * @property {number} maxRegions Maximum number of regions that may be created by the user at one time.
  * `initPlugin('regions')`
  * @property {function} formatTimeCallback Allows custom formating for region tooltip.
  * @property {?number} edgeScrollWidth='5% from container edges' Optional width for edgeScroll to start