From becf5d329f175fe6cd3b3fa101bb9044c24525fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <ladvan91@hotmail.com>
Date: Mon, 23 Jun 2025 09:22:15 +0200
Subject: [PATCH] feat(UI): Use Mbps notation in resolution selector (#8779)

---
 test/ui/ui_unit.js         |  4 ++--
 ui/resolution_selection.js | 23 ++++++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/test/ui/ui_unit.js b/test/ui/ui_unit.js
index 81650efc6..ea3f54f92 100644
--- a/test/ui/ui_unit.js
+++ b/test/ui/ui_unit.js
@@ -710,7 +710,7 @@ describe('UI', () => {
             });
             manifest.addVariant(1, (variant) => {
               variant.addAudio(1);
-              variant.bandwidth = 200000;
+              variant.bandwidth = 2500000;
             });
           });
 
@@ -725,7 +725,7 @@ describe('UI', () => {
         const qualityOptions =
             Array.from(qualityButtons).map((btn) => btn.innerText);
 
-        expect(qualityOptions).toEqual(['200 kbits/s', '100 kbits/s']);
+        expect(qualityOptions).toEqual(['2.5 Mbps', '100 Kbps']);
       });
 
       /**
diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js
index 5f4c560a5..1b163cc8b 100644
--- a/ui/resolution_selection.js
+++ b/ui/resolution_selection.js
@@ -159,7 +159,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
         this.autoQuality.textContent = this.getResolutionLabel_(track, tracks);
       } else if (track.bandwidth) {
         this.autoQuality.textContent =
-            Math.round(track.bandwidth / 1000) + ' kbits/s';
+            this.getTextFromBandwidth_(track.bandwidth);
       } else {
         this.autoQuality.textContent = 'Unknown';
       }
@@ -414,7 +414,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
       if (track.height && track.width) {
         span.textContent = this.getResolutionLabel_(track, tracks);
       } else if (track.bandwidth) {
-        span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
+        span.textContent = this.getTextFromBandwidth_(track.bandwidth);
       } else {
         span.textContent = 'Unknown';
       }
@@ -496,8 +496,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
             otherTrack.bandwidth == track.bandwidth;
       });
       if (!hasDuplicateBandwidth) {
-        const bandwidth = track.bandwidth;
-        text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
+        text += ' (' + this.getTextFromBandwidth_(track.bandwidth) + ')';
       }
 
       if (this.controls.getConfig().showVideoCodec) {
@@ -534,7 +533,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
    * @private
    */
   getQualityLabel_(track, tracks) {
-    let text = Math.round(track.bandwidth / 1000) + ' kbits/s';
+    let text = this.getTextFromBandwidth_(track.bandwidth);
     if (this.controls.getConfig().showAudioCodec) {
       const getCodecName = (codecs) => {
         let name = '';
@@ -555,6 +554,20 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   }
 
 
+  /**
+   * @param {number} bandwidth
+   * @return {string}
+   * @private
+   */
+  getTextFromBandwidth_(bandwidth) {
+    if (bandwidth >= 1e6) {
+      return (bandwidth / 1e6).toFixed(1) + ' Mbps';
+    } else {
+      return Math.floor(bandwidth / 1e3) + ' Kbps';
+    }
+  }
+
+
   /**
    * @param {!shaka.extern.VideoTrack} track
    * @private