Description

Adapts the player.height to the controlBar.currentHeight when the audioOnlyMode is enabled. This ensures that the player height and control bar height are always in sync when the player is resized.

This issue occurs when the responsive, and audioOnlyMode options are set to true, and the base font size adapts based on the player’s size to create a more responsive user interface.

How to reproduce

• open codepen
• resize the page until a breakpoint is reached

<style>
.video-js {
  font-size: 20px;
  width: 100%;
}

.vjs-layout-small,
.vjs-layout-medium,
.vjs-layout-large {
  font-size:10px;
}
</style>
<video id="player" class="video-js" controls></video>
<script>
  const player = videojs('player', { responsive: true, audioOnlyMode: true });

  player.src('https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8');
</script>

Specific Changes proposed

• add updatePlayerHeightOnAudioOnlyMode_ function that will update the player height according to the control bar height when the player is resized
• modify enableAudioOnlyUI_
  • add a controlBarHeight to audioOnlyCache_ to keep track of the control bar height changes when the player is resized
  • add a playerresize listener
• modify disableAudioOnlyUI_ to remove the playerresize listener

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chrome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors