From 9360191242743e0c15c9c34f1457e68f605331da Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 20 Feb 2022 10:56:43 -0800
Subject: [PATCH] Add context to error displays.

---
 src/card.ts                       |  6 +++--
 src/common.ts                     |  9 ++++++-
 src/components/live.ts            | 22 ++++++++++++-----
 src/components/menu.ts            |  3 +--
 src/components/message.ts         | 40 ++++++++++++++++++++++---------
 src/components/submenu.ts         |  4 ++--
 src/localize/languages/en.json    |  1 +
 src/localize/languages/pt_br.json |  1 +
 src/scss/message.scss             | 23 ++++++++++++++----
 src/types.ts                      |  1 +
 10 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 51c78969..b4adc37e 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -451,14 +451,16 @@ export class FrigateCard extends LitElement {
 
       if (!id) {
         this._setMessageAndUpdate({
-          message: localize('error.no_camera_id') + `: ${JSON.stringify(config)}`,
+          message: localize('error.no_camera_id'),
           type: 'error',
+          context: config,
         });
         errorFree = false;
       } else if (cameras.has(id)) {
         this._setMessageAndUpdate({
-          message: localize('error.duplicate_camera_id') + `: ${JSON.stringify(config)}`,
+          message: localize('error.duplicate_camera_id'),
           type: 'error',
+          context: config,
         });
         errorFree = false;
       } else {
diff --git a/src/common.ts b/src/common.ts
index fac25820..bdc60e9e 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -191,11 +191,13 @@ export function dispatchMessageEvent(
   element: HTMLElement,
   message: string,
   icon?: string,
+  context?: unknown,
 ): void {
   dispatchFrigateCardEvent<Message>(element, 'message', {
     message: message,
     type: 'info',
     icon: icon,
+    context: context,
   });
 }
 
@@ -204,10 +206,15 @@ export function dispatchMessageEvent(
  * @param element The element to send the event.
  * @param message The message to show.
  */
-export function dispatchErrorMessageEvent(element: HTMLElement, message: string): void {
+export function dispatchErrorMessageEvent(
+  element: HTMLElement,
+  message: string,
+  context?: unknown,
+): void {
   dispatchFrigateCardEvent<Message>(element, 'message', {
     message: message,
     type: 'error',
+    context: context,
   });
 }
 
diff --git a/src/components/live.ts b/src/components/live.ts
index 21850a3d..808c487d 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -672,7 +672,7 @@ export class FrigateCardLiveProvider extends LitElement {
         ? html` <frigate-card-live-ha
             ${ref(this._providerRef)}
             .hass=${this.hass}
-            .cameraEntity=${this.cameraConfig.camera_entity}
+            .cameraConfig=${this.cameraConfig}
           >
           </frigate-card-live-ha>`
         : provider == 'webrtc-card'
@@ -700,7 +700,7 @@ export class FrigateCardLiveFrigate extends LitElement {
   protected hass?: HomeAssistant & ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected cameraEntity?: string;
+  protected cameraConfig?: CameraConfig;
 
   protected _playerRef: Ref<FrigateCardLiveFrigate> = createRef();
 
@@ -741,17 +741,27 @@ export class FrigateCardLiveFrigate extends LitElement {
       return;
     }
 
-    if (!this.cameraEntity || !(this.cameraEntity in this.hass.states)) {
-      return dispatchMessageEvent(
+    if (!this.cameraConfig?.camera_entity) {
+      return dispatchErrorMessageEvent(
         this,
         localize('error.no_live_camera'),
-        'mdi:camera-off',
+        this.cameraConfig,
       );
     }
+
+    const stateObj = this.hass.states[this.cameraConfig.camera_entity];
+    if (!stateObj || stateObj.state === 'unavailable') {
+      return dispatchErrorMessageEvent(
+        this,
+        localize('error.live_camera_unavailable'),
+        this.cameraConfig,
+      );
+    }
+
     return html` <frigate-card-ha-camera-stream
       ${ref(this._playerRef)}
       .hass=${this.hass}
-      .stateObj=${this.hass.states[this.cameraEntity]}
+      .stateObj=${stateObj}
       .controls=${true}
       .muted=${true}
     >
diff --git a/src/components/menu.ts b/src/components/menu.ts
index 3996e6ca..ef6816b6 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -1,5 +1,5 @@
-import { computeStateDomain, HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined';
@@ -18,7 +18,6 @@ import type {
   StateParameters,
 } from '../types.js';
 import {
-  computeActiveState,
   convertActionToFrigateCardCustomAction,
   frigateCardHandleActionConfig,
   frigateCardHasAction,
diff --git a/src/components/message.ts b/src/components/message.ts
index 8274a250..cc947653 100644
--- a/src/components/message.ts
+++ b/src/components/message.ts
@@ -13,17 +13,26 @@ export class FrigateCardMessage extends LitElement {
   protected message = '';
 
   @property({ attribute: false })
-  protected icon?;
+  protected context?: unknown;
+
+  @property({ attribute: false })
+  protected icon?: string;
 
   // Render the menu.
   protected render(): TemplateResult {
     const icon = this.icon ? this.icon : 'mdi:information-outline';
-    return html` <div class="message">
-      <span>
-        <ha-icon icon="${icon}"> </ha-icon>
-      </span>
-      <span> ${this.message ? html`${this.message}` : ''} </span>
-    </div>`;
+    return html`
+      <div class="wrapper">
+        <div class="message">
+          <div class="icon">
+            <ha-icon icon="${icon}"> </ha-icon>
+          </div>
+          <div class="contents">
+            <span> ${this.message ? html`${this.message}` : ''} </span>
+            ${this.context ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>` : ''}
+          </div>
+        </div>
+      </div>`;
   }
 
   static get styles(): CSSResultGroup {
@@ -34,16 +43,24 @@ export class FrigateCardMessage extends LitElement {
 @customElement('frigate-card-error-message')
 export class FrigateCardErrorMessage extends LitElement {
   @property({ attribute: false })
-  protected error = '';
+  protected message?: Message;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
+    if (!this.message) {
+      return;
+    }
     return html` <frigate-card-message
-      .message=${html` ${this.error}.
+      .message=${html` ${this.message.message}.
         <a href="${TROUBLESHOOTING_URL}"> ${localize('error.troubleshooting')}</a>.`}
       .icon=${'mdi:alert-circle'}
+      .context=${this.message.context}
     >
     </frigate-card-message>`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(messageStyle);
+  }
 }
 
 @customElement('frigate-card-progress-indicator')
@@ -68,12 +85,13 @@ export class FrigateCardProgressIndicator extends LitElement {
 export function renderMessage(message: Message): TemplateResult {
   if (message.type == 'error') {
     return html` <frigate-card-error-message
-      .error=${message.message}
+      .message=${message}
     ></frigate-card-error-message>`;
   } else if (message.type == 'info') {
     return html` <frigate-card-message
       .message=${message.message}
       .icon=${message.icon}
+      .context=${message.context}
     ></frigate-card-message>`;
   }
   return html``;
diff --git a/src/components/submenu.ts b/src/components/submenu.ts
index 23cb33de..680a45b5 100644
--- a/src/components/submenu.ts
+++ b/src/components/submenu.ts
@@ -1,7 +1,7 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { HomeAssistant } from 'custom-card-helpers';
 import { customElement, property } from 'lit/decorators';
-import { computeActiveState, frigateCardHasAction, refreshDynamicStateParameters } from '../common.js';
-import { computeStateDomain, HomeAssistant } from 'custom-card-helpers';
+import { frigateCardHasAction, refreshDynamicStateParameters } from '../common.js';
 import { ifDefined } from 'lit/directives/if-defined';
 import { styleMap } from 'lit/directives/style-map';
 
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index 36e3b3f0..54df1fc5 100644
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -213,6 +213,7 @@
     "troubleshooting": "Check troubleshooting",
     "could_not_resolve": "Could not resolve media URL",
     "no_live_camera": "The camera_entity parameter must be set and valid for this live provider",
+    "live_camera_unavailable": "The configured camera_entity is unavailable",
     "invalid_configuration": "Invalid configuration",
     "invalid_configuration_no_hint": "No location hint available (bad or missing type?)",
     "upgrade_available": "An automated card configuration upgrade is available, please visit the visual card editor",
diff --git a/src/localize/languages/pt_br.json b/src/localize/languages/pt_br.json
index 3b8a5f8e..98b3b497 100644
--- a/src/localize/languages/pt_br.json
+++ b/src/localize/languages/pt_br.json
@@ -213,6 +213,7 @@
     "troubleshooting": "Verifique a solução de problemas",
     "could_not_resolve": "Não foi possível resolver o URL de mídia",
     "no_live_camera": "O parâmetro camera_entity deve ser definido e válido para este provedor ativo",
+    "live_camera_unavailable": "camera_entity configurada não está disponível",
     "invalid_configuration": "Configuração inválida",
     "invalid_configuration_no_hint": "Nenhuma dica de local disponível (tipo incorreto ou ausente?)",
     "upgrade_available": "Uma atualização automatizada da configuração do cartão está disponível, visite o editor visual do cartão",
diff --git a/src/scss/message.scss b/src/scss/message.scss
index 783f0a5d..384525e5 100644
--- a/src/scss/message.scss
+++ b/src/scss/message.scss
@@ -4,13 +4,26 @@
   display: block;
 }
 
-.message {
+div.wrapper {
   height: 100%;
+}
+
+div.message {
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   padding: 10%;
+  height: 100%;
+}
+
+div.message div.contents {
+  padding: 10px;
+  height: 100%;
+}
+
+div.message div.icon {
+  padding: 10px;
 }
 
 .vertical {
@@ -19,9 +32,9 @@
 
 .message a {
   color: var(--primary-text-color, white);
-}
-
-span {
-  padding: 10px;
   word-break: break-word;
 }
+
+.message pre {
+  margin-top: 20px;
+}
diff --git a/src/types.ts b/src/types.ts
index d3c7af95..22642e1c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -835,6 +835,7 @@ export interface Message {
   message: string;
   type: 'error' | 'info';
   icon?: string;
+  context?: unknown;
 }
 
 export interface StateParameters {