Merge branch 'dev' into confdig-section-redesign

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,60 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [dev, master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [dev]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

gallery/src/components/demo-more-info.js

@@ -2,8 +2,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
-import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
+import "./more-info-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {

gallery/src/components/more-info-content.ts

@@ -0,0 +1,73 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
+import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater";
+import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type";
+import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel";
+import "../../../src/dialogs/more-info/controls/more-info-automation";
+import "../../../src/dialogs/more-info/controls/more-info-camera";
+import "../../../src/dialogs/more-info/controls/more-info-climate";
+import "../../../src/dialogs/more-info/controls/more-info-configurator";
+import "../../../src/dialogs/more-info/controls/more-info-counter";
+import "../../../src/dialogs/more-info/controls/more-info-cover";
+import "../../../src/dialogs/more-info/controls/more-info-default";
+import "../../../src/dialogs/more-info/controls/more-info-fan";
+import "../../../src/dialogs/more-info/controls/more-info-group";
+import "../../../src/dialogs/more-info/controls/more-info-humidifier";
+import "../../../src/dialogs/more-info/controls/more-info-input_datetime";
+import "../../../src/dialogs/more-info/controls/more-info-light";
+import "../../../src/dialogs/more-info/controls/more-info-lock";
+import "../../../src/dialogs/more-info/controls/more-info-media_player";
+import "../../../src/dialogs/more-info/controls/more-info-person";
+import "../../../src/dialogs/more-info/controls/more-info-script";
+import "../../../src/dialogs/more-info/controls/more-info-sun";
+import "../../../src/dialogs/more-info/controls/more-info-timer";
+import "../../../src/dialogs/more-info/controls/more-info-vacuum";
+import "../../../src/dialogs/more-info/controls/more-info-water_heater";
+import "../../../src/dialogs/more-info/controls/more-info-weather";
+import { HomeAssistant } from "../../../src/types";
+
+class MoreInfoContent extends UpdatingElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property() public stateObj?: HassEntity;
+
+  private _detachedChild?: ChildNode;
+
+  protected firstUpdated(): void {
+    this.style.position = "relative";
+    this.style.display = "block";
+  }
+
+  // This is not a lit element, but an updating element, so we implement update
+  protected update(changedProps: PropertyValues): void {
+    super.update(changedProps);
+    const stateObj = this.stateObj;
+    const hass = this.hass;
+
+    if (!stateObj || !hass) {
+      if (this.lastChild) {
+        this._detachedChild = this.lastChild;
+        // Detach child to prevent it from doing work.
+        this.removeChild(this.lastChild);
+      }
+      return;
+    }
+
+    if (this._detachedChild) {
+      this.appendChild(this._detachedChild);
+      this._detachedChild = undefined;
+    }
+
+    const moreInfoType =
+      stateObj.attributes && "custom_ui_more_info" in stateObj.attributes
+        ? stateObj.attributes.custom_ui_more_info
+        : "more-info-" + stateMoreInfoType(stateObj);
+
+    dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
+      hass,
+      stateObj,
+    });
+  }
+}
+
+customElements.define("more-info-content", MoreInfoContent);

gallery/src/demos/demo-more-info-light.ts

@@ -3,10 +3,10 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
 import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
-import "../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
+import "../components/more-info-content";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {

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

@@ -1,12 +1,13 @@
 import "@material/mwc-icon-button/mwc-icon-button";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
@@ -19,13 +20,13 @@ import {
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import "../../../src/layouts/hass-tabs-subpage";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import "../../../src/layouts/hass-loading-screen";
+import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
@@ -179,7 +180,7 @@ class HassioAddonStore extends LitElement {
       this._repos.sort(sortRepos);
       this._addons = addonsInfo.addons;
     } catch (err) {
-      alert("Failed to fetch add-on info");
+      alert(extractApiErrorMessage(err));
     }
   }
 

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -176,7 +176,7 @@ class HassioAddonAudio extends LitElement {
   }
 
   private async _saveSettings(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     this._error = undefined;

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -5,14 +5,15 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -21,8 +22,7 @@ import {
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import "../../../../src/components/buttons/ha-progress-button";
-
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -113,9 +113,9 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to reset addon configuration, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to reset addon configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
     button.progress = false;
   }
@@ -147,9 +147,9 @@ class HassioAddonConfig extends LitElement {
         await suggestAddonRestart(this, this.hass, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to save addon configuration, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to save addon configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
     button.progress = false;
   }

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -4,24 +4,25 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/buttons/ha-progress-button";
 
 interface NetworkItem {
   description: string;
@@ -87,8 +88,8 @@ class HassioAddonNetwork extends LitElement {
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults </ha-progress-button
-          >>
+            Reset to defaults
+          </ha-progress-button>
           <ha-progress-button @click=${this._saveTapped}>
             Save
           </ha-progress-button>
@@ -130,7 +131,7 @@ class HassioAddonNetwork extends LitElement {
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     const data: HassioAddonSetOptionParams = {
@@ -149,16 +150,16 @@ class HassioAddonNetwork extends LitElement {
         await suggestAddonRestart(this, this.hass, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
 
     button.progress = false;
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     this._error = undefined;
@@ -183,9 +184,9 @@ class HassioAddonNetwork extends LitElement {
         await suggestAddonRestart(this, this.hass, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
     button.progress = false;
   }

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -3,18 +3,19 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import "../../../../src/layouts/hass-loading-screen";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -80,9 +81,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 }

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -768,7 +768,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _installClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     try {
@@ -833,7 +833,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _uninstallClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -4,9 +4,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../../src/components/ha-card";
@@ -14,6 +14,7 @@ import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -75,7 +76,7 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${err.body?.message || err}`;
+      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
     }
   }
 

hassio/src/dashboard/hassio-update.ts

@@ -5,27 +5,31 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
+import {
+  extractApiErrorMessage,
+  HassioResponse,
+  ignoredStatusCodes,
+} from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
-import {
-  showConfirmationDialog,
-  showAlertDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
-import { HassioResponse } from "../../../src/data/hassio/common";
 
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
@@ -145,11 +149,11 @@ export class HassioUpdate extends LitElement {
   }
 
   private async _confirmUpdate(ev): Promise<void> {
-    const item = ev.target;
+    const item = ev.currentTarget;
     item.progress = true;
     const confirmed = await showConfirmationDialog(this, {
       title: `Update ${item.name}`,
-      text: `Are you sure you want to upgrade ${item.name} to version ${item.version}?`,
+      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
       confirmText: "update",
       dismissText: "cancel",
     });
@@ -161,16 +165,12 @@ export class HassioUpdate extends LitElement {
     try {
       await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
     } catch (err) {
-      // Only show an error if the status code was not 504, or no status at all (connection terminated)
-      if (err.status_code && err.status_code !== 504) {
+      // Only show an error if the status code was not expected (user behind proxy)
+      // or no status at all(connection terminated)
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
         showAlertDialog(this, {
           title: "Update failed",
-          text:
-            typeof err === "object"
-              ? typeof err.body === "object"
-                ? err.body.message
-                : err.body || "Unkown error"
-              : err,
+          text: extractApiErrorMessage(err),
         });
       }
     }

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

@@ -1,43 +1,42 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button";
-import "@material/mwc-tab-bar";
 import "@material/mwc-tab";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { cache } from "lit-html/directives/cache";
-
-import {
-  updateNetworkInterface,
-  NetworkInterface,
-} from "../../../../src/data/hassio/network";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioNetworkDialogParams } from "./show-dialog-network";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
-import type { HomeAssistant } from "../../../../src/types";
-import type { HaRadio } from "../../../../src/components/ha-radio";
-import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-radio";
+import type { HaRadio } from "../../../../src/components/ha-radio";
 import "../../../../src/components/ha-related-items";
 import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  NetworkInterface,
+  updateNetworkInterface,
+} from "../../../../src/data/hassio/network";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../src/dialogs/generic/show-dialog-box";
+import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { HassioNetworkDialogParams } from "./show-dialog-network";
 
 @customElement("dialog-hassio-network")
 export class DialogHassioNetwork extends LitElement implements HassDialog {
@@ -201,8 +200,7 @@ export class DialogHassioNetwork extends LitElement implements HassDialog {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to change network settings",
-        text:
-          typeof err === "object" ? err.body.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
       this._prosessing = false;
       return;

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

@@ -5,25 +5,26 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../src/components/ha-circular-progress";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -190,7 +191,7 @@ class HassioRepositoriesDialog extends LitElement {
 
       input.value = "";
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
     this._prosessing = false;
   }
@@ -222,7 +223,7 @@ class HassioRepositoriesDialog extends LitElement {
 
       await this._dialogParams!.loadData();
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
   }
 }

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

@@ -15,6 +15,7 @@ import {
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
@@ -379,7 +380,7 @@ class HassioSnapshotDialog extends LitElement {
         `/api/hassio/snapshots/${this._snapshot!.slug}/download`
       );
     } catch (err) {
-      alert(`Error: ${err.message}`);
+      alert(`Error: ${extractApiErrorMessage(err)}`);
       return;
     }
 

hassio/src/dialogs/suggestAddonRestart.ts

@@ -3,6 +3,7 @@ import {
   HassioAddonDetails,
   restartHassioAddon,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -26,7 +27,7 @@ export const suggestAddonRestart = async (
     } catch (err) {
       showAlertDialog(element, {
         title: "Failed to restart",
-        text: err.body.message,
+        text: extractApiErrorMessage(err),
       });
     }
   }

hassio/src/snapshots/hassio-snapshots.ts

@@ -1,15 +1,13 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
+import { mdiPackageVariant, mdiPackageVariantClosed, mdiReload } from "@mdi/js";
 import "@polymer/paper-checkbox/paper-checkbox";
+import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { mdiPackageVariant, mdiPackageVariantClosed, mdiReload } from "@mdi/js";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import {
   css,
   CSSResultArray,
@@ -21,7 +19,11 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   createHassioFullSnapshot,
   createHassioPartialSnapshot,
@@ -31,19 +33,15 @@ import {
   HassioSnapshot,
   reloadHassioSnapshots,
 } from "../../../src/data/hassio/snapshot";
-import "../../../src/components/buttons/ha-progress-button";
-import { hassioStyle } from "../resources/hassio-style";
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import "../../../src/layouts/hass-tabs-subpage";
+import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { PolymerChangedEvent } from "../../../src/polymer-types";
+import "../components/hassio-card-content";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
 import { supervisorTabs } from "../hassio-tabs";
-
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-svg-icon";
-import "../../../src/layouts/hass-tabs-subpage";
-import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
 
 interface CheckboxItem {
   slug: string;
@@ -81,6 +79,7 @@ class HassioSnapshots extends LitElement {
     },
     { slug: "ssl", name: "SSL", checked: true },
     { slug: "share", name: "Share", checked: true },
+    { slug: "media", name: "Media", checked: true },
     { slug: "addons/local", name: "Local add-ons", checked: true },
   ];
 
@@ -243,7 +242,7 @@ class HassioSnapshots extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this._updateSnapshots();
+    this.refreshData();
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -292,12 +291,12 @@ class HassioSnapshots extends LitElement {
       this._snapshots = await fetchHassioSnapshots(this.hass);
       this._snapshots.sort((a, b) => (a.date < b.date ? 1 : -1));
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
   }
 
   private async _createSnapshot(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     this._error = "";
@@ -345,7 +344,7 @@ class HassioSnapshots extends LitElement {
       this._updateSnapshots();
       fireEvent(this, "hass-api-called", { success: true, response: null });
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
     button.progress = false;
   }

hassio/src/system/hassio-host-info.ts

@@ -14,11 +14,14 @@ import {
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
+import {
+  extractApiErrorMessage,
+  ignoredStatusCodes,
+} from "../../../src/data/hassio/common";
 import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
   changeHostOptions,
@@ -81,8 +84,7 @@ class HassioHostInfo extends LitElement {
                 </mwc-button>
               </ha-settings-row>`
             : ""}
-          ${this.hostInfo.features.includes("network") &&
-          atLeastVersion(this.hass.config.version, 0, 115)
+          ${this.hostInfo.features.includes("network")
             ? html` <ha-settings-row>
                 <span slot="heading">
                   IP address
@@ -220,14 +222,13 @@ class HassioHostInfo extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to get Hardware list",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
   }
 
   private async _hostReboot(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
@@ -245,17 +246,19 @@ class HassioHostInfo extends LitElement {
     try {
       await rebootHost(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to reboot",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
-      });
+      // Ignore connection errors, these are all expected
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+        showAlertDialog(this, {
+          title: "Failed to reboot",
+          text: extractApiErrorMessage(err),
+        });
+      }
     }
     button.progress = false;
   }
 
   private async _hostShutdown(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
@@ -273,17 +276,19 @@ class HassioHostInfo extends LitElement {
     try {
       await shutdownHost(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to shutdown",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
-      });
+      // Ignore connection errors, these are all expected
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+        showAlertDialog(this, {
+          title: "Failed to shutdown",
+          text: extractApiErrorMessage(err),
+        });
+      }
     }
     button.progress = false;
   }
 
   private async _osUpdate(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
@@ -303,8 +308,7 @@ class HassioHostInfo extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to update",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
     button.progress = false;
@@ -333,8 +337,7 @@ class HassioHostInfo extends LitElement {
       } catch (err) {
         showAlertDialog(this, {
           title: "Setting hostname failed",
-          text:
-            typeof err === "object" ? err.body?.message || "Unkown error" : err,
+          text: extractApiErrorMessage(err),
         });
       }
     }
@@ -347,8 +350,7 @@ class HassioHostInfo extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to import from USB",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
   }

hassio/src/system/hassio-supervisor-info.ts

@@ -18,6 +18,7 @@ import {
   setSupervisorOption,
   SupervisorOptions,
   updateSupervisor,
+  fetchHassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import {
   showAlertDialog,
@@ -26,6 +27,7 @@ import {
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
@@ -143,7 +145,7 @@ class HassioSupervisorInfo extends LitElement {
   }
 
   private async _toggleBeta(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     if (this.supervisorInfo.channel === "stable") {
@@ -175,43 +177,43 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       const data: Partial<SupervisorOptions> = {
-        channel: this.supervisorInfo.channel !== "stable" ? "beta" : "stable",
+        channel: this.supervisorInfo.channel === "stable" ? "beta" : "stable",
       };
       await setSupervisorOption(this.hass, data);
       await reloadSupervisor(this.hass);
+      this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to set supervisor option",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
     button.progress = false;
   }
 
   private async _supervisorReload(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     try {
       await reloadSupervisor(this.hass);
+      this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to reload the supervisor",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
     button.progress = false;
   }
 
   private async _supervisorUpdate(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
       title: "Update supervisor",
-      text: `Are you sure you want to upgrade supervisor to version ${this.supervisorInfo.version_latest}?`,
+      text: `Are you sure you want to update supervisor to version ${this.supervisorInfo.version_latest}?`,
       confirmText: "update",
       dismissText: "cancel",
     });
@@ -226,8 +228,7 @@ class HassioSupervisorInfo extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to update the supervisor",
-        text:
-          typeof err === "object" ? err.body.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
     button.progress = false;
@@ -257,8 +258,7 @@ class HassioSupervisorInfo extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to set supervisor option",
-        text:
-          typeof err === "object" ? err.body.message || "Unkown error" : err,
+        text: extractApiErrorMessage(err),
       });
     }
   }

hassio/src/system/hassio-supervisor-log.ts

@@ -12,16 +12,15 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
-import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
 import "../../../src/layouts/hass-loading-screen";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-ansi-to-html";
+import { hassioStyle } from "../resources/hassio-style";
 
 interface LogProvider {
   key: string;
@@ -120,7 +119,7 @@ class HassioSupervisorLog extends LitElement {
   }
 
   private async _refresh(ev: CustomEvent): Promise<void> {
-    const button = ev.target as any;
+    const button = ev.currentTarget as any;
     button.progress = true;
     await this._loadData();
     button.progress = false;
@@ -135,9 +134,9 @@ class HassioSupervisorLog extends LitElement {
         this._selectedLogProvider
       );
     } catch (err) {
-      this._error = `Failed to get supervisor logs, ${
-        typeof err === "object" ? err.body?.message || "Unkown error" : err
-      }`;
+      this._error = `Failed to get supervisor logs, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 

package.json

@@ -79,6 +79,7 @@
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.5.0",
     "@types/chromecast-caf-sender": "^1.0.3",
+    "@types/sortablejs": "^1.10.6",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
     "@vue/web-component-wrapper": "^1.2.0",

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200901.0",
+    version="20200915.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/config/components_with_service.ts

@@ -0,0 +1,9 @@
+import { HomeAssistant } from "../../types";
+
+/** Return an array of domains with the service. */
+export const componentsWithService = (
+  hass: HomeAssistant,
+  service: string
+): Array<string> =>
+  hass &&
+  Object.keys(hass.services).filter((key) => service in hass.services[key]);

src/common/const.ts

@@ -44,7 +44,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "script",
   "sun",
   "timer",
-  "updater",
   "vacuum",
   "water_heater",
   "weather",

src/common/decorators/local-storage.ts

@@ -1,7 +1,33 @@
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { PropertyDeclaration, UpdatingElement } from "lit-element";
 import type { ClassElement } from "../../types";
 
+type Callback = (oldValue: any, newValue: any) => void;
+
 class Storage {
-  private _storage: any = {};
+  constructor() {
+    window.addEventListener("storage", (ev: StorageEvent) => {
+      if (ev.key && this.hasKey(ev.key)) {
+        this._storage[ev.key] = ev.newValue
+          ? JSON.parse(ev.newValue)
+          : ev.newValue;
+        if (this._listeners[ev.key]) {
+          this._listeners[ev.key].forEach((listener) =>
+            listener(
+              ev.oldValue ? JSON.parse(ev.oldValue) : ev.oldValue,
+              this._storage[ev.key!]
+            )
+          );
+        }
+      }
+    });
+  }
+
+  private _storage: { [storageKey: string]: any } = {};
+
+  private _listeners: {
+    [storageKey: string]: Callback[];
+  } = {};
 
   public addFromStorage(storageKey: any): void {
     if (!this._storage[storageKey]) {
@@ -12,6 +38,30 @@ class Storage {
     }
   }
 
+  public subscribeChanges(
+    storageKey: string,
+    callback: Callback
+  ): UnsubscribeFunc {
+    if (this._listeners[storageKey]) {
+      this._listeners[storageKey].push(callback);
+    } else {
+      this._listeners[storageKey] = [callback];
+    }
+    return () => {
+      this.unsubscribeChanges(storageKey, callback);
+    };
+  }
+
+  public unsubscribeChanges(storageKey: string, callback: Callback) {
+    if (!(storageKey in this._listeners)) {
+      return;
+    }
+    const index = this._listeners[storageKey].indexOf(callback);
+    if (index !== -1) {
+      this._listeners[storageKey].splice(index, 1);
+    }
+  }
+
   public hasKey(storageKey: string): any {
     return storageKey in this._storage;
   }
@@ -32,30 +82,49 @@ class Storage {
 
 const storage = new Storage();
 
-export const LocalStorage = (key?: string) => {
-  return (element: ClassElement, propName: string) => {
-    const storageKey = key || propName;
-    const initVal = element.initializer ? element.initializer() : undefined;
+export const LocalStorage = (
+  storageKey?: string,
+  property?: boolean,
+  propertyOptions?: PropertyDeclaration
+): any => {
+  return (clsElement: ClassElement) => {
+    const key = String(clsElement.key);
+    storageKey = storageKey || String(clsElement.key);
+    const initVal = clsElement.initializer
+      ? clsElement.initializer()
+      : undefined;
 
     storage.addFromStorage(storageKey);
 
+    const subscribe = (el: UpdatingElement): UnsubscribeFunc =>
+      storage.subscribeChanges(storageKey!, (oldValue) => {
+        el.requestUpdate(clsElement.key, oldValue);
+      });
+
     const getValue = (): any => {
-      return storage.hasKey(storageKey)
-        ? storage.getValue(storageKey)
+      return storage.hasKey(storageKey!)
+        ? storage.getValue(storageKey!)
         : initVal;
     };
 
-    const setValue = (val: any) => {
-      storage.setValue(storageKey, val);
+    const setValue = (el: UpdatingElement, value: any) => {
+      let oldValue: unknown | undefined;
+      if (property) {
+        oldValue = getValue();
+      }
+      storage.setValue(storageKey!, value);
+      if (property) {
+        el.requestUpdate(clsElement.key, oldValue);
+      }
     };
 
     return {
       kind: "method",
-      placement: "own",
-      key: element.key,
+      placement: "prototype",
+      key: clsElement.key,
       descriptor: {
-        set(value) {
-          setValue(value);
+        set(this: UpdatingElement, value: unknown) {
+          setValue(this, value);
         },
         get() {
           return getValue();
@@ -63,6 +132,24 @@ export const LocalStorage = (key?: string) => {
         enumerable: true,
         configurable: true,
       },
+      finisher(cls: typeof UpdatingElement) {
+        if (property) {
+          const connectedCallback = cls.prototype.connectedCallback;
+          const disconnectedCallback = cls.prototype.disconnectedCallback;
+          cls.prototype.connectedCallback = function () {
+            connectedCallback.call(this);
+            this[`__unbsubLocalStorage${key}`] = subscribe(this);
+          };
+          cls.prototype.disconnectedCallback = function () {
+            disconnectedCallback.call(this);
+            this[`__unbsubLocalStorage${key}`]();
+          };
+          cls.createProperty(clsElement.key, {
+            noAccessor: true,
+            ...propertyOptions,
+          });
+        }
+      },
     };
   };
 };

src/common/dom/apply_themes_on_element.ts

@@ -1,14 +1,14 @@
-import { derivedStyles, darkStyles } from "../../resources/styles";
+import { darkStyles, derivedStyles } from "../../resources/styles";
 import { HomeAssistant, Theme } from "../../types";
 import {
   hex2rgb,
+  lab2hex,
+  lab2rgb,
   rgb2hex,
   rgb2lab,
-  lab2rgb,
-  lab2hex,
 } from "../color/convert-color";
+import { labBrighten, labDarken } from "../color/lab";
 import { rgbContrast } from "../color/rgb";
-import { labDarken, labBrighten } from "../color/lab";
 
 interface ProcessedTheme {
   keys: { [key: string]: "" };
@@ -105,7 +105,7 @@ const processTheme = (
   const keys = {};
   for (const key of Object.keys(combinedTheme)) {
     const prefixedKey = `--${key}`;
-    const value = combinedTheme[key]!;
+    const value = String(combinedTheme[key]);
     styles[prefixedKey] = value;
     keys[prefixedKey] = "";
 

src/common/entity/binary_sensor_icon.ts

@@ -3,49 +3,51 @@ import { HassEntity } from "home-assistant-js-websocket";
 /** Return an icon representing a binary sensor state. */
 
 export const binarySensorIcon = (state: HassEntity) => {
-  const activated = state.state && state.state === "off";
+  const is_off = state.state && state.state === "off";
   switch (state.attributes.device_class) {
     case "battery":
-      return activated ? "hass:battery" : "hass:battery-outline";
+      return is_off ? "hass:battery" : "hass:battery-outline";
+    case "battery_charging":
+      return is_off ? "hass:battery" : "hass:battery-charging";
     case "cold":
-      return activated ? "hass:thermometer" : "hass:snowflake";
+      return is_off ? "hass:thermometer" : "hass:snowflake";
     case "connectivity":
-      return activated ? "hass:server-network-off" : "hass:server-network";
+      return is_off ? "hass:server-network-off" : "hass:server-network";
     case "door":
-      return activated ? "hass:door-closed" : "hass:door-open";
+      return is_off ? "hass:door-closed" : "hass:door-open";
     case "garage_door":
-      return activated ? "hass:garage" : "hass:garage-open";
+      return is_off ? "hass:garage" : "hass:garage-open";
     case "gas":
     case "power":
     case "problem":
     case "safety":
     case "smoke":
-      return activated ? "hass:shield-check" : "hass:alert";
+      return is_off ? "hass:shield-check" : "hass:alert";
     case "heat":
-      return activated ? "hass:thermometer" : "hass:fire";
+      return is_off ? "hass:thermometer" : "hass:fire";
     case "light":
-      return activated ? "hass:brightness-5" : "hass:brightness-7";
+      return is_off ? "hass:brightness-5" : "hass:brightness-7";
     case "lock":
-      return activated ? "hass:lock" : "hass:lock-open";
+      return is_off ? "hass:lock" : "hass:lock-open";
     case "moisture":
-      return activated ? "hass:water-off" : "hass:water";
+      return is_off ? "hass:water-off" : "hass:water";
     case "motion":
-      return activated ? "hass:walk" : "hass:run";
+      return is_off ? "hass:walk" : "hass:run";
     case "occupancy":
-      return activated ? "hass:home-outline" : "hass:home";
+      return is_off ? "hass:home-outline" : "hass:home";
     case "opening":
-      return activated ? "hass:square" : "hass:square-outline";
+      return is_off ? "hass:square" : "hass:square-outline";
     case "plug":
-      return activated ? "hass:power-plug-off" : "hass:power-plug";
+      return is_off ? "hass:power-plug-off" : "hass:power-plug";
     case "presence":
-      return activated ? "hass:home-outline" : "hass:home";
+      return is_off ? "hass:home-outline" : "hass:home";
     case "sound":
-      return activated ? "hass:music-note-off" : "hass:music-note";
+      return is_off ? "hass:music-note-off" : "hass:music-note";
     case "vibration":
-      return activated ? "hass:crop-portrait" : "hass:vibrate";
+      return is_off ? "hass:crop-portrait" : "hass:vibrate";
     case "window":
-      return activated ? "hass:window-closed" : "hass:window-open";
+      return is_off ? "hass:window-closed" : "hass:window-open";
     default:
-      return activated ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
+      return is_off ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
   }
 };

src/common/entity/state_card_type.ts

@@ -3,9 +3,10 @@ import { HomeAssistant } from "../../types";
 import { DOMAINS_WITH_CARD } from "../const";
 import { canToggleState } from "./can_toggle_state";
 import { computeStateDomain } from "./compute_state_domain";
+import { UNAVAILABLE } from "../../data/entity";
 
 export const stateCardType = (hass: HomeAssistant, stateObj: HassEntity) => {
-  if (stateObj.state === "unavailable") {
+  if (stateObj.state === UNAVAILABLE) {
     return "display";
   }
 

src/common/entity/timer_time_remaining.ts

@@ -1,7 +1,12 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import durationToSeconds from "../datetime/duration_to_seconds";
 
-export const timerTimeRemaining = (stateObj: HassEntity) => {
+export const timerTimeRemaining = (
+  stateObj: HassEntity
+): undefined | number => {
+  if (!stateObj.attributes.remaining) {
+    return undefined;
+  }
   let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
 
   if (stateObj.state === "active") {

src/common/util/throttle.ts

@@ -0,0 +1,50 @@
+// From: underscore.js https://github.com/jashkenas/underscore/blob/master/underscore.js
+
+// Returns a function, that, when invoked, will only be triggered at most once
+// during a given window of time. Normally, the throttled function will run
+// as much as it can, without ever going more than once per `wait` duration;
+// but if you'd like to disable the execution on the leading edge, pass
+// `false for leading`. To disable execution on the trailing edge, ditto.
+export const throttle = <T extends Function>(
+  func: T,
+  wait: number,
+  leading = true,
+  trailing = true
+): T => {
+  let timeout: number | undefined;
+  let previous = 0;
+  let context: any;
+  let args: any;
+  const later = () => {
+    previous = leading === false ? 0 : Date.now();
+    timeout = undefined;
+    func.apply(context, args);
+    if (!timeout) {
+      context = null;
+      args = null;
+    }
+  };
+  // @ts-ignore
+  return function (...argmnts) {
+    // @ts-ignore
+    // @typescript-eslint/no-this-alias
+    context = this;
+    args = argmnts;
+
+    const now = Date.now();
+    if (!previous && leading === false) {
+      previous = now;
+    }
+    const remaining = wait - (now - previous);
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = undefined;
+      }
+      previous = now;
+      func.apply(context, args);
+    } else if (!timeout && trailing !== false) {
+      timeout = window.setTimeout(later, remaining);
+    }
+  };
+};

src/components/entity/ha-entity-attribute-picker.ts

@@ -0,0 +1,178 @@
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import { HassEntity } from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { HomeAssistant } from "../../types";
+import "../ha-icon-button";
+import "./state-badge";
+
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
+const rowRenderer = (root: HTMLElement, _owner, model: { item: string }) => {
+  if (!root.firstElementChild) {
+    root.innerHTML = `
+      <style>
+        paper-item {
+          margin: -10px;
+          padding: 0;
+        }
+      </style>
+      <paper-item></paper-item>
+    `;
+  }
+  root.querySelector("paper-item")!.textContent = model.item;
+};
+
+@customElement("ha-entity-attribute-picker")
+class HaEntityAttributePicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public entityId?: string;
+
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean, attribute: "allow-custom-value" })
+  public allowCustomValue;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property({ type: Boolean }) private _opened = false;
+
+  @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("_opened") && this._opened) {
+      const state = this.entityId ? this.hass.states[this.entityId] : undefined;
+      (this._comboBox as any).items = state
+        ? Object.keys(state.attributes)
+        : [];
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <vaadin-combo-box-light
+        .value=${this._value}
+        .allowCustomValue=${this.allowCustomValue}
+        .renderer=${rowRenderer}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+      >
+        <paper-input
+          .autofocus=${this.autofocus}
+          .label=${this.label ??
+          this.hass.localize(
+            "ui.components.entity.entity-attribute-picker.attribute"
+          )}
+          .value=${this._value}
+          .disabled=${this.disabled || !this.entityId}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          ${this.value
+            ? html`
+                <ha-icon-button
+                  aria-label=${this.hass.localize(
+                    "ui.components.entity.entity-picker.clear"
+                  )}
+                  slot="suffix"
+                  class="clear-button"
+                  icon="hass:close"
+                  @click=${this._clearValue}
+                  no-ripple
+                >
+                  Clear
+                </ha-icon-button>
+              `
+            : ""}
+
+          <ha-icon-button
+            aria-label=${this.hass.localize(
+              "ui.components.entity.entity-attribute-picker.show_attributes"
+            )}
+            slot="suffix"
+            class="toggle-button"
+            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
+          >
+            Toggle
+          </ha-icon-button>
+        </paper-input>
+      </vaadin-combo-box-light>
+    `;
+  }
+
+  private _clearValue(ev: Event) {
+    ev.stopPropagation();
+    this._setValue("");
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    const newValue = ev.detail.value;
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 0px 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entity-attribute-picker": HaEntityAttributePicker;
+  }
+}

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

@@ -1,4 +1,3 @@
-import "../ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -7,6 +6,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
+  customElement,
   html,
   LitElement,
   property,
@@ -20,6 +20,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import "../ha-icon-button";
 import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -51,7 +52,8 @@ const rowRenderer = (
   root.querySelector("[secondary]")!.textContent = model.item.entity_id;
 };
 
-class HaEntityPicker extends LitElement {
+@customElement("ha-entity-picker")
+export class HaEntityPicker extends LitElement {
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public disabled?: boolean;
@@ -95,6 +97,8 @@ class HaEntityPicker extends LitElement {
 
   @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
 
+  private _initedStates = false;
+
   private _getStates = memoizeOne(
     (
       _opened: boolean,
@@ -148,11 +152,18 @@ class HaEntityPicker extends LitElement {
   );
 
   protected shouldUpdate(changedProps: PropertyValues) {
+    if (
+      changedProps.has("value") ||
+      changedProps.has("label") ||
+      changedProps.has("disabled")
+    ) {
+      return true;
+    }
     return !(!changedProps.has("_opened") && this._opened);
   }
 
   protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("_opened") && this._opened) {
+    if (!this._initedStates || (changedProps.has("_opened") && this._opened)) {
       const states = this._getStates(
         this._opened,
         this.hass,
@@ -162,6 +173,7 @@ class HaEntityPicker extends LitElement {
         this.includeDeviceClasses
       );
       (this._comboBox as any).items = states;
+      this._initedStates = true;
     }
   }
 
@@ -169,7 +181,6 @@ class HaEntityPicker extends LitElement {
     if (!this.hass) {
       return html``;
     }
-
     return html`
       <vaadin-combo-box-light
         item-value-path="entity_id"
@@ -267,8 +278,6 @@ class HaEntityPicker extends LitElement {
   }
 }
 
-customElements.define("ha-entity-picker", HaEntityPicker);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-entity-picker": HaEntityPicker;

src/components/entity/ha-state-label-badge.ts

@@ -20,6 +20,7 @@ import { stateIcon } from "../../common/entity/state_icon";
 import { timerTimeRemaining } from "../../common/entity/timer_time_remaining";
 import { HomeAssistant } from "../../types";
 import "../ha-label-badge";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
@@ -81,7 +82,8 @@ export class HaStateLabelBadge extends LitElement {
           ? ""
           : this.image
           ? this.image
-          : state.attributes.entity_picture_local || state.attributes.entity_picture}"
+          : state.attributes.entity_picture_local ||
+            state.attributes.entity_picture}"
         .label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
         .description="${this.name ? this.name : computeStateName(state)}"
       ></ha-label-badge>
@@ -108,7 +110,7 @@ export class HaStateLabelBadge extends LitElement {
         return null;
       case "sensor":
       default:
-        return state.state === "unknown"
+        return state.state === UNKNOWN
           ? "-"
           : state.attributes.unit_of_measurement
           ? state.state
@@ -121,7 +123,7 @@ export class HaStateLabelBadge extends LitElement {
   }
 
   private _computeIcon(domain: string, state: HassEntity) {
-    if (state.state === "unavailable") {
+    if (state.state === UNAVAILABLE) {
       return null;
     }
     switch (domain) {
@@ -166,7 +168,7 @@ export class HaStateLabelBadge extends LitElement {
 
   private _computeLabel(domain, state, _timerTimeRemaining) {
     if (
-      state.state === "unavailable" ||
+      state.state === UNAVAILABLE ||
       ["device_tracker", "alarm_control_panel", "person"].includes(domain)
     ) {
       // Localize the state with a special state_badge namespace, which has variations of

src/components/ha-button-menu.ts

@@ -1,17 +1,16 @@
-import {
-  customElement,
-  html,
-  TemplateResult,
-  LitElement,
-  CSSResult,
-  css,
-  query,
-  property,
-} from "lit-element";
 import "@material/mwc-button";
 import "@material/mwc-menu";
-import type { Menu, Corner } from "@material/mwc-menu";
-
+import type { Corner, Menu } from "@material/mwc-menu";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  query,
+  TemplateResult,
+} from "lit-element";
 import "./ha-icon-button";
 
 @customElement("ha-button-menu")
@@ -22,6 +21,8 @@ export class HaButtonMenu extends LitElement {
 
   @property({ type: Boolean }) public activatable = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("mwc-menu") private _menu?: Menu;
 
   public get items() {
@@ -48,6 +49,9 @@ export class HaButtonMenu extends LitElement {
   }
 
   private _handleClick(): void {
+    if (this.disabled) {
+      return;
+    }
     this._menu!.anchor = this;
     this._menu!.show();
   }

src/components/ha-camera-stream.ts

@@ -3,56 +3,46 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { nextRender } from "../common/util/render-status";
-import { getExternalConfig } from "../external_app/external_config";
 import {
   CAMERA_SUPPORT_STREAM,
   computeMJPEGStreamUrl,
   fetchStreamUrl,
 } from "../data/camera";
 import { CameraEntity, HomeAssistant } from "../types";
-
-type HLSModule = typeof import("hls.js");
+import "./ha-hls-player";
 
 @customElement("ha-camera-stream")
 class HaCameraStream extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public stateObj?: CameraEntity;
+  @property({ attribute: false }) public stateObj?: CameraEntity;
 
-  @property({ type: Boolean }) public showControls = false;
+  @property({ type: Boolean, attribute: "controls" })
+  public controls = false;
 
-  @internalProperty() private _attached = false;
+  @property({ type: Boolean, attribute: "muted" })
+  public muted = false;
+
+  @property({ type: Boolean, attribute: "allow-exoplayer" })
+  public allowExoPlayer = false;
 
   // We keep track if we should force MJPEG with a string
   // that way it automatically resets if we change entity.
-  @internalProperty() private _forceMJPEG: string | undefined = undefined;
+  @internalProperty() private _forceMJPEG?: string;
 
-  private _hlsPolyfillInstance?: Hls;
-
-  private _useExoPlayer = false;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._attached = true;
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._attached = false;
-  }
+  @internalProperty() private _url?: string;
 
   protected render(): TemplateResult {
-    if (!this.stateObj || !this._attached) {
+    if (!this.stateObj) {
       return html``;
     }
 
@@ -69,51 +59,26 @@ class HaCameraStream extends LitElement {
               )} camera.`}
             />
           `
-        : html`
-            <video
+        : this._url
+        ? html`
+            <ha-hls-player
               autoplay
-              muted
               playsinline
-              ?controls=${this.showControls}
-              @loadeddata=${this._elementResized}
-            ></video>
-          `}
+              .allowExoPlayer=${this.allowExoPlayer}
+              .muted=${this.muted}
+              .controls=${this.controls}
+              .hass=${this.hass}
+              .url=${this._url}
+            ></ha-hls-player>
+          `
+        : ""}
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    const stateObjChanged = changedProps.has("stateObj");
-    const attachedChanged = changedProps.has("_attached");
-
-    const oldState = changedProps.get("stateObj") as this["stateObj"];
-    const oldEntityId = oldState ? oldState.entity_id : undefined;
-    const curEntityId = this.stateObj ? this.stateObj.entity_id : undefined;
-
-    if (
-      (!stateObjChanged && !attachedChanged) ||
-      (stateObjChanged && oldEntityId === curEntityId)
-    ) {
-      return;
-    }
-
-    // If we are no longer attached, destroy polyfill.
-    if (attachedChanged && !this._attached) {
-      this._destroyPolyfill();
-      return;
-    }
-
-    // Nothing to do if we are render MJPEG.
-    if (this._shouldRenderMJPEG) {
-      return;
-    }
-
-    // Tear down existing polyfill, if available
-    this._destroyPolyfill();
-
-    if (curEntityId) {
-      this._startHls();
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("stateObj") && !this._shouldRenderMJPEG) {
+      this._forceMJPEG = undefined;
+      this._getStreamUrl();
     }
   }
 
@@ -125,136 +90,35 @@ class HaCameraStream extends LitElement {
     );
   }
 
-  private get _videoEl(): HTMLVideoElement {
-    return this.shadowRoot!.querySelector("video")!;
-  }
-
-  private async _getUseExoPlayer(): Promise<boolean> {
-    if (!this.hass!.auth.external) {
-      return false;
-    }
-    const externalConfig = await getExternalConfig(this.hass!.auth.external);
-    return externalConfig && externalConfig.hasExoPlayer;
-  }
-
-  private async _startHls(): Promise<void> {
-    // eslint-disable-next-line
-    let hls;
-    const videoEl = this._videoEl;
-    this._useExoPlayer = await this._getUseExoPlayer();
-    if (!this._useExoPlayer) {
-      hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
-        .default as HLSModule;
-      let hlsSupported = hls.isSupported();
-
-      if (!hlsSupported) {
-        hlsSupported =
-          videoEl.canPlayType("application/vnd.apple.mpegurl") !== "";
-      }
-
-      if (!hlsSupported) {
-        this._forceMJPEG = this.stateObj!.entity_id;
-        return;
-      }
-    }
-
+  private async _getStreamUrl(): Promise<void> {
     try {
       const { url } = await fetchStreamUrl(
         this.hass!,
         this.stateObj!.entity_id
       );
 
-      if (this._useExoPlayer) {
-        this._renderHLSExoPlayer(url);
-      } else if (hls.isSupported()) {
-        this._renderHLSPolyfill(videoEl, hls, url);
-      } else {
-        this._renderHLSNative(videoEl, url);
-      }
-      return;
+      this._url = url;
     } catch (err) {
       // Fails if we were unable to get a stream
       // eslint-disable-next-line
       console.error(err);
+
       this._forceMJPEG = this.stateObj!.entity_id;
     }
   }
 
-  private async _renderHLSExoPlayer(url: string) {
-    window.addEventListener("resize", this._resizeExoPlayer);
-    this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
-    this._videoEl.style.visibility = "hidden";
-    await this.hass!.auth.external!.sendMessage({
-      type: "exoplayer/play_hls",
-      payload: new URL(url, window.location.href).toString(),
-    });
-  }
-
-  private _resizeExoPlayer = () => {
-    const rect = this._videoEl.getBoundingClientRect();
-    this.hass!.auth.external!.fireMessage({
-      type: "exoplayer/resize",
-      payload: {
-        left: rect.left,
-        top: rect.top,
-        right: rect.right,
-        bottom: rect.bottom,
-      },
-    });
-  };
-
-  private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
-    videoEl.src = url;
-    await new Promise((resolve) =>
-      videoEl.addEventListener("loadedmetadata", resolve)
-    );
-    videoEl.play();
-  }
-
-  private async _renderHLSPolyfill(
-    videoEl: HTMLVideoElement,
-    // eslint-disable-next-line
-    Hls: HLSModule,
-    url: string
-  ) {
-    const hls = new Hls({
-      liveBackBufferLength: 60,
-      fragLoadingTimeOut: 30000,
-      manifestLoadingTimeOut: 30000,
-      levelLoadingTimeOut: 30000,
-    });
-    this._hlsPolyfillInstance = hls;
-    hls.attachMedia(videoEl);
-    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-      hls.loadSource(url);
-    });
-  }
-
   private _elementResized() {
     fireEvent(this, "iron-resize");
   }
 
-  private _destroyPolyfill() {
-    if (this._hlsPolyfillInstance) {
-      this._hlsPolyfillInstance.destroy();
-      this._hlsPolyfillInstance = undefined;
-    }
-    if (this._useExoPlayer) {
-      window.removeEventListener("resize", this._resizeExoPlayer);
-      this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
-    }
-  }
-
   static get styles(): CSSResult {
     return css`
       :host,
-      img,
-      video {
+      img {
         display: block;
       }
 
-      img,
-      video {
+      img {
         width: 100%;
       }
     `;

src/components/ha-code-editor.ts

@@ -97,6 +97,7 @@ export class HaCodeEditor extends UpdatingElement {
       .CodeMirror {
         height: var(--code-mirror-height, auto);
         direction: var(--code-mirror-direction, ltr);
+        font-family: var(--code-font-family, monospace);
       }
       .CodeMirror-scroll {
         max-height: var(--code-mirror-max-height, --code-mirror-height);

src/components/ha-color-picker.js

@@ -176,6 +176,11 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
     this.drawColorWheel();
     this.drawMarker();
 
+    if (this.desiredHsColor) {
+      this.setMarkerOnColor(this.desiredHsColor);
+      this.applyColorToCanvas(this.desiredHsColor);
+    }
+
     this.interactionLayer.addEventListener("mousedown", (ev) =>
       this.onMouseDown(ev)
     );
@@ -319,6 +324,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // set marker position to the given color
   setMarkerOnColor(hs) {
+    if (!this.marker || !this.tooltip) {
+      return;
+    }
     const dist = hs.s * this.radius;
     const theta = ((hs.h - 180) / 180) * Math.PI;
     const markerdX = -dist * Math.cos(theta);
@@ -330,6 +338,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // apply given color to interface elements
   applyColorToCanvas(hs) {
+    if (!this.interactionLayer) {
+      return;
+    }
     // we're not really converting hs to hsl here, but we keep it cheap
     // setting the color on the interactionLayer, the svg elements can inherit
     this.interactionLayer.style.color = `hsl(${hs.h}, 100%, ${

src/components/ha-dialog.ts

@@ -10,7 +10,7 @@ import "./ha-icon-button";
 const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
 
 export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
-  ${title}
+  <span class="header_title">${title}</span>
   <mwc-icon-button
     aria-label=${hass.localize("ui.dialogs.generic.close")}
     dialogAction="close"
@@ -64,6 +64,7 @@ export class HaDialog extends MwcDialog {
         }
         .mdc-dialog .mdc-dialog__surface {
           position: var(--dialog-surface-position, relative);
+          top: var(--dialog-surface-top);
           min-height: var(--mdc-dialog-min-height, auto);
         }
         :host([flexContent]) .mdc-dialog .mdc-dialog__content {
@@ -77,10 +78,17 @@ export class HaDialog extends MwcDialog {
           text-decoration: none;
           color: inherit;
         }
+        .header_title {
+          margin-right: 40px;
+        }
         [dir="rtl"].header_button {
           right: auto;
           left: 16px;
         }
+        [dir="rtl"].header_title {
+          margin-left: 40px;
+          margin-right: 0px;
+        }
       `,
     ];
   }

src/components/ha-form/ha-form-select.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -12,6 +11,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-paper-dropdown-menu";
 import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";
 
 @customElement("ha-form-select")
@@ -24,7 +24,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @query("paper-dropdown-menu") private _input?: HTMLElement;
+  @query("ha-paper-dropdown-menu") private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -34,7 +34,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dropdown-menu .label=${this.label}>
+      <ha-paper-dropdown-menu .label=${this.label}>
         <paper-listbox
           slot="dropdown-content"
           attr-for-selected="item-value"
@@ -51,7 +51,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
             `
           )}
         </paper-listbox>
-      </paper-dropdown-menu>
+      </ha-paper-dropdown-menu>
     `;
   }
 
@@ -74,7 +74,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-dropdown-menu {
+      ha-paper-dropdown-menu {
         display: block;
       }
     `;

src/components/ha-header-bar.ts

@@ -1,6 +1,6 @@
-import { customElement, LitElement, html, unsafeCSS, css } from "lit-element";
 // @ts-ignore
 import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+import { css, customElement, html, LitElement, unsafeCSS } from "lit-element";
 
 @customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {

src/components/ha-hls-player.ts

@@ -0,0 +1,217 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../common/dom/fire_event";
+import { nextRender } from "../common/util/render-status";
+import type { HomeAssistant } from "../types";
+
+type HLSModule = typeof import("hls.js");
+
+@customElement("ha-hls-player")
+class HaHLSPlayer extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public url!: string;
+
+  @property({ type: Boolean, attribute: "controls" })
+  public controls = false;
+
+  @property({ type: Boolean, attribute: "muted" })
+  public muted = false;
+
+  @property({ type: Boolean, attribute: "autoplay" })
+  public autoPlay = false;
+
+  @property({ type: Boolean, attribute: "playsinline" })
+  public playsInline = false;
+
+  @property({ type: Boolean, attribute: "allow-exoplayer" })
+  public allowExoPlayer = false;
+
+  @query("video") private _videoEl!: HTMLVideoElement;
+
+  @internalProperty() private _attached = false;
+
+  private _hlsPolyfillInstance?: Hls;
+
+  private _useExoPlayer = false;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._attached = true;
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._attached = false;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._attached) {
+      return html``;
+    }
+
+    return html`
+      <video
+        ?autoplay=${this.autoPlay}
+        .muted=${this.muted}
+        ?playsinline=${this.playsInline}
+        ?controls=${this.controls}
+        @loadeddata=${this._elementResized}
+      ></video>
+    `;
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    const attachedChanged = changedProps.has("_attached");
+    const urlChanged = changedProps.has("url");
+
+    if (!urlChanged && !attachedChanged) {
+      return;
+    }
+
+    // If we are no longer attached, destroy polyfill
+    if (attachedChanged && !this._attached) {
+      // Tear down existing polyfill, if available
+      this._destroyPolyfill();
+      return;
+    }
+
+    this._destroyPolyfill();
+    this._startHls();
+  }
+
+  private async _getUseExoPlayer(): Promise<boolean> {
+    return false;
+  }
+
+  private async _startHls(): Promise<void> {
+    let hls: any;
+    const videoEl = this._videoEl;
+    this._useExoPlayer = await this._getUseExoPlayer();
+    if (!this._useExoPlayer) {
+      hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
+        .default as HLSModule;
+      let hlsSupported = hls.isSupported();
+
+      if (!hlsSupported) {
+        hlsSupported =
+          videoEl.canPlayType("application/vnd.apple.mpegurl") !== "";
+      }
+
+      if (!hlsSupported) {
+        this._videoEl.innerHTML = this.hass.localize(
+          "ui.components.media-browser.video_not_supported"
+        );
+        return;
+      }
+    }
+
+    const url = this.url;
+
+    if (this._useExoPlayer) {
+      this._renderHLSExoPlayer(url);
+    } else if (hls.isSupported()) {
+      this._renderHLSPolyfill(videoEl, hls, url);
+    } else {
+      this._renderHLSNative(videoEl, url);
+    }
+  }
+
+  private async _renderHLSExoPlayer(url: string) {
+    window.addEventListener("resize", this._resizeExoPlayer);
+    this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
+    this._videoEl.style.visibility = "hidden";
+    await this.hass!.auth.external!.sendMessage({
+      type: "exoplayer/play_hls",
+      payload: {
+        url: new URL(url, window.location.href).toString(),
+        muted: this.muted,
+      },
+    });
+  }
+
+  private _resizeExoPlayer = () => {
+    const rect = this._videoEl.getBoundingClientRect();
+    this.hass!.auth.external!.fireMessage({
+      type: "exoplayer/resize",
+      payload: {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+      },
+    });
+  };
+
+  private async _renderHLSPolyfill(
+    videoEl: HTMLVideoElement,
+    Hls: HLSModule,
+    url: string
+  ) {
+    const hls = new Hls({
+      liveBackBufferLength: 60,
+      fragLoadingTimeOut: 30000,
+      manifestLoadingTimeOut: 30000,
+      levelLoadingTimeOut: 30000,
+    });
+    this._hlsPolyfillInstance = hls;
+    hls.attachMedia(videoEl);
+    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      hls.loadSource(url);
+    });
+  }
+
+  private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
+    videoEl.src = url;
+    await new Promise((resolve) =>
+      videoEl.addEventListener("loadedmetadata", resolve)
+    );
+    videoEl.play();
+  }
+
+  private _elementResized() {
+    fireEvent(this, "iron-resize");
+  }
+
+  private _destroyPolyfill() {
+    if (this._hlsPolyfillInstance) {
+      this._hlsPolyfillInstance.destroy();
+      this._hlsPolyfillInstance = undefined;
+    }
+    if (this._useExoPlayer) {
+      window.removeEventListener("resize", this._resizeExoPlayer);
+      this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host,
+      video {
+        display: block;
+      }
+
+      video {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-hls-player": HaHLSPlayer;
+  }
+}

src/components/ha-settings-row.ts

@@ -1,3 +1,4 @@
+import "@polymer/paper-item/paper-item-body";
 import {
   css,
   CSSResult,
@@ -7,7 +8,6 @@ import {
   property,
   SVGTemplateResult,
 } from "lit-element";
-import "@polymer/paper-item/paper-item-body";
 
 @customElement("ha-settings-row")
 export class HaSettingsRow extends LitElement {
@@ -49,6 +49,9 @@ export class HaSettingsRow extends LitElement {
         border-top: 1px solid var(--divider-color);
         padding-bottom: 8px;
       }
+      ::slotted(ha-switch) {
+        padding: 16px 0;
+      }
     `;
   }
 }

src/components/ha-sidebar-sort-styles.ts

@@ -1,77 +0,0 @@
-import { html } from "lit-element";
-
-export const sortStyles = html`
-  <style>
-    #sortable a:nth-of-type(2n) paper-icon-item {
-      animation-name: keyframes1;
-      animation-iteration-count: infinite;
-      transform-origin: 50% 10%;
-      animation-delay: -0.75s;
-      animation-duration: 0.25s;
-    }
-
-    #sortable a:nth-of-type(2n-1) paper-icon-item {
-      animation-name: keyframes2;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      transform-origin: 30% 5%;
-      animation-delay: -0.5s;
-      animation-duration: 0.33s;
-    }
-
-    #sortable {
-      outline: none;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-fallback {
-      opacity: 0;
-    }
-
-    @keyframes keyframes1 {
-      0% {
-        transform: rotate(-1deg);
-        animation-timing-function: ease-in;
-      }
-
-      50% {
-        transform: rotate(1.5deg);
-        animation-timing-function: ease-out;
-      }
-    }
-
-    @keyframes keyframes2 {
-      0% {
-        transform: rotate(1deg);
-        animation-timing-function: ease-in;
-      }
-
-      50% {
-        transform: rotate(-1.5deg);
-        animation-timing-function: ease-out;
-      }
-    }
-
-    .hide-panel {
-      display: none;
-      position: absolute;
-      right: 8px;
-    }
-
-    :host([expanded]) .hide-panel {
-      display: inline-flex;
-    }
-
-    paper-icon-item.hidden-panel,
-    paper-icon-item.hidden-panel span,
-    paper-icon-item.hidden-panel ha-icon[slot="item-icon"] {
-      color: var(--secondary-text-color);
-      cursor: pointer;
-    }
-  </style>
-`;

src/components/ha-sidebar.ts

@@ -23,7 +23,6 @@ import {
   LitElement,
   property,
   PropertyValues,
-  TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { guard } from "lit-html/directives/guard";
@@ -43,6 +42,7 @@ import {
   getExternalConfig,
 } from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../types";
 import "./ha-icon";
 import "./ha-menu-button";
@@ -159,24 +159,22 @@ const computePanels = memoizeOne(
 
 let Sortable;
 
-let sortStyles: TemplateResult;
-
 @customElement("ha-sidebar")
 class HaSidebar extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
   @property({ type: Boolean }) public alwaysExpand = false;
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
+  @property({ type: Boolean }) public editMode = false;
+
   @internalProperty() private _externalConfig?: ExternalConfig;
 
   @internalProperty() private _notifications?: PersistentNotification[];
 
-  @internalProperty() private _editMode = false;
-
   // property used only in css
   // @ts-ignore
   @property({ type: Boolean, reflect: true }) public rtl = false;
@@ -190,11 +188,15 @@ class HaSidebar extends LitElement {
   private _recentKeydownActiveUntil = 0;
 
   // @ts-ignore
-  @LocalStorage("sidebarPanelOrder")
+  @LocalStorage("sidebarPanelOrder", true, {
+    attribute: false,
+  })
   private _panelOrder: string[] = [];
 
   // @ts-ignore
-  @LocalStorage("sidebarHiddenPanels")
+  @LocalStorage("sidebarHiddenPanels", true, {
+    attribute: false,
+  })
   private _hiddenPanels: string[] = [];
 
   private _sortable?;
@@ -223,8 +225,14 @@ class HaSidebar extends LitElement {
     }
 
     return html`
-      ${this._editMode ? sortStyles : ""}
-      <div class="menu">
+      <div
+        class="menu"
+        @action=${this._handleAction}
+        .actionHandler=${actionHandler({
+          hasHold: !this.editMode,
+          disabled: this.editMode,
+        })}
+      >
         ${!this.narrow
           ? html`
               <mwc-icon-button
@@ -240,27 +248,23 @@ class HaSidebar extends LitElement {
             `
           : ""}
         <div class="title">
-          ${this._editMode
+          ${this.editMode
             ? html`<mwc-button outlined @click=${this._closeEditMode}>
-                DONE
+                ${hass.localize("ui.sidebar.done")}
               </mwc-button>`
             : "Home Assistant"}
         </div>
       </div>
       <paper-listbox
         attr-for-selected="data-panel"
+        class="ha-scrollbar"
         .selected=${hass.panelUrl}
         @focusin=${this._listboxFocusIn}
         @focusout=${this._listboxFocusOut}
         @scroll=${this._listboxScroll}
         @keydown=${this._listboxKeydown}
-        @action=${this._handleAction}
-        .actionHandler=${actionHandler({
-          hasHold: !this._editMode,
-          disabled: this._editMode,
-        })}
       >
-        ${this._editMode
+        ${this.editMode
           ? html`<div id="sortable">
               ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
                 this._renderEmptySortable
@@ -270,31 +274,33 @@ class HaSidebar extends LitElement {
             </div>`
           : this._renderPanels(beforeSpacer)}
         <div class="spacer" disabled></div>
-        ${this._editMode && this._hiddenPanels.length
+        ${this.editMode && this._hiddenPanels.length
           ? html`
               ${this._hiddenPanels.map((url) => {
                 const panel = this.hass.panels[url];
+                if (!panel) {
+                  return "";
+                }
                 return html`<paper-icon-item
                   @click=${this._unhidePanel}
                   class="hidden-panel"
+                  .panel=${url}
                 >
                   <ha-icon
                     slot="item-icon"
-                    .icon=${panel.url_path === "lovelace"
+                    .icon=${panel.url_path === this.hass.defaultPanel
                       ? "mdi:view-dashboard"
                       : panel.icon}
                   ></ha-icon>
                   <span class="item-text"
-                    >${panel.url_path === "lovelace"
+                    >${panel.url_path === this.hass.defaultPanel
                       ? hass.localize("panel.states")
                       : hass.localize(`panel.${panel.title}`) ||
                         panel.title}</span
                   >
-                  <ha-svg-icon
-                    class="hide-panel"
-                    .panel=${url}
-                    .path=${mdiPlus}
-                  ></ha-svg-icon>
+                  <mwc-icon-button class="show-panel">
+                    <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+                  </mwc-icon-button>
                 </paper-icon-item>`;
               })}
               <div class="spacer" disabled></div>
@@ -374,7 +380,11 @@ class HaSidebar extends LitElement {
         @mouseleave=${this._itemMouseLeave}
       >
         <paper-icon-item>
-          <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
+          <ha-user-badge
+            slot="item-icon"
+            .user=${hass.user}
+            .hass=${hass}
+          ></ha-user-badge>
 
           <span class="item-text">
             ${hass.user ? hass.user.name : ""}
@@ -393,8 +403,10 @@ class HaSidebar extends LitElement {
       changedProps.has("alwaysExpand") ||
       changedProps.has("_externalConfig") ||
       changedProps.has("_notifications") ||
-      changedProps.has("_editMode") ||
-      changedProps.has("_renderEmptySortable")
+      changedProps.has("editMode") ||
+      changedProps.has("_renderEmptySortable") ||
+      changedProps.has("_hiddenPanels") ||
+      (changedProps.has("_panelOrder") && !this.editMode)
     ) {
       return true;
     }
@@ -435,6 +447,13 @@ class HaSidebar extends LitElement {
     if (changedProps.has("alwaysExpand")) {
       this.expanded = this.alwaysExpand;
     }
+    if (changedProps.has("editMode")) {
+      if (this.editMode) {
+        this._activateEditMode();
+      } else {
+        this._deactivateEditMode();
+      }
+    }
     if (!changedProps.has("hass")) {
       return;
     }
@@ -460,24 +479,29 @@ class HaSidebar extends LitElement {
     return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
   }
 
-  private async _handleAction(ev: CustomEvent<ActionHandlerDetail>) {
+  private _handleAction(ev: CustomEvent<ActionHandlerDetail>) {
     if (ev.detail.action !== "hold") {
       return;
     }
 
+    fireEvent(this, "hass-edit-sidebar", { editMode: true });
+  }
+
+  private async _activateEditMode() {
     if (!Sortable) {
       const [sortableImport, sortStylesImport] = await Promise.all([
         import("sortablejs/modular/sortable.core.esm"),
-        import("./ha-sidebar-sort-styles"),
+        import("../resources/ha-sortable-style"),
       ]);
 
-      sortStyles = sortStylesImport.sortStyles;
+      const style = document.createElement("style");
+      style.innerHTML = sortStylesImport.sortableStyles.cssText;
+      this.shadowRoot!.appendChild(style);
 
       Sortable = sortableImport.Sortable;
       Sortable.mount(sortableImport.OnSpill);
       Sortable.mount(sortableImport.AutoScroll());
     }
-    this._editMode = true;
 
     await this.updateComplete;
 
@@ -489,21 +513,25 @@ class HaSidebar extends LitElement {
       animation: 150,
       fallbackClass: "sortable-fallback",
       dataIdAttr: "data-panel",
+      handle: "paper-icon-item",
       onSort: async () => {
         this._panelOrder = this._sortable.toArray();
       },
     });
   }
 
-  private _closeEditMode() {
+  private _deactivateEditMode() {
     this._sortable?.destroy();
     this._sortable = undefined;
-    this._editMode = false;
+  }
+
+  private _closeEditMode() {
+    fireEvent(this, "hass-edit-sidebar", { editMode: false });
   }
 
   private async _hidePanel(ev: Event) {
     ev.preventDefault();
-    const panel = (ev.target as any).panel;
+    const panel = (ev.currentTarget as any).panel;
     if (this._hiddenPanels.includes(panel)) {
       return;
     }
@@ -516,7 +544,7 @@ class HaSidebar extends LitElement {
 
   private async _unhidePanel(ev: Event) {
     ev.preventDefault();
-    const index = this._hiddenPanels.indexOf((ev.target as any).panel);
+    const index = this._hiddenPanels.indexOf((ev.currentTarget as any).panel);
     if (index < 0) {
       return;
     }
@@ -628,11 +656,13 @@ class HaSidebar extends LitElement {
     return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
-        panel.url_path === "lovelace"
-          ? this.hass.localize("panel.states")
+        panel.url_path === this.hass.defaultPanel
+          ? panel.title || this.hass.localize("panel.states")
           : this.hass.localize(`panel.${panel.title}`) || panel.title,
-        panel.url_path === "lovelace" ? undefined : panel.icon,
-        panel.url_path === "lovelace" ? mdiViewDashboard : undefined
+        panel.icon,
+        panel.url_path === this.hass.defaultPanel && !panel.icon
+          ? mdiViewDashboard
+          : undefined
       )
     );
   }
@@ -646,8 +676,8 @@ class HaSidebar extends LitElement {
     return html`
       <a
         aria-role="option"
-        href="${`/${urlPath}`}"
-        data-panel="${urlPath}"
+        href=${`/${urlPath}`}
+        data-panel=${urlPath}
         tabindex="-1"
         @mouseenter=${this._itemMouseEnter}
         @mouseleave=${this._itemMouseLeave}
@@ -660,307 +690,305 @@ class HaSidebar extends LitElement {
               ></ha-svg-icon>`
             : html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
           <span class="item-text">${title}</span>
-          ${this._editMode
-            ? html`<ha-svg-icon
-                class="hide-panel"
-                .panel=${urlPath}
-                @click=${this._hidePanel}
-                .path=${mdiClose}
-              ></ha-svg-icon>`
-            : ""}
         </paper-icon-item>
+        ${this.editMode
+          ? html`<mwc-icon-button
+              class="hide-panel"
+              .panel=${urlPath}
+              @click=${this._hidePanel}
+            >
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>`
+          : ""}
       </a>
     `;
   }
 
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        height: 100%;
-        display: block;
-        overflow: hidden;
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        border-right: 1px solid var(--divider-color);
-        background-color: var(--sidebar-background-color);
-        width: 64px;
-      }
-      :host([expanded]) {
-        width: calc(256px + env(safe-area-inset-left));
-      }
-      :host([rtl]) {
-        border-right: 0;
-        border-left: 1px solid var(--divider-color);
-      }
-      .menu {
-        box-sizing: border-box;
-        height: 65px;
-        display: flex;
-        padding: 0 8.5px;
-        border-bottom: 1px solid transparent;
-        white-space: nowrap;
-        font-weight: 400;
-        color: var(--primary-text-color);
-        border-bottom: 1px solid var(--divider-color);
-        background-color: var(--primary-background-color);
-        font-size: 20px;
-        align-items: center;
-        padding-left: calc(8.5px + env(safe-area-inset-left));
-      }
-      :host([rtl]) .menu {
-        padding-left: 8.5px;
-        padding-right: calc(8.5px + env(safe-area-inset-right));
-      }
-      :host([expanded]) .menu {
-        width: calc(256px + env(safe-area-inset-left));
-      }
-      :host([rtl][expanded]) .menu {
-        width: calc(256px + env(safe-area-inset-right));
-      }
-      .menu mwc-icon-button {
-        color: var(--sidebar-icon-color);
-      }
-      :host([expanded]) .menu mwc-icon-button {
-        margin-right: 23px;
-      }
-      :host([expanded][rtl]) .menu mwc-icon-button {
-        margin-right: 0px;
-        margin-left: 23px;
-      }
+  static get styles(): CSSResult[] {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          height: 100%;
+          display: block;
+          overflow: hidden;
+          -ms-user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          border-right: 1px solid var(--divider-color);
+          background-color: var(--sidebar-background-color);
+          width: 64px;
+        }
+        :host([expanded]) {
+          width: calc(256px + env(safe-area-inset-left));
+        }
+        :host([rtl]) {
+          border-right: 0;
+          border-left: 1px solid var(--divider-color);
+        }
+        .menu {
+          box-sizing: border-box;
+          height: 65px;
+          display: flex;
+          padding: 0 8.5px;
+          border-bottom: 1px solid transparent;
+          white-space: nowrap;
+          font-weight: 400;
+          color: var(--primary-text-color);
+          border-bottom: 1px solid var(--divider-color);
+          background-color: var(--primary-background-color);
+          font-size: 20px;
+          align-items: center;
+          padding-left: calc(8.5px + env(safe-area-inset-left));
+        }
+        :host([rtl]) .menu {
+          padding-left: 8.5px;
+          padding-right: calc(8.5px + env(safe-area-inset-right));
+        }
+        :host([expanded]) .menu {
+          width: calc(256px + env(safe-area-inset-left));
+        }
+        :host([rtl][expanded]) .menu {
+          width: calc(256px + env(safe-area-inset-right));
+        }
+        .menu mwc-icon-button {
+          color: var(--sidebar-icon-color);
+        }
+        :host([expanded]) .menu mwc-icon-button {
+          margin-right: 23px;
+        }
+        :host([expanded][rtl]) .menu mwc-icon-button {
+          margin-right: 0px;
+          margin-left: 23px;
+        }
 
-      .title {
-        width: 100%;
-        display: none;
-      }
-      :host([expanded]) .title {
-        display: initial;
-      }
-      .title mwc-button {
-        width: 100%;
-      }
+        .title {
+          width: 100%;
+          display: none;
+        }
+        :host([narrow]) .title {
+          padding: 0 16px;
+        }
+        :host([expanded]) .title {
+          display: initial;
+        }
+        .title mwc-button {
+          width: 100%;
+        }
 
-      paper-listbox::-webkit-scrollbar {
-        width: 0.4rem;
-        height: 0.4rem;
-      }
+        #sortable,
+        .hidden-panel {
+          display: none;
+        }
 
-      paper-listbox::-webkit-scrollbar-thumb {
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        background: var(--scrollbar-thumb-color);
-      }
+        paper-listbox {
+          padding: 4px 0;
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          height: calc(100% - 196px - env(safe-area-inset-bottom));
+          overflow-x: hidden;
+          background: none;
+          margin-left: env(safe-area-inset-left);
+        }
 
-      paper-listbox {
-        padding: 4px 0;
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-        height: calc(100% - 196px - env(safe-area-inset-bottom));
-        overflow-y: auto;
-        overflow-x: hidden;
-        scrollbar-color: var(--scrollbar-thumb-color) transparent;
-        scrollbar-width: thin;
-        background: none;
-        margin-left: env(safe-area-inset-left);
-      }
+        :host([rtl]) paper-listbox {
+          margin-left: initial;
+          margin-right: env(safe-area-inset-right);
+        }
 
-      :host([rtl]) paper-listbox {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
-      }
+        a {
+          text-decoration: none;
+          color: var(--sidebar-text-color);
+          font-weight: 500;
+          font-size: 14px;
+          position: relative;
+          display: block;
+          outline: 0;
+        }
 
-      a {
-        text-decoration: none;
-        color: var(--sidebar-text-color);
-        font-weight: 500;
-        font-size: 14px;
-        position: relative;
-        display: block;
-        outline: 0;
-      }
+        paper-icon-item {
+          box-sizing: border-box;
+          margin: 4px 8px;
+          padding-left: 12px;
+          border-radius: 4px;
+          --paper-item-min-height: 40px;
+          width: 48px;
+        }
+        :host([expanded]) paper-icon-item {
+          width: 240px;
+        }
+        :host([rtl]) paper-icon-item {
+          padding-left: auto;
+          padding-right: 12px;
+        }
 
-      paper-icon-item {
-        box-sizing: border-box;
-        margin: 4px 8px;
-        padding-left: 12px;
-        border-radius: 4px;
-        --paper-item-min-height: 40px;
-        width: 48px;
-      }
-      :host([expanded]) paper-icon-item {
-        width: 240px;
-      }
-      :host([rtl]) paper-icon-item {
-        padding-left: auto;
-        padding-right: 12px;
-      }
+        ha-icon[slot="item-icon"],
+        ha-svg-icon[slot="item-icon"] {
+          color: var(--sidebar-icon-color);
+        }
 
-      ha-icon[slot="item-icon"],
-      ha-svg-icon[slot="item-icon"] {
-        color: var(--sidebar-icon-color);
-      }
+        .iron-selected paper-icon-item::before,
+        a:not(.iron-selected):focus::before {
+          border-radius: 4px;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+          content: "";
+          transition: opacity 15ms linear;
+          will-change: opacity;
+        }
+        .iron-selected paper-icon-item::before {
+          background-color: var(--sidebar-selected-icon-color);
+          opacity: 0.12;
+        }
+        a:not(.iron-selected):focus::before {
+          background-color: currentColor;
+          opacity: var(--dark-divider-opacity);
+          margin: 4px 8px;
+        }
+        .iron-selected paper-icon-item:focus::before,
+        .iron-selected:focus paper-icon-item::before {
+          opacity: 0.2;
+        }
 
-      .iron-selected paper-icon-item::before,
-      a:not(.iron-selected):focus::before {
-        border-radius: 4px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        content: "";
-        transition: opacity 15ms linear;
-        will-change: opacity;
-      }
-      .iron-selected paper-icon-item::before {
-        background-color: var(--sidebar-selected-icon-color);
-        opacity: 0.12;
-      }
-      a:not(.iron-selected):focus::before {
-        background-color: currentColor;
-        opacity: var(--dark-divider-opacity);
-        margin: 4px 8px;
-      }
-      .iron-selected paper-icon-item:focus::before,
-      .iron-selected:focus paper-icon-item::before {
-        opacity: 0.2;
-      }
+        .iron-selected paper-icon-item[pressed]:before {
+          opacity: 0.37;
+        }
 
-      .iron-selected paper-icon-item[pressed]:before {
-        opacity: 0.37;
-      }
+        paper-icon-item span {
+          color: var(--sidebar-text-color);
+          font-weight: 500;
+          font-size: 14px;
+        }
 
-      paper-icon-item span {
-        color: var(--sidebar-text-color);
-        font-weight: 500;
-        font-size: 14px;
-      }
+        a.iron-selected paper-icon-item ha-icon,
+        a.iron-selected paper-icon-item ha-svg-icon {
+          color: var(--sidebar-selected-icon-color);
+        }
 
-      a.iron-selected paper-icon-item ha-icon,
-      a.iron-selected paper-icon-item ha-svg-icon {
-        color: var(--sidebar-selected-icon-color);
-      }
+        a.iron-selected .item-text {
+          color: var(--sidebar-selected-text-color);
+        }
 
-      a.iron-selected .item-text {
-        color: var(--sidebar-selected-text-color);
-      }
+        paper-icon-item .item-text {
+          display: none;
+          max-width: calc(100% - 56px);
+        }
+        :host([expanded]) paper-icon-item .item-text {
+          display: block;
+        }
 
-      paper-icon-item .item-text {
-        display: none;
-        max-width: calc(100% - 56px);
-      }
-      :host([expanded]) paper-icon-item .item-text {
-        display: block;
-      }
+        .divider {
+          bottom: 112px;
+          padding: 10px 0;
+        }
+        .divider::before {
+          content: " ";
+          display: block;
+          height: 1px;
+          background-color: var(--divider-color);
+        }
+        .notifications-container {
+          display: flex;
+          margin-left: env(safe-area-inset-left);
+        }
+        :host([rtl]) .notifications-container {
+          margin-left: initial;
+          margin-right: env(safe-area-inset-right);
+        }
+        .notifications {
+          cursor: pointer;
+        }
+        .notifications .item-text {
+          flex: 1;
+        }
+        .profile {
+          margin-left: env(safe-area-inset-left);
+        }
+        :host([rtl]) .profile {
+          margin-left: initial;
+          margin-right: env(safe-area-inset-right);
+        }
+        .profile paper-icon-item {
+          padding-left: 4px;
+        }
+        :host([rtl]) .profile paper-icon-item {
+          padding-left: auto;
+          padding-right: 4px;
+        }
+        .profile .item-text {
+          margin-left: 8px;
+        }
+        :host([rtl]) .profile .item-text {
+          margin-right: 8px;
+        }
 
-      .divider {
-        bottom: 112px;
-        padding: 10px 0;
-      }
-      .divider::before {
-        content: " ";
-        display: block;
-        height: 1px;
-        background-color: var(--divider-color);
-      }
-      .notifications-container {
-        display: flex;
-        margin-left: env(safe-area-inset-left);
-      }
-      :host([rtl]) .notifications-container {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
-      }
-      .notifications {
-        cursor: pointer;
-      }
-      .notifications .item-text {
-        flex: 1;
-      }
-      .profile {
-        margin-left: env(safe-area-inset-left);
-      }
-      :host([rtl]) .profile {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
-      }
-      .profile paper-icon-item {
-        padding-left: 4px;
-      }
-      :host([rtl]) .profile paper-icon-item {
-        padding-left: auto;
-        padding-right: 4px;
-      }
-      .profile .item-text {
-        margin-left: 8px;
-      }
-      :host([rtl]) .profile .item-text {
-        margin-right: 8px;
-      }
+        .notification-badge {
+          min-width: 20px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          background-color: var(--accent-color);
+          line-height: 20px;
+          text-align: center;
+          padding: 0px 6px;
+          color: var(--text-accent-color, var(--text-primary-color));
+        }
+        ha-svg-icon + .notification-badge {
+          position: absolute;
+          bottom: 14px;
+          left: 26px;
+          font-size: 0.65em;
+        }
 
-      .notification-badge {
-        min-width: 20px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        font-weight: 400;
-        background-color: var(--accent-color);
-        line-height: 20px;
-        text-align: center;
-        padding: 0px 6px;
-        color: var(--text-accent-color, var(--text-primary-color));
-      }
-      ha-svg-icon + .notification-badge {
-        position: absolute;
-        bottom: 14px;
-        left: 26px;
-        font-size: 0.65em;
-      }
+        .spacer {
+          flex: 1;
+          pointer-events: none;
+        }
 
-      .spacer {
-        flex: 1;
-        pointer-events: none;
-      }
+        .subheader {
+          color: var(--sidebar-text-color);
+          font-weight: 500;
+          font-size: 14px;
+          padding: 16px;
+          white-space: nowrap;
+        }
 
-      .subheader {
-        color: var(--sidebar-text-color);
-        font-weight: 500;
-        font-size: 14px;
-        padding: 16px;
-        white-space: nowrap;
-      }
+        .dev-tools {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding: 0 8px;
+          width: 256px;
+          box-sizing: border-box;
+        }
 
-      .dev-tools {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        padding: 0 8px;
-        width: 256px;
-        box-sizing: border-box;
-      }
+        .dev-tools a {
+          color: var(--sidebar-icon-color);
+        }
 
-      .dev-tools a {
-        color: var(--sidebar-icon-color);
-      }
+        .tooltip {
+          display: none;
+          position: absolute;
+          opacity: 0.9;
+          border-radius: 2px;
+          white-space: nowrap;
+          color: var(--sidebar-background-color);
+          background-color: var(--sidebar-text-color);
+          padding: 4px;
+          font-weight: 500;
+        }
 
-      .tooltip {
-        display: none;
-        position: absolute;
-        opacity: 0.9;
-        border-radius: 2px;
-        white-space: nowrap;
-        color: var(--sidebar-background-color);
-        background-color: var(--sidebar-text-color);
-        padding: 4px;
-        font-weight: 500;
-      }
-
-      :host([rtl]) .menu mwc-icon-button {
-        -webkit-transform: scaleX(-1);
-        transform: scaleX(-1);
-      }
-    `;
+        :host([rtl]) .menu mwc-icon-button {
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+        }
+      `,
+    ];
   }
 }
 

src/components/map/ha-location-editor.ts

@@ -279,6 +279,7 @@ class LocationEditor extends LitElement {
       }
       #map {
         height: 100%;
+        background: inherit;
       }
       .leaflet-edit-move {
         border-radius: 50%;

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

@@ -8,7 +8,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { HASSDomEvent } from "../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
@@ -33,16 +33,17 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   @internalProperty() private _params?: MediaPlayerBrowseDialogParams;
 
-  public async showDialog(
-    params: MediaPlayerBrowseDialogParams
-  ): Promise<void> {
+  public showDialog(params: MediaPlayerBrowseDialogParams): void {
     this._params = params;
     this._entityId = this._params.entityId;
     this._mediaContentId = this._params.mediaContentId;
     this._mediaContentType = this._params.mediaContentType;
     this._action = this._params.action || "play";
+  }
 
-    await this.updateComplete;
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
@@ -57,7 +58,7 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
-        @closed=${this._closeDialog}
+        @closed=${this.closeDialog}
       >
         <ha-media-player-browse
           dialog
@@ -66,21 +67,17 @@ class DialogMediaPlayerBrowse extends LitElement {
           .action=${this._action!}
           .mediaContentId=${this._mediaContentId}
           .mediaContentType=${this._mediaContentType}
-          @close-dialog=${this._closeDialog}
+          @close-dialog=${this.closeDialog}
           @media-picked=${this._mediaPicked}
         ></ha-media-player-browse>
       </ha-dialog>
     `;
   }
 
-  private _closeDialog() {
-    this._params = undefined;
-  }
-
   private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
     this._params!.mediaPickedCallback(ev.detail);
     if (this._action !== "play") {
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
@@ -93,17 +90,12 @@ class DialogMediaPlayerBrowse extends LitElement {
           --dialog-content-padding: 0;
         }
 
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
         @media (min-width: 800px) {
           ha-dialog {
             --mdc-dialog-max-width: 800px;
+            --dialog-surface-position: fixed;
+            --dialog-surface-top: 40px;
+            --mdc-dialog-max-height: calc(100% - 72px);
           }
           ha-media-player-browse {
             width: 700px;

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

@@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
 import "@material/mwc-fab/mwc-fab";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiArrowLeft, mdiClose, mdiFolder, mdiPlay, mdiPlus } from "@mdi/js";
+import { mdiArrowLeft, mdiClose, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -18,15 +18,24 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
-import memoizeOne from "memoize-one";
+import { styleMap } from "lit-html/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
-import { browseMediaPlayer, MediaPickedEvent } from "../../data/media-player";
+import {
+  browseLocalMediaPlayer,
+  browseMediaPlayer,
+  BROWSER_PLAYER,
+  MediaClassBrowserSettings,
+  MediaPickedEvent,
+  MediaPlayerBrowseAction,
+} from "../../data/media-player";
 import type { MediaPlayerItem } from "../../data/media-player";
+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 { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
 import "../ha-card";
@@ -50,11 +59,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @property() public mediaContentType?: string;
 
-  @property() public action: "pick" | "play" = "play";
-
-  @property({ type: Boolean }) public hideBack = false;
-
-  @property({ type: Boolean }) public hideTitle = false;
+  @property() public action: MediaPlayerBrowseAction = "play";
 
   @property({ type: Boolean }) public dialog = false;
 
@@ -63,6 +68,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @internalProperty() private _loading = false;
 
+  @internalProperty() private _error?: { message: string; code: string };
+
   @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = [];
 
   private _resizeObserver?: ResizeObserver;
@@ -88,203 +95,238 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._mediaPlayerItems.length) {
-      return html``;
-    }
-
     if (this._loading) {
       return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
-    const mostRecentItem = this._mediaPlayerItems[
+    if (this._error && !this._mediaPlayerItems.length) {
+      if (this.dialog) {
+        this._closeDialogAction();
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.components.media-browser.media_browsing_error"
+          ),
+          text: this._renderError(this._error),
+        });
+      } else {
+        return html`
+          <div class="container">
+            ${this._renderError(this._error)}
+          </div>
+        `;
+      }
+    }
+
+    if (!this._mediaPlayerItems.length) {
+      return html``;
+    }
+
+    const currentItem = this._mediaPlayerItems[
       this._mediaPlayerItems.length - 1
     ];
-    const previousItem =
+
+    const previousItem: MediaPlayerItem | undefined =
       this._mediaPlayerItems.length > 1
         ? this._mediaPlayerItems[this._mediaPlayerItems.length - 2]
         : undefined;
 
-    const hasExpandableChildren:
-      | MediaPlayerItem
-      | undefined = this._hasExpandableChildren(mostRecentItem.children);
-
-    const showImages = mostRecentItem.children?.some(
-      (child) => child.thumbnail && child.thumbnail !== mostRecentItem.thumbnail
-    );
-
-    const mediaType = this.hass.localize(
-      `ui.components.media-browser.content-type.${mostRecentItem.media_content_type}`
+    const subtitle = this.hass.localize(
+      `ui.components.media-browser.class.${currentItem.media_class}`
     );
+    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
+    const childrenMediaClass =
+      MediaClassBrowserSettings[currentItem.children_media_class];
 
     return html`
       <div
         class="header  ${classMap({
-          "no-img": !mostRecentItem.thumbnail,
+          "no-img": !currentItem.thumbnail,
+          "no-dialog": !this.dialog,
         })}"
       >
-        <div class="header-content">
-          ${mostRecentItem.thumbnail
-            ? html`
-                <div
-                  class="img"
-                  style="background-image: url(${mostRecentItem.thumbnail})"
-                >
-                  ${this._narrow && mostRecentItem?.can_play
-                    ? html`
-                        <mwc-fab
-                          mini
-                          .item=${mostRecentItem}
-                          @click=${this._actionClicked}
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .label=${this.hass.localize(
-                              `ui.components.media-browser.${this.action}-media`
-                            )}
-                            .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                          ></ha-svg-icon>
-                          ${this.hass.localize(
-                            `ui.components.media-browser.${this.action}`
-                          )}
-                        </mwc-fab>
-                      `
-                    : ""}
-                </div>
-              `
-            : html``}
-          <div class="header-info">
-            ${this.hideTitle && (this._narrow || !mostRecentItem.thumbnail)
-              ? ""
-              : html`<div class="breadcrumb-overflow">
-                  <div class="breadcrumb">
-                    ${!this.hideBack && previousItem
+        <div class="header-wrapper">
+          <div class="header-content">
+            ${currentItem.thumbnail
+              ? html`
+                  <div
+                    class="img"
+                    style=${styleMap({
+                      backgroundImage: currentItem.thumbnail
+                        ? `url(${currentItem.thumbnail})`
+                        : "none",
+                    })}
+                  >
+                    ${this._narrow && currentItem?.can_play
                       ? html`
-                          <div
-                            class="previous-title"
-                            @click=${this.navigateBack}
+                          <mwc-fab
+                            mini
+                            .item=${currentItem}
+                            @click=${this._actionClicked}
                           >
-                            <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
-                            ${previousItem.title}
-                          </div>
+                            <ha-svg-icon
+                              slot="icon"
+                              .label=${this.hass.localize(
+                                `ui.components.media-browser.${this.action}-media`
+                              )}
+                              .path=${this.action === "play"
+                                ? mdiPlay
+                                : mdiPlus}
+                            ></ha-svg-icon>
+                            ${this.hass.localize(
+                              `ui.components.media-browser.${this.action}`
+                            )}
+                          </mwc-fab>
                         `
                       : ""}
-                    <h1 class="title">${mostRecentItem.title}</h1>
-                    ${mediaType
-                      ? html`<h2 class="subtitle">
-                          ${mediaType}
-                        </h2>`
-                      : ""}
                   </div>
-                </div>`}
-            ${mostRecentItem?.can_play &&
-            (!mostRecentItem.thumbnail || !this._narrow)
-              ? html`
-                  <mwc-button
-                    raised
-                    .item=${mostRecentItem}
-                    @click=${this._actionClicked}
-                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .label=${this.hass.localize(
-                        `ui.components.media-browser.${this.action}-media`
-                      )}
-                      .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.components.media-browser.${this.action}`
-                    )}
-                  </mwc-button>
                 `
-              : ""}
-          </div>
-        </div>
-        ${this.dialog
-          ? html`
-              <mwc-icon-button
-                aria-label=${this.hass.localize("ui.dialogs.generic.close")}
-                @click=${this._closeDialogAction}
-                class="header_button"
-                dir=${computeRTLDirection(this.hass)}
-              >
-                <ha-svg-icon path=${mdiClose}></ha-svg-icon>
-              </mwc-icon-button>
-            `
-          : ""}
-      </div>
-      ${mostRecentItem.children?.length
-        ? hasExpandableChildren
-          ? html`
-              <div class="children">
-                ${mostRecentItem.children?.length
+              : html``}
+            <div class="header-info">
+              <div class="breadcrumb">
+                ${previousItem
                   ? html`
-                      ${mostRecentItem.children.map(
-                        (child) => html`
-                          <div
-                            class="child"
-                            .item=${child}
-                            @click=${this._navigateForward}
-                          >
-                            <div class="ha-card-parent">
-                              <ha-card
-                                outlined
-                                style="background-image: url(${child.thumbnail})"
-                              >
-                                ${child.can_expand && !child.thumbnail
-                                  ? html`
-                                      <ha-svg-icon
-                                        class="folder"
-                                        .path=${mdiFolder}
-                                      ></ha-svg-icon>
-                                    `
-                                  : ""}
-                              </ha-card>
-                              ${child.can_play
-                                ? html`
-                                    <mwc-icon-button
-                                      class="play"
-                                      .item=${child}
-                                      .label=${this.hass.localize(
-                                        `ui.components.media-browser.${this.action}-media`
-                                      )}
-                                      @click=${this._actionClicked}
-                                    >
-                                      <ha-svg-icon
-                                        .path=${this.action === "play"
-                                          ? mdiPlay
-                                          : mdiPlus}
-                                      ></ha-svg-icon>
-                                    </mwc-icon-button>
-                                  `
-                                : ""}
-                            </div>
-                            <div class="title">${child.title}</div>
-                            <div class="type">
-                              ${this.hass.localize(
-                                `ui.components.media-browser.content-type.${child.media_content_type}`
-                              )}
-                            </div>
-                          </div>
-                        `
-                      )}
+                      <div class="previous-title" @click=${this.navigateBack}>
+                        <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
+                        ${previousItem.title}
+                      </div>
                     `
                   : ""}
+                <h1 class="title">${currentItem.title}</h1>
+                ${subtitle
+                  ? html`
+                      <h2 class="subtitle">
+                        ${subtitle}
+                      </h2>
+                    `
+                  : ""}
+              </div>
+              ${currentItem.can_play &&
+              (!currentItem.thumbnail || !this._narrow)
+                ? html`
+                    <mwc-button
+                      raised
+                      .item=${currentItem}
+                      @click=${this._actionClicked}
+                    >
+                      <ha-svg-icon
+                        .label=${this.hass.localize(
+                          `ui.components.media-browser.${this.action}-media`
+                        )}
+                        .path=${this.action === "play" ? mdiPlay : mdiPlus}
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.components.media-browser.${this.action}`
+                      )}
+                    </mwc-button>
+                  `
+                : ""}
+            </div>
+          </div>
+          ${this.dialog
+            ? html`
+                <mwc-icon-button
+                  aria-label=${this.hass.localize("ui.dialogs.generic.close")}
+                  @click=${this._closeDialogAction}
+                  class="header_button"
+                  dir=${computeRTLDirection(this.hass)}
+                >
+                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                </mwc-icon-button>
+              `
+            : ""}
+        </div>
+      </div>
+      ${this._error
+        ? html`
+            <div class="container">
+              ${this._renderError(this._error)}
+            </div>
+          `
+        : currentItem.children?.length
+        ? childrenMediaClass.layout === "grid"
+          ? html`
+              <div
+                class="children ${classMap({
+                  portrait: childrenMediaClass.thumbnail_ratio === "portrait",
+                })}"
+              >
+                ${currentItem.children.map(
+                  (child) => html`
+                    <div
+                      class="child"
+                      .item=${child}
+                      @click=${this._childClicked}
+                    >
+                      <div class="ha-card-parent">
+                        <ha-card
+                          outlined
+                          style=${styleMap({
+                            backgroundImage: child.thumbnail
+                              ? `url(${child.thumbnail})`
+                              : "none",
+                          })}
+                        >
+                          ${!child.thumbnail
+                            ? html`
+                                <ha-svg-icon
+                                  class="folder"
+                                  .path=${MediaClassBrowserSettings[
+                                    child.media_class === "directory"
+                                      ? child.children_media_class ||
+                                        child.media_class
+                                      : child.media_class
+                                  ].icon}
+                                ></ha-svg-icon>
+                              `
+                            : ""}
+                        </ha-card>
+                        ${child.can_play
+                          ? html`
+                              <mwc-icon-button
+                                class="play ${classMap({
+                                  can_expand: child.can_expand,
+                                })}"
+                                .item=${child}
+                                .label=${this.hass.localize(
+                                  `ui.components.media-browser.${this.action}-media`
+                                )}
+                                @click=${this._actionClicked}
+                              >
+                                <ha-svg-icon
+                                  .path=${this.action === "play"
+                                    ? mdiPlay
+                                    : mdiPlus}
+                                ></ha-svg-icon>
+                              </mwc-icon-button>
+                            `
+                          : ""}
+                      </div>
+                      <div class="title">${child.title}</div>
+                      <div class="type">
+                        ${this.hass.localize(
+                          `ui.components.media-browser.content-type.${child.media_content_type}`
+                        )}
+                      </div>
+                    </div>
+                  `
+                )}
               </div>
             `
           : html`
               <mwc-list>
-                ${mostRecentItem.children.map(
+                ${currentItem.children.map(
                   (child) => html`
                     <mwc-list-item
-                      @click=${this._actionClicked}
+                      @click=${this._childClicked}
                       .item=${child}
                       graphic="avatar"
                       hasMeta
+                      dir=${computeRTLDirection(this.hass)}
                     >
                       <div
                         class="graphic"
                         style=${ifDefined(
-                          showImages && child.thumbnail
+                          mediaClass.show_list_images && child.thumbnail
                             ? `background-image: url(${child.thumbnail})`
                             : undefined
                         )}
@@ -292,7 +334,8 @@ export class HaMediaPlayerBrowse extends LitElement {
                       >
                         <mwc-icon-button
                           class="play ${classMap({
-                            show: !showImages || !child.thumbnail,
+                            show:
+                              !mediaClass.show_list_images || !child.thumbnail,
                           })}"
                           .item=${child}
                           .label=${this.hass.localize(
@@ -305,14 +348,42 @@ export class HaMediaPlayerBrowse extends LitElement {
                           ></ha-svg-icon>
                         </mwc-icon-button>
                       </div>
-                      <span>${child.title}</span>
+                      <span class="title">${child.title}</span>
                     </mwc-list-item>
                     <li divider role="separator"></li>
                   `
                 )}
               </mwc-list>
             `
-        : this.hass.localize("ui.components.media-browser.no_items")}
+        : html`
+            <div class="container">
+              ${this.hass.localize("ui.components.media-browser.no_items")}<br />
+
+              ${currentItem.media_content_id.startsWith(
+                "media-source://media_source/local_source"
+              )
+                ? html`${this.hass.localize(
+                      "ui.components.media-browser.learn_adding_local_media",
+                      "documentation",
+                      html`<a
+                        href="${documentationUrl(
+                          this.hass,
+                          "/more-info/local-media/add-media"
+                        )}"
+                        target="_blank"
+                        rel="noreferrer"
+                        >${this.hass.localize(
+                          "ui.components.media-browser.documentation"
+                        )}</a
+                      >`
+                    )}
+                    <br />
+                    ${this.hass.localize(
+                      "ui.components.media-browser.local_media_files"
+                    )}.`
+                : ""}
+            </div>
+          `}
     `;
   }
 
@@ -338,11 +409,22 @@ export class HaMediaPlayerBrowse extends LitElement {
       return;
     }
 
-    this._fetchData(this.mediaContentId, this.mediaContentType).then(
-      (itemData) => {
+    if (changedProps.has("entityId")) {
+      this._error = undefined;
+      this._mediaPlayerItems = [];
+    }
+
+    this._fetchData(this.mediaContentId, this.mediaContentType)
+      .then((itemData) => {
+        if (!itemData) {
+          return;
+        }
+
         this._mediaPlayerItems = [itemData];
-      }
-    );
+      })
+      .catch((err) => {
+        this._error = err;
+      });
   }
 
   private _actionClicked(ev: MouseEvent): void {
@@ -353,27 +435,44 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _runAction(item: MediaPlayerItem): void {
-    fireEvent(this, "media-picked", {
-      media_content_id: item.media_content_id,
-      media_content_type: item.media_content_type,
-    });
+    fireEvent(this, "media-picked", { item });
   }
 
-  private async _navigateForward(ev: MouseEvent): Promise<void> {
+  private async _childClicked(ev: MouseEvent): Promise<void> {
     const target = ev.currentTarget as any;
     const item: MediaPlayerItem = target.item;
 
     if (!item) {
       return;
     }
+
+    if (!item.can_expand) {
+      this._runAction(item);
+      return;
+    }
+
     this._navigate(item);
   }
 
   private async _navigate(item: MediaPlayerItem) {
-    const itemData = await this._fetchData(
-      item.media_content_id,
-      item.media_content_type
-    );
+    this._error = undefined;
+
+    let itemData: MediaPlayerItem;
+
+    try {
+      itemData = await this._fetchData(
+        item.media_content_id,
+        item.media_content_type
+      );
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.components.media-browser.media_browsing_error"
+        ),
+        text: this._renderError(err),
+      });
+      return;
+    }
 
     this.scrollTo(0, 0);
     this._mediaPlayerItems = [...this._mediaPlayerItems, itemData];
@@ -383,12 +482,15 @@ export class HaMediaPlayerBrowse extends LitElement {
     mediaContentId?: string,
     mediaContentType?: string
   ): Promise<MediaPlayerItem> {
-    const itemData = await browseMediaPlayer(
-      this.hass,
-      this.entityId,
-      !mediaContentId ? undefined : mediaContentId,
-      mediaContentType
-    );
+    const itemData =
+      this.entityId !== BROWSER_PLAYER
+        ? await browseMediaPlayer(
+            this.hass,
+            this.entityId,
+            mediaContentId,
+            mediaContentType
+          )
+        : await browseLocalMediaPlayer(this.hass, mediaContentId);
 
     return itemData;
   }
@@ -416,14 +518,44 @@ export class HaMediaPlayerBrowse extends LitElement {
     this._resizeObserver.observe(this);
   }
 
-  private _hasExpandableChildren = memoizeOne((children) =>
-    children.find((item: MediaPlayerItem) => item.can_expand)
-  );
-
   private _closeDialogAction(): void {
     fireEvent(this, "close-dialog");
   }
 
+  private _renderError(err: { message: string; code: string }) {
+    if (err.message === "Media directory does not exist.") {
+      return html`
+        <h2>
+          ${this.hass.localize(
+            "ui.components.media-browser.no_local_media_found"
+          )}
+        </h2>
+        <p>
+          ${this.hass.localize("ui.components.media-browser.no_media_folder")}
+          <br />
+          ${this.hass.localize(
+            "ui.components.media-browser.setup_local_help",
+            "documentation",
+            html`<a
+              href="${documentationUrl(
+                this.hass,
+                "/more-info/local-media/setup-media"
+              )}"
+              target="_blank"
+              rel="noreferrer"
+              >${this.hass.localize(
+                "ui.components.media-browser.documentation"
+              )}</a
+            >`
+          )}
+          <br />
+          ${this.hass.localize("ui.components.media-browser.local_media_files")}
+        </p>
+      `;
+    }
+    return html`<span class="error">${err.message}</span>`;
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,
@@ -436,26 +568,26 @@ export class HaMediaPlayerBrowse extends LitElement {
           flex-direction: column;
         }
 
+        .container {
+          padding: 16px;
+        }
+
         .header {
-          display: flex;
+          display: block;
           justify-content: space-between;
           border-bottom: 1px solid var(--divider-color);
-        }
-
-        .header_button {
-          position: relative;
-          top: 14px;
-          right: -8px;
-        }
-
-        .header {
           background-color: var(--card-background-color);
           position: sticky;
+          position: -webkit-sticky;
           top: 0;
           z-index: 5;
           padding: 20px 24px 10px;
         }
 
+        .header-wrapper {
+          display: flex;
+        }
+
         .header-content {
           display: flex;
           flex-wrap: wrap;
@@ -483,12 +615,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         .header-info mwc-button {
           display: block;
-        }
-
-        .breadcrumb-overflow {
-          display: flex;
-          flex-grow: 1;
-          justify-content: space-between;
+          --mdc-theme-primary: var(--primary-color);
         }
 
         .breadcrumb {
@@ -532,6 +659,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
         mwc-list {
           --mdc-list-vertical-padding: 0;
+          --mdc-list-item-graphic-margin: 0;
           --mdc-theme-text-icon-on-background: var(--secondary-text-color);
           margin-top: 10px;
         }
@@ -548,14 +676,18 @@ export class HaMediaPlayerBrowse extends LitElement {
           display: grid;
           grid-template-columns: repeat(
             auto-fit,
-            minmax(var(--media-browse-item-size, 175px), 0.33fr)
+            minmax(var(--media-browse-item-size, 175px), 0.1fr)
           );
           grid-gap: 16px;
           margin: 8px 0px;
+          padding: 0px 24px;
         }
 
-        :host(:not([narrow])) .children {
-          padding: 0px 24px;
+        :host([dialog]) .children {
+          grid-template-columns: repeat(
+            auto-fit,
+            minmax(var(--media-browse-item-size, 175px), 0.33fr)
+          );
         }
 
         .child {
@@ -569,7 +701,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           width: 100%;
         }
 
-        ha-card {
+        .children ha-card {
           width: 100%;
           padding-bottom: 100%;
           position: relative;
@@ -577,6 +709,11 @@ export class HaMediaPlayerBrowse extends LitElement {
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center;
+          transition: padding-bottom 0.1s ease-out;
+        }
+
+        .portrait.children ha-card {
+          padding-bottom: 150%;
         }
 
         .child .folder,
@@ -592,24 +729,43 @@ export class HaMediaPlayerBrowse extends LitElement {
         }
 
         .child .play {
+          transition: color 0.5s;
+          border-radius: 50%;
+          bottom: calc(50% - 35px);
+          right: calc(50% - 35px);
+          opacity: 0;
+          transition: opacity 0.1s ease-out;
+        }
+
+        .child .play:not(.can_expand) {
+          --mdc-icon-button-size: 70px;
+          --mdc-icon-size: 48px;
+        }
+
+        .ha-card-parent:hover .play:not(.can_expand) {
+          opacity: 1;
+          color: var(--primary-color);
+        }
+
+        .child .play.can_expand {
+          opacity: 1;
+          background-color: rgba(var(--rgb-card-background-color), 0.5);
           bottom: 4px;
           right: 4px;
-          transition: all 0.5s;
-          background-color: rgba(var(--rgb-card-background-color), 0.5);
-          border-radius: 50%;
         }
 
         .child .play:hover {
           color: var(--primary-color);
         }
 
-        ha-card:hover {
+        .ha-card-parent:hover ha-card {
           opacity: 0.5;
         }
 
         .child .title {
           font-size: 16px;
           padding-top: 8px;
+          padding-left: 2px;
           overflow: hidden;
           display: -webkit-box;
           -webkit-box-orient: vertical;
@@ -619,6 +775,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         .child .type {
           font-size: 12px;
           color: var(--secondary-text-color);
+          padding-left: 2px;
         }
 
         mwc-list-item .graphic {
@@ -643,6 +800,14 @@ export class HaMediaPlayerBrowse extends LitElement {
           background-color: transparent;
         }
 
+        mwc-list-item .title {
+          margin-left: 16px;
+        }
+        mwc-list-item[dir="rtl"] .title {
+          margin-right: 16px;
+          margin-left: 0;
+        }
+
         /* ============= Narrow ============= */
 
         :host([narrow]) {
@@ -657,6 +822,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 0;
         }
 
+        :host([narrow]) .header.no-dialog {
+          display: block;
+        }
+
         :host([narrow]) .header_button {
           position: absolute;
           top: 14px;
@@ -696,8 +865,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 20px 24px 10px;
         }
 
-        :host([narrow]) .media-source,
-        :host([narrow]) .children {
+        :host([narrow]) .media-source {
           padding: 0 24px;
         }
 
@@ -716,6 +884,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           -webkit-line-clamp: 1;
         }
 
+        :host(:not([narrow])[scroll]) .header:not(.no-img) mwc-icon-button {
+          align-self: center;
+        }
+
         :host([scroll]) .header-info mwc-button,
         .no-img .header-info mwc-button {
           padding-right: 4px;

src/components/user/ha-person-badge.ts

@@ -0,0 +1,74 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { styleMap } from "lit-html/directives/style-map";
+import { Person } from "../../data/person";
+import { computeInitials } from "./ha-user-badge";
+
+@customElement("ha-person-badge")
+class PersonBadge extends LitElement {
+  @property({ attribute: false }) public person?: Person;
+
+  protected render(): TemplateResult {
+    if (!this.person) {
+      return html``;
+    }
+
+    const picture = this.person.picture;
+
+    if (picture) {
+      return html`<div
+        style=${styleMap({ backgroundImage: `url(${picture})` })}
+        class="picture"
+      ></div>`;
+    }
+    const initials = computeInitials(this.person.name);
+    return html`<div
+      class="initials ${classMap({ long: initials!.length > 2 })}"
+    >
+      ${initials}
+    </div>`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: contents;
+      }
+      .picture {
+        width: 40px;
+        height: 40px;
+        background-size: cover;
+        border-radius: 50%;
+      }
+      .initials {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 40px;
+        line-height: 40px;
+        border-radius: 50%;
+        text-align: center;
+        background-color: var(--light-primary-color);
+        text-decoration: none;
+        color: var(--text-light-primary-color, var(--primary-text-color));
+        overflow: hidden;
+      }
+      .initials.long {
+        font-size: 80%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-person-badge": PersonBadge;
+  }
+}

src/components/user/ha-user-badge.ts

@@ -3,17 +3,20 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
-import { toggleAttribute } from "../../common/dom/toggle_attribute";
+import { classMap } from "lit-html/directives/class-map";
+import { styleMap } from "lit-html/directives/style-map";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { User } from "../../data/user";
-import { CurrentUser } from "../../types";
+import { CurrentUser, HomeAssistant } from "../../types";
 
-const computeInitials = (name: string) => {
+export const computeInitials = (name: string) => {
   if (!name) {
-    return "user";
+    return "?";
   }
   return (
     name
@@ -28,27 +31,89 @@ const computeInitials = (name: string) => {
 };
 
 @customElement("ha-user-badge")
-class StateBadge extends LitElement {
-  @property() public user?: User | CurrentUser;
+class UserBadge extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  protected render(): TemplateResult {
-    const user = this.user;
-    const initials = user ? computeInitials(user.name) : "?";
-    return html` ${initials} `;
-  }
+  @property({ attribute: false }) public user?: User | CurrentUser;
+
+  @internalProperty() private _personPicture?: string;
+
+  private _personEntityId?: string;
 
   protected updated(changedProps) {
     super.updated(changedProps);
-    toggleAttribute(
-      this,
-      "long",
-      (this.user ? computeInitials(this.user.name) : "?").length > 2
-    );
+    if (changedProps.has("user")) {
+      this._getPersonPicture();
+      return;
+    }
+    const oldHass = changedProps.get("hass");
+    if (
+      this._personEntityId &&
+      oldHass &&
+      this.hass.states[this._personEntityId] !==
+        oldHass.states[this._personEntityId]
+    ) {
+      const state = this.hass.states[this._personEntityId];
+      if (state) {
+        this._personPicture = state.attributes.entity_picture;
+      } else {
+        this._getPersonPicture();
+      }
+    } else if (!this._personEntityId && oldHass) {
+      this._getPersonPicture();
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.user) {
+      return html``;
+    }
+    const picture = this._personPicture;
+
+    if (picture) {
+      return html`<div
+        style=${styleMap({ backgroundImage: `url(${picture})` })}
+        class="picture"
+      ></div>`;
+    }
+    const initials = computeInitials(this.user.name);
+    return html`<div
+      class="initials ${classMap({ long: initials!.length > 2 })}"
+    >
+      ${initials}
+    </div>`;
+  }
+
+  private _getPersonPicture() {
+    this._personEntityId = undefined;
+    this._personPicture = undefined;
+    if (!this.hass || !this.user) {
+      return;
+    }
+    for (const entity of Object.values(this.hass.states)) {
+      if (
+        entity.attributes.user_id === this.user.id &&
+        computeStateDomain(entity) === "person"
+      ) {
+        this._personEntityId = entity.entity_id;
+        this._personPicture = entity.attributes.entity_picture;
+        break;
+      }
+    }
   }
 
   static get styles(): CSSResult {
     return css`
       :host {
+        display: contents;
+      }
+      .picture {
+        width: 40px;
+        height: 40px;
+        background-size: cover;
+        border-radius: 50%;
+      }
+      .initials {
         display: inline-block;
         box-sizing: border-box;
         width: 40px;
@@ -60,8 +125,7 @@ class StateBadge extends LitElement {
         color: var(--text-light-primary-color, var(--primary-text-color));
         overflow: hidden;
       }
-
-      :host([long]) {
+      .initials.long {
         font-size: 80%;
       }
     `;
@@ -70,6 +134,6 @@ class StateBadge extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-user-badge": StateBadge;
+    "ha-user-badge": UserBadge;
   }
 }

src/components/user/ha-user-picker.ts

@@ -53,7 +53,11 @@ class HaUserPicker extends LitElement {
           ${this._sortedUsers(this.users).map(
             (user) => html`
               <paper-icon-item data-user-id=${user.id}>
-                <ha-user-badge .user=${user} slot="item-icon"></ha-user-badge>
+                <ha-user-badge
+                  .hass=${this.hass}
+                  .user=${user}
+                  slot="item-icon"
+                ></ha-user-badge>
                 ${user.name}
               </paper-icon-item>
             `

src/data/automation.ts

@@ -3,7 +3,7 @@ import {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 import { navigate } from "../common/navigate";
-import { HomeAssistant, Context } from "../types";
+import { Context, HomeAssistant } from "../types";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action } from "./script";
 
@@ -15,6 +15,7 @@ export interface AutomationEntity extends HassEntityBase {
 }
 
 export interface AutomationConfig {
+  id?: string;
   alias: string;
   description: string;
   trigger: Trigger[];
@@ -32,7 +33,8 @@ export interface ForDict {
 
 export interface StateTrigger {
   platform: "state";
-  entity_id?: string;
+  entity_id: string;
+  attribute?: string;
   from?: string | number;
   to?: string | number;
   for?: string | number | ForDict;
@@ -59,6 +61,7 @@ export interface HassTrigger {
 export interface NumericStateTrigger {
   platform: "numeric_state";
   entity_id: string;
+  attribute?: string;
   above?: number;
   below?: number;
   value_template?: string;
@@ -136,12 +139,14 @@ export interface LogicalCondition {
 export interface StateCondition {
   condition: "state";
   entity_id: string;
+  attribute?: string;
   state: string | number;
 }
 
 export interface NumericStateCondition {
   condition: "numeric_state";
   entity_id: string;
+  attribute?: string;
   above?: number;
   below?: number;
   value_template?: string;

src/data/config_flow.ts

@@ -13,6 +13,8 @@ export const DISCOVERY_SOURCES = [
   "discovery",
 ];
 
+export const ATTENTION_SOURCES = ["reauth"];
+
 export const createConfigFlow = (hass: HomeAssistant, handler: string) =>
   hass.callApi<DataEntryFlowStep>("POST", "config/config_entries/flow", {
     handler,

src/data/hassio/common.ts

@@ -9,7 +9,9 @@ export const hassioApiResultExtractor = <T>(response: HassioResponse<T>) =>
 export const extractApiErrorMessage = (error: any): string => {
   return typeof error === "object"
     ? typeof error.body === "object"
-      ? error.body.message || "Unkown error, see logs"
-      : error.body || "Unkown error, see logs"
+      ? error.body.message || "Unknown error, see logs"
+      : error.body || "Unknown error, see logs"
     : error;
 };
+
+export const ignoredStatusCodes = new Set([502, 503, 504]);

src/data/logbook.ts

@@ -23,7 +23,8 @@ export const getLogbookData = (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string
+  entityId?: string,
+  entity_matches_only?: boolean
 ) => {
   const ALL_ENTITIES = "*";
 
@@ -51,7 +52,8 @@ export const getLogbookData = (
     hass,
     startDate,
     endDate,
-    entityId !== ALL_ENTITIES ? entityId : undefined
+    entityId !== ALL_ENTITIES ? entityId : undefined,
+    entity_matches_only
   ).then((entries) => entries.reverse());
   return DATA_CACHE[cacheKey][entityId];
 };
@@ -60,11 +62,13 @@ const getLogbookDataFromServer = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string
+  entityId?: string,
+  entity_matches_only?: boolean
 ) => {
   const url = `logbook/${startDate}?end_time=${endDate}${
     entityId ? `&entity=${entityId}` : ""
-  }`;
+  }${entity_matches_only ? `&entity_matches_only` : ""}`;
+
   return hass.callApi<LogbookEntry[]>("GET", url);
 };
 

src/data/media-player.ts

@@ -1,3 +1,21 @@
+import {
+  mdiAccountMusic,
+  mdiAccountMusicOutline,
+  mdiAlbum,
+  mdiApplication,
+  mdiDramaMasks,
+  mdiFileMusic,
+  mdiFolder,
+  mdiGamepadVariant,
+  mdiImage,
+  mdiMovie,
+  mdiMusic,
+  mdiPlaylistMusic,
+  mdiPodcast,
+  mdiTelevisionClassic,
+  mdiVideo,
+  mdiWeb,
+} from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
 
@@ -20,9 +38,70 @@ export const CONTRAST_RATIO = 4.5;
 
 export type MediaPlayerBrowseAction = "pick" | "play";
 
+export const BROWSER_PLAYER = "browser";
+
+export type MediaClassBrowserSetting = {
+  icon: string;
+  thumbnail_ratio?: string;
+  layout?: string;
+  show_list_images?: boolean;
+};
+
+export const MediaClassBrowserSettings: {
+  [type: string]: MediaClassBrowserSetting;
+} = {
+  album: { icon: mdiAlbum, layout: "grid" },
+  app: { icon: mdiApplication, layout: "grid" },
+  artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true },
+  channel: {
+    icon: mdiTelevisionClassic,
+    thumbnail_ratio: "portrait",
+    layout: "grid",
+  },
+  composer: {
+    icon: mdiAccountMusicOutline,
+    layout: "grid",
+    show_list_images: true,
+  },
+  contributing_artist: {
+    icon: mdiAccountMusic,
+    layout: "grid",
+    show_list_images: true,
+  },
+  directory: { icon: mdiFolder, layout: "grid", show_list_images: true },
+  episode: {
+    icon: mdiTelevisionClassic,
+    layout: "grid",
+    thumbnail_ratio: "portrait",
+  },
+  game: {
+    icon: mdiGamepadVariant,
+    layout: "grid",
+    thumbnail_ratio: "portrait",
+  },
+  genre: { icon: mdiDramaMasks, layout: "grid", show_list_images: true },
+  image: { icon: mdiImage, layout: "grid" },
+  movie: { icon: mdiMovie, thumbnail_ratio: "portrait", layout: "grid" },
+  music: { icon: mdiMusic },
+  playlist: { icon: mdiPlaylistMusic, layout: "grid", show_list_images: true },
+  podcast: { icon: mdiPodcast, layout: "grid" },
+  season: {
+    icon: mdiTelevisionClassic,
+    layout: "grid",
+    thumbnail_ratio: "portrait",
+  },
+  track: { icon: mdiFileMusic },
+  tv_show: {
+    icon: mdiTelevisionClassic,
+    layout: "grid",
+    thumbnail_ratio: "portrait",
+  },
+  url: { icon: mdiWeb },
+  video: { icon: mdiVideo, layout: "grid" },
+};
+
 export interface MediaPickedEvent {
-  media_content_id: string;
-  media_content_type: string;
+  item: MediaPlayerItem;
 }
 
 export interface MediaPlayerThumbnail {
@@ -39,6 +118,8 @@ export interface MediaPlayerItem {
   title: string;
   media_content_type: string;
   media_content_id: string;
+  media_class: string;
+  children_media_class: string;
   can_play: boolean;
   can_expand: boolean;
   thumbnail?: string;
@@ -58,6 +139,15 @@ export const browseMediaPlayer = (
     media_content_type: mediaContentType,
   });
 
+export const browseLocalMediaPlayer = (
+  hass: HomeAssistant,
+  mediaContentId?: string
+): Promise<MediaPlayerItem> =>
+  hass.callWS<MediaPlayerItem>({
+    type: "media_source/browse_media",
+    media_content_id: mediaContentId,
+  });
+
 export const getCurrentProgress = (stateObj: HassEntity): number => {
   let progress = stateObj.attributes.media_position;
 

src/data/ozw.ts

@@ -14,6 +14,8 @@ export interface OZWDevice {
   is_zwave_plus: boolean;
   ozw_instance: number;
   event: string;
+  node_manufacturer_name: string;
+  node_product_name: string;
 }
 
 export interface OZWDeviceMetaDataResponse {
@@ -147,6 +149,15 @@ export const fetchOZWNetworkStatistics = (
     ozw_instance: ozw_instance,
   });
 
+export const fetchOZWNodes = (
+  hass: HomeAssistant,
+  ozw_instance: number
+): Promise<OZWDevice[]> =>
+  hass.callWS({
+    type: "ozw/get_nodes",
+    ozw_instance: ozw_instance,
+  });
+
 export const fetchOZWNodeStatus = (
   hass: HomeAssistant,
   ozw_instance: number,

src/data/refresh_token.ts

@@ -0,0 +1,17 @@
+declare global {
+  interface HASSDomEvents {
+    "hass-refresh-tokens": undefined;
+  }
+}
+
+export interface RefreshToken {
+  client_icon?: string;
+  client_id: string;
+  client_name?: string;
+  created_at: string;
+  id: string;
+  is_current: boolean;
+  last_used_at?: string;
+  last_used_ip?: string;
+  type: "normal" | "long_lived_access_token";
+}

src/data/script.ts

@@ -5,7 +5,7 @@ import {
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
-import { Condition } from "./automation";
+import { Condition, Trigger } from "./automation";
 
 export const MODES = ["single", "restart", "queued", "parallel"];
 export const MODES_MAX = ["queued", "parallel"];
@@ -56,6 +56,13 @@ export interface SceneAction {
 export interface WaitAction {
   wait_template: string;
   timeout?: number;
+  continue_on_timeout?: boolean;
+}
+
+export interface WaitForTriggerAction {
+  wait_for_trigger: Trigger[];
+  timeout?: number;
+  continue_on_timeout?: boolean;
 }
 
 export interface RepeatAction {
@@ -91,6 +98,7 @@ export type Action =
   | DelayAction
   | SceneAction
   | WaitAction
+  | WaitForTriggerAction
   | RepeatAction
   | ChooseAction;
 

src/data/weather.ts

@@ -200,7 +200,7 @@ export const weatherSVGStyles = css`
     fill: var(--weather-icon-sun-color, #fdd93c);
   }
   .moon {
-    fill: var(--weather-icon-moon-color, #fdf9cc);
+    fill: var(--weather-icon-moon-color, #fcf497);
   }
   .cloud-back {
     fill: var(--weather-icon-cloud-back-color, #d4d4d4);

src/data/ws-templates.ts

@@ -1,20 +1,27 @@
 import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 
-interface RenderTemplateResult {
+export interface RenderTemplateResult {
   result: string;
+  listeners: TemplateListeners;
+}
+
+interface TemplateListeners {
+  all: boolean;
+  domains: string[];
+  entities: string[];
 }
 
 export const subscribeRenderTemplate = (
   conn: Connection,
-  onChange: (result: string) => void,
+  onChange: (result: RenderTemplateResult) => void,
   params: {
     template: string;
     entity_ids?: string | string[];
     variables?: object;
   }
 ): Promise<UnsubscribeFunc> => {
-  return conn.subscribeMessage(
-    (msg: RenderTemplateResult) => onChange(msg.result),
-    { type: "render_template", ...params }
-  );
+  return conn.subscribeMessage((msg: RenderTemplateResult) => onChange(msg), {
+    type: "render_template",
+    ...params,
+  });
 };

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -97,8 +97,13 @@ export const showConfigFlowDialog = (
     },
 
     renderExternalStepHeader(hass, step) {
-      return hass.localize(
-        `component.${step.handler}.config.step.${step.step_id}.title`
+      return (
+        hass.localize(
+          `component.${step.handler}.config.step.${step.step_id}.title`
+        ) ||
+        hass.localize(
+          "ui.panel.config.integrations.config_flow.external_step.open_site"
+        )
       );
     },
 

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -20,6 +20,7 @@ import { LocalizeFunc } from "../../common/translations/localize";
 import "../../components/ha-icon-next";
 import { domainToName } from "../../data/integration";
 import { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
 
@@ -122,7 +123,7 @@ class StepFlowPickHandler extends LitElement {
               ${this.hass.localize(
                 "ui.panel.config.integrations.note_about_website_reference"
               )}<a
-                href="https://www.home-assistant.io/integrations/"
+                href="${documentationUrl(this.hass, "/integrations/")}"
                 target="_blank"
                 rel="noreferrer"
                 >${this.hass.localize(

src/dialogs/generic/dialog-box.ts

@@ -5,19 +5,19 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-switch";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogParams } from "./show-dialog-box";
-import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("dialog-box")
 class DialogBox extends LitElement {
@@ -57,7 +57,8 @@ class DialogBox extends LitElement {
         open
         ?scrimClickAction=${this._params.prompt}
         ?escapeKeyAction=${this._params.prompt}
-        @closed=${this._dismiss}
+        @closed=${this._dialogClosed}
+        defaultAction="ignore"
         .heading=${this._params.title
           ? this._params.title
           : this._params.confirmation &&
@@ -78,10 +79,10 @@ class DialogBox extends LitElement {
           ${this._params.prompt
             ? html`
                 <paper-input
-                  autofocus
+                  dialogInitialFocus
                   .value=${this._value}
-                  @value-changed=${this._valueChanged}
                   @keyup=${this._handleKeyUp}
+                  @value-changed=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -100,7 +101,11 @@ class DialogBox extends LitElement {
               : this.hass.localize("ui.dialogs.generic.cancel")}
           </mwc-button>
         `}
-        <mwc-button @click=${this._confirm} slot="primaryAction">
+        <mwc-button
+          @click=${this._confirm}
+          ?dialogInitialFocus=${!this._params.prompt}
+          slot="primaryAction"
+        >
           ${this._params.confirmText
             ? this._params.confirmText
             : this.hass.localize("ui.dialogs.generic.ok")}
@@ -114,8 +119,8 @@ class DialogBox extends LitElement {
   }
 
   private _dismiss(): void {
-    if (this._params!.cancel) {
-      this._params!.cancel();
+    if (this._params?.cancel) {
+      this._params.cancel();
     }
     this._close();
   }
@@ -133,7 +138,17 @@ class DialogBox extends LitElement {
     this._close();
   }
 
+  private _dialogClosed(ev) {
+    if (ev.detail.action === "ignore") {
+      return;
+    }
+    this.closeDialog();
+  }
+
   private _close(): void {
+    if (!this._params) {
+      return;
+    }
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }

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

@@ -12,12 +12,13 @@ import {
 import "../../../components/ha-relative-time";
 import { triggerAutomation } from "../../../data/automation";
 import { HomeAssistant } from "../../../types";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("more-info-automation")
 class MoreInfoAutomation extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public stateObj?: HassEntity;
+  @property({ attribute: false }) public stateObj?: HassEntity;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
@@ -34,7 +35,10 @@ class MoreInfoAutomation extends LitElement {
       </div>
 
       <div class="actions">
-        <mwc-button @click=${this.handleAction}>
+        <mwc-button
+          @click=${this.handleAction}
+          .disabled=${UNAVAILABLE_STATES.includes(this.stateObj!.state)}
+        >
           ${this.hass.localize("ui.card.automation.trigger")}
         </mwc-button>
       </div>
@@ -52,7 +56,7 @@ class MoreInfoAutomation extends LitElement {
         justify-content: space-between;
       }
       .actions {
-        margin: 36px 0 8px 0;
+        margin: 8px 0;
         text-align: right;
       }
     `;

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

@@ -4,9 +4,9 @@ import {
   css,
   CSSResult,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -47,8 +47,9 @@ class MoreInfoCamera extends LitElement {
     return html`
       <ha-camera-stream
         .hass=${this.hass}
-        .stateObj="${this.stateObj}"
-        showcontrols
+        .stateObj=${this.stateObj}
+        allow-exoplayer
+        controls
       ></ha-camera-stream>
       ${this._cameraPrefs
         ? html`

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

@@ -61,20 +61,20 @@ class MoreInfoLight extends LitElement {
           "is-on": this.stateObj.state === "on",
         })}"
       >
+        ${supportsFeature(this.stateObj!, SUPPORT_BRIGHTNESS)
+          ? html`
+              <ha-labeled-slider
+                caption=${this.hass.localize("ui.card.light.brightness")}
+                icon="hass:brightness-5"
+                min="1"
+                max="255"
+                value=${this._brightnessSliderValue}
+                @change=${this._brightnessSliderChanged}
+              ></ha-labeled-slider>
+            `
+          : ""}
         ${this.stateObj.state === "on"
           ? html`
-              ${supportsFeature(this.stateObj!, SUPPORT_BRIGHTNESS)
-                ? html`
-                    <ha-labeled-slider
-                      caption=${this.hass.localize("ui.card.light.brightness")}
-                      icon="hass:brightness-5"
-                      min="1"
-                      max="255"
-                      value=${this._brightnessSliderValue}
-                      @change=${this._brightnessSliderChanged}
-                    ></ha-labeled-slider>
-                  `
-                : ""}
               ${supportsFeature(this.stateObj, SUPPORT_COLOR_TEMP)
                 ? html`
                     <ha-labeled-slider
@@ -134,7 +134,7 @@ class MoreInfoLight extends LitElement {
                         attr-for-selected="item-name"
                         >${this.stateObj.attributes.effect_list.map(
                           (effect: string) => html`
-                            <paper-item itemName=${effect}
+                            <paper-item .itemName=${effect}
                               >${effect}</paper-item
                             >
                           `
@@ -170,7 +170,7 @@ class MoreInfoLight extends LitElement {
   }
 
   private _effectChanged(ev: CustomEvent) {
-    const newVal = ev.detail.value;
+    const newVal = ev.detail.item.itemName;
 
     if (!newVal || this.stateObj!.attributes.effect === newVal) {
       return;

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

@@ -130,7 +130,7 @@ class MoreInfoMediaPlayer extends LitElement {
             </div>
           `
         : ""}
-      ${stateObj.state !== "off" &&
+      ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) &&
       supportsFeature(stateObj, SUPPORT_SELECT_SOURCE) &&
       stateObj.attributes.source_list?.length
         ? html`
@@ -188,14 +188,17 @@ class MoreInfoMediaPlayer extends LitElement {
             <div class="tts">
               <paper-input
                 id="ttsInput"
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .label=${this.hass.localize(
                   "ui.card.media_player.text_to_speak"
                 )}
                 @keydown=${this._ttsCheckForEnter}
               ></paper-input>
-              <ha-icon-button icon="hass:send" @click=${
-                this._sendTTS
-              }></ha-icon-button>
+              <ha-icon-button 
+                icon="hass:send"                 
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
+                @click=${this._sendTTS}
+              ></ha-icon-button>
             </div>
           </div>
           `
@@ -409,8 +412,8 @@ class MoreInfoMediaPlayer extends LitElement {
       entityId: this.stateObj!.entity_id,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) =>
         this._playMedia(
-          pickedMedia.media_content_id,
-          pickedMedia.media_content_type
+          pickedMedia.item.media_content_id,
+          pickedMedia.item.media_content_type
         ),
     });
   }

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

@@ -32,7 +32,7 @@ class MoreInfoPerson extends LitElement {
     return html`
       <ha-attributes
         .stateObj=${this.stateObj}
-        extraFilters="id,user_id,editable"
+        extra-filters="id,user_id,editable"
       ></ha-attributes>
       ${this.stateObj.attributes.latitude && this.stateObj.attributes.longitude
         ? html`
@@ -78,6 +78,9 @@ class MoreInfoPerson extends LitElement {
         margin: 36px 0 8px 0;
         text-align: right;
       }
+      ha-map {
+        margin-top: 16px;
+      }
     `;
   }
 }

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

@@ -26,15 +26,12 @@ class MoreInfoTimer extends LitElement {
     return html`
       <ha-attributes
         .stateObj=${this.stateObj}
-        .extraFilters=${"remaining"}
+        extra-filters="remaining"
       ></ha-attributes>
       <div class="actions">
         ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
           ? html`
-              <mwc-button
-                .action="${"start"}"
-                @click="${this._handleActionClick}"
-              >
+              <mwc-button .action=${"start"} @click=${this._handleActionClick}>
                 ${this.hass!.localize("ui.card.timer.actions.start")}
               </mwc-button>
             `
@@ -42,7 +39,7 @@ class MoreInfoTimer extends LitElement {
         ${this.stateObj.state === "active"
           ? html`
               <mwc-button
-                .action="${"pause"}"
+                .action=${"pause"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.pause")}
@@ -52,13 +49,13 @@ class MoreInfoTimer extends LitElement {
         ${this.stateObj.state === "active" || this.stateObj.state === "paused"
           ? html`
               <mwc-button
-                .action="${"cancel"}"
+                .action=${"cancel"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.cancel")}
               </mwc-button>
               <mwc-button
-                .action="${"finish"}"
+                .action=${"finish"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.finish")}

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -1,38 +1,70 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
-import "../../components/ha-header-bar";
-import "../../components/ha-dialog";
-import "../../components/ha-svg-icon";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { navigate } from "../../common/navigate";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/state-history-charts";
-import { removeEntityRegistryEntry } from "../../data/entity_registry";
-import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
-import "../../state-summary/state-card-content";
-import { showConfirmationDialog } from "../generic/show-dialog-box";
-import "./more-info-content";
+import "@material/mwc-tab";
+import "@material/mwc-tab-bar";
+import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
 import {
+  css,
   customElement,
+  html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
-  css,
-  html,
 } from "lit-element";
-import { haStyleDialog } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
-import { getRecentWithCache } from "../../data/cached-history";
+import { cache } from "lit-html/directives/cache";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import {
+  DOMAINS_MORE_INFO_NO_HISTORY,
+  DOMAINS_WITH_MORE_INFO,
+} from "../../common/const";
+import { dynamicElement } from "../../common/dom/dynamic-element-directive";
+import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
-import { HistoryResult } from "../../data/history";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { stateMoreInfoType } from "../../common/entity/state_more_info_type";
+import { navigate } from "../../common/navigate";
+import "../../components/ha-dialog";
+import "../../components/ha-header-bar";
+import "../../components/ha-svg-icon";
+import { removeEntityRegistryEntry } from "../../data/entity_registry";
+import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
+import { haStyleDialog } from "../../resources/styles";
+import "../../state-summary/state-card-content";
+import { HomeAssistant } from "../../types";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
+import "./ha-more-info-history";
+import "./ha-more-info-logbook";
 
 const DOMAINS_NO_INFO = ["camera", "configurator"];
 const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
 const EDITABLE_DOMAINS = ["script"];
 
+const MORE_INFO_CONTROL_IMPORT = {
+  alarm_control_panel: () => import("./controls/more-info-alarm_control_panel"),
+  automation: () => import("./controls/more-info-automation"),
+  camera: () => import("./controls/more-info-camera"),
+  climate: () => import("./controls/more-info-climate"),
+  configurator: () => import("./controls/more-info-configurator"),
+  counter: () => import("./controls/more-info-counter"),
+  cover: () => import("./controls/more-info-cover"),
+  fan: () => import("./controls/more-info-fan"),
+  group: () => import("./controls/more-info-group"),
+  humidifier: () => import("./controls/more-info-humidifier"),
+  input_datetime: () => import("./controls/more-info-input_datetime"),
+  light: () => import("./controls/more-info-light"),
+  lock: () => import("./controls/more-info-lock"),
+  media_player: () => import("./controls/more-info-media_player"),
+  person: () => import("./controls/more-info-person"),
+  script: () => import("./controls/more-info-script"),
+  sun: () => import("./controls/more-info-sun"),
+  timer: () => import("./controls/more-info-timer"),
+  vacuum: () => import("./controls/more-info-vacuum"),
+  water_heater: () => import("./controls/more-info-water_heater"),
+  weather: () => import("./controls/more-info-weather"),
+  hidden: () => {},
+  default: () => import("./controls/more-info-default"),
+};
+
 export interface MoreInfoDialogParams {
   entityId: string | null;
 }
@@ -43,11 +75,11 @@ export class MoreInfoDialog extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
-  @internalProperty() private _stateHistory?: HistoryResult;
-
   @internalProperty() private _entityId?: string | null;
 
-  private _historyRefreshInterval?: number;
+  @internalProperty() private _moreInfoType?: string;
+
+  @internalProperty() private _currTabIndex = 0;
 
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;
@@ -55,24 +87,31 @@ export class MoreInfoDialog extends LitElement {
       this.closeDialog();
     }
     this.large = false;
-    this._stateHistory = undefined;
-    if (this._computeShowHistoryComponent(this._entityId)) {
-      this._getStateHistory();
-      clearInterval(this._historyRefreshInterval);
-      this._historyRefreshInterval = window.setInterval(() => {
-        this._getStateHistory();
-      }, 60 * 1000);
-    }
   }
 
   public closeDialog() {
     this._entityId = undefined;
-    this._stateHistory = undefined;
-    clearInterval(this._historyRefreshInterval);
-    this._historyRefreshInterval = undefined;
+    this._currTabIndex = 0;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  protected updated(changedProperties) {
+    if (!this.hass || !this._entityId || !changedProperties.has("_entityId")) {
+      return;
+    }
+    const stateObj = this.hass.states[this._entityId];
+    if (!stateObj) {
+      return;
+    }
+    if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
+      this._moreInfoType = stateObj.attributes.custom_ui_more_info;
+    } else {
+      const type = stateMoreInfoType(stateObj);
+      this._moreInfoType = `more-info-${type}`;
+      MORE_INFO_CONTROL_IMPORT[type]();
+    }
+  }
+
   protected render() {
     if (!this._entityId) {
       return html``;
@@ -93,85 +132,135 @@ export class MoreInfoDialog extends LitElement {
         hideActions
         data-domain=${domain}
       >
-        <ha-header-bar slot="heading">
-          <mwc-icon-button
-            slot="navigationIcon"
-            .label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")}
-            dialogAction="cancel"
-          >
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-          </mwc-icon-button>
-          <div slot="title" class="main-title" @click=${this._enlarge}>
-            ${computeStateName(stateObj)}
-          </div>
-          ${this.hass.user!.is_admin
-            ? html`<mwc-icon-button
-                slot="actionItems"
-                .label=${this.hass.localize(
-                  "ui.dialogs.more_info_control.settings"
-                )}
-                @click=${this._gotoSettings}
-              >
-                <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
-              </mwc-icon-button>`
-            : ""}
-          ${this.hass.user!.is_admin &&
-          ((EDITABLE_DOMAINS_WITH_ID.includes(domain) &&
-            stateObj.attributes.id) ||
-            EDITABLE_DOMAINS.includes(domain))
-            ? html` <mwc-icon-button
-                slot="actionItems"
-                .label=${this.hass.localize(
-                  "ui.dialogs.more_info_control.edit"
-                )}
-                @click=${this._gotoEdit}
-              >
-                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-              </mwc-icon-button>`
-            : ""}
-        </ha-header-bar>
-        <div class="content">
-          ${DOMAINS_NO_INFO.includes(domain)
-            ? ""
-            : html`
-                <state-card-content
-                  .stateObj=${stateObj}
-                  .hass=${this.hass}
-                  in-dialog
-                ></state-card-content>
-              `}
-          ${this._computeShowHistoryComponent(entityId)
+        <div slot="heading" class="heading">
+          <ha-header-bar>
+            <mwc-icon-button
+              slot="navigationIcon"
+              dialogAction="cancel"
+              .label=${this.hass.localize(
+                "ui.dialogs.more_info_control.dismiss"
+              )}
+            >
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>
+            <div slot="title" class="main-title" @click=${this._enlarge}>
+              ${computeStateName(stateObj)}
+            </div>
+            ${this.hass.user!.is_admin
+              ? html`
+                  <mwc-icon-button
+                    slot="actionItems"
+                    .label=${this.hass.localize(
+                      "ui.dialogs.more_info_control.settings"
+                    )}
+                    @click=${this._gotoSettings}
+                  >
+                    <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
+            ${this.hass.user!.is_admin &&
+            ((EDITABLE_DOMAINS_WITH_ID.includes(domain) &&
+              stateObj.attributes.id) ||
+              EDITABLE_DOMAINS.includes(domain))
+              ? html`
+                  <mwc-icon-button
+                    slot="actionItems"
+                    .label=${this.hass.localize(
+                      "ui.dialogs.more_info_control.edit"
+                    )}
+                    @click=${this._gotoEdit}
+                  >
+                    <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
+          </ha-header-bar>
+          ${DOMAINS_WITH_MORE_INFO.includes(domain) &&
+          this._computeShowHistoryComponent(entityId)
             ? html`
-                <state-history-charts
-                  .hass=${this.hass}
-                  .historyData=${this._stateHistory}
-                  up-to-now
-                  .isLoadingData=${!this._stateHistory}
-                ></state-history-charts>
+                <mwc-tab-bar
+                  .activeIndex=${this._currTabIndex}
+                  @MDCTabBar:activated=${this._handleTabChanged}
+                >
+                  <mwc-tab
+                    .label=${this.hass.localize(
+                      "ui.dialogs.more_info_control.details"
+                    )}
+                  ></mwc-tab>
+                  <mwc-tab
+                    .label=${this.hass.localize(
+                      "ui.dialogs.more_info_control.history"
+                    )}
+                  ></mwc-tab>
+                </mwc-tab-bar>
               `
             : ""}
-          <more-info-content
-            .stateObj=${stateObj}
-            .hass=${this.hass}
-          ></more-info-content>
-
-          ${stateObj.attributes.restored
-            ? html`<p>
-                  ${this.hass.localize(
-                    "ui.dialogs.more_info_control.restored.not_provided"
-                  )}
-                </p>
-                <p>
-                  ${this.hass.localize(
-                    "ui.dialogs.more_info_control.restored.remove_intro"
-                  )}
-                </p>
-                <mwc-button class="warning" @click=${this._removeEntity}>
-                  ${this.hass.localize(
-                    "ui.dialogs.more_info_control.restored.remove_action"
-                  )}
-                </mwc-button>`
-            : ""}
+        </div>
+        <div class="content">
+          ${cache(
+            this._currTabIndex === 0
+              ? html`
+                  ${DOMAINS_NO_INFO.includes(domain)
+                    ? ""
+                    : html`
+                        <state-card-content
+                          in-dialog
+                          .stateObj=${stateObj}
+                          .hass=${this.hass}
+                        ></state-card-content>
+                      `}
+                  ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+                  !this._computeShowHistoryComponent(entityId)
+                    ? ""
+                    : html`<ha-more-info-history
+                          .hass=${this.hass}
+                          .entityId=${this._entityId}
+                        ></ha-more-info-history>
+                        <ha-more-info-logbook
+                          .hass=${this.hass}
+                          .entityId=${this._entityId}
+                        ></ha-more-info-logbook>`}
+                  ${this._moreInfoType
+                    ? dynamicElement(this._moreInfoType, {
+                        hass: this.hass,
+                        stateObj,
+                      })
+                    : ""}
+                  ${stateObj.attributes.restored
+                    ? html`
+                        <p>
+                          ${this.hass.localize(
+                            "ui.dialogs.more_info_control.restored.not_provided"
+                          )}
+                        </p>
+                        <p>
+                          ${this.hass.localize(
+                            "ui.dialogs.more_info_control.restored.remove_intro"
+                          )}
+                        </p>
+                        <mwc-button
+                          class="warning"
+                          @click=${this._removeEntity}
+                        >
+                          ${this.hass.localize(
+                            "ui.dialogs.more_info_control.restored.remove_action"
+                          )}
+                        </mwc-button>
+                      `
+                    : ""}
+                `
+              : html`
+                  <ha-more-info-history
+                    .hass=${this.hass}
+                    .entityId=${this._entityId}
+                  ></ha-more-info-history>
+                  <ha-more-info-logbook
+                    .hass=${this.hass}
+                    .entityId=${this._entityId}
+                  ></ha-more-info-logbook>
+                `
+          )}
         </div>
       </ha-dialog>
     `;
@@ -181,26 +270,10 @@ export class MoreInfoDialog extends LitElement {
     this.large = !this.large;
   }
 
-  private async _getStateHistory(): Promise<void> {
-    if (!this._entityId) {
-      return;
-    }
-    this._stateHistory = await getRecentWithCache(
-      this.hass!,
-      this._entityId,
-      {
-        refresh: 60,
-        cacheKey: `more_info.${this._entityId}`,
-        hoursToShow: 24,
-      },
-      this.hass!.localize,
-      this.hass!.language
-    );
-  }
-
   private _computeShowHistoryComponent(entityId) {
     return (
-      isComponentLoaded(this.hass, "history") &&
+      (isComponentLoaded(this.hass, "history") ||
+        isComponentLoaded(this.hass, "logbook")) &&
       !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId))
     );
   }
@@ -243,6 +316,15 @@ export class MoreInfoDialog extends LitElement {
     this.closeDialog();
   }
 
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newTab = ev.detail.index;
+    if (newTab === this._currTabIndex) {
+      return;
+    }
+
+    this._currTabIndex = ev.detail.index;
+  }
+
   static get styles() {
     return [
       haStyleDialog,
@@ -256,8 +338,7 @@ export class MoreInfoDialog extends LitElement {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);
           flex-shrink: 0;
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+          display: block;
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
@@ -268,6 +349,11 @@ export class MoreInfoDialog extends LitElement {
           }
         }
 
+        .heading {
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+        }
+
         @media all and (min-width: 451px) and (min-height: 501px) {
           ha-dialog {
             --mdc-dialog-max-width: 90vw;
@@ -307,7 +393,8 @@ export class MoreInfoDialog extends LitElement {
         }
 
         state-card-content,
-        state-history-charts {
+        ha-more-info-history,
+        ha-more-info-logbook:not(:last-child) {
           display: block;
           margin-bottom: 16px;
         }
@@ -315,3 +402,9 @@ export class MoreInfoDialog extends LitElement {
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-dialog": MoreInfoDialog;
+  }
+}

src/dialogs/more-info/ha-more-info-history.ts

@@ -0,0 +1,95 @@
+import {
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { throttle } from "../../common/util/throttle";
+import "../../components/state-history-charts";
+import { getRecentWithCache } from "../../data/cached-history";
+import { HistoryResult } from "../../data/history";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-more-info-history")
+export class MoreInfoHistory extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public entityId!: string;
+
+  @internalProperty() private _stateHistory?: HistoryResult;
+
+  private _throttleGetStateHistory = throttle(() => {
+    this._getStateHistory();
+  }, 10000);
+
+  protected render(): TemplateResult {
+    if (!this.entityId) {
+      return html``;
+    }
+
+    return html`${isComponentLoaded(this.hass, "history")
+      ? html`<state-history-charts
+          up-to-now
+          .hass=${this.hass}
+          .historyData=${this._stateHistory}
+          .isLoadingData=${!this._stateHistory}
+        ></state-history-charts>`
+      : ""} `;
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+
+    if (changedProps.has("entityId")) {
+      this._stateHistory = undefined;
+
+      if (!this.entityId) {
+        return;
+      }
+
+      this._throttleGetStateHistory();
+      return;
+    }
+
+    if (!this.entityId || !changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (
+      oldHass &&
+      this.hass.states[this.entityId] !== oldHass?.states[this.entityId]
+    ) {
+      // wait for commit of data (we only account for the default setting of 1 sec)
+      setTimeout(this._throttleGetStateHistory, 1000);
+    }
+  }
+
+  private async _getStateHistory(): Promise<void> {
+    if (!isComponentLoaded(this.hass, "history")) {
+      return;
+    }
+    this._stateHistory = await getRecentWithCache(
+      this.hass!,
+      this.entityId,
+      {
+        refresh: 60,
+        cacheKey: `more_info.${this.entityId}`,
+        hoursToShow: 24,
+      },
+      this.hass!.localize,
+      this.hass!.language
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-history": MoreInfoHistory;
+  }
+}

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -0,0 +1,169 @@
+import {
+  css,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
+import { throttle } from "../../common/util/throttle";
+import "../../components/ha-circular-progress";
+import "../../components/state-history-charts";
+import { getLogbookData, LogbookEntry } from "../../data/logbook";
+import "../../panels/logbook/ha-logbook";
+import { haStyle, haStyleScrollbar } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-more-info-logbook")
+export class MoreInfoLogbook extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public entityId!: string;
+
+  @internalProperty() private _logbookEntries?: LogbookEntry[];
+
+  @internalProperty() private _persons = {};
+
+  private _lastLogbookDate?: Date;
+
+  private _throttleGetLogbookEntries = throttle(() => {
+    this._getLogBookData();
+  }, 10000);
+
+  protected render(): TemplateResult {
+    if (!this.entityId) {
+      return html``;
+    }
+    const stateObj = this.hass.states[this.entityId];
+
+    if (!stateObj) {
+      return html``;
+    }
+
+    return html`
+      ${isComponentLoaded(this.hass, "logbook")
+        ? !this._logbookEntries
+          ? html`
+              <ha-circular-progress
+                active
+                alt=${this.hass.localize("ui.common.loading")}
+              ></ha-circular-progress>
+            `
+          : this._logbookEntries.length
+          ? html`
+              <ha-logbook
+                class="ha-scrollbar"
+                narrow
+                no-icon
+                no-name
+                .hass=${this.hass}
+                .entries=${this._logbookEntries}
+                .userIdToName=${this._persons}
+              ></ha-logbook>
+            `
+          : html`<div class="no-entries">
+              ${this.hass.localize("ui.components.logbook.entries_not_found")}
+            </div>`
+        : ""}
+    `;
+  }
+
+  protected firstUpdated(): void {
+    this._fetchPersonNames();
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+
+    if (changedProps.has("entityId")) {
+      this._lastLogbookDate = undefined;
+      this._logbookEntries = undefined;
+
+      if (!this.entityId) {
+        return;
+      }
+
+      this._throttleGetLogbookEntries();
+      return;
+    }
+
+    if (!this.entityId || !changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (
+      oldHass &&
+      this.hass.states[this.entityId] !== oldHass?.states[this.entityId]
+    ) {
+      // wait for commit of data (we only account for the default setting of 1 sec)
+      setTimeout(this._throttleGetLogbookEntries, 1000);
+    }
+  }
+
+  private async _getLogBookData() {
+    if (!isComponentLoaded(this.hass, "logbook")) {
+      return;
+    }
+    const lastDate =
+      this._lastLogbookDate ||
+      new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
+    const now = new Date();
+    const newEntries = await getLogbookData(
+      this.hass,
+      lastDate.toISOString(),
+      now.toISOString(),
+      this.entityId,
+      true
+    );
+    this._logbookEntries = this._logbookEntries
+      ? [...newEntries, ...this._logbookEntries]
+      : newEntries;
+    this._lastLogbookDate = now;
+  }
+
+  private _fetchPersonNames() {
+    Object.values(this.hass.states).forEach((entity) => {
+      if (
+        entity.attributes.user_id &&
+        computeStateDomain(entity) === "person"
+      ) {
+        this._persons[entity.attributes.user_id] =
+          entity.attributes.friendly_name;
+      }
+    });
+  }
+
+  static get styles() {
+    return [
+      haStyle,
+      haStyleScrollbar,
+      css`
+        .no-entries {
+          text-align: center;
+          padding: 16px;
+          color: var(--secondary-text-color);
+        }
+        ha-logbook {
+          max-height: 250px;
+          overflow: auto;
+        }
+        ha-circular-progress {
+          display: flex;
+          justify-content: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-logbook": MoreInfoLogbook;
+  }
+}

src/dialogs/more-info/more-info-content.ts

@@ -1,73 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
-import dynamicContentUpdater from "../../common/dom/dynamic_content_updater";
-import { stateMoreInfoType } from "../../common/entity/state_more_info_type";
-import { HomeAssistant } from "../../types";
-import "./controls/more-info-alarm_control_panel";
-import "./controls/more-info-automation";
-import "./controls/more-info-camera";
-import "./controls/more-info-climate";
-import "./controls/more-info-configurator";
-import "./controls/more-info-counter";
-import "./controls/more-info-cover";
-import "./controls/more-info-default";
-import "./controls/more-info-fan";
-import "./controls/more-info-group";
-import "./controls/more-info-humidifier";
-import "./controls/more-info-input_datetime";
-import "./controls/more-info-light";
-import "./controls/more-info-lock";
-import "./controls/more-info-media_player";
-import "./controls/more-info-person";
-import "./controls/more-info-script";
-import "./controls/more-info-sun";
-import "./controls/more-info-timer";
-import "./controls/more-info-vacuum";
-import "./controls/more-info-water_heater";
-import "./controls/more-info-weather";
-
-class MoreInfoContent extends UpdatingElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property() public stateObj?: HassEntity;
-
-  private _detachedChild?: ChildNode;
-
-  protected firstUpdated(): void {
-    this.style.position = "relative";
-    this.style.display = "block";
-  }
-
-  // This is not a lit element, but an updating element, so we implement update
-  protected update(changedProps: PropertyValues): void {
-    super.update(changedProps);
-    const stateObj = this.stateObj;
-    const hass = this.hass;
-
-    if (!stateObj || !hass) {
-      if (this.lastChild) {
-        this._detachedChild = this.lastChild;
-        // Detach child to prevent it from doing work.
-        this.removeChild(this.lastChild);
-      }
-      return;
-    }
-
-    if (this._detachedChild) {
-      this.appendChild(this._detachedChild);
-      this._detachedChild = undefined;
-    }
-
-    const moreInfoType =
-      stateObj.attributes && "custom_ui_more_info" in stateObj.attributes
-        ? stateObj.attributes.custom_ui_more_info
-        : "more-info-" + stateMoreInfoType(stateObj);
-
-    dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
-      hass,
-      stateObj,
-    });
-  }
-}
-
-customElements.define("more-info-content", MoreInfoContent);

src/entrypoints/app.ts

@@ -7,5 +7,3 @@ import "../util/legacy-support";
 setPassiveTouchGestures(true);
 
 (window as any).frontendVersion = __VERSION__;
-
-import("../resources/html-import/polyfill");

src/html/index.html.template

@@ -48,7 +48,7 @@
       }
       @media (prefers-color-scheme: dark) {
         html {
-          background-color: var(--primary-background-color, #111111);
+          background-color: #111111;
         }
         #ha-init-skeleton::before {
           background-color: #1c1c1c;
@@ -100,9 +100,5 @@
         {% endfor -%}
       }
     </script>
-
-    {% for extra_url in extra_urls -%}
-    <link rel="import" href="{{ extra_url }}" async />
-    {% endfor -%}
   </body>
 </html>

src/html/onboarding.html.template

@@ -5,6 +5,20 @@
     <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" />
     <%= renderTemplate('_header') %>
     <style>
+      html {
+        color: var(--primary-text-color, #212121);
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: #111111;
+          color: #e1e1e1;
+        }
+        ha-onboarding {
+          --primary-text-color: #e1e1e1;
+          --secondary-text-color: #9b9b9b;
+          --disabled-text-color: #6f6f6f;
+        }
+      }
       .content {
         padding: 20px 16px;
         max-width: 400px;
@@ -23,14 +37,6 @@
       .header img {
         margin-right: 16px;
       }
-      @media (prefers-color-scheme: dark) {
-        body {
-          background-color: #111111;
-          color: #e1e1e1;
-          --primary-text-color: #e1e1e1;
-          --secondary-text-color: #9b9b9b;
-        }
-      }
     </style>
   </head>
   <body>

src/layouts/hass-error-screen.ts

@@ -63,6 +63,7 @@ class HassErrorScreen extends LitElement {
           pointer-events: auto;
         }
         .content {
+          color: var(--primary-text-color);
           height: calc(100% - 64px);
           display: flex;
           align-items: center;

src/layouts/hass-tabs-subpage.ts

@@ -3,26 +3,26 @@ import {
   css,
   CSSResult,
   customElement,
+  eventOptions,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
-  eventOptions,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { navigate } from "../common/navigate";
-import "../components/ha-menu-button";
-import "../components/ha-icon-button-arrow-prev";
-import { HomeAssistant, Route } from "../types";
-import "../components/ha-svg-icon";
-import "../components/ha-icon";
-import "../components/ha-tab";
 import { restoreScroll } from "../common/decorators/restore-scroll";
+import { navigate } from "../common/navigate";
 import { computeRTL } from "../common/util/compute_rtl";
+import "../components/ha-icon";
+import "../components/ha-icon-button-arrow-prev";
+import "../components/ha-menu-button";
+import "../components/ha-svg-icon";
+import "../components/ha-tab";
+import { HomeAssistant, Route } from "../types";
 
 export interface PageNavigation {
   path: string;
@@ -132,7 +132,7 @@ class HassTabsSubpage extends LitElement {
       this.hass.language,
       this.narrow
     );
-
+    const showTabs = tabs.length > 1 || !this.narrow;
     return html`
       <div class="toolbar">
         ${this.mainPage
@@ -152,7 +152,7 @@ class HassTabsSubpage extends LitElement {
         ${this.narrow
           ? html` <div class="main-title"><slot name="header"></slot></div> `
           : ""}
-        ${tabs.length > 1 || !this.narrow
+        ${showTabs
           ? html`
               <div id="tabbar" class=${classMap({ "bottom-bar": this.narrow })}>
                 ${tabs}
@@ -163,10 +163,15 @@ class HassTabsSubpage extends LitElement {
           <slot name="toolbar-icon"></slot>
         </div>
       </div>
-      <div class="content" @scroll=${this._saveScrollPos}>
+      <div
+        class="content ${classMap({ tabs: showTabs })}"
+        @scroll=${this._saveScrollPos}
+      >
         <slot></slot>
       </div>
-      <div id="fab"><slot name="fab"></slot></div>
+      <div id="fab" class="${classMap({ tabs: showTabs })}">
+        <slot name="fab"></slot>
+      </div>
     `;
   }
 
@@ -274,12 +279,13 @@ class HassTabsSubpage extends LitElement {
         margin-left: env(safe-area-inset-left);
         margin-right: env(safe-area-inset-right);
         height: calc(100% - 65px);
+        height: calc(100% - 65px - env(safe-area-inset-bottom));
         overflow-y: auto;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
 
-      :host([narrow]) .content {
+      :host([narrow]) .content.tabs {
         height: calc(100% - 128px);
         height: calc(100% - 128px - env(safe-area-inset-bottom));
       }
@@ -290,7 +296,7 @@ class HassTabsSubpage extends LitElement {
         bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 1;
       }
-      :host([narrow]) #fab {
+      :host([narrow]) #fab.tabs {
         bottom: calc(84px + env(safe-area-inset-bottom));
       }
       #fab[is-wide] {

src/layouts/home-assistant-main.ts

@@ -7,12 +7,13 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
 import { listenMediaQuery } from "../common/dom/media_query";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
@@ -25,8 +26,16 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "hass-toggle-menu": undefined;
+    "hass-edit-sidebar": EditSideBarEvent;
     "hass-show-notifications": undefined;
   }
+  interface HTMLElementEventMap {
+    "hass-edit-sidebar": HASSDomEvent<EditSideBarEvent>;
+  }
+}
+
+interface EditSideBarEvent {
+  editMode: boolean;
 }
 
 @customElement("home-assistant-main")
@@ -35,7 +44,9 @@ class HomeAssistantMain extends LitElement {
 
   @property() public route?: Route;
 
-  @property({ type: Boolean }) private narrow?: boolean;
+  @property({ type: Boolean }) public narrow?: boolean;
+
+  @internalProperty() private _sidebarEditMode = false;
 
   protected render(): TemplateResult {
     const hass = this.hass;
@@ -47,7 +58,9 @@ class HomeAssistantMain extends LitElement {
     const sidebarNarrow = this._sidebarNarrow;
 
     const disableSwipe =
-      !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
+      this._sidebarEditMode ||
+      !sidebarNarrow ||
+      NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
 
     // Style block in render because of the mixin that is not supported
     return html`
@@ -75,6 +88,7 @@ class HomeAssistantMain extends LitElement {
           <ha-sidebar
             .hass=${hass}
             .narrow=${sidebarNarrow}
+            .editMode=${this._sidebarEditMode}
             .alwaysExpand=${sidebarNarrow ||
             this.hass.dockedSidebar === "docked"}
           ></ha-sidebar>
@@ -92,7 +106,28 @@ class HomeAssistantMain extends LitElement {
   protected firstUpdated() {
     import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
 
+    this.addEventListener(
+      "hass-edit-sidebar",
+      (ev: HASSDomEvent<EditSideBarEvent>) => {
+        this._sidebarEditMode = ev.detail.editMode;
+
+        if (this._sidebarEditMode) {
+          if (this._sidebarNarrow) {
+            this.drawer.open();
+          } else {
+            fireEvent(this, "hass-dock-sidebar", {
+              dock: "docked",
+            });
+            setTimeout(() => this.appLayout.resetLayout());
+          }
+        }
+      }
+    );
+
     this.addEventListener("hass-toggle-menu", () => {
+      if (this._sidebarEditMode) {
+        return;
+      }
       if (this._sidebarNarrow) {
         if (this.drawer.opened) {
           this.drawer.close();

src/layouts/partial-panel-resolver.ts

@@ -1,6 +1,13 @@
 import { PolymerElement } from "@polymer/polymer";
+import {
+  STATE_NOT_RUNNING,
+  STATE_RUNNING,
+  STATE_STARTING,
+} from "home-assistant-js-websocket";
 import { customElement, property, PropertyValues } from "lit-element";
+import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
+import { CustomPanelInfo } from "../data/panel_custom";
 import { HomeAssistant, Panels } from "../types";
 import { removeInitSkeleton } from "../util/init-skeleton";
 import {
@@ -8,13 +15,6 @@ import {
   RouteOptions,
   RouterOptions,
 } from "./hass-router-page";
-import {
-  STATE_STARTING,
-  STATE_NOT_RUNNING,
-  STATE_RUNNING,
-} from "home-assistant-js-websocket";
-import { CustomPanelInfo } from "../data/panel_custom";
-import { deepActiveElement } from "../common/dom/deep-active-element";
 
 const CACHE_URL_PATHS = ["lovelace", "developer-tools"];
 const COMPONENTS = {
@@ -64,6 +64,10 @@ const COMPONENTS = {
     import(
       /* webpackChunkName: "panel-shopping-list" */ "../panels/shopping-list/ha-panel-shopping-list"
     ),
+  "media-browser": () =>
+    import(
+      /* webpackChunkName: "panel-media-browser" */ "../panels/media-browser/ha-panel-media-browser"
+    ),
 };
 
 const getRoutes = (panels: Panels): RouterOptions => {

src/onboarding/onboarding-create-user.ts

@@ -6,9 +6,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -1,9 +1,8 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-icon-button";
-import "../../../../components/ha-button-menu";
-import "../../../../components/ha-svg-icon";
-import { mdiDotsVertical, mdiArrowUp, mdiArrowDown } from "@mdi/js";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
@@ -12,29 +11,31 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
 } from "lit-element";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-svg-icon";
 import type { Action } from "../../../../data/script";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import { handleStructError } from "../../../lovelace/common/structs/handle-errors";
+import "./types/ha-automation-action-choose";
 import "./types/ha-automation-action-condition";
 import "./types/ha-automation-action-delay";
 import "./types/ha-automation-action-device_id";
 import "./types/ha-automation-action-event";
+import "./types/ha-automation-action-repeat";
 import "./types/ha-automation-action-scene";
 import "./types/ha-automation-action-service";
+import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
-import "./types/ha-automation-action-repeat";
-import "./types/ha-automation-action-choose";
-import { handleStructError } from "../../../lovelace/common/structs/handle-errors";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import { haStyle } from "../../../../resources/styles";
 
 const OPTIONS = [
   "condition",
@@ -44,6 +45,7 @@ const OPTIONS = [
   "scene",
   "service",
   "wait_template",
+  "wait_for_trigger",
   "repeat",
   "choose",
 ];
@@ -166,12 +168,12 @@ export default class HaAutomationActionRow extends LitElement {
                       "ui.panel.config.automation.editor.edit_yaml"
                     )}
               </mwc-list-item>
-              <mwc-list-item disabled>
+              <mwc-list-item>
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.duplicate"
                 )}
               </mwc-list-item>
-              <mwc-list-item>
+              <mwc-list-item class="warning">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.delete"
                 )}
@@ -261,6 +263,7 @@ export default class HaAutomationActionRow extends LitElement {
         this._switchYamlMode();
         break;
       case 1:
+        fireEvent(this, "duplicate");
         break;
       case 2:
         this._onDelete();
@@ -333,7 +336,6 @@ export default class HaAutomationActionRow extends LitElement {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
         .warning {
-          color: var(--warning-color);
           margin-bottom: 8px;
         }
         .warning ul {

src/panels/config/automation/action/ha-automation-action.ts

@@ -28,6 +28,7 @@ export default class HaAutomationAction extends LitElement {
             .index=${idx}
             .totalActions=${this.actions.length}
             .action=${action}
+            @duplicate=${this._duplicateAction}
             @move-action=${this._move}
             @value-changed=${this._actionChanged}
             .hass=${this.hass}
@@ -78,6 +79,14 @@ export default class HaAutomationAction extends LitElement {
     fireEvent(this, "value-changed", { value: actions });
   }
 
+  private _duplicateAction(ev: CustomEvent) {
+    ev.stopPropagation();
+    const index = (ev.target as any).index;
+    fireEvent(this, "value-changed", {
+      value: this.actions.concat(this.actions[index]),
+    });
+  }
+
   static get styles(): CSSResult {
     return css`
       ha-automation-action-row,

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -1,22 +1,21 @@
+import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
+import "@polymer/paper-listbox/paper-listbox";
 import {
+  css,
+  CSSResult,
   customElement,
   LitElement,
   property,
-  CSSResult,
-  css,
 } from "lit-element";
 import { html } from "lit-html";
-import { Action, ChooseAction } from "../../../../../data/script";
-import { HomeAssistant } from "../../../../../types";
-import { ActionElement } from "../ha-automation-action-row";
-import "../../condition/ha-automation-condition-editor";
-import "@polymer/paper-listbox/paper-listbox";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../ha-automation-action";
 import { Condition } from "../../../../../data/automation";
+import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
-import { mdiDelete } from "@mdi/js";
+import { HomeAssistant } from "../../../../../types";
+import "../ha-automation-action";
+import { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-choose")
 export class HaChooseAction extends LitElement implements ActionElement {

src/panels/config/automation/action/types/ha-automation-action-repeat.ts

@@ -1,22 +1,21 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, LitElement, property, CSSResult } from "lit-element";
-import { html } from "lit-html";
-import {
-  RepeatAction,
-  Action,
-  CountRepeat,
-  WhileRepeat,
-  UntilRepeat,
-} from "../../../../../data/script";
-import { HomeAssistant } from "../../../../../types";
-import { ActionElement } from "../ha-automation-action-row";
-import "../../condition/ha-automation-condition-editor";
 import type { PaperListboxElement } from "@polymer/paper-listbox";
 import "@polymer/paper-listbox/paper-listbox";
+import { CSSResult, customElement, LitElement, property } from "lit-element";
+import { html } from "lit-html";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../ha-automation-action";
-import { Condition } from "../../../../lovelace/common/validate-condition";
+import {
+  Action,
+  CountRepeat,
+  RepeatAction,
+  UntilRepeat,
+  WhileRepeat,
+} from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+import { Condition } from "../../../../lovelace/common/validate-condition";
+import "../ha-automation-action";
+import { ActionElement } from "../ha-automation-action-row";
 
 const OPTIONS = ["count", "while", "until"];
 

src/panels/config/automation/action/types/ha-automation-action-service.ts

@@ -8,6 +8,7 @@ import {
 } from "lit-element";
 import { html } from "lit-html";
 import memoizeOne from "memoize-one";
+import { any, assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../../common/entity/compute_domain";
 import { computeObjectId } from "../../../../../common/entity/compute_object_id";
@@ -18,14 +19,13 @@ import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
 import { ServiceAction } from "../../../../../data/script";
 import type { PolymerChangedEvent } from "../../../../../polymer-types";
 import type { HomeAssistant } from "../../../../../types";
-import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
-import { assert, optional, object, string } from "superstruct";
 import { EntityId } from "../../../../lovelace/common/structs/is-entity-id";
+import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
 
 const actionStruct = object({
   service: optional(string()),
   entity_id: optional(EntityId),
-  data: optional(object()),
+  data: optional(any()),
 });
 
 @customElement("ha-automation-action-service")

src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts

@@ -0,0 +1,70 @@
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-textarea";
+import { customElement, LitElement, property } from "lit-element";
+import { html } from "lit-html";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-formfield";
+import { WaitForTriggerAction } from "../../../../../data/script";
+import { HomeAssistant } from "../../../../../types";
+import "../../trigger/ha-automation-trigger";
+import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
+
+@customElement("ha-automation-action-wait_for_trigger")
+export class HaWaitForTriggerAction extends LitElement
+  implements ActionElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public action!: WaitForTriggerAction;
+
+  public static get defaultConfig() {
+    return { wait_for_trigger: [], timeout: "" };
+  }
+
+  protected render() {
+    const { wait_for_trigger, continue_on_timeout, timeout } = this.action;
+
+    return html`
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.wait_for_trigger.timeout"
+        )}
+        .name=${"timeout"}
+        .value=${timeout}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
+      <br />
+      <ha-formfield
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.wait_for_trigger.timeout"
+        )}
+      >
+        <ha-switch
+          .checked=${continue_on_timeout}
+          @change=${this._continueChanged}
+        ></ha-switch>
+      </ha-formfield>
+      <ha-automation-trigger
+        .triggers=${wait_for_trigger}
+        .hass=${this.hass}
+        .name=${"wait_for_trigger"}
+        @value-changed=${this._valueChanged}
+      ></ha-automation-trigger>
+    `;
+  }
+
+  private _continueChanged(ev) {
+    fireEvent(this, "value-changed", {
+      value: { ...this.action, continue_on_timeout: ev.target.checked },
+    });
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    handleChangeEvent(this, ev);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-action-wait_for_trigger": HaWaitForTriggerAction;
+  }
+}

src/panels/config/automation/action/types/ha-automation-action-wait_template.ts

@@ -2,6 +2,7 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { customElement, LitElement, property } from "lit-element";
 import { html } from "lit-html";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 import { WaitAction } from "../../../../../data/script";
 import { HomeAssistant } from "../../../../../types";
 import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
@@ -13,11 +14,11 @@ export class HaWaitAction extends LitElement implements ActionElement {
   @property() public action!: WaitAction;
 
   public static get defaultConfig() {
-    return { wait_template: "", timeout: "" };
+    return { wait_template: "" };
   }
 
   protected render() {
-    const { wait_template, timeout } = this.action;
+    const { wait_template, timeout, continue_on_timeout } = this.action;
 
     return html`
       <paper-textarea
@@ -37,9 +38,24 @@ export class HaWaitAction extends LitElement implements ActionElement {
         .value=${timeout}
         @value-changed=${this._valueChanged}
       ></paper-input>
+      <br />
+      <ha-formfield
+        .label=${this.hass.localize("ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout")}
+      >
+        <ha-switch
+          .checked=${continue_on_timeout}
+          @change=${this._continueChanged}
+        ></ha-switch>
+      </ha-formfield>
     `;
   }
 
+  private _continueChanged(ev) {
+    fireEvent(this, "value-changed", {
+      value: { ...this.action, continue_on_timeout: ev.target.checked },
+    });
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -1,24 +1,25 @@
-import "../../../../components/ha-icon-button";
-import "@polymer/paper-item/paper-item";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
-import "../../../../components/ha-button-menu";
 import { mdiDotsVertical } from "@mdi/js";
+import "@polymer/paper-item/paper-item";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import { Condition } from "../../../../data/automation";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../../types";
 import "./ha-automation-condition-editor";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import { haStyle } from "../../../../resources/styles";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -81,12 +82,12 @@ export default class HaAutomationConditionRow extends LitElement {
                       "ui.panel.config.automation.editor.edit_yaml"
                     )}
               </mwc-list-item>
-              <mwc-list-item disabled>
+              <mwc-list-item>
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.duplicate"
                 )}
               </mwc-list-item>
-              <mwc-list-item>
+              <mwc-list-item class="warning">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.delete"
                 )}
@@ -109,6 +110,7 @@ export default class HaAutomationConditionRow extends LitElement {
         this._switchYamlMode();
         break;
       case 1:
+        fireEvent(this, "duplicate");
         break;
       case 2:
         this._onDelete();
@@ -133,20 +135,23 @@ export default class HaAutomationConditionRow extends LitElement {
     this._yamlMode = !this._yamlMode;
   }
 
-  static get styles(): CSSResult {
-    return css`
-      .card-menu {
-        float: right;
-        z-index: 3;
-        --mdc-theme-text-primary-on-background: var(--primary-text-color);
-      }
-      .rtl .card-menu {
-        float: left;
-      }
-      mwc-list-item[disabled] {
-        --mdc-theme-text-primary-on-background: var(--disabled-text-color);
-      }
-    `;
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .card-menu {
+          float: right;
+          z-index: 3;
+          --mdc-theme-text-primary-on-background: var(--primary-text-color);
+        }
+        .rtl .card-menu {
+          float: left;
+        }
+        mwc-list-item[disabled] {
+          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  PropertyValues,
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
@@ -20,13 +21,43 @@ export default class HaAutomationCondition extends LitElement {
 
   @property() public conditions!: Condition[];
 
+  protected updated(changedProperties: PropertyValues) {
+    if (!changedProperties.has("conditions")) {
+      return;
+    }
+    let updatedConditions: Condition[] | undefined;
+    if (!Array.isArray(this.conditions)) {
+      updatedConditions = [this.conditions];
+    }
+
+    (updatedConditions || this.conditions).forEach((condition, index) => {
+      if (typeof condition === "string") {
+        updatedConditions = updatedConditions || [...this.conditions];
+        updatedConditions[index] = {
+          condition: "template",
+          value_template: condition,
+        };
+      }
+    });
+
+    if (updatedConditions) {
+      fireEvent(this, "value-changed", {
+        value: updatedConditions,
+      });
+    }
+  }
+
   protected render() {
+    if (!Array.isArray(this.conditions)) {
+      return html``;
+    }
     return html`
       ${this.conditions.map(
         (cond, idx) => html`
           <ha-automation-condition-row
             .index=${idx}
             .condition=${cond}
+            @duplicate=${this._duplicateCondition}
             @value-changed=${this._conditionChanged}
             .hass=${this.hass}
           ></ha-automation-condition-row>
@@ -68,6 +99,14 @@ export default class HaAutomationCondition extends LitElement {
     fireEvent(this, "value-changed", { value: conditions });
   }
 
+  private _duplicateCondition(ev: CustomEvent) {
+    ev.stopPropagation();
+    const index = (ev.target as any).index;
+    fireEvent(this, "value-changed", {
+      value: this.conditions.concat(this.conditions[index]),
+    });
+  }
+
   static get styles(): CSSResult {
     return css`
       ha-automation-condition-row,

src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts

@@ -1,7 +1,6 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { customElement, html, LitElement, property } from "lit-element";
-import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import { NumericStateCondition } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
@@ -19,16 +18,34 @@ export default class HaNumericStateCondition extends LitElement {
     };
   }
 
-  protected render() {
-    const { value_template, entity_id, below, above } = this.condition;
+  public render() {
+    const {
+      value_template,
+      entity_id,
+      attribute,
+      below,
+      above,
+    } = this.condition;
 
     return html`
       <ha-entity-picker
-        .value="${entity_id}"
-        @value-changed="${this._entityPicked}"
+        .value=${entity_id}
+        .name=${"entity_id"}
+        @value-changed=${this._valueChanged}
         .hass=${this.hass}
         allow-custom-entity
       ></ha-entity-picker>
+      <ha-entity-attribute-picker
+        .hass=${this.hass}
+        .entityId=${entity_id}
+        .value=${attribute}
+        .name=${"attribute"}
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.state.attribute"
+        )}
+        @value-changed=${this._valueChanged}
+        allow-custom-value
+      ></ha-entity-attribute-picker>
       <paper-input
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.type.numeric_state.above"
@@ -60,13 +77,6 @@ export default class HaNumericStateCondition extends LitElement {
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  private _entityPicked(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this.condition, entity_id: ev.detail.value },
-    });
-  }
 }
 
 declare global {

src/panels/config/automation/condition/types/ha-automation-condition-state.ts

@@ -1,9 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import { customElement, html, LitElement, property } from "lit-element";
-import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/entity/ha-entity-attribute-picker";
 import "../../../../../components/entity/ha-entity-picker";
 import { StateCondition } from "../../../../../data/automation";
-import { PolymerChangedEvent } from "../../../../../polymer-types";
 import { HomeAssistant } from "../../../../../types";
 import {
   ConditionElement,
@@ -21,15 +20,27 @@ export class HaStateCondition extends LitElement implements ConditionElement {
   }
 
   protected render() {
-    const { entity_id, state } = this.condition;
+    const { entity_id, attribute, state } = this.condition;
 
     return html`
       <ha-entity-picker
         .value=${entity_id}
-        @value-changed=${this._entityPicked}
+        .name=${"entity_id"}
+        @value-changed=${this._valueChanged}
         .hass=${this.hass}
         allow-custom-entity
       ></ha-entity-picker>
+      <ha-entity-attribute-picker
+        .hass=${this.hass}
+        .entityId=${entity_id}
+        .value=${attribute}
+        .name=${"attribute"}
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.state.attribute"
+        )}
+        @value-changed=${this._valueChanged}
+        allow-custom-value
+      ></ha-entity-attribute-picker>
       <paper-input
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.type.state.state"
@@ -44,13 +55,6 @@ export class HaStateCondition extends LitElement implements ConditionElement {
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  private _entityPicked(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this.condition, entity_id: ev.detail.value },
-    });
-  }
 }
 
 declare global {

src/panels/config/automation/condition/types/ha-automation-condition-time.ts

@@ -1,5 +1,14 @@
+import { Radio } from "@material/mwc-radio";
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import {
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+} from "lit-element";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
 import { TimeCondition } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import {
@@ -7,38 +16,130 @@ import {
   handleChangeEvent,
 } from "../ha-automation-condition-row";
 
+const includeDomains = ["input_datetime"];
+
 @customElement("ha-automation-condition-time")
 export class HaTimeCondition extends LitElement implements ConditionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public condition!: TimeCondition;
 
+  @internalProperty() private _inputModeBefore?: boolean;
+
+  @internalProperty() private _inputModeAfter?: boolean;
+
   public static get defaultConfig() {
     return {};
   }
 
   protected render() {
     const { after, before } = this.condition;
+
+    const inputModeBefore =
+      this._inputModeBefore ?? before?.startsWith("input_datetime.");
+    const inputModeAfter =
+      this._inputModeAfter ?? after?.startsWith("input_datetime.");
+
     return html`
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.time.after"
+      <ha-formfield
+        .label=${this.hass!.localize(
+          "ui.panel.config.automation.editor.conditions.type.time.type_value"
         )}
-        name="after"
-        .value=${after}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.time.before"
+      >
+        <ha-radio
+          @change=${this._handleModeChanged}
+          name="mode_after"
+          value="value"
+          ?checked=${!inputModeAfter}
+        ></ha-radio>
+      </ha-formfield>
+      <ha-formfield
+        .label=${this.hass!.localize(
+          "ui.panel.config.automation.editor.conditions.type.time.type_input"
         )}
-        name="before"
-        .value=${before}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+      >
+        <ha-radio
+          @change=${this._handleModeChanged}
+          name="mode_after"
+          value="input"
+          ?checked=${inputModeAfter}
+        ></ha-radio>
+      </ha-formfield>
+      ${inputModeAfter
+        ? html`<ha-entity-picker
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.type.time.after"
+            )}
+            .includeDomains=${includeDomains}
+            .name=${"after"}
+            .value=${after?.startsWith("input_datetime.") ? after : ""}
+            @value-changed=${this._valueChanged}
+            .hass=${this.hass}
+          ></ha-entity-picker>`
+        : html`<paper-input
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.type.time.after"
+            )}
+            name="after"
+            .value=${after?.startsWith("input_datetime.") ? "" : after}
+            @value-changed=${this._valueChanged}
+          ></paper-input>`}
+
+      <ha-formfield
+        .label=${this.hass!.localize(
+          "ui.panel.config.automation.editor.conditions.type.time.type_value"
+        )}
+      >
+        <ha-radio
+          @change=${this._handleModeChanged}
+          name="mode_before"
+          value="value"
+          ?checked=${!inputModeBefore}
+        ></ha-radio>
+      </ha-formfield>
+      <ha-formfield
+        .label=${this.hass!.localize(
+          "ui.panel.config.automation.editor.conditions.type.time.type_input"
+        )}
+      >
+        <ha-radio
+          @change=${this._handleModeChanged}
+          name="mode_before"
+          value="input"
+          ?checked=${inputModeBefore}
+        ></ha-radio>
+      </ha-formfield>
+      ${inputModeBefore
+        ? html`<ha-entity-picker
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.type.time.before"
+            )}
+            .includeDomains=${includeDomains}
+            .name=${"before"}
+            .value=${before?.startsWith("input_datetime.") ? before : ""}
+            @value-changed=${this._valueChanged}
+            .hass=${this.hass}
+          ></ha-entity-picker>`
+        : html`<paper-input
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.type.time.before"
+            )}
+            name="before"
+            .value=${before?.startsWith("input_datetime.") ? "" : before}
+            @value-changed=${this._valueChanged}
+          ></paper-input>`}
     `;
   }
 
+  private _handleModeChanged(ev: Event) {
+    const target = ev.target as Radio;
+    if (target.getAttribute("name") === "mode_after") {
+      this._inputModeAfter = target.value === "input";
+    } else {
+      this._inputModeBefore = target.value === "input";
+    }
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }

src/panels/config/automation/ha-automation-editor.ts

@@ -1,28 +1,32 @@
+import "@material/mwc-fab";
+import { mdiContentDuplicate, mdiContentSave, mdiDelete } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-input/paper-textarea";
-import "../../../components/ha-icon-button";
+import { PaperListboxElement } from "@polymer/paper-listbox";
 import {
   css,
   CSSResult,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { navigate } from "../../../common/navigate";
 import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import "@material/mwc-fab";
 import {
   AutomationConfig,
   AutomationEntity,
   Condition,
   deleteAutomation,
   getAutomationEditorInitData,
+  showAutomationEditor,
   Trigger,
   triggerAutomation,
 } from "../../../data/automation";
@@ -35,6 +39,7 @@ import "../../../layouts/ha-app-layout";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./action/ha-automation-action";
@@ -42,9 +47,6 @@ import { HaDeviceAction } from "./action/types/ha-automation-action-device_id";
 import "./condition/ha-automation-condition";
 import "./trigger/ha-automation-trigger";
 import { HaDeviceTrigger } from "./trigger/types/ha-automation-trigger-device";
-import { mdiContentSave } from "@mdi/js";
-import { PaperListboxElement } from "@polymer/paper-listbox";
-import { classMap } from "lit-html/directives/class-map";
 
 const MODES = ["single", "restart", "queued", "parallel"];
 const MODES_MAX = ["queued", "parallel"];
@@ -53,6 +55,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "ui-mode-not-available": Error;
+    duplicate: undefined;
   }
 }
 
@@ -92,14 +95,25 @@ export class HaAutomationEditor extends LitElement {
         ${!this.automationId
           ? ""
           : html`
-              <ha-icon-button
+              <mwc-icon-button
+                slot="toolbar-icon"
+                title="${this.hass.localize(
+                  "ui.panel.config.automation.picker.duplicate_automation"
+                )}"
+                @click=${this._duplicate}
+              >
+                <ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-icon-button
+                class="warning"
                 slot="toolbar-icon"
                 title="${this.hass.localize(
                   "ui.panel.config.automation.picker.delete_automation"
                 )}"
-                icon="hass:delete"
                 @click=${this._deleteConfirm}
-              ></ha-icon-button>
+              >
+                <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+              </mwc-icon-button>
             `}
         ${this._config
           ? html`
@@ -146,7 +160,10 @@ export class HaAutomationEditor extends LitElement {
                           "ui.panel.config.automation.editor.modes.description",
                           "documentation_link",
                           html`<a
-                            href="https://www.home-assistant.io/integrations/automation/#automation-modes"
+                            href="${documentationUrl(
+                              this.hass,
+                              "/integrations/automation/#automation-modes"
+                            )}"
                             target="_blank"
                             rel="noreferrer"
                             >${this.hass.localize(
@@ -234,7 +251,10 @@ export class HaAutomationEditor extends LitElement {
                       )}
                     </p>
                     <a
-                      href="https://home-assistant.io/docs/automation/trigger/"
+                      href="${documentationUrl(
+                        this.hass,
+                        "/docs/automation/trigger/"
+                      )}"
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -263,7 +283,10 @@ export class HaAutomationEditor extends LitElement {
                       )}
                     </p>
                     <a
-                      href="https://home-assistant.io/docs/scripts/conditions/"
+                      href="${documentationUrl(
+                        this.hass,
+                        "/docs/scripts/conditions/"
+                      )}"
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -292,7 +315,10 @@ export class HaAutomationEditor extends LitElement {
                       )}
                     </p>
                     <a
-                      href="https://home-assistant.io/docs/automation/action/"
+                      href="${documentationUrl(
+                        this.hass,
+                        "/docs/automation/action/"
+                      )}"
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -473,6 +499,31 @@ export class HaAutomationEditor extends LitElement {
     }
   }
 
+  private async _duplicate() {
+    if (this._dirty) {
+      if (
+        !(await showConfirmationDialog(this, {
+          text: this.hass!.localize(
+            "ui.panel.config.automation.editor.unsaved_confirm"
+          ),
+          confirmText: this.hass!.localize("ui.common.yes"),
+          dismissText: this.hass!.localize("ui.common.no"),
+        }))
+      ) {
+        return;
+      }
+      // Wait for dialog to complate closing
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+    showAutomationEditor(this, {
+      ...this._config,
+      id: undefined,
+      alias: `${this._config?.alias} (${this.hass.localize(
+        "ui.panel.config.automation.picker.duplicate"
+      )})`,
+    });
+  }
+
   private async _deleteConfirm() {
     showConfirmationDialog(this, {
       text: this.hass.localize(

src/panels/config/automation/ha-automation-picker.ts

@@ -25,6 +25,7 @@ import {
   showAutomationEditor,
   triggerAutomation,
 } from "../../../data/automation";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
@@ -35,9 +36,9 @@ import { showThingtalkDialog } from "./show-dialog-thingtalk";
 class HaAutomationPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property() public route!: Route;
 
@@ -58,7 +59,7 @@ class HaAutomationPicker extends LitElement {
         toggle: {
           title: "",
           type: "icon",
-          template: (_toggle, automation) =>
+          template: (_toggle, automation: any) =>
             html`
               <ha-entity-toggle
                 .hass=${this.hass}
@@ -91,10 +92,11 @@ class HaAutomationPicker extends LitElement {
       if (!narrow) {
         columns.execute = {
           title: "",
-          template: (_info, automation) => html`
+          template: (_info, automation: any) => html`
             <mwc-button
               .automation=${automation}
               @click=${(ev) => this._execute(ev)}
+              .disabled=${UNAVAILABLE_STATES.includes(automation.state)}
             >
               ${this.hass.localize("ui.card.automation.trigger")}
             </mwc-button>

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -1,25 +1,27 @@
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "../../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@material/mwc-list/mwc-list-item";
-import "../../../../components/ha-button-menu";
-import { mdiDotsVertical } from "@mdi/js";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
 } from "lit-element";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import type { Trigger } from "../../../../data/automation";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./types/ha-automation-trigger-device";
 import "./types/ha-automation-trigger-event";
@@ -29,14 +31,12 @@ import "./types/ha-automation-trigger-mqtt";
 import "./types/ha-automation-trigger-numeric_state";
 import "./types/ha-automation-trigger-state";
 import "./types/ha-automation-trigger-sun";
+import "./types/ha-automation-trigger-tag";
 import "./types/ha-automation-trigger-template";
 import "./types/ha-automation-trigger-time";
 import "./types/ha-automation-trigger-time_pattern";
 import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
-import "./types/ha-automation-trigger-tag";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import { haStyle } from "../../../../resources/styles";
 
 const OPTIONS = [
   "device",
@@ -113,12 +113,12 @@ export default class HaAutomationTriggerRow extends LitElement {
                       "ui.panel.config.automation.editor.edit_yaml"
                     )}
               </mwc-list-item>
-              <mwc-list-item disabled>
+              <mwc-list-item>
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.duplicate"
                 )}
               </mwc-list-item>
-              <mwc-list-item>
+              <mwc-list-item class="warning">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.delete"
                 )}
@@ -183,6 +183,7 @@ export default class HaAutomationTriggerRow extends LitElement {
         this._switchYamlMode();
         break;
       case 1:
+        fireEvent(this, "duplicate");
         break;
       case 2:
         this._onDelete();

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -27,6 +27,7 @@ export default class HaAutomationTrigger extends LitElement {
           <ha-automation-trigger-row
             .index=${idx}
             .trigger=${trg}
+            @duplicate=${this._duplicateTrigger}
             @value-changed=${this._triggerChanged}
             .hass=${this.hass}
           ></ha-automation-trigger-row>
@@ -68,6 +69,14 @@ export default class HaAutomationTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: triggers });
   }
 
+  private _duplicateTrigger(ev: CustomEvent) {
+    ev.stopPropagation();
+    const index = (ev.target as any).index;
+    fireEvent(this, "value-changed", {
+      value: this.triggers.concat(this.triggers[index]),
+    });
+  }
+
   static get styles(): CSSResult {
     return css`
       ha-automation-trigger-row,

src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts

@@ -1,7 +1,6 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { customElement, html, LitElement, property } from "lit-element";
-import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import { ForDict, NumericStateTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
@@ -19,8 +18,8 @@ export default class HaNumericStateTrigger extends LitElement {
     };
   }
 
-  protected render() {
-    const { value_template, entity_id, below, above } = this.trigger;
+  public render() {
+    const { value_template, entity_id, attribute, below, above } = this.trigger;
     let trgFor = this.trigger.for;
 
     if (
@@ -41,10 +40,22 @@ export default class HaNumericStateTrigger extends LitElement {
     return html`
       <ha-entity-picker
         .value="${entity_id}"
-        @value-changed="${this._entityPicked}"
+        @value-changed="${this._valueChanged}"
+        .name=${"entity_id"}
         .hass=${this.hass}
         allow-custom-entity
       ></ha-entity-picker>
+      <ha-entity-attribute-picker
+        .hass=${this.hass}
+        .entityId=${entity_id}
+        .value=${attribute}
+        .name=${"attribute"}
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.state.attribute"
+        )}
+        @value-changed=${this._valueChanged}
+        allow-custom-value
+      ></ha-entity-attribute-picker>
       <paper-input
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.numeric_state.above"
@@ -84,13 +95,6 @@ export default class HaNumericStateTrigger extends LitElement {
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  private _entityPicked(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this.trigger, entity_id: ev.detail.value },
-    });
-  }
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -1,9 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import { customElement, html, LitElement, property } from "lit-element";
-import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/entity/ha-entity-attribute-picker";
 import "../../../../../components/entity/ha-entity-picker";
 import { ForDict, StateTrigger } from "../../../../../data/automation";
-import { PolymerChangedEvent } from "../../../../../polymer-types";
 import { HomeAssistant } from "../../../../../types";
 import {
   handleChangeEvent,
@@ -21,7 +20,7 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { entity_id, to, from } = this.trigger;
+    const { entity_id, attribute, to, from } = this.trigger;
     let trgFor = this.trigger.for;
 
     if (
@@ -43,10 +42,22 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
     return html`
       <ha-entity-picker
         .value=${entity_id}
-        @value-changed=${this._entityPicked}
+        @value-changed=${this._valueChanged}
+        .name=${"entity_id"}
         .hass=${this.hass}
         allow-custom-entity
       ></ha-entity-picker>
+      <ha-entity-attribute-picker
+        .hass=${this.hass}
+        .entityId=${entity_id}
+        .value=${attribute}
+        .name=${"attribute"}
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.state.attribute"
+        )}
+        @value-changed=${this._valueChanged}
+        allow-custom-value
+      ></ha-entity-attribute-picker>
       <paper-input
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.state.from"
@@ -77,13 +88,6 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
-
-  private _entityPicked(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: { ...this.trigger, entity_id: ev.detail.value },
-    });
-  }
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts

@@ -1,5 +1,14 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import {
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+} from "lit-element";
+import "../../../../../components/entity/ha-entity-picker";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
 import { TimeTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import {
@@ -7,31 +16,81 @@ import {
   TriggerElement,
 } from "../ha-automation-trigger-row";
 
+const includeDomains = ["input_datetime"];
+
 @customElement("ha-automation-trigger-time")
 export class HaTimeTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public trigger!: TimeTrigger;
 
+  @internalProperty() private _inputMode?: boolean;
+
   public static get defaultConfig() {
     return { at: "" };
   }
 
   protected render() {
     const { at } = this.trigger;
+    const inputMode = this._inputMode ?? at?.startsWith("input_datetime.");
     return html`
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.time.at"
+      <ha-formfield
+        .label=${this.hass!.localize(
+          "ui.panel.config.automation.editor.triggers.type.time.type_value"
         )}
-        name="at"
-        .value=${at}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+      >
+        <ha-radio
+          @change=${this._handleModeChanged}
+          name="mode"
+          value="value"
+          ?checked=${!inputMode}
+        ></ha-radio>
+      </ha-formfield>
+      <ha-formfield
+        .label=${this.hass!.localize(
+          "ui.panel.config.automation.editor.triggers.type.time.type_input"
+        )}
+      >
+        <ha-radio
+          @change=${this._handleModeChanged}
+          name="mode"
+          value="input"
+          ?checked=${inputMode}
+        ></ha-radio>
+      </ha-formfield>
+      ${inputMode
+        ? html`<ha-entity-picker
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.triggers.type.time.at"
+            )}
+            .includeDomains=${includeDomains}
+            .name=${"at"}
+            .value=${at?.startsWith("input_datetime.") ? at : ""}
+            @value-changed=${this._valueChanged}
+            .hass=${this.hass}
+          ></ha-entity-picker>`
+        : html`<paper-input
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.triggers.type.time.at"
+            )}
+            name="at"
+            .value=${at?.startsWith("input_datetime.") ? "" : at}
+            @value-changed=${this._valueChanged}
+          ></paper-input>`}
     `;
   }
 
+  private _handleModeChanged(ev: Event) {
+    this._inputMode = (ev.target as any).value === "input";
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trigger-time": HaTimeTrigger;
+  }
+}