From 93e8a8e71bb13cd9414ffb602ba10a43d24b914d Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 30 Jan 2023 19:53:29 -0800
Subject: [PATCH] Avoid resetting timeline when cameraIDs change.

---
 src/components/surround.ts      | 23 ++++++++++++++++++++---
 src/components/timeline-core.ts |  7 +++----
 src/view/view.ts                | 10 ++++------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/surround.ts b/src/components/surround.ts
index 9fd63dd3..6affa9b4 100644
--- a/src/components/surround.ts
+++ b/src/components/surround.ts
@@ -61,6 +61,8 @@ export class FrigateCardSurround extends LitElement {
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
+  protected _cameraIDsForTimeline?: Set<string>;
+
   /**
    * Fetch thumbnail media when a target is not specified in the view (e.g. for
    * the live view).
@@ -113,6 +115,16 @@ export class FrigateCardSurround extends LitElement {
       import('./timeline.js');
     }
 
+    // Only reset the timeline cameraIDs when the media materially changes (and
+    // not on every view change, since the view will change frequently when the
+    // user is scrubbing video).
+    if (
+      changedProperties.has('view') &&
+      View.isMediaChange(changedProperties.get('view'), this.view)
+    ) {
+      this._cameraIDsForTimeline = this._getCameraIDsForTimeline() ?? undefined;
+    }
+
     // Once the component will certainly update, dispatch a media request. Only
     // do so if properties relevant to the request have changed (as per their
     // hasChanged).
@@ -125,7 +137,7 @@ export class FrigateCardSurround extends LitElement {
     }
   }
 
-  protected _getCameraIDsForView(): Set<string> | null {
+  protected _getCameraIDsForTimeline(): Set<string> | null {
     if (!this.view || !this.cameras) {
       return null;
     }
@@ -133,7 +145,12 @@ export class FrigateCardSurround extends LitElement {
       return getAllDependentCameras(this.cameras, this.view.camera);
     }
     if (this.view.isViewerView()) {
-      return new Set(this.view.queryResults?.getResults()?.map((media) => media.getCameraID()));
+      return new Set(
+        this.view.query
+          ?.getQueries()
+          ?.map((query) => [...query.cameraIDs])
+          .flat(),
+      );
     }
     return null;
   }
@@ -205,7 +222,7 @@ export class FrigateCardSurround extends LitElement {
             .hass=${this.hass}
             .view=${this.view}
             .cameras=${this.cameras}
-            .cameraIDs=${this._getCameraIDsForView() ?? undefined}
+            .cameraIDs=${this._cameraIDsForTimeline}
             .mini=${true}
             .timelineConfig=${this.timelineConfig}
             .thumbnailDetails=${this.thumbnailConfig?.show_details}
diff --git a/src/components/timeline-core.ts b/src/components/timeline-core.ts
index c5f38630..e15a21c5 100644
--- a/src/components/timeline-core.ts
+++ b/src/components/timeline-core.ts
@@ -42,7 +42,6 @@ import {
   dispatchFrigateCardEvent,
   isHoverableDevice,
 } from '../utils/basic';
-import { getAllDependentCameras } from '../utils/camera.js';
 
 import {
   createViewForEvents,
@@ -186,7 +185,7 @@ export class FrigateCardTimelineCore extends LitElement {
 
   // Which cameraIDs to include in the timeline. If not specified, all cameraIDs
   // are shown.
-  @property({ attribute: false })
+  @property({ attribute: false, hasChanged: contentsChanged })
   public  cameraIDs?: Set<string>;
 
   @property({ attribute: false })
@@ -343,8 +342,7 @@ export class FrigateCardTimelineCore extends LitElement {
 
     const targetBarOn =
       !this._locked ||
-      (!this.view?.is('timeline') &&
-        this._timeline.getSelection().some((id) => {
+      (this.mini && this._timeline.getSelection().some((id) => {
           const item = this._timelineSource?.dataset?.get(id);
           return (
             item &&
@@ -1049,6 +1047,7 @@ export class FrigateCardTimelineCore extends LitElement {
   protected _destroy(): void {
     this._timeline?.destroy();
     this._timeline = undefined;
+    this._targetBarVisible = false;
   }
 
   /**
diff --git a/src/view/view.ts b/src/view/view.ts
index 36244521..48d86d12 100644
--- a/src/view/view.ts
+++ b/src/view/view.ts
@@ -1,7 +1,7 @@
 // Minor / later:
 //  - TODO: ts-prune https://camchenry.com/blog/deleting-dead-code-in-typescript
-//  - TODO: View a media in the gallery from September, then notice timeline missing the item.
-
+//  - TODO: Changing camera in live view, timeline stays the same.
+//  - TODO: Timeline initial load, then drag, appears to reset?
 // Gallery:
 //  - TODO: Filter panel expands from right can occasionally 'stick' open.
 
@@ -82,10 +82,8 @@ export class View {
       // When in the live view, the queryResults contain the events that
       // happened in the past -- not reflective of the actual live media viewer
       // the user is seeing.
-      (curr.view !== 'live' &&
-        (prev.queryResults !== curr.queryResults ||
-          prev.queryResults?.getSelectedResult() !==
-            curr.queryResults?.getSelectedResult()))
+      // TODO: Put stuff here that can be used in timeline reset code
+      (curr.view !== 'live' && (prev.queryResults !== curr.queryResults || prev.queryResults?.getSelectedResult() !==  curr.queryResults?.getSelectedResult()))
     );
   }