feat(UI): Bucketize resolution names in the UI (shaka-project#5816)

Closes shaka-project#2090
Robloche · Nov 30, 2023 · cd18556 · cd18556
1 parent 746700e
commit cd18556
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 32 deletions.
diff --git a/test/ui/ui_integration.js b/test/ui/ui_integration.js
@@ -313,8 +313,6 @@ describe('UI', () => {
   describe('resolution selection', () => {
     /** @type {!Map.<number, !HTMLElement>} */
     let resolutionsToButtons;
-    /** @type {!Array.<number>} */
-    let resolutionsFromContent;
     /** @type {!Array.<!HTMLElement>} */
     let resolutionButtons;
     /** @type {!Element} */
@@ -329,6 +327,8 @@ describe('UI', () => {
     let preferredLanguage;
     /** @type {!shaka.extern.Track} */
     let oldResolutionTrack;
+    /** @type {number} */
+    let newResolutionTrackId;
 
     beforeEach(async () => {
       oldResolution = 182;
@@ -353,6 +353,7 @@ describe('UI', () => {
       updateResolutionButtonsAndMap();
 
       oldResolutionTrack = findTrackWithHeight(tracks, oldResolution);
+      newResolutionTrackId = findTrackWithHeight(tracks, newResolution).id;
 
       const selectedResolution =
           getSelectedTrack(player.getVariantTracks()).height;
@@ -363,9 +364,8 @@ describe('UI', () => {
     });
 
     it('contains all the relevant resolutions', () => {
-      const formattedResolutions = resolutionsFromContent.map((res) => {
-        return formatResolution(res);
-      });
+      const formattedResolutions =
+          tracks.map((t) => formatResolution(t.id, tracks));
       verifyItems(formattedResolutions, resolutionButtons);
     });
 
@@ -374,7 +374,7 @@ describe('UI', () => {
       tracks = player.getVariantTracks();
       expect(getSelectedTrack(tracks).height).toBe(oldResolution);
 
-      const button = resolutionsToButtons.get(newResolution);
+      const button = resolutionsToButtons.get(newResolutionTrackId);
       button.click();
 
       // Wait for the change to take effect
@@ -400,7 +400,7 @@ describe('UI', () => {
 
       expect(getSelectedTrack(tracks).height).toBe(newResolution);
 
-      const button = resolutionsToButtons.get(newResolution);
+      const button = resolutionsToButtons.get(newResolutionTrackId);
       const isChosen = button.querySelector('.shaka-chosen-item');
 
       expect(isChosen).not.toBe(null);
@@ -427,7 +427,7 @@ describe('UI', () => {
       const p = waiter.waitForEvent(controls, 'resolutionselectionupdated');
 
       // Any resolution would works
-      const button = resolutionsToButtons.get(newResolution);
+      const button = resolutionsToButtons.get(newResolutionTrackId);
       button.click();
 
       await p;
@@ -467,13 +467,26 @@ describe('UI', () => {
 
     /**
      * Gets the resolution to the same format it
-     * appears in the UI: height + 'p'.
+     * appears in the UI
      *
-     * @param {number} height
+     * @param {number} id
+     * @param {!Array.<!shaka.extern.Track>} tracks
      * @return {string}
      */
-    function formatResolution(height) {
-      return height.toString() + 'p';
+    function formatResolution(id, tracks) {
+      const track = tracks.find((t) => t.id == id);
+      const trackHeight = track.height || 0;
+      const trackWidth = track.width || 0;
+      let height = trackHeight;
+      const aspectRatio = trackWidth / trackHeight;
+      if (aspectRatio > (16 / 9)) {
+        height = Math.round(trackWidth * 9 / 16);
+      }
+      let text = height + 'p';
+      if (height == 2160) {
+        text = '4K';
+      }
+      return text;
     }
 
     /**
@@ -500,10 +513,6 @@ describe('UI', () => {
         return track.language == preferredLanguage;
       });
 
-      resolutionsFromContent = tracks.map((track) => {
-        return track.height;
-      });
-
       resolutionButtons = filterButtons(
           /* buttons= */ resolutionsMenu.childNodes,
           /* excludeClasses= */ [
@@ -513,8 +522,8 @@ describe('UI', () => {
 
       resolutionsToButtons = mapChoicesToButtons(
           /* buttons= */ resolutionButtons,
-          /* choices= */ resolutionsFromContent,
-          /* modifier= */ formatResolution);
+          /* choices= */ tracks.map((track) => track.id),
+          /* modifier= */ (id) => formatResolution(id, tracks));
     }
   });  // describe('resolution selection')
 
@@ -598,7 +607,7 @@ describe('UI', () => {
 
   /**
     * @param {!Array.<!HTMLElement>} buttons
-    * @param {!Array.<string>} choices
+    * @param {!Array.<string>|!Array.<number>} choices
     * @param {function(string):string|function(number):string} modifier
     * @return {!Map.<string, !HTMLElement>|!Map.<number, !HTMLElement>}
     */

diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js
@@ -140,21 +140,12 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           () => this.onTrackSelected_(track));
 
       const span = shaka.util.Dom.createHTMLElement('span');
-      if (this.player.isAudioOnly()) {
+      if (this.player.isAudioOnly() && track.bandwidth) {
         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
+      } else if (track.height && track.width) {
+        span.textContent = this.getResolutionLabel_(track);
       } else {
-        let text = track.height + 'p';
-        const frameRate = track.frameRate;
-        if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
-          text += Math.round(track.frameRate);
-        }
-        if (track.hdr == 'PQ' || track.hdr == 'HLG') {
-          text += ' (HDR)';
-        }
-        if (track.videoLayout == 'CH-STEREO') {
-          text += ' (3D)';
-        }
-        span.textContent = text;
+        span.textContent = 'Unknown';
       }
       button.appendChild(span);
 
@@ -206,6 +197,37 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   }
 
 
+  /**
+   * @param {!shaka.extern.Track} track
+   * @return {string}
+   * @private
+   */
+  getResolutionLabel_(track) {
+    const trackHeight = track.height || 0;
+    const trackWidth = track.width || 0;
+    let height = trackHeight;
+    const aspectRatio = trackWidth / trackHeight;
+    if (aspectRatio > (16 / 9)) {
+      height = Math.round(trackWidth * 9 / 16);
+    }
+    let text = height + 'p';
+    if (height == 2160) {
+      text = '4K';
+    }
+    const frameRate = track.frameRate;
+    if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
+      text += Math.round(track.frameRate);
+    }
+    if (track.hdr == 'PQ' || track.hdr == 'HLG') {
+      text += ' (HDR)';
+    }
+    if (track.videoLayout == 'CH-STEREO') {
+      text += ' (3D)';
+    }
+    return text;
+  }
+
+
   /**
    * @param {!shaka.extern.Track} track
    * @private