Merge pull request #489 from NickM-27/favorite-clips

Add favorite icon for clips that are retained

src/components/gallery.ts

@@ -218,7 +218,10 @@ export class FrigateCardGalleryCore extends LitElement {
                       }
                       stopEventFromActivatingCardWideActions(ev);
                     }}
-                  />`
+                  />${child.frigate?.event?.retain_indefinitely ? html`<ha-icon
+                      class="favorite"
+                      icon="mdi:star"
+                      />` : ``}`
                 : ``}
             </div>
           </li>`,

src/components/thumbnail-carousel.ts

@@ -127,6 +127,11 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
         src="${mediaToRender.thumbnail}"
         title="${mediaToRender.title}"
       />
+      ${mediaToRender?.frigate?.event?.retain_indefinitely ? html`
+        <ha-icon
+          class="favorite"
+          icon="mdi:star"
+        />` : ``}
     </div>`;
   }
 

src/scss/gallery.scss

@@ -43,4 +43,13 @@ ha-card.frigate-card-gallery-folder {
   padding: 10px;
   height: 100%;
   line-height: 1;
+}
+.favorite {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  height: 24px;
+  width: 24px;
+  top: 10%;
+  left: 90%;
+  color: yellow;
 }

src/scss/thumbnail-carousel.scss

@@ -25,4 +25,13 @@
   // 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;
+  transform: translate(-50%, -50%);
+  height: 24px;
+  width: 24px;
+  top: 12%;
+  left: 90%;
+  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(),