Remove updateRate and add fallbackTargetFrameRate

adamcik · Feb 22, 2016 · f228086 · f228086
1 parent 28007e9
commit f228086
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -31,10 +31,11 @@ Usage
     var timer = ProgressTimer({
         // Your callback for updating UI state, required.
         callback: function(position, duration) {
+            /* Your code here */
         },
-        // Target milliseconds between callbacks, default: 100, min: 10.
-        updateRate: 10,
-        // Force the use of the legacy setTimeout fallback, default: false.
+        // Target frame rate when using legacy setTimeout fallback, default: 30.
+        fallbackTargetFrameRate: 30,
+        // Force legacy setTimeout fallback for testing, default: false.
         disableRequestAnimationFrame: false
     });
 
@@ -72,3 +73,10 @@ time position to "fix" the drifting.
 
 There is nothing Mopidy, or even media specific about this code so if it comes
 in handy for some other use cases then awesome :-)
+
+Changelog
+---------
+
+- 3.0.0 (unreleased)
+  - Removed updateRate support from RAF mode and fallback mode.
+  - Added fallbackTargetFrameRate setting to the setTimeout mode.
diff --git a/demo.html b/demo.html
@@ -43,10 +43,10 @@ <h1>Media progress timer</h1>
               <div class="panel-heading">Create a new instance</div>
               <div class="panel-body">
                 <div class="form-group">
-                  <label>Update rate</label>
-                  <input name="updateRate" value="10" class="form-control" />
+                  <label>Fallback frame rate</label>
+                  <input name="fallbackTargetFrameRate" value="30" class="form-control" />
                   <span class="help-block">
-                    Sets the minimum number of milliseconds between UI callbacks.
+                    Sets the target FPS for the <code>setTimeout</code> fallback mode.
                   </span>
                 </div>
                 <div class="form-group">
@@ -158,15 +158,16 @@ <h1>Media progress timer</h1>
                 logger.reset();
                 timer.reset();
               }
-              var updateRate = toInt(inputs['updateRate'].value);
+              var fallbackTargetFrameRate = toInt(inputs['fallbackTargetFrameRate'].value);
               var disableRAF = inputs['disableRAF'].value === 'true';
               logger.log('var timer = new ProgressTimer({\n' +
                          '  callback: function(position, duration) { /* UI code */ },\n' +
                          '  disableRequestAnimationFrame: ' + disableRAF + ',\n' +
-                         '  updateRate: ' + updateRate + '\n' +
+                         '  fallbackTargetFrameRate: ' + fallbackTargetFrameRate + '\n' +
                          '});');
               timer = new ProgressTimer({
-                callback: callback, updateRate: updateRate,
+                callback: callback,
+                fallbackTargetFrameRate: fallbackTargetFrameRate,
                 disableRequestAnimationFrame: disableRAF
               });
               break;

diff --git a/timer.js b/timer.js
@@ -12,6 +12,10 @@ var now = typeof window.performance !== 'undefined' &&
           window.performance.now.bind(window.performance) || Date.now ||
           function() { return new Date().getTime(); };
 
+var warn = function(msg) {
+    setTimeout(function() { throw msg; }, 0);
+};
+
 function ProgressTimer(options) {
     if (!(this instanceof ProgressTimer)) {
         return new ProgressTimer(options);
@@ -23,13 +27,20 @@ function ProgressTimer(options) {
         throw 'ProgressTimer needs a callback to operate.';
     }
 
+    if (options.updateRate && !options.fallbackTargetFrameRate) {
+        warn('ProgressTimer no longer supports the updateRate option.');
+        this._fallbackRate = Math.max(options.updateRate, 10);
+    } else {
+        this._fallbackRate = 1000 / (options.fallbackTargetFrameRate || 30);
+    }
+
     this._running = false;
-    this._updateRate = Math.max(options.updateRate || 100, 10);
     this._callback = options.callback;
-    this._fallback = typeof window.requestAnimationFrame === 'undefined' ||
-                     options.disableRequestAnimationFrame|| false;
 
-    if (!this._fallback) {
+    var useFallback = typeof window.requestAnimationFrame === 'undefined' ||
+                      options.disableRequestAnimationFrame || false;
+
+    if (!useFallback) {
         this._callUpdate = this._scheduleAnimationFrame;
         this._scheduleUpdate = this._scheduleAnimationFrame;
     }
@@ -84,7 +95,7 @@ ProgressTimer.prototype._callUpdate = function() {
 };
 
 ProgressTimer.prototype._scheduleUpdate = function(timestamp) {
-    var adjustedTimeout = timestamp + this._updateRate - now();
+    var adjustedTimeout = Math.round(timestamp + this._fallbackRate - now());
     setTimeout(this._boundCallUpdate, adjustedTimeout);
 };
 
@@ -104,11 +115,8 @@ ProgressTimer.prototype._update = function(timestamp) {
     var duration = state.duration;
 
     if (position < duration || duration === null) {
-        var delta = position - state.previousPosition;
-        if (delta >= this._updateRate || this._fallback) {
-            this._callback(Math.floor(position), duration);
-            state.previousPosition = position;
-        }
+        this._callback(Math.floor(position), duration);
+        state.previousPosition = position;
         this._scheduleUpdate(timestamp);
     } else {
         this._running = false;