fix(player): Ensure fluid works when dimensions not initially known (#…

…7023)

The video dimensions aren't necessarily known at loadedmetadata particularly with native playback on iOS. In fluid mode, the player defaults to 16:9 and does not update once the dimensions are known.

- Updates player styles on resize events.
- Fixes arguments passed to addEventedCallback so the callbacks are executed.

Fixes #6939

src/js/player.js

@@ -473,7 +473,7 @@ class Player extends Component {
     }
 
     if (this.fluid_) {
-      this.on('playerreset', this.updateStyleEl_);
+      this.on(['playerreset', 'resize'], this.updateStyleEl_);
     }
     // We also want to pass the original player options to each component and plugin
     // as well so they don't need to reach back into the player for options later.
@@ -912,13 +912,13 @@ class Player extends Component {
     this.fluid_ = !!bool;
 
     if (isEvented(this)) {
-      this.off('playerreset', this.updateStyleEl_);
+      this.off(['playerreset', 'resize'], this.updateStyleEl_);
     }
     if (bool) {
       this.addClass('vjs-fluid');
       this.fill(false);
-      addEventedCallback(function() {
-        this.on('playerreset', this.updateStyleEl_);
+      addEventedCallback(this, () => {
+        this.on(['playerreset', 'resize'], this.updateStyleEl_);
       });
     } else {
       this.removeClass('vjs-fluid');

test/unit/player.test.js

@@ -480,6 +480,45 @@ QUnit.test('should default to 16:9 when fluid', function(assert) {
   player.dispose();
 });
 
+QUnit.test('should resize fluid player on resize', function(assert) {
+  const player = TestHelpers.makePlayer({fluid: true});
+  let ratio = player.currentHeight() / player.currentWidth();
+
+  // account for some rounding of 0.5625 up to 0.563
+  assert.ok(((ratio >= 0.562) && (ratio <= 0.563)), 'fluid player without dimensions defaults to 16:9');
+
+  player.tech_.videoWidth = () => 100;
+  player.tech_.videoHeight = () => 50;
+
+  player.trigger('resize');
+
+  this.clock.tick(1);
+
+  ratio = player.currentHeight() / player.currentWidth();
+
+  assert.ok(ratio === 0.5, 'player aspect ratio changed on resize event');
+
+  player.dispose();
+});
+
+QUnit.test('should resize fluid player on resize if fluid enabled post initialisation', function(assert) {
+  const player = TestHelpers.makePlayer({fluid: false});
+
+  player.tech_.videoWidth = () => 100;
+  player.tech_.videoHeight = () => 30;
+
+  player.fluid(true);
+  player.trigger('resize');
+
+  this.clock.tick(1);
+
+  const ratio = player.currentHeight() / player.currentWidth();
+
+  assert.ok(ratio === 0.3, 'player aspect ratio changed on resize event');
+
+  player.dispose();
+});
+
 QUnit.test('should set fluid to true if element has vjs-fluid class', function(assert) {
   const tag = TestHelpers.makeTag();