wavesurfer.js 6.4.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -35,7 +35,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/katspaugh/wavesurfer.js.git"
+    "url": "git@github.com:wavesurfer-js/wavesurfer.js.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -43,7 +43,7 @@
   "author": "",
   "license": "BSD-3-Clause",
   "bugs": {
-    "url": "https://github.com/katspaugh/wavesurfer.js/issues"
+    "url": "https://github.com/wavesurfer-js/wavesurfer.js/issues"
   },
   "keywords": [
     "waveform",
@@ -55,13 +55,13 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.12",
     "@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-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
     "date-fns": "^2.29.3",
@@ -85,11 +85,11 @@
     "karma-jasmine-matchers": "5.0.0",
     "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.1.0",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
   },

package/src/mediaelement.js

@@ -65,6 +65,9 @@ export default class MediaElement extends WebAudio {
         this.mediaListeners.error = () => {
             this.fireEvent('error', 'Error loading media element');
         };
+        this.mediaListeners.waiting = () => {
+            this.fireEvent('waiting');
+        };
         this.mediaListeners.canplay = () => {
             this.fireEvent('canplay');
         };

package/src/plugin/cursor/index.js

@@ -142,7 +142,7 @@ export default class CursorPlugin {
          */
         this.displayTime = null;
         /**
-         * true if call destory before ready event
+         * true when `destroy` was called before `ready` event
          * @type {boolean}
          */
         this.isDestroyCalled = false;

package/src/plugin/markers/index.js

@@ -274,7 +274,7 @@ export default class MarkersPlugin {
             labelEl.innerText = label;
             labelEl.setAttribute('title', tooltip);
             this.style(labelEl, {
-                "font-family": "monospace",
+                "font-family": "inherit",
                 "font-size": "90%"
             });
             labelDiv.appendChild(labelEl);

package/src/plugin/regions/index.js

@@ -4,6 +4,8 @@
  * @typedef {Object} RegionsPluginParams
  * @property {?boolean} dragSelection Enable creating regions by dragging with
  * the mouse
+ * @property {?boolean} contentEditable=false Allow/disallow editing content of the region
+ * @property {?boolean} removeButton=false adds remove region button
  * @property {?RegionParams[]} regions Regions that should be added upon
  * initialisation
  * @property {number} slop=2 The sensitivity of the mouse dragging
@@ -203,6 +205,8 @@ export default class RegionsPlugin {
 
         params = {
             edgeScrollWidth: this.params.edgeScrollWidth || this.defaultEdgeScrollWidth,
+            contentEditable: this.params.contentEditable,
+            removeButton: this.params.removeButton,
             ...params
         };
 

package/src/plugin/regions/region.js

@@ -28,6 +28,8 @@ export class Region {
         this.resize =
             params.resize === undefined ? true : Boolean(params.resize);
         this.drag = params.drag === undefined ? true : Boolean(params.drag);
+        this.contentEditable = Boolean(params.contentEditable);
+        this.removeButton = Boolean(params.removeButton);
         // reflect resize and drag state of region for region-updated listener
         this.isResizing = false;
         this.isDragging = false;
@@ -196,6 +198,40 @@ export class Region {
             top: this.marginTop
         });
 
+        /* Button Remove Region */
+        if (this.removeButton){
+            const removeButtonEl = document.createElement('div');
+            removeButtonEl.className = 'remove-region-button';
+            removeButtonEl.innerText = 'x';
+            this.removeButtonEl = this.element.appendChild(removeButtonEl);
+            const css = {
+                zIndex: 4,
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+                cursor:'pointer',
+                marginRight: '3px',
+                fontSize: '80%',
+                color: 'grey',
+                height: '14px'
+            };
+            this.style(this.removeButtonEl, css);
+        }
+
+        /* Edit content */
+        if (this.contentEditable){
+            const contentEl = document.createElement('div');
+            contentEl.className = 'region-content';
+            contentEl.contentEditable = true;
+            contentEl.innerText = this.data.text || '';
+            this.contentEl = this.element.appendChild(contentEl);
+            const css = {
+                zIndex: 4,
+                padding: '2px 5px',
+                cursor:'text'};
+            this.style(this.contentEl, css);
+        }
+
         /* Resize handles */
         if (this.resize) {
             this.handleLeftEl = this.util.withOrientation(
@@ -404,6 +440,22 @@ export class Region {
         if (this.drag || this.resize) {
             this.bindDragEvents();
         }
+
+        /* Edit content */
+        if (this.contentEditable){
+            this.contentEl.addEventListener('blur', this.onContentBlur.bind(this));
+            this.contentEl.addEventListener('click', this.onContentClick.bind(this));
+        }
+        /* Remove button */
+        if (this.removeButton){
+            this.removeButtonEl.addEventListener('click', this.onRemove.bind(this));
+        }
+
+        this.on('remove', () => {
+            this.contentEl.removeEventListener('blur', this.onContentBlur.bind(this));
+            this.contentEl.removeEventListener('click', this.onContentClick.bind(this));
+            this.removeButtonEl.removeEventListener('click', this.onRemove.bind(this));
+        });
     }
 
     bindDragEvents() {
@@ -586,6 +638,7 @@ export class Region {
         const onMove = (event) => {
             const duration = this.wavesurfer.getDuration();
             let orientedEvent = this.util.withOrientation(event, this.vertical);
+            let delta = null;
 
             if (event.touches && event.touches.length > 1) {
                 return;
@@ -632,7 +685,9 @@ export class Region {
                     }
                 } else if (resize === 'end') {
                     if (time < this.start + minLength) {
+                        // Calculate the end time based on the min length of the region.
                         time = this.start + minLength;
+                        delta = time - (this.end + (time - startTime));
                     }
 
                     if (time > duration) {
@@ -641,7 +696,10 @@ export class Region {
                 }
             }
 
-            let delta = time - startTime;
+            if (!delta) {
+                delta = time - startTime;
+            }
+
             startTime = time;
 
             // Drag
@@ -794,6 +852,23 @@ export class Region {
         }
     }
 
+    onContentBlur(event){
+        const {text: oldText} = this.data || {};
+        const text = event.target.innerText;
+        const data = {...this.data, text };
+        const eventParams = {action: 'contentEdited', oldText, text};
+        this.update({data}, eventParams);
+    }
+
+    onContentClick(event){
+        event.stopPropagation();
+    }
+
+    onRemove(event){
+        event.stopPropagation();
+        this.remove();
+    }
+
     updateHandlesResize(resize) {
         let cursorStyle;
         if (resize) {

package/src/util/silence-mode.js

@@ -10,6 +10,13 @@
  * @since 5.2.0
  */
 export default function ignoreSilenceMode() {
+    // Set webaudio context with 1 second silent audio 44100 bit rate buffer to allow playing audio even if silent switch is on the device
+    const silentAC = new AudioContext();
+    const silentBS = silentAC.createBufferSource();
+    silentBS.buffer = silentAC.createBuffer(1, 1, 44100);
+    silentBS.connect(silentAC.destination);
+    silentBS.start();
+
     // Set the src to a short bit of url encoded as a silent mp3
     // NOTE The silence MP3 must be high quality, when web audio sounds are played
     // in parallel the web audio sound is mixed to match the bitrate of the html sound

package/src/wavesurfer.js

@@ -1004,6 +1004,10 @@ export default class WaveSurfer extends util.Observer {
      * @emits WaveSurfer#volume
      */
     setVolume(newVolume) {
+        if (this.isMuted === true) {
+            this.savedVolume = newVolume;
+            return;
+        }
         this.backend.setVolume(newVolume);
         this.fireEvent('volume', newVolume);
     }