Adding favorite icon

src/components/thumbnail-carousel.ts

@@ -109,25 +109,52 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       return;
     }
 
-    return html`<div
+    console.log("Checking for retain: " + mediaToRender?.frigate?.event?.retain_indefinitely)
-      class="embla__slide"
+    if (mediaToRender.frigate?.event?.retain_indefinitely == true) {
-      @click=${(ev) => {
+      return html`<div
-        if (this._carousel && this._carousel.clickAllowed()) {
+        class="embla__slide"
-          dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
+        @click=${(ev) => {
-            slideIndex: slideIndex,
+          if (this._carousel && this._carousel.clickAllowed()) {
-            target: parent,
+            dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
-            childIndex: childIndex,
+              slideIndex: slideIndex,
-          });
+              target: parent,
-        }
+              childIndex: childIndex,
-        stopEventFromActivatingCardWideActions(ev);
+            });
-      }}
+          }
-    >
+          stopEventFromActivatingCardWideActions(ev);
-      <img
+        }}
-        aria-label="${mediaToRender.title}"
+      >
-        src="${mediaToRender.thumbnail}"
+        <img
-        title="${mediaToRender.title}"
+          aria-label="${mediaToRender.title}"
-      />
+          src="${mediaToRender.thumbnail}"
-    </div>`;
+          title="${mediaToRender.title}"
+        />
+        <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>`;
+    }
   }
 
   /**

src/scss/thumbnail-carousel.scss

@@ -25,4 +25,12 @@
   // Restrict images to a maximum of thumbnail size.
   max-width: var(--frigate-card-carousel-thumbnail-size);
   max-height: var(--frigate-card-carousel-thumbnail-size);
+}
+.favorite {
+  position: absolute;
+  height: 30px;
+  width: 30px;
+  top: 8;
+  right: 8;
+  color: yellow;
 }

src/types.ts

@@ -946,6 +946,7 @@ export interface FrigateBrowseMediaSource extends BrowseMediaSource {
       start_time: number;
       top_score: number;
       zones: string[];
+      retain_indefinitely: boolean;
     };
   };
 }
@@ -975,6 +976,7 @@ export const frigateBrowseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.
             start_time: z.number(),
             top_score: z.number(),
             zones: z.string().array(),
+            retain_indefinitely: z.boolean(),
           }),
         })
         .optional(),