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",