From 16dc3d244ad9aa963817d0b6494b19b07cc54651 Mon Sep 17 00:00:00 2001 From: Nick Mowen Date: Sun, 20 Mar 2022 14:57:51 -0600 Subject: [PATCH 1/4] Adding favorite icon --- src/components/thumbnail-carousel.ts | 65 ++++++++++++++++++++-------- src/scss/thumbnail-carousel.scss | 8 ++++ src/types.ts | 2 + 3 files changed, 56 insertions(+), 19 deletions(-) diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 7ad9dd18..5eefae89 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -109,25 +109,52 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel { return; } - return html`
{ - if (this._carousel && this._carousel.clickAllowed()) { - dispatchFrigateCardEvent(this, 'carousel:tap', { - slideIndex: slideIndex, - target: parent, - childIndex: childIndex, - }); - } - stopEventFromActivatingCardWideActions(ev); - }} - > - -
`; + console.log("Checking for retain: " + mediaToRender?.frigate?.event?.retain_indefinitely) + if (mediaToRender.frigate?.event?.retain_indefinitely == true) { + return html`
{ + if (this._carousel && this._carousel.clickAllowed()) { + dispatchFrigateCardEvent(this, 'carousel:tap', { + slideIndex: slideIndex, + target: parent, + childIndex: childIndex, + }); + } + stopEventFromActivatingCardWideActions(ev); + }} + > + + +
`; + } else { + return html`
{ + if (this._carousel && this._carousel.clickAllowed()) { + dispatchFrigateCardEvent(this, 'carousel:tap', { + slideIndex: slideIndex, + target: parent, + childIndex: childIndex, + }); + } + stopEventFromActivatingCardWideActions(ev); + }} + > + +
`; + } } /** diff --git a/src/scss/thumbnail-carousel.scss b/src/scss/thumbnail-carousel.scss index 22055ca5..d7def473 100644 --- a/src/scss/thumbnail-carousel.scss +++ b/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; } \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 73856a39..6aeb65b3 100644 --- a/src/types.ts +++ b/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 = z. start_time: z.number(), top_score: z.number(), zones: z.string().array(), + retain_indefinitely: z.boolean(), }), }) .optional(), From ca837774bfbf3379512a0feb367998bf7cbd076b Mon Sep 17 00:00:00 2001 From: Nick Mowen Date: Sun, 20 Mar 2022 17:34:11 -0600 Subject: [PATCH 2/4] 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`
{ - if (this._carousel && this._carousel.clickAllowed()) { - dispatchFrigateCardEvent(this, 'carousel:tap', { - slideIndex: slideIndex, - target: parent, - childIndex: childIndex, - }); - } - stopEventFromActivatingCardWideActions(ev); - }} - > - + return html`
{ + if (this._carousel && this._carousel.clickAllowed()) { + dispatchFrigateCardEvent(this, 'carousel:tap', { + slideIndex: slideIndex, + target: parent, + childIndex: childIndex, + }); + } + stopEventFromActivatingCardWideActions(ev); + }} + > + + ${mediaToRender?.frigate?.event?.retain_indefinitely ? html` -
`; - } else { - return html`
{ - if (this._carousel && this._carousel.clickAllowed()) { - dispatchFrigateCardEvent(this, 'carousel:tap', { - slideIndex: slideIndex, - target: parent, - childIndex: childIndex, - }); - } - stopEventFromActivatingCardWideActions(ev); - }} - > - -
`; - } + />` : ``} +
`; } /** 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 From 57afd5cdda6669f9f5a58722f1eaec8b2d03a230 Mon Sep 17 00:00:00 2001 From: Nick Mowen Date: Sun, 20 Mar 2022 17:41:47 -0600 Subject: [PATCH 3/4] Add favorite icon to gallery --- src/components/gallery.ts | 5 ++++- src/scss/gallery.scss | 9 +++++++++ src/scss/thumbnail-carousel.scss | 2 -- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/gallery.ts b/src/components/gallery.ts index 21d26fd8..4428681a 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -218,7 +218,10 @@ export class FrigateCardGalleryCore extends LitElement { } stopEventFromActivatingCardWideActions(ev); }} - />` + />${child.frigate?.event?.retain_indefinitely ? html`` : ``}` : ``} `, diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index 5f367850..f8c5b8d2 100644 --- a/src/scss/gallery.scss +++ b/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: 12%; + left: 90%; + color: yellow; } \ No newline at end of file diff --git a/src/scss/thumbnail-carousel.scss b/src/scss/thumbnail-carousel.scss index 25dc7342..d8d3ca67 100644 --- a/src/scss/thumbnail-carousel.scss +++ b/src/scss/thumbnail-carousel.scss @@ -7,8 +7,6 @@ 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; From e7901ebe48ef816a811ede2684e06a40f68dd727 Mon Sep 17 00:00:00 2001 From: Nick Mowen Date: Sun, 20 Mar 2022 17:44:25 -0600 Subject: [PATCH 4/4] Tweak positioning --- src/scss/gallery.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index f8c5b8d2..03ad3fdd 100644 --- a/src/scss/gallery.scss +++ b/src/scss/gallery.scss @@ -49,7 +49,7 @@ ha-card.frigate-card-gallery-folder { transform: translate(-50%, -50%); height: 24px; width: 24px; - top: 12%; + top: 10%; left: 90%; color: yellow; } \ No newline at end of file