@checksub_team/peaks_timeline 2.1.0-alpha.0 → 2.1.1

package/package.json

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

package/peaks.js

@@ -16723,7 +16723,7 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._createPlayheadText = function (color) {
         this._playheadText = new Konva.Text({
             x: 13,
-            y: 3,
+            y: 10,
             text: '00:00:00',
             fontSize: 11,
             fontFamily: 'sans-serif',
@@ -16737,21 +16737,28 @@ module.exports = function (Utils, Konva) {
         this._syncPlayhead(time);
     };
     PlayheadLayer.prototype._syncPlayhead = function (time) {
-        if (this._time === time) {
-            return;
+        const pixelHasChanged = this._updatePlayheadPixel(time);
+        const timeHasChanged = this._time !== time;
+        if (timeHasChanged) {
+            this._updateActiveSegmentsAndSources(time);
+            this._updatePlayheadText(time);
         }
         this._time = time;
-        this._updatePlayheadPixel(time);
-        this._updateActiveSegmentsAndSources(time);
-        this._updatePlayheadText(time);
-        this._playheadLayer.batchDraw();
+        if (pixelHasChanged || timeHasChanged) {
+            this._playheadLayer.batchDraw();
+        }
     };
     PlayheadLayer.prototype._updatePlayheadPixel = function (time) {
         const pixelIndex = this._view.timeToPixels(time);
         const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
         this._playheadPixel = pixelIndex;
         const playheadX = this._playheadPixel - frameOffset;
-        this._playheadGroup.setAttr('x', playheadX);
+        const oldX = this._playheadGroup.getAttr('x');
+        const shouldUpdateX = oldX !== playheadX;
+        if (shouldUpdateX) {
+            this._playheadGroup.setAttr('x', playheadX);
+        }
+        return shouldUpdateX;
     };
     PlayheadLayer.prototype._updateActiveSegmentsAndSources = function (time) {
         const lineGroups = this._lines.getLineGroupsById();
@@ -16795,7 +16802,6 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._updatePlayheadText = function (time) {
         var text = Utils.formatTime(time, false);
         this._playheadText.setText(text);
-        this._peaks.emit('playhead.moved', this._playheadText.getAbsolutePosition().x, this._playheadText.width());
     };
     PlayheadLayer.prototype.getPlayheadOffset = function () {
         return this._playheadPixel - this._view.getFrameOffset();

package/src/components/line-group.js

@@ -705,7 +705,7 @@ define([
 
       if (currentSource) {
         if (currentSource.source.startTime > time) {
-          // We didn't find an active source and will not in the remainings sources
+          // We didn't find an active source and will not in the remaining sources
           if (previousSource) {
             this._cachedStartSourceForActive = previousSource.source;
           }

package/src/components/playhead-layer.js

@@ -196,7 +196,7 @@ define([
     // Create with default y, the real value is set in fitToView().
     this._playheadText = new Konva.Text({
       x: 13,
-      y: 3,
+      y: 10,
       text: '00:00:00',
       fontSize: 11,
       fontFamily: 'sans-serif',
@@ -226,15 +226,18 @@ define([
    */
 
   PlayheadLayer.prototype._syncPlayhead = function(time) {
-    if (this._time === time) {
-      return;
+    const pixelHasChanged = this._updatePlayheadPixel(time);
+    const timeHasChanged = this._time !== time;
+
+    if (timeHasChanged) {
+      this._updateActiveSegmentsAndSources(time);
+      this._updatePlayheadText(time);
     }
 
     this._time = time;
-    this._updatePlayheadPixel(time);
-    this._updateActiveSegmentsAndSources(time);
-    this._updatePlayheadText(time);
-    this._playheadLayer.batchDraw();
+    if (pixelHasChanged || timeHasChanged) {
+      this._playheadLayer.batchDraw();
+    }
   };
 
   /**
@@ -249,8 +252,15 @@ define([
 
     this._playheadPixel = pixelIndex;
     const playheadX = this._playheadPixel - frameOffset;
+    const oldX = this._playheadGroup.getAttr('x');
+
+    const shouldUpdateX = oldX !== playheadX;
+
+    if (shouldUpdateX) {
+      this._playheadGroup.setAttr('x', playheadX);
+    }
 
-    this._playheadGroup.setAttr('x', playheadX);
+    return shouldUpdateX;
   };
 
   /**
@@ -328,11 +338,6 @@ define([
     var text = Utils.formatTime(time, false);
 
     this._playheadText.setText(text);
-    this._peaks.emit(
-      'playhead.moved',
-      this._playheadText.getAbsolutePosition().x,
-      this._playheadText.width()
-    );
   };
 
   /**