@checksub_team/peaks_timeline 1.4.53 → 1.5.1

package/package.json

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

package/peaks.js

@@ -15587,7 +15587,7 @@ module.exports = function (DefaultSegmentMarker, Utils, Konva) {
             y: options.y,
             width: options.width,
             height: options.height,
-            text: Utils.removeLineBreaks(options.segment.labelText),
+            text: '#' + options.segment.relativeId + ' ' + Utils.removeLineBreaks(options.segment.labelText),
             textAlign: 'left',
             verticalAlign: 'middle',
             wrap: 'none',
@@ -15983,51 +15983,7 @@ module.exports = function (Utils) {
         var self = this;
         self._peaks = peaks;
         self._currentTime = 0;
-        self._isPlaying = false;
-        self._speed = 1;
-        self._segmentPlayInterval = null;
     }
-    Player.prototype.setSpeed = function (newSpeed) {
-        this._speed = newSpeed;
-    };
-    Player.prototype.destroy = function () {
-        if (this._segmentPlayInterval !== null) {
-            clearInterval(this._segmentPlayInterval);
-            this._segmentPlayInterval = null;
-        }
-        if (this._playInterval !== null) {
-            clearInterval(this._playInterval);
-            this._playInterval = null;
-        }
-    };
-    Player.prototype.play = function () {
-        if (!this._playInterval) {
-            var prevTime = performance.now();
-            var time;
-            var self = this;
-            this._isPlaying = true;
-            this._peaks.overrideInteractions(true, false);
-            this._playInterval = setInterval(function () {
-                time = performance.now();
-                self._currentTime += (time - prevTime) / 1000 * self._speed;
-                prevTime = time;
-                self._peaks.emit('timeline.update', self._currentTime);
-            }, 20);
-            this._peaks.emit('timeline.play', this._currentTime);
-        }
-    };
-    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);
-        }
-    };
-    Player.prototype.isPlaying = function () {
-        return this._isPlaying;
-    };
     Player.prototype.getCurrentTime = function () {
         return this._currentTime;
     };
@@ -16037,6 +15993,12 @@ module.exports = function (Utils) {
         }
         this._peaks.emit('timeline.seek', this._currentTime);
     };
