Merge pull request #11899 from home-assistant/dev

gallery/src/pages/components/ha-selector.ts

@@ -279,7 +279,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           can_play: true,
           can_expand: false,
           children_media_class: null,
-          thumbnail: null,
+          thumbnail: "https://brands.home-assistant.io/_/image/logo.png",
         },
         {
           title: "movie.mp4",

hassio/src/addon-store/hassio-addon-store.ts

@@ -110,8 +110,6 @@ class HassioAddonStore extends LitElement {
               <div class="search">
                 <search-input
                   .hass=${this.hass}
-                  no-label-float
-                  no-underline
                   .filter=${this._filter}
                   @value-changed=${this._filterChanged}
                 ></search-input>

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -80,8 +80,6 @@ class HassioHardwareDialog extends LitElement {
           ></ha-icon-button>
           <search-input
             .hass=${this.hass}
-            dialogInitialFocus
-            no-label-float
             .filter=${this._filter}
             @value-changed=${this._handleSearchChange}
             .label=${this._dialogParams.supervisor.localize(

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -106,6 +106,9 @@ class HassioRepositoriesDialog extends LitElement {
                     </paper-item-body>
                     <div class="delete">
                       <ha-icon-button
+                        .label=${this._dialogParams!.supervisor.localize(
+                          "dialog.repositories.remove"
+                        )}
                         .disabled=${usedRepositories.includes(repo.slug)}
                         .slug=${repo.slug}
                         .path=${usedRepositories.includes(repo.slug)

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220226.0
+version      = 20220301.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/components/date-range-picker.ts

@@ -115,6 +115,9 @@ class DateRangePickerElement extends WrappedElement {
             color: var(--primary-text-color);
             min-width: initial !important;
           }
+          .daterangepicker:after {
+            display: none;
+          }
           .daterangepicker:after {
             border-bottom: 6px solid var(--card-background-color);
           }

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

@@ -51,10 +51,11 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
   private _filterEntities = (entity: HassEntity): boolean => {
     if (this.selector.entity?.domain) {
       const filterDomain = this.selector.entity.domain;
+      const filterDomainIsArray = Array.isArray(filterDomain);
       const entityDomain = computeStateDomain(entity);
       if (
-        (Array.isArray(filterDomain) && !filterDomain.includes(entityDomain)) ||
+        (filterDomainIsArray && !filterDomain.includes(entityDomain)) ||
-        entityDomain !== filterDomain
+        (!filterDomainIsArray && entityDomain !== filterDomain)
       ) {
         return false;
       }

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

@@ -12,6 +12,7 @@ import {
 } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-form/ha-form";
 import type { HaFormSchema } from "../ha-form/types";
@@ -50,6 +51,18 @@ export class HaMediaSelector extends LitElement {
         getSignedPath(this.hass, thumbnail).then((signedPath) => {
           this._thumbnailUrl = signedPath.path;
         });
+      } else if (
+        thumbnail &&
+        thumbnail.startsWith("https://brands.home-assistant.io")
+      ) {
+        // The backend is not aware of the theme used by the users,
+        // so we rewrite the URL to show a proper icon
+        this._thumbnailUrl = brandsUrl({
+          domain: extractDomainFromBrandUrl(thumbnail),
+          type: "icon",
+          useFallback: true,
+          darkOptimized: this.hass.themes?.darkMode,
+        });
       } else {
         this._thumbnailUrl = thumbnail;
       }

src/components/media-player/ha-media-player-browse.ts

@@ -34,23 +34,24 @@ import {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
 } from "../../data/media-player";
+import { browseLocalMediaPlayer } from "../../data/media_source";
+import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
 import "../ha-card";
 import type { HaCard } from "../ha-card";
 import "../ha-circular-progress";
+import "../ha-fab";
 import "../ha-icon-button";
 import "../ha-svg-icon";
-import "../ha-fab";
-import { browseLocalMediaPlayer } from "../../data/media_source";
-import { isTTSMediaSource } from "../../data/tts";
-import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
 import "./ha-browse-media-tts";
+import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
 
 declare global {
   interface HASSDomEvents {
@@ -681,6 +682,17 @@ export class HaMediaPlayerBrowse extends LitElement {
                 // Thumbnails served by local API require authentication
                 const signedPath = await getSignedPath(this.hass, thumbnailUrl);
                 thumbnailUrl = signedPath.path;
+              } else if (
+                thumbnailUrl.startsWith("https://brands.home-assistant.io")
+              ) {
+                // The backend is not aware of the theme used by the users,
+                // so we rewrite the URL to show a proper icon
+                thumbnailUrl = brandsUrl({
+                  domain: extractDomainFromBrandUrl(thumbnailUrl),
+                  type: "icon",
+                  useFallback: true,
+                  darkOptimized: this.hass.themes?.darkMode,
+                });
               }
               thumbnailCard.style.backgroundImage = `url(${thumbnailUrl})`;
               observer.unobserve(thumbnailCard); // loaded, so no need to observe anymore

src/data/input_datetime.ts

@@ -1,3 +1,4 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface InputDateTime {
@@ -17,6 +18,19 @@ export interface InputDateTimeMutableParams {
   has_date: boolean;
 }
 
+export const stateToIsoDateString = (entityState: HassEntity) =>
+  `${entityState.attributes.year || "1970"}-${String(
+    entityState.attributes.month || "01"
+  ).padStart(2, "0")}-${String(entityState.attributes.day || "01").padStart(
+    2,
+    "0"
+  )}T${String(entityState.attributes.hour || "00").padStart(2, "0")}:${String(
+    entityState.attributes.minute || "00"
+  ).padStart(2, "0")}:${String(entityState.attributes.second || "00").padStart(
+    2,
+    "0"
+  )}`;
+
 export const setInputDateTimeValue = (
   hass: HomeAssistant,
   entityId: string,

src/dialogs/more-info/controls/more-info-input_datetime.ts

@@ -4,7 +4,10 @@ import { customElement, property } from "lit/decorators";
 import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
-import { setInputDateTimeValue } from "../../../data/input_datetime";
+import {
+  setInputDateTimeValue,
+  stateToIsoDateString,
+} from "../../../data/input_datetime";
 import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-input_datetime")
@@ -24,7 +27,7 @@ class MoreInfoInputDatetime extends LitElement {
             ? html`
                 <ha-date-input
                   .locale=${this.hass.locale}
-                  .value=${`${this.stateObj.attributes.year}-${this.stateObj.attributes.month}-${this.stateObj.attributes.day}`}
+                  .value=${stateToIsoDateString(this.stateObj)}
                   .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
                   @value-changed=${this._dateChanged}
                 >

src/mixins/subscribe-mixin.ts

@@ -13,6 +13,9 @@ export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
   class SubscribeClass extends superClass {
     @property({ attribute: false }) public hass?: HomeAssistant;
 
+    // we wait with subscribing till these properties are set on the host element
+    protected hassSubscribeRequiredHostProps?: string[];
+
     private __unsubs?: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>>;
 
     public connectedCallback() {
@@ -39,6 +42,16 @@ export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
       super.updated(changedProps);
       if (changedProps.has("hass")) {
         this.__checkSubscribed();
+        return;
+      }
+      if (!this.hassSubscribeRequiredHostProps) {
+        return;
+      }
+      for (const key of changedProps.keys()) {
+        if (this.hassSubscribeRequiredHostProps.includes(key as string)) {
+          this.__checkSubscribed();
+          return;
+        }
       }
     }
 
@@ -52,7 +65,10 @@ export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
       if (
         this.__unsubs !== undefined ||
         !(this as unknown as Element).isConnected ||
-        this.hass === undefined
+        this.hass === undefined ||
+        this.hassSubscribeRequiredHostProps?.some(
+          (prop) => this[prop] === undefined
+        )
       ) {
         return;
       }

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -133,6 +133,7 @@ class HaConfigDashboard extends LitElement {
             ></ha-menu-button>
             <div main-title>${this.hass.localize("panel.config")}</div>
             <ha-icon-button
+              .label=${this.hass.localize("ui.dialogs.quick-bar.title")}
               .path=${mdiMagnify}
               @click=${this._showQuickBar}
             ></ha-icon-button>

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -86,6 +86,7 @@ export class EnergyDeviceSettings extends LitElement {
                     : device.stat_consumption}</span
                 >
                 <ha-icon-button
+                  .label=${this.hass.localize("ui.common.delete")}
                   @click=${this._deleteDevice}
                   .device=${device}
                   .path=${mdiDelete}

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -144,8 +144,6 @@ export class ZHANetworkVisualizationPage extends LitElement {
               <div slot="header">
                 <search-input
                   .hass=${this.hass}
-                  no-label-float
-                  no-underline
                   class="header"
                   @value-changed=${this._handleSearchChange}
                   .filter=${this._filter}
@@ -161,8 +159,6 @@ export class ZHANetworkVisualizationPage extends LitElement {
           ${!this.narrow
             ? html`<search-input
                 .hass=${this.hass}
-                no-label-float
-                no-underline
                 @value-changed=${this._handleSearchChange}
                 .filter=${this._filter}
                 .label=${this.hass.localize(

src/panels/config/logs/ha-config-logs.ts

@@ -43,8 +43,6 @@ export class HaConfigLogs extends LitElement {
           <div slot="header">
             <search-input
               class="header"
-              no-label-float
-              no-underline
               @value-changed=${this._filterChanged}
               .hass=${this.hass}
               .filter=${this._filter}
@@ -55,9 +53,6 @@ export class HaConfigLogs extends LitElement {
       : html`
           <div class="search">
             <search-input
-              autofocus
-              no-label-float
-              no-underline
               @value-changed=${this._filterChanged}
               .hass=${this.hass}
               .filter=${this._filter}

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -32,6 +32,8 @@ class HuiEnergyCarbonGaugeCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public getCardSize(): number {
     return 4;
   }

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -49,6 +49,8 @@ export class HuiEnergyDevicesGraphCard
 
   @query("ha-chart-base") private _chart?: HaChartBase;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts

@@ -43,6 +43,8 @@ class HuiEnergyDistrubutionCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public setConfig(config: EnergyDistributionCardConfig): void {
     this._config = config;
   }

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -62,6 +62,8 @@ export class HuiEnergyGasGraphCard
 
   @state() private _unit?: string;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -35,6 +35,8 @@ class HuiEnergyGridGaugeCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass!, {

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -30,6 +30,8 @@ class HuiEnergySolarGaugeCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass!, {

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -61,6 +61,8 @@ export class HuiEnergySolarGraphCard
 
   @state() private _end = endOfToday();
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -45,6 +45,8 @@ export class HuiEnergySourcesTableCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -50,6 +50,8 @@ export class HuiEnergyUsageGraphCard
 
   @state() private _end = endOfToday();
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts

@@ -9,7 +9,10 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-date-input";
 import { UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
-import { setInputDateTimeValue } from "../../../data/input_datetime";
+import {
+  setInputDateTimeValue,
+  stateToIsoDateString,
+} from "../../../data/input_datetime";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
@@ -65,7 +68,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
                 .label=${stateObj.attributes.has_time ? name : undefined}
                 .locale=${this.hass.locale}
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                .value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}
+                .value=${stateToIsoDateString(stateObj)}
                 @value-changed=${this._dateChanged}
               >
               </ha-date-input>

src/panels/media-browser/browser-media-player.ts

@@ -9,6 +9,8 @@ import {
 import { ResolvedMediaSource } from "../../data/media_source";
 import { HomeAssistant } from "../../types";
 
+export const ERR_UNSUPPORTED_MEDIA = "Unsupported Media";
+
 export class BrowserMediaPlayer {
   private player: HTMLAudioElement;
 
@@ -25,6 +27,9 @@ export class BrowserMediaPlayer {
     private onChange: () => void
   ) {
     const player = new Audio(this.resolved.url);
+    if (player.canPlayType(resolved.mime_type) === "") {
+      throw new Error(ERR_UNSUPPORTED_MEDIA);
+    }
     player.autoplay = true;
     player.volume = volume;
     player.addEventListener("play", this._handleChange);

src/panels/media-browser/ha-bar-media-player.ts

@@ -49,9 +49,13 @@ import {
   SUPPORT_VOLUME_SET,
 } from "../../data/media-player";
 import { ResolvedMediaSource } from "../../data/media_source";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-marquee";
-import { BrowserMediaPlayer } from "./browser-media-player";
+import {
+  BrowserMediaPlayer,
+  ERR_UNSUPPORTED_MEDIA,
+} from "./browser-media-player";
 
 declare global {
   interface HASSDomEvents {
@@ -125,13 +129,25 @@ export class BarMediaPlayer extends LitElement {
       throw Error("Only browser supported");
     }
     this._tearDownBrowserPlayer();
-    this._browserPlayer = new BrowserMediaPlayer(
+    try {
-      this.hass,
+      this._browserPlayer = new BrowserMediaPlayer(
-      item,
+        this.hass,
-      resolved,
+        item,
-      this._browserPlayerVolume,
+        resolved,
-      () => this.requestUpdate("_browserPlayer")
+        this._browserPlayerVolume,
-    );
+        () => this.requestUpdate("_browserPlayer")
+      );
+    } catch (err: any) {
+      if (err.message === ERR_UNSUPPORTED_MEDIA) {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.components.media-browser.media_not_supported"
+          ),
+        });
+      } else {
+        throw err;
+      }
+    }
     this._newMediaExpected = false;
   }
 

src/panels/media-browser/ha-panel-media-browser.ts

@@ -27,7 +27,10 @@ import {
   MediaPickedEvent,
   MediaPlayerItem,
 } from "../../data/media-player";
-import { resolveMediaSource } from "../../data/media_source";
+import {
+  ResolvedMediaSource,
+  resolveMediaSource,
+} from "../../data/media_source";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
@@ -224,11 +227,19 @@ class PanelMediaBrowser extends LitElement {
     }
 
     this._player.showResolvingNewMediaPicked();
-
+    let resolvedUrl: ResolvedMediaSource;
-    const resolvedUrl = await resolveMediaSource(
+    try {
-      this.hass,
+      resolvedUrl = await resolveMediaSource(this.hass, item.media_content_id);
-      item.media_content_id
+    } catch (err: any) {
-    );
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.components.media-browser.media_browsing_error"
+        ),
+        text: err.message,
+      });
+      this._player.hideResolvingNewMediaPicked();
+      return;
+    }
 
     if (resolvedUrl.mime_type.startsWith("audio/")) {
       this._player.playItem(item, resolvedUrl);

src/util/brands-url.ts

@@ -9,3 +9,5 @@ export const brandsUrl = (options: BrandsOptions): string =>
   `https://brands.home-assistant.io/${options.useFallback ? "_/" : ""}${
     options.domain
   }/${options.darkOptimized ? "dark_" : ""}${options.type}.png`;
+
+export const extractDomainFromBrandUrl = (url: string) => url.split("/")[4];