Skip to content

Commit

Permalink
fix(UI): Fix keyboard navigation of volume bar on Firefox (#5981)
Browse files Browse the repository at this point in the history
Fixes #3987
  • Loading branch information
avelad committed Dec 5, 2023
1 parent 2e30668 commit 4989803
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions ui/volume_bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
/** @private {!shaka.extern.UIConfiguration} */
this.config_ = this.controls.getConfig();

// We use a range of 100 to avoid problems with Firefox.
// See https://github.com/shaka-project/shaka-player/issues/3987
this.setRange(0, 100);

this.eventManager.listen(this.video,
'volumechange',
() => this.onPresentationVolumeChange_());
Expand Down Expand Up @@ -74,9 +78,9 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
*/
onChange() {
if (this.ad && this.ad.isLinear()) {
this.ad.setVolume(this.getValue());
this.ad.setVolume(this.getValue() / 100);
} else {
this.video.volume = this.getValue();
this.video.volume = this.getValue() / 100;
if (this.video.volume == 0) {
this.video.muted = true;
} else {
Expand All @@ -90,7 +94,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
if (this.video.muted) {
this.setValue(0);
} else {
this.setValue(this.video.volume);
this.setValue(this.video.volume * 100);
}

this.updateColors_();
Expand All @@ -102,16 +106,16 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
'This.ad should exist at this point!');

const volume = this.ad.getVolume();
this.setValue(volume);
this.setValue(volume * 100);
this.updateColors_();
}

/** @private */
updateColors_() {
const colors = this.config_.volumeBarColors;
const gradient = ['to right'];
gradient.push(colors.level + (this.getValue() * 100) + '%');
gradient.push(colors.base + (this.getValue() * 100) + '%');
gradient.push(colors.level + this.getValue() + '%');
gradient.push(colors.base + this.getValue() + '%');
gradient.push(colors.base + '100%');

this.container.style.background =
Expand Down

0 comments on commit 4989803

Please sign in to comment.