Show number of hidden items (#11786)

This commit is contained in:
Paulus Schoutsen 2022-02-23 02:31:46 -08:00 committed by GitHub
parent 7e68393c84
commit 1dd1095d19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 7 deletions

View File

@ -158,10 +158,11 @@ export class HaMediaPlayerBrowse extends LitElement {
const subtitle = this.hass.localize(
`ui.components.media-browser.class.${currentItem.media_class}`
);
const children = currentItem.children || [];
const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
const childrenMediaClass =
MediaClassBrowserSettings[currentItem.children_media_class];
const childrenMediaClass = currentItem.children_media_class
? MediaClassBrowserSettings[currentItem.children_media_class]
: MediaClassBrowserSettings.directory;
return html`
${
@ -264,7 +265,7 @@ export class HaMediaPlayerBrowse extends LitElement {
@tts-picked=${this._ttsPicked}
></ha-browse-media-tts>
`
: !currentItem.children?.length
: !children.length && !currentItem.not_shown
? html`
<div class="container no-items">
${currentItem.media_content_id ===
@ -296,7 +297,7 @@ export class HaMediaPlayerBrowse extends LitElement {
childrenMediaClass.thumbnail_ratio === "portrait",
})}"
>
${currentItem.children.map(
${children.map(
(child) => html`
<div
class="child"
@ -360,11 +361,23 @@ export class HaMediaPlayerBrowse extends LitElement {
</div>
`
)}
${currentItem.not_shown
? html`
<div class="grid not-shown">
<div class="title">
${this.hass.localize(
"ui.components.media-browser.not_shown",
{ count: currentItem.not_shown }
)}
</div>
</div>
`
: ""}
</div>
`
: html`
<mwc-list>
${currentItem.children.map(
${children.map(
(child) => html`
<mwc-list-item
@click=${this._childClicked}
@ -408,6 +421,25 @@ export class HaMediaPlayerBrowse extends LitElement {
<li divider role="separator"></li>
`
)}
${currentItem.not_shown
? html`
<mwc-list-item
noninteractive
class="not-shown"
.graphic=${mediaClass.show_list_images
? "medium"
: "avatar"}
dir=${computeRTLDirection(this.hass)}
>
<span class="title">
${this.hass.localize(
"ui.components.media-browser.not_shown",
{ count: currentItem.not_shown }
)}
</span>
</mwc-list-item>
`
: ""}
</mwc-list>
`
}
@ -874,6 +906,17 @@ export class HaMediaPlayerBrowse extends LitElement {
transition: height 0.5s, margin 0.5s;
}
.not-shown {
font-style: italic;
color: var(--secondary-text-color);
}
.grid.not-shown {
display: flex;
align-items: center;
text-align: center;
}
/* ============= CHILDREN ============= */
mwc-list {

View File

@ -168,11 +168,12 @@ export interface MediaPlayerItem {
media_content_type: string;
media_content_id: string;
media_class: string;
children_media_class: string;
children_media_class?: string;
can_play: boolean;
can_expand: boolean;
thumbnail?: string;
children?: MediaPlayerItem[];
not_shown?: number;
}
export const browseMediaPlayer = (

View File

@ -533,6 +533,7 @@
"play-media": "Play Media",
"pick-media": "Pick Media",
"no_items": "No items",
"not_shown": "{count} incompatible {count, plural,\n one {item}\n other {items}\n} hidden",
"choose_player": "Choose Player",
"media-player-browser": "Media",
"web-browser": "Web Browser",