@checksub_team/peaks_timeline 2.0.0-alpha.15 → 2.0.0-alpha.17

package/src/components/axis.js

@@ -63,18 +63,18 @@ define([
   Axis.prototype._onPlayheadMoved = function(playheadX, playheadWidth) {
     this._maskStart = playheadX + this._view.getFrameOffset();
     this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
-    this._frontLayer.draw();
+    this._frontLayer.batchDraw();
   };
 
   Axis.prototype._onPlayheadHidden = function() {
     this._maskStart = null;
     this._maskEnd = null;
-    this._frontLayer.draw();
+    this._frontLayer.batchDraw();
   };
 
-  Axis.prototype.draw = function() {
-    this._backLayer.draw();
-    this._frontLayer.draw();
+  Axis.prototype.batchDraw = function() {
+    this._backLayer.batchDraw();
+    this._frontLayer.batchDraw();
   };
 
   Axis.prototype.addBackToStage = function(stage) {

package/src/components/default-segment-marker.js

@@ -86,12 +86,12 @@ define([
     if (self._options.draggable) {
       group.on('dragstart', function() {
         self._label.show();
-        self._options.group.draw();
+        self._batchDraw();
       });
 
       group.on('dragend', function() {
         self._label.hide();
-        self._options.group.draw();
+        self._batchDraw();
       });
     }
 
@@ -100,13 +100,13 @@ define([
         self._options.view.setCursor('ew-resize');
         self._label.show();
         self._group.moveToTop();
-        self._options.view.drawSourcesLayer();
+        self._options.view.batchDrawSourcesLayer();
       });
 
       self._handle.on('mouseout touchend', function() {
         self._options.view.setCursor('default');
         self._label.hide();
-        self._options.view.drawSourcesLayer();
+        self._options.view.batchDrawSourcesLayer();
       });
     }
   };
@@ -128,5 +128,14 @@ define([
     this._label.setText(Utils.formatTime(time, false));
   };
 
+  DefaultSegmentMarker.prototype._batchDraw = function() {
+    const group = this._options.group;
+    const layer = group && group.getLayer && group.getLayer();
+
+    if (layer && typeof layer.batchDraw === 'function') {
+      layer.batchDraw();
+    }
+  };
+
   return DefaultSegmentMarker;
 });

package/src/components/line-indicator.js

@@ -68,7 +68,7 @@ define([
 
     this._layer.add(this._separatingLine);
 
-    this._layer.draw();
+    this._layer.batchDraw();
 
     this._isDragging = false;
     this._dragLineId = null;
@@ -172,7 +172,7 @@ define([
       indicator.getChildren().forEach(function(child) {
         child.fill(child.getAttr('selectedColor'));
       });
-      self.draw();
+      self.batchDraw();
       self._stage.container().style.cursor = 'pointer';
     });
 
@@ -180,7 +180,7 @@ define([
       indicator.getChildren().forEach(function(child) {
         child.fill(child.getAttr('defaultColor'));
       });
-      self.draw();
+      self.batchDraw();
       if (!self._isDragging) {
         self._stage.container().style.cursor = 'default';
       }
@@ -219,7 +219,8 @@ define([
       this._indicators[line.id] = {
         lineGroup: lineGroup,
         indicator: indicator,
-        type: line.indicatorType
+        type: line.indicatorType,
+        text: line.indicatorText
       };
     }
   };
@@ -250,7 +251,7 @@ define([
     indicatorData.type = line.indicatorType;
     indicatorData.text = line.indicatorText;
 
-    this.draw();
+    this.batchDraw();
   };
 
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
@@ -320,13 +321,13 @@ define([
     }
 
     if (anyChange) {
-      this.draw();
+      this.batchDraw();
     }
     return anyChange;
   };
 
-  LineIndicator.prototype.draw = function() {
-    this._layer.draw();
+  LineIndicator.prototype.batchDraw = function() {
+    this._layer.batchDraw();
   };
 
   LineIndicator.prototype._onWindowMove = function(event) {

package/src/components/mode-layer.js

@@ -229,7 +229,7 @@ define([
     }
     else {
       this.deselectDifference([], true);
-      this._view.drawSourcesLayer();  // Redraw sources layer to remove selection
+      this._view.batchDrawSourcesLayer();  // Redraw sources layer to remove selection
     }
   };
 
@@ -258,7 +258,7 @@ define([
   ModeLayer.prototype._onMouseEnterInCutMode = function() {
     this._cutGroup.visible(true);
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   ModeLayer.prototype._updateCursorTime = function(position) {
@@ -359,13 +359,13 @@ define([
     this._updateCursorTime(cuttingPosition);
     this._updateCuttingLine(cuttingPosition);
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   ModeLayer.prototype._onMouseLeaveInCutMode = function() {
     this._cutGroup.visible(false);
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   ModeLayer.prototype._onMouseClickInCutMode = function() {
@@ -417,7 +417,7 @@ define([
         this._updateCursorTime(cuttingPosition);
         this._updateCuttingLine(cuttingPosition);
 
-        this._layer.draw();
+        this._layer.batchDraw();
       }
     }
   };
@@ -494,8 +494,8 @@ define([
     }
 
     this._mode = mode;
-    this._layer.draw();
-    this._view.drawSourcesLayer();
+    this._layer.batchDraw();
+    this._view.batchDrawSourcesLayer();
   };
 
   ModeLayer.prototype.getCurrentMode = function() {

package/src/components/playhead-layer.js

@@ -269,7 +269,7 @@ define([
     }
 
     this._time = time;
-    this._playheadLayer.draw();
+    this._playheadLayer.batchDraw();
   };
 
   /**
@@ -307,7 +307,7 @@ define([
     }
 
     if (updated) {
-      this._playheadLayer.draw();
+      this._playheadLayer.batchDraw();
     }
   };
 

package/src/components/segment-shape.js

@@ -380,7 +380,7 @@ define([
       0.65, this._segment.warningColor
     ]);
 
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
 
     this._peaks.emit('segments.mouseenter', this._segment);
   };
@@ -400,7 +400,7 @@ define([
       0.65, this._segment.warningColor
     ]);
 
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
 
     this._peaks.emit('segments.mouseleave', this._segment);
   };

package/src/components/segments-group.js

@@ -377,7 +377,7 @@ define([
   };
 
   SegmentsGroup.prototype._draw = function() {
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
   };
 
   /**

package/src/components/source-group.js

@@ -24,6 +24,7 @@ define([
   var SPACING_BETWEEN_PREVIEWS = 1.5;
   var CORNER_RADIUS = 8;
   var INDICATOR_RADIUS = 4; // px
+  var PREVIEW_CREATE_CHUNK = 8; // number of preview tiles to add per idle slice
 
   /**
    * Creates a source group for the given source.
@@ -60,6 +61,8 @@ define([
     this._isDragged = false;
 
     this._previewList = [];
+  // internal queue state for async preview creation
+  this._previewBuildQueue = new Set();
 
     this._markersGroup = this._createMarkers();
 
@@ -131,7 +134,7 @@ define([
     if (!this._source.loading) {
       this._showButtons();
     }
-    this._group.draw();
+  this._batchDraw();
   };
 
   SourceGroup.prototype._onHoverEnd = function() {
@@ -139,7 +142,7 @@ define([
     this._manualHover = false;
     this._view.setHoveredElement(null);
     this._hideButtons();
-    this._group.draw();
+  this._batchDraw();
   };
 
   SourceGroup.prototype._onDragStart = function(element) {
@@ -211,7 +214,7 @@ define([
           leftHandle ? start + diff + timeOffsetDiff : null,
           leftHandle ? null : end + diff + timeOffsetDiff
         )) {
-          this._layer.draw();
+          this._layer.batchDraw();
         }
       }.bind(this)
     );
@@ -843,80 +846,49 @@ define([
           throw err;
         }
 
-        originalWaveformData.hasAudio = self._hasAudio(originalWaveformData);
+        var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
 
-        if (originalWaveformData.hasAudio) {
-          var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
-
-          if (newScale > originalWaveformData.scale) {
-            self._minScale = newScale;
-          }
-          else {
-            self._minScale = originalWaveformData.scale;
-          }
-
-          self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
+        if (newScale > originalWaveformData.scale) {
+          self._minScale = newScale;
+        }
+        else {
+          self._minScale = originalWaveformData.scale;
         }
 
+        self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
+
         self._layer.setLoadedData(url, originalWaveformData);
         self._layer.setLoadedData(
           url + '-scaled',
           { data: originalWaveformData, scale: originalWaveformData.sample_rate / self._minScale }
         );
         preview.loaded = true;
-        self._createAudioPreview(preview, originalWaveformData, redraw);
+        self._createAudioPreview(preview, redraw);
       });
     }
     else {
       preview.loaded = true;
-      this._createAudioPreview(preview, audioData, redraw);
+      this._createAudioPreview(preview, redraw);
     }
   };
 
-  SourceGroup.prototype._hasAudio = function(waveformData) {
-    var channels = waveformData.channels;
-    var channel, someIsNotZero = false;
-
-    for (var i = 0; i < channels; i++) {
-      channel = waveformData.channel(i);
-
-      someIsNotZero = channel.min_array().some(function(item) {
-        return item !== 0;
-      });
+  SourceGroup.prototype._createAudioPreview = function(preview, redraw) {
+    var waveform = new WaveformShape({
+      layer: this._layer,
+      view: this._view,
+      source: this._source,
+      height: preview.group.height(),
+      url: preview.url
+    });
 
-      if (!someIsNotZero) {
-        someIsNotZero = channel.max_array().some(function(item) {
-          return item !== 0;
-        });
-      }
+    preview.group.add(waveform);
+    this._addToUnwrap(preview.group);
 
-      if (someIsNotZero) {
-        break;
-      }
+    if (redraw) {
+      this._layer.rescale(true);
     }
 
-    return someIsNotZero;
-  };
-
-  SourceGroup.prototype._createAudioPreview = function(preview, waveformData, redraw) {
-    if (waveformData.hasAudio) {
-      var waveform = new WaveformShape({
-        layer: this._layer,
-        view: this._view,
-        source: this._source,
-        height: preview.group.height(),
-        url: preview.url
-      });
-
-      preview.group.add(waveform);
-      this._addToUnwrap(preview.group);
-
-      if (redraw) {
-        this._layer.rescale(true);
-      }
-
-      this._previewList.push(preview);
-    }
+    this._previewList.push(preview);
   };
 
   SourceGroup.prototype.getAudioPreview = function() {
@@ -1008,37 +980,100 @@ define([
               imageNumber = 0;
             }
 
-            var imageList = preview.group.getChildren();
-
-            var i = 0;
-
-            for (i = 0; i < imageNumber; i++) {
-              if (imageList.length > i) {
-                imageList[i].visible(true);
-              }
-              else {
-                var imagePreview = new Konva.Image({
-                  x: preview.imageData.borderSpacing + i * interImageSpacing,
-                  y: preview.imageData.borderSpacing,
-                  image: preview.imageData.image,
-                  width: preview.imageData.width,
-                  height: preview.imageData.height,
-                  listening: false,
-                  visible: true
-                });
-
-                preview.group.add(imagePreview);
-              }
-            }
-
-            for (i = imageNumber; i < imageList.length; i++) {
-              imageList[i].visible(false);
-            }
+            self._ensureImagePreviewCount(preview, imageNumber, interImageSpacing);
         }
       }
     });
   };
 
+  SourceGroup.prototype._batchDraw = function() {
+    var layer = this._group && this._group.getLayer && this._group.getLayer();
+
+    if (layer && typeof layer.batchDraw === 'function') {
+      layer.batchDraw();
+    }
+  };
+
+  // Utility to schedule work during idle time or next frame
+  SourceGroup.prototype._scheduleIdle = function(fn) {
+    if (typeof window !== 'undefined' && window.requestIdleCallback) {
+      return window.requestIdleCallback(fn, { timeout: 50 });
+    }
+
+    if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+      return window.requestAnimationFrame(function() {
+        fn({
+          timeRemaining: function() {
+            return 0;
+          },
+          didTimeout: true
+        });
+      });
+    }
+
+    return setTimeout(function() {
+      fn({
+        timeRemaining: function() {
+          return 0;
+        },
+        didTimeout: true
+      });
+    }, 0);
+  };
+
+  SourceGroup.prototype._ensureImagePreviewCount = function(preview, targetCount, interImageSpacing) {
+    var imageList = preview.group.getChildren();
+    var currentCount = imageList.length;
+
+    for (var i = 0; i < Math.min(currentCount, targetCount); i++) {
+      imageList[i].visible(true);
+    }
+    for (var j = targetCount; j < currentCount; j++) {
+      imageList[j].visible(false);
+    }
+
+    if (currentCount >= targetCount || this._previewBuildQueue.has(preview)) {
+      this._batchDraw();
+      return;
+    }
+
+    this._previewBuildQueue.add(preview);
+
+    var self = this;
+    var nextIndex = currentCount;
+
+    function buildChunk() {
+      var added = 0;
+
+      while (nextIndex < targetCount && added < PREVIEW_CREATE_CHUNK) {
+        var imagePreview = new Konva.Image({
+          x: preview.imageData.borderSpacing + nextIndex * interImageSpacing,
+          y: preview.imageData.borderSpacing,
+          image: preview.imageData.image,
+          width: preview.imageData.width,
+          height: preview.imageData.height,
+          listening: false,
+          visible: true
+        });
+
+        preview.group.add(imagePreview);
+        nextIndex += 1;
+        added += 1;
+      }
+
+      self._batchDraw();
+
+      if (nextIndex < targetCount) {
+        self._scheduleIdle(buildChunk);
+      }
+      else {
+        self._previewBuildQueue.delete(preview);
+      }
+    }
+
+    this._scheduleIdle(buildChunk);
+  };
+
   SourceGroup.prototype._createImagePreview = function(preview, image, redraw) {
     preview.imageData = {
       image: image,
@@ -1059,27 +1094,19 @@ define([
     preview.imageData.width = preview.imageData.height * preview.imageData.dimRatio;
     preview.imageData.imageSpacing = preview.imageData.width * SPACING_BETWEEN_PREVIEWS;
 
-    var currentX = preview.imageData.borderSpacing;
+    this._addToUnwrap(preview.group);
 
-    while (currentX < this._width) {
-      var imagePreview = new Konva.Image({
-        x: currentX,
-        y: preview.imageData.borderSpacing,
-        image: image,
-        width: preview.imageData.width,
-        height: preview.imageData.height,
-        listening: false
-      });
+    var interImageSpacing = preview.imageData.width + preview.imageData.imageSpacing;
 
-      preview.group.add(imagePreview);
+    var targetCount = 0;
 
-      currentX += preview.imageData.width + preview.imageData.imageSpacing;
+    if (this._width > preview.imageData.borderSpacing) {
+      targetCount = Math.trunc((this._width - preview.imageData.borderSpacing) / interImageSpacing) + 1;
     }
-
-    this._addToUnwrap(preview.group);
+    this._ensureImagePreviewCount(preview, targetCount, interImageSpacing);
 
     if (redraw) {
-      this._group.draw();
+      this._batchDraw();
     }
 
     this._previewList.push(preview);
@@ -1652,7 +1679,7 @@ define([
       self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
       self._peaks.emit('source.volumeChanged', self._source);
 
-      self._group.draw();
+  self._batchDraw();
     });
 
     volumeSliderGroup.on('dragend', function() {

package/src/components/sources-layer.js

@@ -160,7 +160,7 @@ define([
       }
     }.bind(this));
 
-    this.draw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesAdd = function(sources) {
@@ -190,7 +190,7 @@ define([
 
     this._view.updateTimelineLength();
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesShow = function(sources) {
@@ -200,7 +200,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(false, true);
     });
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesHide = function(sources) {
@@ -210,7 +210,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(true, true);
     });
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._onDataRetrieved = function(data, source, url) {
@@ -243,7 +243,7 @@ define([
   SourcesLayer.prototype._onSegmentsShow = function(segmentsGroupId, lineId) {
     this._lineGroups.addSegments(segmentsGroupId, lineId);
     this._view.updateTimelineLength();
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   /**
@@ -285,7 +285,7 @@ define([
 
     if (sourceGroup) {
       sourceGroup.createIndicators();
-      this._layer.draw();
+      this._layer.batchDraw();
     }
   };
 
@@ -312,7 +312,7 @@ define([
     count += this._removeInvisibleSources(startTime, endTime);
 
     if (count > 0) {
-      this._layer.draw();
+      this._layer.batchDraw();
     }
   };
 
@@ -365,7 +365,7 @@ define([
 
     this._draggedElementId = null;
 
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
     this._view.updateTimelineLength();
 
     this._peaks.emit('sources.updated', updatedSources);
@@ -409,7 +409,7 @@ define([
     );
 
     if (shouldRedraw) {
-      this.draw();
+      this.batchDraw();
     }
   };
 
@@ -625,8 +625,8 @@ define([
     this._layer.setVisible(visible);
   };
 
-  SourcesLayer.prototype.draw = function() {
-    this._layer.draw();
+  SourcesLayer.prototype.batchDraw = function() {
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype.listening = function(bool) {
@@ -682,7 +682,7 @@ define([
         });
       }
     }
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._shouldResampleAudio = function(audioUrl, urls) {