From 4ac69a951c0b54cc4ca0249d2c63a2a1ef93de55 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Tue, 21 Sep 2021 12:47:15 -0700
Subject: [PATCH] CSS changes for Safari & cleanups

---
 src/components/live.ts | 12 ++++++++++++
 src/scss/card.scss     | 39 +++++++--------------------------------
 src/scss/live.scss     |  7 +++++++
 src/scss/viewer.scss   |  3 +++
 4 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/components/live.ts b/src/components/live.ts
index 19fa0ecc..caf6604f 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -50,6 +50,10 @@ export class FrigateCardViewer extends LitElement {
         >
         </frigate-card-live-jsmpeg>`}`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
 }
 
 @customElement('frigate-card-live-frigate')
@@ -72,6 +76,10 @@ export class FrigateCardViewerFrigate extends LitElement {
     >
     </ha-camera-stream>`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
 }
 
 // Create a wrapper for the WebRTC element
@@ -110,6 +118,10 @@ export class FrigateCardViewerWebRTC extends LitElement {
     }
     return html`${this._webRTCElement}`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
 }
 
 @customElement('frigate-card-live-jsmpeg')
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 9b5de207..fce1e04f 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -18,7 +18,12 @@
   scrollbar-width: none;    /* Hide scrollbar: Firefox */
 }
 
-/* Support the 'hover' menu mode. */
+/* Hide scrollbar for Chrome, Safari and Opera */
+.frigate-card-contents::-webkit-scrollbar {
+  display: none;
+}
+
+/* The 'hover' menu mode is styling applied outside of the menu itself */
 .hover-menu {
   z-index: 1;
   transition: all 0.5s ease;
@@ -30,28 +35,6 @@
   opacity: 1.0;
 }
 
-.frigate-card-contents img.media,video.media,canvas.media {
-  width: 100%;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.frigate-card-contents::-webkit-scrollbar {
-  display: none;
-}
-
-.frigate-card-contents .attention {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 10%;
-}
-
-video, img {
-  display: block;
-}
-
 ha-card {
   display: flex;
   flex-direction: column;
@@ -62,16 +45,8 @@ ha-card {
   position: relative;
   color: var(--secondary-text-color, white);
   background-color: var(--secondary-background-color, black);
-
 }
 
 ha-card a {
   color: var(--primary-text-color, white);
-}
-
-/* Don't drop shadow or have radius for nested webrtc card */
-webrtc-camera ha-card {
-  box-shadow: none;
-  border-radius: 0px;
-  background-color: var(--secondary-background-color, black);
-}
+}
\ No newline at end of file
diff --git a/src/scss/live.scss b/src/scss/live.scss
index 1f1d77be..790803c8 100644
--- a/src/scss/live.scss
+++ b/src/scss/live.scss
@@ -1,3 +1,10 @@
 canvas {
   width: 100%;
 }
+
+/* Don't drop shadow or have radius for nested webrtc card */
+webrtc-camera ha-card {
+  box-shadow: none;
+  border-radius: 0px;
+  background-color: var(--secondary-background-color, black);
+}
\ No newline at end of file
diff --git a/src/scss/viewer.scss b/src/scss/viewer.scss
index 5e67639b..ab01dce9 100644
--- a/src/scss/viewer.scss
+++ b/src/scss/viewer.scss
@@ -1,3 +1,6 @@
+ha-hls-player {
+  transform-style: preserve-3d;
+}
 img,video {
   width: 100%;
   height: 100%;