diff --git a/pyproject.toml b/pyproject.toml index 7a89b5f566..e83908af4e 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20250702.0" +version = "20250702.1" license = "Apache-2.0" license-files = ["LICENSE*"] description = "The Home Assistant frontend" diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index fdaad85c83..7a7fa68567 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -390,6 +390,7 @@ export class HaChartBase extends LitElement { type: "inside", orient: "horizontal", filterMode: "none", + xAxisIndex: 0, moveOnMouseMove: !this._isTouchDevice || this._isZoomed, preventDefaultMouseMove: !this._isTouchDevice || this._isZoomed, zoomLock: !this._isTouchDevice && !this._modifierPressed, 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%; } `; } diff --git a/src/panels/config/automation/action/types/ha-automation-action-play_media.ts b/src/panels/config/automation/action/types/ha-automation-action-play_media.ts index 9259d4ef62..0b77eba251 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-play_media.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-play_media.ts @@ -2,12 +2,19 @@ import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-selector/ha-selector-media"; +import "../../../../../components/ha-selector/ha-selector"; import type { PlayMediaAction } from "../../../../../data/script"; -import type { MediaSelectorValue } from "../../../../../data/selector"; +import type { + MediaSelectorValue, + Selector, +} from "../../../../../data/selector"; import type { HomeAssistant } from "../../../../../types"; import type { ActionElement } from "../ha-automation-action-row"; +const MEDIA_SELECTOR_SCHEMA: Selector = { + media: {}, +}; + @customElement("ha-automation-action-play_media") export class HaPlayMediaAction extends LitElement implements ActionElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -38,12 +45,13 @@ export class HaPlayMediaAction extends LitElement implements ActionElement { protected render() { return html` - + > `; } diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 2140038978..7c2759102d 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -243,11 +243,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { ); let itemsToShow = this._config?.forecast_slots ?? 5; - if (this._sizeController.value.width === "very-very-narrow") { + if (this._sizeController.value?.width === "very-very-narrow") { itemsToShow = Math.min(3, itemsToShow); - } else if (this._sizeController.value.width === "very-narrow") { + } else if (this._sizeController.value?.width === "very-narrow") { itemsToShow = Math.min(5, itemsToShow); - } else if (this._sizeController.value.width === "narrow") { + } else if (this._sizeController.value?.width === "narrow") { itemsToShow = Math.min(7, itemsToShow); } @@ -266,8 +266,12 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { return html`