Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 3, 2024

Conversation

amtins
Copy link
Contributor

@amtins amtins commented Feb 4, 2024

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

Copy link

codecov bot commented Feb 4, 2024

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.

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.

- 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
@amtins amtins force-pushed the fix/audio-only-mode-responsiveness branch from 5ab91c8 to daa319d Compare April 14, 2024 12:42
@mister-ben mister-ben merged commit 8050466 into videojs:main May 3, 2024
11 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants