wavesurfer.js 4.5.0 → 5.1.0

package/dist/plugin/wavesurfer.regions.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js regions plugin 4.5.0 (2021-02-14)
+ * wavesurfer.js regions plugin 5.1.0 (2021-06-20)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -32,7 +32,7 @@ exports.default = void 0;
 
 var _region = __webpack_require__(/*! ./region.js */ "./src/plugin/regions/region.js");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -75,50 +75,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * });
  */
 var RegionsPlugin = /*#__PURE__*/function () {
-  _createClass(RegionsPlugin, null, [{
-    key: "create",
-
-    /**
-     * Regions plugin definition factory
-     *
-     * This function must be used to create a plugin definition which can be
-     * used by wavesurfer to correctly instantiate the plugin.
-     *
-     * @param {RegionsPluginParams} params parameters use to initialise the plugin
-     * @return {PluginDefinition} an object representing the plugin
-     */
-    value: function create(params) {
-      return {
-        name: 'regions',
-        deferInit: params && params.deferInit ? params.deferInit : false,
-        params: params,
-        staticProps: {
-          addRegion: function addRegion(options) {
-            if (!this.initialisedPluginList.regions) {
-              this.initPlugin('regions');
-            }
-
-            return this.regions.add(options);
-          },
-          clearRegions: function clearRegions() {
-            this.regions && this.regions.clear();
-          },
-          enableDragSelection: function enableDragSelection(options) {
-            if (!this.initialisedPluginList.regions) {
-              this.initPlugin('regions');
-            }
-
-            this.regions.enableDragSelection(options);
-          },
-          disableDragSelection: function disableDragSelection() {
-            this.regions.disableDragSelection();
-          }
-        },
-        instance: RegionsPlugin
-      };
-    }
-  }]);
-
   function RegionsPlugin(params, ws) {
     var _this = this;
 
@@ -138,14 +94,18 @@ var RegionsPlugin = /*#__PURE__*/function () {
     observerPrototypeKeys.forEach(function (key) {
       _region.Region.prototype[key] = _this.util.Observer.prototype[key];
     });
-    this.wavesurfer.Region = _region.Region;
+    this.wavesurfer.Region = _region.Region; // By default, scroll the container if the user drags a region
+    // within 5% of its edge
+
+    var scrollWidthProportion = 0.05;
 
     this._onBackendCreated = function () {
       _this.wrapper = _this.wavesurfer.drawer.wrapper;
+      _this.orientation = _this.wavesurfer.drawer.orientation;
 
       if (_this.params.regions) {
         _this.params.regions.forEach(function (region) {
-          region.edgeScrollWidth = _this.params.edgeScrollWidth || _this.wrapper.clientWidth * 0.05;
+          region.edgeScrollWidth = _this.params.edgeScrollWidth || _this.wrapper.clientWidth * scrollWidthProportion;
 
           _this.add(region);
         });
@@ -157,6 +117,7 @@ var RegionsPlugin = /*#__PURE__*/function () {
 
     this._onReady = function () {
       _this.wrapper = _this.wavesurfer.drawer.wrapper;
+      _this.vertical = _this.wavesurfer.drawer.params.vertical;
 
       if (_this.params.dragSelection) {
         _this.enableDragSelection(_this.params);
@@ -212,7 +173,9 @@ var RegionsPlugin = /*#__PURE__*/function () {
     value: function add(params) {
       var _this2 = this;
 
-      if (this.wouldExceedMaxRegions()) return null;
+      if (this.wouldExceedMaxRegions()) {
+        return null;
+      }
 
       if (!params.minLength && this.regionsMinLength) {
         params = _objectSpread(_objectSpread({}, params), {}, {
@@ -293,7 +256,7 @@ var RegionsPlugin = /*#__PURE__*/function () {
         touchId = e.targetTouches ? e.targetTouches[0].identifier : null; // Store for scroll calculations
 
         maxScroll = _this4.wrapper.scrollWidth - _this4.wrapper.clientWidth;
-        wrapperRect = _this4.wrapper.getBoundingClientRect();
+        wrapperRect = _this4.util.withOrientation(_this4.wrapper.getBoundingClientRect(), _this4.vertical);
         drag = true;
         start = _this4.wavesurfer.drawer.handleEvent(e, true);
         region = null;
@@ -344,7 +307,7 @@ var RegionsPlugin = /*#__PURE__*/function () {
         _this4.wrapper.removeEventListener('mouseleave', eventUp);
       });
 
-      var eventMove = function eventMove(e) {
+      var eventMove = function eventMove(event) {
         if (!drag) {
           return;
         }
@@ -353,21 +316,24 @@ var RegionsPlugin = /*#__PURE__*/function () {
           return;
         }
 
-        if (e.touches && e.touches.length > 1) {
+        if (event.touches && event.touches.length > 1) {
           return;
         }
 
-        if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
+        if (event.targetTouches && event.targetTouches[0].identifier != touchId) {
           return;
         } // auto-create a region during mouse drag, unless region-count would exceed "maxRegions"
 
 
         if (!region) {
           region = _this4.add(params || {});
-          if (!region) return;
+
+          if (!region) {
+            return;
+          }
         }
 
-        var end = _this4.wavesurfer.drawer.handleEvent(e);
+        var end = _this4.wavesurfer.drawer.handleEvent(event);
 
         var startUpdate = _this4.wavesurfer.regions.util.getRegionSnapToGridValue(start * duration);
 
@@ -376,11 +342,14 @@ var RegionsPlugin = /*#__PURE__*/function () {
         region.update({
           start: Math.min(endUpdate, startUpdate),
           end: Math.max(endUpdate, startUpdate)
-        }); // If scrolling is enabled
+        });
+
+        var orientedEvent = _this4.util.withOrientation(event, _this4.vertical); // If scrolling is enabled
+
 
         if (scroll && container.clientWidth < _this4.wrapper.scrollWidth) {
           // Check threshold based on mouse
-          var x = e.clientX - wrapperRect.left;
+          var x = orientedEvent.clientX - wrapperRect.left;
 
           if (x <= scrollThreshold) {
             scrollDirection = -1;
@@ -390,7 +359,7 @@ var RegionsPlugin = /*#__PURE__*/function () {
             scrollDirection = null;
           }
 
-          scrollDirection && edgeScroll(e);
+          scrollDirection && edgeScroll(event);
         }
       };
 
@@ -463,6 +432,48 @@ var RegionsPlugin = /*#__PURE__*/function () {
 
       return value;
     }
+  }], [{
+    key: "create",
+    value:
+    /**
+     * Regions plugin definition factory
+     *
+     * This function must be used to create a plugin definition which can be
+     * used by wavesurfer to correctly instantiate the plugin.
+     *
+     * @param {RegionsPluginParams} params parameters use to initialise the plugin
+     * @return {PluginDefinition} an object representing the plugin
+     */
+    function create(params) {
+      return {
+        name: 'regions',
+        deferInit: params && params.deferInit ? params.deferInit : false,
+        params: params,
+        staticProps: {
+          addRegion: function addRegion(options) {
+            if (!this.initialisedPluginList.regions) {
+              this.initPlugin('regions');
+            }
+
+            return this.regions.add(options);
+          },
+          clearRegions: function clearRegions() {
+            this.regions && this.regions.clear();
+          },
+          enableDragSelection: function enableDragSelection(options) {
+            if (!this.initialisedPluginList.regions) {
+              this.initPlugin('regions');
+            }
+
+            this.regions.enableDragSelection(options);
+          },
+          disableDragSelection: function disableDragSelection() {
+            this.regions.disableDragSelection();
+          }
+        },
+        instance: RegionsPlugin
+      };
+    }
   }]);
 
   return RegionsPlugin;
@@ -504,7 +515,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  */
 var Region = /*#__PURE__*/function () {
   function Region(params, regionsUtils, ws) {
-    var _this = this;
+    var _params$showTooltip,
+        _this = this;
 
     _classCallCheck(this, Region);
 
@@ -513,6 +525,7 @@ var Region = /*#__PURE__*/function () {
     this.util = ws.util;
     this.style = this.util.style;
     this.regionsUtil = regionsUtils;
+    this.vertical = ws.drawer.params.vertical;
     this.id = params.id == null ? ws.util.getId() : params.id;
     this.start = Number(params.start) || 0;
     this.end = params.end == null ? // small marker-like region
@@ -534,6 +547,7 @@ var Region = /*#__PURE__*/function () {
     this.handleRightEl = null;
     this.data = params.data || {};
     this.attributes = params.attributes || {};
+    this.showTooltip = (_params$showTooltip = params.showTooltip) !== null && _params$showTooltip !== void 0 ? _params$showTooltip : true;
     this.maxLength = params.maxLength; // It assumes the minLength parameter value, or the regionsMinLength parameter value, if the first one not provided
 
     this.minLength = params.minLength;
@@ -630,7 +644,7 @@ var Region = /*#__PURE__*/function () {
     key: "remove",
     value: function remove() {
       if (this.element) {
-        this.wrapper.removeChild(this.element);
+        this.wrapper.removeChild(this.element.domElement);
         this.element = null;
         this.fireEvent('remove');
         this.wavesurfer.un('zoom', this._onRedraw);
@@ -677,16 +691,20 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var regionEl = document.createElement('region');
-      regionEl.className = 'wavesurfer-region';
-      regionEl.title = this.formatTime(this.start, this.end);
-      regionEl.setAttribute('data-id', this.id);
+      this.element = this.util.withOrientation(this.wrapper.appendChild(document.createElement('region')), this.vertical);
+      this.element.className = 'wavesurfer-region';
+
+      if (this.showTooltip) {
+        this.element.title = this.formatTime(this.start, this.end);
+      }
+
+      this.element.setAttribute('data-id', this.id);
 
       for (var attrname in this.attributes) {
-        regionEl.setAttribute('data-region-' + attrname, this.attributes[attrname]);
+        this.element.setAttribute('data-region-' + attrname, this.attributes[attrname]);
       }
 
-      this.style(regionEl, {
+      this.style(this.element, {
         position: 'absolute',
         zIndex: 2,
         height: this.regionHeight,
@@ -695,13 +713,13 @@ var Region = /*#__PURE__*/function () {
       /* Resize handles */
 
       if (this.resize) {
-        this.handleLeftEl = regionEl.appendChild(document.createElement('handle'));
-        this.handleRightEl = regionEl.appendChild(document.createElement('handle'));
+        this.handleLeftEl = this.util.withOrientation(this.element.appendChild(document.createElement('handle')), this.vertical);
+        this.handleRightEl = this.util.withOrientation(this.element.appendChild(document.createElement('handle')), this.vertical);
         this.handleLeftEl.className = 'wavesurfer-handle wavesurfer-handle-start';
         this.handleRightEl.className = 'wavesurfer-handle wavesurfer-handle-end'; // Default CSS properties for both handles.
 
         var css = {
-          cursor: 'col-resize',
+          cursor: this.vertical ? 'row-resize' : 'col-resize',
           position: 'absolute',
           top: '0px',
           width: '2px',
@@ -725,9 +743,8 @@ var Region = /*#__PURE__*/function () {
         }
       }
 
-      this.element = this.wrapper.appendChild(regionEl);
       this.updateRender();
-      this.bindEvents(regionEl);
+      this.bindEvents();
     }
   }, {
     key: "formatTime",
@@ -792,7 +809,9 @@ var Region = /*#__PURE__*/function () {
           this.element.setAttribute('data-region-' + attrname, this.attributes[attrname]);
         }
 
-        this.element.title = this.formatTime(this.start, this.end);
+        if (this.showTooltip) {
+          this.element.title = this.formatTime(this.start, this.end);
+        }
       }
     }
     /* Bind audio events. */
@@ -912,19 +931,21 @@ var Region = /*#__PURE__*/function () {
       var regionLeftHalfTime;
       var regionRightHalfTime; // Scroll when the user is dragging within the threshold
 
-      var edgeScroll = function edgeScroll(e) {
+      var edgeScroll = function edgeScroll(event) {
+        var orientedEvent = _this4.util.withOrientation(event, _this4.vertical);
+
         var duration = _this4.wavesurfer.getDuration();
 
         if (!scrollDirection || !drag && !resize) {
           return;
         }
 
-        var x = e.clientX;
+        var x = orientedEvent.clientX;
         var distanceBetweenCursorAndWrapperEdge = 0;
         var regionHalfTimeWidth = 0;
         var adjustment = 0; // Get the currently selected time according to the mouse position
 
-        var time = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(e) * duration);
+        var time = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(event) * duration);
 
         if (drag) {
           // Considering the point of contact with the region while edgescrolling
@@ -965,26 +986,28 @@ var Region = /*#__PURE__*/function () {
         } // Don't edgescroll if region has reached min or max limit
 
 
+        var wrapperScrollLeft = _this4.wrapper.scrollLeft;
+
         if (scrollDirection === -1) {
-          if (Math.round(_this4.wrapper.scrollLeft) === 0) {
+          if (Math.round(wrapperScrollLeft) === 0) {
             return;
           }
 
-          if (Math.round(_this4.wrapper.scrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
+          if (Math.round(wrapperScrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
             return;
           }
         } else {
-          if (Math.round(_this4.wrapper.scrollLeft) === maxScroll) {
+          if (Math.round(wrapperScrollLeft) === maxScroll) {
             return;
           }
 
-          if (Math.round(_this4.wrapper.scrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
+          if (Math.round(wrapperScrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
             return;
           }
         } // Update scroll position
 
 
-        var scrollLeft = _this4.wrapper.scrollLeft - adjustment + scrollSpeed * scrollDirection;
+        var scrollLeft = wrapperScrollLeft - adjustment + scrollSpeed * scrollDirection;
 
         if (scrollDirection === -1) {
           var calculatedLeft = Math.max(0 + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge, scrollLeft);
@@ -1000,38 +1023,38 @@ var Region = /*#__PURE__*/function () {
         drag ? _this4.onDrag(delta) : _this4.onResize(delta, resize); // Repeat
 
         window.requestAnimationFrame(function () {
-          edgeScroll(e);
+          edgeScroll(event);
         });
       };
 
-      var onDown = function onDown(e) {
+      var onDown = function onDown(event) {
         var duration = _this4.wavesurfer.getDuration();
 
-        if (e.touches && e.touches.length > 1) {
+        if (event.touches && event.touches.length > 1) {
           return;
         }
 
-        touchId = e.targetTouches ? e.targetTouches[0].identifier : null; // stop the event propagation, if this region is resizable or draggable
+        touchId = event.targetTouches ? event.targetTouches[0].identifier : null; // stop the event propagation, if this region is resizable or draggable
         // and the event is therefore handled here.
 
         if (_this4.drag || _this4.resize) {
-          e.stopPropagation();
+          event.stopPropagation();
         } // Store the selected startTime we begun dragging or resizing
 
 
-        startTime = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(e, true) * duration); // Store the selected point of contact when we begin dragging
+        startTime = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(event, true) * duration); // Store the selected point of contact when we begin dragging
 
         regionLeftHalfTime = startTime - _this4.start;
         regionRightHalfTime = _this4.end - startTime; // Store for scroll calculations
 
         maxScroll = _this4.wrapper.scrollWidth - _this4.wrapper.clientWidth;
-        wrapperRect = _this4.wrapper.getBoundingClientRect();
+        wrapperRect = _this4.util.withOrientation(_this4.wrapper.getBoundingClientRect(), _this4.vertical);
         _this4.isResizing = false;
         _this4.isDragging = false;
 
-        if (e.target.tagName.toLowerCase() === 'handle') {
+        if (event.target.tagName.toLowerCase() === 'handle') {
           _this4.isResizing = true;
-          resize = e.target.classList.contains('wavesurfer-handle-start') ? 'start' : 'end';
+          resize = event.target.classList.contains('wavesurfer-handle-start') ? 'start' : 'end';
         } else {
           _this4.isDragging = true;
           drag = true;
@@ -1039,8 +1062,8 @@ var Region = /*#__PURE__*/function () {
         }
       };
 
-      var onUp = function onUp(e) {
-        if (e.touches && e.touches.length > 1) {
+      var onUp = function onUp(event) {
+        if (event.touches && event.touches.length > 1) {
           return;
         }
 
@@ -1057,20 +1080,22 @@ var Region = /*#__PURE__*/function () {
 
           _this4.util.preventClick();
 
-          _this4.fireEvent('update-end', e);
+          _this4.fireEvent('update-end', event);
 
-          _this4.wavesurfer.fireEvent('region-update-end', _this4, e);
+          _this4.wavesurfer.fireEvent('region-update-end', _this4, event);
         }
       };
 
-      var onMove = function onMove(e) {
+      var onMove = function onMove(event) {
         var duration = _this4.wavesurfer.getDuration();
 
-        if (e.touches && e.touches.length > 1) {
+        var orientedEvent = _this4.util.withOrientation(event, _this4.vertical);
+
+        if (event.touches && event.touches.length > 1) {
           return;
         }
 
-        if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
+        if (event.targetTouches && event.targetTouches[0].identifier != touchId) {
           return;
         }
 
@@ -1080,7 +1105,7 @@ var Region = /*#__PURE__*/function () {
 
         var oldTime = startTime;
 
-        var time = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(e) * duration);
+        var time = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(event) * duration);
 
         if (drag) {
           // To maintain relative cursor start point while dragging
@@ -1141,30 +1166,18 @@ var Region = /*#__PURE__*/function () {
 
         if (_this4.scroll && container.clientWidth < _this4.wrapper.scrollWidth) {
           // Triggering edgescroll from within edgeScrollWidth
-          if (drag) {
-            var x = e.clientX; // Check direction
-
-            if (x < wrapperRect.left + _this4.edgeScrollWidth) {
-              scrollDirection = -1;
-            } else if (x > wrapperRect.right - _this4.edgeScrollWidth) {
-              scrollDirection = 1;
-            } else {
-              scrollDirection = null;
-            }
+          var x = orientedEvent.clientX; // Check direction
+
+          if (x < wrapperRect.left + _this4.edgeScrollWidth) {
+            scrollDirection = -1;
+          } else if (x > wrapperRect.right - _this4.edgeScrollWidth) {
+            scrollDirection = 1;
           } else {
-            var _x = e.clientX; // Check direction
-
-            if (_x < wrapperRect.left + _this4.edgeScrollWidth) {
-              scrollDirection = -1;
-            } else if (_x > wrapperRect.right - _this4.edgeScrollWidth) {
-              scrollDirection = 1;
-            } else {
-              scrollDirection = null;
-            }
+            scrollDirection = null;
           }
 
           if (scrollDirection) {
-            edgeScroll(e);
+            edgeScroll(event);
           }
         }
       };
@@ -1172,17 +1185,19 @@ var Region = /*#__PURE__*/function () {
       this.element.addEventListener('mousedown', onDown);
       this.element.addEventListener('touchstart', onDown);
       document.body.addEventListener('mousemove', onMove);
-      document.body.addEventListener('touchmove', onMove);
-      document.body.addEventListener('mouseup', onUp);
+      document.body.addEventListener('touchmove', onMove, {
+        passive: false
+      });
+      document.addEventListener('mouseup', onUp);
       document.body.addEventListener('touchend', onUp);
       this.on('remove', function () {
-        document.body.removeEventListener('mouseup', onUp);
+        document.removeEventListener('mouseup', onUp);
         document.body.removeEventListener('touchend', onUp);
         document.body.removeEventListener('mousemove', onMove);
         document.body.removeEventListener('touchmove', onMove);
       });
       this.wavesurfer.on('destroy', function () {
-        document.body.removeEventListener('mouseup', onUp);
+        document.removeEventListener('mouseup', onUp);
         document.body.removeEventListener('touchend', onUp);
       });
     }
@@ -1253,7 +1268,14 @@ var Region = /*#__PURE__*/function () {
   }, {
     key: "updateHandlesResize",
     value: function updateHandlesResize(resize) {
-      var cursorStyle = resize ? 'col-resize' : 'auto';
+      var cursorStyle;
+
+      if (resize) {
+        cursorStyle = this.vertical ? 'row-resize' : 'col-resize';
+      } else {
+        cursorStyle = 'auto';
+      }
+
       this.handleLeftEl && this.style(this.handleLeftEl, {
         cursor: cursorStyle
       });
@@ -1278,8 +1300,9 @@ exports.Region = Region;
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
 /******/ 		// Check if module is in cache
-/******/ 		if(__webpack_module_cache__[moduleId]) {
-/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
 /******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {
@@ -1296,10 +1319,13 @@ exports.Region = Region;
 /******/ 	}
 /******/ 	
 /************************************************************************/
-/******/ 	// module exports must be returned from runtime so entry inlining is disabled
+/******/ 	
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__("./src/plugin/regions/index.js");
+/******/ 	// This entry module is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/plugin/regions/index.js");
+/******/ 	
+/******/ 	return __webpack_exports__;
 /******/ })()
 ;
 });