wavesurfer.js 6.5.2 → 6.6.0

package/README.md

@@ -124,8 +124,22 @@ If you want to use [the VS Code - Debugger for Chrome](https://github.com/Micros
 ## Editing documentation
 The homepage and documentation files are maintained in the [`gh-pages` branch](https://github.com/wavesurfer-js/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome.
 
-## Updating the NPM package
-When preparing a new release, update the version in the `package.json` and have it merged to master. The new version of the package will be published to NPM automatically via GitHub Actions.
+## Releasing a new version
+To release a new version and publish it to NPM, follow the steps below.
+
+ Switch to the master branch and make sure it's up-to-date
+ ```
+ git checkout master
+ git fetch --all; git reset --hard origin/master
+```
+
+Run the release script:
+```
+yarn release
+```
+This will update the version, generate a changelog, and push everything to a new branch called `release/X.X.X`.
+
+A browser window will open to create a PR from this new branch to the master branch. Once the PR is approved and merged, an automated workflow will kick in and publish a release both on GitHub and NPM.
 
 ## Credits
 

package/dist/plugin/wavesurfer.cursor.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js cursor plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js cursor plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.cursor.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js cursor plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js cursor plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.elan.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js elan plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js elan plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.elan.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js elan plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js elan plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.markers.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js markers plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js markers plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.markers.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js markers plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js markers plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.mediasession.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js mediasession plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js mediasession plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.mediasession.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js mediasession plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js mediasession plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.microphone.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js microphone plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js microphone plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.microphone.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js microphone plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js microphone plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.minimap.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js minimap plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js minimap plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.minimap.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js minimap plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js minimap plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.playhead.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js playhead plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js playhead plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.playhead.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js playhead plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js playhead plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.regions.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js regions plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js regions plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.regions.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js regions plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js regions plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.spectrogram.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js spectrogram plugin 6.5.2 (2023-03-12)
+ * wavesurfer.js spectrogram plugin 6.6.0 (2023-03-14)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -284,6 +284,9 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     this._onRender = function () {
       _this.render();
     };
+    this._onZoom = function () {
+      _this.stretchCanvases();
+    };
     this._onWrapperClick = function (e) {
       _this._wrapperClickHandler(e);
     };
@@ -320,15 +323,19 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       _this.alpha = params.alpha;
       _this.splitChannels = params.splitChannels;
       _this.channels = _this.splitChannels ? ws.backend.buffer.numberOfChannels : 1;
+      _this.canvases = [];
+      _this.canvasesTimeouts = [];
+      _this.scrollLeftTracker = 0; //Tracks the desired scrollLeft value
 
       // Getting file's original samplerate is difficult(#1248).
       // So set 12kHz default to render like wavesurfer.js 5.x.
       _this.frequencyMin = params.frequencyMin || 0;
       _this.frequencyMax = params.frequencyMax || 12000;
       _this.createWrapper();
-      _this.createCanvas();
+      _this.addCanvas();
       _this.render();
       drawer.wrapper.addEventListener('scroll', _this._onScroll);
+      ws.on('zoom', _this._onZoom);
       ws.on('redraw', _this._onRender);
     };
   }
@@ -404,15 +411,49 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var relX = 'offsetX' in event ? event.offsetX : event.layerX;
       this.fireEvent('click', relX / this.width || 0);
     }
