refactor: Split live.ts into multiple files (#1644)

2024-10-13 20:00:38 -07:00
parent 653bb8b7b5
commit f473cae6b5
18 changed files with 1151 additions and 1079 deletions
@@ -0,0 +1,100 @@
+import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
+import { CameraConfig } from '../../../config/types';
+import { localize } from '../../../localize/localize';
+import '../../../patches/ha-camera-stream';
+import '../../../patches/ha-hls-player.js';
+import '../../../patches/ha-web-rtc-player.js';
+import liveHAStyle from '../../../scss/live-ha.scss';
+import { FrigateCardMediaPlayer } from '../../../types.js';
+import { renderMessage } from '../../message';
+import { getStateObjOrDispatchError } from '../../../utils/get-state-obj';
+
+@customElement('frigate-card-live-ha')
+export class FrigateCardLiveHA extends LitElement implements FrigateCardMediaPlayer {
+  @property({ attribute: false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @property({ attribute: true, type: Boolean })
+  public controls = true;
+
+  protected _playerRef: Ref<Element & FrigateCardMediaPlayer> = createRef();
+
+  public async play(): Promise<void> {
+    return this._playerRef.value?.play();
+  }
+
+  public async pause(): Promise<void> {
+    this._playerRef.value?.pause();
+  }
+
+  public async mute(): Promise<void> {
+    this._playerRef.value?.mute();
+  }
+
+  public async unmute(): Promise<void> {
+    this._playerRef.value?.unmute();
+  }
+
+  public isMuted(): boolean {
+    return this._playerRef.value?.isMuted() ?? true;
+  }
+
+  public async seek(seconds: number): Promise<void> {
+    this._playerRef.value?.seek(seconds);
+  }
+
+  public async setControls(controls?: boolean): Promise<void> {
+    this._playerRef.value?.setControls(controls ?? this.controls);
+  }
+
+  public isPaused(): boolean {
+    return this._playerRef.value?.isPaused() ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    return (await this._playerRef.value?.getScreenshotURL()) ?? null;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass) {
+      return;
+    }
+
+    const stateObj = getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
+    if (!stateObj) {
+      return;
+    }
+    if (stateObj.state === 'unavailable') {
+      return renderMessage({
+        message: localize('error.live_camera_unavailable'),
+        type: 'error',
+        icon: 'mdi:connection',
+        context: this.cameraConfig,
+      });
+    }
+    return html` <frigate-card-ha-camera-stream
+      ${ref(this._playerRef)}
+      .hass=${this.hass}
+      .stateObj=${stateObj}
+      .controls=${this.controls}
+      .muted=${true}
+    >
+    </frigate-card-ha-camera-stream>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveHAStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-ha': FrigateCardLiveHA;
+  }
+}