From 85d83a779393bc2f96c8d4517981626112424552 Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Wed, 30 Dec 2020 13:16:27 +0100
Subject: [PATCH] fix(player): Ensure fluid works when dimensions not initially
 known

---
 src/js/player.js         |  8 ++++----
 test/unit/player.test.js | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/js/player.js b/src/js/player.js
index 9a8a9e1adb..c4d1567dc6 100644
--- a/src/js/player.js
+++ b/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');
diff --git a/test/unit/player.test.js b/test/unit/player.test.js
index b53f27612a..7c8535087a 100644
--- a/test/unit/player.test.js
+++ b/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();