Set timeline to now not to most recent event.

2024-04-07 20:21:09 -07:00
parent 14a4f89726
commit f67620397f
22 changed files with 828 additions and 336 deletions
@@ -0,0 +1,224 @@
+import sub from 'date-fns/sub';
+import { LitElement, ReactiveController } from 'lit';
+import { ViewContext } from 'view';
+import { CameraManager } from '../../camera-manager/manager.js';
+import { FrigateCardMessageEventTarget } from '../../components/message.js';
+import { CardWideConfig, LiveConfig } from '../../config/types.js';
+import { MediaLoadedInfo, Message } from '../../types.js';
+import {
+  FrigateCardMediaLoadedEventTarget,
+  dispatchExistingMediaLoadedInfoAsEvent,
+} from '../../utils/media-info.js';
+import {
+  changeViewToRecentEventsForCameraAndDependents,
+  changeViewToRecentRecordingForCameraAndDependents,
+} from '../../utils/media-to-view.js';
+import { FrigateCardViewChangeEventTarget, View } from '../../view/view.js';
+
+interface LiveViewContext {
+  // A cameraID override (used for dependencies/substreams to force a different
+  // camera to be live rather than the camera selected in the view).
+  overrides?: Map<string, string>;
+
+  ptzVisible?: boolean;
+  fetchThumbnails?: boolean;
+}
+
+declare module 'view' {
+  interface ViewContext {
+    live?: LiveViewContext;
+  }
+}
+
+interface LastMediaLoadedInfo {
+  mediaLoadedInfo: MediaLoadedInfo;
+  source: EventTarget;
+}
+
+type LiveControllerHost = LitElement &
+  FrigateCardMediaLoadedEventTarget &
+  FrigateCardMessageEventTarget &
+  FrigateCardViewChangeEventTarget;
+
+export class LiveController implements ReactiveController {
+  protected _host: LiveControllerHost;
+
+  // Whether or not the live view is currently in the background (i.e. preloaded
+  // but not visible).
+  protected _inBackground = false;
+
+  // Intersection handler is used to detect when the live view flips between
+  // foreground and background (in preload mode).
+  protected _intersectionObserver: IntersectionObserver;
+
+  // Whether or not to allow updates.
+  protected _messageReceived = false;
+
+  // MediaLoadedInfo object and target from the underlying live media. In the
+  // case of pre-loading these may be propagated later (from the original
+  // source).
+  protected _lastMediaLoadedInfo: LastMediaLoadedInfo | null = null;
+
+  protected _renderEpoch = 0;
+
+  constructor(host: LiveControllerHost) {
+    this._host = host;
+    this._intersectionObserver = new IntersectionObserver(
+      this._intersectionHandler.bind(this),
+    );
+  }
+
+  public shouldUpdate(): boolean {
+    // Don't process updates if it's in the background and a message was
+    // received (otherwise an error message thrown by the background live
+    // component may continually be re-spammed hitting performance).
+    return !this._inBackground || !this._messageReceived;
+  }
+
+  public hostConnected(): void {
+    this._intersectionObserver.observe(this._host);
+
+    this._host.addEventListener('frigate-card:media:loaded', this._handleMediaLoaded);
+    this._host.addEventListener('frigate-card:message', this._handleMessage);
+    this._host.addEventListener('frigate-card:view:change', this._handleViewChange);
+  }
+
+  public hostDisconnected(): void {
+    this._intersectionObserver.disconnect();
+
+    this._host.removeEventListener('frigate-card:media:loaded', this._handleMediaLoaded);
+    this._host.removeEventListener('frigate-card:message', this._handleMessage);
+    this._host.removeEventListener('frigate-card:view:change', this._handleViewChange);
+  }
+
+  public clearMessageReceived(): void {
+    this._messageReceived = false;
+  }
+
+  public isInBackground(): boolean {
+    return this._inBackground;
+  }
+
+  public getRenderEpoch(): number {
+    return this._renderEpoch;
+  }
+
+  protected _handleMessage = (ev: CustomEvent<Message>): void => {
+    this._messageReceived = true;
+
+    if (this._inBackground) {
+      ev.stopPropagation();
+
+      // Force the whole DOM to re-render next time.
+      this._renderEpoch++;
+    }
+  };
+
+  protected _handleMediaLoaded = (ev: CustomEvent<MediaLoadedInfo>): void => {
+    this._lastMediaLoadedInfo = {
+      source: ev.composedPath()[0],
+      mediaLoadedInfo: ev.detail,
+    };
+
+    if (this._inBackground) {
+      ev.stopPropagation();
+    }
+  };
+
+  protected _handleViewChange = (ev: CustomEvent<View>): void => {
+    if (this._inBackground) {
+      ev.stopPropagation();
+    }
+  };
+
+  protected _intersectionHandler(entries: IntersectionObserverEntry[]): void {
+    const wasInBackground = this._inBackground;
+    this._inBackground = !entries.some((entry) => entry.isIntersecting);
+
+    if (!this._inBackground && !this._messageReceived && this._lastMediaLoadedInfo) {
+      // If this isn't being rendered in the background, the last render did not
+      // generate a message and there's a saved MediaInfo, dispatch it upwards.
+      dispatchExistingMediaLoadedInfoAsEvent(
+        // Specifically dispatch the event "where it came from", as otherwise
+        // the intermediate layers (e.g. media-carousel which controls the title
+        // popups) will not re-receive the events.
+        this._lastMediaLoadedInfo.source,
+        this._lastMediaLoadedInfo.mediaLoadedInfo,
+      );
+    }
+
+    if (wasInBackground !== this._inBackground) {
+      this._host.requestUpdate();
+    }
+  }
+
+  /**
+   * Fetch thumbnail media when a target is not already specified in the view
+   * (e.g. first time live is visited).
+   */
+  public async fetchMediaInBackgroundIfNecessary(
+    view: View,
+    cameraManager: CameraManager,
+    cardWideConfig: CardWideConfig,
+    overriddenLiveConfig: LiveConfig,
+  ): Promise<void> {
+    if (
+      this._inBackground ||
+      // Only fetch media if there isn't any already.
+      view.query ||
+      overriddenLiveConfig.controls.thumbnails.mode === 'none' ||
+      view.context?.live?.fetchThumbnails === false
+    ) {
+      return;
+    }
+
+    const mediaType = overriddenLiveConfig.controls.thumbnails.media_type;
+    const now = new Date();
+    const viewContext: ViewContext = {
+      // Force the window to start at the most recent time, not
+      // necessarily when the most recent event/recording was:
+      // https://github.com/dermotduffy/frigate-hass-card/issues/1301
+      timeline: {
+        window: {
+          start: sub(now, {
+            seconds: overriddenLiveConfig.controls.timeline.window_seconds,
+          }),
+          end: now,
+        },
+      },
+    };
+
+    /* istanbul ignore else: the else path cannot be reached -- @preserve */
+    if (mediaType === 'events') {
+      await changeViewToRecentEventsForCameraAndDependents(
+        this._host,
+        cameraManager,
+        cardWideConfig,
+        view,
+        {
+          allCameras: view.isGrid(),
+          targetView: view.view,
+          eventsMediaType: overriddenLiveConfig.controls.thumbnails.events_media_type,
+          select: 'latest',
+          // Force the window to start at the most recent time, not
+          // necessarily when the most recent event was:
+          // https://github.com/dermotduffy/frigate-hass-card/issues/1301
+          viewContext: viewContext,
+        },
+      );
+    } else if (mediaType === 'recordings') {
+      await changeViewToRecentRecordingForCameraAndDependents(
+        this._host,
+        cameraManager,
+        cardWideConfig,
+        view,
+        {
+          allCameras: view.isGrid(),
+          targetView: view.view,
+          select: 'latest',
+          viewContext: viewContext,
+        },
+      );
+    }
+  }
+}
@@ -9,7 +9,7 @@ import {
  setOrRemoveAttribute,
 } from '../utils/basic';
 import {
-  FrigateMediaLoadedEventTarget,
+  FrigateCardMediaLoadedEventTarget,
  dispatchExistingMediaLoadedInfoAsEvent,
  dispatchMediaUnloadedEvent,
 } from '../utils/media-info';
