From ca837774bfbf3379512a0feb367998bf7cbd076b Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sun, 20 Mar 2022 17:34:11 -0600
Subject: [PATCH] Fix positioning of icon and use ternary

---
 src/components/thumbnail-carousel.ts | 64 +++++++++-------------------
 src/scss/thumbnail-carousel.scss     | 11 +++--
 2 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts
index 5eefae89..3110a020 100644
--- a/src/components/thumbnail-carousel.ts
+++ b/src/components/thumbnail-carousel.ts
@@ -109,52 +109,30 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       return;
     }
 
-    console.log("Checking for retain: " + mediaToRender?.frigate?.event?.retain_indefinitely)
-    if (mediaToRender.frigate?.event?.retain_indefinitely == true) {
-      return html`<div
-        class="embla__slide"
-        @click=${(ev) => {
-          if (this._carousel && this._carousel.clickAllowed()) {
-            dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
-              slideIndex: slideIndex,
-              target: parent,
-              childIndex: childIndex,
-            });
-          }
-          stopEventFromActivatingCardWideActions(ev);
-        }}
-      >
-        <img
-          aria-label="${mediaToRender.title}"
-          src="${mediaToRender.thumbnail}"
-          title="${mediaToRender.title}"
-        />
+    return html`<div
+      class="embla__slide"
+      @click=${(ev) => {
+        if (this._carousel && this._carousel.clickAllowed()) {
+          dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
+            slideIndex: slideIndex,
+            target: parent,
+            childIndex: childIndex,
+          });
+        }
+        stopEventFromActivatingCardWideActions(ev);
+      }}
+    >
+      <img
+        aria-label="${mediaToRender.title}"
+        src="${mediaToRender.thumbnail}"
+        title="${mediaToRender.title}"
+      />
+      ${mediaToRender?.frigate?.event?.retain_indefinitely ? html`
         <ha-icon
           class="favorite"
           icon="mdi:star"
-        />
-      </div>`;
-    } else {
-      return html`<div
-        class="embla__slide"
-        @click=${(ev) => {
-          if (this._carousel && this._carousel.clickAllowed()) {
-            dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
-              slideIndex: slideIndex,
-              target: parent,
-              childIndex: childIndex,
-            });
-          }
-          stopEventFromActivatingCardWideActions(ev);
-        }}
-      >
-        <img
-          aria-label="${mediaToRender.title}"
-          src="${mediaToRender.thumbnail}"
-          title="${mediaToRender.title}"
-        />
-      </div>`;
-    }
+        />` : ``}
+    </div>`;
   }
 
   /**
diff --git a/src/scss/thumbnail-carousel.scss b/src/scss/thumbnail-carousel.scss
index d7def473..25dc7342 100644
--- a/src/scss/thumbnail-carousel.scss
+++ b/src/scss/thumbnail-carousel.scss
@@ -7,6 +7,8 @@
   flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
   opacity: var(--frigate-card-carousel-thumbnail-opacity);
   transition: opacity 0.6s ease, transform 0.2s linear;
+  position: relative;
+  display: inline-block;
 }
 .embla__slide.slide-selected {
   opacity: 1.0;
@@ -28,9 +30,10 @@
 }
 .favorite {
   position: absolute;
-  height: 30px;
-  width: 30px;
-  top: 8;
-  right: 8;
+  transform: translate(-50%, -50%);
+  height: 24px;
+  width: 24px;
+  top: 12%;
+  left: 90%;
   color: yellow;
 }
\ No newline at end of file