@checksub_team/peaks_timeline 1.12.0 → 1.12.2-beta.1

package/package.json

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

package/peaks.js

@@ -17677,6 +17677,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._wrappedHeight = this._peaks.options.wrappedLineHeight;
         this._borderWidth = this._source.borderWidth || 0;
         this._height = this._unwrappedHeight;
+        this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
         this._previewList = [];
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
@@ -17744,14 +17745,21 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         };
     };
     SourceGroup.prototype.update = function () {
-        var startPixel = this._view.timeToPixels(this._source.startTime);
-        var endPixel = this._view.timeToPixels(this._source.endTime);
-        var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+        const startPixel = this._view.timeToPixels(this._source.startTime);
+        const endPixel = this._view.timeToPixels(this._source.endTime);
+        const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+        const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
         this._group.x(startPixel - frameOffset);
         this._x = startPixel;
-        var newWidth = endPixel - startPixel;
+        const newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
+            if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
+                this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
+                this._updateMarkers();
+                this._rightHandle.x(this._width - this._rightHandle.width());
+            }
+            this._updateVolumeSlider();
             this.updatePreviews();
         }
     };
@@ -18393,12 +18401,47 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }.bind(this));
         return markersGroup;
     };
+    SourceGroup.prototype._updateMarkers = function () {
+        const self = this;
+        if (this._markersGroup) {
+            this._markersGroup.getChildren().forEach(function (markerLine, index) {
+                const marker = self._source.markers[index];
+                const markerX = self._view.timeToPixels(marker - self._source.mediaStartTime);
+                markerLine.points([
+                    markerX,
+                    0,
+                    markerX,
+                    self._unwrappedHeight
+                ]);
+            });
+        }
+    };
     SourceGroup.prototype._getYFromVolume = function (volume) {
         return this._borderWidth + (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - volume) / (this._source.volumeRange[1] - this._source.volumeRange[0]);
     };
     SourceGroup.prototype._getVolumeFromY = function (y) {
         return this._source.volumeRange[1] - (y - this._borderWidth) / (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - this._source.volumeRange[0]);
     };
