feat(UI): Add option to show the video codec name (#7747)

shaka-project · Dec 12, 2024 · 075c3fd · 075c3fd
1 parent 60429e9
commit 075c3fd
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/ui/externs/ui.js b/ui/externs/ui.js
@@ -99,7 +99,8 @@ shaka.extern.UIVolumeBarColors;
  *   defaultVrProjectionMode: string,
  *   setupMediaSession: boolean,
  *   preferVideoFullScreenInVisionOS: boolean,
- *   showAudioCodec: boolean
+ *   showAudioCodec: boolean,
+ *   showVideoCodec: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -265,6 +266,9 @@ shaka.extern.UIVolumeBarColors;
  * @property {boolean} showAudioCodec
  *   Show the audio codec if the language has more than one audio codec.
  *   Defaults to true.
+ * @property {boolean} showVideoCodec
+ *   Show the video codec if the resolution has more than one video codec.
+ *   Defaults to true.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js
@@ -20,6 +20,7 @@ goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.FakeEvent');
 goog.require('shaka.util.Functional');
+goog.require('shaka.util.MimeUtils');
 goog.requireType('shaka.ui.Controls');
 
 
@@ -125,23 +126,35 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
         tracks = tracks.filter((track, idx) => {
           // Keep the first one with the same height and framerate or bandwidth.
           const otherIdx = tracks.findIndex((t) => {
-            return t.height == track.height &&
+            let ret = t.height == track.height &&
                 t.videoBandwidth == track.videoBandwidth &&
                 t.frameRate == track.frameRate &&
                 t.hdr == track.hdr &&
                 t.videoLayout == track.videoLayout;
+            if (ret && this.controls.getConfig().showVideoCodec &&
+                t.videoCodec && track.videoCodec) {
+              ret = shaka.util.MimeUtils.getNormalizedCodec(t.videoCodec) ==
+                  shaka.util.MimeUtils.getNormalizedCodec(track.videoCodec);
+            }
+            return ret;
           });
           return otherIdx == idx;
         });
       } else {
         tracks = tracks.filter((track, idx) => {
           // Keep the first one with the same height and framerate or bandwidth.
           const otherIdx = tracks.findIndex((t) => {
-            return t.height == track.height &&
+            let ret = t.height == track.height &&
                 t.bandwidth == track.bandwidth &&
                 t.frameRate == track.frameRate &&
                 t.hdr == track.hdr &&
                 t.videoLayout == track.videoLayout;
+            if (ret && this.controls.getConfig().showVideoCodec &&
+                t.videoCodec && track.videoCodec) {
+              ret = shaka.util.MimeUtils.getNormalizedCodec(t.videoCodec) ==
+                  shaka.util.MimeUtils.getNormalizedCodec(track.videoCodec);
+            }
+            return ret;
           });
           return otherIdx == idx;
         });
@@ -284,8 +297,31 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
       return otherTrack != track && otherTrack.height == track.height;
     });
     if (hasDuplicateResolution) {
-      const bandwidth = track.videoBandwidth || track.bandwidth;
-      text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
+      const hasDuplicateBandwidth = tracks.some((otherTrack) => {
+        return otherTrack != track && otherTrack.height == track.height &&
+            (otherTrack.videoBandwidth || otherTrack.bandwidth) ==
+            (track.videoBandwidth || track.bandwidth);
+      });
+      if (!hasDuplicateBandwidth) {
+        const bandwidth = track.videoBandwidth || track.bandwidth;
+        text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
+      }
+
+      if (this.controls.getConfig().showVideoCodec) {
+        const getVideoCodecName = (videoCodec) => {
+          let name = '';
+          if (videoCodec) {
+            const codec = shaka.util.MimeUtils.getNormalizedCodec(videoCodec);
+            if (codec.startsWith('dovi-')) {
+              name = 'Dolby Vision';
+            } else {
+              name = codec.toUpperCase();
+            }
+          }
+          return name ? ' ' + name : name;
+        };
+        text += getVideoCodecName(track.videoCodec);
+      }
     }
     return text;
   }

diff --git a/ui/ui.js b/ui/ui.js
@@ -275,6 +275,7 @@ shaka.ui.Overlay = class {
       setupMediaSession: true,
       preferVideoFullScreenInVisionOS: false,
       showAudioCodec: true,
+      showVideoCodec: true,
     };
 
     // eslint-disable-next-line no-restricted-syntax