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

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();
     }
   };