@checksub_team/peaks_timeline 1.4.32 → 1.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.4.32",
+  "version": "1.4.35",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -14503,22 +14503,57 @@ module.exports = function (Konva, Utils) {
         if (this._peaks.options.enableLineIndicatorContextMenu) {
             this._createContextMenu();
         }
+        this.ICON_SIZE = 18;
+        this._volumeSVGPath = 'M0 6.00001V12H4L9 17V1.00001L4 6.00001H0ZM13.5 9.00001C13.5 7.23001 12.48 5.71001 11 4.97001V13.02C12.48 12.29 13.5 10.77 13.5 9.00001ZM11 0.230011V2.29001C13.89 3.15001 16 5.83001 16 9.00001C16 12.17 13.89 14.85 11 15.71V17.77C15.01 16.86 18 13.28 18 9.00001C18 4.72001 15.01 1.14001 11 0.230011Z';
+        this._noVolumeSVGPath = 'M13.5 9C13.5 7.23 12.48 5.71 11 4.97V7.18L13.45 9.63C13.48 9.43 13.5 9.22 13.5 9ZM16 9C16 9.94 15.8 10.82 15.46 11.64L16.97 13.15C17.63 11.91 18 10.5 18 9C18 4.72 15.01 1.14 11 0.23V2.29C13.89 3.15 16 5.83 16 9ZM1.27 0L0 1.27L4.73 6H0V12H4L9 17V10.27L13.25 14.52C12.58 15.04 11.83 15.45 11 15.7V17.76C12.38 17.45 13.63 16.81 14.69 15.95L16.73 18L18 16.73L9 7.73L1.27 0ZM9 1L6.91 3.09L9 5.18V1Z';
+        this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
+        this._types = [
+            'default',
+            'volume',
+            'noVolume'
+        ];
     }
+    LineIndicator.prototype._onSetType = function (lineId, type) {
+        this.removeIndicator(lineId, true);
+        type = this._types.includes(type) ? type : 'default';
+        var indicator = this._createIndicator(this._indicators[lineId].line, type);
+        this._layer.add(indicator);
+        this._indicators[lineId].indicator = indicator;
+        this._indicators[lineId].type = type;
+        this.draw();
+    };
     LineIndicator.prototype._showMenu = function (menu) {
         menu.style.display = 'block';
         var containerRect = this._stage.container().getBoundingClientRect();
         menu.style.top = containerRect.top + this._stage.getPointerPosition().y - menu.offsetHeight + 'px';
         menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
     };
-    LineIndicator.prototype._createIndicator = function (line) {
-        var indicator = new Konva.Circle({
-            x: this._width / 2,
-            y: line.getY() + line.lineHeight() / 2,
-            radius: this._indicatorRadius,
-            fill: this._peaks.options.lineIndicatorColor,
-            strokeWidth: 0,
-            lineId: line.getId()
-        });
+    LineIndicator.prototype._createIndicator = function (line, type) {
+        var indicator;
+        type = typeof type !== 'undefined' ? type : 'default';
+        if (type === 'default') {
+            indicator = new Konva.Circle({
+                x: this._width / 2,
+                y: line.getY() + line.lineHeight() / 2,
+                radius: this._indicatorRadius,
+                fill: this._peaks.options.lineIndicatorColor,
+                strokeWidth: 0,
+                lineId: line.getId()
+            });
+        } else {
+            var scaleFactor = this._width / 2 / this.ICON_SIZE;
+            indicator = new Konva.Path({
+                x: this._width / 4,
+                y: line.getY() + line.lineHeight() / 2 - this._width / 4,
+                data: type === 'volume' ? this._volumeSVGPath : this._noVolumeSVGPath,
+                fill: this._peaks.options.lineIndicatorColor,
+                scale: {
+                    x: scaleFactor,
+                    y: scaleFactor
+                },
+                lineId: line.getId()
+            });
+        }
         var self = this;
         indicator.on('mouseover', function () {
             indicator.fill(self._peaks.options.lineIndicatorSelected);
@@ -14528,6 +14563,9 @@ module.exports = function (Konva, Utils) {
             indicator.fill(self._peaks.options.lineIndicatorColor);
             indicator.draw();
         });
+        indicator.on('click', function (e) {
+            self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt.button);
+        });
         return indicator;
     };
     LineIndicator.prototype.addIndicator = function (line) {
@@ -14536,7 +14574,8 @@ module.exports = function (Konva, Utils) {
             this._layer.add(indicator);
             this._indicators[line.getId()] = {
                 indicator: indicator,
-                line: line
+                line: line,
+                type: 'default'
             };
         }
     };
@@ -14552,15 +14591,18 @@ module.exports = function (Konva, Utils) {
             }
         }
     };
+    LineIndicator.prototype.getPixelsFromCenter = function (lineId) {
+        return this._indicators[lineId].type === 'default' ? 0 : this._width / 4;
+    };
     LineIndicator.prototype.updateIndicator = function (lineId) {
         if (this._indicators[lineId]) {
             var y = this._indicators[lineId].line.getY() + this._indicators[lineId].line.lineHeight() / 2;
             if (y + this._indicatorRadius > 0 && y - this._indicatorRadius < this._height) {
                 if (!this._indicators[lineId].indicator) {
-                    this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line);
+                    this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line, this._indicators[lineId].type);
                     this._layer.add(this._indicators[lineId].indicator);
                 } else {
-                    this._indicators[lineId].indicator.y(y);
+                    this._indicators[lineId].indicator.y(y - this.getPixelsFromCenter(lineId));
                 }
             } else {
                 this.removeIndicator(lineId, true);
@@ -15357,6 +15399,9 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
             }
         }
     };
