feat(UI): Show current playback rate and quality without hover (#8437)

Close #7444

Author: avelad

ui/less/overflow_menu.less

@@ -160,13 +160,15 @@
   line-height: 6px;
 }
 
-.shaka-overflow-quality-mark {
+.shaka-overflow-quality-mark,
+.shaka-overflow-playback-rate-mark {
   background: @quality-mark-hightlight-color;
   color: @quality-mark-color;
   border-radius: 2px;
   font-family: @general-font-family;
   font-size: 10px;
   font-weight: bold;
+  line-height: 10px;
   text-shadow: none;
   padding: 1px;
   position: absolute;

ui/playback_rate_selection.js

@@ -34,6 +34,12 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     this.menu.classList.add('shaka-playback-rates');
     this.button.classList.add('shaka-tooltip-status');
 
+    if (!Array.from(parent.classList).includes('shaka-overflow-menu')) {
+      this.playbackRateMark = shaka.util.Dom.createHTMLElement('span');
+      this.playbackRateMark.classList.add('shaka-overflow-playback-rate-mark');
+      this.button.appendChild(this.playbackRateMark);
+    }
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateLocalizedStrings_();
@@ -105,6 +111,9 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     // in the format of '1x', '1.5x', etc.
     this.currentSelection.textContent = rate + 'x';
     this.button.setAttribute('shaka-status', rate + 'x');
+    if (this.playbackRateMark) {
+      this.playbackRateMark.textContent = rate + 'x';
+    }
   }
 
   /** @private */

ui/resolution_selection.js

@@ -49,12 +49,16 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     this.qualityMark.classList.add('shaka-current-quality-mark');
     this.qualityMark.style.display = 'none';
 
-    if (this.parent.parentElement) {
+    if (!Array.from(parent.classList).includes('shaka-overflow-menu')) {
+      this.overflowQualityMark = shaka.util.Dom.createHTMLElement('span');
+      this.overflowQualityMark.classList.add(
+          'shaka-overflow-playback-rate-mark');
+      this.button.appendChild(this.overflowQualityMark);
+    } else if (this.parent.parentElement) {
       const parentElement =
           shaka.util.Dom.asHTMLElement(this.parent.parentElement);
       this.overflowQualityMark = shaka.util.Dom.getElementByClassNameIfItExists(
-          'shaka-overflow-quality-mark', parentElement,
-      );
+          'shaka-overflow-quality-mark', parentElement);
     }
 
     const spanWrapper = shaka.util.Dom.createHTMLElement('span');