wavesurfer.js 6.2.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.2.0",
+  "version": "6.4.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.20.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/register": "^7.18.9",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.2",
+    "babel-loader": "^9.1.0",
     "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.26.0",
+    "htmlhint": "^1.1.4",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^4.0.1",
-    "karma": "^6.3.17",
+    "jasmine-core": "^4.5.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/cursor/index.js

@@ -17,6 +17,7 @@
  * 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.
+ * @property {boolean} isDestroyCalled  true if called destroy before the ready event fired
  */
 
 /**
@@ -140,11 +141,19 @@ export default class CursorPlugin {
          * @type {?HTMLElement}
          */
         this.displayTime = null;
+        /**
+         * true if call destory before ready event
+         * @type {boolean}
+         */
+        this.isDestroyCalled = false;
 
         this.params = Object.assign({}, this.defaultParams, params);
     }
 
     _onReady() {
+        if (this.isDestroyCalled) {
+            return;
+        }
         this.wrapper = this.wavesurfer.drawer.wrapper;
         this.cursor = this.util.withOrientation(this.wrapper.appendChild(
             document.createElement('cursor'),
@@ -237,10 +246,14 @@ export default class CursorPlugin {
      * Destroy the plugin (used by the Plugin API)
      */
     destroy() {
+        if (!this.cursorTime || !this.showTime){
+            this.isDestroyCalled = true;
+            return;
+        }
         if (this.params.showTime) {
-            this.showTime.remove();
+            this.showTime && this.showTime.remove();
         }
-        this.cursor.remove();
+        this.cursor && this.cursor.remove();
         this.wrapper.removeEventListener('mousemove', this._onMousemove);
         if (this.params.hideOnBlur) {
             this.wrapper.removeEventListener('mouseenter', this._onMouseenter);
@@ -323,7 +336,6 @@ export default class CursorPlugin {
      */
     formatTime(cursorTime) {
         cursorTime = isNaN(cursorTime) ? 0 : cursorTime;
-
         if (this.params.formatTimeCallback) {
             return this.params.formatTimeCallback(cursorTime);
         }

package/src/plugin/markers/index.js

@@ -4,10 +4,13 @@
  * @example wavesurfer.addMarker(regionParams);
  * @property {number} time The time to set the marker at
  * @property {?label} string An optional marker label
+ * @property {?tooltip} string An optional marker tooltip
  * @property {?color} string Background color for marker
  * @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
  */
 
 
@@ -157,9 +160,11 @@ export default class MarkersPlugin {
         let marker = {
             time: params.time,
             label: params.label,
+            tooltip: params.tooltip,
             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);
@@ -168,6 +173,8 @@ export default class MarkersPlugin {
         this.markers.push(marker);
         this._updateMarkerPositions();
 
+        this._registerEvents();
+
         return marker;
     }
 
@@ -181,9 +188,23 @@ 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);
+
+        this._unregisterEvents();
     }
 
     _createPointerSVG(color, position) {
@@ -216,6 +237,7 @@ export default class MarkersPlugin {
 
     _createMarkerElement(marker, markerElement) {
         let label = marker.label;
+        let tooltip = marker.tooltip;
 
         const el = document.createElement('marker');
         el.className = "wavesurfer-marker";
@@ -250,6 +272,7 @@ export default class MarkersPlugin {
         if ( label ) {
             const labelEl = document.createElement('span');
             labelEl.innerText = label;
+            labelEl.setAttribute('title', tooltip);
             this.style(labelEl, {
                 "font-family": "monospace",
                 "font-size": "90%"
@@ -262,10 +285,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 +299,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;
     }
@@ -360,6 +394,37 @@ export default class MarkersPlugin {
         this.wavesurfer.fireEvent("marker-drop", this.selectedMarker, event);
     }
 
+    _registerEvents() {
+        if (!this.markers.find(marker => marker.draggable)) {
+            return;
+        }
+        //we have some draggable markers, check for listeners
+        if (!this.onMouseMove) {
+            this.onMouseMove = (e) => this._onMouseMove(e);
+            window.addEventListener('mousemove', this.onMouseMove);
+        }
+
+        if (!this.onMouseUp) {
+            this.onMouseUp = (e) => this._onMouseUp(e);
+            window.addEventListener("mouseup", this.onMouseUp);
+        }
+    }
+
+    _unregisterEvents() {
+        if (this.markers.find(marker => marker.draggable)) {
+            return;
+        }
+        //we don't have any draggable markers, unregister listeners
+        if (this.onMouseMove) {
+            window.removeEventListener('mousemove', this.onMouseMove);
+            this.onMouseMove = null;
+        }
+        if (this.onMouseUp) {
+            window.removeEventListener("mouseup", this.onMouseUp);
+            this.onMouseUp = null;
+        }
+    }
+
     /**
      * Remove all markers
      */

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) {