Automatically mute if autoplay is blocked.

src/components/live/live-image.ts

@@ -2,12 +2,12 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import liveImageStyle from '../../scss/live-image.scss';
-import { CameraConfig, LiveImageConfig } from '../../types.js';
+import { CameraConfig, FrigateCardMediaPlayer, LiveImageConfig } from '../../types.js';
 import { getStateObjOrDispatchError } from './live.js';
 import '../image.js';
 
 @customElement('frigate-card-live-image')
-export class FrigateCardLiveImage extends LitElement {
+export class FrigateCardLiveImage extends LitElement implements FrigateCardMediaPlayer {
   @property({ attribute: false })
   public hass?: HomeAssistant;
 
@@ -20,46 +20,31 @@ export class FrigateCardLiveImage extends LitElement {
   @state()
   protected _playing = true;
 
-  /**
-   * Play the video.
-   */
-  public play(): void {
+  public async play(): Promise<void> {
     this._playing = true;
   }
 
-  /**
-   * Pause the video.
-   */
   public pause(): void {
     this._playing = false;
   }
 
-  /**
-   * Mute the video.
-   */
   public mute(): void {
     // Not implemented.
   }
 
-  /**
-   * Unmute the video.
-   */
   public unmute(): void {
     // Not implemented.
   }
 
-  /**
-   * Seek the video.
-   */
+  public isMuted(): boolean {
+    return true;
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public seek(_seconds: number): void {
     // Not implemented.
   }
 
-  /**
-   * Master render method.
-   * @returns A rendered template.
-   */
   protected render(): TemplateResult | void {
     if (!this.hass || !this.liveImageConfig) {
       return;
@@ -80,9 +65,6 @@ export class FrigateCardLiveImage extends LitElement {
     </frigate-card-image>`;
   }
 
-  /**
-   * Get styles.
-   */
   static get styles(): CSSResultGroup {
     return unsafeCSS(liveImageStyle);
   }