Add picture elements support.

src/components/elements.ts

@@ -0,0 +1,103 @@
+import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit';
+import { HomeAssistant } from 'custom-card-helpers';
+import { customElement, property } from 'lit/decorators';
+
+import { ExtendedHomeAssistant, PictureElement, PictureElements } from '../types';
+
+import elementsStyle from '../scss/elements.scss';
+
+@customElement('frigate-card-elements')
+export class FrigateCardElements extends LitElement {
+  @property({ attribute: false })
+  protected _pictureElements: PictureElements;
+
+  protected _hass!: HomeAssistant & ExtendedHomeAssistant;
+  protected _elements: HTMLElement[] = [];
+
+  set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
+    for (let i = 0; hass && i < this._elements.length; i++) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (this._elements[i] as any).hass = hass;
+    }
+    this._hass = hass;
+  }
+
+  set pictureElements(pictureElements: PictureElements) {
+    if (this._elements.length > 0) {
+      this._elements.forEach((el: HTMLElement) => {
+        if (el.parentElement) {
+          el.parentElement.removeChild(el);
+        }
+      });
+      this._elements = [];
+    }
+    if (!pictureElements) {
+      return;
+    }
+    for (let i = 0; i < pictureElements.length && pictureElements[i]; i++) {
+      const element = this._createPictureElement(pictureElements[i]);
+      if (element) {
+        this._elements.push(element);
+      }
+    }
+  }
+
+  @property({ attribute: false })
+  protected _createPictureElement(pictureElement: PictureElement): HTMLElement | null {
+    let customElementName: string | null = null;
+
+    switch (pictureElement.type) {
+      case 'state-badge':
+      case 'state-icon':
+      case 'state-label':
+      case 'service-button':
+      case 'icon':
+      case 'image':
+      case 'conditional':
+        customElementName = `hui-${pictureElement.type}-element`;
+        break;
+    }
+
+    if (!customElementName) {
+      return null;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const elementConstructor = customElements.get(customElementName) as any;
+    if (!elementConstructor) {
+      return null;
+    }
+
+    const element = new elementConstructor();
+    element.hass = this._hass;
+    try {
+      element.setConfig(pictureElement);
+    } catch (e) {
+      console.error(e, (e as Error).stack);
+      return null;
+    }
+    element.classList.add('element');
+
+    const targetStyle = pictureElement.style || {};
+    Object.keys(targetStyle).forEach((prop) => {
+      element.style.setProperty(prop, targetStyle[prop]);
+    });
+    return element;
+  }
+
+  protected render(): TemplateResult {
+    return html`${this._elements.map((element) => element)}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(elementsStyle);
+  }
+}
+
+export function renderFrigateCardElements(
+  hass: HomeAssistant & ExtendedHomeAssistant,
+  pictureElements: PictureElements,
+): TemplateResult {
+  return html` <frigate-card-elements .hass=${hass} .pictureElements=${pictureElements}>
+  </frigate-card-elements>`;
+}

src/components/gallery.ts

@@ -11,9 +11,15 @@ import type {
 } from '../types';
 
 import { View } from '../view';
-import { browseMedia, browseMediaQuery, getFirstTrueMediaChildIndex } from '../common';
+import {
+  browseMedia,
+  browseMediaQuery,
+  dispatchErrorMessageEvent,
+  dispatchMessageEvent,
+  getFirstTrueMediaChildIndex,
+} from '../common';
 import { localize } from '../localize/localize';
-import { renderMessage, renderErrorMessage, renderProgressIndicator } from './message';
+import { renderProgressIndicator } from './message';
 
 import galleryStyle from '../scss/gallery.scss';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -65,7 +71,7 @@ export class FrigateCardGallery extends LitElement {
     return html`${until(this._render(), renderProgressIndicator())}`;
   }
 
-  protected async _render(): Promise<TemplateResult> {
+  protected async _render(): Promise<TemplateResult | void> {
     let parent: BrowseMediaSource | null;
     try {
       if (this.view.target) {
@@ -74,11 +80,12 @@ export class FrigateCardGallery extends LitElement {
         parent = await browseMediaQuery(this.hass, this.browseMediaQueryParameters);
       }
     } catch (e: any) {
-      return renderErrorMessage(e.message);
+      return dispatchErrorMessageEvent(this, e.message);
     }
 
     if (!parent || !parent.children || getFirstTrueMediaChildIndex(parent) == null) {
-      return renderMessage(
+      return dispatchMessageEvent(
+        this,
         this._getMediaType() == 'clips'
           ? localize('common.no_clips')
           : localize('common.no_snapshots'),

src/components/live.ts

@@ -8,16 +8,14 @@ import type { ExtendedHomeAssistant, FrigateCardConfig } from '../types';
 
 import { localize } from '../localize/localize';
 import {
+  dispatchErrorMessageEvent,
   dispatchMediaLoadEvent,
+  dispatchMessageEvent,
   dispatchPauseEvent,
   dispatchPlayEvent,
   homeAssistantWSRequest,
 } from '../common';
-import {
-  renderMessage,
-  renderErrorMessage,
-  renderProgressIndicator,
-} from '../components/message';
+import { renderProgressIndicator } from '../components/message';
 
 import JSMpeg from '@cycjimmy/jsmpeg-player';
 
@@ -74,7 +72,11 @@ export class FrigateCardViewerFrigate extends LitElement {
 
   protected render(): TemplateResult | void {
     if (!(this.cameraEntity in this.hass.states)) {
-      return renderMessage(localize('error.no_live_camera'), 'mdi:camera-off');
+      return dispatchMessageEvent(
+        this,
+        localize('error.no_live_camera'),
+        'mdi:camera-off',
+      );
     }
     return html` <frigate-card-ha-camera-stream
       .hass=${this.hass}
@@ -120,7 +122,7 @@ export class FrigateCardViewerWebRTC extends LitElement {
       try {
         this._createWebRTC();
       } catch (e) {
-        return renderErrorMessage((e as Error).message);
+        return dispatchErrorMessageEvent(this, (e as Error).message);
       }
     }
     return html`${this._webRTCElement}`;
@@ -213,7 +215,7 @@ export class FrigateCardViewerJSMPEG extends LitElement {
     return html`${until(this._render(), renderProgressIndicator())}`;
   }
 
-  protected async _render(): Promise<TemplateResult> {
+  protected async _render(): Promise<TemplateResult | void> {
     if (!this._jsmpegCanvasElement) {
       this._jsmpegCanvasElement = document.createElement('canvas');
       this._jsmpegCanvasElement.className = 'media';
@@ -223,7 +225,10 @@ export class FrigateCardViewerJSMPEG extends LitElement {
       const jsmpeg_url = await this._getURL();
 
       if (!jsmpeg_url) {
-        return renderErrorMessage('Could not retrieve or sign JSMPEG websocket path');
+        return dispatchErrorMessageEvent(
+          this,
+          'Could not retrieve or sign JSMPEG websocket path',
+        );
       }
 
       let videoDecoded = false;

src/components/menu.ts

@@ -74,6 +74,7 @@ export class FrigateCardMenu extends LitElement {
     let emphasize = false;
     let title = button.title;
     let icon = button.icon;
+    const style = ('style' in button ? button.style : {}) || {};
 
     if (button.type === 'menu-state-icon') {
       state = this.hass.states[button.entity];
@@ -100,7 +101,7 @@ export class FrigateCardMenu extends LitElement {
 
     return html` <ha-icon-button
       class="${classMap(classes)}"
-      style="${styleMap(button.style || {})}"
+      style="${styleMap(style)}"
       icon=${icon || 'mdi:gesture-tap-button'}
       title=${title || ''}
       @action=${(ev) => this._callAction(ev, button)}

src/components/message.ts

@@ -3,6 +3,8 @@ import { customElement, property } from 'lit/decorators';
 
 import { localize } from '../localize/localize';
 
+import { Message } from '../types';
+
 import messageStyle from '../scss/message.scss';
 
 const URL_TROUBLESHOOTING =
@@ -14,13 +16,14 @@ export class FrigateCardMessage extends LitElement {
   protected message = '';
 
   @property({ attribute: false })
-  protected icon = 'mdi:information-outline';
+  protected icon?;
 
   // Render the menu.
   protected render(): TemplateResult {
+    const icon = this.icon ? this.icon : 'mdi:information-outline';
     return html` <div class="message">
       <span>
-        <ha-icon icon="${this.icon}"> </ha-icon>
+        <ha-icon icon="${icon}"> </ha-icon>
         ${this.message ? html`&nbsp;${this.message}` : ''}
       </span>
     </div>`;
@@ -59,16 +62,18 @@ export class FrigateCardProgressIndicator extends LitElement {
   }
 }
 
-export function renderErrorMessage(error: string): TemplateResult {
-  return html`
-    <frigate-card-error-message .error=${error}></frigate-card-error-message>
-  `;
-}
-
-export function renderMessage(message: string, icon: string): TemplateResult {
-  return html`
-    <frigate-card-message .message=${message} .icon=${icon}></frigate-card-message>
-  `;
+export function renderMessage(message: Message): TemplateResult {
+  if (message.type == 'error') {
+    return html` <frigate-card-error-message
+      .error=${message.message}
+    ></frigate-card-error-message>`;
+  } else if (message.type == 'info') {
+    return html` <frigate-card-message
+      .message=${message.message}
+      .icon=${message.icon}
+    ></frigate-card-message>`;
+  }
+  return html``;
 }
 
 export function renderProgressIndicator(): TemplateResult {

src/components/viewer.ts

@@ -18,7 +18,9 @@ import type {
 import { localize } from '../localize/localize';
 import {
   browseMediaQuery,
+  dispatchErrorMessageEvent,
   dispatchMediaLoadEvent,
+  dispatchMessageEvent,
   dispatchPauseEvent,
   dispatchPlayEvent,
   getFirstTrueMediaChildIndex,
@@ -27,8 +29,6 @@ import {
 
 import { View } from '../view';
 import {
-  renderMessage,
-  renderErrorMessage,
   renderProgressIndicator,
 } from '../components/message';
 
@@ -158,7 +158,7 @@ export class FrigateCardViewer extends LitElement {
     return html`${until(this._render(), renderProgressIndicator())}`;
   }
 
-  protected async _render(): Promise<TemplateResult> {
+  protected async _render(): Promise<TemplateResult | void> {
     let autoplay = true;
 
     let parent: BrowseMediaSource | null = null;
@@ -173,11 +173,12 @@ export class FrigateCardViewer extends LitElement {
       try {
         parent = await browseMediaQuery(this.hass, this.browseMediaQueryParameters);
       } catch (e) {
-        return renderErrorMessage((e as Error).message);
+        return dispatchErrorMessageEvent(this, (e as Error).message);
       }
       childIndex = getFirstTrueMediaChildIndex(parent);
       if (!parent || !parent.children || childIndex == null) {
-        return renderMessage(
+        return dispatchMessageEvent(
+          this,
           this.view.is('clip')
             ? localize('common.no_clip')
             : localize('common.no_snapshot'),
@@ -196,7 +197,7 @@ export class FrigateCardViewer extends LitElement {
     const resolvedMedia = await this._resolveMedia(mediaToRender);
     if (!mediaToRender || !resolvedMedia) {
       // Home Assistant could not resolve media item.
-      return renderErrorMessage(localize('error.could_not_resolve'));
+      return dispatchErrorMessageEvent(this, localize('error.could_not_resolve'));
     }
 
     const neighbors = this._getMediaNeighbors(parent, childIndex);