@checksub_team/peaks_timeline 1.4.51 → 1.4.53

package/package.json

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

package/peaks.js

@@ -14305,7 +14305,7 @@ module.exports = function (Konva, Utils) {
         this._layer = new Konva.Layer();
         this._stage.add(this._layer);
         this._indicators = {};
-        this._layer.add(new Konva.Line({
+        this._separatingLine = new Konva.Line({
             points: [
                 this._width,
                 0,
@@ -14315,7 +14315,8 @@ module.exports = function (Konva, Utils) {
             stroke: 'gray',
             strokeWidth: 1,
             listening: false
-        }));
+        });
+        this._layer.add(this._separatingLine);
         this._layer.draw();
         if (this._peaks.options.enableLineIndicatorContextMenu) {
             this._createContextMenu();
@@ -14330,6 +14331,16 @@ module.exports = function (Konva, Utils) {
             'noVolume'
         ];
     }
+    LineIndicator.prototype.fitToView = function () {
+        this._height = this._view.getHeight();
+        this._stage.height(this._height);
+        this._separatingLine.points([
+            this._width,
+            0,
+            this._width,
+            this._height
+        ]);
+    };
     LineIndicator.prototype._onSetType = function (lineId, type) {
         this.removeIndicator(lineId, true);
         type = this._types.includes(type) ? type : 'default';
@@ -15038,6 +15049,9 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
         this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
     }
+    Lines.prototype.fitToView = function () {
+        this._lineIndicator.fitToView();
+    };
     Lines.prototype._onSegmentsAdd = function (segments) {
         var self = this;
         segments.forEach(function (segment) {
@@ -17661,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) {
@@ -17713,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) {
@@ -17943,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
@@ -18190,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;
@@ -18257,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,
@@ -18271,6 +18287,7 @@ module.exports = function (Utils) {
             mediaStartTime: mediaStartTime,
             mediaEndTime: mediaEndTime,
             color: color,
+            backgroundColor: backgroundColor,
             borderColor: borderColor,
             selectedColor: selectedColor,
             textColor: textColor,
@@ -18300,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;
@@ -18422,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 () {
@@ -18626,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,
@@ -18652,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;
@@ -18694,6 +18723,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
         this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
     }
+    SourcesLayer.prototype.fitToView = function () {
+        this._lines.fitToView();
+    };
     SourcesLayer.prototype.getLoadedData = function (id) {
         return this._loadedData[id];
     };
@@ -19346,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,
@@ -19371,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 () {
@@ -20000,18 +20033,23 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         if (this._container.clientWidth === 0 && this._container.clientHeight === 0) {
             return;
         }
-        var updateTimeline = true;
-        if (this._container.clientWidth !== this._width) {
-            this._width = this._container.clientWidth;
+        var shouldUpdate = false;
+        if (this._container.clientWidth - this._peaks.options.lineIndicatorWidth !== this._width) {
+            this._width = this._container.clientWidth - this._peaks.options.lineIndicatorWidth;
             this._stage.width(this._width);
+            shouldUpdate = true;
         }
-        this._height = this._container.clientHeight;
-        this._stage.height(this._height);
-        this._playheadLayer.fitToView();
-        if (updateTimeline) {
+        if (this._container.clientHeight !== this._height) {
+            this._height = this._container.clientHeight;
+            this._stage.height(this._height);
+            shouldUpdate = true;
+        }
+        if (shouldUpdate) {
+            this._sourcesLayer.fitToView();
+            this._playheadLayer.fitToView();
             this.updateTimeline(this._frameOffset);
+            this._stage.draw();
         }
-        this._stage.draw();
     };
     TimelineZoomView.prototype.destroy = function () {
         if (this._resizeTimeoutId) {
@@ -20402,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;
@@ -20412,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/line-indicator.js

@@ -44,14 +44,14 @@ define([
 
     this._indicators = {};
 
-    this._layer.add(
-      new Konva.Line({
-        points: [this._width, 0, this._width, this._height],
-        stroke: 'gray',
-        strokeWidth: 1,
-        listening: false
-      })
-    );
+    this._separatingLine = new Konva.Line({
+      points: [this._width, 0, this._width, this._height],
+      stroke: 'gray',
+      strokeWidth: 1,
+      listening: false
+    });
+
+    this._layer.add(this._separatingLine);
 
     this._layer.draw();
 
@@ -70,6 +70,14 @@ define([
     this._types = ['default', 'volume', 'noVolume'];
   }
 
+  LineIndicator.prototype.fitToView = function() {
+    this._height = this._view.getHeight();
+
+    this._stage.height(this._height);
+
+    this._separatingLine.points([this._width, 0, this._width, this._height]);
+  };
+
   LineIndicator.prototype._onSetType = function(lineId, type) {
     this.removeIndicator(lineId, true);
 

package/src/lines.js

@@ -50,6 +50,10 @@ define([
     this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
   }
 
+  Lines.prototype.fitToView = function() {
+    this._lineIndicator.fitToView();
+  };
+
   Lines.prototype._onSegmentsAdd = function(segments) {
     var self = this;
 

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/sources-layer.js

@@ -60,6 +60,10 @@ define([
     this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
   }
 
+  SourcesLayer.prototype.fitToView = function() {
+    this._lines.fitToView();
+  };
+
   SourcesLayer.prototype.getLoadedData = function(id) {
     return this._loadedData[id];
   };

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/timeline-zoomview.js

@@ -836,23 +836,28 @@ define([
       return;
     }
 
-    var updateTimeline = true;
+    var shouldUpdate = false;
 
-    if (this._container.clientWidth !== this._width) {
-      this._width = this._container.clientWidth;
+    if (this._container.clientWidth - this._peaks.options.lineIndicatorWidth !== this._width) {
+      this._width = this._container.clientWidth - this._peaks.options.lineIndicatorWidth;
       this._stage.width(this._width);
+      shouldUpdate = true;
     }
 
-    this._height = this._container.clientHeight;
-    this._stage.height(this._height);
+    if (this._container.clientHeight !== this._height) {
+      this._height = this._container.clientHeight;
+      this._stage.height(this._height);
+      shouldUpdate = true;
+    }
 
-    this._playheadLayer.fitToView();
+    if (shouldUpdate) {
+      this._sourcesLayer.fitToView();
+      this._playheadLayer.fitToView();
 
-    if (updateTimeline) {
       this.updateTimeline(this._frameOffset);
-    }
 
-    this._stage.draw();
+      this._stage.draw();
+    }
   };
 
   TimelineZoomView.prototype.destroy = function() {

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;