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

src/components/live/providers/webrtc-card.ts

@@ -0,0 +1,243 @@
+import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
+import { Task } from '@lit-labs/task';
+import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { CameraEndpoints } from '../../../camera-manager/types.js';
+import { getTechnologyForVideoRTC } from '../../../components-lib/live/utils/get-technology-for-video-rtc.js';
+import { CameraConfig, CardWideConfig } from '../../../config/types.js';
+import { localize } from '../../../localize/localize.js';
+import liveWebRTCCardStyle from '../../../scss/live-webrtc-card.scss';
+import { FrigateCardError, FrigateCardMediaPlayer } from '../../../types.js';
+import { mayHaveAudio } from '../../../utils/audio.js';
+import {
+  dispatchMediaLoadedEvent,
+  dispatchMediaPauseEvent,
+  dispatchMediaPlayEvent,
+  dispatchMediaVolumeChangeEvent,
+} from '../../../utils/media-info.js';
+import {
+  hideMediaControlsTemporarily,
+  MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+  setControlsOnVideo,
+} from '../../../utils/media.js';
+import { screenshotMedia } from '../../../utils/screenshot.js';
+import { renderTask } from '../../../utils/task.js';
+import { dispatchErrorMessageEvent, renderProgressIndicator } from '../../message.js';
+import { VideoRTC } from './go2rtc/video-rtc.js';
+
+// Create a wrapper for AlexxIT's WebRTC card
+//  - https://github.com/AlexxIT/WebRTC
+@customElement('frigate-card-live-webrtc-card')
+export class FrigateCardLiveWebRTCCard
+  extends LitElement
+  implements FrigateCardMediaPlayer
+{
+  @property({ attribute: false })
+  public cameraConfig?: CameraConfig;
+
+  @property({ attribute: false })
+  public cameraEndpoints?: CameraEndpoints;
+
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
+  @property({ attribute: true, type: Boolean })
+  public controls = false;
+
+  protected hass?: HomeAssistant;
+
+  // A task to await the load of the WebRTC component.
+  protected _webrtcTask = new Task(this, this._getWebRTCCardElement, () => [1]);
+
+  public async play(): Promise<void> {
+    return this._getPlayer()?.play();
+  }
+
+  public async pause(): Promise<void> {
+    this._getPlayer()?.pause();
+  }
+
+  public async mute(): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.muted = true;
+    }
+  }
+
+  public async unmute(): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.muted = false;
+    }
+  }
+
+  public isMuted(): boolean {
+    return this._getPlayer()?.muted ?? true;
+  }
+
+  public async seek(seconds: number): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      player.currentTime = seconds;
+    }
+  }
+
+  public async setControls(controls?: boolean): Promise<void> {
+    const player = this._getPlayer();
+    if (player) {
+      setControlsOnVideo(player, controls ?? this.controls);
+    }
+  }
+
+  public isPaused(): boolean {
+    return this._getPlayer()?.paused ?? true;
+  }
+
+  public async getScreenshotURL(): Promise<string | null> {
+    const video = this._getPlayer();
+    return video ? screenshotMedia(video) : null;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Reset the player when reconnected to the DOM.
+    // https://github.com/dermotduffy/frigate-hass-card/issues/996
+    this.requestUpdate();
+  }
+
+  protected _getVideoRTC(): VideoRTC | null {
+    return (this.renderRoot?.querySelector('#webrtc') ?? null) as VideoRTC | null;
+  }
+
+  /**
+   * Get the underlying video player.
+   * @returns The player or `null` if not found.
+   */
+  protected _getPlayer(): HTMLVideoElement | null {
+    return this._getVideoRTC()?.video ?? null;
+  }
+
+  protected async _getWebRTCCardElement(): Promise<
+    CustomElementConstructor | undefined
+  > {
+    await customElements.whenDefined('webrtc-camera');
+    return customElements.get('webrtc-camera');
+  }
+
+  /**
+   * Create the WebRTC element. May throw.
+   */
+  protected _createWebRTC(): HTMLElement | null {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const webrtcElement = this._webrtcTask.value;
+    if (webrtcElement && this.hass && this.cameraConfig) {
+      const webrtc = new webrtcElement() as HTMLElement & {
+        hass: HomeAssistant;
+        setConfig: (config: Record<string, unknown>) => void;
+      };
+      const config = {
+        // By default, webrtc-card will stop the video when 50% of the video is
+        // hidden. This is incompatible with the card zoom support, since the
+        // video will easily stop if the user zooms in too much. Disable this
+        // feature by default.
+        // See: https://github.com/dermotduffy/frigate-hass-card/issues/1614
+        intersection: 0,
+
+        ...this.cameraConfig.webrtc_card,
+      };
+      if (!config.url && !config.entity && this.cameraEndpoints?.webrtcCard) {
+        // This will never need to be signed, it is just used internally by the
+        // card as a stream name lookup.
+        config.url = this.cameraEndpoints.webrtcCard.endpoint;
+      }
+      webrtc.setConfig(config);
+      webrtc.hass = this.hass;
+      return webrtc;
+    }
+    return null;
+  }
+
+  /**
+   * Master render method.
+   * @returns A rendered template.
+   */
+  protected render(): TemplateResult | void {
+    const render = (): TemplateResult | void => {
+      let webrtcElement: HTMLElement | null;
+      try {
+        webrtcElement = this._createWebRTC();
+      } catch (e) {
+        return dispatchErrorMessageEvent(
+          this,
+          e instanceof FrigateCardError
+            ? e.message
+            : localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message,
+          { context: (e as FrigateCardError).context },
+        );
+      }
+      if (webrtcElement) {
+        // Set the id to ensure that the relevant CSS styles will have
+        // sufficient specifity to overcome some styles that are otherwise
+        // applied to <ha-card> in Safari.
+        webrtcElement.id = 'webrtc';
+      }
+      return html`${webrtcElement}`;
+    };
+
+    // Use a task to allow us to asynchronously wait for the WebRTC card to
+    // load, but yet still have the card load be followed by the updated()
+    // lifecycle callback (unlike just using `until`).
+    return renderTask(this, this._webrtcTask, render, {
+      inProgressFunc: () =>
+        renderProgressIndicator({
+          message: localize('error.webrtc_card_waiting'),
+          cardWideConfig: this.cardWideConfig,
+        }),
+    });
+  }
+
+  /**
+   * Updated lifecycle callback.
+   */
+  public updated(): void {
+    // Extract the video component after it has been rendered and generate the
+    // media load event.
+    this.updateComplete.then(() => {
+      const videoRTC = this._getVideoRTC();
+      const video = this._getPlayer();
+      if (video) {
+        setControlsOnVideo(video, this.controls);
+        video.onloadeddata = () => {
+          if (this.controls) {
+            hideMediaControlsTemporarily(video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
+          }
+          dispatchMediaLoadedEvent(this, video, {
+            player: this,
+            capabilities: {
+              supportsPause: true,
+              hasAudio: mayHaveAudio(video),
+            },
+            ...(videoRTC && { technology: getTechnologyForVideoRTC(videoRTC) }),
+          });
+        };
+        video.onplay = () => dispatchMediaPlayEvent(this);
+        video.onpause = () => dispatchMediaPauseEvent(this);
+        video.onvolumechange = () => dispatchMediaVolumeChangeEvent(this);
+      }
+    });
+  }
+
+  /**
+   * Get styles.
+   */
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveWebRTCCardStyle);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-live-webrtc-card': FrigateCardLiveWebRTCCard;
+  }
+}