From 45e9c515252f0512fd50cc4ef6da5d1aca8ce953 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 2 Jul 2025 18:08:31 +0200 Subject: [PATCH] Reduce media selector size (#26033) --- .../ha-selector/ha-selector-media.ts | 167 ++++++++++-------- 1 file changed, 95 insertions(+), 72 deletions(-) diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index def2f3d9bc..c4b3a25f11 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/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} > @@ -114,7 +118,7 @@ export class HaMediaSelector extends LitElement { @@ -122,63 +126,62 @@ export class HaMediaSelector extends LitElement { : html` -
- ${this.value?.metadata?.thumbnail - ? html` -
- ` - : html` -
- -
- `} -
-
- ${!this.value?.media_content_id - ? this.hass.localize( - "ui.components.selectors.media.pick_media" - ) - : this.value.metadata?.title || this.value.media_content_id} +
+
+ ${this.value?.metadata?.thumbnail + ? html` +
+ ` + : html` +
+ +
+ `} +
+
+ ${!this.value?.media_content_id + ? this.hass.localize( + "ui.components.selectors.media.pick_media" + ) + : this.value.metadata?.title || this.value.media_content_id} +
`} @@ -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%; } `; }