Reset the query on grid change in a smarter way.

src/components/live/live.ts

@@ -363,7 +363,12 @@ export class FrigateCardLiveGrid extends LitElement {
 
   protected _needsGrid(): boolean {
     const cameraIDs = this.cameraManager?.getStore().getVisibleCameraIDs();
-    return !!this.view?.isGrid() && !!cameraIDs && cameraIDs.size >= 1;
+    return (
+      !!this.view?.isGrid() &&
+      !!this.view?.supportsMultipleDisplayModes() &&
+      !!cameraIDs &&
+      cameraIDs.size > 1
+    );
   }
 
   protected willUpdate(changedProps: PropertyValues): void {
@@ -377,7 +382,7 @@ export class FrigateCardLiveGrid extends LitElement {
       return;
     }
     const cameraIDs = this.cameraManager?.getStore().getVisibleCameraIDs();
-    if (!this._needsGrid() || !cameraIDs) {
+    if (!cameraIDs || !this._needsGrid()) {
       return this._renderCarousel();
     }
     return html`

src/components/media-grid.ts

@@ -1,7 +1,8 @@
 // TODO: Performance of video scanning (pause/play?)
 // TODO: Investigate query spam during a grid load
-// TODO: Is the query reset in card.ts correct for media filter multi-camera queries that are not all cameras?
+
 // TODO: Do I need column max?
+// TODO: What thumbnails do I show in the live drawer?
 
 import {
   CSSResultGroup,

src/components/viewer.ts

@@ -149,7 +149,6 @@ export class FrigateCardViewer extends LitElement {
           {
             allCameras: this.view.isGrid(),
             targetView: 'recording',
-            select: 'latest',
           },
         );
       } else {
@@ -163,7 +162,6 @@ export class FrigateCardViewer extends LitElement {
             allCameras: this.view.isGrid(),
             targetView: 'media',
             mediaType: mediaType,
-            select: 'latest',
           },
         );
       }
@@ -648,18 +646,23 @@ export class FrigateCardViewerGrid extends LitElement {
   }
 
   protected willUpdate(changedProps: PropertyValues): void {
-    if (
-      changedProps.has('view') &&
-      this.view?.isGrid() &&
-      this.view?.hasMultipleDisplayModes()
-    ) {
+    if (changedProps.has('view') && this._needsGrid()) {
       import('./media-grid.js');
     }
   }
 
+  protected _needsGrid(): boolean {
+    const cameraIDs = this.view?.queryResults?.getCameraIDs();
+    return (
+      !!this.view?.isGrid() &&
+      !!this.view?.supportsMultipleDisplayModes() &&
+      (cameraIDs?.size ?? 0) > 1
+    );
+  }
+
   protected render(): TemplateResult {
     const cameraIDs = this.view?.queryResults?.getCameraIDs();
-    if (!cameraIDs || !this.view?.isGrid() || !this.view?.hasMultipleDisplayModes()) {
+    if (!cameraIDs || !this._needsGrid()) {
       return this._renderCarousel();
     }