@checksub_team/peaks_timeline 2.0.0-alpha.9 → 2.0.1

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();
 
@@ -79,19 +82,8 @@ define([
     this._group.on('dragend', this._onDragEnd.bind(this));
 
     this._cursor = null;
-    this._group.on('mouseenter', function() {
-      self._setHovered(true);
-      self._view.setHoveredElement(self);
-      if (!self._source.loading) {
-        self._showButtons();
-      }
-    });
-
-    this._group.on('mouseleave', function() {
-      self._setHovered(false);
-      self._view.setHoveredElement(null);
-      self._hideButtons();
-    });
+    this._group.on('mouseenter', this._onHoverStart.bind(this));
+    this._group.on('mouseleave', this._onHoverEnd.bind(this));
 
     this._group.on('mouseover', function() {
       if (self._source.draggable) {
@@ -136,9 +128,21 @@ define([
     this.setLoadingState(this._source.loading);
   }
 
-  SourceGroup.prototype._setHovered = function(newValue) {
-    this._hovered = newValue;
-    this._group.draw();
+  SourceGroup.prototype._onHoverStart = function() {
+    this._hovered = true;
+    this._view.setHoveredElement(this);
+    if (!this._source.loading) {
+      this._showButtons();
+    }
+  this._batchDraw();
+  };
+
+  SourceGroup.prototype._onHoverEnd = function() {
+    this._hovered = false;
+    this._manualHover = false;
+    this._view.setHoveredElement(null);
+    this._hideButtons();
+  this._batchDraw();
   };
 
   SourceGroup.prototype._onDragStart = function(element) {
@@ -148,9 +152,34 @@ define([
 
   SourceGroup.prototype._onDragEnd = function(element) {
     this._isDragged = false;
+    this._manageManualHoverStop();
     this._layer.onSourcesGroupDragEnd(element);
   };
 
+  SourceGroup.prototype._manageManualHoverStop = function() {
+    if (!this._manualHover) {
+      return;
+    }
+
+    var pointer = this._view.getPointerPosition();
+
+    if (pointer) {
+      var absPos = this._group.absolutePosition();
+      var inside = (
+        pointer.x >= absPos.x && pointer.x <= absPos.x + this._width &&
+        pointer.y >= absPos.y && pointer.y <= absPos.y + this._height
+      );
+
+      if (!inside) {
+        this.stopHover();
+      }
+    }
+  };
+
+  SourceGroup.prototype.isHovered = function() {
+    return this._hovered;
+  };
+
   SourceGroup.prototype.isActive = function() {
     return this._isDragged;
   };
@@ -185,7 +214,7 @@ define([
           leftHandle ? start + diff + timeOffsetDiff : null,
           leftHandle ? null : end + diff + timeOffsetDiff
         )) {
-          this._layer.draw();
+          this._layer.batchDraw();
         }
       }.bind(this)
     );
@@ -674,6 +703,15 @@ define([
     return this._source;
   };
 
+  SourceGroup.prototype.startHover = function() {
+    this._manualHover = true;
+    this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
+  };
+
+  SourceGroup.prototype.stopHover = function() {
+    this._group.fire('mouseleave', { evt: new MouseEvent('mouseleave') }, true);
+  };
+
   SourceGroup.prototype.startDrag = function() {
     return this._group.startDrag();
   };
@@ -808,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() {
@@ -973,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,
@@ -1024,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);
@@ -1435,6 +1497,14 @@ define([
         this._buttonsAnimation.destroy();
         this._buttonsAnimation = null;
       }
+      if (!this._buttonsGroup.getLayer()) {
+        // If the node is not in a layer, avoid creating a Tween
+        if (!this._buttonsGroup.getLayer()) {
+          this._buttonsGroup.visible(true);
+          this._buttonsGroup.opacity(1);
+          return;
+        }
+      }
 
       var self = this;
 
@@ -1459,6 +1529,12 @@ define([
         this._buttonsAnimation.destroy();
         this._buttonsAnimation = null;
       }
+      if (!this._buttonsGroup.getLayer()) {
+        // If the node is not in a layer, avoid creating a Tween
+        this._buttonsGroup.visible(false);
+        this._buttonsGroup.opacity(0);
+        return;
+      }
 
       var self = this;
 
@@ -1603,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

@@ -58,8 +58,17 @@ define([
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
     this._peaks.on('model.source.setIndicators', this.setIndicators.bind(this));
+    this._peaks.on('handler.view.mouseup', this._stopDrag.bind(this));
   }
 
+  SourcesLayer.prototype._stopDrag = function() {
+    const draggedSourceGroup = this._sourcesGroup[this._draggedElementId];
+
+    if (draggedSourceGroup) {
+      draggedSourceGroup.stopDrag();
+    }
+  };
+
   SourcesLayer.prototype.fitToView = function() {
     this._lineGroups.fitToView();
   };
@@ -109,20 +118,31 @@ define([
   };
 
   SourcesLayer.prototype._onSourceUpdate = function(source) {
+    const sourceGroup = this._sourcesGroup[source.id];
+    const frameOffset = this._view.getFrameOffset();
+    const width = this._view.getWidth();
+    const frameStartTime = this._view.pixelsToTime(frameOffset);
+    const frameEndTime   = this._view.pixelsToTime(frameOffset + width);
     var redraw = false;
-    var sourceGroup = this._sourcesGroup[source.id];
-    var frameOffset = this._view.getFrameOffset();
-    var width = this._view.getWidth();
-    var frameStartTime = this._view.pixelsToTime(frameOffset);
-    var frameEndTime   = this._view.pixelsToTime(frameOffset + width);
+    var isSourceGroupHovered = false;
+    var isSourceGroupActive = false;
 
     if (sourceGroup) {
+      isSourceGroupHovered = sourceGroup.isHovered();
+      isSourceGroupActive = sourceGroup.isActive();
       this._destroySourceGroup(source);
       redraw = true;
     }
 
-    if (source.isVisible(frameStartTime, frameEndTime)) {
-      this._addSourceGroup(source);
+    if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+      const newSourceGroup = this._addSourceGroup(source);
+
+      if (isSourceGroupHovered) {
+        newSourceGroup.startHover();
+      }
+      if (isSourceGroupActive) {
+        newSourceGroup.startDrag();
+      }
       redraw = true;
     }
 
@@ -140,7 +160,7 @@ define([
       }
     }.bind(this));
 
-    this.draw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesAdd = function(sources) {
@@ -170,7 +190,7 @@ define([
 
     this._view.updateTimelineLength();
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesShow = function(sources) {
@@ -180,7 +200,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(false, true);
     });
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesHide = function(sources) {
@@ -190,7 +210,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(true, true);
     });
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._onDataRetrieved = function(data, source, url) {
@@ -223,7 +243,7 @@ define([
   SourcesLayer.prototype._onSegmentsShow = function(segmentsGroupId, lineId) {
     this._lineGroups.addSegments(segmentsGroupId, lineId);
     this._view.updateTimelineLength();
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   /**
@@ -265,7 +285,7 @@ define([
 
     if (sourceGroup) {
       sourceGroup.createIndicators();
-      this._layer.draw();
+      this._layer.batchDraw();
     }
   };
 
@@ -292,7 +312,7 @@ define([
     count += this._removeInvisibleSources(startTime, endTime);
 
     if (count > 0) {
-      this._layer.draw();
+      this._layer.batchDraw();
     }
   };
 
@@ -300,18 +320,18 @@ define([
     this._initialTimeOffset = this._view.getTimeOffset();
     this._mouseDownX = this._view.getPointerPosition().x;
 
-    const draggedElementId = element.currentTarget.attrs.sourceId;
+    this._draggedElementId = element.currentTarget.attrs.sourceId;
 
     var selectedElements = this._view.getSelectedElements();
     const shouldDragSelectedElements = Object.keys(selectedElements).includes(
-      draggedElementId
+      this._draggedElementId
     );
 
     if (shouldDragSelectedElements) {
       this._draggedElements = Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime);
     }
     else {
-      this._draggedElements = [this._sourcesGroup[draggedElementId].getSource()];
+      this._draggedElements = [this._sourcesGroup[this._draggedElementId].getSource()];
       this._view.deselectAll();
     }
 
@@ -343,7 +363,9 @@ define([
       }.bind(this)
     );
 
-    this._view.drawSourcesLayer();
+    this._draggedElementId = null;
+
+    this._view.batchDrawSourcesLayer();
     this._view.updateTimelineLength();
 
     this._peaks.emit('sources.updated', updatedSources);
@@ -387,7 +409,7 @@ define([
     );
 
     if (shouldRedraw) {
-      this.draw();
+      this.batchDraw();
     }
   };
 
@@ -603,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) {
@@ -660,7 +682,7 @@ define([
         });
       }
     }
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   SourcesLayer.prototype._shouldResampleAudio = function(audioUrl, urls) {
@@ -685,6 +707,7 @@ define([
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     this._peaks.off('handler.segments.show', this._onSegmentsShow);
     this._peaks.off('model.source.setIndicators', this.setIndicators);
+    this._peaks.off('handler.view.mouseup', this._stopDrag);
   };
 
   SourcesLayer.prototype.getHeight = function() {

package/src/components/waveform-builder.js

@@ -16,6 +16,14 @@ define([
 
   var isXhr2 = ('withCredentials' in new XMLHttpRequest());
 
+  // Schedule heavy work during idle time to avoid UI stutter
+  function scheduleIdle(fn) {
+    if (typeof window !== 'undefined' && window.requestIdleCallback) {
+      return window.requestIdleCallback(fn, { timeout: 80 });
+    }
+    return setTimeout(fn, 0);
+  }
+
   /**
    * Creates and returns a WaveformData object, either by requesting the
    * waveform data from the server, or by creating the waveform data using the
@@ -197,14 +205,21 @@ define([
         return;
       }
 
-      var waveformData = WaveformData.create(event.target.response);
+      scheduleIdle(function() {
+        try {
+          var waveformData = WaveformData.create(event.target.response);
 
-      if (waveformData.channels !== 1 && waveformData.channels !== 2) {
-        callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
-        return;
-      }
+          if (waveformData.channels !== 1 && waveformData.channels !== 2) {
+            callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
+            return;
+          }
 
-      callback(null, waveformData);
+          callback(null, waveformData);
+        }
+        catch (err) {
+          callback(err);
+        }
+      });
     },
     function() {
       callback(new Error('XHR Failed'));
@@ -255,19 +270,21 @@ define([
       return;
     }
 
-    try {
-      var createdWaveformData = WaveformData.create(data);
+    scheduleIdle(function() {
+      try {
+        var createdWaveformData = WaveformData.create(data);
+
+        if (createdWaveformData.channels !== 1 && createdWaveformData.channels !== 2) {
+          callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
+          return;
+        }
 
-      if (createdWaveformData.channels !== 1 && createdWaveformData.channels !== 2) {
-        callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
-        return;
+        callback(null, createdWaveformData);
       }
-
-      callback(null, createdWaveformData);
-    }
-    catch (err) {
-      callback(err);
-    }
+      catch (err) {
+        callback(err);
+      }
+    });
   };
 
   /**