@checksub_team/peaks_timeline 1.13.2 → 1.13.4-alpha.0

package/package.json

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

package/peaks.js

@@ -14825,7 +14825,8 @@ module.exports = function (Konva, Utils, SVGs) {
                 fontFamily: this._peaks.options.lineIndicatorFont,
                 fill: this._peaks.options.lineIndicatorTextColor,
                 align: 'center',
-                width: this._width
+                width: this._width,
+                listening: false
             });
             textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
             textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
@@ -14842,7 +14843,8 @@ module.exports = function (Konva, Utils, SVGs) {
                 radius: this._sizes.icon.default / 2,
                 fill: this._peaks.options.lineIndicatorIconColor,
                 strokeWidth: 0,
-                lineId: line.getId()
+                lineId: line.getId(),
+                listening: false
             });
             indicatorHeight += padding;
         } else {
@@ -14855,7 +14857,8 @@ module.exports = function (Konva, Utils, SVGs) {
                     x: this._sizes.icon[type] / SVGs[type].width,
                     y: this._sizes.icon[type] / SVGs[type].height
                 },
-                lineId: line.getId()
+                lineId: line.getId(),
+                listening: false
             });
         }
         iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
@@ -14863,6 +14866,16 @@ module.exports = function (Konva, Utils, SVGs) {
         indicator.add(iconNode);
         indicatorHeight += this._sizes.icon[type];
         indicator.setAttr('trueHeight', indicatorHeight);
+        var backgroundRect = new Konva.Rect({
+            x: 0,
+            y: 0,
+            width: this._width,
+            height: indicatorHeight,
+            fill: 'transparent',
+            listening: true
+        });
+        indicator.add(backgroundRect);
+        backgroundRect.moveToTop();
         indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
         var self = this;
         indicator.on('mouseenter', function () {
@@ -18288,7 +18301,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this._rightHandle.draggable(bool);
         }
     };
-    SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth) {
+    SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth, fill) {
         var offset = addBorderWidth ? this._borderWidth : 0;
         var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
         var x = Math.max(0, this._view.getFrameOffset() - this._x - radius);
@@ -18305,6 +18318,26 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         ctx.lineTo(x + offset, radius);
         ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
         ctx.closePath();
+        if (fill) {
+            if (this._source.shouldShowWarning()) {
+                var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
+                if (this._source.mediaEndTime < this._source.duration) {
+                    var rightStopPosition = Math.max(1 - 20 / this._width, 0.5);
+                    gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
+                    gradient.addColorStop(1, this._source.warningColor);
+                }
+                if (this._source.mediaStartTime > 0) {
+                    var leftStopPosition = Math.min(20 / this._width, 0.5);
+                    gradient.addColorStop(0, this._source.warningColor);
+                    gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+                }
+                ctx.fillStyle = gradient;
+                ctx.fill();
+            } else {
+                ctx.fillStyle = this._source.backgroundColor;
+                ctx.fill();
+            }
+        }
         if (shape) {
             ctx.fillStrokeShape(shape);
         }
@@ -18326,9 +18359,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         var background = new Konva.Group();
         background.add(new Konva.Shape({
-            fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
-                self.drawSourceShape(ctx, shape, true);
+                self.drawSourceShape(ctx, shape, true, true);
             }
         }));
         unwrap.add(background);
@@ -18368,9 +18400,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         var background = new Konva.Group();
         background.add(new Konva.Shape({
-            fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
-                self.drawSourceShape(ctx, shape, true);
+                self.drawSourceShape(ctx, shape, true, true);
             }
         }));
         wrap.add(background);
