Reduce media selector size (#26033)

src/components/ha-selector/ha-selector-media.ts

@@ -24,6 +24,10 @@ const MANUAL_SCHEMA = [
   { name: "media_content_type", required: false, selector: { text: {} } },
 ] as const;
 
+const INCLUDE_DOMAINS = ["media_player"];
+
+const EMPTY_FORM = {};
+
 @customElement("ha-selector-media")
 export class HaMediaSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -84,7 +88,7 @@ export class HaMediaSelector extends LitElement {
       (stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
-    const hasAccept = this.selector.media?.accept?.length;
+    const hasAccept = this.selector?.media?.accept?.length;
 
     return html`
       ${hasAccept
@@ -100,7 +104,7 @@ export class HaMediaSelector extends LitElement {
               .disabled=${this.disabled}
               .helper=${this.helper}
               .required=${this.required}
-              include-domains='["media_player"]'
+              .includeDomains=${INCLUDE_DOMAINS}
               allow-custom-entity
               @value-changed=${this._entityChanged}
             ></ha-entity-picker>
@@ -114,7 +118,7 @@ export class HaMediaSelector extends LitElement {
             </ha-alert>
             <ha-form
               .hass=${this.hass}
-              .data=${this.value}
+              .data=${this.value || EMPTY_FORM}
               .schema=${MANUAL_SCHEMA}
               .computeLabel=${this._computeLabelCallback}
             ></ha-form>
@@ -122,21 +126,19 @@ export class HaMediaSelector extends LitElement {
         : html`
             <ha-card
               outlined
+              tabindex="0"
+              role="button"
+              aria-label=${!this.value?.media_content_id
+                ? this.hass.localize("ui.components.selectors.media.pick_media")
+                : this.value.metadata?.title || this.value.media_content_id}
               @click=${this._pickMedia}
+              @keydown=${this._handleKeyDown}
               class=${this.disabled || (!this.value?.entity_id && !hasAccept)
                 ? "disabled"
                 : ""}
             >
-              <div
-                class="thumbnail ${classMap({
-                  portrait:
-                    !!this.value?.metadata?.media_class &&
-                    MediaClassBrowserSettings[
-                      this.value.metadata.children_media_class ||
-                        this.value.metadata.media_class
-                    ].thumbnail_ratio === "portrait",
-                })}"
-              >
+              <div class="content-container">
+                <div class="thumbnail">
                   ${this.value?.metadata?.thumbnail
                     ? html`
                         <div
@@ -180,6 +182,7 @@ export class HaMediaSelector extends LitElement {
                       )
                     : this.value.metadata?.title || this.value.media_content_id}
                 </div>
+              </div>
             </ha-card>
           `}
     `;
@@ -229,6 +232,13 @@ export class HaMediaSelector extends LitElement {
     });
   }
 
+  private _handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._pickMedia();
+    }
+  }
+
   static styles = css`
     ha-entity-picker {
       display: block;
@@ -243,41 +253,52 @@ export class HaMediaSelector extends LitElement {
     }
     ha-card {
       position: relative;
-      width: 200px;
+      width: 100%;
       box-sizing: border-box;
       cursor: pointer;
+      transition: background-color 180ms ease-in-out;
+      min-height: 56px;
+    }
+    ha-card:hover:not(.disabled),
+    ha-card:focus:not(.disabled) {
+      background-color: var(--state-icon-hover-color, rgba(0, 0, 0, 0.04));
+    }
+    ha-card:focus {
+      outline: none;
     }
     ha-card.disabled {
       pointer-events: none;
       color: var(--disabled-text-color);
     }
+    .content-container {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      gap: 12px;
+    }
     ha-card .thumbnail {
-      width: 100%;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
       position: relative;
       box-sizing: border-box;
-      transition: padding-bottom 0.1s ease-out;
-      padding-bottom: 100%;
-    }
-    ha-card .thumbnail.portrait {
-      padding-bottom: 150%;
+      border-radius: 8px;
+      overflow: hidden;
     }
     ha-card .image {
-      border-radius: 3px 3px 0 0;
+      border-radius: 8px;
     }
     .folder {
-      --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
+      --mdc-icon-size: 24px;
     }
     .title {
-      font-size: var(--ha-font-size-l);
-      padding-top: 16px;
+      font-size: var(--ha-font-size-m);
       overflow: hidden;
       text-overflow: ellipsis;
-      margin-bottom: 16px;
-      padding-left: 16px;
-      padding-right: 4px;
-      padding-inline-start: 16px;
-      padding-inline-end: 4px;
       white-space: nowrap;
+      line-height: 1.4;
+      flex: 1;
+      min-width: 0;
     }
     .image {
       position: absolute;
@@ -290,13 +311,15 @@ export class HaMediaSelector extends LitElement {
       background-position: center;
     }
     .centered-image {
-      margin: 0 8px;
+      margin: 4px;
       background-size: contain;
     }
     .icon-holder {
       display: flex;
       justify-content: center;
       align-items: center;
+      width: 100%;
+      height: 100%;
     }
   `;
 }