fix(UI): Fix keyboard navigation of volume bar on Firefox (#5981)

Fixes #3987
shaka-project · Dec 5, 2023 · 90f1d61 · 90f1d61
1 parent 8da033f
commit 90f1d61
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/ui/volume_bar.js b/ui/volume_bar.js
@@ -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_());
@@ -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 {
@@ -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_();
@@ -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 =