@checksub_team/peaks_timeline 1.5.2 → 1.5.3

package/package.json

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

package/peaks.js

@@ -16208,10 +16208,9 @@ module.exports = function (Konva) {
         this._onDragStart = options.onDragStart;
         this._onDragEnd = options.onDragEnd;
         this._view = options.view;
-        this._dragBoundFunc = this._dragBoundFunc.bind(this);
         this._group = new Konva.Group({
             draggable: this._draggable,
-            dragBoundFunc: this._dragBoundFunc
+            dragBoundFunc: this._dragBoundFunc.bind(this)
         });
         this._bindDefaultEventHandlers();
         this._marker.init(this._group);
@@ -16237,9 +16236,21 @@ module.exports = function (Konva) {
     };
     SegmentMarker.prototype._dragBoundFunc = function (pos) {
         if (this._startMarker) {
-            this._segmentShape.getSegmentsGroup().updateSegment(this._segment, pos.x + this._view.getFrameOffset(), null);
+            var newStartX;
+            if (this._segment.duration) {
+                newStartX = Math.max(pos.x + this._view.getFrameOffset(), this._view.timeToPixels(this._segment.endTime - this._segment.duration) + this._view.getFrameOffset());
+            } else {
+                newStartX = pos.x + this._view.getFrameOffset();
+            }
+            this._segmentShape.getSegmentsGroup().updateSegment(this._segment, newStartX, null);
         } else {
-            this._segmentShape.getSegmentsGroup().updateSegment(this._segment, null, pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth());
+            var newEndX;
+            if (this._segment.duration) {
+                newEndX = Math.min(pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth(), this._view.timeToPixels(this._segment.startTime + this._segment.duration) + this._view.getFrameOffset());
+            } else {
+                newEndX = pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth();
+            }
+            this._segmentShape.getSegmentsGroup().updateSegment(this._segment, null, newEndX);
         }
         return {
             x: this._group.getAbsolutePosition().x,
@@ -16315,13 +16326,24 @@ module.exports = function (Konva, SegmentMarker, Utils) {
                 self._drawRect(ctx);
             }
         });
+        var width = this._view.timeToPixels(this._segment.endTime - this._segment.startTime);
+        var fillColor = segment.color + Math.round(segment.opacity * 255).toString(16);
         this._rectangle = new Konva.Rect({
-            width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+            width: width,
             height: this._segmentHeight,
             cornerRadius: SEGMENT_CORNER_RADIUS,
-            fill: segment.color + Math.round(segment.opacity * 255).toString(16),
             stroke: segment.textColor + 'FF',
-            strokeWidth: 2
+            strokeWidth: 2,
+            fillPriority: segment.shouldShowWarning() ? 'linear-gradient' : 'color',
+            fill: fillColor,
+            fillLinearGradientColorStops: [
+                0,
+                fillColor,
+                0.65,
+                segment.warningColor
+            ],
+            fillLinearGradientStartPointX: Math.max(width - 20, width / 2),
+            fillLinearGradientEndPointX: width
         });
         this._shapeGroup.add(this._rectangle);
         this._shapeGroup.dragBoundFunc(function () {
@@ -16365,6 +16387,13 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._segmentWidth = endPixel - startPixel;
         this._shapeGroup.width(this._segmentWidth);
         this._rectangle.width(this._segmentWidth);
+        if (this._segment.shouldShowWarning()) {
+            this._rectangle.fillPriority('linear-gradient');
+            this._rectangle.fillLinearGradientStartPointX(Math.max(this._segmentWidth - 20, this._segmentWidth / 2));
+            this._rectangle.fillLinearGradientEndPointX(this._segmentWidth);
+        } else {
+            this._rectangle.fillPriority('color');
+        }
         this._indicatorsGroup.x(this._segmentWidth);
         var newWidth = Math.floor(this._segmentWidth / 2);
         if (this._segmentWidth < this._startMarker.getHandleWidth() + this._endMarker.getHandleWidth()) {
@@ -16524,14 +16553,28 @@ module.exports = function (Konva, SegmentMarker, Utils) {
     SegmentShape.prototype._onMouseEnter = function () {
         this._view.setCursor('pointer');
         this._view.setHoveredElement(this);
-        this._rectangle.fill(this._segment.hoverColor + Math.round(this._segment.opacity * 255).toString(16));
+        var fillColor = this._segment.hoverColor + Math.round(this._segment.opacity * 255).toString(16);
+        this._rectangle.fill(fillColor);
+        this._rectangle.fillLinearGradientColorStops([
+            0,
+            fillColor,
+            0.65,
+            this._segment.warningColor
+        ]);
         this._view.drawSourcesLayer();
         this._peaks.emit('segments.mouseenter', this._segment);
     };
     SegmentShape.prototype._onMouseLeave = function () {
         this._view.setCursor('default');
         this._view.setHoveredElement(null);
-        this._rectangle.fill(this._segment.color + Math.round(this._segment.opacity * 255).toString(16));
+        var fillColor = this._segment.color + Math.round(this._segment.opacity * 255).toString(16);
+        this._rectangle.fill(fillColor);
+        this._rectangle.fillLinearGradientColorStops([
+            0,
+            fillColor,
+            0.65,
+            this._segment.warningColor
+        ]);
         this._view.drawSourcesLayer();
         this._peaks.emit('segments.mouseleave', this._segment);
     };
@@ -16648,17 +16691,24 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.hoverColor)) {
             throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
         }
+        if (Utils.isNullOrUndefined(options.warningColor)) {
+            options.warningColor = '#E48023';
+        } else if (!Utils.isValidColor(options.warningColor)) {
+            throw new TypeError('peaks.segments.' + context + ': warningColor must be a boolean');
+        }
         return shouldNotifyUpdate;
     }
-    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, hoverColor, opacity, editable, allowDeletion, line, indicators) {
+    function Segment(peaks, id, startTime, endTime, duration, labelText, color, textColor, handleTextColor, hoverColor, warningColor, opacity, editable, allowDeletion, line, indicators) {
         var opts = {
             startTime: startTime,
             endTime: endTime,
+            duration: duration,
             labelText: labelText,
             color: color,
             textColor: textColor,
             handleTextColor: handleTextColor,
             hoverColor: hoverColor,
+            warningColor: warningColor,
             opacity: opacity,
             editable: editable,
             allowDeletion: allowDeletion,
@@ -16670,11 +16720,13 @@ module.exports = function (Utils) {
         this._id = id;
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
+        this._duration = opts.duration;
         this._labelText = opts.labelText;
         this._color = opts.color;
         this._hoverColor = opts.hoverColor;
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
+        this._warningColor = opts.warningColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
@@ -16711,6 +16763,15 @@ module.exports = function (Utils) {
                 this._endTime = Utils.roundTime(time);
             }
         },
+        duration: {
+            enumerable: true,
+            get: function () {
+                return this._duration;
+            },
+            set: function (duration) {
+                this._duration = Utils.roundTime(duration);
+            }
+        },
         labelText: {
             enumerable: true,
             get: function () {
@@ -16741,6 +16802,12 @@ module.exports = function (Utils) {
                 return this._handleTextColor;
             }
         },
+        warningColor: {
+            enumerable: true,
+            get: function () {
+                return this._warningColor;
+            }
+        },
         opacity: {
             enumerable: true,
             get: function () {
@@ -16791,11 +16858,13 @@ module.exports = function (Utils) {
         var opts = {
             startTime: this.startTime,
             endTime: this.endTime,
+            duration: this.duration,
             labelText: this.labelText,
             color: this.color,
             textColor: this.textColor,
             handleTextColor: this.handleTextColor,
             hoverColor: this.hoverColor,
+            warningColor: this.warningColor,
             opacity: this.opacity,
             editable: this.editable,
             allowDeletion: this.allowDeletion,
@@ -16806,11 +16875,13 @@ module.exports = function (Utils) {
         validateSegment(this._peaks, opts, 'update()');
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
+        this._duration = opts.duration;
         this._labelText = opts.labelText;
         this._color = opts.color;
         this._textColor = opts.textColor;
         this._handleTextColor = opts.handleTextColor;
         this._hoverColor = opts.hoverColor;
+        this._warningColor = opts.warningColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
@@ -16825,6 +16896,9 @@ module.exports = function (Utils) {
         this._indicators = newIndicators;
         this._peaks.emit('segment.setIndicators', this);
     };
+    Segment.prototype.shouldShowWarning = function () {
+        return this.duration > Utils.roundTime(this.endTime - this.startTime);
+    };
     return Segment;
 }(_dereq_('./utils'));
 },{"./utils":111}],103:[function(_dereq_,module,exports){
@@ -19159,7 +19233,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.hoverColor, options.opacity || 1, options.editable, options.allowDeletion || false, options.line, options.indicators);
+        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.duration, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.hoverColor, options.warningColor, options.opacity || 1, options.editable, options.allowDeletion || false, options.line, options.indicators);
         return segment;
     };
     TimelineSegments.prototype.getSegments = function () {

package/src/segment-marker.js

@@ -49,11 +49,9 @@ define([
 
     this._view = options.view;
 
-    this._dragBoundFunc = this._dragBoundFunc.bind(this);
-
     this._group = new Konva.Group({
       draggable:     this._draggable,
-      dragBoundFunc: this._dragBoundFunc
+      dragBoundFunc: this._dragBoundFunc.bind(this)
     });
 
     this._bindDefaultEventHandlers();
@@ -88,17 +86,43 @@ define([
 
   SegmentMarker.prototype._dragBoundFunc = function(pos) {
     if (this._startMarker) {
+      var newStartX;
+
+      if (this._segment.duration) {
+        newStartX = Math.max(
+          pos.x + this._view.getFrameOffset(),
+          this._view.timeToPixels(this._segment.endTime - this._segment.duration)
+            + this._view.getFrameOffset()
+        );
+      }
+      else {
+        newStartX = pos.x + this._view.getFrameOffset();
+      }
+
       this._segmentShape.getSegmentsGroup().updateSegment(
         this._segment,
-        pos.x + this._view.getFrameOffset(),
+        newStartX,
         null
       );
     }
     else {
+      var newEndX;
+
+      if (this._segment.duration) {
+        newEndX = Math.min(
+          pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth(),
+          this._view.timeToPixels(this._segment.startTime + this._segment.duration)
+            + this._view.getFrameOffset()
+        );
+      }
+      else {
+        newEndX = pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth();
+      }
+
       this._segmentShape.getSegmentsGroup().updateSegment(
         this._segment,
         null,
-        pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth()
+        newEndX
       );
     }
 

package/src/segment-shape.js

@@ -65,13 +65,23 @@ define([
       }
     });
 
+    var width = this._view.timeToPixels(this._segment.endTime - this._segment.startTime);
+    var fillColor = segment.color + Math.round(segment.opacity * 255).toString(16);
+
     this._rectangle = new Konva.Rect({
-      width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+      width: width,
       height: this._segmentHeight,
       cornerRadius: SEGMENT_CORNER_RADIUS,
-      fill: segment.color + Math.round(segment.opacity * 255).toString(16),
       stroke: segment.textColor + 'FF',
-      strokeWidth: 2
+      strokeWidth: 2,
+      fillPriority: segment.shouldShowWarning() ? 'linear-gradient' : 'color',
+      fill: fillColor,
+      fillLinearGradientColorStops: [
+        0, fillColor,
+        0.65, segment.warningColor
+      ],
+      fillLinearGradientStartPointX: Math.max(width - 20, width / 2),
+      fillLinearGradientEndPointX: width
     });
 
     this._shapeGroup.add(this._rectangle);
@@ -137,6 +147,17 @@ define([
 
     this._shapeGroup.width(this._segmentWidth);
     this._rectangle.width(this._segmentWidth);
+    if (this._segment.shouldShowWarning()) {
+      this._rectangle.fillPriority('linear-gradient');
+      this._rectangle.fillLinearGradientStartPointX(
+        Math.max(this._segmentWidth - 20, this._segmentWidth / 2)
+      );
+      this._rectangle.fillLinearGradientEndPointX(this._segmentWidth);
+    }
+    else {
+      this._rectangle.fillPriority('color');
+    }
+
     this._indicatorsGroup.x(this._segmentWidth);
 
     var newWidth = Math.floor(this._segmentWidth / 2);
@@ -338,9 +359,15 @@ define([
 
     this._view.setHoveredElement(this);
 
-    this._rectangle.fill(this._segment.hoverColor + Math.round(
+    var fillColor = this._segment.hoverColor + Math.round(
       this._segment.opacity * 255
-    ).toString(16));
+    ).toString(16);
+
+    this._rectangle.fill(fillColor);
+    this._rectangle.fillLinearGradientColorStops([
+      0, fillColor,
+      0.65, this._segment.warningColor
+    ]);
 
     this._view.drawSourcesLayer();
 
@@ -352,9 +379,15 @@ define([
 
     this._view.setHoveredElement(null);
 
-    this._rectangle.fill(this._segment.color + Math.round(
+    var fillColor = this._segment.color + Math.round(
       this._segment.opacity * 255
-    ).toString(16));
+    ).toString(16);
+
+    this._rectangle.fill(fillColor);
+    this._rectangle.fillLinearGradientColorStops([
+      0, fillColor,
+      0.65, this._segment.warningColor
+    ]);
 
     this._view.drawSourcesLayer();
 

package/src/segment.js

@@ -71,6 +71,13 @@ define([
       throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
     }
 
+    if (Utils.isNullOrUndefined(options.warningColor)) {
+      options.warningColor = '#E48023';
+    }
+    else if (!Utils.isValidColor(options.warningColor)) {
+      throw new TypeError('peaks.segments.' + context + ': warningColor must be a boolean');
+    }
+
     return shouldNotifyUpdate;
   }
 
@@ -96,17 +103,19 @@ define([
    *   of all indicators.
    */
 
-  function Segment(peaks, id, startTime, endTime, labelText, color,
-    textColor, handleTextColor, hoverColor, opacity, editable,
-    allowDeletion, line, indicators) {
+  function Segment(peaks, id, startTime, endTime, duration, labelText,
+    color, textColor, handleTextColor, hoverColor, warningColor, opacity,
+    editable, allowDeletion, line, indicators) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
+      duration:        duration,
       labelText:       labelText,
       color:           color,
       textColor:       textColor,
       handleTextColor: handleTextColor,
       hoverColor:      hoverColor,
+      warningColor:    warningColor,
       opacity:         opacity,
       editable:        editable,
       allowDeletion:   allowDeletion,
@@ -120,11 +129,13 @@ define([
     this._id              = id;
     this._startTime       = opts.startTime;
     this._endTime         = opts.endTime;
+    this._duration        = opts.duration;
     this._labelText       = opts.labelText;
     this._color           = opts.color;
     this._hoverColor      = opts.hoverColor;
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
+    this._warningColor    = opts.warningColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;
@@ -165,6 +176,16 @@ define([
         this._endTime = Utils.roundTime(time);
       }
     },
+    duration: {
+      enumerable: true,
+      get: function() {
+        return this._duration;
+      },
+
+      set: function(duration) {
+        this._duration = Utils.roundTime(duration);
+      }
+    },
     labelText: {
       enumerable: true,
       get: function() {
@@ -195,6 +216,12 @@ define([
         return this._handleTextColor;
       }
     },
+    warningColor: {
+      enumerable: true,
+      get: function() {
+        return this._warningColor;
+      }
+    },
     opacity: {
       enumerable: true,
       get: function() {
@@ -246,11 +273,13 @@ define([
     var opts = {
       startTime:       this.startTime,
       endTime:         this.endTime,
+      duration:        this.duration,
       labelText:       this.labelText,
       color:           this.color,
       textColor:       this.textColor,
       handleTextColor: this.handleTextColor,
       hoverColor:      this.hoverColor,
+      warningColor:    this.warningColor,
       opacity:         this.opacity,
       editable:        this.editable,
       allowDeletion:   this.allowDeletion,
@@ -264,11 +293,13 @@ define([
 
     this._startTime       = opts.startTime;
     this._endTime         = opts.endTime;
+    this._duration        = opts.duration;
     this._labelText       = opts.labelText;
     this._color           = opts.color;
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
     this._hoverColor      = opts.hoverColor;
+    this._warningColor    = opts.warningColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;
@@ -303,5 +334,13 @@ define([
     this._peaks.emit('segment.setIndicators', this);
   };
 
+  /**
+   * Returns <code>true</code> if a warning should be shown
+   */
+
+  Segment.prototype.shouldShowWarning = function() {
+    return this.duration > Utils.roundTime(this.endTime - this.startTime);
+  };
+
   return Segment;
 });

package/src/timeline-segments.js

@@ -131,11 +131,13 @@ define([
       Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id,
       options.startTime,
       options.endTime,
+      options.duration,
       options.labelText,
       options.color || this._getSegmentColor(),
       options.textColor || '#000000',
       options.handleTextColor || '#000000',
       options.hoverColor,
+      options.warningColor,
       options.opacity || 1,
       options.editable,
       options.allowDeletion || false,