Show number of hidden items (#11786)

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 =
+    const childrenMediaClass = currentItem.children_media_class
-      MediaClassBrowserSettings[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 {

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 = (

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