Add context to error displays.

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}
     >

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,

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``;

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';