@heff use a synchronous ready() internally. closes #2392

CHANGELOG.md

@@ -80,6 +80,7 @@ CHANGELOG
 * @mmcc Added "inline" option to MenuButton and updated VolumeMenuButton to be able to utilize it ([view](https://github.com/videojs/video.js/pull/2378))
 * @misteroneill restore some properties on window.videojs. ([view](https://github.com/videojs/video.js/pull/2395))
 * @misteroneill restore some 4.x utilities and remove deprecated functionality ([view](https://github.com/videojs/video.js/pull/2406))
+* @heff use a synchronous ready() internally ([view](https://github.com/videojs/video.js/pull/2392))
 
 --------------------
 

src/js/component.js

@@ -745,14 +745,19 @@ class Component {
    * it will trigger the function immediately.
    *
    * @param  {Function} fn Ready listener
+   * @param  {Boolean} sync Exec the listener synchronously if component is ready
    * @return {Component}
    * @method ready
    */
-  ready(fn) {
+  ready(fn, sync=false) {
     if (fn) {
       if (this.isReady_) {
-        // Ensure function is always called asynchronously
+        if (sync) {
+          fn.call(this);
+        } else {
+          // Call the function asynchronously by default for consistency
           this.setTimeout(fn, 1);
+        }
       } else {
         this.readyQueue_ = this.readyQueue_ || [];
         this.readyQueue_.push(fn);

src/js/player.js

@@ -571,7 +571,8 @@ class Player extends Component {
       this.tag = null;
     }
 
-    this.tech.ready(techReady);
+    // player.triggerReady is always async, so don't need this to be async
+    this.tech.ready(techReady, true);
   }
 
   /**
@@ -1110,7 +1111,7 @@ class Player extends Component {
     if (this.tech && !this.tech.isReady_) {
       this.tech.ready(function(){
         this[method](arg);
-      });
+      }, true);
 
     // Otherwise call method now
     } else {
@@ -1714,7 +1715,9 @@ class Player extends Component {
           if (this.options_['autoplay']) {
             this.play();
           }
-        });
+
+        // Set the source synchronously if possible (#2326)
+        }, true);
       }
     }
 

src/js/tech/flash.js

@@ -28,11 +28,11 @@ class Flash extends Tech {
   constructor(options, ready){
     super(options, ready);
 
-    // If source was supplied pass as a flash var.
+    // Set the source when ready
     if (options.source) {
       this.ready(function(){
         this.setSource(options.source);
-      });
+      }, true);
     }
 
     // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
@@ -42,7 +42,7 @@ class Flash extends Tech {
         this.load();
         this.play();
         this.currentTime(options.startTime);
-      });
+      }, true);
     }
 
     // Add global window functions that the swf expects

src/js/tech/tech.js

@@ -97,7 +97,8 @@ class Tech extends Component {
       if (this.networkState && this.networkState() > 0) {
         this.trigger('loadstart');
       }
-    });
+    // Allow the tech ready event to handle synchronisity
+    }, true);
   }
 
   /* Fallbacks for unsupported event types

test/unit/component.test.js

@@ -365,26 +365,43 @@ test('should add listeners to other components that are fired once', function(){
 });
 
 test('should trigger a listener when ready', function(){
-  expect(2);
+  let initListenerFired;
+  let methodListenerFired;
+  let syncListenerFired;
 
-  var optionsReadyListener = function(){
+  let comp = new Component(getFakePlayer(), {}, function(){
-    ok(true, 'options listener fired');
+    initListenerFired = true;
-  };
+  });
-  var methodReadyListener = function(){
-    ok(true, 'ready method listener fired');
-  };
 
-  var comp = new Component(getFakePlayer(), {}, optionsReadyListener);
+  comp.ready(function(){
+    methodListenerFired = true;
+  });
+
+  comp.triggerReady();
+
+  comp.ready(function(){
+    syncListenerFired = true;
+  }, true);
+
+  ok(!initListenerFired, 'init listener should NOT fire synchronously');
+  ok(!methodListenerFired, 'method listener should NOT fire synchronously');
+  ok(syncListenerFired, 'sync listener SHOULD fire synchronously if after ready');
+
+  this.clock.tick(1);
+  ok(initListenerFired, 'init listener should fire asynchronously');
+  ok(methodListenerFired, 'method listener should fire asynchronously');
+
+  // Listeners should only be fired once and then removed
+  initListenerFired = false;
+  methodListenerFired = false;
+  syncListenerFired = false;
 
   comp.triggerReady();
   this.clock.tick(1);
 
-  comp.ready(methodReadyListener);
+  ok(!initListenerFired, 'init listener should be removed');
-  this.clock.tick(1);
+  ok(!methodListenerFired, 'method listener should be removed');
-
+  ok(!syncListenerFired, 'sync listener should be removed');
-  // First two listeners should only be fired once and then removed
-  comp.triggerReady();
-  this.clock.tick(1);
 });
 
 test('should add and remove a CSS class', function(){