@checksub_team/peaks_timeline 1.4.52 → 1.4.53

package/package.json

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

package/peaks.js

@@ -17675,7 +17675,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         var self = this;
         var background = new Konva.Shape({
-            fill: this._source.color,
+            fill: this._source.backgroundColor,
             stroke: this._source.borderColor,
             strokeWidth: this._source.borderWidth,
             sceneFunc: function (ctx, shape) {
@@ -17727,7 +17727,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         var self = this;
         var background = new Konva.Shape({
-            fill: this._source.color,
+            fill: this._source.backgroundColor,
             stroke: this._source.borderColor,
             strokeWidth: this._source.borderWidth,
             sceneFunc: function (ctx, shape) {
@@ -17957,7 +17957,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             var waveform = new WaveformShape({
                 layer: this._layer,
                 view: this._view,
-                color: this._peaks.options.zoomWaveformColor,
                 source: this._source,
                 height: preview.group.height(),
                 url: preview.url
@@ -18204,7 +18203,10 @@ module.exports = function (Utils) {
             throw new TypeError('peaks.sources.' + context + ': binaryUrl must be a string');
         }
         if (!Utils.isValidColor(options.color)) {
-            throw new TypeError('peaks.sources.' + context + ': color should be a valid CSS color');
+            options.color = peaks.options.zoomWaveformColor;
+        }
+        if (!Utils.isValidColor(options.backgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': backgroundColor should be a valid CSS color');
         }
         if (!Utils.isValidColor(options.borderColor)) {
             options.borderColor = options.color;
@@ -18271,7 +18273,7 @@ module.exports = function (Utils) {
             options.wrapped = false;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
         var opts = {
             title: title,
             url: url,
@@ -18285,6 +18287,7 @@ module.exports = function (Utils) {
             mediaStartTime: mediaStartTime,
             mediaEndTime: mediaEndTime,
             color: color,
+            backgroundColor: backgroundColor,
             borderColor: borderColor,
             selectedColor: selectedColor,
             textColor: textColor,
@@ -18314,8 +18317,9 @@ module.exports = function (Utils) {
         this._mediaStartTime = opts.mediaStartTime;
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
+        this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
         this._borderWidth = opts.borderWidth;
         this._wrapped = opts.wrapped;
@@ -18436,6 +18440,15 @@ module.exports = function (Utils) {
                 this._color = color;
             }
         },
+        backgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._backgroundColor;
+            },
+            set: function (backgroundColor) {
+                this._backgroundColor = backgroundColor;
+            }
+        },
         borderColor: {
             enumerable: true,
             get: function () {
@@ -18640,6 +18653,7 @@ module.exports = function (Utils) {
             mediaStartTime: this.mediaStartTime,
             mediaEndTime: this.mediaEndTime,
             color: this.color,
+            backgroundColor: this.backgroundColor,
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
             textColor: this.textColor,
@@ -18666,8 +18680,9 @@ module.exports = function (Utils) {
         this._mediaStartTime = opts.mediaStartTime;
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
+        this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
         this._borderWidth = opts.borderWidth;
         this._wrapped = opts.wrapped;
@@ -19363,6 +19378,7 @@ module.exports = function (Source, Utils) {
                 mediaStartTime: sourceToCut.mediaEndTime,
                 mediaEndTime: originalMediaEndTime,
                 color: sourceToCut.color,
+                backgroundColor: sourceToCut.backgroundColor,
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
                 textColor: sourceToCut.textColor,
@@ -19388,7 +19404,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.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
+        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.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
         return source;
     };
     TimelineSources.prototype.getSources = function () {
@@ -20424,7 +20440,7 @@ module.exports = function (Utils, Konva) {
         return height - Utils.clamp(height - scaledAmplitude, 0, height);
     }
     function WaveformShape(options) {
-        Konva.Shape.call(this, { fill: options.color });
+        Konva.Shape.call(this, { fill: options.source.color });
         this._layer = options.layer;
         this._view = options.view;
         this._source = options.source;
@@ -20434,9 +20450,6 @@ module.exports = function (Utils, Konva) {
         this.hitFunc(this._waveformShapeHitFunc);
     }
     WaveformShape.prototype = Object.create(Konva.Shape.prototype);
-    WaveformShape.prototype.setWaveformColor = function (color) {
-        this.fill(color);
-    };
     WaveformShape.prototype._sceneFunc = function (context) {
         var width = this._view.getWidth();
         var waveformData = this._layer.getLoadedData(this._url).data;

package/src/source-group.js

@@ -399,7 +399,7 @@ define([
     var self = this;
 
     var background = new Konva.Shape({
-      fill: this._source.color,
+      fill: this._source.backgroundColor,
       stroke: this._source.borderColor,
       strokeWidth: this._source.borderWidth,
       sceneFunc: function(ctx, shape) {
@@ -461,7 +461,7 @@ define([
     var self = this;
 
     var background = new Konva.Shape({
-      fill: this._source.color,
+      fill: this._source.backgroundColor,
       stroke: this._source.borderColor,
       strokeWidth: this._source.borderWidth,
       sceneFunc: function(ctx, shape) {
@@ -757,7 +757,6 @@ define([
       var waveform = new WaveformShape({
         layer: this._layer,
         view: this._view,
-        color: this._peaks.options.zoomWaveformColor,
         source: this._source,
         height: preview.group.height(),
         url: preview.url

package/src/source.js

@@ -105,7 +105,13 @@ define([
     }
 
     if (!Utils.isValidColor(options.color)) {
-      throw new TypeError('peaks.sources.' + context + ': color should be a valid CSS color');
+      options.color = peaks.options.zoomWaveformColor;
+    }
+
+    if (!Utils.isValidColor(options.backgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': backgroundColor should be a valid CSS color'
+      );
     }
 
     if (!Utils.isValidColor(options.borderColor)) {
@@ -220,9 +226,9 @@ define([
    */
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
-    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor,
-    selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping,
-    previewHeight, binaryHeight) {
+    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
+    borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable,
+    wrapping, previewHeight, binaryHeight) {
     var opts = {
       title: title,
       url: url,
@@ -236,6 +242,7 @@ define([
       mediaStartTime: mediaStartTime,
       mediaEndTime: mediaEndTime,
       color: color,
+      backgroundColor: backgroundColor,
       borderColor: borderColor,
       selectedColor: selectedColor,
       textColor: textColor,
@@ -267,8 +274,9 @@ define([
     this._mediaStartTime = opts.mediaStartTime;
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
+    this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
     this._borderWidth = opts.borderWidth;
     this._wrapped = opts.wrapped;
@@ -396,6 +404,16 @@ define([
         this._color = color;
       }
     },
+    backgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._backgroundColor;
+      },
+
+      set: function(backgroundColor) {
+        this._backgroundColor = backgroundColor;
+      }
+    },
     borderColor: {
       enumerable: true,
       get: function() {
@@ -641,6 +659,7 @@ define([
       mediaStartTime: this.mediaStartTime,
       mediaEndTime: this.mediaEndTime,
       color: this.color,
+      backgroundColor: this.backgroundColor,
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
       textColor: this.textColor,
@@ -670,8 +689,9 @@ define([
     this._mediaStartTime = opts.mediaStartTime;
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
+    this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
     this._borderWidth = opts.borderWidth;
     this._wrapped = opts.wrapped;

package/src/timeline-sources.js

@@ -78,6 +78,7 @@ define([
       mediaStartTime: sourceToCut.mediaEndTime,
       mediaEndTime: originalMediaEndTime,
       color: sourceToCut.color,
+      backgroundColor: sourceToCut.backgroundColor,
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
       textColor: sourceToCut.textColor,
@@ -151,6 +152,7 @@ define([
       options.mediaStartTime,
       options.mediaEndTime,
       options.color,
+      options.backgroundColor,
       options.borderColor,
       options.selectedColor,
       options.textColor,

package/src/waveform-shape.js

@@ -51,7 +51,7 @@ define(['./utils', 'konva'], function(Utils, Konva) {
 
   function WaveformShape(options) {
     Konva.Shape.call(this, {
-      fill: options.color
+      fill: options.source.color
     });
 
     this._layer = options.layer;
@@ -67,10 +67,6 @@ define(['./utils', 'konva'], function(Utils, Konva) {
 
   WaveformShape.prototype = Object.create(Konva.Shape.prototype);
 
-  WaveformShape.prototype.setWaveformColor = function(color) {
-    this.fill(color);
-  };
-
   WaveformShape.prototype._sceneFunc = function(context) {
     var width = this._view.getWidth();
     var waveformData = this._layer.getLoadedData(this._url).data;