feat(UI): Add alwaysShowVolumeBar config (#8807)

Author: avelad

ui/externs/ui.js

@@ -137,7 +137,8 @@ shaka.extern.UIQualityMarks;
  *   showAudioCodec: boolean,
  *   showVideoCodec: boolean,
  *   castSenderUrl: string,
- *   enableKeyboardPlaybackControlsInWindow: boolean
+ *   enableKeyboardPlaybackControlsInWindow: boolean,
+ *   alwaysShowVolumeBar: boolean
  * }}
  *
  * @property {!Array<string>} controlPanelElements
@@ -374,6 +375,11 @@ shaka.extern.UIQualityMarks;
  *   <code>enableKeyboardPlaybackControls</code> is true.
  *   <br>
  *   Defaults to <code>false</code>.
+ * @property {boolean} alwaysShowVolumeBar
+ *   Always show the volume bar, even when the volume and mute bars are next to
+ *   each other.
+ *   <br>
+ *   Defaults to <code>false</code>.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

ui/less/range_elements.less

@@ -164,19 +164,20 @@
     }
   }
 
-  .shaka-mute-button:hover + .shaka-volume-bar-container {
+  .shaka-mute-button:hover + .shaka-volume-bar-container-allow-hiding {
     width: 50px;
     opacity: 1;
   }
 }
 
-.shaka-mute-button + .shaka-volume-bar-container:not(:focus-within) {
+/* stylelint-disable-next-line max-line-length */
+.shaka-mute-button + .shaka-volume-bar-container-allow-hiding:not(:focus-within) {
   width: 0;
   opacity: 0;
 }
 
 @media (min-width: 475px) {
-  .shaka-mute-button:hover + .shaka-volume-bar-container {
+  .shaka-mute-button:hover + .shaka-volume-bar-container-allow-hiding {
     width: 100px;
     opacity: 1;
   }

ui/ui.js

@@ -379,6 +379,7 @@ shaka.ui.Overlay = class {
       showVideoCodec: true,
       castSenderUrl: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js',
       enableKeyboardPlaybackControlsInWindow: false,
+      alwaysShowVolumeBar: false,
     };
 
     // On mobile, by default, hide the volume slide and the small play/pause

ui/volume_bar.js

@@ -33,6 +33,10 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
     /** @private {!shaka.extern.UIConfiguration} */
     this.config_ = this.controls.getConfig();
 
+    if (!this.config_.alwaysShowVolumeBar) {
+      this.container.classList.add('shaka-volume-bar-container-allow-hiding');
+    }
+
     // 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);