Skip to content

Commit

Permalink
fix(player): adapt player height to control bar height in audioOnly m…
Browse files Browse the repository at this point in the history
…ode (#8579)

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
  • Loading branch information
amtins authored May 3, 2024
1 parent 31b0378 commit 8050466
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 0 deletions.
18 changes: 18 additions & 0 deletions src/js/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,8 @@ class Player extends Component {
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;

Expand Down Expand Up @@ -396,6 +398,7 @@ class Player extends Component {

// Init state audioOnlyCache_
this.audioOnlyCache_ = {
controlBarHeight: null,
playerHeight: null,
hiddenChildren: []
};
Expand Down Expand Up @@ -4504,6 +4507,17 @@ class Player extends Component {
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');
Expand All @@ -4527,6 +4541,9 @@ class Player extends Component {
});

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);
Expand All @@ -4535,6 +4552,7 @@ class Player extends Component {

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());
Expand Down
27 changes: 27 additions & 0 deletions test/unit/player.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({});

Expand Down

0 comments on commit 8050466

Please sign in to comment.