From 56465e4f92140d75b49f5d4fb3b5feb379ece24c Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 25 Sep 2022 17:50:40 -0700
Subject: [PATCH] Promote thumbnail carousel selected to a property.

---
 src/components/surround.ts           |  3 ++-
 src/components/thumbnail-carousel.ts | 30 +++++++++++++---------------
 src/components/timeline-core.ts      |  9 +++++++--
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/surround.ts b/src/components/surround.ts
index 45ded48a..fae4303a 100644
--- a/src/components/surround.ts
+++ b/src/components/surround.ts
@@ -30,6 +30,7 @@ import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 
 import './surround-basic.js';
 import './timeline-core.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 interface ThumbnailViewContext {
   // Whether or not to fetch thumbnails.
@@ -171,8 +172,8 @@ export class FrigateCardSurround extends LitElement {
             .config=${this.thumbnailConfig}
             .view=${this.view}
             .target=${this.view.target}
-            .selected=${this.view.childIndex}
             .cameras=${this.cameras}
+            selected=${ifDefined(this.view.childIndex ?? undefined)}
             @frigate-card:view:change=${(ev: CustomEvent) => changeDrawer(ev, 'close')}
             @frigate-card:thumbnail-carousel:tap=${(
               ev: CustomEvent<ThumbnailCarouselTap>,
diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts
index b405c189..fb1f8917 100644
--- a/src/components/thumbnail-carousel.ts
+++ b/src/components/thumbnail-carousel.ts
@@ -59,8 +59,8 @@ export class FrigateCardThumbnailCarousel extends LitElement {
   @property({ attribute: false })
   public config?: ThumbnailsControlConfig;
 
-  @state()
-  protected _selected: number | null = null;
+  @property({ attribute: false, type: Number, reflect: true })
+  public selected?: number;
 
   protected _carouselOptions?: EmblaOptionsType;
   protected _carouselPlugins: EmblaPluginType[] = [
@@ -76,15 +76,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
     this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
   }
 
-  @property({ attribute: false })
-  set selected(selected: number | null) {
-    this._selected = selected;
-    this.style.setProperty(
-      '--frigate-card-carousel-thumbnail-opacity',
-      selected === null ? '1.0' : '0.4',
-    );
-  }
-
   /**
    * Handle gallery resize.
    */
@@ -116,7 +107,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
     return {
       containScroll: 'keepSnaps',
       dragFree: true,
-      startIndex: this._selected ?? 0,
+      startIndex: this.selected ?? 0,
     };
   }
   /**
@@ -155,6 +146,13 @@ export class FrigateCardThumbnailCarousel extends LitElement {
       }
     }
 
+    if (changedProps.has('selected')) {
+      this.style.setProperty(
+        '--frigate-card-carousel-thumbnail-opacity',
+        this.selected === undefined ? '1.0' : '0.4',
+      );
+    }
+  
     if (!this._carouselOptions) {
       // Want to set the initial carousel options just before the first render
       // in order to get the startIndex correct in the options. It is not safe
@@ -171,10 +169,10 @@ export class FrigateCardThumbnailCarousel extends LitElement {
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
-    if (changedProperties.has('_selected')) {
+    if (changedProperties.has('selected')) {
       this.updateComplete.then(() => {
-        if (this._selected !== null) {
-          this._refCarousel.value?.carouselScrollTo(this._selected);
+        if (this.selected !== undefined) {
+          this._refCarousel.value?.carouselScrollTo(this.selected);
         }
       });
     }
@@ -200,7 +198,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
 
     const classes = {
       embla__slide: true,
-      'slide-selected': this._selected === childIndex,
+      'slide-selected': this.selected === childIndex,
     };
 
     const cameraConfig = this.view?.camera ? this.cameras?.get(this.view.camera) : null;
diff --git a/src/components/timeline-core.ts b/src/components/timeline-core.ts
index 1869d9e3..7d6d7f5c 100644
--- a/src/components/timeline-core.ts
+++ b/src/components/timeline-core.ts
@@ -681,7 +681,9 @@ export class FrigateCardTimelineCore extends LitElement {
           const window = this._timeline?.getWindow();
           if (window) {
             if (properties.group) {
-              this._changeViewToRecording(window.end, String(properties.group));
+              this._changeViewToRecording(
+                properties.what === 'background' ? properties.time : window.end,
+                String(properties.group));
             } else if (this.mini && this.view?.camera) {
               // In mini mode group may not be displayed / used, so just use the camera directly.
               this._changeViewToRecording(window.end, this.view.camera);
@@ -812,7 +814,10 @@ export class FrigateCardTimelineCore extends LitElement {
       : this._timeline.getSelection();
     let childIndex = -1;
     const children: FrigateBrowseMediaSource[] = [];
-    this._dataview?.get({ order: sortTimelineItemsYoungestToOldest }).forEach((item) => {
+    this._dataview?.get({ 
+      filter: (item) => item.type !== 'background',
+      order: sortTimelineItemsYoungestToOldest }
+    ).forEach((item) => {
       const cameraID = item.group ? String(item.group) : null;
       const cameraConfig = cameraID ? this.cameras?.get(cameraID) : null;
       const event = item.event;