wavesurfer.js 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,17 +55,16 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/register": "^7.17.7",
-    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.1",
-    "babel-loader": "^8.2.4",
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/register": "^7.18.9",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.2",
+    "babel-loader": "^8.2.5",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-proxy": "^1.1.0",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.3",
     "debounce": "^1.2.1",
     "esdoc": "^1.1.0",
     "esdoc-accessor-plugin": "^1.0.0",
@@ -74,24 +73,24 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.11.0",
-    "htmlhint": "^1.1.2",
+    "eslint": "^8.24.0",
+    "htmlhint": "^1.1.4",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^4.0.1",
-    "karma": "^6.3.17",
+    "jasmine-core": "^4.4.0",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-firefox-launcher": "^2.1.2",
-    "karma-jasmine": "4.0.1",
+    "karma-jasmine": "5.1.0",
     "karma-jasmine-matchers": "5.0.0",
     "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^12.3.7",
+    "lint-staged": "^13.0.3",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
   },
   "homepage": "https://wavesurfer-js.org",

package/src/drawer.multicanvas.js

@@ -323,10 +323,10 @@ export default class MultiCanvas extends Drawer {
                     // 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)
-                    if (h == 0 && this.params.barMinHeight) {
-                        h = this.params.barMinHeight;
+                    // raise the bar height to the specified minimum height
+                    // Math.max is used to replace any value smaller than barMinHeight (not just 0) with barMinHeight
+                    if (this.params.barMinHeight) {
+                        h = Math.max(h, this.params.barMinHeight);
                     }
 
                     this.fillRect(

package/src/plugin/markers/index.js

@@ -8,6 +8,8 @@
  * @property {?position} string "top" or "bottom", defaults to "bottom"
  * @property {?markerElement} element An HTML element to display instead of the default marker image
  * @property {?draggable} boolean Set marker as draggable, defaults to false
+ * @property {?boolean} preventContextMenu Determines whether the context menu
+ * is prevented from being opened, defaults to false
  */
 
 
@@ -159,7 +161,8 @@ export default class MarkersPlugin {
             label: params.label,
             color: params.color || DEFAULT_FILL_COLOR,
             position: params.position || DEFAULT_POSITION,
-            draggable: !!params.draggable
+            draggable: !!params.draggable,
+            preventContextMenu: !!params.preventContextMenu
         };
 
         marker.el = this._createMarkerElement(marker, params.markerElement);
@@ -181,6 +184,18 @@ export default class MarkersPlugin {
         if (!marker) {
             return;
         }
+        let label = marker.el.getElementsByClassName("marker-label")[0];
+        if (label) {
+            if (label._onContextMenu) {
+                label.removeEventListener("contextmenu", label._onContextMenu);
+            }
+            if (label._onClick) {
+                label.removeEventListener("click", label._onClick);
+            }
+            if (label._onMouseDown) {
+                label.removeEventListener("mousedown", label._onMouseDown);
+            }
+        }
 
         this.wrapper.removeChild(marker.el);
         this.markers.splice(index, 1);
@@ -262,10 +277,11 @@ export default class MarkersPlugin {
             "align-items": "center",
             cursor: "pointer"
         });
+        labelDiv.classList.add("marker-label");
 
         el.appendChild(labelDiv);
 
-        labelDiv.addEventListener("click", e => {
+        labelDiv._onClick = (e) => {
             e.stopPropagation();
             // Click event is caught when the marker-drop event was dispatched.
             // Drop event was dispatched at this moment, but this.dragging
@@ -275,12 +291,22 @@ export default class MarkersPlugin {
             }
             this.wavesurfer.setCurrentTime(marker.time);
             this.wavesurfer.fireEvent("marker-click", marker, e);
-        });
+        };
+        labelDiv.addEventListener("click", labelDiv._onClick);
+
+        labelDiv._onContextMenu = (e) => {
+            if (marker.preventContextMenu) {
+                e.preventDefault();
+            }
+            this.wavesurfer.fireEvent("marker-contextmenu", marker, e);
+        };
+        labelDiv.addEventListener("contextmenu", labelDiv._onContextMenu);
 
         if (marker.draggable) {
-            labelDiv.addEventListener("mousedown", e => {
+            labelDiv._onMouseDown = () => {
                 this.selectedMarker = marker;
-            });
+            };
+            labelDiv.addEventListener("mousedown", labelDiv._onMouseDown);
         }
         return el;
     }

package/src/plugin/regions/index.js

@@ -299,7 +299,7 @@ export default class RegionsPlugin {
             );
 
             // set the region channel index based on the clicked area
-            if (this.wavesurfer.params.splitChannels) {
+            if (this.wavesurfer.params.splitChannels && this.wavesurfer.params.splitChannelsOptions.splitDragSelection) {
                 const y = (e.touches ? e.touches[0].clientY : e.clientY) - wrapperRect.top;
                 const channelCount = this.wavesurfer.backend.buffer != null ? this.wavesurfer.backend.buffer.numberOfChannels : 1;
                 const channelHeight = this.wrapper.clientHeight / channelCount;

package/src/plugin/spectrogram/index.js

@@ -187,7 +187,7 @@ export default class SpectrogramPlugin {
             const labelsEl = (this.labelsEl = document.createElement('canvas'));
             labelsEl.classList.add('spec-labels');
             this.drawer.style(labelsEl, {
-                position: 'fixed',
+                position: 'absolute',
                 zIndex: 9,
                 height: `${this.height * this.channels}px`,
                 width: `55px`

package/src/wavesurfer.js

@@ -174,6 +174,8 @@ import MediaElementWebAudio from './mediaelement-webaudio';
  * @property {boolean} relativeNormalization=false determines whether
  * normalization is done per channel or maintains proportionality between
  * channels. Only applied when normalize and splitChannels are both true.
+ * @property {boolean} splitDragSelection=false determines if drag selection in regions
+ * plugin works separately on each channel or only one selection for all channels
  * @since 4.3.0
  */
 
@@ -298,7 +300,8 @@ export default class WaveSurfer extends util.Observer {
             overlay: false,
             channelColors: {},
             filterChannels: [],
-            relativeNormalization: false
+            relativeNormalization: false,
+            splitDragSelection: false
         },
         vertical: false,
         waveColor: '#999',
@@ -1684,19 +1687,19 @@ export default class WaveSurfer extends util.Observer {
     /**
      * Save waveform image as data URI.
      *
-     * The default format is `'image/png'`. Other supported types are
-     * `'image/jpeg'` and `'image/webp'`.
+     * The default format is `image/png`. Other supported types are
+     * `image/jpeg` and `image/webp`.
      *
      * @param {string} format='image/png' A string indicating the image format.
-     * The default format type is `'image/png'`.
+     * The default format type is `image/png`.
      * @param {number} quality=1 A number between 0 and 1 indicating the image
      * quality to use for image formats that use lossy compression such as
-     * `'image/jpeg'`` and `'image/webp'`.
-     * @param {string} type Image data type to return. Either 'dataURL' (default)
-     * or 'blob'.
-     * @return {string|string[]|Promise} When using `'dataURL'` type this returns
+     * `image/jpeg` and `image/webp`.
+     * @param {string} type Image data type to return. Either `dataURL` (default)
+     * or `blob`.
+     * @return {string|string[]|Promise} When using `dataURL` type this returns
      * a single data URL or an array of data URLs, one for each canvas. When using
-     * `'blob'` type this returns a `Promise` resolving with an array of `Blob`
+     * `blob` type this returns a `Promise` resolving with an array of `Blob`
      * instances, one for each canvas.
      */
     exportImage(format, quality, type) {