Convert live to a Lit element.

src/components/gallery.ts

@@ -35,10 +35,10 @@ export class FrigateCardGallery extends LitElement {
   }
 
   protected render(): TemplateResult | void {
-    return html`${until(this._renderEvents(), renderProgressIndicator())}`;
+    return html`${until(this._render(), renderProgressIndicator())}`;
   }
 
-  protected async _renderEvents(): Promise<TemplateResult> {
+  protected async _render(): Promise<TemplateResult> {
     let parent: BrowseMediaSource | null;
     try {
       if (this.view.target) {

src/components/live.ts

@@ -0,0 +1,203 @@
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { until } from 'lit/directives/until.js';
+import {
+  renderMessage,
+  renderErrorMessage,
+  renderProgressIndicator,
+} from '../components/message';
+import { HomeAssistant } from 'custom-card-helpers';
+
+import liveStyle from '../scss/live.scss';
+
+import { signedPathSchema } from '../types';
+import type { ExtendedHomeAssistant, FrigateCardConfig } from '../types';
+import { localize } from '../localize/localize';
+import { homeAssistantWSRequest } from '../common';
+
+import JSMpeg from '@cycjimmy/jsmpeg-player';
+
+@customElement('frigate-card-live')
+export class FrigateCardViewer extends LitElement {
+  @property({ attribute: false })
+  protected hass!: HomeAssistant & ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  protected config!: FrigateCardConfig;
+
+  protected render(): TemplateResult | void {
+    return html`${until(this._render(), renderProgressIndicator())}`;
+  }
+
+  protected async _render(): Promise<TemplateResult> {
+    return html` ${this.config.live_provider == 'frigate'
+      ? html` <frigate-card-live-frigate
+          .hass=${this.hass}
+          .cameraEntity=${this.config.camera_entity}
+        >
+        </frigate-card-live-frigate>`
+      : this.config.live_provider == 'webrtc'
+      ? html`<frigate-card-live-webrtc
+          .hass=${this.hass}
+          .webRTCConfig=${this.config.webrtc || {}}
+        >
+        </frigate-card-live-webrtc>`
+      : html` <frigate-card-live-jsmpeg
+          .hass=${this.hass}
+          .cameraName=${this.config.frigate_camera_name}
+          .clientId=${this.config.frigate_client_id}
+        >
+        </frigate-card-live-jsmpeg>`}`;
+  }
+}
+
+@customElement('frigate-card-live-frigate')
+export class FrigateCardViewerFrigate extends LitElement {
+  @property({ attribute: false })
+  protected hass!: HomeAssistant & ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  protected cameraEntity!: string;
+
+  protected render(): TemplateResult | void {
+    if (!(this.cameraEntity in this.hass.states)) {
+      return renderMessage(localize('error.no_live_camera'), 'mdi:camera-off');
+    }
+    return html` <ha-camera-stream
+      .hass=${this.hass}
+      .stateObj=${this.hass.states[this.cameraEntity]}
+      .controls=${true}
+      .muted=${true}
+    >
+    </ha-camera-stream>`;
+  }
+}
+
+// Create a wrapper for the WebRTC element
+//  - https://github.com/AlexxIT/WebRTC
+@customElement('frigate-card-live-webrtc')
+export class FrigateCardViewerWebRTC extends LitElement {
+  @property({ attribute: false })
+  protected hass!: HomeAssistant & ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  protected webRTCConfig!: Record<string, unknown>;
+
+  protected _webRTCElement: HTMLElement | null = null;
+
+  protected _createWebRTC(): TemplateResult | void {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const webrtcElement = customElements.get('webrtc-camera') as any;
+    if (webrtcElement) {
+      const webrtc = new webrtcElement();
+      webrtc.setConfig(this.webRTCConfig);
+      webrtc.hass = this.hass;
+      this._webRTCElement = webrtc;
+    } else {
+      throw new Error(localize('error.missing_webrtc'));
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._webRTCElement) {
+      try {
+        this._createWebRTC();
+      } catch (e) {
+        return renderErrorMessage((e as Error).message);
+      }
+    }
+    return html`${this._webRTCElement}`;
+  }
+}
+
+@customElement('frigate-card-live-jsmpeg')
+export class FrigateCardViewerJSMPEG extends LitElement {
+  @property({ attribute: false })
+  protected hass!: HomeAssistant & ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  protected cameraName!: string;
+
+  @property({ attribute: false })
+  protected clientId!: string;
+
+  protected _jsmpegCanvasElement: HTMLElement | null = null;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected _jsmpegVideoPlayer: any | null = null;
+
+  protected async _getURL(): Promise<string | null> {
+    if (!this.hass) {
+      return null;
+    }
+
+    const request = {
+      type: 'auth/sign_path',
+      path: `/api/frigate/${this.clientId}` + `/jsmpeg/${this.cameraName}`,
+    };
+    // Sign the path so it includes an authSig parameter.
+    let response;
+    try {
+      response = await homeAssistantWSRequest(this.hass, signedPathSchema, request);
+    } catch (err) {
+      console.warn(err);
+      return null;
+    }
+    const url = this.hass.hassUrl(response.path);
+    return url.replace(/^http/i, 'ws');
+  }
+
+  disconnectedCallback(): void {
+    if (this._jsmpegVideoPlayer) {
+      this._jsmpegVideoPlayer.destroy();
+      this._jsmpegVideoPlayer = null;
+    }
+    this._jsmpegCanvasElement = null;
+    super.disconnectedCallback();
+  }
+
+  protected render(): TemplateResult | void {
+    return html`${until(this._render(), renderProgressIndicator())}`;
+  }
+
+  protected async _render(): Promise<TemplateResult> {
+    if (!this._jsmpegCanvasElement) {
+      this._jsmpegCanvasElement = document.createElement('canvas');
+      this._jsmpegCanvasElement.className = 'media';
+    }
+
+    if (!this._jsmpegVideoPlayer) {
+      const jsmpeg_url = await this._getURL();
+
+      if (!jsmpeg_url) {
+        return renderErrorMessage('Could not retrieve or sign JSMPEG websocket path');
+      }
+
+      // Return the html canvas node only after the JSMPEG video has loaded and
+      // is playing, to reduce the amount of time the user is staring at a blank
+      // white canvas (instead they get the progress spinner until this promise
+      // resolves).
+      return new Promise<TemplateResult>((resolve) => {
+        this._jsmpegVideoPlayer = new JSMpeg.VideoElement(
+          this,
+          jsmpeg_url,
+          {
+            canvas: this._jsmpegCanvasElement,
+            hooks: {
+              play: () => {
+                resolve(html`${this._jsmpegCanvasElement}`);
+              },
+            },
+          },
+          { protocols: [], videoBufferSize: 1024 * 1024 * 4 },
+        );
+      });
+    }
+    return html`${this._jsmpegCanvasElement}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
+}

src/components/viewer.ts

@@ -152,10 +152,10 @@ export class FrigateCardViewer extends LitElement {
   }
 
   protected render(): TemplateResult | void {
-    return html`${until(this._renderViewer(), renderProgressIndicator())}`;
+    return html`${until(this._render(), renderProgressIndicator())}`;
   }
 
-  protected async _renderViewer(): Promise<TemplateResult> {
+  protected async _render(): Promise<TemplateResult> {
     let autoplay = true;
 
     let parent: BrowseMediaSource | null = null;