@checksub_team/peaks_timeline 1.14.0-alpha.1 → 1.14.0

package/package.json

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

package/peaks.js

@@ -15914,6 +15914,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             sourceHandleWidth: 12,
             sourceTextXOffset: 10,
             sourceTextYOffset: 10,
+            sourceIndicatorsXOffset: 8,
+            sourceIndicatorsYOffset: 12,
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
@@ -18106,8 +18108,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     var SPACING_BETWEEN_PREVIEWS = 1.5;
     var CORNER_RADIUS = 8;
     var INDICATOR_RADIUS = 4;
-    var INDICATORS_MARGIN_LEFT = 8;
-    var INDICATORS_MARGIN_TOP = 12;
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
         this._peaks = peaks;
@@ -18333,12 +18333,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             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);
+                    var rightStopPosition = Math.max(1 - this._source.warningWidth / 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);
+                    var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
                     gradient.addColorStop(0, this._source.warningColor);
                     gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
                 }
@@ -18866,8 +18866,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 zIndex += 1;
             }
         }
-        this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
-        this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+        this._indicatorsGroup.offsetX(currentX - this._peaks.options.sourceIndicatorsXOffset);
+        this._indicatorsGroup.offsetY(-this._peaks.options.sourceIndicatorsYOffset);
     };
     SourceGroup.prototype._createMarkers = function () {
         const markersGroup = new Konva.Group({ listening: false });
@@ -19106,6 +19106,11 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.warningColor)) {
             throw new TypeError('peaks.sources.' + context + ': warningColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.warningWidth)) {
+            options.warningWidth = 10;
+        } else if (!Utils.isNumber(options.warningWidth)) {
+            throw new TypeError('peaks.sources.' + context + ': warningWidth should be a number');
+        }
         if (Utils.isNullOrUndefined(options.volumeSliderColor)) {
             options.volumeSliderColor = '#000000';
         } else if (!Utils.isValidColor(options.volumeSliderColor)) {
@@ -19236,7 +19241,7 @@ module.exports = function (Utils) {
             }
         }
     }
