@checksub_team/peaks_timeline 1.4.33 → 1.4.36

package/package.json

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

package/peaks.js

@@ -14320,30 +14320,68 @@ 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);
-            indicator.draw();
+            self.draw();
         });
         indicator.on('mouseout', function () {
             indicator.fill(self._peaks.options.lineIndicatorColor);
-            indicator.draw();
+            self.draw();
+        });
+        indicator.on('click', function (e) {
+            self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt.button);
         });
         return indicator;
     };
@@ -14353,7 +14391,8 @@ module.exports = function (Konva, Utils) {
             this._layer.add(indicator);
             this._indicators[line.getId()] = {
                 indicator: indicator,
-                line: line
+                line: line,
+                type: 'default'
             };
         }
     };
@@ -14369,15 +14408,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);
@@ -15174,6 +15216,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 = [
@@ -15320,7 +15365,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,
@@ -15459,6 +15504,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();
     };
@@ -16729,6 +16778,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,
@@ -18838,6 +18888,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":86,"./invoker":89,"./lines":93,"./source-group":104,"./utils":111,"konva":43}],107:[function(_dereq_,module,exports){
@@ -19709,6 +19762,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,26 +98,53 @@ 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;
 
     indicator.on('mouseover', function() {
       indicator.fill(self._peaks.options.lineIndicatorSelected);
-      indicator.draw();
+      self.draw();
     });
 
     indicator.on('mouseout', function() {
       indicator.fill(self._peaks.options.lineIndicatorColor);
-      indicator.draw();
+      self.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.js

@@ -219,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,
@@ -235,7 +236,7 @@ define([
     this._color           = opts.color;
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
-    this._hoverColor      = opts.hoverColor ;
+    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-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;