Reset the query on grid change in a smarter way.

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');
   }
 
   /**