Only show the microphone button when the loaded media supports 2-way audio.

src/components/image.ts

@@ -11,27 +11,32 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import isEqual from 'lodash-es/isEqual';
 import { CachedValueController } from '../cached-value-controller.js';
 import defaultImage from '../images/frigate-bird-in-sky.jpg';
 import { localize } from '../localize/localize.js';
 import imageStyle from '../scss/image.scss';
-import { CameraConfig, ImageViewConfig, MediaLoadedInfo } from '../types.js';
+import {
+  CameraConfig,
+  FrigateCardMediaPlayer,
+  ImageViewConfig,
+  MediaLoadedInfo,
+} from '../types.js';
+import { contentsChanged } from '../utils/basic.js';
 import { isHassDifferent } from '../utils/ha';
-import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.js';
 import {
   createMediaLoadedInfo,
   dispatchExistingMediaLoadedInfoAsEvent,
 } from '../utils/media-info.js';
+import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.js';
 import { View } from '../view/view.js';
 import { dispatchErrorMessageEvent } from './message.js';
-import { contentsChanged } from '../utils/basic.js';
-import isEqual from 'lodash-es/isEqual';
 
 // See TOKEN_CHANGE_INTERVAL in https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py .
 const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
 
 @customElement('frigate-card-image')
-export class FrigateCardImage extends LitElement {
+export class FrigateCardImage extends LitElement implements FrigateCardMediaPlayer {
   @property({ attribute: false })
   public hass?: HomeAssistant;
 
@@ -54,6 +59,36 @@ export class FrigateCardImage extends LitElement {
 
   protected _mediaLoadedInfo: MediaLoadedInfo | null = null;
 
+  public async play(): Promise<void> {
+    this._cachedValueController?.startTimer();
+  }
+
+  public async pause(): Promise<void> {
+    this._cachedValueController?.stopTimer();
+  }
+
+  public async mute(): Promise<void> {
+    // Not implemented.
+  }
+
+  public async unmute(): Promise<void> {
+    // Not implemented.
+  }
+
+  public isMuted(): boolean {
+    return true;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public async seek(_seconds: number): Promise<void> {
+    // Not implemented.
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public async setControls(_controls: boolean): Promise<void> {
+    // Not implemented.
+  }
+
   /**
    * Get the camera entity for the current camera configuration.
    * @returns The entity or undefined if no camera entity is available.
@@ -250,7 +285,7 @@ export class FrigateCardImage extends LitElement {
           ${ref(this._refImage)}
           src=${live(src)}
           @load=${(ev: Event) => {
-            const mediaLoadedInfo = createMediaLoadedInfo(ev);
+            const mediaLoadedInfo = createMediaLoadedInfo(ev, { player: this });
             // Avoid the media being reported as repeatedly loading unless the
             // media info changes.
             if (mediaLoadedInfo && !isEqual(this._mediaLoadedInfo, mediaLoadedInfo)) {

src/components/live/live-go2rtc.ts

@@ -36,9 +36,11 @@ const GO2RTC_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
 @customElement('frigate-card-live-go2rtc-player')
 class FrigateCardGo2RTCPlayer extends VideoRTC {
   protected _microphoneStream?: MediaStream;
+  protected _containingPlayer?: FrigateCardMediaPlayer;
 
-  constructor(microphoneStream?: MediaStream) {
+  constructor(containingPlayer: FrigateCardMediaPlayer, microphoneStream?: MediaStream) {
     super();
+    this._containingPlayer = containingPlayer;
     if (microphoneStream) {
       this._microphoneStream = microphoneStream;
     }
@@ -79,7 +81,16 @@ class FrigateCardGo2RTCPlayer extends VideoRTC {
           onloadeddata.call(this.video, e);
         }
         hideMediaControlsTemporarily(this.video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
-        dispatchMediaLoadedEvent(this, this.video);
+        dispatchMediaLoadedEvent(this, this.video, {
+          player: this._containingPlayer,
+          capabilities: {
+            // 2-way audio is only supported on WebRTC connections. The state of
+            // `this._microphoneStream` is not taken into account here since
+            // that can be created after the fact -- this is purely saying that
+            // were a microphone stream available it could be used usefully.
+            supports2WayAudio: !!this.pc,
+          },
+        });
       };
 
       // Always started muted. Media may be unmuted in accordance with user
@@ -256,7 +267,7 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
       return;
     }
 
-    this._player = new FrigateCardGo2RTCPlayer(this.microphoneStream);
+    this._player = new FrigateCardGo2RTCPlayer(this, this.microphoneStream);
     this._player.src = address;
     this._player.visibilityCheck = false;
 

src/components/live/live-image.ts

@@ -1,10 +1,11 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import liveImageStyle from '../../scss/live-image.scss';
 import { CameraConfig, FrigateCardMediaPlayer } from '../../types.js';
-import { getStateObjOrDispatchError } from './live.js';
 import '../image.js';
+import { getStateObjOrDispatchError } from './live.js';
 
 @customElement('frigate-card-live-image')
 export class FrigateCardLiveImage extends LitElement implements FrigateCardMediaPlayer {
@@ -14,37 +15,34 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
   @property({ attribute: false })
   public cameraConfig?: CameraConfig;
 
-  @state()
-  protected _playing = true;
+  protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
 
   public async play(): Promise<void> {
-    this._playing = true;
+    await this._refImage.value?.play();
   }
 
   public async pause(): Promise<void> {
-    this._playing = false;
+    await this._refImage.value?.pause();
   }
 
   public async mute(): Promise<void> {
-    // Not implemented.
+    await this._refImage.value?.mute();
   }
 
   public async unmute(): Promise<void> {
-    // Not implemented.
+    await this._refImage.value?.unmute();
   }
 
   public isMuted(): boolean {
-    return true;
+    return !!this._refImage.value?.isMuted();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public async seek(_seconds: number): Promise<void> {
-    // Not implemented.
+  public async seek(seconds: number): Promise<void> {
+    await this._refImage.value?.seek(seconds);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public async setControls(_controls: boolean): Promise<void> {
-    // Not implemented.
+  public async setControls(controls: boolean): Promise<void> {
+    await this._refImage.value?.setControls(controls);
   }
 
   protected render(): TemplateResult | void {
@@ -55,16 +53,14 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
     getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
 
     return html` <frigate-card-image
+      ${ref(this._refImage)}
       .imageConfig=${{
         mode: this.cameraConfig.image.url ? ('url' as const) : ('camera' as const),
-        refresh_seconds: this._playing ? this.cameraConfig.image.refresh_seconds : 0,
+        refresh_seconds: this.cameraConfig.image.refresh_seconds,
         url: this.cameraConfig.image.url,
 
-        // The live provider will take care of zoom.
+        // The live provider will take care of zoom and layout options.
         zoomable: false,
-
-        // Don't need to pass layout options as FrigateCardLiveProvider has
-        // already taken care of this for us.
       }}
       .hass=${this.hass}
       .cameraConfig=${this.cameraConfig}

src/components/live/live-jsmpeg.ts

@@ -111,7 +111,9 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
             // ignore any subsequent calls.
             if (!videoDecoded && this._jsmpegCanvasElement) {
               videoDecoded = true;
-              dispatchMediaLoadedEvent(this, this._jsmpegCanvasElement);
+              dispatchMediaLoadedEvent(this, this._jsmpegCanvasElement, {
+                player: this,
+              });
               resolve(player);
             }
           },

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

@@ -185,7 +185,7 @@ export class FrigateCardLiveWebRTCCard
             onloadeddata.call(video, e);
           }
           hideMediaControlsTemporarily(video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
-          dispatchMediaLoadedEvent(this, video);
+          dispatchMediaLoadedEvent(this, video, { player: this });
         };
       }
     });

src/components/viewer.ts

@@ -750,7 +750,7 @@ export class FrigateCardViewerProvider
                   }
                 }}
                 @loadeddata=${(ev: Event) => {
-                  dispatchMediaLoadedEvent(this, ev);
+                  dispatchMediaLoadedEvent(this, ev, { player: this });
                 }}
               >
                 <source
@@ -768,8 +768,8 @@ export class FrigateCardViewerProvider
                 this._dispatchRelatedClipView();
               }
             }}
-            @load=${(e: Event) => {
-              dispatchMediaLoadedEvent(this, e);
+            @load=${(ev: Event) => {
+              dispatchMediaLoadedEvent(this, ev, { player: this });
             }}
           />`}
     `);