refactor: Refactor internal error / info message components (#1842)

src/components-lib/live/live-controller.ts

@@ -1,10 +1,10 @@
 import { LitElement, ReactiveController } from 'lit';
-import { FrigateCardMessageEventTarget } from '../../components/message.js';
 import { MediaLoadedInfo } from '../../types.js';
 import {
   FrigateCardMediaLoadedEventTarget,
   dispatchExistingMediaLoadedInfoAsEvent,
 } from '../../utils/media-info.js';
+import { FrigateCardMessageEventTarget } from '../message/dispatch.js';
 
 interface LiveViewContext {
   // A cameraID override (used for dependencies/substreams to force a different

src/components-lib/message/controller.ts

@@ -0,0 +1,43 @@
+import yaml from 'js-yaml';
+import { TROUBLESHOOTING_URL } from '../../const';
+import { Message } from '../../types';
+
+export class MessageController {
+  public getMessageString(message: Message): string {
+    return (
+      message.message +
+      (message.context && typeof message.context === 'string'
+        ? ': ' + message.context
+        : '')
+    );
+  }
+
+  public getIcon(message: Message): string {
+    return message.icon
+      ? message.icon
+      : message.type === 'error'
+        ? 'mdi:alert-circle'
+        : 'mdi:information-outline';
+  }
+
+  public shouldShowTroubleshootingURL(message: Message): boolean {
+    return message.type === 'error';
+  }
+
+  public getTroubleshootingURL(message: Message): string {
+    return message.troubleshootingURL ?? TROUBLESHOOTING_URL;
+  }
+
+  public getContextStrings(message: Message): string[] {
+    if (Array.isArray(message.context)) {
+      return message.context.map((contextItem) => yaml.dump(contextItem));
+    }
+    if (typeof message.context === 'object') {
+      return [yaml.dump(message.context)];
+    }
+    if (typeof message.context === 'string') {
+      return [message.context];
+    }
+    return [];
+  }
+}

src/components-lib/message/dispatch.ts

@@ -0,0 +1,47 @@
+import { FrigateCardError, Message } from '../../types';
+import { dispatchFrigateCardEvent } from '../../utils/basic';
+
+// Facilitates correct typing of event handlers.
+export interface FrigateCardMessageEventTarget extends EventTarget {
+  addEventListener(
+    event: 'frigate-card:message',
+    listener: (this: FrigateCardMessageEventTarget, ev: CustomEvent<Message>) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  addEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  removeEventListener(
+    event: 'frigate-card:message',
+    listener: (this: FrigateCardMessageEventTarget, ev: CustomEvent<Message>) => void,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
+/**
+ * Dispatch an event with an error message to show to the user. Calling this
+ * method will grind the card to a halt, so should only be used for "global" /
+ * critical errors (i.e. not for individual errors with a given camera, since
+ * there may be multiple correctly functioning cameras in a grid).
+ * @param element The element to send the event.
+ * @param message The message to show.
+ */
+export const dispatchFrigateCardErrorEvent = (
+  element: EventTarget,
+  error: unknown,
+): void => {
+  if (error instanceof Error) {
+    dispatchFrigateCardEvent<Message>(element, 'message', {
+      message: error.message,
+      type: 'error',
+      ...(error instanceof FrigateCardError && { context: error.context }),
+    });
+  }
+};