+    Player.prototype.update = function (time) {
+        if (!this._seek(time)) {
+            return;
+        }
+        this._peaks.emit('timeline.update', this._currentTime);
+    };
     Player.prototype._seek = function (time) {
         if (!Utils.isValidTime(time)) {
             this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
@@ -16045,24 +16007,6 @@ module.exports = function (Utils) {
         this._currentTime = Math.max(0, time);
         return true;
     };
-    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;
-        self.seek(segment.startTime);
-        self.play();
-        self._segmentPlayInterval = setInterval(function () {
-            if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
-                clearInterval(self._segmentPlayInterval);
-                self._segmentPlayInterval = null;
-                self.pause();
-            }
-        }, 10);
-    };
     return Player;
 }(_dereq_('./utils'));
 },{"./utils":111}],99:[function(_dereq_,module,exports){
@@ -16074,7 +16018,6 @@ module.exports = function (Utils, Konva) {
         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;
@@ -16086,7 +16029,6 @@ module.exports = function (Utils, Konva) {
             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));
     }
@@ -16111,21 +16053,6 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype.listening = function (bool) {
         this._playheadLayer.listening(bool);
     };
-    PlayheadLayer.prototype.zoomLevelChanged = function () {
-        var pixelsPerSecond = this._view.timeToPixels(1);
-        var time;
-        this._useAnimation = pixelsPerSecond >= 5;
-        if (this._useAnimation) {
-            if (this._peaks.player.isPlaying() && !this._playheadLineAnimation) {
-                this._start();
-            }
-        } else {
-            if (this._playheadLineAnimation) {
-                time = this._peaks.player.getCurrentTime();
-                this.stop(time);
-            }
-        }
-    };
     PlayheadLayer.prototype.fitToView = function () {
         var height = this._view.getHeight();
         this._playheadLine.points([
@@ -16208,9 +16135,6 @@ module.exports = function (Utils, Konva) {
     };
     PlayheadLayer.prototype.updatePlayheadTime = function (time) {
         this._syncPlayhead(time);
-        if (this._peaks.player.isPlaying()) {
-            this._start();
-        }
     };
     PlayheadLayer.prototype._syncPlayhead = function (time) {
         var pixelIndex = this._view.timeToPixels(time);
@@ -16244,33 +16168,6 @@ module.exports = function (Utils, Konva) {
         this._time = time;
         this._playheadLayer.draw();
     };
-    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);
-    };
     PlayheadLayer.prototype.getPlayheadOffset = function () {
         return this._playheadPixel - this._view.getFrameOffset();
     };
@@ -16784,6 +16681,7 @@ module.exports = function (Utils) {
         this._line = opts.line;
         this._indicators = opts.indicators;
         this._minSize = peaks.options.minSegmentSize;
+        this._relativeId = 0;
         if (shouldNotifyUpdate) {
             peaks.emit('segments.updated', [this]);
         }
@@ -16878,6 +16776,15 @@ module.exports = function (Utils) {
             get: function () {
                 return this._minSize;
             }
+        },
+        relativeId: {
+            enumerable: true,
+            get: function () {
+                return this._relativeId;
+            },
+            set: function (newId) {
+                this._relativeId = newId;
+            }
         }
     });
     Segment.prototype.update = function (options) {
@@ -19284,8 +19191,18 @@ module.exports = function (Colors, Segment, Utils) {
         segments.forEach(function (segment) {
             self._addSegment(segment);
         });
+        this.refreshRelativeIds();
         this._peaks.emit('segments.add', segments);
     };
+    TimelineSegments.prototype.refreshRelativeIds = function () {
+        var idsByPosition = {};
+        this._segments.sort(function (a, b) {
+            return a.startTime - b.startTime;
+        }).forEach(function (segment) {
+            segment.relativeId = (idsByPosition[segment.line] || 0) + 1;
+            idsByPosition[segment.line] = segment.relativeId;
+        });
+    };
     TimelineSegments.prototype._findSegment = function (predicate) {
         var indexes = [];
         for (var i = 0, length = this._segments.length; i < length; i++) {
@@ -19308,6 +19225,7 @@ module.exports = function (Colors, Segment, Utils) {
     TimelineSegments.prototype._removeSegments = function (predicate) {
         var indexes = this._findSegment(predicate);
         var removed = this._removeIndexes(indexes);
+        this.refreshRelativeIds();
         this._peaks.emit('segments.remove', removed);
         return removed;
     };
@@ -19905,7 +19823,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this.setFrameOffset(apexPixel - playheadOffsetPixels);
         this.updateTimeline(this._frameOffset, undefined, undefined, true);
         this._sourcesLayer.rescale(true);
-        this._playheadLayer.zoomLevelChanged();
         this._playheadLayer.updatePlayheadTime(currentTime);
         this._peaks.emit('zoom.update', newScale, prevScale);
         return true;

package/src/marker-factories.js

@@ -71,7 +71,10 @@ define([
       y:             options.y,
       width:         options.width,
       height:        options.height,
-      text:          Utils.removeLineBreaks(options.segment.labelText),
+      text:          '#'
+                      + options.segment.relativeId
+                      + ' '
+                      + Utils.removeLineBreaks(options.segment.labelText),
       textAlign:     'left',
       verticalAlign: 'middle',
       wrap:          'none',

package/src/player.js

@@ -26,91 +26,8 @@ define([
 
     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 = performance.now();
-      var time;
-      var self = this;
-
-      this._isPlaying = true;
-
-      this._peaks.overrideInteractions(true, false);
-
-      this._playInterval = setInterval(function() {
-        time = performance.now();
-        self._currentTime += ((time - prevTime) / 1000) * self._speed;
-        prevTime = time;
-        self._peaks.emit('timeline.update', self._currentTime);
-      }, 20);
-
-      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.
    *
@@ -135,49 +52,26 @@ define([
     this._peaks.emit('timeline.seek', this._currentTime);
   };
 
-  Player.prototype._seek = function(time) {
-    if (!Utils.isValidTime(time)) {
-      this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
-      return false;
-    }
-
-    this._currentTime = Math.max(0, time);
-    return true;
-  };
-
   /**
-   * Plays the given segment.
-   *
-   * @param {Segment} segment The segment denoting the time region to play.
+   * Update the time (variation of seek, with a different event).
    */
 
-  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');
+  Player.prototype.update = function(time) {
+    if (!this._seek(time)) {
       return;
     }
 
-    clearInterval(self._segmentPlayInterval);
-    self._segmentPlayInterval = null;
-
-    // Set time to segment start time
-    self.seek(segment.startTime);
+    this._peaks.emit('timeline.update', this._currentTime);
+  };
 
-    // Start playing
-    self.play();
+  Player.prototype._seek = function(time) {
+    if (!Utils.isValidTime(time)) {
+      this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
+      return false;
+    }
 
-    self._segmentPlayInterval = setInterval(function() {
-      if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
-        clearInterval(self._segmentPlayInterval);
-        self._segmentPlayInterval = null;
-        self.pause();
-        // self.seek(segment.endTime);
-      }
-    }, 10);
+    this._currentTime = Math.max(0, time);
+    return true;
   };
 
   return Player;

package/src/playhead-layer.js

@@ -31,7 +31,6 @@ define([
     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;
@@ -49,8 +48,6 @@ define([
 
     this.fitToView();
 
-    this.zoomLevelChanged();
-
     this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
     this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
   }
@@ -89,38 +86,6 @@ define([
     this._playheadLayer.listening(bool);
   };
 
-  /**
-   * 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.
@@ -252,10 +217,6 @@ define([
 
   PlayheadLayer.prototype.updatePlayheadTime = function(time) {
     this._syncPlayhead(time);
-
-    if (this._peaks.player.isPlaying()) {
-      this._start();
-    }
   };
 
   /**
@@ -313,48 +274,6 @@ define([
     this._playheadLayer.draw();
   };
 
-  /**
-   * 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.

package/src/segment.js

@@ -131,6 +131,7 @@ define([
     this._line            = opts.line;
     this._indicators      = opts.indicators;
     this._minSize         = peaks.options.minSegmentSize;
+    this._relativeId      = 0;
 
     if (shouldNotifyUpdate) {
       peaks.emit('segments.updated', [this]);
@@ -229,6 +230,15 @@ define([
       get: function() {
         return this._minSize;
       }
+    },
+    relativeId: {
+      enumerable: true,
+      get: function() {
+        return this._relativeId;
+      },
+      set: function(newId) {
+        this._relativeId = newId;
+      }
     }
   });
 

package/src/timeline-segments.js

@@ -251,9 +251,28 @@ define([
       self._addSegment(segment);
     });
 
+    this.refreshRelativeIds();
+
     this._peaks.emit('segments.add', segments);
   };
 
+  /**
+   * Set relative ids for all segments.
+   *
+   * @private
+   */
+
+  TimelineSegments.prototype.refreshRelativeIds = function() {
+    var idsByPosition = {};
+
+    this._segments.sort(function(a, b) {
+      return a.startTime - b.startTime;
+    }).forEach(function(segment) {
+      segment.relativeId = (idsByPosition[segment.line] || 0) + 1;
+      idsByPosition[segment.line] = segment.relativeId;
+    });
+  };
+
   /**
    * Returns the indexes of segments that match the given predicate.
    *
@@ -317,6 +336,8 @@ define([
 
     var removed = this._removeIndexes(indexes);
 
+    this.refreshRelativeIds();
+
     this._peaks.emit('segments.remove', removed);
 
     return removed;

package/src/timeline-zoomview.js

@@ -608,8 +608,6 @@ define([
 
     this._sourcesLayer.rescale(true);
 
-    this._playheadLayer.zoomLevelChanged();
-
     // Update the playhead position after zooming.
     this._playheadLayer.updatePlayheadTime(currentTime);