From 8a0ba11fa96ffab2288f74cd22b9f9559d0f0f6f Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 12 Aug 2023 09:46:47 -0700
Subject: [PATCH] Reset query when changing to non-grid .

---
 src/card.ts                  | 12 ++++++++----
 src/components/media-grid.ts |  2 --
 src/view/media-queries.ts    |  5 +++--
 tests/view/view.test.ts      |  2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 9356401f..16f6c201 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1248,9 +1248,9 @@ class FrigateCard extends LitElement {
         });
 
         const generateNewQuery =
-          newView?.isGrid() &&
-          newView.query &&
-          (newView.query.getQueryCameraIDs()?.size ?? 0) <= 1;
+          newView?.query &&
+          ((newView.isGrid() && (newView.query.getQueryCameraIDs()?.size ?? 0) <= 1) ||
+            (!newView.isGrid() && (newView.query.getQueryCameraIDs()?.size ?? 0) > 1));
 
         if (generateNewQuery && newView && newView.query) {
           // If the user requests a grid but the current query does not have a
@@ -1264,7 +1264,11 @@ class FrigateCard extends LitElement {
             newView,
             newView.query
               .clone()
-              .setQueryCameraIDs(this._cameraManager.getStore().getVisibleCameraIDs()),
+              .setQueryCameraIDs(
+                newView.isGrid()
+                  ? this._cameraManager.getStore().getVisibleCameraIDs()
+                  : newView.camera,
+              ),
           ).then((view) => view && this._changeView({ view: view }));
         } else {
           this._changeView({ view: newView });
diff --git a/src/components/media-grid.ts b/src/components/media-grid.ts
index af09624d..344e82cc 100644
--- a/src/components/media-grid.ts
+++ b/src/components/media-grid.ts
@@ -1,8 +1,6 @@
 // TODO: Performance of video scanning (pause/play?)
 // TODO: Investigate query spam during a grid load
-
 // TODO: Do I need column max?
-// TODO: What thumbnails do I show in the live drawer?
 
 import {
   CSSResultGroup,
diff --git a/src/view/media-queries.ts b/src/view/media-queries.ts
index 4a77ae7f..2b5268c1 100644
--- a/src/view/media-queries.ts
+++ b/src/view/media-queries.ts
@@ -2,6 +2,7 @@ import cloneDeep from 'lodash-es/cloneDeep.js';
 import isEqual from 'lodash-es/isEqual.js';
 import uniqWith from 'lodash-es/uniqWith.js';
 import { EventQuery, MediaQuery, RecordingQuery } from '../camera-manager/types.js';
+import { setify } from '../utils/basic.js';
 
 export type MediaQueries = EventMediaQueries | RecordingMediaQueries;
 
@@ -38,13 +39,13 @@ class MediaQueriesBase<T extends MediaQuery> {
     return cameraIDs;
   }
 
-  public setQueryCameraIDs(cameraIDs: Set<string>): this {
+  public setQueryCameraIDs(cameraIDs: string | Set<string>): this {
     if (!this._queries) {
       return this;
     }
     const rewrittenQueries: T[] = [];
     this._queries.forEach((query) =>
-      rewrittenQueries.push({ ...query, cameraIDs: cameraIDs }),
+      rewrittenQueries.push({ ...query, cameraIDs: setify(cameraIDs) }),
     );
     this._queries = uniqWith(rewrittenQueries, isEqual);
     return this;
diff --git a/tests/view/view.test.ts b/tests/view/view.test.ts
index 165c7dc7..e19f5da3 100644
--- a/tests/view/view.test.ts
+++ b/tests/view/view.test.ts
@@ -427,7 +427,7 @@ describe('View.adoptFromViewIfAppropriate', () => {
   });
 
   it('should determine if view supports multiple display modes', () => {
-    expect(createView({ view: 'live' }).supportsMultipleDisplayModes()).toBeFalsy();
+    expect(createView({ view: 'live' }).supportsMultipleDisplayModes()).toBeTruthy();
     expect(createView({ view: 'media' }).supportsMultipleDisplayModes()).toBeTruthy();
     expect(createView({ view: 'clip' }).supportsMultipleDisplayModes()).toBeTruthy();
     expect(createView({ view: 'snapshot' }).supportsMultipleDisplayModes()).toBeTruthy();