From a2d58d59b94a0bdff55ca6300e3ef771bf6595d7 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Tue, 26 Oct 2021 13:20:34 -0700
Subject: [PATCH] Fix browseMediaQueryParameters for clip and snapshot.

---
 src/card.ts               | 29 ++++++++++++++++++++++-------
 src/components/gallery.ts |  6 +++++-
 src/components/viewer.ts  |  1 -
 src/view.ts               | 27 +++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 6cfb233a..8d5b34f8 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -489,13 +489,19 @@ export class FrigateCard extends LitElement {
     `;
   }
 
-  protected _getBrowseMediaQueryParameters(): BrowseMediaQueryParameters | null {
-    if (!this._frigateCameraName) {
-      return null;
+  /**
+   * Get the parameters to search for media related to the current view.
+   * @returns A BrowseMediaQueryParameters object.
+   */
+  protected _getBrowseMediaQueryParameters(): BrowseMediaQueryParameters | undefined {
+    if (
+      !this._frigateCameraName ||
+      !(this._view.isClipRelatedView() || this._view.isSnapshotRelatedView())
+    ) {
+      return undefined;
     }
-
     return {
-      mediaType: this._view.view == 'clips' ? 'clips' : 'snapshots',
+      mediaType: this._view.isClipRelatedView() ? 'clips' : 'snapshots',
       clientId: this.config.frigate_client_id,
       cameraName: this._frigateCameraName,
       label: this.config.label,
@@ -503,10 +509,16 @@ export class FrigateCard extends LitElement {
     };
   }
 
+  /**
+   * Handler for media play event.
+   */
   protected _playHandler(): void {
     this._mediaPlaying = true;
   }
 
+  /**
+   * Handler for media pause event.
+   */
   protected _pauseHandler(): void {
     this._mediaPlaying = false;
   }
@@ -669,8 +681,10 @@ export class FrigateCard extends LitElement {
   }
 
   protected _render(): TemplateResult | void {
-    const mediaQueryParameters = this._getBrowseMediaQueryParameters();
-    if (!this._hass || !this._frigateCameraName || !mediaQueryParameters) {
+    if (!this._hass) {
+      return html``;
+    }
+    if (!this._frigateCameraName) {
       this._setMessageAndUpdate(
         {
           message: localize('error.no_frigate_camera_name'),
@@ -679,6 +693,7 @@ export class FrigateCard extends LitElement {
         true,
       );
     }
+    const mediaQueryParameters = this._getBrowseMediaQueryParameters();
 
     const pictureElementsClasses = {
       'picture-elements': true,
diff --git a/src/components/gallery.ts b/src/components/gallery.ts
index 72258965..bc78b7ae 100644
--- a/src/components/gallery.ts
+++ b/src/components/gallery.ts
@@ -36,7 +36,7 @@ export class FrigateCardGallery extends LitElement {
   protected view!: View;
 
   @property({ attribute: false })
-  protected browseMediaQueryParameters!: BrowseMediaQueryParameters;
+  protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
 
   protected _resizeObserver: ResizeObserver;
 
@@ -72,6 +72,10 @@ export class FrigateCardGallery extends LitElement {
   }
 
   protected async _render(): Promise<TemplateResult | void> {
+    if (!this.browseMediaQueryParameters) {
+      return html``;
+    }
+
     let parent: BrowseMediaSource | null;
     try {
       if (this.view.target) {
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index 6f6005e2..73d855e3 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -478,7 +478,6 @@ export class FrigateCardViewerCore extends LitElement {
       if (img) {
         img.src = img.getAttribute('data-src') || img.src;
       } else if (hls_player) {
-        console.info(hls_player);
         hls_player.url = hls_player.getAttribute('data-url') || hls_player.url;
       } else if (video_source) {
         video_source.src = video_source.getAttribute('data-src') || video_source.src;
diff --git a/src/view.ts b/src/view.ts
index 5408f748..0524631c 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -24,14 +24,37 @@ export class View {
     return this.view == name;
   }
 
+  /**
+   * Determine if a view is a gallery.
+   */
   public isGalleryView(): boolean {
     return this.view == 'clips' || this.view == 'snapshots';
   }
 
+  /**
+   * Determine if a view is of a piece of media (i.e. not the gallery).
+   */
   public isMediaView(): boolean {
     return !this.isGalleryView();
   }
 
+  /**
+   * Determine if a view is related to a clip or clips.
+   */
+  public isClipRelatedView(): boolean {
+    return ['clip', 'clips'].includes(this.view);
+  }
+
+  /**
+   * Determine if a view is related to a snapshot or snapshots.
+   */
+  public isSnapshotRelatedView(): boolean {
+    return ['snapshot', 'snapshots'].includes(this.view);
+  }
+
+  /**
+   *  Get the media item that should be played.
+   **/
   get media(): BrowseMediaSource | undefined {
     if (this.target) {
       if (this.target.children && this.childIndex !== undefined) {
@@ -42,6 +65,10 @@ export class View {
     return undefined;
   }
 
+  /**
+   * Dispatch an event to request a view change.
+   * @param node The element dispatching the event.
+   */
   public dispatchChangeEvent(node: HTMLElement): void {
     node.dispatchEvent(
       new CustomEvent<View>('frigate-card:change-view', {