+    SourceGroup.prototype._updateVolumeSlider = function () {
+        const width = this._width;
+        if (this._volumeSliderGroup) {
+            this._volumeSliderGroup.getChildren().forEach(function (child) {
+                if (child instanceof Konva.Group) {
+                    child.width(width);
+                    child.getChildren().forEach(function (node) {
+                        if (node instanceof Konva.Line) {
+                            node.points([
+                                0,
+                                0,
+                                width,
+                                0
+                            ]);
+                        }
+                    });
+                }
+            });
+        }
+    };
     SourceGroup.prototype._getVolumeSlider = function () {
         if (!this._volumeSliderGroup) {
             this._volumeSliderGroup = this._createVolumeSlider();
@@ -18410,9 +18453,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var volumeY = this._getYFromVolume(this._source.volume);
         var volumeGroup = new Konva.Group({
             x: 0,
-            y: 0,
-            width: this._width,
-            height: this._height
+            y: 0
         });
         var volumeText = new Konva.Text({
             x: 0,
@@ -18420,6 +18461,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             text: '100%',
             fontSize: 12,
             fill: this._source.volumeSliderColor,
+            stroke: 'black',
+            strokeWidth: 0.1,
+            fillAfterStrokeEnabled: true,
             visible: false
         });
         var maxTextWidth = volumeText.width();
@@ -18691,10 +18735,12 @@ module.exports = function (Utils) {
                 throw new RangeError('peaks.sources.' + context + ': volumeRange[0] should be less than volumeRange[1]');
             }
         }
-        if (!Utils.isNullOrUndefined(options.volume) && !Utils.isNumber(options.volume)) {
-            throw new TypeError('peaks.sources.' + context + ': volume must be a number');
-        } else if (!Utils.isNullOrUndefined(options.volumeRange)) {
-            options.volume = Utils.clamp(options.volume, options.volumeRange[0], options.volumeRange[1]);
+        if (!Utils.isNullOrUndefined(options.volume)) {
+            if (!Utils.isNumber(options.volume)) {
+                throw new TypeError('peaks.sources.' + context + ': volume must be a number');
+            } else {
+                options.volume = Utils.clamp(options.volume, options.volumeRange[0], options.volumeRange[1]);
+            }
         }
     }
     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) {

package/src/source-group.js

@@ -54,6 +54,7 @@ define([
     this._wrappedHeight = this._peaks.options.wrappedLineHeight;
     this._borderWidth = this._source.borderWidth || 0;
     this._height = this._unwrappedHeight;
+    this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
 
     this._previewList = [];
 
@@ -164,19 +165,31 @@ define([
   };
 
   SourceGroup.prototype.update = function() {
-    var startPixel = this._view.timeToPixels(this._source.startTime);
-    var endPixel   = this._view.timeToPixels(this._source.endTime);
-    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+    const startPixel = this._view.timeToPixels(this._source.startTime);
+    const endPixel   = this._view.timeToPixels(this._source.endTime);
+    const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+    const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
 
     this._group.x(startPixel - frameOffset);
 
     this._x = startPixel;
 
-    var newWidth = endPixel - startPixel;
+    const newWidth = endPixel - startPixel;
 
     if (newWidth !== this._width) {
       this._width = newWidth;
 
+      // the zoom was changed
+      if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
+        this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
+
+        this._updateMarkers();
+
+        this._rightHandle.x(this._width - this._rightHandle.width());
+      }
+
+      this._updateVolumeSlider();
+
       // update unwrap
       this.updatePreviews();
     }
@@ -1025,6 +1038,19 @@ define([
     return markersGroup;
   };
 
+  SourceGroup.prototype._updateMarkers = function() {
+    const self = this;
+
+    if (this._markersGroup) {
+      this._markersGroup.getChildren().forEach(function(markerLine, index) {
+        const marker = self._source.markers[index];
+        const markerX = self._view.timeToPixels(marker - self._source.mediaStartTime);
+
+        markerLine.points([markerX, 0, markerX, self._unwrappedHeight]);
+      });
+    }
+  };
+
   SourceGroup.prototype._getYFromVolume = function(volume) {
     return this._borderWidth + (this._height - 2 * this._borderWidth) * (
       this._source.volumeRange[1] - volume
@@ -1041,6 +1067,23 @@ define([
     );
   };
 
+  SourceGroup.prototype._updateVolumeSlider = function() {
+    const width = this._width;
+
+    if (this._volumeSliderGroup) {
+      this._volumeSliderGroup.getChildren().forEach(function(child) {
+        if (child instanceof Konva.Group) {
+          child.width(width);
+          child.getChildren().forEach(function(node) {
+            if (node instanceof Konva.Line) {
+              node.points([0, 0, width, 0]);
+            }
+          });
+        }
+      });
+    }
+  };
+
   SourceGroup.prototype._getVolumeSlider = function() {
     if (!this._volumeSliderGroup) {
       this._volumeSliderGroup = this._createVolumeSlider();
@@ -1056,9 +1099,7 @@ define([
 
     var volumeGroup = new Konva.Group({
       x: 0,
-      y: 0,
-      width: this._width,
-      height: this._height
+      y: 0
     });
 
     var volumeText = new Konva.Text({
@@ -1067,6 +1108,9 @@ define([
       text: '100%',
       fontSize: 12,
       fill: this._source.volumeSliderColor,
+      stroke: 'black',
+      strokeWidth: 0.1,
+      fillAfterStrokeEnabled: true,
       visible: false
     });
 

package/src/source.js

@@ -304,11 +304,13 @@ define([
       }
     }
 
-    if (!Utils.isNullOrUndefined(options.volume) && !Utils.isNumber(options.volume)) {
-      throw new TypeError('peaks.sources.' + context + ': volume must be a number');
-    }
-    else if (!Utils.isNullOrUndefined(options.volumeRange)) {
-      options.volume = Utils.clamp(options.volume, options.volumeRange[0], options.volumeRange[1]);
+    if (!Utils.isNullOrUndefined(options.volume)) {
+      if (!Utils.isNumber(options.volume)) {
+        throw new TypeError('peaks.sources.' + context + ': volume must be a number');
+      }
+      else {
+        options.volume = Utils.clamp(options.volume, options.volumeRange[0], options.volumeRange[1]);
+      }
     }
   }