Merge branch 'katspaugh:master' into ordered-events

katspaugh · Feb 26, 2022 · f14e590 · f14e590
2 parents ba7bc5b + 46d423b
commit f14e590
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 100 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,16 +1,41 @@
 wavesurfer.js changelog
 =======================
-5.3.0 (unreleased)
-------------------
-- add additional type to `waveColor` and `progressColor` parameters to support linear gradients (#2345)
-- Regions plugin: increase region z-index to fix stacking inconsistencies (#2353)
-- add `hideCursor` option to hide the mouse cursor when hovering over the waveform (#2367)
-- Regions plugin: check `maxLength` before resizing region (#2374)
-- Regions plugin: Add support for drag selection to be separated for each channel (#2380)
-- add optional `channelIdx` parameter to `setWaveColor`, `getWaveColor`, `setProgressColor`, `getProgressColor` methods (#2391)
-- Regions plugin: allow `formatTimeCallback` from plugin params to be used (#2294)
+
+6.0.2 (20.02.2022)
+------------------
+- Fix regression and restore support for passing a `CanvasGradient` to
+  `setWaveColor()` (#2448)
+- Regions plugin:
+  - Fixed the type annotation of `maxRegions` in the regions plugin (#2454)
+
+6.0.1 (13.02.2022)
+------------------
+- Fixed a regression that broke bars rendering when using a certain format for
+  the peaks array (#2439)
+
+6.0.0 (07.02.2022)
+------------------
+- Add additional type to `waveColor` and `progressColor` parameters to support linear
+  gradients (#2345)
+- Add `hideCursor` option to hide the mouse cursor when hovering over the waveform (#2367)
+- Add optional `channelIdx` parameter to `setWaveColor`, `getWaveColor`, `setProgressColor`
+  and `getProgressColor` methods (#2391)
+- Improved drawing waveform with bars, now bars height is the maximum peak value in
+  range (#2428)
+- Workaround for `seekTo` occasionally crashing on Firefox (#1228, #2431)
 - Markers plugin: Add the ability to set markers as draggable using param `draggable=true`,
   `marker-drag` and `marker-drop` events will be triggered (#2398)
+- Regions plugin:
+  - Increase region z-index to fix stacking inconsistencies (#2353)
+  - Check `maxLength` before resizing region (#2374)
+  - Add support for drag selection to be separated for each channel (#2380)
+  - Allow `formatTimeCallback` from plugin params to be used (#2294)
+  - Use of default `edgeScrollWidth` value no longer dependent on regions being created via
+    plugin params (#2401)
+  - Disable `region-remove` event emission during plugin teardown (#2403)
+- Spectrogram plugin:
+  - Remove inaccurate frequency doubling of spectrogram (#2232)
+  - Support for `splitChannels` option to draw spectrogram for each channel (#2424)
 
 5.2.0 (16.08.2021)
 ------------------

diff --git a/README.md b/README.md
@@ -9,6 +9,16 @@ Interactive navigable audio visualization using Web Audio and Canvas.
 
 See a [tutorial](https://wavesurfer-js.org/docs) and [examples](https://wavesurfer-js.org/examples) on [wavesurfer-js.org](https://wavesurfer-js.org).
 
+## 10 years of wavesufer.js 🎉
+Wavesufer.js was started in March 2012. To celebrate the 10-year anniversary of wavesufer.js, we created an NFT representing the initial commit to this repository.
+
+If you're a company, or an individual, wishing to support the project, please consider buying this memorable commit.
+
+|[<img alt="wavesufer.js NFT" src="https://lh3.googleusercontent.com/82rx4HORLYEodBBt13X6nZ2pdR-Ij25iRInmYuzCjjKU1uZ8NQmhaS-wB5u74qZlDShJlbEVTxUu8OodD8JdN79N7za4-AZfipT3=w600" width="300" />](https://opensea.io/assets/matic/0xE7ea2E2bE12C257d376400cB231D8eE51e972BD6/41246820351435245535444587687799096392219692760736652072803901002414398825025)|[Buy the first commit NFT 🎁](https://opensea.io/assets/matic/0xE7ea2E2bE12C257d376400cB231D8eE51e972BD6/41246820351435245535444587687799096392219692760736652072803901002414398825025)|
+---|---|
+
+The proceeds will go to the author and the current maintainer.
+
 ## Browser support
 wavesurfer.js works only in [modern browsers supporting Web Audio](http://caniuse.com/audio-api).
 

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -1,5 +1,9 @@
 # Upgrade
 
+## Upgrading to version 6 from version 5
+
+- `CursorPlugin.outerWidth(element)` was removed. You can use [`element.getBoundingClientRect().width`](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect) instead.
+
 ## Upgrading to version 5 from version 4
 
 1. **`MultiCanvas` and `Drawer` now use [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) objects for DOM elements**: You can access the original instances via the `domElement` property on the Proxy objects (e.g. `CanvasEntry.wave.domElement`).

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "5.2.0",
+  "version": "6.0.2",
   "homepage": "https://wavesurfer-js.org",
   "authors": [
     "katspaugh <katspaugh@gmail.com>"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "5.2.0",
+  "version": "6.0.2",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,17 +55,17 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/register": "^7.16.0",
-    "@chiragrupani/karma-chromium-edge-launcher": "^2.1.1",
+    "@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",
+    "@babel/register": "^7.17.0",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-proxy": "^1.1.0",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.28.0",
     "debounce": "^1.2.1",
     "esdoc": "^1.1.0",
     "esdoc-accessor-plugin": "^1.0.0",
@@ -74,24 +74,24 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.2.0",
-    "htmlhint": "^0.16.0",
+    "eslint": "^8.9.0",
+    "htmlhint": "^1.1.2",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^3.10.1",
-    "karma": "^6.3.8",
+    "jasmine-core": "^4.0.0",
+    "karma": "^6.3.16",
     "karma-chrome-launcher": "3.1.0",
-    "karma-coverage": "^2.0.3",
+    "karma-coverage": "^2.2.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "4.0.1",
-    "karma-jasmine-matchers": "4.0.2",
-    "karma-verbose-reporter": "0.0.6",
+    "karma-jasmine-matchers": "5.0.0",
+    "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^11.2.6",
+    "lint-staged": "^12.3.4",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.63.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0"
   },
   "homepage": "https://wavesurfer-js.org",

diff --git a/spec/wavesurfer.spec.js b/spec/wavesurfer.spec.js
@@ -265,7 +265,7 @@ describe('WaveSurfer/playback:', function() {
     });
 
     /** @test {WaveSurfer#setWaveColorGradient} */
-    it('allow setting waveColor gradient', function() {
+    it('allow setting waveColor gradient using array of fill colors', function() {
         let colors = [
             "red",
             "green",
@@ -279,6 +279,22 @@ describe('WaveSurfer/playback:', function() {
         expect(waveColor).toEqual(colors);
     });
 
+    /** @test {WaveSurfer#setWaveColorCanvasGradient} */
+    it('allow setting waveColor using CanvasGradient', function() {
+        let testCanvas = TestHelpers.createElement("linGrad", "canvas");
+        let ctx = testCanvas.getContext('2d');
+        let linGrad = ctx.createLinearGradient(0, 64, 0, 200);
+        linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
+        linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
+
+        wavesurfer.setWaveColor(linGrad);
+        const waveColor = wavesurfer.getWaveColor();
+
+        expect(waveColor).toEqual(linGrad);
+
+        TestHelpers.removeElement(testCanvas);
+    });
+
     /** @test {WaveSurfer#getProgressColor} */
     it('allow getting progressColor', function() {
         const progressColor = wavesurfer.getProgressColor();

diff --git a/src/drawer.canvasentry.js b/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;
         }
 

diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js
@@ -305,21 +305,32 @@ export default class MultiCanvas extends Drawer {
                 const scale = length / this.width;
                 const first = start;
                 const last = end;
-                let i = first;
-
-                for (i; i < last; i += step) {
-                    const peak =
-                        peaks[Math.floor(i * scale * peakIndexScale)] || 0;
+                let peakIndex = first;
+                for (peakIndex; peakIndex < last; peakIndex += step) {
+
+                    // search for the highest peak in the range this bar falls into
+                    let peak = 0;
+                    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 = Math.abs(peaks[peakIndexRange]); // for arrays starting with negative values
+                        if (newPeak > peak) {
+                            peak = newPeak; // higher
+                        }
+                        peakIndexRange += peakIndexScale; // skip every other value for negatives
+                    } while (peakIndexRange < peakIndexEnd);
+
+                    // calculate the height of this bar according to the highest peak found
                     let h = Math.round((peak / absmax) * halfH);
 
-                    /* in case of silences, allow the user to specify that we
-                     * always draw *something* (normally a 1px high bar) */
+                    // in case of silences, allow the user to specify that we
+                    // always draw *something* (normally a 1px high bar)
                     if (h == 0 && this.params.barMinHeight) {
                         h = this.params.barMinHeight;
                     }
 
                     this.fillRect(
-                        i + this.halfPixel,
+                        peakIndex + this.halfPixel,
                         halfH - h + offsetY,
                         bar + this.halfPixel,
                         h * 2,

diff --git a/src/mediaelement.js b/src/mediaelement.js
@@ -275,7 +275,7 @@ export default class MediaElement extends WebAudio {
      * @param {number} start Position to start at in seconds
      */
     seekTo(start) {
-        if (start != null) {
+        if (start != null && !isNaN(start)) {
             this.media.currentTime = start;
         }
         this.clearPlayEnd();

diff --git a/src/plugin/regions/index.js b/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
@@ -129,15 +129,14 @@ export default class RegionsPlugin {
         this.wavesurfer.Region = Region;
 
         // By default, scroll the container if the user drags a region
-        // within 5% of its edge
+        // within 5% (based on its initial size) of its edge
         const scrollWidthProportion = 0.05;
         this._onBackendCreated = () => {
             this.wrapper = this.wavesurfer.drawer.wrapper;
             this.orientation = this.wavesurfer.drawer.orientation;
+            this.defaultEdgeScrollWidth = this.wrapper.clientWidth * scrollWidthProportion;
             if (this.params.regions) {
                 this.params.regions.forEach(region => {
-                    region.edgeScrollWidth = this.params.edgeScrollWidth ||
-                        this.wrapper.clientWidth * scrollWidthProportion;
                     this.add(region);
                 });
             }
@@ -171,6 +170,11 @@ export default class RegionsPlugin {
     destroy() {
         this.wavesurfer.un('ready', this._onReady);
         this.wavesurfer.un('backend-created', this._onBackendCreated);
+        // Disabling `region-removed' because destroying the plugin calls
+        // the Region.remove() method that is also used to remove regions based
+        // on user input. This can cause confusion since teardown is not a
+        // user event, but would emit `region-removed` as if it was.
+        this.wavesurfer.setDisabledEventEmissions(['region-removed']);
         this.disableDragSelection();
         this.clear();
     }
@@ -197,6 +201,11 @@ export default class RegionsPlugin {
             return null;
         }
 
+        params = {
+            edgeScrollWidth: this.params.edgeScrollWidth || this.defaultEdgeScrollWidth,
+            ...params
+        };
+
         // Take formatTimeCallback from plugin params if not already set
         if (!params.formatTimeCallback && this.params.formatTimeCallback) {
             params = {...params, formatTimeCallback: this.params.formatTimeCallback};