@@ -23,7 +23,7 @@ const MEDIA_GRID_DEFAULT_IDEAL_CELL_WIDTH = 600;
 const MEDIA_GRID_DEFAULT_SELECTED_WIDTH_FACTOR = 2.0;

 type GridID = string;
-type MediaGridChild = HTMLElement & FrigateMediaLoadedEventTarget;
+type MediaGridChild = HTMLElement & FrigateCardMediaLoadedEventTarget;
 type MediaGridContents = Map<GridID, MediaGridChild>;

 export interface MediaGridSelected {
@@ -19,6 +19,7 @@ import {
  getOverriddenConfig,
 } from '../../card-controller/conditions-manager.js';
 import { ReadonlyMicrophoneManager } from '../../card-controller/microphone-manager.js';
+import { LiveController } from '../../components-lib/live/live-controller.js';
 import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
 import {
  CameraConfig,
@@ -34,12 +35,7 @@ import basicBlockStyle from '../../scss/basic-block.scss';
 import liveCarouselStyle from '../../scss/live-carousel.scss';
 import liveGridStyle from '../../scss/live-grid.scss';
 import liveProviderStyle from '../../scss/live-provider.scss';
-import {
-  ExtendedHomeAssistant,
-  FrigateCardMediaPlayer,
-  MediaLoadedInfo,
-  Message,
-} from '../../types.js';
+import { ExtendedHomeAssistant, FrigateCardMediaPlayer } from '../../types.js';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
 import { aspectRatioToString, contentsChanged } from '../../utils/basic.js';
 import { CarouselSelected } from '../../utils/embla/carousel-controller.js';
@@ -48,10 +44,7 @@ import { AutoMediaActions } from '../../utils/embla/plugins/auto-media-actions/a
 import AutoMediaLoadedInfo from '../../utils/embla/plugins/auto-media-loaded-info/auto-media-loaded-info.js';
 import AutoSize from '../../utils/embla/plugins/auto-size/auto-size.js';
 import { getStateObjOrDispatchError } from '../../utils/get-state-obj.js';
-import {
-  dispatchExistingMediaLoadedInfoAsEvent,
-  dispatchMediaUnloadedEvent,
-} from '../../utils/media-info.js';
+import { dispatchMediaUnloadedEvent } from '../../utils/media-info.js';
 import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
 import { playMediaMutingIfNecessary } from '../../utils/media.js';
 import { dispatchViewContextChangeEvent, View } from '../../view/view.js';
@@ -67,24 +60,6 @@ import {
  getDefaultTitleConfigForView,
 } from '../title-control.js';

-interface LiveViewContext {
-  // A cameraID override (used for dependencies/substreams to force a different
-  // camera to be live rather than the camera selected in the view).
-  overrides?: Map<string, string>;
-  ptzVisible?: boolean;
-}
-
-declare module 'view' {
-  interface ViewContext {
-    live?: LiveViewContext;
-  }
-}
-
-interface LastMediaLoadedInfo {
-  mediaLoadedInfo: MediaLoadedInfo;
-  source: EventTarget;
-}
-
 const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';

@customElement('frigate-card-live')
@@ -101,7 +76,7 @@ export class FrigateCardLive extends LitElement {
  @property({ attribute: false })
  public nonOverriddenLiveConfig?: LiveConfig;

-  @property({ attribute: false })
+  @property({ attribute: false }>)
  public overriddenLiveConfig?: LiveConfig;

  @property({ attribute: false, hasChanged: contentsChanged })
@@ -119,76 +94,32 @@ export class FrigateCardLive extends LitElement {
  @property({ attribute: false })
  public triggeredCameraIDs?: Set<string>;

-  // Whether or not the live view is currently in the background (i.e. preloaded
-  // but not visible)
-  @state()
-  protected _inBackground?: boolean = false;
-
-  // Intersection handler is used to detect when the live view flips between
-  // foreground and background (in preload mode).
-  protected _intersectionObserver: IntersectionObserver;
-
-  // MediaLoadedInfo object and target from the underlying live object. In the
-  // case of pre-loading these may be propagated later (from the original
-  // source).
-  protected _lastMediaLoadedInfo: LastMediaLoadedInfo | null = null;
-
-  protected _messageReceivedPostRender = false;
-  protected _renderKey = 0;
-
-  constructor() {
-    super();
-    this._intersectionObserver = new IntersectionObserver(
-      this._intersectionHandler.bind(this),
-    );
-  }
-
-  /**
-   * Called when the live view intersects with the viewport.
-   * @param entries The IntersectionObserverEntry entries (should be only 1).
-   */
-  protected _intersectionHandler(entries: IntersectionObserverEntry[]): void {
-    this._inBackground = !entries.some((entry) => entry.isIntersecting);
-
-    if (
-      !this._inBackground &&
-      !this._messageReceivedPostRender &&
-      this._lastMediaLoadedInfo
-    ) {
-      // If this isn't being rendered in the background, the last render did not
-      // generate a message and there's a saved MediaInfo, dispatch it upwards.
-      dispatchExistingMediaLoadedInfoAsEvent(
-        // Specifically dispatch the event "where it came from", as otherwise
-        // the intermediate layers (e.g. media-carousel which controls the title
-        // popups) will not re-receive the events.
-        this._lastMediaLoadedInfo.source,
-        this._lastMediaLoadedInfo.mediaLoadedInfo,
-      );
-    }
-
-    // Trigger a re-render which may be necessary if the prior render resulted
-    // in a message.
-    if (this._messageReceivedPostRender && !this._inBackground) {
-      this.requestUpdate();
-    }
-  }
+  protected _controller = new LiveController(this);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  protected shouldUpdate(_changedProps: PropertyValues): boolean {
-    // Don't process updates if it's in the background and a message was
-    // received (otherwise an error message thrown by the background live
-    // component may continually be re-spammed hitting performance).
-    return !this._inBackground || !this._messageReceivedPostRender;
+    return this._controller.shouldUpdate();
  }

-  connectedCallback(): void {
-    this._intersectionObserver.observe(this);
-    super.connectedCallback();
-  }
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      ['view', 'cameraManager', 'cardWideConfig', 'overriddenLiveConfig'].some((prop) =>
+        changedProperties.has(prop),
+      ) &&
+      this.view &&
+      this.cameraManager &&
+      this.cardWideConfig &&
+      this.overriddenLiveConfig
+    ) {
+      this._controller.fetchMediaInBackgroundIfNecessary(
+        this.view,
+        this.cameraManager,
+        this.cardWideConfig,
+        this.overriddenLiveConfig,
+      );
+    }

-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._intersectionObserver.disconnect();
+    this._controller.clearMessageReceived();
  }

  protected render(): TemplateResult | void {
@@ -210,49 +141,25 @@ export class FrigateCardLive extends LitElement {
    // - The entire returned template is keyed to allow for the whole template
    //   to be re-rendered in certain circumstances (specifically: if a message
    //   is received when the card is in the background).
-    const result = html`${keyed(
-      this._renderKey,
+    return html`${keyed(
+      this._controller.getRenderEpoch(),
      html`
        <frigate-card-live-grid
          .hass=${this.hass}
          .view=${this.view}
          .nonOverriddenLiveConfig=${this.nonOverriddenLiveConfig}
          .overriddenLiveConfig=${this.overriddenLiveConfig}
-          .inBackground=${this._inBackground}
+          .inBackground=${this._controller.isInBackground()}
          .conditionsManagerEpoch=${this.conditionsManagerEpoch}
          .liveOverrides=${this.liveOverrides}
          .cardWideConfig=${this.cardWideConfig}
          .cameraManager=${this.cameraManager}
          .microphoneManager=${this.microphoneManager}
          .triggeredCameraIDs=${this.triggeredCameraIDs}
-          @frigate-card:message=${(ev: CustomEvent<Message>) => {
-            this._renderKey++;
-            this._messageReceivedPostRender = true;
-            if (this._inBackground) {
-              ev.stopPropagation();
-            }
-          }}
-          @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
-            this._lastMediaLoadedInfo = {
-              source: ev.composedPath()[0],
-              mediaLoadedInfo: ev.detail,
-            };
-            if (this._inBackground) {
-              ev.stopPropagation();
-            }
-          }}
-          @frigate-card:view:change=${(ev: CustomEvent<View>) => {
-            if (this._inBackground) {
-              ev.stopPropagation();
-            }
-          }}
        >
        </frigate-card-live-grid>
      `,
    )}`;
-
-    this._messageReceivedPostRender = false;
-    return result;
  }

  static get styles(): CSSResultGroup {
@@ -525,7 +432,7 @@ export class FrigateCardLiveCarousel extends LitElement {
        })
        // Don't yet fetch thumbnails (they will be fetched when the carousel
        // settles).
-        .mergeInContext({ thumbnails: { fetch: false } })
+        .mergeInContext({ live: { fetchThumbnails: false } })
        .dispatchChangeEvent(this);
    }
  }
@@ -673,7 +580,7 @@ export class FrigateCardLiveCarousel extends LitElement {
        @frigate-card:carousel:select=${this._setViewHandler.bind(this)}
        @frigate-card:carousel:settle=${() => {
          // Fetch the thumbnails after the carousel has settled.
-          dispatchViewContextChangeEvent(this, { thumbnails: { fetch: true } });
+          dispatchViewContextChangeEvent(this, { live: { fetchThumbnails: true } });
        }}
        @frigate-card:media:loaded=${() => {
          if (this._refTitleControl.value) {
@@ -200,6 +200,36 @@ export function dispatchFrigateCardErrorEvent(
  }
 }

+// Facilitates correct typing of event handlers.
+export interface FrigateCardMessageEventTarget extends EventTarget {
+  addEventListener(
+    event: 'frigate-card:message',
+    listener: (
+      this: FrigateCardMessageEventTarget,
+      ev: CustomEvent<Message>,
+    ) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  addEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  removeEventListener(
+    event: 'frigate-card:message',
+    listener: (
+      this: FrigateCardMessageEventTarget,
+      ev: CustomEvent<Message>,
+    ) => void,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
 declare global {
  interface HTMLElementTagNameMap {
    'frigate-card-progress-indicator': FrigateCardProgressIndicator;
@@ -14,31 +14,12 @@ import {
  ThumbnailsControlConfig,
 } from '../config/types.js';
 import basicBlockStyle from '../scss/basic-block.scss';
-import {
-  ClipsOrSnapshotsOrAll,
-  EventsOrRecordings,
-  ExtendedHomeAssistant,
-} from '../types.js';
+import { ExtendedHomeAssistant } from '../types.js';
 import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
-import {
-  changeViewToRecentEventsForCameraAndDependents,
-  changeViewToRecentRecordingForCameraAndDependents,
-} from '../utils/media-to-view';
 import { View } from '../view/view.js';
 import './surround-basic.js';
 import { ThumbnailCarouselTap } from './thumbnail-carousel.js';

-interface ThumbnailViewContext {
-  // Whether or not to fetch thumbnails.
-  fetch?: boolean;
-}
-
-declare module 'view' {
-  interface ViewContext {
-    thumbnails?: ThumbnailViewContext;
-  }
-}
-
@customElement('frigate-card-surround')
 export class FrigateCardSurround extends LitElement {
  @property({ attribute: false })
@@ -53,13 +34,6 @@ export class FrigateCardSurround extends LitElement {
  @property({ attribute: false, hasChanged: contentsChanged })
  public timelineConfig?: MiniTimelineControlConfig;

-  // If fetchMedia is not specified, no fetching is done.
-  @property({ attribute: false, hasChanged: contentsChanged })
-  public fetchMediaType?: EventsOrRecordings;
-
-  @property({ attribute: false, hasChanged: contentsChanged })
-  public fetchEventsMediaType?: ClipsOrSnapshotsOrAll;
-
  @property({ attribute: false })
  public cameraManager?: CameraManager;

@@ -68,56 +42,6 @@ export class FrigateCardSurround extends LitElement {

  protected _cameraIDsForTimeline?: Set<string>;

-  /**
-   * Fetch thumbnail media when a target is not specified in the view (e.g. for
-   * the live view).
-   * @param param Task parameters.
-   * @returns
-   */
-  protected async _fetchMedia(): Promise<void> {
-    if (
-      !this.cameraManager ||
-      !this.cardWideConfig ||
-      !this.fetchMediaType ||
-      !this.fetchEventsMediaType ||
-      !this.hass ||
-      !this.view ||
-      this.view.query ||
-      !this.thumbnailConfig ||
-      this.thumbnailConfig.mode === 'none' ||
-      !(this.view.context?.thumbnails?.fetch ?? true)
-    ) {
-      return;
-    }
-
-    if (this.fetchMediaType === 'events') {
-      await changeViewToRecentEventsForCameraAndDependents(
-        this,
-        this.cameraManager,
-        this.cardWideConfig,
-        this.view,
-        {
-          allCameras: this.view.isGrid(),
-          targetView: this.view.view,
-          eventsMediaType: this.fetchEventsMediaType,
-          select: 'latest',
-        },
-      );
-    } else if (this.fetchMediaType === 'recordings') {
-      await changeViewToRecentRecordingForCameraAndDependents(
-        this,
-        this.cameraManager,
-        this.cardWideConfig,
-        this.view,
-        {
-          allCameras: this.view.isGrid(),
-          targetView: this.view.view,
-          select: 'latest',
-        },
-      );
-    }
-  }
-
  /**
   * Determine if a drawer is being used.
   * @returns `true` if a drawer is used, `false` otherwise.
@@ -128,9 +52,6 @@ export class FrigateCardSurround extends LitElement {
    );
  }

-  /**
-   * Called before each update.
-   */
  protected willUpdate(changedProperties: PropertyValues): void {
    if (this.timelineConfig?.mode && this.timelineConfig.mode !== 'none') {
      import('./timeline-core.js');
@@ -147,15 +68,6 @@ export class FrigateCardSurround extends LitElement {
    ) {
      this._cameraIDsForTimeline = this._getCameraIDsForTimeline() ?? undefined;
    }
-
-    // Once the component will certainly update, dispatch a media request. Only
-    // do so if properties relevant to the request have changed (as per their
-    // hasChanged).
-    if (
-      ['view', 'fetch', 'browseMediaParams'].some((prop) => changedProperties.has(prop))
-    ) {
-      this._fetchMedia();
-    }
  }

  protected _getCameraIDsForTimeline(): Set<string> | null {
@@ -651,7 +651,14 @@ export class FrigateCardTimelineCore extends LitElement {
  }): Promise<void> {
    this._removeTargetBar();

-    if (!this._timeline || !this.view) {
+    if (
+      !this._timeline ||
+      !this.view ||
+      // When in mini mode, something else is in charge of the primary media
+      // population (e.g. the live view), in this case only act when the user
+      // themselves are interacting with the timeline.
+      (this.mini && !properties.byUser)
+    ) {
      return;
    }

@@ -163,12 +163,6 @@ export class FrigateCardViews extends LitElement {
      class="${classMap(overallClasses)}"
      .hass=${this.hass}
      .view=${this.view}
-      .fetchMediaType=${this.view?.is('live')
-        ? this.overriddenConfig.live.controls.thumbnails.media_type
-        : undefined}
-      .fetchEventsMediaType=${this.view?.is('live')
-        ? this.overriddenConfig.live.controls.thumbnails.events_media_type
-        : undefined}
      .thumbnailConfig=${!this.hide ? thumbnailConfig : undefined}
      .timelineConfig=${!this.hide ? miniTimelineConfig : undefined}
      .cameraManager=${this.cameraManager}
@@ -254,6 +248,10 @@ export class FrigateCardViews extends LitElement {
          : ``
      }
    </frigate-card-surround>`;
+
+    // .fetchMediaType=${this.view?.is('live') ? this.overriddenConfig.live.controls.thumbnails.media_type : undefined}
+    // .fetchEventsMediaType=${this.view?.is('live') ? this.overriddenConfig.live.controls.thumbnails.events_media_type : undefined}
+
  }

  static get styles(): CSSResultGroup {
@@ -8,7 +8,6 @@ import { z } from 'zod';

 export type ClipsOrSnapshots = 'clips' | 'snapshots';
 export type ClipsOrSnapshotsOrAll = 'clips' | 'snapshots' | 'all';
-export type EventsOrRecordings = 'events' | 'recordings';

 export class FrigateCardError extends Error {
  context?: unknown;
@@ -1,11 +1,11 @@
 import { EmblaCarouselType } from 'embla-carousel';
+import { LooseOptionsType } from 'embla-carousel/components/Options';
 import { CreatePluginType, LoosePluginType } from 'embla-carousel/components/Plugins';
 import { MediaLoadedInfo } from '../../../../types';
 import {
+  FrigateCardMediaLoadedEventTarget,
  dispatchExistingMediaLoadedInfoAsEvent,
-  FrigateMediaLoadedEventTarget,
 } from '../../../media-info';
-import { LooseOptionsType } from 'embla-carousel/components/Options';

 declare module 'embla-carousel/components/Plugins' {
  interface EmblaPluginsType {
@@ -17,7 +17,7 @@ type AutoMediaLoadedInfoType = CreatePluginType<LoosePluginType, LooseOptionsTyp

 function AutoMediaLoadedInfo(): AutoMediaLoadedInfoType {
  let emblaApi: EmblaCarouselType;
-  let slides: (HTMLElement & FrigateMediaLoadedEventTarget)[] = [];
+  let slides: (HTMLElement & FrigateCardMediaLoadedEventTarget)[] = [];
  const mediaLoadedInfo: MediaLoadedInfo[] = [];

  function init(emblaApiInstance: EmblaCarouselType): void {
@@ -112,19 +112,19 @@ export function isValidMediaLoadedInfo(info: MediaLoadedInfo): boolean {
  );
 }

-// Facilitates correct Typescript typing of media:loaded/unloaded event handlers.
-export interface FrigateMediaLoadedEventTarget extends EventTarget {
+// Facilitates correct typing of event handlers.
+export interface FrigateCardMediaLoadedEventTarget extends EventTarget {
  addEventListener(
    event: 'frigate-card:media:loaded',
    listener: (
-      this: FrigateMediaLoadedEventTarget,
+      this: FrigateCardMediaLoadedEventTarget,
      ev: CustomEvent<MediaLoadedInfo>,
    ) => void,
    options?: AddEventListenerOptions | boolean,
  ): void;
  addEventListener(
    event: 'frigate-card:media:unloaded',
-    listener: (this: FrigateMediaLoadedEventTarget, ev: CustomEvent) => void,
+    listener: (this: FrigateCardMediaLoadedEventTarget, ev: CustomEvent) => void,
    options?: AddEventListenerOptions | boolean,
  ): void;
  addEventListener(
@@ -135,14 +135,14 @@ export interface FrigateMediaLoadedEventTarget extends EventTarget {
  removeEventListener(
    event: 'frigate-card:media:loaded',
    listener: (
-      this: FrigateMediaLoadedEventTarget,
+      this: FrigateCardMediaLoadedEventTarget,
      ev: CustomEvent<MediaLoadedInfo>,
    ) => void,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(
    event: 'frigate-card:media:unloaded',
-    listener: (this: FrigateMediaLoadedEventTarget, ev: CustomEvent) => void,
+    listener: (this: FrigateCardMediaLoadedEventTarget, ev: CustomEvent) => void,
    options?: boolean | EventListenerOptions,
  ): void;
  removeEventListener(
@@ -28,6 +28,7 @@ export const changeViewToRecentEventsForCameraAndDependents = async (
    targetView?: FrigateCardView;
    select?: ResultSelectType;
    useCache?: boolean;
+    viewContext?: ViewContext;
  },
 ): Promise<void> => {
  const capabilitySearch: CapabilitySearchOptions =
@@ -61,6 +62,7 @@ export const changeViewToRecentEventsForCameraAndDependents = async (
        targetView: options?.targetView,
        select: options?.select,
        useCache: options?.useCache,
+        viewContext: options?.viewContext
      },
    )
  )?.dispatchChangeEvent(element);
@@ -103,6 +105,7 @@ export const changeViewToRecentRecordingForCameraAndDependents = async (
    targetView?: FrigateCardView;
    select?: ResultSelectType;
    useCache?: boolean;
+    viewContext?: ViewContext;
  },
 ): Promise<void> => {
  const cameraIDs = options?.allCameras
@@ -131,6 +134,7 @@ export const changeViewToRecentRecordingForCameraAndDependents = async (
        targetView: options?.targetView,
        select: options?.select,
        useCache: options?.useCache,
+        viewContext: options?.viewContext,
      },
    )
  )?.dispatchChangeEvent(element);
@@ -159,6 +163,7 @@ export const executeMediaQueryForView = async (
    targetTime?: Date;
    select?: ResultSelectType;
    useCache?: boolean;
+    viewContext?: ViewContext;
  },
 ): Promise<View | null> => {
  const queries = query.getQueries();
@@ -195,7 +200,8 @@ export const executeMediaQueryForView = async (
      view: options?.targetView,
      camera: cameraID,
    })
-    .mergeInContext(viewerContext);
+    .mergeInContext(options?.viewContext)
+    .mergeInContext(viewerContext)
 };

 export const executeMediaQueryForViewWithErrorDispatching = async (
@@ -209,6 +215,7 @@ export const executeMediaQueryForViewWithErrorDispatching = async (
    targetTime?: Date;
    select?: ResultSelectType;
    useCache?: boolean;
+    viewContext?: ViewContext;
  },
 ): Promise<View | null> => {
  try {
@@ -218,6 +225,7 @@ export const executeMediaQueryForViewWithErrorDispatching = async (
      targetTime: options?.targetTime,
      select: options?.select,
      useCache: options?.useCache,
+      viewContext: options?.viewContext,
    });
  } catch (e: unknown) {
    errorToConsole(e as Error);
@@ -269,6 +269,36 @@ export class View {
  }
 }

+// Facilitates correct typing of event handlers.
+export interface FrigateCardViewChangeEventTarget extends EventTarget {
+  addEventListener(
+    event: 'frigate-card:view:change',
+    listener: (
+      this: FrigateCardViewChangeEventTarget,
+      ev: CustomEvent<View>,
+    ) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  addEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+  removeEventListener(
+    event: 'frigate-card:view:change',
+    listener: (
+      this: FrigateCardViewChangeEventTarget,
+      ev: CustomEvent<View>,
+    ) => void,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
 /**
 * Dispatch an event to change the view context.
 * @param target The EventTarget to send the event from.