+
+    /**
+     * Add a canvas to this.canvases
+     */
   }, {
-    key: "createCanvas",
-    value: function createCanvas() {
-      var canvas = this.canvas = this.wrapper.appendChild(document.createElement('canvas'));
-      this.spectrCc = canvas.getContext('2d');
+    key: "addCanvas",
+    value: function addCanvas() {
+      var canvas = this.wrapper.appendChild(document.createElement('canvas'));
       this.util.style(canvas, {
         position: 'absolute',
         zIndex: 4
       });
+      this.canvases.push(canvas);
+      this.canvasesTimeouts.push(null);
+    }
+
+    /**
+     * Remove a canvas from this.canvases
+     */
+  }, {
+    key: "removeCanvas",
+    value: function removeCanvas() {
+      //Stop drawing (if drawing)
+      clearTimeout(this.canvasesTimeouts[this.canvasesTimeouts.length - 1]);
+      var lastEntry = this.canvases[this.canvases.length - 1];
+      lastEntry.parentElement.removeChild(lastEntry);
+      this.canvases.pop();
+      this.canvasesTimeouts.pop();
+    }
+
+    /**
+     * Ensure the correct number of canvases for the size of the spectrogram
+     */
+  }, {
+    key: "updateCanvases",
+    value: function updateCanvases() {
+      var canvasesRequired = Math.ceil(this.width / 4000);
+      while (this.canvases.length < canvasesRequired) {
+        this.addCanvas();
+      }
+      while (this.canvases.length > canvasesRequired) {
+        this.removeCanvas();
+      }
     }
   }, {
     key: "render",
@@ -427,11 +468,14 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
   }, {
     key: "updateCanvasStyle",
     value: function updateCanvasStyle() {
-      var width = Math.round(this.width / this.pixelRatio) + 'px';
-      this.canvas.width = this.width;
-      this.canvas.height = this.fftSamples / 2 * this.channels;
-      this.canvas.style.width = width;
-      this.canvas.style.height = this.height + 'px';
+      this.updateCanvases();
+      //width per canvas
+      for (var i = 0; i < this.canvases.length; i++) {
+        this.canvases[i].width = Math.round(this.width / this.canvases.length);
+        this.canvases[i].height = this.fftSamples / 2 * this.channels;
+        this.canvases[i].style.width = Math.round(this.canvases[i].width / this.pixelRatio) + 'px';
+        this.canvases[i].style.height = this.height + 'px';
+      }
     }
   }, {
     key: "drawSpectrogram",
@@ -441,23 +485,58 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
         // to [channel, sample, freq] format
         frequenciesData = [frequenciesData];
       }
-      var spectrCc = my.spectrCc;
+      my.updateCanvasStyle();
+
+      //Stop canvases still being drawn
+      for (var i = 0; i < my.canvasesTimeouts.length; i++) {
+        clearTimeout(my.canvasesTimeouts[i]);
+      }
+      var view = [my.scrollLeftTracker, my.scrollLeftTracker + my.wrapper.clientWidth];
+      for (var canvasNum = 0; canvasNum < my.canvases.length; canvasNum++) {
+        var canvasLeft = canvasNum * Math.floor(my.width / my.canvases.length / my.pixelRatio);
+        var canvasRight = (canvasNum + 1) * Math.floor(my.width / my.canvases.length / my.pixelRatio);
+        var canvasBound = [canvasLeft, canvasRight];
+        my.canvases[canvasNum].style['left'] = canvasLeft + 'px';
+
+        //Optimise drawing for the view
+        var priority = 0;
+        if (canvasBound[0] > view[1]) {
+          //Canvas is to the right of view window
+          var distance = canvasBound[0] - view[1];
+          priority = Math.ceil(distance / (view[1] - view[0]));
+        } else if (canvasBound[1] < view[0]) {
+          //Canvas is to the left of the view window
+          var _distance = view[0] - canvasBound[1];
+          priority = Math.ceil(_distance / (view[1] - view[0]));
+        }
+
+        //delay = 25ms * number of viewport widths away the canvas is
+        my.canvasesTimeouts[canvasNum] = setTimeout(my.drawToCanvas, 25 * priority, frequenciesData, my, canvasNum);
+      }
+    }
+
+    /**
+     * Draw spectrogram channel to a specific canvas
+     * @param {[Number, Number, Number]} frequenciesData spectrogram data in [channel, sample, freq] format
+     * @param {SpectrogramPlugin} my variable with 'this' in it
+     * @param {Number} canvasNum Canvas to draw to
+     */
+  }, {
+    key: "drawToCanvas",
+    value: function drawToCanvas(frequenciesData, my, canvasNum) {
       var height = my.fftSamples / 2;
-      var width = my.width;
       var freqFrom = my.buffer.sampleRate / 2;
       var freqMin = my.frequencyMin;
       var freqMax = my.frequencyMax;
-      if (!spectrCc) {
-        return;
-      }
-      var _loop = function _loop(c) {
-        // for each channel
-        var pixels = my.resample(frequenciesData[c]);
-        var imageData = new ImageData(width, height);
+      var _loop = function _loop(channel) {
+        //Get pixels from frequency data and apply to image
+        var relevantFreqs = frequenciesData[channel].slice(canvasNum * Math.round(frequenciesData[channel].length / my.canvases.length), (canvasNum + 1) * Math.round(frequenciesData[channel].length / my.canvases.length));
+        var pixels = my.resample(relevantFreqs);
+        var imageData = new ImageData(pixels.length, height);
         for (var i = 0; i < pixels.length; i++) {
           for (var j = 0; j < pixels[i].length; j++) {
             var colorMap = my.colorMap[pixels[i][j]];
-            var redIndex = ((height - j) * width + i) * 4;
+            var redIndex = ((height - j) * imageData.width + i) * 4;
             imageData.data[redIndex] = colorMap[0] * 255;
             imageData.data[redIndex + 1] = colorMap[1] * 255;
             imageData.data[redIndex + 2] = colorMap[2] * 255;
@@ -465,21 +544,26 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
           }
         }
 
-        // scale and stack spectrograms
+        //Draw image to canvas
         createImageBitmap(imageData).then(function (renderer) {
-          return spectrCc.drawImage(renderer, 0, height * (1 - freqMax / freqFrom),
-          // source x, y
-          width, height * (freqMax - freqMin) / freqFrom,
-          // source width, height
-          0, height * c,
-          // destination x, y
-          width, height // destination width, height
-          );
+          if (my.canvases[canvasNum]) {
+            //Check canvas still exists after creating image
+            my.canvases[canvasNum].getContext('2d').drawImage(renderer, 0, height * (1 - freqMax / freqFrom),
+            // source x, y
+            imageData.width, height * (freqMax - freqMin) / freqFrom,
+            // source width, height
+            0, height * channel,
+            // destination x, y
+            my.canvases[canvasNum].width, height // destination width, height
+            );
+          }
         });
       };
-      for (var c = 0; c < frequenciesData.length; c++) {
-        _loop(c);
+      for (var channel = 0; channel < frequenciesData.length; channel++) {
+        _loop(channel);
       }
+      //Drawing is finished
+      my.canvasesTimeouts[canvasNum] = null;
     }
   }, {
     key: "getFrequencies",
@@ -497,7 +581,7 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var frequencies = [];
       var noverlap = this.noverlap;
       if (!noverlap) {
-        var uniqueSamplesPerPx = buffer.length / this.canvas.width;
+        var uniqueSamplesPerPx = buffer.length / this.width;
         noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx));
       }
       var fft = new _fft.default(fftSamples, sampleRate, this.windowFunc, this.alpha);
@@ -623,13 +707,14 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     key: "updateScroll",
     value: function updateScroll(e) {
       if (this.wrapper) {
+        this.scrollLeftTracker = e.target.scrollLeft;
         this.wrapper.scrollLeft = e.target.scrollLeft;
       }
     }
   }, {
     key: "resample",
     value: function resample(oldMatrix) {
-      var columnsNumber = this.width;
+      var columnsNumber = oldMatrix.length;
       var newMatrix = [];
       var oldPiece = 1 / oldMatrix.length;
       var newPiece = 1 / columnsNumber;
@@ -665,6 +750,15 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       }
       return newMatrix;
     }
+  }, {
+    key: "stretchCanvases",
+    value: function stretchCanvases() {
+      for (var i = 0; i < this.canvases.length; i++) {
+        this.canvases[i].style.width = Math.round(this.drawer.width / this.canvases.length / this.pixelRatio) + 'px';
+        var canvasLeft = i * Math.floor(this.drawer.width / this.canvases.length / this.pixelRatio);
+        this.canvases[i].style['left'] = canvasLeft + 'px';
+      }
+    }
   }], [{
     key: "create",
     value: