Add toggle for camera view in area card (#10810)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

src/panels/lovelace/cards/hui-area-card.ts

@@ -25,6 +25,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import { navigate } from "../../../common/navigate";
 import { formatNumber } from "../../../common/number/format_number";
+import { subscribeOne } from "../../../common/util/subscribe-one";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -83,8 +84,11 @@ export class HuiAreaCard
     return document.createElement("hui-area-card-editor");
   }
 
-  public static getStubConfig(): AreaCardConfig {
-    return { type: "area", area: "" };
+  public static async getStubConfig(
+    hass: HomeAssistant
+  ): Promise<AreaCardConfig> {
+    const areas = await subscribeOne(hass.connection, subscribeAreaRegistry);
+    return { type: "area", area: areas[0]?.area_id || "" };
   }
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -358,7 +362,7 @@ export class HuiAreaCard
     });
 
     let cameraEntityId: string | undefined;
-    if ("camera" in entitiesByDomain) {
+    if (this._config.show_camera && "camera" in entitiesByDomain) {
       cameraEntityId = entitiesByDomain.camera[0].entity_id;
     }
 

src/panels/lovelace/cards/types.ts

@@ -79,6 +79,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
 export interface AreaCardConfig extends LovelaceCardConfig {
   area: string;
   navigation_path?: string;
+  show_camera?: boolean;
 }
 
 export interface ButtonCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-area-picker";
 import { HomeAssistant } from "../../../../types";
@@ -11,6 +11,8 @@ import { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import "../../../../components/ha-formfield";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -18,6 +20,7 @@ const cardConfigStruct = assign(
     area: optional(string()),
     navigation_path: optional(string()),
     theme: optional(string()),
+    show_camera: optional(boolean()),
   })
 );
 
@@ -47,6 +50,10 @@ export class HuiAreaCardEditor
     return this._config!.theme || "";
   }
 
+  get _show_camera(): boolean {
+    return this._config!.show_camera || false;
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -64,6 +71,18 @@ export class HuiAreaCardEditor
           )}
           @value-changed=${this._valueChanged}
         ></ha-area-picker>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.lovelace.editor.card.area.show_camera"
+          )}
+          .dir=${computeRTLDirection(this.hass)}
+        >
+          <ha-switch
+            .checked=${this._show_camera}
+            .configValue=${"show_camera"}
+            @change=${this._valueChanged}
+          ></ha-switch>
+        </ha-formfield>
         <paper-input
           .label=${this.hass!.localize(
             "ui.panel.lovelace.editor.action-editor.navigation_path"
@@ -88,7 +107,8 @@ export class HuiAreaCardEditor
       return;
     }
     const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
+    const value =
+      target.checked !== undefined ? target.checked : ev.detail.value;
 
     if (this[`_${target.configValue}`] === value) {
       return;

src/panels/lovelace/editor/get-card-stub-config.ts

@@ -13,7 +13,7 @@ export const getCardStubConfig = async (
   const elClass = await getCardElementClass(type);
 
   if (elClass && elClass.getStubConfig) {
-    const classStubConfig = elClass.getStubConfig(
+    const classStubConfig = await elClass.getStubConfig(
       hass,
       entities,
       entitiesFallback

src/panels/lovelace/editor/header-footer-editor/get-headerfooter-stub-config.ts

@@ -13,7 +13,7 @@ export const getHeaderFooterStubConfig = async (
   const elClass = await getHeaderFooterElementClass(type);
 
   if (elClass && elClass.getStubConfig) {
-    const classStubConfig = elClass.getStubConfig(
+    const classStubConfig = await elClass.getStubConfig(
       hass,
       entities,
       entitiesFallback

src/panels/lovelace/editor/lovelace-cards.ts

@@ -91,6 +91,7 @@ export const coreCards: Card[] = [
   },
   {
     type: "area",
+    showElement: true,
   },
   {
     type: "conditional",

src/translations/en.json

@@ -3255,7 +3255,8 @@
             },
             "area": {
               "name": "Area",
-              "description": "The Area card automatically displays entities of a specific area."
+              "description": "The Area card automatically displays entities of a specific area.",
+              "show_camera": "Show camera feed instead of area image"
             },
             "calendar": {
               "name": "Calendar",