From 6c494f4b1bd19cf206e964adcb33da5d4a750a20 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 13 Jun 2022 21:59:02 -0700
Subject: [PATCH] Fix webrtc style issue in Safari.

---
 src/components/live.ts    | 6 ++++++
 src/scss/live-webrtc.scss | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/live.ts b/src/components/live.ts
index b0182eeb..e5d16477 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -907,6 +907,12 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
           (e as FrigateCardError).context,
         );
       }
+      if (webrtcElement) {
+        // Set the id to ensure that the relevant CSS styles will have
+        // sufficient specifity to overcome some styles that are otherwise
+        // applied to <ha-card> in Safari.
+        webrtcElement.id = "webrtc";
+      }
       return html`${webrtcElement}`;
     };
 
diff --git a/src/scss/live-webrtc.scss b/src/scss/live-webrtc.scss
index 0f4e1c18..86ccf1af 100644
--- a/src/scss/live-webrtc.scss
+++ b/src/scss/live-webrtc.scss
@@ -5,7 +5,7 @@
 }
 
 /* Don't drop shadow or have radius for nested webrtc card */
-webrtc-camera ha-card {
+#webrtc ha-card {
   box-shadow: none;
   border-radius: 0px;
   background-color: black;