@checksub_team/peaks_timeline 2.0.1 → 2.1.0-alpha.0

package/package.json

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

package/peaks.js

@@ -14816,6 +14816,7 @@ module.exports = function (SourceGroup, Utils, Konva) {
         this._position = null;
         this._firstSourceId = null;
         this._sources = {};
+        this._cachedStartSourceForActive = null;
         this._sourcesGroup = {};
         this._wrapped = false;
         this._group = new Konva.Group({
@@ -14831,6 +14832,9 @@ module.exports = function (SourceGroup, Utils, Konva) {
         this._height = this._peaks.options.emptyLineHeight;
         this._unwrappedCount = 0;
     }
+    LineGroup.prototype.getSegmentsGroup = function () {
+        return this._segmentsGroup;
+    };
     LineGroup.prototype.getPosition = function () {
         return this._position;
     };
@@ -15285,6 +15289,44 @@ module.exports = function (SourceGroup, Utils, Konva) {
             };
         }
     };
+    LineGroup.prototype.getActiveSource = function (time) {
+        var activeSource = null;
+        var previousSource = null;
+        var currentSource = null;
+        if (this._cachedStartSourceForActive) {
+            if (this._cachedStartSourceForActive.startTime <= time) {
+                if (this._cachedStartSourceForActive.endTime > time) {
+                    return this._cachedStartSourceForActive;
+                } else {
+                    currentSource = this._sources[this._cachedStartSourceForActive.id];
+                }
+            }
+        }
+        do {
+            if (!currentSource) {
+                currentSource = this._sources[this._firstSourceId];
+            } else {
+                previousSource = currentSource;
+                currentSource = this._sources[currentSource.nextSourceId];
+            }
+            if (currentSource) {
+                if (currentSource.source.startTime > time) {
+                    if (previousSource) {
+                        this._cachedStartSourceForActive = previousSource.source;
+                    }
+                    break;
+                }
+                if (currentSource.source.startTime <= time && currentSource.source.endTime > time) {
+                    activeSource = currentSource.source;
+                    this._cachedStartSourceForActive = activeSource;
+                    break;
+                }
+            } else {
+                break;
+            }
+        } while (currentSource.nextSourceId);
+        return activeSource;
+    };
     LineGroup.prototype.updatePosition = function (pos) {
         this._line.position = pos;
         this._position = pos;
@@ -15337,6 +15379,9 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
         this._peaks.on('lineIndicator.drag', this._onIndicatorDrag.bind(this));
     }
+    LineGroups.prototype.getLineGroupsById = function () {
+        return this._lineGroupsById;
+    };
     LineGroups.prototype.fitToView = function () {
         this._lineIndicator.fitToView();
     };
@@ -16579,6 +16624,7 @@ module.exports = function (Utils, Konva) {
         this._time = null;
         this._playheadLayer = new Konva.Layer();
         this._activeSegments = {};
+        this._activeSources = {};
         this._createPlayhead(this._playheadColor);
         if (showTime) {
             this._createPlayheadText(this._playheadTextColor);
@@ -16691,36 +16737,65 @@ module.exports = function (Utils, Konva) {
         this._syncPlayhead(time);
     };
     PlayheadLayer.prototype._syncPlayhead = function (time) {
-        var pixelIndex = this._view.timeToPixels(time);
-        var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+        if (this._time === time) {
+            return;
+        }
+        this._time = time;
+        this._updatePlayheadPixel(time);
+        this._updateActiveSegmentsAndSources(time);
+        this._updatePlayheadText(time);
+        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;
-        var playheadX = this._playheadPixel - frameOffset;
-        var segmentsGroup = this._lines.getSegmentsGroups();
+        const playheadX = this._playheadPixel - frameOffset;
         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;
-                        }
-                    }
+    };
+    PlayheadLayer.prototype._updateActiveSegmentsAndSources = function (time) {
+        const lineGroups = this._lines.getLineGroupsById();
+        for (var lineId in lineGroups) {
+            if (Utils.objectHasProperty(lineGroups, lineId)) {
+                const lineGroup = lineGroups[lineId];
+                if (lineGroup.isSegmentsLine()) {
+                    this._updateActiveSegment(lineGroup.getSegmentsGroup(), lineId, time);
+                } else {
+                    this._updateActiveSource(lineGroup, lineId, time);
                 }
             }
-            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());
+        }
+    };
+    PlayheadLayer.prototype._updateActiveSegment = function (segmentsGroup, lineId, time) {
+        const newActiveSegment = segmentsGroup.getActiveSegment(time);
+        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._time = time;
-        this._playheadLayer.batchDraw();
+    };
+    PlayheadLayer.prototype._updateActiveSource = function (sourcesLineGroup, lineId, time) {
+        const newActiveSource = sourcesLineGroup.getActiveSource(time);
+        if (newActiveSource !== this._activeSources[lineId]) {
+            if (this._activeSources[lineId]) {
+                this._peaks.emit('sources.exit', this._activeSources[lineId]);
+                delete this._activeSources[lineId];
+            }
+            if (newActiveSource) {
+                this._peaks.emit('sources.enter', newActiveSource);
+                this._activeSources[lineId] = newActiveSource;
+            }
+        }
+    };
+    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();
@@ -17210,6 +17285,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._firstSegmentId = null;
         this._segments = {};
         this._lastSegmentId = null;
