feat(UI): Show the channel count in the audio selector (#5868)

ui/audio_language_selection.js

@@ -68,7 +68,8 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
     shaka.ui.LanguageUtils.updateTracks(tracks, this.menu,
         (track) => this.onAudioTrackSelected_(track),
         /* updateChosen= */ true, this.currentSelection, this.localization,
-        this.controls.getConfig().trackLabelFormat);
+        this.controls.getConfig().trackLabelFormat,
+        this.controls.getConfig().showAudioChannelCountVariants);
     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
 
     this.controls.dispatchEvent(
@@ -89,7 +90,13 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
    * @private
    */
   onAudioTrackSelected_(track) {
-    this.player.selectAudioLanguage(track.language, track.roles[0]);
+    if (track.channelsCount &&
+        this.controls.getConfig().showAudioChannelCountVariants) {
+      this.player.selectAudioLanguage(
+          track.language, track.roles[0], track.channelsCount);
+    } else {
+      this.player.selectAudioLanguage(track.language, track.roles[0]);
+    }
   }
 
 

ui/externs/ui.js

@@ -97,7 +97,8 @@ shaka.extern.UIVolumeBarColors;
  *   keyboardSeekDistance: number,
  *   keyboardLargeSeekDistance: number,
  *   fullScreenElement: HTMLElement,
- *   preferDocumentPictureInPicture: boolean
+ *   preferDocumentPictureInPicture: boolean,
+ *   showAudioChannelCountVariants: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -209,6 +210,11 @@ shaka.extern.UIVolumeBarColors;
  *   Changing this property in mid-playback may produce undesired behavior if
  *   you are already in PiP.
  *   Defaults to true.
+ * @property {boolean} showAudioChannelCountVariants
+ *   Indicates whether the combination of language and channel count should be
+ *   displayed or if, on the contrary, only the language should be displayed
+ *   regardless of the channel count.
+ *   Defaults to true.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

ui/language_utils.js

@@ -26,9 +26,13 @@ shaka.ui.LanguageUtils = class {
    * @param {!HTMLElement} currentSelectionElement
    * @param {shaka.ui.Localization} localization
    * @param {shaka.ui.Overlay.TrackLabelFormat} trackLabelFormat
+   * @param {boolean} showAudioChannelCountVariants
    */
   static updateTracks(tracks, langMenu, onTrackSelected, updateChosen,
-      currentSelectionElement, localization, trackLabelFormat) {
+      currentSelectionElement, localization, trackLabelFormat,
+      showAudioChannelCountVariants) {
+    const LocIds = shaka.ui.Locales.Ids;
+
     // TODO: Do the benefits of having this common code in a method still
     // outweigh the complexity of the parameter list?
     const selectedTrack = tracks.find((track) => {
@@ -55,12 +59,27 @@ shaka.ui.LanguageUtils = class {
       }
     };
 
-    const getCombination = (language, rolesString, label) => {
+    const getCombination = (language, rolesString, label, channelsCount) => {
+      const keys = [
+        language,
+        rolesString,
+      ];
+      if (showAudioChannelCountVariants && channelsCount != null) {
+        keys.push(channelsCount);
+      }
       if (label &&
           trackLabelFormat == shaka.ui.Overlay.TrackLabelFormat.LABEL) {
-        return language + ': ' + label + ': ' + rolesString;
+        keys.push(label);
+      }
+      return keys.join(': ');
+    };
+
+    const getChannelsCountName = (channelsCount) => {
+      let name = '';
+      if (channelsCount >= 5) {
+        name = ' ' + localization.resolve(LocIds.SURROUND);
       }
-      return language + ': ' + rolesString;
+      return name;
     };
 
     /** @type {!Map.<string, !Set.<string>>} */
@@ -77,16 +96,17 @@ shaka.ui.LanguageUtils = class {
     const combinationsMade = new Set();
     const selectedCombination = selectedTrack ? getCombination(
         selectedTrack.language, getRolesString(selectedTrack),
-        selectedTrack.label) : '';
+        selectedTrack.label, selectedTrack.channelsCount) : '';
 
     for (const track of tracks) {
       const language = track.language;
       const forced = track.forced;
-      const LocIds = shaka.ui.Locales.Ids;
       const forcedString = localization.resolve(LocIds.SUBTITLE_FORCED);
       const rolesString = getRolesString(track);
       const label = track.label;
-      const combinationName = getCombination(language, rolesString, label);
+      const channelsCount = track.channelsCount;
+      const combinationName =
+          getCombination(language, rolesString, label, channelsCount);
       if (combinationsMade.has(combinationName)) {
         continue;
       }
@@ -104,11 +124,17 @@ shaka.ui.LanguageUtils = class {
           shaka.ui.LanguageUtils.getLanguageName(language, localization);
       switch (trackLabelFormat) {
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (forced) {
             span.textContent += ' (' + forcedString + ')';
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.ROLE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (!rolesString) {
             // Fallback behavior. This probably shouldn't happen.
             shaka.log.alwaysWarn('Track #' + track.id + ' does not have a ' +
@@ -122,6 +148,9 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE_ROLE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (rolesString) {
             span.textContent += ': ' + rolesString;
           }

ui/locales/en.json

@@ -36,6 +36,7 @@
   "SKIP_TO_LIVE": "Skip ahead to live",
   "STATISTICS": "Statistics",
   "SUBTITLE_FORCED": "Forced",
+  "SURROUND": "Surround",
   "UNDETERMINED_LANGUAGE": "Undetermined",
   "UNMUTE": "Unmute",
   "UNRECOGNIZED_LANGUAGE": "Unrecognized",

ui/locales/es-419.json

@@ -32,6 +32,7 @@
   "SKIP_AD": "Omitir anuncio",
   "SKIP_TO_LIVE": "Adelantar hasta la transmisión en vivo",
   "SUBTITLE_FORCED": "Forzado",
+  "SURROUND": "Envolvente",
   "UNDETERMINED_LANGUAGE": "Sin especificar",
   "UNMUTE": "Dejar de silenciar",
   "UNRECOGNIZED_LANGUAGE": "No reconocida",

ui/locales/es.json

@@ -32,6 +32,7 @@
   "SKIP_AD": "Saltar anuncio",
   "SKIP_TO_LIVE": "Ir al vídeo en directo",
   "SUBTITLE_FORCED": "Forzado",
+  "SURROUND": "Envolvente",
   "UNDETERMINED_LANGUAGE": "Sin especificar",
   "UNMUTE": "Activar sonido",
   "UNRECOGNIZED_LANGUAGE": "No reconocida",

ui/locales/source.json

@@ -151,6 +151,10 @@
     "description": "Label used to identify a subtitle track that is forced to be shown.",
     "message": "Forced"
   },
+  "SURROUND": {
+    "description": "Label used to identify a audio track that has surround audio.",
+    "message": "Surround"
+  },
   "UNDETERMINED_LANGUAGE": {
     "description": "Label for a button used to select an audio track whose language is undetermined or unknown.",
     "message": "Undetermined"

ui/text_selection.js

@@ -135,7 +135,8 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         this.player.isTextTrackVisible(),
         this.currentSelection,
         this.localization,
-        this.controls.getConfig().trackLabelFormat);
+        this.controls.getConfig().trackLabelFormat,
+        this.controls.getConfig().showAudioChannelCountVariants);
 
     // Add the Off button
     const offButton = shaka.util.Dom.createButton();

ui/ui.js

@@ -248,6 +248,7 @@ shaka.ui.Overlay = class {
       keyboardLargeSeekDistance: 60,
       fullScreenElement: this.videoContainer_,
       preferDocumentPictureInPicture: true,
+      showAudioChannelCountVariants: true,
     };
 
     // eslint-disable-next-line no-restricted-syntax