Improve list view

home-assistant · Oct 25, 2023 · 5f932c8 · 5f932c8
1 parent ee82a85
commit 5f932c8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 31 deletions.
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
@@ -572,11 +572,12 @@ export class HaMediaPlayerBrowse extends LitElement {
             ${child.thumbnail
               ? html`
                   <div
-                    class="${["app", "directory"].includes(child.media_class)
-                      ? "centered-image"
-                      : ""} ${isBrandUrl(child.thumbnail)
-                      ? "brand-image"
-                      : ""} image"
+                    class="${classMap({
+                      "centered-image": ["app", "directory"].includes(
+                        child.media_class
+                      ),
+                      "brand-image": isBrandUrl(child.thumbnail),
+                    })} image"
                     style="background-image: ${until(backgroundImage, "")}"
                   ></div>
                 `
@@ -637,26 +638,37 @@ export class HaMediaPlayerBrowse extends LitElement {
         .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
         dir=${computeRTLDirection(this.hass)}
       >
-        <div
-          class=${classMap({
-            graphic: true,
-            thumbnail: mediaClass.show_list_images === true,
-          })}
-          style="background-image: ${until(backgroundImage, "")}"
-          slot="graphic"
-        >
-          <ha-icon-button
-            class="play ${classMap({
-              show: !mediaClass.show_list_images || !child.thumbnail,
-            })}"
-            .item=${child}
-            .label=${this.hass.localize(
-              `ui.components.media-browser.${this.action}-media`
-            )}
-            .path=${this.action === "play" ? mdiPlay : mdiPlus}
-            @click=${this._actionClicked}
-          ></ha-icon-button>
-        </div>
+        ${backgroundImage === "none" && !child.can_play
+          ? html`<ha-svg-icon
+              .path=${MediaClassBrowserSettings[
+                child.media_class === "directory"
+                  ? child.children_media_class || child.media_class
+                  : child.media_class
+              ].icon}
+              slot="graphic"
+            ></ha-svg-icon>`
+          : html`<div
+              class=${classMap({
+                graphic: true,
+                thumbnail: mediaClass.show_list_images === true,
+              })}
+              style="background-image: ${until(backgroundImage, "")}"
+              slot="graphic"
+            >
+              ${child.can_play
+                ? html`<ha-icon-button
+                    class="play ${classMap({
+                      show: !mediaClass.show_list_images || !child.thumbnail,
+                    })}"
+                    .item=${child}
+                    .label=${this.hass.localize(
+                      `ui.components.media-browser.${this.action}-media`
+                    )}
+                    .path=${this.action === "play" ? mdiPlay : mdiPlus}
+                    @click=${this._actionClicked}
+                  ></ha-icon-button>`
+                : nothing}
+            </div>`}
         <span class="title">${child.title}</span>
       </mwc-list-item>
     `;
@@ -917,7 +929,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           top: 0;
           right: 0;
           left: 0;
-          z-index: 5;
+          z-index: 3;
           padding: 16px;
         }
         .header_button {
@@ -1158,6 +1170,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         mwc-list-item .graphic {
           background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
           border-radius: 2px;
           display: flex;
           align-content: center;

diff --git a/src/data/media-player.ts b/src/data/media-player.ts
@@ -119,12 +119,13 @@ export const MediaClassBrowserSettings: {
   [type: string]: MediaClassBrowserSetting;
 } = {
   album: { icon: mdiAlbum, layout: "grid" },
-  app: { icon: mdiApplication, layout: "grid" },
+  app: { icon: mdiApplication, layout: "grid", show_list_images: true },
   artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true },
   channel: {
     icon: mdiTelevisionClassic,
     thumbnail_ratio: "portrait",
     layout: "grid",
+    show_list_images: true,
   },
   composer: {
     icon: mdiAccountMusicOutline,
@@ -141,22 +142,29 @@ export const MediaClassBrowserSettings: {
     icon: mdiTelevisionClassic,
     layout: "grid",
     thumbnail_ratio: "portrait",
+    show_list_images: true,
   },
   game: {
     icon: mdiGamepadVariant,
     layout: "grid",
     thumbnail_ratio: "portrait",
   },
   genre: { icon: mdiDramaMasks, layout: "grid", show_list_images: true },
-  image: { icon: mdiImage, layout: "grid" },
-  movie: { icon: mdiMovie, thumbnail_ratio: "portrait", layout: "grid" },
-  music: { icon: mdiMusic },
+  image: { icon: mdiImage, layout: "grid", show_list_images: true },
+  movie: {
+    icon: mdiMovie,
+    thumbnail_ratio: "portrait",
+    layout: "grid",
+    show_list_images: true,
+  },
+  music: { icon: mdiMusic, show_list_images: true },
   playlist: { icon: mdiPlaylistMusic, layout: "grid", show_list_images: true },
   podcast: { icon: mdiPodcast, layout: "grid" },
   season: {
     icon: mdiTelevisionClassic,
     layout: "grid",
     thumbnail_ratio: "portrait",
+    show_list_images: true,
   },
   track: { icon: mdiFileMusic },
   tv_show: {
@@ -165,7 +173,7 @@ export const MediaClassBrowserSettings: {
     thumbnail_ratio: "portrait",
   },
   url: { icon: mdiWeb },
-  video: { icon: mdiVideo, layout: "grid" },
+  video: { icon: mdiVideo, layout: "grid", show_list_images: true },
 };
 
 export interface MediaPickedEvent {