Add an 'image' live provider.

2022-10-09 16:11:38 -07:00
parent 9af8eedb8a
commit 0366ad9736
7 changed files with 195 additions and 59 deletions
@@ -0,0 +1,90 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import liveFrigateStyle from '../../scss/live-frigate.scss';
+import { CameraConfig } from '../../types.js';
+import { getStateObjOrDispatchError } from './live.js';
+import '../image.js';
+
+@customElement('frigate-card-live-image')
+export class FrigateCardLiveImage extends LitElement {
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @state()
+  protected _playing = true;
+
+  /**
+   * Play the video.
+   */
+  public play(): void {
+    this._playing = true;
+  }
+
+  /**
+   * Pause the video.
+   */
+  public pause(): void {
+    this._playing = false;
+  }
+
+  /**
+   * Mute the video.
+   */
+  public mute(): void {
+    // Not implemented.
+  }
+
+  /**
+   * Unmute the video.
+   */
+  public unmute(): void {
+    // Not implemented.
+  }
+
+  /**
+   * Seek the video.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public seek(_seconds: number): void {
+    // Not implemented.
+  }
+
+  /**
+   * Master render method.
+   * @returns A rendered template.
+   */
+  protected render(): TemplateResult | void {
+    if (!this.hass) {
+      return;
+    }
+
+    getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
+
+    return html` <frigate-card-image
+      .imageConfig=${{
+        mode: 'camera' as const,
+        refresh_seconds: this._playing ? 1 : 0,
+      }}
+      .hass=${this.hass}
+      .cameraConfig=${this.cameraConfig}
+    >
+    </frigate-card-image>`;
+  }
+
+  /**
+   * Get styles.
+   */
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveFrigateStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-image': FrigateCardLiveImage;
+  }
+}