-    function Source(peaks, id, originId, elementId, title, titleAlignments, 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) {
+    function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, warningColor, warningWidth, 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,
             titleAlignments: titleAlignments,
@@ -19255,6 +19260,7 @@ module.exports = function (Utils) {
             borderColor: borderColor,
             selectedColor: selectedColor,
             warningColor: warningColor,
+            warningWidth: warningWidth,
             textFont: textFont,
             textFontSize: textFontSize,
             textColor: textColor,
@@ -19305,6 +19311,7 @@ module.exports = function (Utils) {
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._warningColor = opts.warningColor;
+        this._warningWidth = opts.warningWidth;
         this._volumeSliderColor = opts.volumeSliderColor;
         this._volumeSliderWidth = opts.volumeSliderWidth;
         this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -19486,6 +19493,15 @@ module.exports = function (Utils) {
                 this._warningColor = warningColor;
             }
         },
+        warningWidth: {
+            enumerable: true,
+            get: function () {
+                return this._warningWidth;
+            },
+            set: function (warningWidth) {
+                this._warningWidth = warningWidth;
+            }
+        },
         volumeSliderColor: {
             enumerable: true,
             get: function () {
@@ -19815,6 +19831,7 @@ module.exports = function (Utils) {
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
             warningColor: this.warningColor,
+            warningWidth: this.warningWidth,
             volumeSliderColor: this.volumeSliderColor,
             volumeSliderWidth: this.volumeSliderWidth,
             volumeSliderDraggingWidth: this.volumeSliderDraggingWidth,
@@ -19862,6 +19879,7 @@ module.exports = function (Utils) {
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._warningColor = opts.warningColor;
+        this._warningWidth = opts.warningWidth;
         this._volumeSliderColor = opts.volumeSliderColor;
         this._volumeSliderWidth = opts.volumeSliderWidth;
         this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -20718,6 +20736,7 @@ module.exports = function (Source, Utils) {
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
                 warningColor: sourceToCut.warningColor,
+                warningWidth: sourceToCut.warningWidth,
                 volumeSliderColor: sourceToCut.volumeSliderColor,
                 volumeSliderWidth: sourceToCut.volumeSliderWidth,
                 volumeSliderDraggingWidth: sourceToCut.volumeSliderDraggingWidth,
@@ -20761,7 +20780,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.titleAlignments, 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);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.titleAlignments, 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.warningWidth, 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/main.js

@@ -355,6 +355,20 @@ define([
        */
       sourceTextYOffset: 10,
 
+      /**
+       * X Offset of the source indicators, in pixels
+       * This is the offset of the source indicators
+       * from the left side of the source
+       */
+      sourceIndicatorsXOffset: 8,
+
+      /**
+       * Y Offset of the source indicators, in pixels
+       * This is the offset of the source indicators
+       * from the top of the source
+       */
+      sourceIndicatorsYOffset: 12,
+
       /**
        * Threshold size on the left and right border of the view,
        * where auto scrolling is activated, between 0 and 1.

package/src/source-group.js

@@ -22,8 +22,6 @@ define([
   var SPACING_BETWEEN_PREVIEWS = 1.5;
   var CORNER_RADIUS = 8;
   var INDICATOR_RADIUS = 4; // px
-  var INDICATORS_MARGIN_LEFT = 8; // px
-  var INDICATORS_MARGIN_TOP = 12; // px
 
   /**
    * Creates a source group for the given source.
@@ -371,14 +369,14 @@ define([
         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);
+          var rightStopPosition = Math.max(1 - (this._source.warningWidth / 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);
+          var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
 
           gradient.addColorStop(0, this._source.warningColor);
           gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
@@ -1070,8 +1068,8 @@ define([
       }
     }
 
-    this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
-    this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+    this._indicatorsGroup.offsetX(currentX - this._peaks.options.sourceIndicatorsXOffset);
+    this._indicatorsGroup.offsetY(-this._peaks.options.sourceIndicatorsYOffset);
   };
 
   SourceGroup.prototype._createMarkers = function() {

package/src/source.js

@@ -143,6 +143,13 @@ define([
       );
     }
 
+    if (Utils.isNullOrUndefined(options.warningWidth)) {
+      options.warningWidth = 10;
+    }
+    else if (!Utils.isNumber(options.warningWidth)) {
+      throw new TypeError('peaks.sources.' + context + ': warningWidth should be a number');
+    }
+
     if (Utils.isNullOrUndefined(options.volumeSliderColor)) {
       options.volumeSliderColor = '#000000';
     }
@@ -389,10 +396,11 @@ define([
 
   function Source(peaks, id, originId, elementId, title, titleAlignments, 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) {
+    borderColor, selectedColor, warningColor, warningWidth, 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,
       titleAlignments: titleAlignments,
@@ -411,6 +419,7 @@ define([
       borderColor: borderColor,
       selectedColor: selectedColor,
       warningColor: warningColor,
+      warningWidth: warningWidth,
       textFont: textFont,
       textFontSize: textFontSize,
       textColor: textColor,
@@ -463,6 +472,7 @@ define([
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._warningColor = opts.warningColor;
+    this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;
     this._volumeSliderWidth = opts.volumeSliderWidth;
     this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
@@ -655,6 +665,16 @@ define([
         this._warningColor = warningColor;
       }
     },
+    warningWidth: {
+      enumerable: true,
+      get: function() {
+        return this._warningWidth;
+      },
+
+      set: function(warningWidth) {
+        this._warningWidth = warningWidth;
+      }
+    },
     volumeSliderColor: {
       enumerable: true,
       get: function() {
@@ -1031,6 +1051,7 @@ define([
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
       warningColor: this.warningColor,
+      warningWidth: this.warningWidth,
       volumeSliderColor: this.volumeSliderColor,
       volumeSliderWidth: this.volumeSliderWidth,
       volumeSliderDraggingWidth: this.volumeSliderDraggingWidth,
@@ -1081,6 +1102,7 @@ define([
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._warningColor = opts.warningColor;
+    this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;
     this._volumeSliderWidth = opts.volumeSliderWidth;
     this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;

package/src/timeline-sources.js

@@ -83,6 +83,7 @@ define([
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
       warningColor: sourceToCut.warningColor,
+      warningWidth: sourceToCut.warningWidth,
       volumeSliderColor: sourceToCut.volumeSliderColor,
       volumeSliderWidth: sourceToCut.volumeSliderWidth,
       volumeSliderDraggingWidth: sourceToCut.volumeSliderDraggingWidth,
@@ -175,6 +176,7 @@ define([
       options.borderColor,
       options.selectedColor,
       options.warningColor,
+      options.warningWidth,
       options.volumeSliderColor,
       options.volumeSliderWidth,
       options.volumeSliderDraggingWidth,