@checksub_team/peaks_timeline 1.4.34 → 1.4.37

package/src/playhead-layer.js

@@ -1,423 +1,423 @@
-/**
- * @file
- *
- * Defines the {@link PlayheadLayer} class.
- *
- * @module playhead-layer
- */
-
-define([
-  './utils',
-  'konva'
-  ], function(Utils, Konva) {
-  'use strict';
-
-  var HANDLE_RADIUS = 10;
-
-  /**
-   * Creates a Konva.Layer that displays a playhead marker.
-   *
-   * @class
-   * @alias PlayheadLayer
-   *
-   * @param {Peaks} peaks
-   * @param {WaveformOverview|WaveformZoomView} view
-   * @param {Boolean} showTime If <code>true</code> The playback time position
-   *   is shown next to the playhead.
-   */
-
-  function PlayheadLayer(peaks, view, lines, showTime) {
-    this._peaks = peaks;
-    this._view = view;
-    this._lines = lines;
-    this._playheadPixel = 0;
-    this._playheadLineAnimation = null;
-    this._playheadVisible = false;
-    this._playheadColor = peaks.options.playheadColor;
-    this._playheadTextColor = peaks.options.playheadTextColor;
-
-    this._playheadLayer = new Konva.Layer();
-
-    this._activeSegments = {};
-    this._lastActiveSegments = {};
-
-    this._createPlayhead(this._playheadColor);
-
-    if (showTime) {
-      this._createPlayheadText(this._playheadTextColor);
-    }
-
-    this.fitToView();
-
-    this.zoomLevelChanged();
-
-    this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
-    this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
-  }
-
-  PlayheadLayer.prototype._onSegmentsRemoveAll = function() {
-    this._activeSegments = {};
-    this._lastActiveSegments = {};
-  };
-
-  PlayheadLayer.prototype._onSegmentsRemove = function(segments) {
-    if (this._activeSegments || this._lastActiveSegments) {
-      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];
-          }
-        }
-      }
-    }
-  };
-
-  /**
-   * Adds the layer to the given {Konva.Stage}.
-   *
-   * @param {Konva.Stage} stage
-   */
-
-  PlayheadLayer.prototype.addToStage = function(stage) {
-    stage.add(this._playheadLayer);
-  };
-
-  /**
-   * Decides whether to use an animation to update the playhead position.
-   *
-   * If the zoom level is such that the number of pixels per second of audio is
-   * low, we can use timeupdate events from the HTMLMediaElement to
-   * set the playhead position. Otherwise, we use an animation to update the
-   * playhead position more smoothly. The animation is CPU intensive, so we
-   * avoid using it where possible.
-   */
-
-  PlayheadLayer.prototype.zoomLevelChanged = function() {
-    var pixelsPerSecond = this._view.timeToPixels(1.0);
-    var time;
-
-    this._useAnimation = pixelsPerSecond >= 5;
-
-    if (this._useAnimation) {
-      if (this._peaks.player.isPlaying() && !this._playheadLineAnimation) {
-        // Start the animation
-        this._start();
-      }
-    }
-    else {
-      if (this._playheadLineAnimation) {
-        // Stop the animation
-        time = this._peaks.player.getCurrentTime();
-
-        this.stop(time);
-      }
-    }
-  };
-
-  /**
-   * Resizes the playhead UI objects to fit the available space in the
-   * view.
-   */
-
-  PlayheadLayer.prototype.fitToView = function() {
-    var height = this._view.getHeight();
-
-    this._playheadLine.points([0.5, 0, 0.5, height]);
-
-    // if (this._playheadText) {
-    //   this._playheadText.y(30);
-    // }
-  };
-
-  /**
-   * Creates the playhead UI objects.
-   *
-   * @private
-   * @param {String} color
-   */
-
-  PlayheadLayer.prototype._createPlayhead = function(color) {
-    // Create with default points, the real values are set in fitToView().
-    this._playheadLine = new Konva.Line({
-      stroke:      color,
-      strokeWidth: 3
-    });
-
-    this._playheadHandle = new Konva.RegularPolygon({
-      x:           0.5,
-      y:           HANDLE_RADIUS / 2,
-      sides:       3,
-      fill:        color,
-      strokeWidth: 0,
-      radius:      HANDLE_RADIUS,
-      rotation:    180
-    });
-
-    var self = this;
-
-    this._playheadGroup = new Konva.Group({
-      x: 0,
-      y: 0,
-      draggable: true,
-      dragBoundFunc: function(pos) {
-        var time = Math.max(
-          0,
-          self._view.pixelsToTime(
-            pos.x + self._view.getFrameOffset()
-          )
-        );
-
-        var autoPos = self._view.updateWithAutoScroll(
-          this,
-          function() {
-            time = Math.max(
-              0,
-              self._view.pixelsToTime(
-                self._view.getPointerPosition().x + self._view.getFrameOffset()
-              )
-            );
-
-            self._peaks.player.seek(time);
-          },
-          function() {
-            self._peaks.player.seek(time);
-          }
-        );
-
-        return {
-          x: autoPos.x,
-          y: autoPos.y
-        };
-      }
-    });
-
-    this._playheadGroup.on('dragstart', this._onPlayheadDragStart.bind(this));
-    this._playheadGroup.on('dragend', this._onPlayheadDragEnd.bind(this));
-
-    this._playheadGroup.add(this._playheadHandle);
-    this._playheadGroup.add(this._playheadLine);
-    this._playheadLayer.add(this._playheadGroup);
-  };
-
-  PlayheadLayer.prototype._onPlayheadDragStart = function() {
-    this._view.enableAutoScroll(false);
-    this._dragging = true;
-    this._scrollInterval = null;
-  };
-
-  PlayheadLayer.prototype._onPlayheadDragEnd = function() {
-    this._view.enableAutoScroll(true);
-    this._dragging = false;
-    if (this._playheadGroup._scrollingInterval) {
-      clearInterval(this._playheadGroup._scrollingInterval);
-      this._playheadGroup._scrollingInterval = null;
-    }
-  };
-
-  PlayheadLayer.prototype._createPlayheadText = function(color) {
-    // Create with default y, the real value is set in fitToView().
-    this._playheadText = new Konva.Text({
-      x: 13,
-      y: 3,
-      text: '00:00:00',
-      fontSize: 11,
-      fontFamily: 'sans-serif',
-      fill: color,
-      align: 'right',
-      listening: false
-    });
-
-    this._playheadGroup.add(this._playheadText);
-  };
-
-  /**
-   * Updates the playhead position.
-   *
-   * @param {Number} time Current playhead position, in seconds.
-   */
-
-  PlayheadLayer.prototype.updatePlayheadTime = function(time) {
-    this._syncPlayhead(time);
-
-    if (this._peaks.player.isPlaying()) {
-      this._start();
-    }
-  };
-
-  /**
-   * Updates the playhead position.
-   *
-   * @private
-   * @param {Number} time Current playhead position, in seconds.
-   */
-
-  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];
-              }
-            }
-          }
-        }
-      }
-
-      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'
-        );
-      }
-    }
-  };
-
-  /**
-   * Starts a playhead animation in sync with the media playback.
-   *
-   * @private
-   */
-
-  PlayheadLayer.prototype._start = function() {
-    var self = this;
-
-    if (self._playheadLineAnimation) {
-      self._playheadLineAnimation.stop();
-      self._playheadLineAnimation = null;
-    }
-
-    if (!self._useAnimation) {
-      return;
-    }
-
-    var lastPlayheadPosition = null;
-
-    self._playheadLineAnimation = new Konva.Animation(function() {
-      var time = self._peaks.player.getCurrentTime();
-      var playheadPosition = self._view.timeToPixels(time);
-
-      if (playheadPosition !== lastPlayheadPosition) {
-        self._syncPlayhead(time);
-        lastPlayheadPosition = playheadPosition;
-      }
-    }, self._playheadLayer);
-
-    self._playheadLineAnimation.start();
-  };
-
-  PlayheadLayer.prototype.stop = function(time) {
-    if (this._playheadLineAnimation) {
-      this._playheadLineAnimation.stop();
-      this._playheadLineAnimation = null;
-    }
-
-    this._syncPlayhead(time);
-  };
-
-  /**
-   * Returns the position of the playhead marker, in pixels relative to the
-   * left hand side of the waveform view.
-   *
-   * @return {Number}
-   */
-
-  PlayheadLayer.prototype.getPlayheadOffset = function() {
-    return this._playheadPixel - this._view.getFrameOffset();
-  };
-
-  PlayheadLayer.prototype.getPlayheadPixel = function() {
-    return this._playheadPixel;
-  };
-
-  PlayheadLayer.prototype.showPlayheadTime = function(show) {
-    var updated = false;
-
-    if (show) {
-      if (!this._playheadText) {
-        // Create it
-        this._createPlayheadText(this._playheadTextColor);
-        updated = true;
-      }
-    }
-    else {
-      if (this._playheadText) {
-        this._playheadText.remove();
-        this._playheadText.destroy();
-        this._playheadText = null;
-        updated = true;
-      }
-    }
-
-    if (updated) {
-      this._playheadLayer.draw();
-    }
-  };
-
-  return PlayheadLayer;
-});
+/**
+ * @file
+ *
+ * Defines the {@link PlayheadLayer} class.
+ *
+ * @module playhead-layer
+ */
+
+define([
+  './utils',
+  'konva'
+  ], function(Utils, Konva) {
+  'use strict';
+
+  var HANDLE_RADIUS = 10;
+
+  /**
+   * Creates a Konva.Layer that displays a playhead marker.
+   *
+   * @class
+   * @alias PlayheadLayer
+   *
+   * @param {Peaks} peaks
+   * @param {WaveformOverview|WaveformZoomView} view
+   * @param {Boolean} showTime If <code>true</code> The playback time position
+   *   is shown next to the playhead.
+   */
+
+  function PlayheadLayer(peaks, view, lines, showTime) {
+    this._peaks = peaks;
+    this._view = view;
+    this._lines = lines;
+    this._playheadPixel = 0;
+    this._playheadLineAnimation = null;
+    this._playheadVisible = false;
+    this._playheadColor = peaks.options.playheadColor;
+    this._playheadTextColor = peaks.options.playheadTextColor;
+
+    this._playheadLayer = new Konva.Layer();
+
+    this._activeSegments = {};
+    this._lastActiveSegments = {};
+
+    this._createPlayhead(this._playheadColor);
+
+    if (showTime) {
+      this._createPlayheadText(this._playheadTextColor);
+    }
+
+    this.fitToView();
+
+    this.zoomLevelChanged();
+
+    this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
+    this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
+  }
+
+  PlayheadLayer.prototype._onSegmentsRemoveAll = function() {
+    this._activeSegments = {};
+    this._lastActiveSegments = {};
+  };
+
+  PlayheadLayer.prototype._onSegmentsRemove = function(segments) {
+    if (this._activeSegments || this._lastActiveSegments) {
+      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];
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * Adds the layer to the given {Konva.Stage}.
+   *
+   * @param {Konva.Stage} stage
+   */
+
+  PlayheadLayer.prototype.addToStage = function(stage) {
+    stage.add(this._playheadLayer);
+  };
+
+  /**
+   * Decides whether to use an animation to update the playhead position.
+   *
+   * If the zoom level is such that the number of pixels per second of audio is
+   * low, we can use timeupdate events from the HTMLMediaElement to
+   * set the playhead position. Otherwise, we use an animation to update the
+   * playhead position more smoothly. The animation is CPU intensive, so we
+   * avoid using it where possible.
+   */
+
+  PlayheadLayer.prototype.zoomLevelChanged = function() {
+    var pixelsPerSecond = this._view.timeToPixels(1.0);
+    var time;
+
+    this._useAnimation = pixelsPerSecond >= 5;
+
+    if (this._useAnimation) {
+      if (this._peaks.player.isPlaying() && !this._playheadLineAnimation) {
+        // Start the animation
+        this._start();
+      }
+    }
+    else {
+      if (this._playheadLineAnimation) {
+        // Stop the animation
+        time = this._peaks.player.getCurrentTime();
+
+        this.stop(time);
+      }
+    }
+  };
+
+  /**
+   * Resizes the playhead UI objects to fit the available space in the
+   * view.
+   */
+
+  PlayheadLayer.prototype.fitToView = function() {
+    var height = this._view.getHeight();
+
+    this._playheadLine.points([0.5, 0, 0.5, height]);
+
+    // if (this._playheadText) {
+    //   this._playheadText.y(30);
+    // }
+  };
+
+  /**
+   * Creates the playhead UI objects.
+   *
+   * @private
+   * @param {String} color
+   */
+
+  PlayheadLayer.prototype._createPlayhead = function(color) {
+    // Create with default points, the real values are set in fitToView().
+    this._playheadLine = new Konva.Line({
+      stroke:      color,
+      strokeWidth: 3
+    });
+
+    this._playheadHandle = new Konva.RegularPolygon({
+      x:           0.5,
+      y:           HANDLE_RADIUS / 2,
+      sides:       3,
+      fill:        color,
+      strokeWidth: 0,
+      radius:      HANDLE_RADIUS,
+      rotation:    180
+    });
+
+    var self = this;
+
+    this._playheadGroup = new Konva.Group({
+      x: 0,
+      y: 0,
+      draggable: true,
+      dragBoundFunc: function(pos) {
+        var time = Math.max(
+          0,
+          self._view.pixelsToTime(
+            pos.x + self._view.getFrameOffset()
+          )
+        );
+
+        var autoPos = self._view.updateWithAutoScroll(
+          this,
+          function() {
+            time = Math.max(
+              0,
+              self._view.pixelsToTime(
+                self._view.getPointerPosition().x + self._view.getFrameOffset()
+              )
+            );
+
+            self._peaks.player.seek(time);
+          },
+          function() {
+            self._peaks.player.seek(time);
+          }
+        );
+
+        return {
+          x: autoPos.x,
+          y: autoPos.y
+        };
+      }
+    });
+
+    this._playheadGroup.on('dragstart', this._onPlayheadDragStart.bind(this));
+    this._playheadGroup.on('dragend', this._onPlayheadDragEnd.bind(this));
+
+    this._playheadGroup.add(this._playheadHandle);
+    this._playheadGroup.add(this._playheadLine);
+    this._playheadLayer.add(this._playheadGroup);
+  };
+
+  PlayheadLayer.prototype._onPlayheadDragStart = function() {
+    this._view.enableAutoScroll(false);
+    this._dragging = true;
+    this._scrollInterval = null;
+  };
+
+  PlayheadLayer.prototype._onPlayheadDragEnd = function() {
+    this._view.enableAutoScroll(true);
+    this._dragging = false;
+    if (this._playheadGroup._scrollingInterval) {
+      clearInterval(this._playheadGroup._scrollingInterval);
+      this._playheadGroup._scrollingInterval = null;
+    }
+  };
+
+  PlayheadLayer.prototype._createPlayheadText = function(color) {
+    // Create with default y, the real value is set in fitToView().
+    this._playheadText = new Konva.Text({
+      x: 13,
+      y: 3,
+      text: '00:00:00',
+      fontSize: 11,
+      fontFamily: 'sans-serif',
+      fill: color,
+      align: 'right',
+      listening: false
+    });
+
+    this._playheadGroup.add(this._playheadText);
+  };
+
+  /**
+   * Updates the playhead position.
+   *
+   * @param {Number} time Current playhead position, in seconds.
+   */
+
+  PlayheadLayer.prototype.updatePlayheadTime = function(time) {
+    this._syncPlayhead(time);
+
+    if (this._peaks.player.isPlaying()) {
+      this._start();
+    }
+  };
+
+  /**
+   * Updates the playhead position.
+   *
+   * @private
+   * @param {Number} time Current playhead position, in seconds.
+   */
+
+  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];
+              }
+            }
+          }
+        }
+      }
+
+      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'
+        );
+      }
+    }
+  };
+
+  /**
+   * Starts a playhead animation in sync with the media playback.
+   *
+   * @private
+   */
+
+  PlayheadLayer.prototype._start = function() {
+    var self = this;
+
+    if (self._playheadLineAnimation) {
+      self._playheadLineAnimation.stop();
+      self._playheadLineAnimation = null;
+    }
+
+    if (!self._useAnimation) {
+      return;
+    }
+
+    var lastPlayheadPosition = null;
+
+    self._playheadLineAnimation = new Konva.Animation(function() {
+      var time = self._peaks.player.getCurrentTime();
+      var playheadPosition = self._view.timeToPixels(time);
+
+      if (playheadPosition !== lastPlayheadPosition) {
+        self._syncPlayhead(time);
+        lastPlayheadPosition = playheadPosition;
+      }
+    }, self._playheadLayer);
+
+    self._playheadLineAnimation.start();
+  };
+
+  PlayheadLayer.prototype.stop = function(time) {
+    if (this._playheadLineAnimation) {
+      this._playheadLineAnimation.stop();
+      this._playheadLineAnimation = null;
+    }
+
+    this._syncPlayhead(time);
+  };
+
+  /**
+   * Returns the position of the playhead marker, in pixels relative to the
+   * left hand side of the waveform view.
+   *
+   * @return {Number}
+   */
+
+  PlayheadLayer.prototype.getPlayheadOffset = function() {
+    return this._playheadPixel - this._view.getFrameOffset();
+  };
+
+  PlayheadLayer.prototype.getPlayheadPixel = function() {
+    return this._playheadPixel;
+  };
+
+  PlayheadLayer.prototype.showPlayheadTime = function(show) {
+    var updated = false;
+
+    if (show) {
+      if (!this._playheadText) {
+        // Create it
+        this._createPlayheadText(this._playheadTextColor);
+        updated = true;
+      }
+    }
+    else {
+      if (this._playheadText) {
+        this._playheadText.remove();
+        this._playheadText.destroy();
+        this._playheadText = null;
+        updated = true;
+      }
+    }
+
+    if (updated) {
+      this._playheadLayer.draw();
+    }
+  };
+
+  return PlayheadLayer;
+});