From 90f1d61fe0a980a2592706162de97556f25f5e17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <ladvan91@hotmail.com>
Date: Tue, 5 Dec 2023 08:09:09 +0100
Subject: [PATCH] fix(UI): Fix keyboard navigation of volume bar on Firefox
 (#5981)

Fixes https://github.com/shaka-project/shaka-player/issues/3987
---
 ui/volume_bar.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/volume_bar.js b/ui/volume_bar.js
index 2cdf9fcd81..822e14a055 100644
--- 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,7 +106,7 @@ 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_();
   }
 
@@ -110,8 +114,8 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
   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 =