Add next/prev icons on clips/snapshots.

src/frigate-hass-card.scss

@@ -81,3 +81,21 @@ webrtc-camera ha-card {
   border-radius: 0px;
   background-color: var(--secondary-background-color, black);
 }
+
+.frigate-media-controls {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+  opacity: 0.8;
+  border-radius: 50%;
+  top: calc(50% - (54px /2));
+  height: 54px;
+}
+
+.frigate-media-controls.previous {
+  left: 20px;  
+}
+
+.frigate-media-controls.next {
+  right: 20px;  
+}

src/frigate-hass-card.ts

@@ -34,6 +34,7 @@ import {
   resolvedMediaSchema,
 } from './types';
 import type {
+  BrowseMediaNeighbors,
   BrowseMediaSource,
   FrigateCardView,
   FrigateCardConfig,
@@ -186,6 +187,41 @@ export class FrigateCardMenu extends LitElement {
   }
 }
 
+interface ViewParameters {
+  view?: FrigateCardView;
+  target?: BrowseMediaSource;
+  childIndex?: number;
+  previous?: View;
+}
+
+class View {
+  view: FrigateCardView;
+  target?: BrowseMediaSource;
+  childIndex?: number;
+  previous?: View;
+
+  constructor(params?: ViewParameters) {
+    this.view = params?.view || 'live';
+    this.target = params?.target;
+    this.childIndex = params?.childIndex;
+    this.previous = params?.previous;
+  }
+
+  public is(name: string): boolean {
+    return this.view == name;
+  }
+
+  get media(): BrowseMediaSource | undefined {
+    if (this.target) {
+      if (this.target.children && this.childIndex !== undefined) {
+        return this.target.children[this.childIndex];
+      }
+      return this.target;
+    }
+    return undefined;
+  }
+}
+
 // Main FrigateCard class.
 @customElement('frigate-card')
 export class FrigateCard extends LitElement {
@@ -212,20 +248,16 @@ export class FrigateCard extends LitElement {
   @state()
   public config!: FrigateCardConfig;
 
-  @property({ attribute: false })
-  protected _viewMode: FrigateCardView = 'live';
-
   protected _interactionTimerID: number | null = null;
   protected _webrtcElement: any | null = null;
 
-  // A specific media source requested by the user.
   @property({ attribute: false })
-  protected _requestedMediaSource: BrowseMediaSource | null = null;
+  protected _view: View = new View();
 
   // Media (both browse item & resolved media) actually being shown to the user.
-  // This may be different from _requestedMediaSource when no particular event is
+  // This may be different from _view.target when no particular event is
   // requested (e.g. 'clip' view that views the most recent) -- in that case the
-  // requestedEvent will be null, but _mediaBeingShown will be the actual event
+  // _view.target will be null, but _mediaBeingShown will be the actual event
   // shown.
   protected _mediaBeingShown: MediaBeingShown | null = null;
 
@@ -320,11 +352,13 @@ export class FrigateCard extends LitElement {
 
   // Update the card view.
   protected _changeView(
-    view?: FrigateCardView | undefined,
+    view?: View | undefined,
-    mediaSource?: BrowseMediaSource | undefined,
   ): void {
-    this._viewMode = view || this.config.view_default;
+    if (view === undefined) {
-    this._requestedMediaSource = mediaSource || null;
+      this._view = new View({view: this.config.view_default})
+    } else {
+      this._view = view;
+    }
     this._mediaBeingShown = null;
   }
 
@@ -424,8 +458,11 @@ export class FrigateCard extends LitElement {
 
   // Resolve Frigate media identifier to a real URL.
   protected async _resolveMedia(
-    mediaSource: BrowseMediaSource,
+    mediaSource: BrowseMediaSource | null,
   ): Promise<ResolvedMedia | null> {
+    if (!mediaSource) {
+      return null;
+    }
     const request = {
       type: 'media_source/resolve_media',
       media_content_id: mediaSource.media_content_id,
@@ -451,56 +488,62 @@ export class FrigateCard extends LitElement {
     return this._renderAttentionIcon(
       'mdi:alert-circle',
       html`${
-        error ? `${error} .` : `Unknown error`
+        error ? `${error} .` : `Unknown error .`
       }Check <a href="${URL_TROUBLESHOOTING}">troubleshooting</a></span>.`,
     );
   }
 
   // Render Frigate events into a card gallery.
   protected async _renderEvents(): Promise<TemplateResult> {
-    const want_clips = this._viewMode == 'clips';
+    let parent;
-    let media;
     try {
-      if (this._requestedMediaSource) {
+      if (this._view.target) {
-        media = await this._browseMedia(this._requestedMediaSource.media_content_id);
+        parent = await this._browseMedia(this._view.target.media_content_id);
       } else {
-        media = await this._browseMediaQuery(want_clips);
+        parent = await this._browseMediaQuery(this._view.is('clips'));
       }
     } catch (e: any) {
       return this._renderError(e.message);
     }
-    const firstMediaItem = this._getFirstTrueMediaItem(media);
+
-    if (!firstMediaItem) {
+    if (this._getFirstTrueMediaChildIndex(parent) == null) {
       return this._renderAttentionIcon(
-        want_clips ? 'mdi:filmstrip-off' : 'mdi:camera-off',
+        this._view.is('clips') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
-        want_clips ? 'No clips' : 'No snapshots',
+        this._view.is('clips') ? 'No clips' : 'No snapshots',
       );
     }
 
     return html` <ul class="mdc-image-list frigate-card-image-list">
-      ${media.children.map(
+      ${parent.children.map(
-        (mediaSource) =>
+        (child, index) =>
           html` <li class="mdc-image-list__item">
             <div class="mdc-image-list__image-aspect-container">
-              ${mediaSource.can_expand
+              ${child.can_expand
                 ? html`<div class="mdc-image-list__image">
                     <ha-card
                       @click=${() => {
-                        this._changeView(this._viewMode, mediaSource);
+                        this._changeView(new View({
+                          view: this._view.view,
+                          target: child,
+                          previous: this._view}))
                       }}
                       outlined=""
                       class="frigate-card-image-list-folder"
                     >
-                      <div>${mediaSource.title}</div>
+                      <div>${child.title}</div>
                     </ha-card>
                   </div>`
                 : html`<img
                     data-toggle="tooltip"
-                    title="${mediaSource.title}"
+                    title="${child.title}"
                     class="mdc-image-list__image"
-                    src="${mediaSource.thumbnail}"
+                    src="${child.thumbnail}"
                     @click=${() => {
-                      this._changeView(want_clips ? 'clip' : 'snapshot', mediaSource);
+\                      this._changeView(new View({
+                        view: this._view.is('clips') ? 'clip' : 'snapshot',
+                        target: parent,
+                        childIndex: index,
+                        previous: this._view}));
                     }}
                   />`}
             </div>
@@ -524,7 +567,7 @@ export class FrigateCard extends LitElement {
       case 'live':
       case 'clips':
       case 'snapshots':
-        this._changeView(name);
+        this._changeView(new View({view: name}));
         break;
       case 'frigate_ui':
         const frigate_url = this._getFrigateURLFromContext();
@@ -590,28 +633,80 @@ export class FrigateCard extends LitElement {
 
   // From a BrowseMediaSource item extract the first true media item (i.e. a
   // clip/snapshot, not a folder).
-  protected _getFirstTrueMediaItem(media: BrowseMediaSource): BrowseMediaSource | null {
+  protected _getFirstTrueMediaChildIndex(media: BrowseMediaSource | null): number | null {
-    return media.children?.find((mediaSource) => !mediaSource.can_expand) || 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;
   }
 
-  // Render the player for a saved clip.
+  // Get the previous and next real media items, given the index
-  protected async _renderClipPlayer(): Promise<TemplateResult> {
+  protected _getMediaNeighbors(
-    let mediaSource: BrowseMediaSource;
+    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 view for media.
+  protected async _renderViewer(): Promise<TemplateResult> {
     let autoplay = true;
-    if (this._requestedMediaSource) {
+
-      mediaSource = this._requestedMediaSource;
+    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 {
-      let media;
       try {
-        media = await this._browseMediaQuery(true);
+        parent = await this._browseMediaQuery(this._view.is('clip'));
       } catch (e: any) {
         return this._renderError(e.message);
       }
-      const firstMediaItem = this._getFirstTrueMediaItem(media);
+      childIndex = this._getFirstTrueMediaChildIndex(parent);
-      if (!firstMediaItem) {
+      if (!parent || !parent.children || childIndex == null) {
-        return this._renderAttentionIcon('mdi:filmstrip-off', 'No recent clip');
+        return this._renderAttentionIcon(
+          this._view.is('clip') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
+          this._view.is('clip') ? 'No recent clip' : 'No recent snapshots');
       }
-      mediaSource = firstMediaItem;
+      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
@@ -620,20 +715,36 @@ export class FrigateCard extends LitElement {
       // gallery.
       autoplay = this.config.autoplay_clip;
     }
-
+    const resolvedMedia = await this._resolveMedia(mediaToRender);
-    const resolvedMedia = await this._resolveMedia(mediaSource);
+    if (!mediaToRender || !resolvedMedia) {
-    if (!resolvedMedia) {
       // Home Assistant could not resolve media item.
       return this._renderError('Could not resolve clip URL');
     }
 
     this._mediaBeingShown = {
-      browseMedia: mediaSource,
+      browseMedia: mediaToRender,
       resolvedMedia: resolvedMedia,
     };
 
+    const neighbors = this._getMediaNeighbors(parent, childIndex);
+
     return html`
-      <ha-hls-player
+      ${neighbors?.previous
+        ? html`<img
+            src="${neighbors.previous.thumbnail}"
+            class="frigate-media-controls previous"
+            @click=${() => {
+              this._view = new View({
+                view: this._view.view,
+                target: parent || undefined,
+                childIndex: neighbors.previousIndex ?? undefined,
+                previous: this._view,
+              })
+            }}
+          />`
+        : ``}
+      ${this._view.is('clip') ?
+        html`<ha-hls-player
           .hass=${this._hass}
           .url=${resolvedMedia.url}
           class="frigate-card-viewer"
@@ -643,7 +754,37 @@ export class FrigateCard extends LitElement {
           allow-exoplayer
           ?autoplay="${autoplay}"
         >
-      </ha-hls-player>
+        </ha-hls-player>`
+      : html`<img
+          src=${resolvedMedia.url}
+          class="frigate-card-viewer"
+          @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,
+                }));
+              }
+            });
+          }}
+        />`}
+      ${neighbors?.next
+        ? html`<img
+            src="${neighbors.next.thumbnail}"
+            class="frigate-media-controls next"
+            @click=${() => {
+              this._view = new View({
+                view: this._view.view,
+                target: parent || undefined,
+                childIndex: neighbors.nextIndex ?? undefined,
+                previous: this._view,
+              })
+            }}
+          />`
+        : ``}
     `;
   }
 
@@ -678,8 +819,12 @@ export class FrigateCard extends LitElement {
 
   // Get a clip at the same time as a snapshot.
   protected async _findRelatedClips(
-    snapshot: BrowseMediaSource,
+    snapshot: BrowseMediaSource | null,
   ): Promise<BrowseMediaSource | null> {
+    if (!snapshot) {
+      return null;
+    }
+
     const startTime = this._extractEventStartTimeFromBrowseMedia(snapshot);
     if (startTime) {
       try {
@@ -690,7 +835,10 @@ export class FrigateCard extends LitElement {
           startTime,
         );
         if (clipsAtSameTime) {
-          return this._getFirstTrueMediaItem(clipsAtSameTime);
+          const index = this._getFirstTrueMediaChildIndex(clipsAtSameTime);
+          if (index != null && clipsAtSameTime.children?.length) {
+            return clipsAtSameTime.children[index];
+          }
         }
       } catch (e: any) {
         // Pass. This is best effort.
@@ -699,50 +847,6 @@ export class FrigateCard extends LitElement {
     return null;
   }
 
-  // Render a snapshot.
-  protected async _renderSnapshotViewer(): Promise<TemplateResult> {
-    let mediaSource: BrowseMediaSource;
-    if (this._requestedMediaSource) {
-      mediaSource = this._requestedMediaSource;
-    } else {
-      let media;
-      try {
-        media = await this._browseMediaQuery(false);
-      } catch (e: any) {
-        return this._renderError(e.message);
-      }
-      const firstMediaItem = this._getFirstTrueMediaItem(media);
-      if (!firstMediaItem) {
-        return this._renderAttentionIcon('mdi:camera-off', 'No recent snapshots');
-      }
-      mediaSource = firstMediaItem;
-    }
-
-    const resolvedMedia = await this._resolveMedia(mediaSource);
-    if (!resolvedMedia) {
-      // Home Assistant could not resolve media item.
-      return this._renderError('Could not resolve snapshot URL');
-    }
-
-    this._mediaBeingShown = {
-      browseMedia: mediaSource,
-      resolvedMedia: resolvedMedia,
-    };
-
-    return html` <img
-      class="frigate-card-viewer"
-      src="${resolvedMedia.url}"
-      @click=${() => {
-        // Get clips potentially related to this snapshot.
-        this._findRelatedClips(mediaSource).then((relatedClip) => {
-          if (relatedClip) {
-            this._changeView('clip', relatedClip);
-          }
-        });
-      }}
-    />`;
-  }
-
   // Render the live viewer.
   // Note: The live viewer is the main element used to size the overall card. It
   // is always rendered (but sometimes hidden).
@@ -798,27 +902,27 @@ export class FrigateCard extends LitElement {
     return html` <ha-card @click=${this._interactionHandler}>
       ${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
       <div class="frigate-card-contents">
-        ${this._viewMode == 'clips'
+        ${this._view.is('clips')
           ? html`<div class="frigate-card-gallery">
               ${until(this._renderEvents(), this._renderProgressIndicator())}
             </div>`
           : ``}
-        ${this._viewMode == 'snapshots'
+        ${this._view.is('snapshots')
           ? html`<div class="frigate-card-gallery">
               ${until(this._renderEvents(), this._renderProgressIndicator())}
             </div>`
           : ``}
-        ${this._viewMode == 'clip'
+        ${this._view.is('clip')
           ? html`<div class="frigate-card-viewer">
-              ${until(this._renderClipPlayer(), this._renderProgressIndicator())}
+              ${until(this._renderViewer(), this._renderProgressIndicator())}
             </div>`
           : ``}
-        ${this._viewMode == 'snapshot'
+        ${this._view.is('snapshot')
           ? html`<div class="frigate-card-viewer">
-              ${until(this._renderSnapshotViewer(), this._renderProgressIndicator())}
+              ${until(this._renderViewer(), this._renderProgressIndicator())}
             </div>`
           : ``}
-        ${this._viewMode == 'live'
+        ${this._view.is('live')
           ? html`<div class="frigate-card-viewer">${this._renderLiveViewer()}</div>`
           : ``}
       </div>

src/types.ts

@@ -116,3 +116,11 @@ export const resolvedMediaSchema = z.object({
   mime_type: z.string(),
 });
 export type ResolvedMedia = z.infer<typeof resolvedMediaSchema>;
+
+export interface BrowseMediaNeighbors {
+  previous: BrowseMediaSource | null;
+  previousIndex: number | null;
+
+  next: BrowseMediaSource | null;
+  nextIndex: number | null;
+}