Skip to content

Commit

Permalink
fix: show current playing quality in settings
Browse files Browse the repository at this point in the history
fix #877
  • Loading branch information
luwes committed Sep 18, 2024
1 parent 3dbd3ff commit f96cce6
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 5 deletions.
2 changes: 2 additions & 0 deletions src/js/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions src/js/media-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
)
);
Expand Down
16 changes: 16 additions & 0 deletions src/js/media-store/state-mediator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']>;
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion src/js/menu/media-chrome-menu-item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?? '';
Expand Down
11 changes: 11 additions & 0 deletions src/js/menu/media-rendition-menu-button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -34,6 +36,7 @@ class MediaRenditionMenuButton extends MediaChromeMenuButton {
...super.observedAttributes,
MediaUIAttributes.MEDIA_RENDITION_SELECTED,
MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
MediaUIAttributes.MEDIA_HEIGHT,
];
}

Expand Down Expand Up @@ -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')) {
Expand Down
31 changes: 28 additions & 3 deletions src/js/menu/media-rendition-menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
getMediaController,
getStringAttr,
setStringAttr,
getNumericAttr,
setNumericAttr,
} from '../utils/element-utils.js';
import { parseRenditionList } from '../utils/utils.js';
import {
Expand All @@ -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,
Expand All @@ -54,6 +57,11 @@ class MediaRenditionMenu extends MediaChromeMenu {
) {
this.#renditionList = parseRenditionList(newValue);
this.#render();
} else if (
attrName === MediaUIAttributes.MEDIA_HEIGHT &&
oldValue !== newValue
) {
this.#render();
}
}

Expand Down Expand Up @@ -97,9 +105,22 @@ 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
Expand Down Expand Up @@ -131,6 +152,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);
}
Expand Down
2 changes: 1 addition & 1 deletion src/js/menu/media-settings-menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit f96cce6

Please sign in to comment.