regions plugin: add regionsMinLength option (katspaugh#2009)

* rebased fork

* added comment to minLength param

CHANGES.md

@@ -12,6 +12,7 @@ Next (unreleased)
   - Improved and unified loop playback logic (#1868)
   - Check `minLength` before resizing region (#2001)
   - Dragging and resizing will continue outside canvas (#2006)
+  - `regionsMinLength` parameter to assign a min length to those regions for which the `minLength` is not specified (#2009)
   - Revert PR #1926 click propagation on regions. Use event parameter passed in `region-click` if you need stopPropagation. (#2024)
   - Edgescroll works for both edges (#2011)
 - Microphone plugin: move to separate directory (#1997)

example/regions/app.js

@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
         backend: 'MediaElement',
         plugins: [
             WaveSurfer.regions.create({
+                regionsMinLength: 2,
                 regions: [
                     {
                         start: 1,

example/regions/index.html

@@ -73,6 +73,7 @@ <h1 itemprop="name">wavesurfer.js Regions</h1>
     backend: 'MediaElement',
     plugins: [
         WaveSurfer.regions.create({
+            regionsMinLength: 2,
             regions: [
                 {
                     start: 1,

src/plugin/regions/index.js

@@ -116,6 +116,7 @@ export default class RegionsPlugin {
             }
         };
         this.maxRegions = params.maxRegions;
+        this.regionsMinLength = params.regionsMinLength || null;
 
         // turn the plugin instance into an observer
         const observerPrototypeKeys = Object.getOwnPropertyNames(
@@ -187,6 +188,10 @@ export default class RegionsPlugin {
     add(params) {
         if (this.wouldExceedMaxRegions()) return null;
 
+        if (!params.minLength && this.regionsMinLength) {
+            params = {...params, minLength: this.regionsMinLength};
+        }
+
         const region = new this.wavesurfer.Region(params, this.util, this.wavesurfer);
 
         this.list[region.id] = region;
@@ -360,6 +365,12 @@ export default class RegionsPlugin {
             this.wrapper.removeEventListener('touchmove', eventMove);
             this.wrapper.removeEventListener('mousemove', eventMove);
         });
+
+        this.wavesurfer.on('region-created', region => {
+            if (this.regionsMinLength) {
+                region.minLength = this.regionsMinLength;
+            }
+        });
     }
 
     disableDragSelection() {

src/plugin/regions/region.js

@@ -44,6 +44,7 @@ export class Region {
         this.attributes = params.attributes || {};
 
         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;
         this._onRedraw = () => this.updateRender();