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({});