Automatically mute if autoplay is blocked.

src/patches/ha-camera-stream.ts

@@ -41,7 +41,10 @@ customElements.whenDefined('ha-camera-stream').then(() => {
 
   @customElement('frigate-card-ha-camera-stream')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  class FrigateCardHaCameraStream extends customElements.get('ha-camera-stream') {
+  class FrigateCardHaCameraStream
+    extends customElements.get('ha-camera-stream')
+    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('#player')
@@ -52,34 +55,26 @@ customElements.whenDefined('ha-camera-stream').then(() => {
     // - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-camera-stream.ts
     // ========================================================================================
 
-    /**
-     * Play the video.
-     */
-    public play(): void {
-      this._player?.play();
+    public async play(): Promise<void> {
+      return this._player?.play();
     }
 
-    /**
-     * Pause the video.
-     */
     public pause(): void {
       this._player?.pause();
     }
 
-    /**
-     * Mute the video.
-     */
     public mute(): void {
       this._player?.mute();
     }
 
-    /**
-     * Unmute the video.
-     */
     public unmute(): void {
       this._player?.unmute();
     }
 
+    public isMuted(): boolean {
+      return this._player?.isMuted() ?? true;
+    }
+
     /**
      * Seek the video (unsupported).
      */

src/patches/ha-hls-player.ts

@@ -19,33 +19,28 @@ import {
   hideMediaControlsTemporarily,
   MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
 } from '../utils/media.js';
+import { FrigateCardMediaPlayer } from '../types.js';
 
 customElements.whenDefined('ha-hls-player').then(() => {
   @customElement('frigate-card-ha-hls-player')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  class FrigateCardHaHlsPlayer extends customElements.get('ha-hls-player') {
+  class FrigateCardHaHlsPlayer
+    extends customElements.get('ha-hls-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('#video')
     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 +49,6 @@ customElements.whenDefined('ha-hls-player').then(() => {
       }
     }
 
-    /**
-     * Unmute the video.
-     */
     public unmute(): void {
       // See note in mute().
       if (this._video) {
@@ -64,9 +56,10 @@ customElements.whenDefined('ha-hls-player').then(() => {
       }
     }
 
-    /**
-     * Seek the video.
-     */
+    public isMuted(): boolean {
+      return this._video?.muted() ?? true;
+    }
+
     public seek(seconds: number): void {
       if (this._video) {
         hideMediaControlsTemporarily(this._video);

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;