@checksub_team/peaks_timeline 2.0.0-alpha.14 → 2.0.0-alpha.16

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) {

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);
+      }
+    });
   };
 
   /**

package/src/view.js

@@ -390,12 +390,12 @@ define([
   View.prototype.overrideInteractions = function(areInteractionsAllowed) {
     this._playheadLayer.listening(areInteractionsAllowed);
     this._sourcesLayer.stopDrag();
-    this._sourcesLayer.draw();
+    this._sourcesLayer.batchDraw();
   };
 
   View.prototype.allowInteractions = function() {
     this._sourcesLayer.stopDrag();
-    this._sourcesLayer.draw();
+    this._sourcesLayer.batchDraw();
   };
 
   View.prototype.getSelectedElements = function() {
@@ -434,8 +434,8 @@ define([
     return this._isFocused;
   };
 
-  View.prototype.drawSourcesLayer = function() {
-    this._sourcesLayer.draw();
+  View.prototype.batchDrawSourcesLayer = function() {
+    this._sourcesLayer.batchDraw();
   };
 
   View.prototype.refresh = function() {
@@ -804,7 +804,7 @@ define([
       const playheadPixel = this._playheadLayer.getPlayheadPixel();
 
       this._playheadLayer.updatePlayheadTime(this.pixelsToTime(playheadPixel));
-      this._axis.draw();
+      this._axis.batchDraw();
     }
 
     const frameStartTime = this.pixelsToTime(this._frameOffset);
@@ -878,7 +878,7 @@ define([
 
       this.updateTimeline(this._frameOffset);
 
-      this._stage.draw();
+      this._stage.batchDraw();
     }
   };