+    Lines.prototype.getLineByPosition = function (pos) {
+        return this._linesByPosition[pos];
+    };
     Lines.prototype.getLineOnPosition = function (y) {
         var height;
         var pos = [
@@ -15503,7 +15548,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             segmentMagnetThreshold: 15,
             enableVerticalScrolling: true,
             lineIndicatorWidth: 20,
-            lineIndicatorColor: 'gray',
+            lineIndicatorColor: '#8A8F98',
             lineIndicatorSelected: '#ccc',
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
@@ -15642,6 +15687,10 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.setCutMode = function () {
         this.emit('cut_mode');
     };
+    Peaks.prototype.setIndicatorType = function (linePosition, type) {
+        var lineId = this.view.getLineByPosition(linePosition).getId();
+        this.emit('lineIndicator.setType', lineId, type);
+    };
     Peaks.prototype.getVisibleSegments = function () {
         return this.view.getSegmentsGroup().getVisibleSegments();
     };
@@ -16681,7 +16730,7 @@ module.exports = function (Konva, SegmentMarker) {
     SegmentShape.prototype._onMouseEnter = function () {
         this._view.setCursor('pointer');
         this._view.setHoveredElement(this);
-        this._rectangle.fill(this._segment.activeColor + Math.round(this._segment.opacity * 255).toString(16));
+        this._rectangle.fill(this._segment.hoverColor + Math.round(this._segment.opacity * 255).toString(16));
         this._view.drawSourcesLayer();
         this._peaks.emit('segments.mouseenter', this._segment);
     };
@@ -16782,8 +16831,13 @@ module.exports = function (Utils) {
         } else if (!Utils.isBoolean(options.editable)) {
             throw new TypeError('peaks.segments.' + context + ': editable must be a boolean');
         }
+        if (Utils.isNullOrUndefined(options.hoverColor)) {
+            options.hoverColor = Utils.shadeColor(options.color, 20);
+        } else if (!Utils.isValidColor(options.hoverColor)) {
+            throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
+        }
     }
-    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, opacity, editable, allowDeletion, line) {
+    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, hoverColor, opacity, editable, allowDeletion, line) {
         var opts = {
             startTime: startTime,
             endTime: endTime,
@@ -16791,6 +16845,7 @@ module.exports = function (Utils) {
             color: color,
             textColor: textColor,
             handleTextColor: handleTextColor,
+            hoverColor: hoverColor,
             opacity: opacity,
             editable: editable,
             allowDeletion: allowDeletion,
@@ -16803,7 +16858,7 @@ module.exports = function (Utils) {
         this._endTime = opts.endTime;
         this._labelText = opts.labelText;
         this._color = opts.color;
-        this._activeColor = Utils.shadeColor(color, 20);
+        this._hoverColor = opts.hoverColor;
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
         this._opacity = opts.opacity;
@@ -16849,10 +16904,10 @@ module.exports = function (Utils) {
                 return this._color;
             }
         },
-        activeColor: {
+        hoverColor: {
             enumerable: true,
             get: function () {
-                return this._activeColor;
+                return this._hoverColor;
             }
         },
         textColor: {
@@ -16906,6 +16961,7 @@ module.exports = function (Utils) {
             color: this.color,
             textColor: this.textColor,
             handleTextColor: this.handleTextColor,
+            hoverColor: this.hoverColor,
             opacity: this.opacity,
             editable: this.editable,
             allowDeletion: this.allowDeletion,
@@ -16919,6 +16975,7 @@ module.exports = function (Utils) {
         this._color = opts.color;
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
+        this._hoverColor = opts.hoverColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
@@ -19014,6 +19071,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
     SourcesLayer.prototype.getLength = function () {
         return this._lines.linesLength();
     };
+    SourcesLayer.prototype.getLineByPosition = function (pos) {
+        return this._lines.getLineByPosition(pos);
+    };
     return SourcesLayer;
 }(_dereq_('./source-group'), _dereq_('./lines'), _dereq_('./data-retriever'), _dereq_('./utils'), _dereq_('./invoker'), _dereq_('konva'));
 },{"./data-retriever":85,"./invoker":88,"./lines":92,"./source-group":103,"./utils":110,"konva":43}],106:[function(_dereq_,module,exports){
@@ -19200,7 +19260,7 @@ module.exports = function (Colors, Segment, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
         }
-        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.opacity || 1, options.editable, options.allowDeletion || false, options.line);
+        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.hoverColor, options.opacity || 1, options.editable, options.allowDeletion || false, options.line);
         return segment;
     };
     TimelineSegments.prototype.getSegments = function () {
@@ -19885,6 +19945,9 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     TimelineZoomView.prototype.getEndTime = function () {
         return this.pixelsToTime(this._frameOffset + this._width);
     };
+    TimelineZoomView.prototype.getLineByPosition = function (pos) {
+        return this._sourcesLayer.getLineByPosition(pos);
+    };
     TimelineZoomView.prototype.setStartTime = function (time) {
         if (time < 0) {
             time = 0;

package/src/line-indicator.js

@@ -58,8 +58,36 @@ define([
     if (this._peaks.options.enableLineIndicatorContextMenu) {
       this._createContextMenu();
     }
+
+    /* eslint-disable max-len */
+    this.ICON_SIZE = 18;
+    this._volumeSVGPath = 'M0 6.00001V12H4L9 17V1.00001L4 6.00001H0ZM13.5 9.00001C13.5 7.23001 12.48 5.71001 11 4.97001V13.02C12.48 12.29 13.5 10.77 13.5 9.00001ZM11 0.230011V2.29001C13.89 3.15001 16 5.83001 16 9.00001C16 12.17 13.89 14.85 11 15.71V17.77C15.01 16.86 18 13.28 18 9.00001C18 4.72001 15.01 1.14001 11 0.230011Z';
+    this._noVolumeSVGPath = 'M13.5 9C13.5 7.23 12.48 5.71 11 4.97V7.18L13.45 9.63C13.48 9.43 13.5 9.22 13.5 9ZM16 9C16 9.94 15.8 10.82 15.46 11.64L16.97 13.15C17.63 11.91 18 10.5 18 9C18 4.72 15.01 1.14 11 0.23V2.29C13.89 3.15 16 5.83 16 9ZM1.27 0L0 1.27L4.73 6H0V12H4L9 17V10.27L13.25 14.52C12.58 15.04 11.83 15.45 11 15.7V17.76C12.38 17.45 13.63 16.81 14.69 15.95L16.73 18L18 16.73L9 7.73L1.27 0ZM9 1L6.91 3.09L9 5.18V1Z';
+    /* eslint-enable max-len */
+
+    this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
+
+    this._types = ['default', 'volume', 'noVolume'];
   }
 
+  LineIndicator.prototype._onSetType = function(lineId, type) {
+    this.removeIndicator(lineId, true);
+
+    type = this._types.includes(type) ? type : 'default';
+
+    var indicator = this._createIndicator(
+      this._indicators[lineId].line,
+      type
+    );
+
+    this._layer.add(indicator);
+
+    this._indicators[lineId].indicator = indicator;
+    this._indicators[lineId].type = type;
+
+    this.draw();
+  };
+
   LineIndicator.prototype._showMenu = function(menu) {
     menu.style.display = 'block';
     var containerRect = this._stage.container().getBoundingClientRect();
@@ -70,15 +98,38 @@ define([
     menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
   };
 
-  LineIndicator.prototype._createIndicator = function(line) {
-    var indicator = new Konva.Circle({
-      x: this._width / 2,
-      y: line.getY() + (line.lineHeight() / 2),
-      radius: this._indicatorRadius,
-      fill: this._peaks.options.lineIndicatorColor,
-      strokeWidth: 0,
-      lineId: line.getId()
-    });
+  LineIndicator.prototype._createIndicator = function(line, type) {
+    var indicator;
+
+    type = typeof type !== 'undefined' ? type : 'default';
+
+    if (type === 'default') {
+      indicator = new Konva.Circle({
+        x: this._width / 2,
+        y: line.getY() + (line.lineHeight() / 2),
+        radius: this._indicatorRadius,
+        fill: this._peaks.options.lineIndicatorColor,
+        strokeWidth: 0,
+        lineId: line.getId()
+      });
+    }
+    else {
+      var scaleFactor = (this._width / 2) / this.ICON_SIZE;
+
+      indicator = new Konva.Path({
+        x: this._width / 4,
+        y: line.getY() + (line.lineHeight() / 2) - (this._width / 4),
+        data: type === 'volume' ?
+          this._volumeSVGPath :
+          this._noVolumeSVGPath,
+        fill: this._peaks.options.lineIndicatorColor,
+        scale: {
+          x: scaleFactor,
+          y: scaleFactor
+        },
+        lineId: line.getId()
+      });
+    }
 
     var self = this;
 
@@ -92,6 +143,10 @@ define([
       indicator.draw();
     });
 
+    indicator.on('click', function(e) {
+      self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt.button);
+    });
+
     return indicator;
   };
 
@@ -103,7 +158,8 @@ define([
 
       this._indicators[line.getId()] = {
         indicator: indicator,
-        line: line
+        line: line,
+        type: 'default'
       };
     }
   };
@@ -122,6 +178,12 @@ define([
     }
   };
 
+  LineIndicator.prototype.getPixelsFromCenter = function(lineId) {
+    return this._indicators[lineId].type === 'default' ?
+      0 :
+      this._width / 4;
+  };
+
   LineIndicator.prototype.updateIndicator = function(lineId) {
     if (this._indicators[lineId]) {
       var y = this._indicators[lineId].line.getY()
@@ -130,11 +192,14 @@ define([
       if (y + this._indicatorRadius > 0 && y - this._indicatorRadius < this._height) {
         // The indicator is visible
         if (!this._indicators[lineId].indicator) {
-          this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line);
+          this._indicators[lineId].indicator = this._createIndicator(
+            this._indicators[lineId].line,
+            this._indicators[lineId].type
+          );
           this._layer.add(this._indicators[lineId].indicator);
         }
         else {
-          this._indicators[lineId].indicator.y(y);
+          this._indicators[lineId].indicator.y(y - this.getPixelsFromCenter(lineId));
         }
       }
       else {

package/src/lines.js

@@ -286,6 +286,10 @@ define([
     }
   };
 
+  Lines.prototype.getLineByPosition = function(pos) {
+    return this._linesByPosition[pos];
+  };
+
   Lines.prototype.getLineOnPosition = function(y) {
     var height;
     var pos = [-1, Number.MAX_VALUE];

package/src/main.js

@@ -283,7 +283,7 @@ define([
       /**
        * Color of the line indicators
        */
-      lineIndicatorColor:       'gray',
+      lineIndicatorColor:       '#8A8F98',
 
       /**
        * Color for the indicator when selected
@@ -618,6 +618,12 @@ define([
     this.emit('cut_mode');
   };
 
+  Peaks.prototype.setIndicatorType = function(linePosition, type) {
+    var lineId = this.view.getLineByPosition(linePosition).getId();
+
+    this.emit('lineIndicator.setType', lineId, type);
+  };
+
   Peaks.prototype.getVisibleSegments = function() {
     return this.view
             .getSegmentsGroup()

package/src/segment-shape.js

@@ -247,7 +247,7 @@ define([
 
     this._view.setHoveredElement(this);
 
-    this._rectangle.fill(this._segment.activeColor + Math.round(
+    this._rectangle.fill(this._segment.hoverColor + Math.round(
       this._segment.opacity * 255
     ).toString(16));
 

package/src/segment.js

@@ -61,6 +61,13 @@ define([
     else if (!Utils.isBoolean(options.editable)) {
       throw new TypeError('peaks.segments.' + context + ': editable must be a boolean');
     }
+
+    if (Utils.isNullOrUndefined(options.hoverColor)) {
+      options.hoverColor = Utils.shadeColor(options.color, 20);
+    }
+    else if (!Utils.isValidColor(options.hoverColor)) {
+      throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
+    }
   }
 
   /**
@@ -81,7 +88,8 @@ define([
    */
 
   function Segment(peaks, id, startTime, endTime, labelText, color,
-    textColor, handleTextColor, opacity, editable, allowDeletion, line) {
+    textColor, handleTextColor, hoverColor, opacity, editable,
+    allowDeletion, line) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
@@ -89,6 +97,7 @@ define([
       color:           color,
       textColor:       textColor,
       handleTextColor: handleTextColor,
+      hoverColor:      hoverColor,
       opacity:         opacity,
       editable:        editable,
       allowDeletion:   allowDeletion,
@@ -103,7 +112,7 @@ define([
     this._endTime         = opts.endTime;
     this._labelText       = opts.labelText;
     this._color           = opts.color;
-    this._activeColor     = Utils.shadeColor(color, 20);
+    this._hoverColor      = opts.hoverColor;
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
     this._opacity         = opts.opacity;
@@ -152,10 +161,10 @@ define([
         return this._color;
       }
     },
-    activeColor: {
+    hoverColor: {
       enumerable: true,
       get: function() {
-        return this._activeColor;
+        return this._hoverColor;
       }
     },
     textColor: {
@@ -210,6 +219,7 @@ define([
       color:           this.color,
       textColor:       this.textColor,
       handleTextColor: this.handleTextColor,
+      hoverColor:      this.hoverColor,
       opacity:         this.opacity,
       editable:        this.editable,
       allowDeletion:   this.allowDeletion,
@@ -226,6 +236,7 @@ define([
     this._color           = opts.color;
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
+    this._hoverColor      = opts.hoverColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;

package/src/sources-layer.js

@@ -575,6 +575,10 @@ define([
     return this._lines.linesLength();
   };
 
+  SourcesLayer.prototype.getLineByPosition = function(pos) {
+    return this._lines.getLineByPosition(pos);
+  };
+
   /**
    * Object for storing data and UI of a source.
    *

package/src/timeline-segments.js

@@ -135,6 +135,7 @@ define([
       options.color || this._getSegmentColor(),
       options.textColor || '#000000',
       options.handleTextColor || '#000000',
+      options.hoverColor,
       options.opacity || 1,
       options.editable,
       options.allowDeletion || false,

package/src/timeline-zoomview.js

@@ -638,6 +638,10 @@ define([
     return this.pixelsToTime(this._frameOffset + this._width);
   };
 
+  TimelineZoomView.prototype.getLineByPosition = function(pos) {
+    return this._sourcesLayer.getLineByPosition(pos);
+  };
+
   TimelineZoomView.prototype.setStartTime = function(time) {
     if (time < 0) {
       time = 0;

package/CHANGELOG.md

@@ -1,530 +0,0 @@
-# Peaks.js
-
-## 0.19.0 (2020/02/06)
-
- * (#309) Fixed rendering of non-editable segment marker handles (@chrisn)
-
- * Reduced size of npm and Bower installs by removing unnecessary files
-   (@chrisn)
-
- * Refactored to simplify code structure. All source files are now placed
-   in a single 'src' directory, and several files have been renamed for
-   consistency (@chrisn)
-
-## 0.18.1 (2020/02/02)
-
- * (#306) Updated TypeScript declarations (@tscz)
-
- * Documented zoomview.setStartTime() (@chrisn)
-
-## 0.18.0 (2020/02/02)
-
- * (#300) Redesigned the marker customization API. Refer to customizing.md
-   for detailed documentation on how to customize the appearance of point
-   and segment marker handles (@chrisn)
-
- * Added a view.fitToContainer() method that resizes the waveform and point and
-   segment marker handles to fit the available space (@chrisn)
-
- * Added zoomview.setStartTime() method (@chrisn)
-
- * The `inMarkerColor` and `outMarkerColor` configuration options have been
-   renamed to `segmentStartMarkerColor` and `segmentEndMarkerColor` (@chrisn)
-
- * (#305) Added a zoomview.setZoom() method that gives applications greater
-   flexibility in setting the zoom level. The zoom level can be set to (a)
-   a number of samples per pixel, as per the existing peaks.zoom.setZoom() API,
-   (b) a number of seconds fit to the available width, or (c) the entire audio
-   duration fit to the available width (@chrisn)
-
-## 0.17.0 (2020/01/16)
-
- * (#302) Fixed segment handle dragging so that dragging the start marker does
-   not change the segment end time, and vice versa (@chrisn)
-
- * Added view.enableMarkerEditing() method (@chrisn)
-
- * Updated Typescript definitions (@is343, @chrisn)
-
-## 0.16.0 (2019/12/16)
-
- * (#262) Increased hit region for segment mouseenter and mouseleave events,
-   no longer requires placing the mouse directly over the waveform image
-   (@chrisn)
-
- * (#263, #283) Added destroyZoomview() and destroyOverview() methods (@chrisn)
-
-## 0.15.0 (2019/12/04)
-
- * (#293) Added overview.dblclick and zoomview.dblclick events (@chrisn)
-
- * Fixed Typescript definitions (@tscz, @chrisn)
-
-## 0.14.5 (2019/11/10)
-
- * (#290) Fixed setAmplitudeScale() to update all waveform segments (@chrisn)
-
- * Disabled warnings from Konva.js
-
- * Fixed demo pages for Webkit
-
-## 0.14.4 (2019/11/06)
-
- * (#289) Fixed overlapHighlightOffset behaviour when value too large
-   (@jodonnell)
-
-## 0.14.3 (2019/11/06)
-
- * (#288) Added overviewHighlightOffset option, and renamed the
-   overviewHighlightRectangleColor option to overviewHighlightColor
-   (@jodonnell)
-
-## 0.14.2 (2019/11/05)
-
- * (#285) The axis labels are now correctly rendered on top of the waveform
-   (@chrisn)
-
- * (#286) Fixed point/segment marker creation function options, and updated
-   documentation (@chrisn)
-
-## 0.14.1 (2019/10/31)
-
- * (#284) Fixed `peaks.destroy()` (@chrisn)
-
- * Updated waveform-data.js to v3.1.0 (@chrisn)
-
-## 0.14.0 (2019/10/23)
-
- * (#287) Added `segment.dragstart` and `segment.dragend` events.
-   The `segment.dragged` event now receives a boolean parameter that indicates
-   whether the start or end marker is being dragged (@Spidy88)
-
-## 0.13.1 (2019/10/22)
-
- * (#281) Fixed TypeScript definitions (@tscz)
-
- * Updated demo pages to use updated `Peaks.init()` API options (@chrisn)
-
-## 0.13.0 (2019/09/11)
-
- * (#228, #240) Added ability to intialise a Peaks instance given an
-   AudioBuffer
-
- * The API for creating waveforms using the Web Audio API has changed.
-   Instead of passing an `audioContext` option to `Peaks.init()` or
-   `peaksInstance.setSource()`, you shoud now pass a `webAudio` object,
-   for example:
-
-    ```javascript
-    const options = {
-      // ... etc
-      webAudio: {
-        audioContext: new AudioContext(),
-        multiChannel: true
-      }
-    }
-
-    Peaks.init(options, function(err, peaksInstance) { ... });
-    ```
-
- * The (undocumented) `waveformBuilderOptions` option has also been removed.
-   If you were using `amplitude_scale`, please use `view.setAmplitudeScale()`
-   instead. The `scale` option is now determined by the lowest `zoomLevels`
-   setting
-
- * Added `view.enableAutoScroll()` method
-
-## 0.12.0 (2019/08/24)
-
- * (#194) Added multi-channel waveform support (@chrisn)
-
-## 0.11.1 (2019/08/23)
-
- * Updated waveform-data.js to v3.0.0 (@chrisn)
-
-## 0.11.0 (2019/08/11)
-
- * (#243, #268) Added emitCueEvents option that causes Peaks.js to emit
-   'points.enter', 'segments.enter', and 'segments.exit' events during playback
-   or on seeking (@gmarinov, @chrisn)
-
- * (#92) Added setSource() method to change the media element's source URL
-   and update the waveform (@chrisn)
-
-## 0.10.1 (2019/07/10)
-
- * (#211) Added view.setAmplitudeScale() method, and documented new API methods
-   for creating and accessing the waveform views (@chrisn)
-
- * (#270) Fixed segment rendering after updating startTime or endTime (@chrisn)
-
- * (#267) Added option to run specific test files by glob pattern (@gmarinov)
-
-## 0.10.0 (2019/06/22)
-
- * (#247) Added update() methods to allow changes to segment and point
-   properties (@zachsa)
-
- * (#250) Added 'segments.mouseenter', 'segments.mouseleave', and
-   'segments.click' events (@zachsa)
-
- * (#258) Added new 'containers' option, to allow creation of zoomable
-   and non-zoomable ('overview') waveform views. Added example pages,
-   in the 'demo' folder (@chrisn)
-
- * Updated to Konva 3.3.3 (@chrisn)
-
-## 0.9.14 (2019/03/05)
-
- * (#249, #251, #252) Enabled touch events for waveform container
-   and point and segment markers (@rfrei)
-
- * Updated to Konva 3.1.6 and waveform-data.js 2.1.2, and updated
-   development dependencies (@chrisn)
-
- * Updated TypeScript declarations (@evanlouie)
-
-## 0.9.13 (2018/09/04)
-
- * Added TypeScript declarations (@evanlouie)
-
-## 0.9.12 (2018/07/27)
-
- * Version bump after updating npm access token (@chrisn)
-
-## 0.9.11 (2018/07/27)
-
- * Refactored waveform rendering code, added WaveformShape class (@chrisn)
-
- * Removed background layer, to reduce the number of Konva layers used (@chrisn)
-
- * Avoid building waveform data multiple times when using the Web Audio API
-   (@cky917)
-
-## 0.9.10 (2018/06/23)
-
- * Fixed use of Web Audio API in Safari (@ibobobo)
-
- * Fixed point drag event handling (@anthonytex, @chrisn)
-
-## 0.9.9 (2018/05/21)
-
- * Allow Peaks objects to be created using the new operator (@chrisn)
-
- * The points.add() and segments.add() methods now operate atomically. This
-   change ensures that the input point/segment objects are validated before
-   storing, so that if an exception is thrown, we leave the state of the
-   points/segments array as it was before the function was called (@chrisn)
-
- * Added 'points.mouseenter' and 'points.mouseleave' events. Also added
-   'points.dblclick', which replaces the (previously undocumented)
-   pointDblClickHandler config option (@markjongkind, @chrisn)
-
- * Added 'points.dragstart' and 'points.dragend' events, and renamed
-   'points.dragged' to 'points.dragmove'. The (also undocumented)
-   pointDragEndHandler config option is deprecated (@chrisn)
-
-## 0.9.8 (2018/02/10)
-
- * Ensure resources used by Player object are released on calling
-   peaks.destroy() (@chrisn)
-
- * points.remove() and segments.remove() no longer throw an exception
-   if multiple matching markers are found. The removed markers are returned
-   in an array (@chrisn)
-
- * Updated to eventemitter2 v5.0.1, also updated development dependencies
-   (@chrisn)
-
-## 0.9.7 (2018/01/25)
-
- * (#104) Prevent "zoom level too low" exception when using the Web Audio API
-   to compute the waveform data (@chrisn)
-
- * (#213) Added withCredentials option to allow users to send credentials
-   when requesting waveform data files using XHR (@bennypowers)
-
- * (#212) Fixed points.removeAll() and segments.removeAll() (@chrisn)
-
- * Fixed a bug where the time axis would show the wrong times next to the
-   axis markers (@chrisn)
-
- * Peaks.js is now available via cdnjs. Added a link to the ReadMe
-   (@extend1994)
-
-## 0.9.6 (2018/01/13)
-
- * (#112) Fixed a race condition where an audio element that contains
-   one or more source elements is added to a page, and Peaks.init()
-   is called before the audio element has selected which source
-   to use. Also improved error reporting, to avoid a misleading "Unable to
-   determine a compatible dataUri format for this browser" error (@chrisn)
-
-## 0.9.5 (2017/12/11)
-
- * (#207) Prevent jump in playhead motion after starting playback
-   (@chrisn, @jdelStrother)
-
-## 0.9.4 (2017/11/24)
-
- * Version bump to refresh npm and browserify cached releases (@chrisn)
-
-## 0.9.3 (2017/11/24)
-
- * (#201) Added showPlayheadTime option to control display of the current time
-   position next to the playhead marker (@chrisn)
-
- * (#202) Keep playhead layer in sync with timeupdate events (@jdelStrother)
-
-## 0.9.2 (2017/09/27)
-
- * (#199) The playhead position is now correctly updated in the zoomable
-   view after calling player.seek() (@chrisn)
- * Added parameter validation to player.seek() (@chrisn)
- * Show the time when dragging point markers (@chrisn)
- * Use a fixed set of default colors instead of random colors for segments
-   (@chrisn)
- * Simplified createSegmentMarker, createSegmentLabel, and createPointMarker
-   functions (@chrisn)
- * Refactored WaveformPoints and WaveformSegments classes (@chrisn)
- * Refactored PointsLayer and SegmentsLayer _removeInvisiblePoints methods
-   (@chrisn)
-
-## 0.9.1 (2017/08/29)
-
- * Fixed bug in IE11 which caused adding segment objects to fail (@chrisn)
-
-## 0.9.0 (2017/08/16)
-
- * (#184, #116) Fixed waveform zoom and scrolling behaviour. Note that the
-   animated zoom feature no longer works, and so static zoom is now always used,
-   regardless of the 'zoomAdapter' option (@chrisn)
- * Refactored WaveformSegments and WaveformPoints to separate the UI code into
-   new SegmentsLayer and PointsLayer classes (@chrisn)
- * Points and segments are now represented by Point and Segment objects, rather
-   than plain JavaScript objects (@chrisn)
- * (#117) Improved rendering speed of points and segments (@chrisn)
- * Points and segments with duplicate ids are no longer allowed (@chrisn)
- * The 'segments.ready' event is deprecated, use 'peaks.ready' instead (@chrisn)
- * Added 'add', 'remove', 'remove_all', and 'dragged' events for points
-   and segments (@chrisn)
- * The demo page now allows points and segments to be removed (@chrisn)
- * Added ZoomController and TimeController classes to simplify main.js (@chrisn)
- * Added PlayheadLayer class and refactored WaveformOverview and
-   WaveformZoomView so that the playhead update code is reused between both
-   (@chrisn)
- * Added peaks.points.getPoint() method (@chrisn)
- * Changed the keyboard interface so that the left/right arrow keys scroll the
-   waveform by 1 second, and shift+left/right by one screen width (@chrisn)
- * Improved error messages (@chrisn)
- * Removed Node.js v4 and added v8 in Travis CI builds. Please use v6.0 or later
-   to build Peaks.js (@chrisn)
- * Many other refactorings and code improvements (@chrisn)
-
-## 0.8.1 (2017/07/03)
-
- * Fixed deprecation logging from time API functions (@chrisn)
- * Added parameter validation to Player.playSegment (@chrisn)
-
-## 0.8.0 (2017/07/01)
-
- * (#192) Added Player.playSegment() method (@craigharvi3)
- * Deprecated the time API; use the player API instead (@chrisn)
- * Display optional point label text (@chrisn)
- * Added documentation for the points API (@chrisn)
- * Build ChangeLog manually (@chrisn)
-
-## 0.7.0 (2017/05/03)
-
- * Updated to waveform-data.js v2.0.1 (@chrisn)
- * (#182) Modified build to output a single UMD module; supporting installation with
-   package managers or the script-tag (@craigjohnwright)
- * Another fix to mouse dragging behaviour (@chrisn)
- * (#187) Fixed segment handle rendering (@chrisn)
-
-## v0.6.0 (2016/12/19)
-
- * (#167) Added audioContext config option (@chrisn, @oncletom, @dodds-cc)
- * (#165) Fixed mouse dragging behaviour (@chrisn)
- * (#161) More reliable clicking behaviour, don't turn seek click off on
-   vertical mouse movement (@Develliot)
- * (#159) Added JSDoc comments (@chrisn)
- * (#157) Register mouse up/move events to the window rather than the waveform
-   stages (@jdelStrother)
- * (#156) Refactored player and keyboard handler objects (@chrisn)
- * (#155) Refactored WaveformPoints and WaveformSegments (@chrisn)
-
-## v0.5.0 (2016/08/25)
-
- * (#150) Add Peaks.destroy method (@jdelStrother)
-
-## v0.4.9 (2016/08/24)
-
- * (#151) Report XHR errors (@jdelStrother)
- * (#152) Use the npm version of waveform-data.js (@oncletom)
-
-## v0.4.8 (2016/08/18)
-
- * Fixed bug in defaultInMarker() which caused the wrong colour to be used for
-   left-hand segment markers (@chrisn)
- * Renamed keyboard events (@chrisn)
- * Updated to EventEmitter v1.0.x (@chrisn)
- * Updated to Konva v1.0.x (@chrisn)
- * Fixed adding points from Peaks.init() (@chrisn)
- * (#144) Use Konva.FastLayer for drawing waveforms (@jdelStrother)
- * (#143) Improve addSegment() method signature (@jdelStrother)
- * (#142) Serve media from Karma during tests (@jdelStrother)
- * (#141) Add/remove points and segments by ID (@jdelStrother)
- * (#140) Expose browserified version as package.json "main" property
-   (@oncletom)
- * (#139) Fixed keyboard right-shift bug (@chrisn)
- * Numerous other refactorings (@chrisn)
-
-## v0.4.6 (2015/09/29)
-
- * (#127) Don't add waveform layer to the overview stage twice and ensure
-   the UI layer is on top (@johvet)
- * (#125) Node 0.12 and iojs compability (@oncletom)
- * (#120) Explicit segment draw on drag resize (@oncletom)
- * (#121) Make more colors configurable (@ziggythehamster)
-
-## v0.4.5 (2015/07/02)
-
- * (#123) Allow alternate zoom adapters, add a static (non-animated) zoom
-   adapter, add more safety checks (@johvet, @ziggythehamster)
-
-## v0.4.4 (2015/06/30)
-
- * (#122) Fix typo, seeking instead of seaking (@johvet)
- * (#113) Make the axis label and gridline colors configurable
-   (@ziggythehamster)
- * (#111) Initial error logging function for async errors (@oncletom)
- * (#108) fix for bug #105 (@un-chein-andalou)
-
-## 0.4.3 (2014/10/15)
-
- * (#101) deamdify and browserify back to optionalDependencies (@oncletom)
-
-## 0.4.2 (2014/10/09)
-
- * Replaced example image in README.md
- * Fixed time-out errors in Travis CI builds
-
-## 0.4.1 (2014/10/09)
-
- * (#86) Fix Kinetic bower path in README (@oncletom)
-
-## 0.4.0 (2014/09/24)
-
- * (#72) Upgrade to Kinetic 5.10 (@oncletom)
- * (#84) Switch from SauceLabs to BrowserStack (@oncletom)
- * (#81) beforeEach -> before, afterEach -> after (@oncletom)
- * (#78) Added peaks.points.removeAll() method (@oncletom)
-
-## 0.3.2 (2014/09/10)
-
- * (#79) EventEmitter2 prototype workaround (@oncletom)
- * (#75) Fixed Travis + IE9 tests (@oncletom)
-
-## 0.3.1 (2014/09/08)
-
- * (#74) 0.3 Build System Fix (@oncletom)
-
-## 0.3.0 (2014/08/21)
-
- * (#71) Replaced eventEmitter with eventemitter2 (@oncletom)
-
-## 0.3.0-beta.5 (2014/07/10)
-
- * (#62) Added waveformZoomReady event (after segments and points initialized)
-   (@chainlink)
-
-## 0.3.0-beta.4 (2014/07/10)
-
- * Automatically deamdify files with browserify
-
-## 0.3.0-beta.3 (2014/07/10)
-
- * (#66) Simplified build system (@oncletom)
- * (#63) Fixed bug when using grunt build for vanilla JS (Kinetic Not Found)
-   (@chainlink)
- * (#52) Custom height for each container (@bbcrd)
- * Refactored waveform rendering code (@oncletom)
- * View height can be set through CSS (@oncletom)
- * Added smooth zoom animation (@mgrewal, @oncletom)
- * Use waveform-data.js v1.2.0 (@chainlink)
- * Added Points interface (@chainlink)
-
-## 0.3.0-beta.2 (2014/06/28)
-
- * (#51) Added functions to delete segments (@oncletom)
- * Aliased segments.addSegment as segments.add (@oncletom)
-
-## 0.3.0-beta.1 (2014/06/27)
-
- * (#50) Peaks build system (@oncletom)
- * Added Web Audio builder from waveform-data.js
-
-## 0.2.1 (2014/03/24)
-
- * (#43) Fixed "SYNTAX_ERR: DOM Exception 12" error in Safari (@oncletom)
- * (#28) Segment improvement (@oncletom)
-
-## 0.2.0 (2014/03/13)
-
- * (#36) Ability to work with a video element as well (@oncletom)
- * (#39) Fixing the `FAILED Peaks.segments "before each" hook` breaking CI
-   (@oncletom)
- * (#38) Removing the requirejs builder (@oncletom)
- * (#37) Added "segments.ready" event (@oncletom)
- * (#35) Simplifying the AMD tree (@oncletom)
- * (#32) Resize event is assigned to window and not the Peaks instance
-   (@oncletom)
- * (#33) Enforcing strict mode (@oncletom)
-
-## 0.1.0 (2014/02/25)
-
- * (#26) Removed sass dependency (@oncletom)
- * (#20) Removed JST/Underscore dependencies (@oncletom)
- * (#19) Added tests for each element of the public API (@oncletom)
- * (#15) Partially removed jQuery dependency (@oncletom)
- * (#14) Fixed {zoom,over}view mouseup is not releasing document.addEventListener("mouseup") (@oncletom)
- * (#11) Handling multiple Peaks instances (@oncletom)
- * (#10) Added peaks.time.setCurrentTime() (@oncletom)
- * Rewrote the README and added screenshot (@oncletom)
- * Fixed playhead positioning after click/drag etc (@oncletom)
- * Removed dependency on underscore (@oncletom)
- * Added parameter validation (@oncletom)
- * Added test cases for segments API and zoom levels (@oncletom)
- * Removed bootstrap module (@oncletom)
-
-## 0.0.6 (2014/02/19)
-
- * (#30) Clicking in the zoomview should just change the playhead position
-   (@oncletom)
-
-## 0.0.5 (2014/02/17)
-
- * (#25) Dragging zoomview bug (low priority) (@oncletom)
- * (#24) Out of Range bug (@oncletom)
-
-## 0.0.4 (2014/02/06)
-
- * (#22) Seeking not working (@oncletom)
-
-## 0.0.3 (2014/01/30)
-
- * (#17) Moving the playhead in views now updates the audio element
-   currentTime (@oncletom)
- * (#16) Fixed IE9 bug with createSegment (@oncletom)
- * (#3) Added TravisCI + Saucelabs (@oncletom)
- * (#13) Migrated to Mocha+Chai for tests (@oncletom)
-
-## 0.0.2 (2014/01/28)
-
- * (#12) `element.currentTime` side-effect (@oncletom)
- * (#5) Segments performance boost (@oncletom)
-
-## 0.0.1 (2013/12/14 09:42 +00:00)
-
- * (#1) bower install failing for me (@oncletom)