+        this._cachedStartSegmentForActive = null;
         this._segmentShapes = {};
         this._group = new Konva.Group();
         this._updatedSegments = [];
@@ -17253,27 +17329,40 @@ module.exports = function (SegmentShape, Utils, Konva) {
     };
     SegmentsGroup.prototype.getActiveSegment = function (time) {
         var activeSegment = null;
+        var previousSegment = null;
         var currentSegment = null;
-        var nextSegmentId = null;
+        if (this._cachedStartSegmentForActive) {
+            if (this._cachedStartSegmentForActive.startTime <= time) {
+                if (this._cachedStartSegmentForActive.endTime > time) {
+                    return this._cachedStartSegmentForActive;
+                } else {
+                    currentSegment = this._segments[this._cachedStartSegmentForActive.id];
+                }
+            }
+        }
         do {
             if (!currentSegment) {
                 currentSegment = this._segments[this._firstSegmentId];
             } else {
+                previousSegment = currentSegment;
                 currentSegment = this._segments[currentSegment.nextSegmentId];
             }
             if (currentSegment) {
                 if (currentSegment.segment.startTime > time) {
+                    if (previousSegment) {
+                        this._cachedStartSegmentForActive = previousSegment.segment;
+                    }
                     break;
                 }
                 if (currentSegment.segment.startTime <= time && currentSegment.segment.endTime > time) {
                     activeSegment = currentSegment.segment;
+                    this._cachedStartSegmentForActive = activeSegment;
                     break;
                 }
             } else {
                 break;
             }
-            nextSegmentId = currentSegment.nextSegmentId;
-        } while (nextSegmentId);
+        } while (currentSegment.nextSegmentId);
         return activeSegment;
     };
     SegmentsGroup.prototype.onSegmentsUpdate = function (segment) {
@@ -17752,6 +17841,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._selected = this._source.selected;
         this._hovered = false;
         this._isDragged = false;
+        this._destroyed = false;
         this._previewList = [];
         this._previewBuildQueue = new Set();
         this._markersGroup = this._createMarkers();
@@ -18336,6 +18426,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 options.dataUri = content;
             }
             waveformBuilder.init(options, function (err, originalWaveformData) {
+                if (self._destroyed) {
+                    return;
+                }
                 if (err) {
                     throw err;
                 }
@@ -19007,6 +19100,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             this._loader = null;
         }
         this._group.destroy();
+        this._destroyed = true;
     };
     SourceGroup.getHeights = function (source, peaks) {
         var unwrappedHeight = source.binaryHeight && source.previewHeight ? source.binaryHeight + source.previewHeight : peaks.options.lineHeight;
@@ -19466,6 +19560,9 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     SourcesLayer.prototype.getLineByPosition = function (pos) {
         return this._lineGroups.getLineByPosition(pos);
     };
+    SourcesLayer.prototype.getLineGroups = function () {
+        return this._lineGroups;
+    };
     return SourcesLayer;
 }(_dereq_('./source-group'), _dereq_('./line-groups'), _dereq_('./data-retriever'), _dereq_('./invoker'), _dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"./data-retriever":87,"./invoker":90,"./line-groups":92,"./source-group":102,"konva":43}],104:[function(_dereq_,module,exports){
@@ -22314,7 +22411,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._sourcesLayer.addToStage(self._stage);
         self._sourcesLayer.add(self._tempGroup);
         self._axis.addFrontToStage(self._stage);
-        self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer, self._options.showPlayheadTime);
+        self._playheadLayer = new PlayheadLayer(peaks, self, self._sourcesLayer.getLineGroups(), self._options.showPlayheadTime);
         self._playheadLayer.addToStage(self._stage);
         var time = self._peaks.player.getCurrentTime();
         self._syncPlayhead(time);

package/src/components/line-group.js

@@ -23,6 +23,8 @@ define([
     this._firstSourceId = null;
     this._sources = {};
 
+    this._cachedStartSourceForActive = null;
+
     this._sourcesGroup = {};
     this._wrapped = false;
 
@@ -41,6 +43,10 @@ define([
     this._unwrappedCount = 0;
   }
 
+  LineGroup.prototype.getSegmentsGroup = function() {
+    return this._segmentsGroup;
+  };
+
   LineGroup.prototype.getPosition = function() {
     return this._position;
   };
@@ -672,6 +678,54 @@ define([
     }
   };
 
+  LineGroup.prototype.getActiveSource = function(time) {
+    var activeSource = null;
+    var previousSource = null;
+    var currentSource = null;
+
+    if (this._cachedStartSourceForActive) {
+      if (this._cachedStartSourceForActive.startTime <= time) {
+        if (this._cachedStartSourceForActive.endTime > time) {
+          return this._cachedStartSourceForActive;
+        }
+        else {
+          currentSource = this._sources[this._cachedStartSourceForActive.id];
+        }
+      }
+    }
+
+    do {
+      if (!currentSource) {
+        currentSource = this._sources[this._firstSourceId];
+      }
+      else {
+        previousSource = currentSource;
+        currentSource = this._sources[currentSource.nextSourceId];
+      }
+
+      if (currentSource) {
+        if (currentSource.source.startTime > time) {
+          // We didn't find an active source and will not in the remainings sources
+          if (previousSource) {
+            this._cachedStartSourceForActive = previousSource.source;
+          }
+          break;
+        }
+
+        if (currentSource.source.startTime <= time && currentSource.source.endTime > time) {
+          activeSource = currentSource.source;
+          this._cachedStartSourceForActive = activeSource;
+          break;
+        }
+      }
+      else {
+        break;
+      }
+    } while (currentSource.nextSourceId);
+
+    return activeSource;
+  };
+
   LineGroup.prototype.updatePosition = function(pos) {
     this._line.position = pos;
     this._position = pos;

package/src/components/line-groups.js

@@ -65,6 +65,10 @@ define([
     this._peaks.on('lineIndicator.drag', this._onIndicatorDrag.bind(this));
   }
 
+  LineGroups.prototype.getLineGroupsById = function() {
+    return this._lineGroupsById;
+  };
+
   LineGroups.prototype.fitToView = function() {
     this._lineIndicator.fitToView();
   };

package/src/components/playhead-layer.js

@@ -39,6 +39,7 @@ define([
     this._playheadLayer = new Konva.Layer();
 
     this._activeSegments = {};
+    this._activeSources = {};
 
     this._createPlayhead(this._playheadColor);
 
@@ -225,51 +226,113 @@ define([
    */
 
   PlayheadLayer.prototype._syncPlayhead = function(time) {
-    var pixelIndex = this._view.timeToPixels(time);
-    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+    if (this._time === time) {
+      return;
+    }
 
-    this._playheadPixel = pixelIndex;
+    this._time = time;
+    this._updatePlayheadPixel(time);
+    this._updateActiveSegmentsAndSources(time);
+    this._updatePlayheadText(time);
+    this._playheadLayer.batchDraw();
+  };
 
-    var playheadX = this._playheadPixel - frameOffset;
-    var segmentsGroup = this._lines.getSegmentsGroups();
+  /**
+   * Update cached pixel values and position of the playhead group.
+   * @private
+   * @param {Number} time
+   * @returns {Number} playheadX localized to frame (without frameOffset)
+   */
+  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);
+  };
 
-    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;
-            }
-          }
+  /**
+   * Compute and emit sources/segments enter/exit events.
+   * @private
+   * @param {Number} time
+   */
+  PlayheadLayer.prototype._updateActiveSegmentsAndSources = function(time) {
+    const lineGroups = this._lines.getLineGroupsById();
+
+    for (var lineId in lineGroups) {
+      if (Utils.objectHasProperty(lineGroups, lineId)) {
+        const lineGroup = lineGroups[lineId];
+
+        if (lineGroup.isSegmentsLine()) {
+          this._updateActiveSegment(lineGroup.getSegmentsGroup(), lineId, time);
+        }
+        else {
+          this._updateActiveSource(lineGroup, lineId, time);
         }
       }
+    }
+  };
 
-      if (this._playheadText) {
-        var text = Utils.formatTime(time, false);
+  /**
+   * Compute and emit segment enter/exit events for a specific segment group.
+   * @private
+   * @param {SegmentsGroup} segmentsGroup
+   * @param {Number} lineId
+   * @param {Number} time
+   */
+  PlayheadLayer.prototype._updateActiveSegment = function(segmentsGroup, lineId, time) {
+    const newActiveSegment = segmentsGroup.getActiveSegment(time);
 
-        this._playheadText.setText(text);
+    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._peaks.emit(
-          'playhead.moved',
-          this._playheadText.getAbsolutePosition().x,
-          this._playheadText.width()
-        );
+  /**
+   * Compute and emit source enter/exit events for a specific source line group.
+   * @private
+   * @param {LineGroup} sourcesLineGroup
+   * @param {Number} lineId
+   * @param {Number} time
+   */
+  PlayheadLayer.prototype._updateActiveSource = function(sourcesLineGroup, lineId, time) {
+    const newActiveSource = sourcesLineGroup.getActiveSource(time);
+
+    if (newActiveSource !== this._activeSources[lineId]) {
+      if (this._activeSources[lineId]) {
+        this._peaks.emit('sources.exit', this._activeSources[lineId]);
+        delete this._activeSources[lineId];
+      }
+      if (newActiveSource) {
+        this._peaks.emit('sources.enter', newActiveSource);
+        this._activeSources[lineId] = newActiveSource;
       }
     }
+  };
 
-    this._time = time;
-    this._playheadLayer.batchDraw();
+  /**
+   * Update the playhead time label and emit playhead.moved event.
+   * @private
+   * @param {Number} time
+   */
+  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()
+    );
   };
 
   /**

package/src/components/segments-group.js

@@ -37,6 +37,8 @@ define([
     this._segments       = {};
     this._lastSegmentId  = null;
 
+    this._cachedStartSegmentForActive = null;
+
     this._segmentShapes = {};
     this._group         = new Konva.Group();
 
@@ -104,34 +106,48 @@ define([
 
   SegmentsGroup.prototype.getActiveSegment = function(time) {
     var activeSegment = null;
+    var previousSegment = null;
     var currentSegment = null;
-    var nextSegmentId = null;
+
+    if (this._cachedStartSegmentForActive) {
+      if (this._cachedStartSegmentForActive.startTime <= time) {
+        if (this._cachedStartSegmentForActive.endTime > time) {
+          return this._cachedStartSegmentForActive;
+        }
+        else {
+          currentSegment = this._segments[this._cachedStartSegmentForActive.id];
+        }
+      }
+    }
 
     do {
       if (!currentSegment) {
         currentSegment = this._segments[this._firstSegmentId];
       }
       else {
+        previousSegment = currentSegment;
         currentSegment = this._segments[currentSegment.nextSegmentId];
       }
 
       if (currentSegment) {
         if (currentSegment.segment.startTime > time) {
           // We didn't find an active segment and will not in the remainings segments
+          if (previousSegment) {
+            this._cachedStartSegmentForActive = previousSegment.segment;
+          }
           break;
         }
 
         if (currentSegment.segment.startTime <= time && currentSegment.segment.endTime > time) {
           activeSegment = currentSegment.segment;
+          this._cachedStartSegmentForActive = activeSegment;
           break;
         }
       }
       else {
         break;
       }
-
-      nextSegmentId = currentSegment.nextSegmentId;
-    } while (nextSegmentId);
+    } while (currentSegment.nextSegmentId);
 
     return activeSegment;
   };

package/src/components/source-group.js

@@ -59,6 +59,7 @@ define([
     this._selected = this._source.selected;
     this._hovered = false;
     this._isDragged = false;
+    this._destroyed = false;
 
     this._previewList = [];
   // internal queue state for async preview creation
@@ -842,6 +843,10 @@ define([
       }
 
       waveformBuilder.init(options, function(err, originalWaveformData) {
+        if (self._destroyed) {
+          return;
+        }
+
         if (err) {
           throw err;
         }
@@ -1713,6 +1718,8 @@ define([
     }
 
     this._group.destroy();
+
+    this._destroyed = true;
   };
 
   /**

package/src/components/sources-layer.js

@@ -726,6 +726,10 @@ define([
     return this._lineGroups.getLineByPosition(pos);
   };
 
+  SourcesLayer.prototype.getLineGroups = function() {
+    return this._lineGroups;
+  };
+
   /**
    * Object for storing data and UI of a source.
    *

package/src/components/waveform-builder.js

@@ -346,7 +346,7 @@ define([
    * @param {WaveformBuilderInitCallback} callback
    */
 
-   WaveformBuilder.prototype._buildWaveformDataFromObjectUrl = function(options, callback) {
+  WaveformBuilder.prototype._buildWaveformDataFromObjectUrl = function(options, callback) {
     var self = this;
 
     var webAudioOptions = {

package/src/view.js

@@ -140,7 +140,7 @@ define([
     self._playheadLayer = new PlayheadLayer(
       peaks,
       self,
-      self._sourcesLayer,
+      self._sourcesLayer.getLineGroups(),
       self._options.showPlayheadTime
     );