@@ -19038,6 +19069,11 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.selectedColor)) {
             throw new TypeError('peaks.sources.' + context + ': selectedColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.warningColor)) {
+            options.warningColor = null;
+        } else if (!Utils.isValidColor(options.warningColor)) {
+            throw new TypeError('peaks.sources.' + context + ': warningColor should be a valid CSS color');
+        }
         if (Utils.isNullOrUndefined(options.volumeSliderColor)) {
             options.volumeSliderColor = '#000000';
         } else if (!Utils.isValidColor(options.volumeSliderColor)) {
@@ -19168,7 +19204,7 @@ module.exports = function (Utils) {
             }
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth, volume, volumeRange) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, warningColor, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth, volume, volumeRange) {
         var opts = {
             title: title,
             url: url,
@@ -19185,6 +19221,7 @@ module.exports = function (Utils) {
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             selectedColor: selectedColor,
+            warningColor: warningColor,
             textFont: textFont,
             textFontSize: textFontSize,
             textColor: textColor,
@@ -19233,6 +19270,7 @@ module.exports = function (Utils) {
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._warningColor = opts.warningColor;
         this._volumeSliderColor = opts.volumeSliderColor;
         this._volumeSliderWidth = opts.volumeSliderWidth;
         this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -19399,6 +19437,15 @@ module.exports = function (Utils) {
                 this._selectedColor = selectedColor;
             }
         },
+        warningColor: {
+            enumerable: true,
+            get: function () {
+                return this._warningColor;
+            },
+            set: function (warningColor) {
+                this._warningColor = warningColor;
+            }
+        },
         volumeSliderColor: {
             enumerable: true,
             get: function () {
@@ -19726,6 +19773,7 @@ module.exports = function (Utils) {
             backgroundColor: this.backgroundColor,
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
+            warningColor: this.warningColor,
             volumeSliderColor: this.volumeSliderColor,
             volumeSliderWidth: this.volumeSliderWidth,
             volumeSliderDraggingWidth: this.volumeSliderDraggingWidth,
@@ -19771,6 +19819,7 @@ module.exports = function (Utils) {
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._warningColor = opts.warningColor;
         this._volumeSliderColor = opts.volumeSliderColor;
         this._volumeSliderWidth = opts.volumeSliderWidth;
         this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -19807,6 +19856,9 @@ module.exports = function (Utils) {
         this._indicators = newIndicators;
         this._peaks.emit('source.setIndicators', this);
     };
+    Source.prototype.shouldShowWarning = function () {
+        return this._warningColor && this._duration > Utils.roundTime(this._endTime - this._startTime);
+    };
     return Source;
 }(_dereq_('./utils'));
 },{"./utils":112}],106:[function(_dereq_,module,exports){
@@ -20608,6 +20660,7 @@ module.exports = function (Source, Utils) {
                 backgroundColor: sourceToCut.backgroundColor,
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
+                warningColor: sourceToCut.warningColor,
                 volumeSliderColor: sourceToCut.volumeSliderColor,
                 volumeSliderWidth: sourceToCut.volumeSliderWidth,
                 volumeSliderDraggingWidth: sourceToCut.volumeSliderDraggingWidth,
@@ -20651,7 +20704,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth, options.volume, options.volumeRange);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.warningColor, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth, options.volume, options.volumeRange);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/line-indicator.js

@@ -143,7 +143,8 @@ define([
         fontFamily: this._peaks.options.lineIndicatorFont,
         fill: this._peaks.options.lineIndicatorTextColor,
         align: 'center',
-        width: this._width
+        width: this._width,
+        listening: false
       });
 
       textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
@@ -166,7 +167,8 @@ define([
         radius: this._sizes.icon.default / 2,
         fill: this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
-        lineId: line.getId()
+        lineId: line.getId(),
+        listening: false
       });
 
       indicatorHeight += padding;
@@ -181,7 +183,8 @@ define([
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
         },
-        lineId: line.getId()
+        lineId: line.getId(),
+        listening: false
       });
     }
 
@@ -193,6 +196,18 @@ define([
 
     indicator.setAttr('trueHeight', indicatorHeight);
 
+    var backgroundRect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: indicatorHeight,
+      fill: 'transparent',
+      listening: true
+    });
+
+    indicator.add(backgroundRect);
+    backgroundRect.moveToTop();
+
     indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
 
     var self = this;

package/src/source-group.js

@@ -311,7 +311,7 @@ define([
     }
   };
 
-  SourceGroup.prototype.drawSourceShape = function(ctx, shape, addBorderWidth) {
+  SourceGroup.prototype.drawSourceShape = function(ctx, shape, addBorderWidth, fill) {
     var offset = addBorderWidth ? this._borderWidth : 0;
     var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ?
     this._source.borderRadius :
@@ -355,6 +355,33 @@ define([
     ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
     ctx.closePath();
 
+    if (fill) {
+      if (this._source.shouldShowWarning()) {
+        var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
+
+        if (this._source.mediaEndTime < this._source.duration) {
+          var rightStopPosition = Math.max(1 - (20 / this._width), 0.5);
+
+          gradient.addColorStop(rightStopPosition, this._source.backgroundColor);
+          gradient.addColorStop(1, this._source.warningColor);
+        }
+
+        if (this._source.mediaStartTime > 0) {
+          var leftStopPosition = Math.min(20 / this._width, 0.5);
+
+          gradient.addColorStop(0, this._source.warningColor);
+          gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+        }
+
+        ctx.fillStyle = gradient;
+        ctx.fill();
+      }
+      else {
+        ctx.fillStyle = this._source.backgroundColor;
+        ctx.fill();
+      }
+    }
+
     if (shape) {
       ctx.fillStrokeShape(shape);
     }
@@ -382,9 +409,8 @@ define([
     var background = new Konva.Group();
 
     background.add(new Konva.Shape({
-      fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape, true);
+        self.drawSourceShape(ctx, shape, true, true);
       }
     }));
 
@@ -435,9 +461,8 @@ define([
     var background = new Konva.Group();
 
     background.add(new Konva.Shape({
-      fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape, true);
+        self.drawSourceShape(ctx, shape, true, true);
       }
     }));
 

package/src/source.js

@@ -127,6 +127,15 @@ define([
       );
     }
 
+    if (Utils.isNullOrUndefined(options.warningColor)) {
+      options.warningColor = null;
+    }
+    else if (!Utils.isValidColor(options.warningColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': warningColor should be a valid CSS color'
+      );
+    }
+
     if (Utils.isNullOrUndefined(options.volumeSliderColor)) {
       options.volumeSliderColor = '#000000';
     }
@@ -337,7 +346,7 @@ define([
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth,
+    borderColor, selectedColor, warningColor, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth,
     textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth,
     borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping,
     previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth, volume, volumeRange) {
@@ -357,6 +366,7 @@ define([
       backgroundColor: backgroundColor,
       borderColor: borderColor,
       selectedColor: selectedColor,
+      warningColor: warningColor,
       textFont: textFont,
       textFontSize: textFontSize,
       textColor: textColor,
@@ -407,6 +417,7 @@ define([
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._warningColor = opts.warningColor;
     this._volumeSliderColor = opts.volumeSliderColor;
     this._volumeSliderWidth = opts.volumeSliderWidth;
     this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -583,6 +594,16 @@ define([
         this._selectedColor = selectedColor;
       }
     },
+    warningColor: {
+      enumerable: true,
+      get: function() {
+        return this._warningColor;
+      },
+
+      set: function(warningColor) {
+        this._warningColor = warningColor;
+      }
+    },
     volumeSliderColor: {
       enumerable: true,
       get: function() {
@@ -957,6 +978,7 @@ define([
       backgroundColor: this.backgroundColor,
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
+      warningColor: this.warningColor,
       volumeSliderColor: this.volumeSliderColor,
       volumeSliderWidth: this.volumeSliderWidth,
       volumeSliderDraggingWidth: this.volumeSliderDraggingWidth,
@@ -1005,6 +1027,7 @@ define([
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._warningColor = opts.warningColor;
     this._volumeSliderColor = opts.volumeSliderColor;
     this._volumeSliderWidth = opts.volumeSliderWidth;
     this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -1060,5 +1083,13 @@ define([
     this._peaks.emit('source.setIndicators', this);
   };
 
+  /**
+   * Returns <code>true</code> if a warning should be shown
+   */
+
+  Source.prototype.shouldShowWarning = function() {
+    return this._warningColor && this._duration > Utils.roundTime(this._endTime - this._startTime);
+  };
+
   return Source;
 });

package/src/timeline-sources.js

@@ -81,6 +81,7 @@ define([
       backgroundColor: sourceToCut.backgroundColor,
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
+      warningColor: sourceToCut.warningColor,
       volumeSliderColor: sourceToCut.volumeSliderColor,
       volumeSliderWidth: sourceToCut.volumeSliderWidth,
       volumeSliderDraggingWidth: sourceToCut.volumeSliderDraggingWidth,
@@ -171,6 +172,7 @@ define([
       options.backgroundColor,
       options.borderColor,
       options.selectedColor,
+      options.warningColor,
       options.volumeSliderColor,
       options.volumeSliderWidth,
       options.volumeSliderDraggingWidth,