From 0ae9afef4b9f76228cfc89add8254bdb649d4776 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 20 Mar 2022 20:06:20 -0700
Subject: [PATCH] Tweak retain_definitely to work wide the newer thumbnails.

---
 src/components/gallery.ts      |  2 ++
 src/components/thumbnail.ts    |  6 +++++-
 src/localize/languages/en.json |  3 ++-
 src/scss/drawer.scss           |  6 ++++++
 src/scss/gallery.scss          | 28 ++++++++++++++--------------
 src/scss/thumbnail.scss        | 19 ++++++++++---------
 src/types.ts                   |  4 ++--
 7 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/gallery.ts b/src/components/gallery.ts
index 4428681a..8f15f4f5 100644
--- a/src/components/gallery.ts
+++ b/src/components/gallery.ts
@@ -13,6 +13,7 @@ import {
 } from '../types.js';
 import { BrowseMediaUtil } from '../browse-media-util.js';
 import { View } from '../view.js';
+import { localize } from '../localize/localize.js';
 import { renderProgressIndicator } from './message.js';
 import { stopEventFromActivatingCardWideActions } from '../common.js';
 
@@ -221,6 +222,7 @@ export class FrigateCardGalleryCore extends LitElement {
                   />${child.frigate?.event?.retain_indefinitely ? html`<ha-icon
                       class="favorite"
                       icon="mdi:star"
+                      title=${localize('event.retain_indefinitely')}
                       />` : ``}`
                 : ``}
             </div>
diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts
index fa3d5031..243524c3 100644
--- a/src/components/thumbnail.ts
+++ b/src/components/thumbnail.ts
@@ -38,7 +38,11 @@ export class FrigateCardThumbnail extends FrigateCardCarousel {
         title="${this.media.title}"
       />
       ${event?.retain_indefinitely
-        ? html` <ha-icon class="favorite" icon="mdi:star" />`
+        ? html` <ha-icon
+            class="favorite"
+            icon="mdi:star"
+            title=${localize('event.retain_indefinitely')}
+          />`
         : ``}
       ${this.details && event
         ? html` <div class="details">
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index 1e8f45a7..4d417a97 100644
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -211,7 +211,8 @@
   "event": {
     "start": "Start",
     "duration": "Duration",
-    "in_progress": "In Progress"
+    "in_progress": "In Progress",
+    "retain_indefinitely": "Event will be indefinitely retained"
   },
   "error": {
     "empty_response": "Received empty response from Home Assistant for request",
diff --git a/src/scss/drawer.scss b/src/scss/drawer.scss
index 3ed79a2f..e2157dc6 100644
--- a/src/scss/drawer.scss
+++ b/src/scss/drawer.scss
@@ -38,6 +38,12 @@ ha-icon.control {
   padding-bottom: $drawer-padding-extend;
 }
 
+:host([open]) ha-icon.control {
+  // When the drawer is open make the button to close it more prominent.
+  opacity: 1;
+  background-color: black;
+}
+
 :host([location='left']) ha-icon.control {
   border-top-right-radius: $drawer-icon-size;
   border-bottom-right-radius: $drawer-icon-size;
diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss
index 03ad3fdd..eaac8f8c 100644
--- a/src/scss/gallery.scss
+++ b/src/scss/gallery.scss
@@ -1,16 +1,21 @@
-@use "@material/image-list/mdc-image-list";
-@use "@material/image-list";
+@use '@material/image-list/mdc-image-list';
+@use '@material/image-list';
+@use 'thumbnail';
 
 :host {
   display: block;
   width: 100%;
   height: 100%;
   overflow: auto;
-  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
-  scrollbar-width: none;    /* Hide scrollbar: Firefox */
+
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
+// Hide scrollbar for Chrome, Safari and Opera
 :host::-webkit-scrollbar {
   display: none;
 }
@@ -44,12 +49,7 @@ ha-card.frigate-card-gallery-folder {
   height: 100%;
   line-height: 1;
 }
-.favorite {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  height: 24px;
-  width: 24px;
-  top: 10%;
-  left: 90%;
-  color: yellow;
-}
\ No newline at end of file
+
+@include thumbnail.thumbnail-favorite() {
+  opacity: 0.8;
+} ;
diff --git a/src/scss/thumbnail.scss b/src/scss/thumbnail.scss
index 67406a63..2bb746b9 100644
--- a/src/scss/thumbnail.scss
+++ b/src/scss/thumbnail.scss
@@ -54,12 +54,13 @@ span.heading {
   font-weight: bold;
 }
 
-.favorite {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  height: 24px;
-  width: 24px;
-  top: 12%;
-  left: 90%;
-  color: yellow;
-}
\ No newline at end of file
+@mixin thumbnail-favorite() {
+  ha-icon.favorite {
+    position: absolute;
+    color: var(--primary-color);
+    padding: 2px;
+    @content;
+  } 
+}
+
+@include thumbnail-favorite()
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 8c945372..34e660e1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -953,7 +953,7 @@ export interface FrigateEvent {
   start_time: number;
   top_score: number;
   zones: string[];
-  retain_indefinitely: boolean;
+  retain_indefinitely?: boolean;
 }
 
 export interface FrigateBrowseMediaSource extends BrowseMediaSource {
@@ -988,7 +988,7 @@ export const frigateBrowseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.
             start_time: z.number(),
             top_score: z.number(),
             zones: z.string().array(),
-            retain_indefinitely: z.boolean(),
+            retain_indefinitely: z.boolean().optional(),
           }),
         })
         .optional(),