Micro optimisation for playback position binding

Request animation frame is now no longer always on effectively giving the app an idle state as to always running at MAX fps. Also, fixed up polyfill and commented out a debugging line in ngSlider
QutEcoacoustics · Jan 23, 2014 · 97796c5 · 97796c5
1 parent e60fe9f
commit 97796c5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/common/functions.js b/src/common/functions.js
@@ -106,7 +106,7 @@ if (!Array.prototype.filter) {
     }
 
     if (!window.requestAnimationFrame) {
-        window.requestAnimationFrame = function requestAnimationFrame(callback, element) {
+        window.requestAnimationFrame = function requestAnimationFrame(callback) {
             var
                 currTime = new Date().getTime(),
                 timeToCall = Math.max(0, 16 - (currTime - lastTime)),

diff --git a/src/components/directives/input[type=range].js b/src/components/directives/input[type=range].js
@@ -12,8 +12,8 @@ bawds.directive("ngSlider", function () {
                     return;
                 }
 
-                console.debug("ngSlider:updateScope: Calling apply!", element.value);
-                
+                //console.debug("ngSlider:updateScope: Calling apply!", element.value);
+
                 scope.$apply(function () {
                     scope[attrs.ngSlider] = element.value;
                 });

diff --git a/src/components/directives/ngAudio.js b/src/components/directives/ngAudio.js
@@ -86,7 +86,11 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
                 'mozaudioavailable': undefined,
                 'pause': updateState,
                 'play': updateState,
-                'playing': updateState,
+                'playing': function() {
+                    // restart request animation frame
+                    audioElementPositionRAF();
+                    updateState();
+                },
                 'progress': undefined,
                 'ratechange': undefined,
                 'seeked': undefined,
@@ -107,9 +111,7 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
 
             // position binding - reverse (element to model)
             // TODO: we can optimise this, it does not always need to be running
-            window.requestAnimationFrame(function audioElementPositionRAF() {
-                // need to request each new frame
-                window.requestAnimationFrame(audioElementPositionRAF);
+            function audioElementPositionRAF() {
                 if (attributes.ngAudio) {
                     var target = scope.$eval(attributes.ngAudio);
                     if (target) {
@@ -121,7 +123,16 @@ bawds.directive('ngAudio', ['$parse', function ($parse) {
                         }
                     }
                 }
-            }, elements[0]);
+
+                // optimisation - do not request a new frame if element is paused
+                // requires loop to be restarted on play event
+                if (element.paused) {
+                    return;
+                }
+
+                // need to request each new frame
+                window.requestAnimationFrame(audioElementPositionRAF);
+            }
 
         }
     };