@checksub_team/peaks_timeline 1.4.37 → 1.4.40

package/package.json

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

package/peaks.js

@@ -14564,7 +14564,7 @@ module.exports = function (Konva, Utils) {
             self.draw();
         });
         indicator.on('click', function (e) {
-            self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt.button);
+            self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt);
         });
         return indicator;
     };
@@ -15981,6 +15981,10 @@ module.exports = function (Utils, SourceGroup, Konva) {
                 cuttingPixel -= hoveredElement.x();
                 this._cuttingLine.visible(false);
                 this._peaks.emit('source.cut', hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
+                this._view.setHoveredElement(null);
+                this._updateCursorTime(mousePosition);
+                this._updateCuttingLine(mousePosition);
+                this._layer.draw();
             }
         }
     };
@@ -16238,9 +16242,9 @@ module.exports = function (Utils, Konva) {
         this._playheadVisible = false;
         this._playheadColor = peaks.options.playheadColor;
         this._playheadTextColor = peaks.options.playheadTextColor;
+        this._time = null;
         this._playheadLayer = new Konva.Layer();
         this._activeSegments = {};
-        this._lastActiveSegments = {};
         this._createPlayhead(this._playheadColor);
         if (showTime) {
             this._createPlayheadText(this._playheadTextColor);
@@ -16252,20 +16256,15 @@ module.exports = function (Utils, Konva) {
     }
     PlayheadLayer.prototype._onSegmentsRemoveAll = function () {
         this._activeSegments = {};
-        this._lastActiveSegments = {};
     };
     PlayheadLayer.prototype._onSegmentsRemove = function (segments) {
-        if (this._activeSegments || this._lastActiveSegments) {
+        if (this._activeSegments) {
             for (var id in segments) {
                 if (Utils.objectHasProperty(segments, id)) {
                     var activeSegmentId = this._activeSegments[segments[id].line] ? this._activeSegments[segments[id].line].id : null;
-                    var lastActiveSegmentId = this._lastActiveSegments[segments[id].line] ? this._lastActiveSegments[segments[id].line].id : null;
                     if (segments[id].id === activeSegmentId) {
                         delete this._activeSegments[segments[id].line];
                     }
-                    if (segments[id].id === lastActiveSegmentId) {
-                        delete this._lastActiveSegments[segments[id].line];
-                    }
                 }
             }
         }
@@ -16371,50 +16370,34 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._syncPlayhead = function (time) {
         var pixelIndex = this._view.timeToPixels(time);
         var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
-        var width = this._view.getWidth();
-        var isVisible = pixelIndex + HANDLE_RADIUS >= frameOffset && pixelIndex - HANDLE_RADIUS < frameOffset + width;
         this._playheadPixel = pixelIndex;
-        if (isVisible) {
-            var playheadX = this._playheadPixel - frameOffset;
-            if (!this._playheadVisible) {
-                this._playheadVisible = true;
-                this._playheadGroup.show();
-            }
-            var playheadPositionDiff = this._playheadGroup.x() - playheadX;
-            if (playheadPositionDiff) {
-                var segmentsGroup = this._lines.getSegmentsGroups();
-                for (var lineId in segmentsGroup) {
-                    if (Utils.objectHasProperty(segmentsGroup, lineId)) {
-                        var newActiveSegment = segmentsGroup[lineId].getActiveSegment(this._view.pixelsToTime(playheadX + frameOffset), null, true);
-                        if (newActiveSegment !== this._activeSegments[lineId]) {
-                            if (this._activeSegments[lineId]) {
-                                this._peaks.emit('segments.exit', this._activeSegments[lineId]);
-                                delete this._activeSegments[lineId];
-                            }
-                            if (newActiveSegment) {
-                                this._peaks.emit('segments.enter', newActiveSegment);
-                                this._activeSegments[lineId] = newActiveSegment;
-                                this._lastActiveSegments[lineId] = this._activeSegments[lineId];
-                            }
+        var playheadX = this._playheadPixel - frameOffset;
+        var segmentsGroup = this._lines.getSegmentsGroups();
+        this._playheadGroup.setAttr('x', playheadX);
+        if (this._time !== time) {
+            for (var lineId in segmentsGroup) {
+                if (Utils.objectHasProperty(segmentsGroup, lineId)) {
+                    var newActiveSegment = segmentsGroup[lineId].getActiveSegment(this._view.pixelsToTime(playheadX + frameOffset));
+                    if (newActiveSegment !== this._activeSegments[lineId]) {
+                        if (this._activeSegments[lineId]) {
+                            this._peaks.emit('segments.exit', this._activeSegments[lineId]);
+                            delete this._activeSegments[lineId];
+                        }
+                        if (newActiveSegment) {
+                            this._peaks.emit('segments.enter', newActiveSegment);
+                            this._activeSegments[lineId] = newActiveSegment;
                         }
                     }
                 }
             }
-            this._playheadGroup.setAttr('x', playheadX);
             if (this._playheadText) {
                 var text = Utils.formatTime(time, false);
                 this._playheadText.setText(text);
                 this._peaks.emit('playhead.moved', this._playheadText.getAbsolutePosition().x, this._playheadText.width());
             }
-            this._playheadLayer.draw();
-        } else {
-            if (this._playheadVisible) {
-                this._playheadVisible = false;
-                this._playheadGroup.hide();
-                this._playheadLayer.draw();
-                this._peaks.emit('playhead.hidden');
-            }
         }
+        this._time = time;
+        this._playheadLayer.draw();
     };
     PlayheadLayer.prototype._start = function () {
         var self = this;

package/src/line-indicator.js

@@ -144,7 +144,7 @@ define([
     });
 
     indicator.on('click', function(e) {
-      self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt.button);
+      self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt);
     });
 
     return indicator;

package/src/mode-layer.js

@@ -307,6 +307,13 @@ define([
           hoveredElement.getSource(),
           this._view.pixelsToTime(cuttingPixel)
         );
+
+        this._view.setHoveredElement(null);
+
+        this._updateCursorTime(mousePosition);
+        this._updateCuttingLine(mousePosition);
+
+        this._layer.draw();
       }
     }
   };

package/src/playhead-layer.js

@@ -35,11 +35,11 @@ define([
     this._playheadVisible = false;
     this._playheadColor = peaks.options.playheadColor;
     this._playheadTextColor = peaks.options.playheadTextColor;
+    this._time = null;
 
     this._playheadLayer = new Konva.Layer();
 
     this._activeSegments = {};
-    this._lastActiveSegments = {};
 
     this._createPlayhead(this._playheadColor);
 
@@ -57,26 +57,19 @@ define([
 
   PlayheadLayer.prototype._onSegmentsRemoveAll = function() {
     this._activeSegments = {};
-    this._lastActiveSegments = {};
   };
 
   PlayheadLayer.prototype._onSegmentsRemove = function(segments) {
-    if (this._activeSegments || this._lastActiveSegments) {
+    if (this._activeSegments) {
       for (var id in segments) {
         if (Utils.objectHasProperty(segments, id)) {
           var activeSegmentId = this._activeSegments[segments[id].line] ?
             this._activeSegments[segments[id].line].id :
             null;
-          var lastActiveSegmentId = this._lastActiveSegments[segments[id].line] ?
-            this._lastActiveSegments[segments[id].line].id :
-            null;
 
           if (segments[id].id === activeSegmentId) {
             delete this._activeSegments[segments[id].line];
           }
-          if (segments[id].id === lastActiveSegmentId) {
-            delete this._lastActiveSegments[segments[id].line];
-          }
         }
       }
     }
@@ -263,53 +256,35 @@ define([
 
   PlayheadLayer.prototype._syncPlayhead = function(time) {
     var pixelIndex = this._view.timeToPixels(time);
-
     var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
-    var width = this._view.getWidth();
-
-    var isVisible = (pixelIndex + HANDLE_RADIUS >= frameOffset) &&
-                    (pixelIndex - HANDLE_RADIUS <  frameOffset + width);
 
     this._playheadPixel = pixelIndex;
 
-    if (isVisible) {
-      var playheadX = this._playheadPixel - frameOffset;
+    var playheadX = this._playheadPixel - frameOffset;
+    var segmentsGroup = this._lines.getSegmentsGroups();
 
-      if (!this._playheadVisible) {
-        this._playheadVisible = true;
-        this._playheadGroup.show();
-      }
+    this._playheadGroup.setAttr('x', playheadX);
 
-      var playheadPositionDiff = this._playheadGroup.x() - playheadX;
+    if (this._time !== time) {
+      for (var lineId in segmentsGroup) {
+        if (Utils.objectHasProperty(segmentsGroup, lineId)) {
+          var newActiveSegment = segmentsGroup[lineId].getActiveSegment(
+            this._view.pixelsToTime(playheadX + frameOffset)
+          );
 
-      if (playheadPositionDiff) {
-        var segmentsGroup = this._lines.getSegmentsGroups();
-
-        for (var lineId in segmentsGroup) {
-          if (Utils.objectHasProperty(segmentsGroup, lineId)) {
-            var newActiveSegment = segmentsGroup[lineId].getActiveSegment(
-              this._view.pixelsToTime(playheadX + frameOffset),
-              null,
-              true
-            );
-
-            if (newActiveSegment !== this._activeSegments[lineId]) {
-              if (this._activeSegments[lineId]) {
-                this._peaks.emit('segments.exit', this._activeSegments[lineId]);
-                delete this._activeSegments[lineId];
-              }
-              if (newActiveSegment) {
-                this._peaks.emit('segments.enter', newActiveSegment);
-                this._activeSegments[lineId] = newActiveSegment;
-                this._lastActiveSegments[lineId] = this._activeSegments[lineId];
-              }
+          if (newActiveSegment !== this._activeSegments[lineId]) {
+            if (this._activeSegments[lineId]) {
+              this._peaks.emit('segments.exit', this._activeSegments[lineId]);
+              delete this._activeSegments[lineId];
+            }
+            if (newActiveSegment) {
+              this._peaks.emit('segments.enter', newActiveSegment);
+              this._activeSegments[lineId] = newActiveSegment;
             }
           }
         }
       }
 
-      this._playheadGroup.setAttr('x', playheadX);
-
       if (this._playheadText) {
         var text = Utils.formatTime(time, false);
 
@@ -321,21 +296,10 @@ define([
           this._playheadText.width()
         );
       }
-
-      this._playheadLayer.draw();
     }
-    else {
-      if (this._playheadVisible) {
-        this._playheadVisible = false;
-        this._playheadGroup.hide();
-
-        this._playheadLayer.draw();
 
-        this._peaks.emit(
-          'playhead.hidden'
-        );
-      }
-    }
+    this._time = time;
+    this._playheadLayer.draw();
   };
 
   /**