Fix browseMediaQueryParameters for clip and snapshot.

src/card.ts

@@ -489,13 +489,19 @@ export class FrigateCard extends LitElement {
     `;
   }
 
-  protected _getBrowseMediaQueryParameters(): BrowseMediaQueryParameters | null {
+  /**
-    if (!this._frigateCameraName) {
+   * Get the parameters to search for media related to the current view.
-      return null;
+   * @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) {
-    if (!this._hass || !this._frigateCameraName || !mediaQueryParameters) {
+      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,

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) {

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;

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', {