Reset query when changing to non-grid .

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 });

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,

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;

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();