Automatically mute if autoplay is blocked.

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

@@ -23,29 +23,23 @@ import liveHAComponentsStyle from '../scss/live-ha-components.scss';
 customElements.whenDefined('ha-web-rtc-player').then(() => {
   @customElement('frigate-card-ha-web-rtc-player')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  class FrigateCardHaWebRtcPlayer extends customElements.get('ha-web-rtc-player') {
+  class FrigateCardHaWebRtcPlayer
+    extends customElements.get('ha-web-rtc-player')
+    implements FrigateCardMediaPlayer
+  {
     // 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;
 
-    /**
-     * Play the video.
-     */
-    public play(): void {
-      this._video?.play();
+    public async play(): Promise<void> {
+      return this._video?.play();
     }
 
-    /**
-     * Pause the video.
-     */
     public pause(): void {
       this._video?.pause();
     }
 
-    /**
-     * Mute the video.
-     */
     public mute(): 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.
@@ -54,9 +48,6 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
       }
     }
 
-    /**
-     * Unmute the video.
-     */
     public unmute(): void {
       // See note in mute().
       if (this._video) {
@@ -64,9 +55,10 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
       }
     }
 
-    /**
-     * Seek the video.
-     */
+    public isMuted(): boolean {
+      return this._video?.muted ?? true;
+    }
+
     public seek(seconds: number): void {
       if (this._video) {
         this._video.currentTime = seconds;