From fdab99c56dd019952287b6b9942153f1310397dc Mon Sep 17 00:00:00 2001
From: VandeurenGlenn <vandeurenglenn@gmail.com>
Date: Fri, 4 Oct 2024 18:21:12 +0200
Subject: [PATCH 1/3] Initial improve thumbnail performance

---
 .../ha-selector/ha-selector-media.ts          | 18 ++++++----
 .../media-player/ha-media-player-browse.ts    | 35 ++++++++-----------
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts
index 86fa91335d48..3e1081f45b68 100644
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -124,19 +124,23 @@ export class HaMediaSelector extends LitElement {
             >
               ${this.value?.metadata?.thumbnail
                 ? html`
-                    <div
+                    <img
+                      loading="lazy"
+                      alt=${!this.value?.media_content_id
+                        ? this.hass.localize(
+                            "ui.components.selectors.media.pick_media"
+                          )
+                        : this.value.metadata?.title ||
+                          this.value.media_content_id}
                       class="${classMap({
                         "centered-image":
                           !!this.value.metadata.media_class &&
                           ["app", "directory"].includes(
                             this.value.metadata.media_class
                           ),
-                      })}
-                        image"
-                      style=${this._thumbnailUrl
-                        ? `background-image: url(${this._thumbnailUrl});`
-                        : ""}
-                    ></div>
+                      })} image"
+                      src=${this._thumbnailUrl ?? ""}
+                    />
                   `
                 : html`
                     <div class="icon-holder image">
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index b0ed61efe5f1..fa2a53188b9e 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -344,10 +344,8 @@ export class HaMediaPlayerBrowse extends LitElement {
       : MediaClassBrowserSettings.directory;
 
     const backgroundImage = currentItem.thumbnail
-      ? this._getThumbnailURLorBase64(currentItem.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
+      ? this._getThumbnailURLorBase64(currentItem.thumbnail)
+      : undefined;
 
     return html`
               ${
@@ -363,13 +361,14 @@ export class HaMediaPlayerBrowse extends LitElement {
                         <div class="header-content">
                           ${currentItem.thumbnail
                             ? html`
-                                <div
-                                  class="img"
-                                  style="background-image: ${until(
-                                    backgroundImage,
-                                    ""
-                                  )}"
-                                >
+                                <div class="img">
+                                  <img
+                                    loading="lazy"
+                                    alt=${currentItem.title ??
+                                    currentItem.media_content_id}
+                                    src=${until(backgroundImage, "")}
+                                  />
+
                                   ${this.narrow && currentItem?.can_play
                                     ? html`
                                         <ha-fab
@@ -558,10 +557,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
     const backgroundImage = child.thumbnail
-      ? this._getThumbnailURLorBase64(child.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
+      ? this._getThumbnailURLorBase64(child.thumbnail)
+      : undefined;
 
     return html`
       <div class="child" .item=${child} @click=${this._childClicked}>
@@ -624,10 +621,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
     const backgroundImage =
       mediaClass.show_list_images && child.thumbnail
-        ? this._getThumbnailURLorBase64(child.thumbnail).then(
-            (value) => `url(${value})`
-          )
-        : "none";
+        ? this._getThumbnailURLorBase64(child.thumbnail)
+        : undefined;
 
     return html`
       <mwc-list-item
@@ -635,7 +630,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         .item=${child}
         .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
       >
-        ${backgroundImage === "none" && !child.can_play
+        ${backgroundImage === undefined && !child.can_play
           ? html`<ha-svg-icon
               .path=${MediaClassBrowserSettings[
                 child.media_class === "directory"

From 4520480c1715bd73dff6244006cc2b15abe2e129 Mon Sep 17 00:00:00 2001
From: VandeurenGlenn <vandeurenglenn@gmail.com>
Date: Fri, 11 Oct 2024 11:31:57 +0200
Subject: [PATCH 2/3] Fix css rules & add some padding around images

---
 .../media-player/ha-media-player-browse.ts    | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index fa2a53188b9e..3106fef09afc 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -566,15 +566,16 @@ export class HaMediaPlayerBrowse extends LitElement {
           <div class="thumbnail">
             ${child.thumbnail
               ? html`
-                  <div
+                  <img
+                    alt=${child.title}
                     class="${classMap({
                       "centered-image": ["app", "directory"].includes(
                         child.media_class
                       ),
                       "brand-image": isBrandUrl(child.thumbnail),
                     })} image"
-                    style="background-image: ${until(backgroundImage, "")}"
-                  ></div>
+                    src=${until(backgroundImage, "")}
+                  />
                 `
               : html`
                   <div class="icon-holder image">
@@ -644,9 +645,13 @@ export class HaMediaPlayerBrowse extends LitElement {
                 graphic: true,
                 thumbnail: mediaClass.show_list_images === true,
               })}
-              style="background-image: ${until(backgroundImage, "")}"
               slot="graphic"
             >
+              <img
+                alt=${child.title}
+                src=${until(backgroundImage, "")}
+                loading="lazy"
+              />
               ${child.can_play
                 ? html`<ha-icon-button
                     class="play ${classMap({
@@ -1067,27 +1072,22 @@ export class HaMediaPlayerBrowse extends LitElement {
         }
 
         ha-card .image {
-          border-radius: 3px 3px 0 0;
+          border-radius: var(--ha-card-border-radius, 12px);
+          padding: 4px;
+          box-sizing: border-box;
         }
 
         .image {
+          aspect-ratio: 1 / 1;
+          width: 100%;
           position: absolute;
-          top: 0;
-          right: 0;
-          left: 0;
-          bottom: 0;
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center;
-        }
-
-        .centered-image {
-          margin: 0 8px;
-          background-size: contain;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
         }
 
         .brand-image {
-          background-size: 40%;
+          width: 40%;
         }
 
         .children ha-card .icon-holder {

From 543f053a79ba8886f65201f609e62597280cc262 Mon Sep 17 00:00:00 2001
From: VandeurenGlenn <vandeurenglenn@gmail.com>
Date: Fri, 11 Oct 2024 18:56:39 +0200
Subject: [PATCH 3/3] show image even when there is no thumbnail

---
 .../media-player/ha-media-player-browse.ts    | 142 ++++++++++++------
 1 file changed, 98 insertions(+), 44 deletions(-)

diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 3106fef09afc..b20d66589061 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -36,7 +36,10 @@ import {
   MediaPlayerBrowseAction,
   MediaPlayerLayoutType,
 } from "../../data/media-player";
-import { browseLocalMediaPlayer } from "../../data/media_source";
+import {
+  browseLocalMediaPlayer,
+  resolveMediaSource,
+} from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
@@ -86,7 +89,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @property() public action: MediaPlayerBrowseAction = "play";
 
-  @property() public preferredLayout: MediaPlayerLayoutType = "auto";
+  @property({ reflect: true, attribute: "preferred-layout" })
+  public preferredLayout: MediaPlayerLayoutType = "auto";
 
   @property({ type: Boolean }) public dialog = false;
 
@@ -98,6 +102,8 @@ export class HaMediaPlayerBrowse extends LitElement {
   // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
   @property({ type: Boolean, reflect: true }) public scrolled = false;
 
+  @property({ attribute: false }) public backgroundImage: string | undefined;
+
   @state() private _error?: { message: string; code: string };
 
   @state() private _parentItem?: MediaPlayerItem;
@@ -363,10 +369,10 @@ export class HaMediaPlayerBrowse extends LitElement {
                             ? html`
                                 <div class="img">
                                   <img
-                                    loading="lazy"
                                     alt=${currentItem.title ??
                                     currentItem.media_content_id}
                                     src=${until(backgroundImage, "")}
+                                    loading="lazy"
                                   />
 
                                   ${this.narrow && currentItem?.can_play
@@ -481,7 +487,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                           childrenMediaClass.layout === "grid")
                       ? html`
                           <lit-virtualizer
-                            scroller
                             .layout=${grid({
                               itemSize: {
                                 width: "175px",
@@ -521,7 +526,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                       : html`
                           <mwc-list>
                             <lit-virtualizer
-                              scroller
                               .items=${children}
                               style=${styleMap({
                                 height: `${children.length * 72 + 26}px`,
@@ -558,13 +562,17 @@ export class HaMediaPlayerBrowse extends LitElement {
   private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
     const backgroundImage = child.thumbnail
       ? this._getThumbnailURLorBase64(child.thumbnail)
-      : undefined;
+      : child.media_class === "image"
+        ? resolveMediaSource(this.hass, child.media_content_id).then(
+            ({ url }) => url
+          )
+        : undefined;
 
     return html`
       <div class="child" .item=${child} @click=${this._childClicked}>
         <ha-card outlined>
           <div class="thumbnail">
-            ${child.thumbnail
+            ${child.thumbnail || child.media_class === "image"
               ? html`
                   <img
                     alt=${child.title}
@@ -572,9 +580,12 @@ export class HaMediaPlayerBrowse extends LitElement {
                       "centered-image": ["app", "directory"].includes(
                         child.media_class
                       ),
-                      "brand-image": isBrandUrl(child.thumbnail),
+                      "brand-image": child.thumbnail
+                        ? isBrandUrl(child.thumbnail)
+                        : false,
                     })} image"
                     src=${until(backgroundImage, "")}
+                    loading="lazy"
                   />
                 `
               : html`
@@ -620,10 +631,16 @@ export class HaMediaPlayerBrowse extends LitElement {
     const currentItem = this._currentItem;
     const mediaClass = MediaClassBrowserSettings[currentItem!.media_class];
 
-    const backgroundImage =
-      mediaClass.show_list_images && child.thumbnail
+    let backgroundImage;
+    if (mediaClass.show_list_images) {
+      backgroundImage = child.thumbnail
         ? this._getThumbnailURLorBase64(child.thumbnail)
-        : undefined;
+        : child.media_class === "image"
+          ? resolveMediaSource(this.hass, child.media_content_id).then(
+              ({ url }) => url
+            )
+          : undefined;
+    }
 
     return html`
       <mwc-list-item
@@ -640,32 +657,54 @@ export class HaMediaPlayerBrowse extends LitElement {
               ].icon}
               slot="graphic"
             ></ha-svg-icon>`
-          : html`<div
-              class=${classMap({
-                graphic: true,
-                thumbnail: mediaClass.show_list_images === true,
-              })}
-              slot="graphic"
-            >
-              <img
-                alt=${child.title}
-                src=${until(backgroundImage, "")}
-                loading="lazy"
-              />
-              ${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>`}
+          : backgroundImage === undefined
+            ? 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>
+                ${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}`
+            : html`<div
+                class=${classMap({
+                  graphic: true,
+                  thumbnail: mediaClass.show_list_images === true,
+                })}
+                slot="graphic"
+              >
+                <img
+                  alt=${child.title}
+                  src=${until(backgroundImage, "")}
+                  loading="lazy"
+                />
+                ${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>
     `;
@@ -909,10 +948,17 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         .content {
           overflow-y: auto;
-          box-sizing: border-box;
           height: 100%;
         }
 
+        :host([preferred-layout="list"]) .content {
+          align-items: center;
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          padding: 4px;
+        }
+
         /* HEADER */
 
         .header {
@@ -1016,6 +1062,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           --mdc-list-item-graphic-margin: 0;
           --mdc-theme-text-icon-on-background: var(--secondary-text-color);
           margin-top: 10px;
+          width: 100%;
+          max-width: 1120px;
         }
 
         mwc-list li:last-child {
@@ -1077,8 +1125,13 @@ export class HaMediaPlayerBrowse extends LitElement {
           box-sizing: border-box;
         }
 
+        :host([preferred-layout="list"]) img {
+          height: 56px;
+          width: 56px;
+        }
+
         .image {
-          aspect-ratio: 1 / 1;
+          max-height: 173px;
           width: 100%;
           position: absolute;
           top: 50%;
@@ -1158,10 +1211,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-left: 16px;
         }
 
-        mwc-list-item .graphic {
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center;
+        mwc-list-item .graphic,
+        mwc-list-item .graphic img {
           border-radius: 2px;
           display: flex;
           align-content: center;
@@ -1169,6 +1220,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           line-height: initial;
         }
 
+        mwc-list-item .graphic img {
+          position: absolute;
+        }
+
         mwc-list-item .graphic .play {
           opacity: 0;
           transition: all 0.5s;
@@ -1314,7 +1369,6 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         lit-virtualizer {
           height: 100%;
-          overflow: overlay !important;
           contain: size layout !important;
         }