diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index f4f5e49d5e..1895c78608 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -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} > ` - : !currentItem.children?.length + : !children.length && !currentItem.not_shown ? html`
${currentItem.media_content_id === @@ -296,7 +297,7 @@ export class HaMediaPlayerBrowse extends LitElement { childrenMediaClass.thumbnail_ratio === "portrait", })}" > - ${currentItem.children.map( + ${children.map( (child) => html`
` )} + ${currentItem.not_shown + ? html` +
+
+ ${this.hass.localize( + "ui.components.media-browser.not_shown", + { count: currentItem.not_shown } + )} +
+
+ ` + : ""}
` : html` - ${currentItem.children.map( + ${children.map( (child) => html` ` )} + ${currentItem.not_shown + ? html` + + + ${this.hass.localize( + "ui.components.media-browser.not_shown", + { count: currentItem.not_shown } + )} + + + ` + : ""} ` } @@ -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 { diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 087b431479..14b1a19c80 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -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 = ( diff --git a/src/translations/en.json b/src/translations/en.json index c538c0fc9a..250b37799d 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -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",