From a5c33f4c2833e718fc8a31d3f00b0dcfe528f0f2 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 27 Feb 2023 23:14:20 -0800
Subject: [PATCH] Update the `webrtc_card` provider for the latest webrtc
 version.

---
 src/components/live/live-webrtc-card.ts | 7 +++++--
 src/components/live/live.ts             | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/live/live-webrtc-card.ts b/src/components/live/live-webrtc-card.ts
index 67c4fbb3..91c69a46 100644
--- a/src/components/live/live-webrtc-card.ts
+++ b/src/components/live/live-webrtc-card.ts
@@ -78,7 +78,10 @@ export class FrigateCardLiveWebRTCCard
    * @returns The player or `null` if not found.
    */
   protected _getPlayer(): HTMLVideoElement | null {
-    return this.renderRoot?.querySelector('video') as HTMLVideoElement | null;
+    const root = this.renderRoot?.querySelector('#webrtc') as
+      | (HTMLElement & { video?: HTMLVideoElement })
+      | null;
+    return root?.video ?? null;
   }
 
   protected async _getWebRTCCardElement(): Promise<
@@ -99,7 +102,7 @@ export class FrigateCardLiveWebRTCCard
         hass: HomeAssistant;
         setConfig: (config: Record<string, unknown>) => void;
       };
-      const config = {...this.cameraConfig.webrtc_card};
+      const config = { ...this.cameraConfig.webrtc_card };
       if (!config.url && !config.entity && this.cameraEndpoints?.webrtcCard) {
         // This will never need to be signed, it is just used internally by the
         // card as a stream name lookup.
diff --git a/src/components/live/live.ts b/src/components/live/live.ts
index 02491c46..7e0ede03 100644
--- a/src/components/live/live.ts
+++ b/src/components/live/live.ts
@@ -863,12 +863,14 @@ export class FrigateCardLiveProvider
             ${ref(this._providerRef)}
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
-            @frigate-card:media:loaded=${() => {
+            @frigate-card:media:loaded=${(ev: Event) => {
               if (provider === 'image') {
                 // Only count the media has loaded if the required provider is
                 // the image (not just the temporary image shown during
                 // loading).
                 this._videoMediaShowHandler();
+              } else {
+                ev.stopPropagation();
               }
             }}
           >