fix: show current playing quality in settings (#970)

fix #877


https://media-chrome-git-fork-luwes-show-auto-quality-mux.vercel.app/examples/vanilla/advanced.html

src/js/constants.ts

@@ -42,6 +42,8 @@ export const MediaUIProps = {
   MEDIA_CAST_UNAVAILABLE: 'mediaCastUnavailable',
   MEDIA_RENDITION_UNAVAILABLE: 'mediaRenditionUnavailable',
   MEDIA_AUDIO_TRACK_UNAVAILABLE: 'mediaAudioTrackUnavailable',
+  MEDIA_WIDTH: 'mediaWidth',
+  MEDIA_HEIGHT: 'mediaHeight',
   MEDIA_PAUSED: 'mediaPaused',
   MEDIA_HAS_PLAYED: 'mediaHasPlayed',
   MEDIA_ENDED: 'mediaEnded',

src/js/media-container.ts

@@ -296,6 +296,8 @@ class MediaContainer extends globalThis.HTMLElement {
               MediaUIAttributes.MEDIA_RENDITION_LIST,
               MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
               MediaUIAttributes.MEDIA_CHAPTERS_CUES,
+              MediaUIAttributes.MEDIA_WIDTH,
+              MediaUIAttributes.MEDIA_HEIGHT,
             ].includes(name as any)
         )
     );

src/js/media-store/state-mediator.ts

@@ -193,6 +193,8 @@ export type FacadeProp<T, S = T, D = T> = ReadonlyFacadeProp<T, D> & {
  *
  */
 export type StateMediator = {
+  mediaWidth: ReadonlyFacadeProp<number>;
+  mediaHeight: ReadonlyFacadeProp<number>;
   mediaPaused: FacadeProp<HTMLMediaElement['paused']>;
   mediaHasPlayed: ReadonlyFacadeProp<boolean>;
   mediaEnded: ReadonlyFacadeProp<HTMLMediaElement['ended']>;
@@ -281,6 +283,20 @@ export const prepareStateOwners = async (
 };
 
 export const stateMediator: StateMediator = {
+  mediaWidth: {
+    get(stateOwners) {
+      const { media } = stateOwners;
+      return media?.videoWidth ?? 0;
+    },
+    mediaEvents: ['resize'],
+  },
+  mediaHeight: {
+    get(stateOwners) {
+      const { media } = stateOwners;
+      return media?.videoHeight ?? 0;
+    },
+    mediaEvents: ['resize'],
+  },
   mediaPaused: {
     get(stateOwners) {
       const { media } = stateOwners;

src/js/menu/media-chrome-menu-item.ts

@@ -398,7 +398,8 @@ class MediaChromeMenuItem extends globalThis.HTMLElement {
     const descriptionSlot = this.shadowRoot.querySelector(
       'slot[name="description"]'
     );
-    const description = this.submenuElement.checkedItems?.[0]?.text;
+    const checkedItem = this.submenuElement.checkedItems?.[0];
+    const description = checkedItem?.dataset.description ?? checkedItem?.text;
 
     const span = document.createElement('span');
     span.textContent = description ?? '';

src/js/menu/media-rendition-menu-button.ts

@@ -6,6 +6,8 @@ import {
   getStringAttr,
   setStringAttr,
   getMediaController,
+  getNumericAttr,
+  setNumericAttr,
 } from '../utils/element-utils.js';
 
 const renditionIcon = /*html*/ `<svg aria-hidden="true" viewBox="0 0 24 24">
@@ -34,6 +36,7 @@ class MediaRenditionMenuButton extends MediaChromeMenuButton {
       ...super.observedAttributes,
       MediaUIAttributes.MEDIA_RENDITION_SELECTED,
       MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT,
     ];
   }
 
@@ -64,6 +67,14 @@ class MediaRenditionMenuButton extends MediaChromeMenuButton {
   set mediaRenditionSelected(id: string) {
     setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
   }
+
+  get mediaHeight(): number {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+  }
+
+  set mediaHeight(height: number) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
 }
 
 if (!globalThis.customElements.get('media-rendition-menu-button')) {

src/js/menu/media-rendition-menu.ts

@@ -4,6 +4,8 @@ import {
   getMediaController,
   getStringAttr,
   setStringAttr,
+  getNumericAttr,
+  setNumericAttr,
 } from '../utils/element-utils.js';
 import { parseRenditionList } from '../utils/utils.js';
 import {
@@ -30,11 +32,12 @@ class MediaRenditionMenu extends MediaChromeMenu {
       MediaUIAttributes.MEDIA_RENDITION_LIST,
       MediaUIAttributes.MEDIA_RENDITION_SELECTED,
       MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT,
     ];
   }
 
   #renditionList: Rendition[] = [];
-  #prevState;
+  #prevState: Record<string, any> = {};
 
   attributeChangedCallback(
     attrName: string,
@@ -54,6 +57,11 @@ class MediaRenditionMenu extends MediaChromeMenu {
     ) {
       this.#renditionList = parseRenditionList(newValue);
       this.#render();
+    } else if (
+      attrName === MediaUIAttributes.MEDIA_HEIGHT &&
+      oldValue !== newValue
+    ) {
+      this.#render();
     }
   }
 
@@ -97,14 +105,34 @@ class MediaRenditionMenu extends MediaChromeMenu {
     setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
   }
 
+  get mediaHeight(): number {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+  }
+
+  set mediaHeight(height: number) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
+
   #render(): void {
-    if (this.#prevState === JSON.stringify(this.mediaRenditionList)) return;
-    this.#prevState = JSON.stringify(this.mediaRenditionList);
+    if (
+      this.#prevState.mediaRenditionList === JSON.stringify(this.mediaRenditionList) &&
+      this.#prevState.mediaHeight === this.mediaHeight
+    ) return;
+
+    this.#prevState.mediaRenditionList = JSON.stringify(this.mediaRenditionList);
+    this.#prevState.mediaHeight = this.mediaHeight;
 
     const renditionList = this.mediaRenditionList.sort(
       (a: any, b: any) => b.height - a.height
     );
 
+    for (const rendition of renditionList) {
+      // `selected` is not serialized in the rendition list because
+      // each selection would cause a re-render of the menu.
+      // @ts-ignore
+      rendition.selected = rendition.id === this.mediaRenditionSelected;
+    }
+
     this.defaultSlot.textContent = '';
 
     const isAuto = !this.mediaRenditionSelected;
@@ -131,6 +159,10 @@ class MediaRenditionMenu extends MediaChromeMenu {
       value: 'auto',
       checked: isAuto,
     });
+
+    const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : 'Auto';
+    item.dataset.description = autoDescription;
+
     item.prepend(createIndicator(this, 'checked-indicator'));
     this.defaultSlot.append(item);
   }

src/js/menu/media-settings-menu.ts

@@ -11,7 +11,7 @@ template.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/`
         var(--media-menu-background,
         var(--media-control-background,
         var(--media-secondary-color, rgb(20 20 30 / .8)))));
-      min-width: var(--media-settings-menu-min-width, 160px);
+      min-width: var(--media-settings-menu-min-width, 170px);
       border-radius: 2px 2px 0 0;
       overflow: hidden;
     }