Fix bug that caused gallery to render wrong media type.

src/card.ts

@@ -93,6 +93,8 @@ import { FrigateCardInitializer } from './utils/initializer.js';
 import 'web-dialog';
 import { downloadMedia } from './utils/download.js';
 import { getActionsFromQueryString } from './utils/querystring.js';
+import { MediaQueries } from './view/media-queries.js';
+import { MediaQuery } from './camera-manager/types.js';
 
 /** A note on media callbacks:
  *
@@ -633,9 +635,7 @@ class FrigateCard extends LitElement {
       ...this._getConfig().menu.buttons.expand,
       type: 'custom:frigate-card-menu-icon',
       title: localize('config.menu.buttons.expand'),
-      tap_action: createFrigateCardCustomAction(
-        'expand',
-      ) as FrigateCardCustomAction,
+      tap_action: createFrigateCardCustomAction('expand') as FrigateCardCustomAction,
       style: this._expand ? this._getEmphasizedStyle() : {},
     });
 
@@ -860,24 +860,7 @@ class FrigateCard extends LitElement {
         this._resetMainScroll();
       }
 
-      // Special case: If the user is currently using the viewer, and then
-      // switches to the gallery (no matter how), make an attempt to keep the
-      // query/queryResults the same so the gallery can be used to click bath
-      // and forth to the viewer, and the selected media can be centered in the
-      // gallery. See the matching code in `updated()` in `gallery.ts`.
-      // See: https://github.com/dermotduffy/frigate-hass-card/issues/885
-      if (
-        this._view?.isViewerView() &&
-        view.isGalleryView() &&
-        (!view.query || !view.queryResults)
-      ) {
-        if (this._view?.query) {
-          view.query = this._view.query;
-        }
-        if (this._view?.queryResults) {
-          view.queryResults = this._view.queryResults;
-        }
-      }
+      View.adoptQueryIfAppropriate(view, this._view);
 
       this._view = view;
       this._generateConditionState();

src/view/view.ts

@@ -1,7 +1,8 @@
 import { ViewContext } from 'view';
-import { FrigateCardView } from '../types.js';
+import { ClipsOrSnapshots, FrigateCardView } from '../types.js';
 import { dispatchFrigateCardEvent } from '../utils/basic.js';
 import { MediaQueries } from './media-queries';
+import { MediaQueriesClassifier } from './media-queries-classifier.js';
 import { MediaQueriesResults } from './media-queries-results';
 
 interface ViewEvolveParameters {
@@ -60,6 +61,44 @@ export class View {
     );
   }
 
+  public static adoptQueryIfAppropriate(next: View, curr?: View): void {
+    // Special case: If the user is currently using the viewer, and then
+    // switches to the gallery we make an attempt to keep the query/queryResults
+    // the same so the gallery can be used to click back and forth to the
+    // viewer, and the selected media can be centered in the gallery. See the
+    // matching code in `updated()` in `gallery.ts`. We specifically must ensure
+    // that the new target media of the gallery (e.g. clips, snapshots or
+    // recordings) is equal to the queries that are currently used in the
+    // viewer.
+    // See: https://github.com/dermotduffy/frigate-hass-card/issues/885
+
+    let currentQueriesView: ClipsOrSnapshots | 'recordings' | null = null;
+    if (MediaQueriesClassifier.areEventQueries(curr?.query)) {
+      const queries = curr?.query.getQueries();
+      if (queries?.every((query) => query.hasClip)) {
+        currentQueriesView = 'clips';
+      } else if (queries?.every((query) => query.hasSnapshot)) {
+        currentQueriesView = 'snapshots';
+      }
+    } else if (MediaQueriesClassifier.areRecordingQueries(curr?.query)) {
+      currentQueriesView = 'recordings';
+    }
+
+    if (
+      curr?.isViewerView() &&
+      next.isGalleryView() &&
+      (!next.query || !next.queryResults) &&
+      next.view === currentQueriesView
+    ) {
+      if (curr.query) {
+        next.query = curr.query;
+      }
+      if (curr.queryResults) {
+        next.queryResults = curr.queryResults;
+      }
+    }
+  }
+
   /**
    * Clone a view.
    */