fix: Increase reliability of media auto actions (e.g. play) (#1934)

Refactors media player handling entirely to make the code more
consistent and less boilerplate. Add testing for media player actions.

- Closes #1921
- Closes #1916

src/patches/ha-web-rtc-player.ts

@@ -14,84 +14,44 @@ import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { dispatchLiveErrorEvent } from '../components-lib/live/utils/dispatch-live-error.js';
+import { VideoMediaPlayerController } from '../components-lib/media-player/video.js';
 import { renderMessage } from '../components/message.js';
 import liveHAComponentsStyle from '../scss/live-ha-components.scss';
-import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../types.js';
+import { MediaPlayer, MediaPlayerController } from '../types.js';
 import { mayHaveAudio } from '../utils/audio.js';
+import {
+  hideMediaControlsTemporarily,
+  MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+} from '../utils/controls.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 { ConstructableLitElement } from './types.js';
 
 customElements.whenDefined('ha-web-rtc-player').then(() => {
+  const HaWebRtcPlayer = customElements.get(
+    'ha-web-rtc-player',
+  ) as ConstructableLitElement;
+
   @customElement('advanced-camera-card-ha-web-rtc-player')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  class AdvancedCameraCardHaWebRtcPlayer
-    extends customElements.get('ha-web-rtc-player')
-    implements AdvancedCameraCardMediaPlayer
-  {
+  class AdvancedCameraCardHaWebRtcPlayer extends HaWebRtcPlayer implements MediaPlayer {
     // Due to an obscure behavior when this card is casted, this element needs
     // to use query rather than the ref directive to find the player.
     @query('#remote-stream')
     protected _video: HTMLVideoElement;
 
-    public async play(): Promise<void> {
-      return this._video?.play();
-    }
+    protected _mediaPlayerController = new VideoMediaPlayerController(
+      this,
+      () => this._video,
+      () => this.controls,
+    );
 
-    public async pause(): Promise<void> {
-      this._video?.pause();
-    }
-
-    public async mute(): Promise<void> {
-      // The muted property is only for the initial muted state. Must explicitly
-      // set the muted on the video player to make the change dynamic.
-      if (this._video) {
-        this._video.muted = true;
-      }
-    }
-
-    public async unmute(): Promise<void> {
-      // See note in mute().
-      if (this._video) {
-        this._video.muted = false;
-      }
-    }
-
-    public isMuted(): boolean {
-      return this._video?.muted ?? true;
-    }
-
-    public async seek(seconds: number): Promise<void> {
-      if (this._video) {
-        this._video.currentTime = seconds;
-      }
-    }
-
-    public async setControls(controls?: boolean): Promise<void> {
-      if (this._video) {
-        setControlsOnVideo(this._video, controls ?? this.controls);
-      }
-    }
-
-    public isPaused(): boolean {
-      return this._video?.paused ?? true;
-    }
-
-    public async getScreenshotURL(): Promise<string | null> {
-      return this._video ? screenshotMedia(this._video) : null;
-    }
-
-    public getFullscreenElement(): FullscreenElement | null {
-      return this._video ?? null;
+    public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
+      return this._mediaPlayerController;
     }
 
     // =====================================================================================
@@ -136,7 +96,7 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
     private _loadedDataHandler(ev: Event) {
       super._loadedData();
       dispatchMediaLoadedEvent(this, ev, {
-        player: this,
+        mediaPlayerController: this._mediaPlayerController,
         capabilities: {
           supportsPause: true,
           hasAudio: mayHaveAudio(this._video),