Convert viewer to Lit component.

src/card.ts

@@ -29,35 +29,25 @@ import './editor';
 import './components/menu';
 import './components/message';
 import './components/gallery';
+import './components/viewer';
 
 import cardStyle from './scss/card.scss';
 
 import {
   MenuButton,
-  browseMediaSourceSchema,
   frigateCardConfigSchema,
-  resolvedMediaSchema,
   signedPathSchema,
 } from './types';
 import type {
-  BrowseMediaNeighbors,
+  BrowseMediaQueryParameters,
-  BrowseMediaSource,
   ExtendedHomeAssistant,
   FrigateCardConfig,
-  ResolvedMedia,
 } from './types';
 import { CARD_VERSION } from './const';
 import { localize } from './localize/localize';
-import dayjs from 'dayjs';
-import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat';
-
-import { ZodSchema, z } from 'zod';
-import { MessageBase } from 'home-assistant-js-websocket';
 
 import JSMpeg from '@cycjimmy/jsmpeg-player';
-
+import { getParseErrorKeys, homeAssistantWSRequest } from './common';
-// Load dayjs plugin(s).
-dayjs.extend(dayjs_custom_parse_format);
 
 /* eslint no-console: 0 */
 console.info(
@@ -206,11 +196,6 @@ export class FrigateCard extends LitElement {
     return buttons;
   }
 
-  protected _getParseErrorKeys(error: z.ZodError): string[] {
-    const errors = error.format();
-    return Object.keys(errors).filter((v) => !v.startsWith('_'));
-  }
-
   // Set the object configuration.
   public setConfig(inputConfig: FrigateCardConfig): void {
     if (!inputConfig) {
@@ -219,7 +204,7 @@ export class FrigateCard extends LitElement {
 
     const parseResult = frigateCardConfigSchema.safeParse(inputConfig);
     if (!parseResult.success) {
-      const keys = this._getParseErrorKeys(parseResult.error);
+      const keys = getParseErrorKeys(parseResult.error);
       throw new Error(localize('error.invalid_configuration') + ': ' + keys.join(', '));
     }
     const config = parseResult.data;
@@ -259,8 +244,16 @@ export class FrigateCard extends LitElement {
   }
 
   protected _changeViewHandler(e: CustomEvent<View>): void {
-    this._changeView(e.detail);
+    const view = e.detail;
+
+    if (view === undefined) {
+      this._view = new View({ view: this.config.view_default });
+    } else {
+      this._view = view;
+    }
+    this._resetJSMPEGIfNecessary();
   }
+
   // Update the card view.
   protected _changeView(view?: View | undefined): void {
     if (view === undefined) {
@@ -296,86 +289,6 @@ export class FrigateCard extends LitElement {
     return true;
   }
 
-  // Make a websocket request to Home Assistant.
-  protected async _makeWSRequest<T>(
-    schema: ZodSchema<T>,
-    request: MessageBase,
-  ): Promise<T | null> {
-    if (!this._hass) {
-      return null;
-    }
-
-    const response = await this._hass.callWS<T>(request);
-
-    if (!response) {
-      const error_message = `${localize('error.empty_response')}: ${JSON.stringify(
-        request,
-      )}`;
-      console.warn(error_message);
-      throw new Error(error_message);
-    }
-    const parseResult = schema.safeParse(response);
-    if (!parseResult.success) {
-      const keys = this._getParseErrorKeys(parseResult.error);
-      const error_message =
-        `${localize('error.invalid_response')}: ${JSON.stringify(request)}. ` +
-        localize('error.invalid_keys') +
-        `: '${keys}'`;
-      console.warn(error_message);
-      throw new Error(error_message);
-    }
-    return parseResult.data;
-  }
-
-  // Browse Frigate media with a media content id.
-  protected async _browseMedia(
-    media_content_id: string,
-  ): Promise<BrowseMediaSource | null> {
-    const request = {
-      type: 'media_source/browse_media',
-      media_content_id: media_content_id,
-    };
-    return this._makeWSRequest(browseMediaSourceSchema, request);
-  }
-
-  // Browse Frigate media with query parameters.
-  protected async _browseMediaQuery(
-    want_clips?: boolean,
-    before?: number,
-    after?: number,
-  ): Promise<BrowseMediaSource | null> {
-    return this._browseMedia(
-      // Defined in:
-      // https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
-      [
-        'media-source://frigate',
-        this.config.frigate_client_id,
-        'event-search',
-        want_clips ? 'clips' : 'snapshots',
-        '', // Name/Title to render (not necessary here)
-        after ? String(after) : '',
-        before ? String(before) : '',
-        this.config.frigate_camera_name,
-        this.config.label,
-        this.config.zone,
-      ].join('/'),
-    );
-  }
-
-  // Resolve Frigate media identifier to a real URL.
-  protected async _resolveMedia(
-    mediaSource: BrowseMediaSource | null,
-  ): Promise<ResolvedMedia | null> {
-    if (!mediaSource) {
-      return null;
-    }
-    const request = {
-      type: 'media_source/resolve_media',
-      media_content_id: mediaSource.media_content_id,
-    };
-    return this._makeWSRequest(resolvedMediaSchema, request);
-  }
-
   protected _menuActionHandler(name: string): void {
     switch (name) {
       case 'frigate':
@@ -398,23 +311,6 @@ export class FrigateCard extends LitElement {
     }
   }
 
-  protected _extractEventStartTimeFromBrowseMedia(
-    browseMedia: BrowseMediaSource,
-  ): number | null {
-    // Example: 2021-08-27 20:57:22 [10s, Person 76%]
-    const result = browseMedia.title.match(/^(?<iso_datetime>.+) \[/);
-    if (result && result.groups) {
-      const iso_datetime_str = result.groups['iso_datetime'];
-      if (iso_datetime_str) {
-        const iso_datetime = dayjs(iso_datetime_str, 'YYYY-MM-DD HH:mm:ss', true);
-        if (iso_datetime.isValid()) {
-          return iso_datetime.unix();
-        }
-      }
-    }
-    return null;
-  }
-
   // Get the Frigate UI url.
   protected _getFrigateURLFromContext(): string | null {
     if (!this.config.frigate_url) {
@@ -426,219 +322,6 @@ export class FrigateCard extends LitElement {
     return `${this.config.frigate_url}/events?camera=${this.config.frigate_camera_name}`;
   }
 
-  // From a BrowseMediaSource item extract the first true media item (i.e. a
-  // clip/snapshot, not a folder).
-  protected _getFirstTrueMediaChildIndex(
-    media: BrowseMediaSource | null,
-  ): number | null {
-    if (!media || !media.children) {
-      return null;
-    }
-    for (let i = 0; i < media.children.length; i++) {
-      if (!media.children[i].can_expand) {
-        return i;
-      }
-    }
-    return null;
-  }
-
-  // Get the previous and next real media items, given the index
-  protected _getMediaNeighbors(
-    parent: BrowseMediaSource,
-    index: number | null,
-  ): BrowseMediaNeighbors | null {
-    if (index == null || !parent.children) {
-      return null;
-    }
-
-    // Work backwards from the index to get the previous real media.
-    let prevIndex: number | null = null;
-    for (let i = index - 1; i >= 0; i--) {
-      const media = parent.children[i];
-      if (media && !media.can_expand) {
-        prevIndex = i;
-        break;
-      }
-    }
-
-    // Work forwards from the index to get the next real media.
-    let nextIndex: number | null = null;
-    for (let i = index + 1; i < parent.children.length; i++) {
-      const media = parent.children[i];
-      if (media && !media.can_expand) {
-        nextIndex = i;
-        break;
-      }
-    }
-
-    return {
-      previousIndex: prevIndex,
-      previous: prevIndex != null ? parent.children[prevIndex] : null,
-      nextIndex: nextIndex,
-      next: nextIndex != null ? parent.children[nextIndex] : null,
-    };
-  }
-
-  // Render the next/previous controls.
-  protected _renderNextPreviousControls(
-    previous: boolean,
-    parent?: BrowseMediaSource,
-    targetChildIndex?: number,
-    neighbor?: BrowseMediaSource,
-  ): TemplateResult {
-    if (!neighbor || this.config.controls?.nextprev === 'none') {
-      return html``;
-    }
-
-    const classes = {
-      'frigate-media-controls': true,
-      previous: previous,
-      next: !previous,
-      thumbnails:
-        !this.config.controls?.nextprev ||
-        this.config.controls?.nextprev === 'thumbnails',
-      chevrons: this.config.controls?.nextprev === 'chevrons',
-      button: this.config.controls?.nextprev === 'chevrons',
-    };
-
-    const clickChangeView = () => {
-      this._view = new View({
-        view: this._view.view,
-        target: parent,
-        childIndex: targetChildIndex,
-        previous: this._view,
-      });
-    };
-
-    if (this.config.controls?.nextprev == 'chevrons') {
-      return html` <ha-icon-button
-        icon=${previous ? 'mdi:chevron-left' : 'mdi:chevron-right'}
-        class="${classMap(classes)}"
-        title=${neighbor.title}
-        @click=${clickChangeView}
-      ></ha-icon-button>`;
-    }
-
-    if (!neighbor.thumbnail) {
-      return html``;
-    }
-    return html`<img
-      src="${neighbor.thumbnail}"
-      class="${classMap(classes)}"
-      title="${neighbor.title}"
-      @click=${clickChangeView}
-    />`;
-  }
-
-  // Render the view for media.
-  protected async _renderViewer(): Promise<TemplateResult> {
-    let autoplay = true;
-
-    let parent: BrowseMediaSource | null = null;
-    let childIndex: number | null = null;
-    let mediaToRender: BrowseMediaSource | null = null;
-
-    if (this._view.target) {
-      parent = this._view.target;
-      childIndex = this._view.childIndex ?? null;
-      mediaToRender = this._view.media ?? null;
-    } else {
-      try {
-        parent = await this._browseMediaQuery(this._view.is('clip'));
-      } catch (e: any) {
-        return renderErrorMessage(e.message);
-      }
-      childIndex = this._getFirstTrueMediaChildIndex(parent);
-      if (!parent || !parent.children || childIndex == null) {
-        return renderMessage(
-          this._view.is('clip')
-            ? localize('common.no_clip')
-            : localize('common.no_snapshot'),
-          this._view.is('clip') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
-        );
-      }
-      mediaToRender = parent.children[childIndex];
-
-      // In this block, no clip has been manually selected, so this is loading
-      // the most recent clip on card load. In this mode, autoplay of the clip
-      // may be disabled by configuration. If does not make sense to disable
-      // autoplay when the user has explicitly picked an event to play in the
-      // gallery.
-      autoplay = this.config.autoplay_clip;
-    }
-    const resolvedMedia = await this._resolveMedia(mediaToRender);
-    if (!mediaToRender || !resolvedMedia) {
-      // Home Assistant could not resolve media item.
-      return renderErrorMessage(localize('error.could_not_resolve'));
-    }
-
-    const neighbors = this._getMediaNeighbors(parent, childIndex);
-
-    return html`
-      ${this._renderNextPreviousControls(
-        true,
-        parent,
-        neighbors?.previousIndex ?? undefined,
-        neighbors?.previous ?? undefined,
-      )}
-      ${this._view.is('clip')
-        ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
-          ? html`<ha-hls-player
-              class="media"
-              .hass=${this._hass}
-              .url=${resolvedMedia.url}
-              title="${mediaToRender.title}"
-              muted
-              controls
-              playsinline
-              allow-exoplayer
-              ?autoplay="${autoplay}"
-            >
-            </ha-hls-player>`
-          : html`<video
-              class="media"
-              title="${mediaToRender.title}"
-              muted
-              controls
-              playsinline
-              @play=${() => {
-                this._clipPlaying = true;
-              }}
-              @pause=${() => {
-                this._clipPlaying = false;
-              }}
-              ?autoplay="${autoplay}"
-            >
-              <source src="${resolvedMedia.url}" type="${resolvedMedia.mime_type}" />
-            </video>`
-        : html`<img
-            src=${resolvedMedia.url}
-            class="media"
-            title="${mediaToRender.title}"
-            @click=${() => {
-              // Get clips potentially related to this snapshot.
-              this._findRelatedClips(mediaToRender).then((relatedClip) => {
-                if (relatedClip) {
-                  this._changeView(
-                    new View({
-                      view: 'clip',
-                      target: relatedClip,
-                      previous: this._view,
-                    }),
-                  );
-                }
-              });
-            }}
-          />`}
-      ${this._renderNextPreviousControls(
-        false,
-        parent,
-        neighbors?.nextIndex ?? undefined,
-        neighbors?.next ?? undefined,
-      )}
-    `;
-  }
-
   public updated(): void {
     this.updateComplete.then(() => {
       // DOM elements are not always present until after updateComplete promise
@@ -668,36 +351,6 @@ export class FrigateCard extends LitElement {
     });
   }
 
-  // Get a clip at the same time as a snapshot.
-  protected async _findRelatedClips(
-    snapshot: BrowseMediaSource | null,
-  ): Promise<BrowseMediaSource | null> {
-    if (!snapshot) {
-      return null;
-    }
-
-    const startTime = this._extractEventStartTimeFromBrowseMedia(snapshot);
-    if (startTime) {
-      try {
-        // Fetch clips within the same second (same camera/zone/label, etc).
-        const clipsAtSameTime = await this._browseMediaQuery(
-          true,
-          startTime + 1,
-          startTime,
-        );
-        if (clipsAtSameTime) {
-          const index = this._getFirstTrueMediaChildIndex(clipsAtSameTime);
-          if (index != null && clipsAtSameTime.children?.length) {
-            return clipsAtSameTime.children[index];
-          }
-        }
-      } catch (e: any) {
-        // Pass. This is best effort.
-      }
-    }
-    return null;
-  }
-
   protected async _getJSMPEGURL(): Promise<string | null> {
     if (!this._hass) {
       return null;
@@ -712,7 +365,7 @@ export class FrigateCard extends LitElement {
     // Sign the path so it includes an authSig parameter.
     let response;
     try {
-      response = await this._makeWSRequest(signedPathSchema, request);
+      response = await homeAssistantWSRequest(this._hass, signedPathSchema, request);
     } catch (err) {
       console.warn(err);
       return null;
@@ -818,6 +471,19 @@ export class FrigateCard extends LitElement {
     `;
   }
 
+  protected _getBrowseMediaQueryParameters(): BrowseMediaQueryParameters {
+    return {
+      mediaType: this._view.view == 'clips' ? 'clips' : 'snapshots',
+      clientId: this.config.frigate_client_id,
+      // frigate_camera_name cannot be null, it will be set to a default value
+      // in setConfig if not specified in the configuration.
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      cameraName: this.config.frigate_camera_name!,
+      label: this.config.label,
+      zone: this.config.zone,
+    };
+  }
+
   // Render the call (master render method).
   protected render(): TemplateResult | void {
     if (this.config.show_warning) {
@@ -833,17 +499,22 @@ export class FrigateCard extends LitElement {
           ${this._view.is('clips') || this._view.is('snapshots')
             ? html` <frigate-card-gallery
                 .hass=${this._hass}
-                .cameraName=${this.config.frigate_camera_name}
-                .clientId=${this.config.frigate_client_id}
-                .label=${this.config.label}
-                .zone=${this.config.zone}
                 .view=${this._view}
+                .browseMediaQueryParameters=${this._getBrowseMediaQueryParameters()}
                 @frigate-card:change-view=${this._changeViewHandler}
               >
               </frigate-card-gallery>`
             : ``}
           ${this._view.is('clip') || this._view.is('snapshot')
-            ? until(this._renderViewer(), renderProgressIndicator())
+            ? html` <frigate-card-viewer
+                .hass=${this._hass}
+                .view=${this._view}
+                .browseMediaQueryParameters=${this._getBrowseMediaQueryParameters()}
+                .nextPreviousControlStyle=${this.config.controls?.nextprev ?? 'thumbnails'}
+                .autoplayClip=${this.config.autoplay_clip}
+                @frigate-card:change-view=${this._changeViewHandler}
+              >
+              </frigate-card-viewer>`
             : ``}
           ${this._view.is('live')
             ? until(this._renderLiveViewer(), renderProgressIndicator())

src/common.ts

@@ -2,7 +2,12 @@ import { ZodSchema, z } from 'zod';
 import { MessageBase } from 'home-assistant-js-websocket';
 import { HomeAssistant } from 'custom-card-helpers';
 import { localize } from './localize/localize';
-import { BrowseMediaSource, browseMediaSourceSchema, ExtendedHomeAssistant } from './types';
+import type {
+  BrowseMediaQueryParameters,
+  BrowseMediaSource,
+  ExtendedHomeAssistant,
+} from './types';
+import { browseMediaSourceSchema } from './types';
 
 export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
   const errors = error.format();
@@ -54,7 +59,7 @@ export function getFirstTrueMediaChildIndex(
 
 // Browse Frigate media with a media content id.
 export async function browseMedia(
-  hass: HomeAssistant & ExtendedHomeAssistant | null,
+  hass: (HomeAssistant & ExtendedHomeAssistant) | null,
   media_content_id: string,
 ): Promise<BrowseMediaSource | null> {
   if (!hass) {
@@ -67,21 +72,13 @@ export async function browseMedia(
   return homeAssistantWSRequest(hass, browseMediaSourceSchema, request);
 }
 
-interface BrowseMediaQueryParameters {
-  hass: HomeAssistant & ExtendedHomeAssistant,
-  mediaType: "clips" | "snapshots",
-  clientId: string,
-  cameraName: string,
-  label?: string,
-  zone?: string,
-  before?: number,
-  after?: number,
-}
-
 // Browse Frigate media with query parameters.
-export async function browseMediaQuery(params: BrowseMediaQueryParameters): Promise<BrowseMediaSource | null> {
+export async function browseMediaQuery(
+  hass: HomeAssistant & ExtendedHomeAssistant,
+  params: BrowseMediaQueryParameters,
+): Promise<BrowseMediaSource | null> {
   return browseMedia(
-    params.hass,
+    hass,
     // Defined in:
     // https://github.com/blakeblackshear/frigate-hass-integration/blob/master/custom_components/frigate/media_source.py
     [
@@ -98,3 +95,21 @@ export async function browseMediaQuery(params: BrowseMediaQueryParameters): Prom
     ].join('/'),
   );
 }
+
+export function dispatchPlayEvent(node: HTMLElement): void {
+  node.dispatchEvent(
+    new CustomEvent<void>('frigate-card:play', {
+      bubbles: true,
+      composed: true,
+    }),
+  );
+}
+
+export function dispatchPauseEvent(node: HTMLElement): void {
+  node.dispatchEvent(
+    new CustomEvent<void>('frigate-card:pause', {
+      bubbles: true,
+      composed: true,
+    }),
+  );
+}

src/components/gallery.ts

@@ -9,7 +9,11 @@ import { HomeAssistant } from 'custom-card-helpers';
 
 import galleryStyle from '../scss/gallery.scss';
 
-import type { ExtendedHomeAssistant } from '../types';
+import type {
+  BrowseMediaSource,
+  BrowseMediaQueryParameters,
+  ExtendedHomeAssistant,
+} from '../types';
 import { localize } from '../localize/localize';
 
 import { browseMedia, browseMediaQuery, getFirstTrueMediaChildIndex } from '../common';
@@ -18,22 +22,13 @@ import { View } from '../view';
 @customElement('frigate-card-gallery')
 export class FrigateCardGallery extends LitElement {
   @property({ attribute: false })
-  protected hass: (HomeAssistant & ExtendedHomeAssistant) | null = null;
+  protected hass!: HomeAssistant & ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected cameraName: string | null = null;
+  protected view!: View;
 
   @property({ attribute: false })
-  protected clientId: string | null = null;
+  protected browseMediaQueryParameters!: BrowseMediaQueryParameters;
-
-  @property({ attribute: false })
-  protected view: View | null = null;
-
-  @property({ attribute: false })
-  protected label?: string;
-
-  @property({ attribute: false })
-  protected zone?: string;
 
   protected _getMediaType(): 'clips' | 'snapshots' {
     return this.view?.view == 'clips' ? 'clips' : 'snapshots';
@@ -44,29 +39,18 @@ export class FrigateCardGallery extends LitElement {
   }
 
   protected async _renderEvents(): Promise<TemplateResult> {
-    if (!this.hass || !this.clientId || !this.cameraName || !this.view) {
+    let parent: BrowseMediaSource | null;
-      return renderErrorMessage(localize('error.internal'));
-    }
-
-    let parent;
     try {
       if (this.view.target) {
         parent = await browseMedia(this.hass, this.view.target.media_content_id);
       } else {
-        parent = await browseMediaQuery({
+        parent = await browseMediaQuery(this.hass, this.browseMediaQueryParameters);
-          hass: this.hass,
-          clientId: this.clientId,
-          mediaType: this._getMediaType(),
-          cameraName: this.cameraName,
-          label: this.label,
-          zone: this.zone,
-        });
       }
     } catch (e: any) {
       return renderErrorMessage(e.message);
     }
 
-    if (getFirstTrueMediaChildIndex(parent) == null) {
+    if (!parent || !parent.children || getFirstTrueMediaChildIndex(parent) == null) {
       return renderMessage(
         this._getMediaType() == 'clips'
           ? localize('common.no_clips')
@@ -83,7 +67,7 @@ export class FrigateCardGallery extends LitElement {
                 <ha-card
                   @click=${() => {
                     if (this.view && this.view.previous) {
-                      this.view.previous.generateChangeEvent(this);
+                      this.view.previous.dispatchChangeEvent(this);
                     }
                   }}
                   outlined=""
@@ -107,7 +91,7 @@ export class FrigateCardGallery extends LitElement {
                           view: this._getMediaType(),
                           target: child,
                           previous: this.view ?? undefined,
-                        }).generateChangeEvent(this);
+                        }).dispatchChangeEvent(this);
                       }}
                       outlined=""
                       class="frigate-card-gallery-folder"
@@ -115,19 +99,21 @@ export class FrigateCardGallery extends LitElement {
                       <div>${child.title}</div>
                     </ha-card>
                   </div>`
-                : html`<img
+                : child.thumbnail
+                ? html`<img
                     title="${child.title}"
                     class="mdc-image-list__image"
                     src="${child.thumbnail}"
                     @click=${() => {
                       new View({
                         view: this._getMediaType() == 'clips' ? 'clip' : 'snapshot',
-                        target: parent,
+                        target: parent ?? undefined,
                         childIndex: index,
                         previous: this.view ?? undefined,
-                      }).generateChangeEvent(this);
+                      }).dispatchChangeEvent(this);
                     }}
-                  />`}
+                  />`
+                : ``}
             </div>
           </li>`,
       )}

src/components/next-prev-control.ts

@@ -0,0 +1,74 @@
+ import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { classMap } from 'lit/directives/class-map';
+import controlStyle from '../scss/next-previous-control.scss';
+import { BrowseMediaSource, NextPreviousControlStyle } from '../types';
+import { View } from '../view';
+
+@customElement('frigate-card-next-previous-control')
+export class FrigateCardMessage extends LitElement {
+  @property({ attribute: false })
+  protected control!: "next" | "previous";
+
+  @property({ attribute: false })
+  protected controlStyle!: NextPreviousControlStyle;
+  
+  @property({ attribute: false })
+  protected parent!: BrowseMediaSource;
+
+  @property({ attribute: false })
+  protected childIndex!: number;
+
+  @property({ attribute: false })
+  protected view!: View;
+
+  protected _changeView(): void {
+    new View({
+      view: this.view.view,
+      target: this.parent,
+      childIndex: this.childIndex,
+    }).dispatchChangeEvent(this);
+  }
+
+  protected render() : TemplateResult {
+    if (this.controlStyle == 'none' || !this.parent.children) {
+      return html``;
+    }
+    const target = this.parent.children[this.childIndex];
+    if (!target) {
+      return html``;
+    }
+
+    const classes = {
+      controls: true,
+      previous: this.control == "previous",
+      next: this.control == "next",
+      thumbnails: this.controlStyle == "thumbnails",
+      chevrons: this.controlStyle == "chevrons",
+      button: this.controlStyle == "chevrons",
+    };
+
+    if (this.controlStyle == "chevrons") {
+      return html` <ha-icon-button
+        icon=${this.control == "previous" ? 'mdi:chevron-left' : 'mdi:chevron-right'}
+        class="${classMap(classes)}"
+        title=${target.title}
+        @click=${this._changeView}
+      ></ha-icon-button>`;
+    }
+
+    if (!target.thumbnail) {
+      return html``;
+    }
+    return html`<img
+      src="${target.thumbnail}"
+      class="${classMap(classes)}"
+      title="${target.title}"
+      @click=${this._changeView}
+    />`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(controlStyle);
+  }
+}

src/components/viewer.ts

@@ -0,0 +1,268 @@
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { until } from 'lit/directives/until.js';
+import { View } from '../view';
+import {
+  renderMessage,
+  renderErrorMessage,
+  renderProgressIndicator,
+} from '../components/message';
+import { HomeAssistant } from 'custom-card-helpers';
+
+import viewerStyle from '../scss/viewer.scss';
+
+import { resolvedMediaSchema } from '../types';
+import type {
+  BrowseMediaNeighbors,
+  BrowseMediaQueryParameters,
+  BrowseMediaSource,
+  ExtendedHomeAssistant,
+  NextPreviousControlStyle,
+  ResolvedMedia,
+} from '../types';
+import { localize } from '../localize/localize';
+import {
+  browseMediaQuery,
+  dispatchPauseEvent,
+  dispatchPlayEvent,
+  getFirstTrueMediaChildIndex,
+  homeAssistantWSRequest,
+} from '../common';
+
+import dayjs from 'dayjs';
+import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat';
+
+import './next-prev-control';
+
+// Load dayjs plugin(s).
+dayjs.extend(dayjs_custom_parse_format);
+
+@customElement('frigate-card-viewer')
+export class FrigateCardViewer extends LitElement {
+  @property({ attribute: false })
+  protected hass!: HomeAssistant & ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  protected view!: View;
+
+  @property({ attribute: false })
+  protected browseMediaQueryParameters!: BrowseMediaQueryParameters;
+
+  @property({ attribute: false })
+  protected nextPreviousControlStyle!: NextPreviousControlStyle;
+
+  @property({ attribute: false })
+  protected autoplayClip!: boolean;
+
+  protected async _resolveMedia(
+    mediaSource: BrowseMediaSource | null,
+  ): Promise<ResolvedMedia | null> {
+    if (!mediaSource) {
+      return null;
+    }
+    const request = {
+      type: 'media_source/resolve_media',
+      media_content_id: mediaSource.media_content_id,
+    };
+    return homeAssistantWSRequest(this.hass, resolvedMediaSchema, request);
+  }
+
+  protected _extractEventStartTimeFromBrowseMedia(
+    browseMedia: BrowseMediaSource,
+  ): number | null {
+    // Example: 2021-08-27 20:57:22 [10s, Person 76%]
+    const result = browseMedia.title.match(/^(?<iso_datetime>.+) \[/);
+    if (result && result.groups) {
+      const iso_datetime_str = result.groups['iso_datetime'];
+      if (iso_datetime_str) {
+        const iso_datetime = dayjs(iso_datetime_str, 'YYYY-MM-DD HH:mm:ss', true);
+        if (iso_datetime.isValid()) {
+          return iso_datetime.unix();
+        }
+      }
+    }
+    return null;
+  }
+
+  // Get the previous and next real media items, given the index
+  protected _getMediaNeighbors(
+    parent: BrowseMediaSource,
+    index: number | null,
+  ): BrowseMediaNeighbors | null {
+    if (index == null || !parent.children) {
+      return null;
+    }
+
+    // Work backwards from the index to get the previous real media.
+    let prevIndex: number | null = null;
+    for (let i = index - 1; i >= 0; i--) {
+      const media = parent.children[i];
+      if (media && !media.can_expand) {
+        prevIndex = i;
+        break;
+      }
+    }
+
+    // Work forwards from the index to get the next real media.
+    let nextIndex: number | null = null;
+    for (let i = index + 1; i < parent.children.length; i++) {
+      const media = parent.children[i];
+      if (media && !media.can_expand) {
+        nextIndex = i;
+        break;
+      }
+    }
+
+    return {
+      previousIndex: prevIndex,
+      previous: prevIndex != null ? parent.children[prevIndex] : null,
+      nextIndex: nextIndex,
+      next: nextIndex != null ? parent.children[nextIndex] : null,
+    };
+  }
+
+  // Get a clip at the same time as a snapshot.
+  protected async _findRelatedClips(
+    snapshot: BrowseMediaSource | null,
+  ): Promise<BrowseMediaSource | null> {
+    if (!snapshot) {
+      return null;
+    }
+
+    const startTime = this._extractEventStartTimeFromBrowseMedia(snapshot);
+    if (startTime) {
+      try {
+        // Fetch clips within the same second (same camera/zone/label, etc).
+        const clipsAtSameTime = await browseMediaQuery(this.hass, {
+          ...this.browseMediaQueryParameters,
+          before: startTime + 1,
+          after: startTime,
+        });
+        if (clipsAtSameTime) {
+          const index = getFirstTrueMediaChildIndex(clipsAtSameTime);
+          if (index != null && clipsAtSameTime.children?.length) {
+            return clipsAtSameTime.children[index];
+          }
+        }
+      } catch (e: any) {
+        // Pass. This is best effort.
+      }
+    }
+    return null;
+  }
+
+  protected render(): TemplateResult | void {
+    return html`${until(this._renderViewer(), renderProgressIndicator())}`;
+  }
+
+  protected async _renderViewer(): Promise<TemplateResult> {
+    let autoplay = true;
+
+    let parent: BrowseMediaSource | null = null;
+    let childIndex: number | null = null;
+    let mediaToRender: BrowseMediaSource | null = null;
+
+    if (this.view.target) {
+      parent = this.view.target;
+      childIndex = this.view.childIndex ?? null;
+      mediaToRender = this.view.media ?? null;
+    } else {
+      try {
+        parent = await browseMediaQuery(this.hass, this.browseMediaQueryParameters);
+      } catch (e) {
+        return renderErrorMessage((e as Error).message);
+      }
+      childIndex = getFirstTrueMediaChildIndex(parent);
+      if (!parent || !parent.children || childIndex == null) {
+        return renderMessage(
+          this.view.is('clip')
+            ? localize('common.no_clip')
+            : localize('common.no_snapshot'),
+          this.view.is('clip') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
+        );
+      }
+      mediaToRender = parent.children[childIndex];
+
+      // In this block, no clip has been manually selected, so this is loading
+      // the most recent clip on card load. In this mode, autoplay of the clip
+      // may be disabled by configuration. If does not make sense to disable
+      // autoplay when the user has explicitly picked an event to play in the
+      // gallery.
+      autoplay = this.autoplayClip;
+    }
+    const resolvedMedia = await this._resolveMedia(mediaToRender);
+    if (!mediaToRender || !resolvedMedia) {
+      // Home Assistant could not resolve media item.
+      return renderErrorMessage(localize('error.could_not_resolve'));
+    }
+
+    const neighbors = this._getMediaNeighbors(parent, childIndex);
+
+    return html`
+      ${neighbors?.previousIndex != null
+        ? html`<frigate-card-next-previous-control
+            .control=${'previous'}
+            .controlStyle=${this.nextPreviousControlStyle}
+            .parent=${parent}
+            .childIndex=${neighbors.previousIndex}
+            .view=${this.view}
+          ></frigate-card-next-previous-control>`
+        : ``}
+      ${this.view.is('clip')
+        ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
+          ? html`<ha-hls-player
+              class="media"
+              .hass=${this.hass}
+              .url=${resolvedMedia.url}
+              title="${mediaToRender.title}"
+              muted
+              controls
+              playsinline
+              allow-exoplayer
+              ?autoplay="${autoplay}"
+            >
+            </ha-hls-player>`
+          : html`<video
+              class="media"
+              title="${mediaToRender.title}"
+              muted
+              controls
+              playsinline
+              ?autoplay="${autoplay}"
+              @play=${() => dispatchPlayEvent(this)}
+              @pause=${() => dispatchPauseEvent(this)}
+            >
+              <source src="${resolvedMedia.url}" type="${resolvedMedia.mime_type}" />
+            </video>`
+        : html`<img
+            src=${resolvedMedia.url}
+            class="media"
+            title="${mediaToRender.title}"
+            @click=${() => {
+              // Get clips potentially related to this snapshot.
+              this._findRelatedClips(mediaToRender).then((relatedClip) => {
+                if (relatedClip) {
+                  new View({
+                    view: 'clip',
+                    target: relatedClip,
+                  }).dispatchChangeEvent(this);
+                }
+              });
+            }}
+          />`}
+      ${neighbors?.nextIndex != null
+        ? html`<frigate-card-next-previous-control
+            .control=${'next'}
+            .controlStyle=${this.nextPreviousControlStyle}
+            .parent=${parent}
+            .childIndex=${neighbors.nextIndex}
+            .view=${this.view}
+          ></frigate-card-next-previous-control>`
+        : ``}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(viewerStyle);
+  }
+}

src/scss/card.scss

@@ -50,8 +50,6 @@
   padding: 10%;
 }
 
-
-
 video, img {
   display: block;
 }
@@ -80,41 +78,3 @@ webrtc-camera ha-card {
   border-radius: 0px;
   background-color: var(--secondary-background-color, black);
 }
-
-.frigate-media-controls {
-  position: absolute;
-  z-index: 1;
-  overflow: hidden;
-}
-.frigate-media-controls.previous {
-  left: 45px;
-}
-.frigate-media-controls.next {
-  right: 45px;  
-}
-
-.frigate-media-controls.chevrons {
-  top: calc(50% - (40px / 2));
-}
-
-.frigate-media-controls.thumbnails {
-  border-radius: 50%;
-  height: 48px;
-  top: calc(50% - (48px / 2));
-  box-shadow: 0px 0px 30px 1px black;
-  transition: all .2s ease;
-  opacity: 0.8;
-}
-.frigate-media-controls.thumbnails:hover {
-  opacity: 1 !important;
-  height: 72px;
-  top: calc(50% - (72px / 2));
-}
-
-.frigate-media-controls.previous.thumbnails:hover {
-  left: 33px;
-}
-
-.frigate-media-controls.next.thumbnails:hover {
-  right: 33px;
-}

src/scss/common.scss

@@ -13,4 +13,8 @@ ha-icon-button.button {
 
 ha-icon-button.button.emphasize {
   color: var(--primary-color, white);
+}
+
+video, img {
+  display: block;
 }

src/scss/next-previous-control.scss

@@ -0,0 +1,39 @@
+@use './common.scss';
+
+.controls {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+}
+.controls.previous {
+  left: 45px;
+}
+.controls.next {
+  right: 45px;  
+}
+
+.controls.chevrons {
+  top: calc(50% - (40px / 2));
+}
+
+.controls.thumbnails {
+  border-radius: 50%;
+  height: 48px;
+  top: calc(50% - (48px / 2));
+  box-shadow: 0px 0px 30px 1px black;
+  transition: all .2s ease;
+  opacity: 0.8;
+}
+.controls.thumbnails:hover {
+  opacity: 1 !important;
+  height: 72px;
+  top: calc(50% - (72px / 2));
+}
+
+.controls.previous.thumbnails:hover {
+  left: 33px;
+}
+
+.controls.next.thumbnails:hover {
+  right: 33px;
+}

src/scss/viewer.scss

@@ -0,0 +1,3 @@
+img.media,video.media,canvas.media {
+  width: 100%;
+}

src/types.ts

@@ -1,7 +1,4 @@
-import {
+import { LovelaceCard, LovelaceCardEditor } from 'custom-card-helpers';
-  LovelaceCard,
-  LovelaceCardEditor,
-} from 'custom-card-helpers';
 import { z } from 'zod';
 
 declare global {
@@ -43,12 +40,14 @@ export const FRIGATE_MENU_MODES = [
 ] as const;
 export type FrigateMenuMode = typeof FRIGATE_MENU_MODES[number];
 
+export const NEXT_PREVIOUS_CONTROL_STYLES = ['none', 'thumbnails', 'chevrons'] as const;
+export type NextPreviousControlStyle = typeof NEXT_PREVIOUS_CONTROL_STYLES[number];
 
 export const frigateCardConfigSchema = z.object({
   camera_entity: z.string(),
   // No URL validation to allow relative URLs within HA (e.g. addons).
   frigate_url: z.string().optional(),
-  frigate_client_id: z.string().optional().default("frigate"),
+  frigate_client_id: z.string().optional().default('frigate'),
   frigate_camera_name: z.string().optional(),
   view_default: z.enum(FRIGATE_CARD_VIEWS).optional().default('live'),
   view_timeout: z
@@ -59,31 +58,42 @@ export const frigateCardConfigSchema = z.object({
         .regex(/^\d+$/)
         .transform((val) => Number(val)),
     )
-    .optional().default(180),
+    .optional()
+    .default(180),
   live_provider: z.enum(['frigate', 'frigate-jsmpeg', 'webrtc']).default('frigate'),
-  webrtc: z.object({
+  webrtc: z
-    entity: z.string().optional(),
+    .object({
-    url: z.string().optional(),
+      entity: z.string().optional(),
-  }).passthrough().optional(),
+      url: z.string().optional(),
+    })
+    .passthrough()
+    .optional(),
   label: z.string().optional(),
   zone: z.string().optional(),
   autoplay_clip: z.boolean().default(false),
   menu_mode: z.enum(FRIGATE_MENU_MODES).optional().default('hidden-top'),
-  menu_buttons: z.object({
+  menu_buttons: z
-    frigate: z.boolean().default(true),
+    .object({
-    live: z.boolean().default(true),
+      frigate: z.boolean().default(true),
-    clips: z.boolean().default(true),
+      live: z.boolean().default(true),
-    snapshots: z.boolean().default(true),
+      clips: z.boolean().default(true),
-    frigate_ui: z.boolean().default(true),
+      snapshots: z.boolean().default(true),
-  }).optional(),
+      frigate_ui: z.boolean().default(true),
-  entities: z.object({
+    })
-    entity: z.string(),
+    .optional(),
-    show: z.boolean().default(true),
+  entities: z
-    icon: z.string().optional(),
+    .object({
-  }).array().optional(),
+      entity: z.string(),
-  controls: z.object({
+      show: z.boolean().default(true),
-    nextprev: z.enum(['thumbnails', 'chevrons', 'none']).default('thumbnails'),
+      icon: z.string().optional(),
-  }).optional(),
+    })
+    .array()
+    .optional(),
+  controls: z
+    .object({
+      nextprev: z.enum(NEXT_PREVIOUS_CONTROL_STYLES).default('thumbnails'),
+    })
+    .optional(),
 
   // Stock lovelace card config.
   type: z.string(),
@@ -103,6 +113,16 @@ export interface ExtendedHomeAssistant {
   hassUrl(path?): string;
 }
 
+export interface BrowseMediaQueryParameters {
+  mediaType: 'clips' | 'snapshots';
+  clientId: string;
+  cameraName: string;
+  label?: string;
+  zone?: string;
+  before?: number;
+  after?: number;
+}
+
 /**
  * Media Browser API types.
  */
@@ -119,7 +139,7 @@ export interface BrowseMediaSource {
   can_play: boolean;
   can_expand: boolean;
   children_media_class: string | null;
-  thumbnail: string | null
+  thumbnail: string | null;
   children?: BrowseMediaSource[] | null;
 }
 
@@ -134,7 +154,7 @@ export const browseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(()
     children_media_class: z.string().nullable(),
     thumbnail: z.string().nullable(),
     children: z.array(browseMediaSourceSchema).nullable().optional(),
-  })
+  }),
 );
 
 // Server side data-type defined here: https://github.com/home-assistant/core/blob/dev/homeassistant/components/media_source/models.py

src/view.ts

@@ -34,7 +34,7 @@ export class View {
     return undefined;
   }
 
-  public generateChangeEvent(node: HTMLElement): void {
+  public dispatchChangeEvent(node: HTMLElement): void {
     node.dispatchEvent(
       new CustomEvent<View>('frigate-card:change-view', {
         bubbles: true,