@checksub_team/peaks_timeline 1.4.17

package/src/player.js

@@ -0,0 +1,178 @@
+/**
+ * @file
+ *
+ * Defines the {@link Player} class.
+ *
+ * @module player
+ */
+
+define([
+  './utils'
+], function(Utils) {
+  'use strict';
+
+  /**
+   * A wrapper for interfacing with the HTML5 media element API.
+   * Initializes the player for a given media element.
+   *
+   * @class
+   * @alias Player
+   *
+   * @param {Peaks} peaks The parent {@link Peaks} object.
+   */
+
+  function Player(peaks) {
+    var self = this;
+
+    self._peaks = peaks;
+    self._currentTime = 0;
+    self._isPlaying = false;
+
+    self._speed = 1;
+
+    self._segmentPlayInterval = null;
+  }
+
+  /**
+   * Set the playing speed.
+   *
+   * @param {Number} newSpeed The new speed, 1.0 is the normal (and default) speed.
+   */
+
+  Player.prototype.setSpeed = function(newSpeed) {
+    this._speed = newSpeed;
+  };
+
+  /**
+   * Cleans up the player object, removing all event listeners from the
+   * associated media element.
+   */
+
+  Player.prototype.destroy = function() {
+    if (this._segmentPlayInterval !== null) {
+      clearInterval(this._segmentPlayInterval);
+      this._segmentPlayInterval = null;
+    }
+
+    if (this._playInterval !== null) {
+      clearInterval(this._playInterval);
+      this._playInterval = null;
+    }
+  };
+
+  /**
+   * Starts playback.
+   */
+
+  Player.prototype.play = function() {
+    if (!this._playInterval) {
+      var prevTime = Date.now();
+      var time;
+      var self = this;
+
+      this._isPlaying = true;
+
+      this._peaks.overrideInteractions(true, false);
+
+      this._playInterval = setInterval(function() {
+        time = Date.now();
+        self._currentTime += ((time - prevTime) / 1000) * self._speed;
+        prevTime = time;
+        self._peaks.emit('timeline.update', self._currentTime);
+      }, 10);
+
+      this._peaks.emit('timeline.play', this._currentTime);
+    }
+  };
+
+  /**
+   * Pauses playback.
+   */
+
+  Player.prototype.pause = function() {
+    if (this._playInterval) {
+      this._isPlaying = false;
+
+      clearInterval(this._playInterval);
+      this._playInterval = null;
+
+      this._peaks.overrideInteractions(false);
+
+      this._peaks.emit('timeline.pause', this._currentTime);
+    }
+  };
+
+  /**
+   * @returns {Boolean} <code>true</code> if playing, <code>false</code>
+   * otherwise.
+   */
+
+  Player.prototype.isPlaying = function() {
+    return this._isPlaying;
+  };
+
+  /**
+   * Returns the current playback time position, in seconds.
+   *
+   * @returns {Number}
+   */
+
+  Player.prototype.getCurrentTime = function() {
+    return this._currentTime;
+  };
+
+  /**
+   * Seeks to a given time position within the media.
+   *
+   * @param {Number} time The time position, in seconds.
+   */
+
+  Player.prototype.seek = function(time) {
+    if (!Utils.isValidTime(time)) {
+      this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
+      return;
+    }
+
+    this._currentTime = Math.max(0, time);
+
+    this._peaks.emit('timeline.seek', this._currentTime);
+    this._peaks.emit('timeline.update', this._currentTime);
+  };
+
+  /**
+   * Plays the given segment.
+   *
+   * @param {Segment} segment The segment denoting the time region to play.
+   */
+
+  Player.prototype.playSegment = function(segment) {
+    var self = this;
+
+    if (!segment ||
+        !Utils.isValidTime(segment.startTime) ||
+        !Utils.isValidTime(segment.endTime)) {
+      self._peaks.logger('peaks.player.playSegment(): parameter must be a segment object');
+      return;
+    }
+
+    clearInterval(self._segmentPlayInterval);
+    self._segmentPlayInterval = null;
+
+    // Set time to segment start time
+    self.seek(segment.startTime);
+
+    // Start playing
+    self.play();
+
+    self._segmentPlayInterval = setInterval(function() {
+      if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
+        clearInterval(self._segmentPlayInterval);
+        self._segmentPlayInterval = null;
+        self.pause();
+        // self.seek(segment.endTime);
+      }
+    }, 10);
+  };
+
+  return Player;
+});

package/src/playhead-layer.js

@@ -0,0 +1,413 @@
+/**
+ * @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, segmentsGroup, showTime) {
+    this._peaks = peaks;
+    this._view = view;
+    this._segmentsGroup = segmentsGroup;
+    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._activeSegment = null;
+    this._lastActiveSegmentId = null;
+
+    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._activeSegment = null;
+    this._lastActiveSegmentId = null;
+  };
+
+  PlayheadLayer.prototype._onSegmentsRemove = function(segments) {
+    if (this._activeSegment || this._lastActiveSegmentId) {
+      var activeSegmentId = this._activeSegment ? this._activeSegment.id : null;
+      var lastActiveSegmentId = this._lastActiveSegmentId ? this._lastActiveSegmentId.id : null;
+
+      for (var id in segments) {
+        if (Utils.objectHasProperty(segments, id)) {
+          if (segments[id].id === activeSegmentId) {
+            this._activeSegment = null;
+          }
+          if (segments[id].id === lastActiveSegmentId) {
+            this._lastActiveSegmentId = null;
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * 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 newActiveSegment = this._segmentsGroup.getActiveSegment(
+          this._view.pixelsToTime(playheadX + frameOffset),
+          null,
+          true
+        );
+
+        if (newActiveSegment !== this._activeSegment) {
+          if (this._activeSegment) {
+            this._peaks.emit('segments.exit', this._activeSegment);
+            this._activeSegment = null;
+          }
+          if (newActiveSegment) {
+            this._peaks.emit('segments.enter', newActiveSegment);
+            this._activeSegment = newActiveSegment;
+            this._lastActiveSegment = this._activeSegment;
+          }
+        }
+      }
+
+      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;
+});