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

[amtins]

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.

Screencast.from.27.01.24.13.28.25.webm

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

[codecov]

Codecov Report

Attention: Patch coverage is 90.00000% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 82.87%. Comparing base (d715e0f) to head (daa319d).

Files	Patch %	Lines
src/js/player.js	90.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8579      +/-   ##
==========================================
+ Coverage   82.85%   82.87%   +0.02%     
==========================================
  Files         113      113              
  Lines        7647     7657      +10     
  Branches     1839     1840       +1     
==========================================
+ Hits         6336     6346      +10     
  Misses       1311     1311              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.