From 90807be6f71e1281e92d7c5f23624649036136ea Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 6 Sep 2021 20:43:13 -0700
Subject: [PATCH 1/4] Refactor css.

---
 src/frigate-hass-card.ts | 32 +++++++++++++-------------------
 src/scss/card.scss       | 23 ++++-------------------
 2 files changed, 17 insertions(+), 38 deletions(-)

diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts
index bb3c9b44..7c0973db 100644
--- a/src/frigate-hass-card.ts
+++ b/src/frigate-hass-card.ts
@@ -512,7 +512,7 @@ export class FrigateCard extends LitElement {
     icon: string,
     message: string | TemplateResult | null = null,
   ): TemplateResult {
-    return html` <div class="frigate-card-attention">
+    return html` <div class="frigate-card-contents attention">
       <span>
         <ha-icon icon="${icon}"> </ha-icon>
         ${message ? html`&nbsp;${message}` : ''}
@@ -737,12 +737,12 @@ export class FrigateCard extends LitElement {
       'frigate-media-controls': true,
       previous: previous,
       next: !previous,
-      thumbnails: (
+      thumbnails:
         !this.config.controls?.nextprev ||
-        this.config.controls?.nextprev === "thumbnails"),
-      chevrons: this.config.controls?.nextprev === "chevrons",
-      button: this.config.controls?.nextprev === "chevrons",
-    }
+        this.config.controls?.nextprev === 'thumbnails',
+      chevrons: this.config.controls?.nextprev === 'chevrons',
+      button: this.config.controls?.nextprev === 'chevrons',
+    };
 
     const clickChangeView = () => {
       this._view = new View({
@@ -751,7 +751,7 @@ export class FrigateCard extends LitElement {
         childIndex: targetChildIndex,
         previous: this._view,
       });
-    }
+    };
 
     if (this.config.controls?.nextprev == 'chevrons') {
       return html` <ha-icon-button
@@ -829,7 +829,7 @@ export class FrigateCard extends LitElement {
           ? html`<ha-hls-player
               .hass=${this._hass}
               .url=${resolvedMedia.url}
-              class="frigate-card-viewer"
+              class="frigate-card-contents"
               title="${mediaToRender.title}"
               muted
               controls
@@ -839,7 +839,7 @@ export class FrigateCard extends LitElement {
             >
             </ha-hls-player>`
           : html`<video
-              class="frigate-card-viewer"
+              class="frigate-card-contents"
               title="${mediaToRender.title}"
               muted
               controls
@@ -856,7 +856,7 @@ export class FrigateCard extends LitElement {
             </video>`
         : html`<img
             src=${resolvedMedia.url}
-            class="frigate-card-viewer"
+            class="frigate-card-contents"
             title="${mediaToRender.title}"
             @click=${() => {
               // Get clips potentially related to this snapshot.
@@ -1000,18 +1000,12 @@ export class FrigateCard extends LitElement {
       ${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
       <div class="frigate-card-contents">
         ${this._view.is('clips') || this._view.is('snapshots')
-          ? html`<div class="frigate-card-gallery">
-              ${until(this._renderEvents(), this._renderProgressIndicator())}
-            </div>`
+          ? until(this._renderEvents(), this._renderProgressIndicator())
           : ``}
         ${this._view.is('clip') || this._view.is('snapshot')
-          ? html`<div class="frigate-card-viewer">
-              ${until(this._renderViewer(), this._renderProgressIndicator())}
-            </div>`
-          : ``}
-        ${this._view.is('live')
-          ? html`<div class="frigate-card-viewer">${this._renderLiveViewer()}</div>`
+          ? until(this._renderViewer(), this._renderProgressIndicator())
           : ``}
+        ${this._view.is('live') ? this._renderLiveViewer() : ``}
       </div>
       ${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
     </ha-card>`;
diff --git a/src/scss/card.scss b/src/scss/card.scss
index c7704772..37b6e399 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -4,41 +4,26 @@
 
 .frigate-card-contents {
   width: 100%;
-
-  max-height: 277px;        /* Max Lovelace 16/9 video height */
   height: 100%;
   aspect-ratio: 16 / 9;
   overflow: auto;
-}
 
-.frigate-card-viewer {
-  width: 100%;
-
-  height: 100%;
-  aspect-ratio: 16 / 9;
-}
-
-.frigate-card-gallery {
-  overflow: auto;
   -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
   scrollbar-width: none;    /* Hide scrollbar: Firefox */
-
-  height: 100%;
-  aspect-ratio: 16 / 9;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-.frigate-card-gallery::-webkit-scrollbar {
+.frigate-card-contents::-webkit-scrollbar {
   display: none;
 }
 
-.frigate-card-attention {
+.frigate-card-contents.attention {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0% 5% 0% 5%;
 
-  height: 100%;
+  box-sizing: border-box;
+  padding: 5%;
 }
 
 .frigate-card-image-list {

From d62e99836f430eab868a7577c4b9ad5b999bc5fd Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 6 Sep 2021 21:20:15 -0700
Subject: [PATCH 2/4] Wrap content in a 16/9 container.

---
 src/frigate-hass-card.ts | 24 ++++++++++++------------
 src/scss/card.scss       | 18 +++++++++++++++---
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts
index 7c0973db..5c696483 100644
--- a/src/frigate-hass-card.ts
+++ b/src/frigate-hass-card.ts
@@ -512,7 +512,7 @@ export class FrigateCard extends LitElement {
     icon: string,
     message: string | TemplateResult | null = null,
   ): TemplateResult {
-    return html` <div class="frigate-card-contents attention">
+    return html` <div class="attention">
       <span>
         <ha-icon icon="${icon}"> </ha-icon>
         ${message ? html`&nbsp;${message}` : ''}
@@ -829,7 +829,6 @@ export class FrigateCard extends LitElement {
           ? html`<ha-hls-player
               .hass=${this._hass}
               .url=${resolvedMedia.url}
-              class="frigate-card-contents"
               title="${mediaToRender.title}"
               muted
               controls
@@ -839,7 +838,6 @@ export class FrigateCard extends LitElement {
             >
             </ha-hls-player>`
           : html`<video
-              class="frigate-card-contents"
               title="${mediaToRender.title}"
               muted
               controls
@@ -856,7 +854,7 @@ export class FrigateCard extends LitElement {
             </video>`
         : html`<img
             src=${resolvedMedia.url}
-            class="frigate-card-contents"
+            class="snapshot"
             title="${mediaToRender.title}"
             @click=${() => {
               // Get clips potentially related to this snapshot.
@@ -998,14 +996,16 @@ export class FrigateCard extends LitElement {
     }
     return html` <ha-card @click=${this._interactionHandler}>
       ${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
-      <div class="frigate-card-contents">
-        ${this._view.is('clips') || this._view.is('snapshots')
-          ? until(this._renderEvents(), this._renderProgressIndicator())
-          : ``}
-        ${this._view.is('clip') || this._view.is('snapshot')
-          ? until(this._renderViewer(), this._renderProgressIndicator())
-          : ``}
-        ${this._view.is('live') ? this._renderLiveViewer() : ``}
+      <div class="container_16_9">
+        <div class="frigate-card-contents">
+          ${this._view.is('clips') || this._view.is('snapshots')
+            ? until(this._renderEvents(), this._renderProgressIndicator())
+            : ``}
+          ${this._view.is('clip') || this._view.is('snapshot')
+            ? until(this._renderViewer(), this._renderProgressIndicator())
+            : ``}
+          ${this._view.is('live') ? this._renderLiveViewer() : ``}
+        </div>
       </div>
       ${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
     </ha-card>`;
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 37b6e399..49a06b35 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -2,26 +2,38 @@
 @use "@material/image-list";
 @use './common.scss';
 
+.container_16_9 {
+  /* 16:9 Aspect Ratio. When Safari supports 'aspect-ratio' this should not be
+     necessary */
+  padding-top: 56.25%;  // 9 / 16 == 0.5625
+}
+
 .frigate-card-contents {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
   aspect-ratio: 16 / 9;
   overflow: auto;
-
   -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
   scrollbar-width: none;    /* Hide scrollbar: Firefox */
 }
 
+.frigate-card-contents img.snapshot {
+  width: 100%;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .frigate-card-contents::-webkit-scrollbar {
   display: none;
 }
 
-.frigate-card-contents.attention {
+.frigate-card-contents .attention {
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-
   box-sizing: border-box;
   padding: 5%;
 }

From c9319b42f524ec9c2fad012f22e87411fbbc9aa8 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Tue, 7 Sep 2021 20:55:18 -0700
Subject: [PATCH 3/4] Tie the absolute to the outer container.

Remove use of aspect-ratio since it does not work in Safari.
---
 src/scss/card.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/scss/card.scss b/src/scss/card.scss
index 49a06b35..71a4d6d4 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -5,16 +5,18 @@
 .container_16_9 {
   /* 16:9 Aspect Ratio. When Safari supports 'aspect-ratio' this should not be
      necessary */
+  position: relative;
   padding-top: 56.25%;  // 9 / 16 == 0.5625
 }
 
 .frigate-card-contents {
   position: absolute;
   top: 0px;
+  right: 0px;
+  bottom: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
-  aspect-ratio: 16 / 9;
   overflow: auto;
   -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
   scrollbar-width: none;    /* Hide scrollbar: Firefox */

From 6995e581eea27924cc47cd253be737f8b5e0ea4f Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Tue, 7 Sep 2021 21:17:41 -0700
Subject: [PATCH 4/4] Force media to 100% width.

---
 src/frigate-hass-card.ts | 4 +++-
 src/scss/card.scss       | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts
index 5c696483..3510c528 100644
--- a/src/frigate-hass-card.ts
+++ b/src/frigate-hass-card.ts
@@ -827,6 +827,7 @@ export class FrigateCard extends LitElement {
       ${this._view.is('clip')
         ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
           ? html`<ha-hls-player
+              class="media"
               .hass=${this._hass}
               .url=${resolvedMedia.url}
               title="${mediaToRender.title}"
@@ -838,6 +839,7 @@ export class FrigateCard extends LitElement {
             >
             </ha-hls-player>`
           : html`<video
+              class="media"
               title="${mediaToRender.title}"
               muted
               controls
@@ -854,7 +856,7 @@ export class FrigateCard extends LitElement {
             </video>`
         : html`<img
             src=${resolvedMedia.url}
-            class="snapshot"
+            class="media"
             title="${mediaToRender.title}"
             @click=${() => {
               // Get clips potentially related to this snapshot.
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 71a4d6d4..e0ab7c39 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -22,7 +22,7 @@
   scrollbar-width: none;    /* Hide scrollbar: Firefox */
 }
 
-.frigate-card-contents img.snapshot {
+.frigate-card-contents img.media,video.media {
   width: 100%;
 }