fix(player): adapt player height to control bar height in audioOnly mode

src/js/player.js

@@ -359,6 +359,8 @@
     this.boundHandleTechTouchEnd_ = (e) => this.handleTechTouchEnd_(e);
     this.boundHandleTechTap_ = (e) => this.handleTechTap_(e);
 
+    this.boundUpdatePlayerHeightOnAudioOnlyMode_ = (e) => this.updatePlayerHeightOnAudioOnlyMode_(e);
+
     // default isFullscreen_ to false
     this.isFullscreen_ = false;
 
@@ -395,6 +397,7 @@
 
     // Init state audioOnlyCache_
     this.audioOnlyCache_ = {
+      controlBarHeight: null,
       playerHeight: null,
       hiddenChildren: []
     };
@@ -4496,6 +4499,17 @@
     return !!this.isAudio_;
   }
 
+  updatePlayerHeightOnAudioOnlyMode_() {
+    const controlBar = this.getChild('ControlBar');
+
+    if (!controlBar || this.audioOnlyCache_.controlBarHeight === controlBar.currentHeight()) {
+      return;
+    }
+
+    this.audioOnlyCache_.controlBarHeight = controlBar.currentHeight();
+    this.height(this.audioOnlyCache_.controlBarHeight);
+  }
+
   enableAudioOnlyUI_() {
     // Update styling immediately to show the control bar so we can get its height
     this.addClass('vjs-audio-only-mode');
@@ -4519,6 +4533,9 @@
     });
 
     this.audioOnlyCache_.playerHeight = this.currentHeight();
+    this.audioOnlyCache_.controlBarHeight = controlBarHeight;
+
+    this.on('playerresize', this.boundUpdatePlayerHeightOnAudioOnlyMode_);
 
     // Set the player height the same as the control bar
     this.height(controlBarHeight);
@@ -4527,6 +4544,7 @@
 
   disableAudioOnlyUI_() {
     this.removeClass('vjs-audio-only-mode');
+    this.off('playerresize', this.boundUpdatePlayerHeightOnAudioOnlyMode_);
 
     // Show player components that were previously hidden
     this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());

test/unit/player.test.js

@@ -3401,6 +3401,33 @@ QUnit.test('turning on audioPosterMode when audioOnlyMode is already on will tur
     });
 });
 
+QUnit.test('player height should match control bar height when audioOnlyMode is enabled', function(assert) {
+  const player = TestHelpers.makePlayer({ responsive: true, width: 320, height: 240 });
+
+  player.trigger('ready');
+
+  player.audioOnlyMode(true).then(() => {
+    const initialPlayerHeight = player.currentHeight();
+
+    player.width(768);
+    player.el().style.fontSize = '20px';
+    player.trigger('playerresize');
+
+    assert.ok(initialPlayerHeight !== player.currentHeight(), 'player height is updated');
+  })
+    .then(() => player.audioOnlyMode(false))
+    .then(() => {
+      const initialPlayerHeight = player.currentHeight();
+
+      player.width(768);
+      player.el().style.fontSize = '20px';
+      player.trigger('playerresize');
+
+      assert.equal(player.currentHeight(), initialPlayerHeight, 'player height remains unchanged');
+      assert.ok(initialPlayerHeight !== player.controlBar.currentHeight(), 'player height is different from control bar height');
+    });
+});
+
 QUnit.test('player#load resets the media element to its initial state', function(assert) {
   const player = TestHelpers.makePlayer({});