Add message priorities.

src/components/image.ts

@@ -237,7 +237,7 @@ export class FrigateCardImage extends LitElement {
               dispatchErrorMessageEvent(
                 this,
                 localize('error.image_load_error'),
-                this.imageConfig,
+                { context: this.imageConfig },
               );
             }
           }}

src/components/live.ts

@@ -15,7 +15,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { until } from 'lit/directives/until.js';
 import { ConditionState, getOverriddenConfig } from '../card-condition.js';
-import { renderProgressIndicator } from '../components/message.js';
+import { dispatchFrigateCardErrorEvent, renderProgressIndicator } from '../components/message.js';
 import { localize } from '../localize/localize.js';
 import liveFrigateStyle from '../scss/live-frigate.scss';
 import liveJSMPEGStyle from '../scss/live-jsmpeg.scss';
@@ -751,7 +751,7 @@ export class FrigateCardLiveFrigate extends LitElement {
       return dispatchErrorMessageEvent(
         this,
         localize('error.no_live_camera'),
-        this.cameraConfig,
+        { context: this.cameraConfig },
       );
     }
 
@@ -760,7 +760,7 @@ export class FrigateCardLiveFrigate extends LitElement {
       return dispatchErrorMessageEvent(
         this,
         localize('error.live_camera_unavailable'),
-        this.cameraConfig,
+        { context: this.cameraConfig },
       );
     }
 
@@ -906,7 +906,7 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
           e instanceof FrigateCardError
             ? e.message
             : localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message,
-          (e as FrigateCardError).context,
+          { context: (e as FrigateCardError).context },
         );
       }
       if (webrtcElement) {
@@ -924,7 +924,7 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
     return html`${this._webrtcTask.render({
       initial: () => renderProgressIndicator(localize('error.webrtc_card_waiting')),
       pending: () => renderProgressIndicator(localize('error.webrtc_card_waiting')),
-      error: (e: unknown) => dispatchErrorMessageEvent(this, (e as Error).message),
+      error: (e: unknown) => dispatchFrigateCardErrorEvent(this, e as Error),
       complete: () => render(),
     })}`;
   }
@@ -1147,7 +1147,7 @@ export class FrigateCardLiveJSMPEG extends LitElement {
       return dispatchErrorMessageEvent(
         this,
         localize('error.no_camera_name'),
-        this.cameraConfig,
+        { context: this.cameraConfig },
       );
     }
 

src/components/message.ts

@@ -1,9 +1,10 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { TROUBLESHOOTING_URL } from '../const.js';
 import { localize } from '../localize/localize.js';
 import messageStyle from '../scss/message.scss';
-import { FrigateCardError, Message } from '../types.js';
+import { FrigateCardError, Message, MessageType } from '../types.js';
 import { dispatchFrigateCardEvent } from '../utils/basic.js';
 
 @customElement('frigate-card-message')
@@ -23,14 +24,18 @@ export class FrigateCardMessage extends LitElement {
   // Render the menu.
   protected render(): TemplateResult {
     const icon = this.icon ? this.icon : 'mdi:information-outline';
+    const classes = {
+      dotdotdot: !!this.dotdotdot,
+    };
     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.dotdotdot ? html`<span class="dotdotdot"></span>` : ``}
+          <span class="${classMap(classes)}">
+            ${this.message ? html`${this.message}` : ''}
+          </span>
           ${this.context
             ? html`<pre>${JSON.stringify(this.context, null, 2)}</pre>`
             : ''}
@@ -92,7 +97,7 @@ export function renderMessage(message: Message): TemplateResult {
     return html` <frigate-card-error-message
       .message=${message}
     ></frigate-card-error-message>`;
-  } else if (message.type === 'info') {
+  } else {
     return html` <frigate-card-message
       .message=${message.message}
       .icon=${message.icon}
@@ -114,19 +119,22 @@ export function renderProgressIndicator(message?: string): TemplateResult {
  * Dispatch an event with a message to show to the user.
  * @param element The element to send the event.
  * @param message The message to show.
- * @param icon An optional icon to attach to the message.
+ * @param options Optional icon and context to include.
  */
 export function dispatchMessageEvent(
   element: EventTarget,
   message: string,
-  icon?: string,
-  context?: unknown,
+  type: MessageType,
+  options?: {
+    icon?: string;
+    context?: unknown;
+  },
 ): void {
   dispatchFrigateCardEvent<Message>(element, 'message', {
     message: message,
-    type: 'info',
-    icon: icon,
-    context: context,
+    type: type,
+    icon: options?.icon,
+    context: options?.context,
   });
 }
 
@@ -134,16 +142,17 @@ export function dispatchMessageEvent(
  * Dispatch an event with an error message to show to the user.
  * @param element The element to send the event.
  * @param message The message to show.
+ * @param options Optional context to include.
  */
 export function dispatchErrorMessageEvent(
   element: EventTarget,
   message: string,
-  context?: unknown,
+  options?: {
+    context?: unknown;
+  },
 ): void {
-  dispatchFrigateCardEvent<Message>(element, 'message', {
-    message: message,
-    type: 'error',
-    context: context,
+  dispatchMessageEvent(element, message, 'error', {
+    context: options?.context,
   });
 }
 
@@ -156,11 +165,7 @@ export function dispatchFrigateCardErrorEvent(
   element: EventTarget,
   error: FrigateCardError,
 ): void {
-  dispatchFrigateCardEvent<Message>(element, 'message', {
-    message: error.message,
-    type: 'error',
-    context: error.context || '',
-  });
+  dispatchErrorMessageEvent(element, error.message, { context: error.context });
 }
 
 declare global {

src/components/timeline.ts

@@ -1227,7 +1227,10 @@ export class FrigateCardTimelineCore extends LitElement {
           dispatchMessageEvent(
             this,
             localize('error.timeline_no_cameras'),
-            'mdi:chart-gantt',
+            'info',
+            {
+              icon: 'mdi:chart-gantt',
+            }
           );
           return;
         }

src/components/viewer.ts

@@ -13,7 +13,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ref } from 'lit/directives/ref.js';
 import {
-  dispatchErrorMessageEvent,
+  dispatchFrigateCardErrorEvent,
   renderProgressIndicator
 } from '../components/message.js';
 import viewerStyle from '../scss/viewer.scss';
@@ -632,7 +632,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       return html`${this._mediaResolutionTask.render({
         initial: () => renderProgressIndicator(),
         pending: () => renderProgressIndicator(),
-        error: (e: unknown) => dispatchErrorMessageEvent(this, (e as Error).message),
+        error: (e: unknown) => dispatchFrigateCardErrorEvent(this, e as Error),
         complete: () => this._render(),
       })}`;
     }