Reset the query on grid change in a smarter way.

src/card.ts

@@ -48,12 +48,12 @@ import {
   CameraConfig,
   CardWideConfig,
   ExtendedHomeAssistant,
+  FRIGATE_CARD_VIEW_DEFAULT,
   FrigateCardConfig,
   frigateCardConfigSchema,
   FrigateCardCustomAction,
   FrigateCardError,
   FrigateCardView,
-  FRIGATE_CARD_VIEW_DEFAULT,
   MediaLoadedInfo,
   MenuButton,
   Message,
@@ -87,6 +87,7 @@ import { supportsFeature } from './utils/ha/update.js';
 import { FrigateCardInitializer } from './utils/initializer.js';
 import { MediaLoadedInfoController } from './utils/media-info-controller';
 import { isValidMediaLoadedInfo } from './utils/media-info.js';
+import { executeMediaQueryForView } from './utils/media-to-view';
 import { MenuButtonController } from './utils/menu-controller';
 import { MicrophoneController } from './utils/microphone';
 import { getActionsFromQueryString } from './utils/querystring.js';
@@ -1085,7 +1086,7 @@ class FrigateCard extends LitElement {
     // Note: This function needs to process (view-related) commands even when
     // _view has not yet been initialized (since it may be used to set a view
     // via the querystring).
-    if (!this._cameraManager) {
+    if (!this._cameraManager || !this._hass) {
       return;
     }
 
@@ -1241,19 +1242,33 @@ class FrigateCard extends LitElement {
         this._conditionController?.setState({
           displayMode: this._viewDisplayMode,
         });
-        // If the new mode is for all cameras, but the current query does not
-        // have a query for every cameraID, reset it.
-        const resetQuery =
-          frigateCardAction.mode === 'grid' &&
-          !this._view?.query?.hasQueriesForCameraIDs(
-            this._cameraManager.getStore().getVisibleCameraIDs(),
-          );
-        this._changeView({
-          view: this._view?.evolve({
-            displayMode: frigateCardAction.display_mode,
-            ...(resetQuery && { query: null, queryResults: null }),
-          }),
+
+        const newView = this._view?.evolve({
+          displayMode: frigateCardAction.display_mode,
         });
+
+        const generateNewQuery =
+          newView?.isGrid() &&
+          newView.query &&
+          (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
+          // query for more than one camera, reset the query results, change the
+          // existing query to refer to all cameras and execute it to fetch new
+          // results.
+          executeMediaQueryForView(
+            this,
+            this._hass,
+            this._cameraManager,
+            newView,
+            newView.query
+              .clone()
+              .setQueryCameraIDs(this._cameraManager.getStore().getVisibleCameraIDs()),
+          ).then((view) => view && this._changeView({ view: view }));
+        } else {
+          this._changeView({ view: newView });
+        }
         break;
       default:
         console.warn(`Frigate card received unknown card action: ${action}`);

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

src/utils/menu-controller.ts

@@ -394,7 +394,7 @@ export class MenuButtonController {
       });
     }
 
-    if (view.hasMultipleDisplayModes(visibleCameras.size)) {
+    if (view.supportsMultipleDisplayModes() && visibleCameras.size > 1) {
       const isGrid = view.isGrid();
       const action = createFrigateCardCustomAction('display_mode_select', {
         display_mode: isGrid ? 'single' : 'grid',

src/view/media-queries.ts

@@ -1,4 +1,6 @@
 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';
 
 export type MediaQueries = EventMediaQueries | RecordingMediaQueries;
@@ -12,7 +14,7 @@ class MediaQueriesBase<T extends MediaQuery> {
     }
   }
 
-  public clone(): MediaQueriesBase<T> {
+  public clone(): this {
     return cloneDeep(this);
   }
 
@@ -20,8 +22,32 @@ class MediaQueriesBase<T extends MediaQuery> {
     return this._queries;
   }
 
-  public setQueries(queries: T[]): void {
+  public setQueries(queries: T[]): this {
     this._queries = queries;
+    return this;
+  }
+
+  public getQueryCameraIDs(): Set<string> | null {
+    if (!this._queries) {
+      return null;
+    }
+    const cameraIDs: Set<string> = new Set();
+    this._queries.forEach((query) =>
+      [...query.cameraIDs].forEach((cameraID) => cameraIDs.add(cameraID)),
+    );
+    return cameraIDs;
+  }
+
+  public setQueryCameraIDs(cameraIDs: Set<string>): this {
+    if (!this._queries) {
+      return this;
+    }
+    const rewrittenQueries: T[] = [];
+    this._queries.forEach((query) =>
+      rewrittenQueries.push({ ...query, cameraIDs: cameraIDs }),
+    );
+    this._queries = uniqWith(rewrittenQueries, isEqual);
+    return this;
   }
 
   public hasQueriesForCameraIDs(cameraIDs: Set<string>) {
@@ -42,10 +68,6 @@ export class EventMediaQueries extends MediaQueriesBase<EventQuery> {
     }
     return this;
   }
-
-  public clone(): EventMediaQueries {
-    return cloneDeep(this);
-  }
 }
 
 export class RecordingMediaQueries extends MediaQueriesBase<RecordingQuery> {}

src/view/view.ts

@@ -231,11 +231,8 @@ export class View {
     return ['clip', 'snapshot', 'media', 'recording'].includes(this.view);
   }
 
-  public hasMultipleDisplayModes(cameraCount?: number): boolean {
-    return (
-      (this.is('live') && (cameraCount ?? 0) > 1) ||
-      (this.isViewerView() && (this.queryResults?.getCameraIDs().size ?? 0) > 1)
-    );
+  public supportsMultipleDisplayModes(): boolean {
+    return this.isViewerView() || this.is('live');
   }
 
   /**