wavesurfer.js 6.4.0 → 6.5.0

package/dist/plugin/wavesurfer.regions.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js regions plugin 6.4.0 (2022-11-05)
+ * wavesurfer.js regions plugin 6.5.0 (2023-03-11)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -30,12 +30,15 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports["default"] = void 0;
 var _region = __webpack_require__(/*! ./region.js */ "./src/plugin/regions/region.js");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /**
  * Regions are visual overlays on waveform that can be used to play and loop
  * portions of audio. Regions can be dragged and resized.
@@ -165,7 +168,9 @@ var RegionsPlugin = /*#__PURE__*/function () {
         return null;
       }
       params = _objectSpread({
-        edgeScrollWidth: this.params.edgeScrollWidth || this.defaultEdgeScrollWidth
+        edgeScrollWidth: this.params.edgeScrollWidth || this.defaultEdgeScrollWidth,
+        contentEditable: this.params.contentEditable,
+        removeButton: this.params.removeButton
       }, params);
 
       // Take formatTimeCallback from plugin params if not already set
@@ -472,9 +477,15 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.Region = void 0;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /**
  *  @since 4.0.0
  *
@@ -503,6 +514,8 @@ var Region = /*#__PURE__*/function () {
     this.start + 4 / this.wrapper.scrollWidth * this.wavesurfer.getDuration() : Number(params.end);
     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;
@@ -663,6 +676,41 @@ var Region = /*#__PURE__*/function () {
         top: this.marginTop
       });
 
+      /* Button Remove Region */
+      if (this.removeButton) {
+        var removeButtonEl = document.createElement('div');
+        removeButtonEl.className = 'remove-region-button';
+        removeButtonEl.innerText = 'x';
+        this.removeButtonEl = this.element.appendChild(removeButtonEl);
+        var 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) {
+        var contentEl = document.createElement('div');
+        contentEl.className = 'region-content';
+        contentEl.contentEditable = true;
+        contentEl.innerText = this.data.text || '';
+        this.contentEl = this.element.appendChild(contentEl);
+        var _css = {
+          zIndex: 4,
+          padding: '2px 5px',
+          cursor: 'text'
+        };
+        this.style(this.contentEl, _css);
+      }
+
       /* Resize handles */
       if (this.resize) {
         this.handleLeftEl = this.util.withOrientation(this.element.appendChild(document.createElement('handle')), this.vertical);
@@ -671,7 +719,7 @@ var Region = /*#__PURE__*/function () {
         this.handleRightEl.className = 'wavesurfer-handle wavesurfer-handle-end';
 
         // Default CSS properties for both handles.
-        var css = {
+        var _css2 = {
           cursor: this.vertical ? 'row-resize' : 'col-resize',
           position: 'absolute',
           top: '0px',
@@ -683,10 +731,10 @@ var Region = /*#__PURE__*/function () {
         // Merge CSS properties per handle.
         var handleLeftCss = this.handleStyle.left !== 'none' ? Object.assign({
           left: '0px'
-        }, css, this.handleStyle.left) : null;
+        }, _css2, this.handleStyle.left) : null;
         var handleRightCss = this.handleStyle.right !== 'none' ? Object.assign({
           right: '0px'
-        }, css, this.handleStyle.right) : null;
+        }, _css2, this.handleStyle.right) : null;
         if (handleLeftCss) {
           this.style(this.handleLeftEl, handleLeftCss);
         }
@@ -836,6 +884,21 @@ var Region = /*#__PURE__*/function () {
       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', function () {
+        _this3.contentEl.removeEventListener('blur', _this3.onContentBlur.bind(_this3));
+        _this3.contentEl.removeEventListener('click', _this3.onContentClick.bind(_this3));
+        _this3.removeButtonEl.removeEventListener('click', _this3.onRemove.bind(_this3));
+      });
     }
   }, {
     key: "bindDragEvents",
@@ -996,6 +1059,7 @@ var Region = /*#__PURE__*/function () {
       var onMove = function onMove(event) {
         var duration = _this4.wavesurfer.getDuration();
         var orientedEvent = _this4.util.withOrientation(event, _this4.vertical);
+        var delta = null;
         if (event.touches && event.touches.length > 1) {
           return;
         }
@@ -1033,14 +1097,18 @@ var Region = /*#__PURE__*/function () {
             }
           } else if (resize === 'end') {
             if (time < _this4.start + minLength) {
+              // Calculate the end time based on the min length of the region.
               time = _this4.start + minLength;
+              delta = time - (_this4.end + (time - startTime));
             }
             if (time > duration) {
               time = duration;
             }
           }
         }
-        var delta = time - startTime;
+        if (!delta) {
+          delta = time - startTime;
+        }
         startTime = time;
 
         // Drag
@@ -1182,6 +1250,35 @@ var Region = /*#__PURE__*/function () {
         }, eventParams);
       }
     }
+  }, {
+    key: "onContentBlur",
+    value: function onContentBlur(event) {
+      var _ref = this.data || {},
+        oldText = _ref.text;
+      var text = event.target.innerText;
+      var data = _objectSpread(_objectSpread({}, this.data), {}, {
+        text: text
+      });
+      var eventParams = {
+        action: 'contentEdited',
+        oldText: oldText,
+        text: text
+      };
+      this.update({
+        data: data
+      }, eventParams);
+    }
+  }, {
+    key: "onContentClick",
+    value: function onContentClick(event) {
+      event.stopPropagation();
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove(event) {
+      event.stopPropagation();
+      this.remove();
+    }
   }, {
     key: "updateHandlesResize",
     value: function updateHandlesResize(resize) {