diff --git a/src/card.ts b/src/card.ts index 9326acfc..23f712f4 100644 --- a/src/card.ts +++ b/src/card.ts @@ -842,6 +842,26 @@ class FrigateCard extends LitElement { if (this._view?.view !== view.view) { 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; + } + } + this._view = view; this._generateConditionState(); }; diff --git a/src/components/gallery.ts b/src/components/gallery.ts index ff18a9c8..dd0b16ab 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -26,7 +26,7 @@ import { View } from '../view/view.js'; import { dispatchMessageEvent, renderProgressIndicator } from './message.js'; import './thumbnail.js'; import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js'; -import { createRef, Ref } from 'lit/directives/ref.js'; +import { createRef, ref, Ref } from 'lit/directives/ref.js'; import { MediaQueriesClassifier } from '../view/media-queries-classifier'; import { EventMediaQueries, RecordingMediaQueries } from '../view/media-queries'; import { EventQuery, MediaQuery, RecordingQuery } from '../camera-manager/types'; @@ -168,6 +168,7 @@ export class FrigateCardGalleryCore extends LitElement { protected _intersectionObserver: IntersectionObserver; protected _resizeObserver: ResizeObserver; protected _refLoader: Ref = createRef(); + protected _refSelected: Ref = createRef(); @state() protected _showExtensionLoader = true; @@ -327,10 +328,12 @@ export class FrigateCardGalleryCore extends LitElement { }); } + const selected = this.view?.queryResults?.getSelectedResult(); return html` ${this._media.map( (media, index) => html` { + // As a special case, if the view has changed and did not previously exist + // (i.e. first setting of it), we intentionally scroll the gallery to the + // selected element in that view (if any). + // See: https://github.com/dermotduffy/frigate-hass-card/issues/885 + if ( + // If this update cycle updated the view ... + changedProps.has('view') && + // ... and it wasn't set at all prior ... + !changedProps.get('view') && + // ... and there is a thumbnail rendered that is selected. + this._refSelected.value + ) { + this._refSelected.value.scrollIntoView(); + } + }); } /**