Improve handling of non-Frigate cameras.

src/components/gallery.ts

@@ -4,7 +4,7 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { BrowseMediaQueryParameters, ExtendedHomeAssistant } from '../types.js';
+import type { CameraConfig, ExtendedHomeAssistant } from '../types.js';
 import { BrowseMediaUtil } from '../browse-media-util.js';
 import { View } from '../view.js';
 import { renderProgressIndicator } from './message.js';
@@ -23,23 +23,33 @@ export class FrigateCardGallery extends LitElement {
   protected view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
+  protected cameraConfig?: CameraConfig;
 
   /**
    * Master render method.
    * @returns A rendered template.
    */
   protected render(): TemplateResult | void {
-    if (!this.hass || !this.view || !this.browseMediaQueryParameters) {
+    if (!this.hass || !this.view || !this.cameraConfig) {
       return;
     }
 
     if (!this.view.target) {
+      const browseMediaQueryParameters =
+        BrowseMediaUtil.getBrowseMediaQueryParametersOrDispatchError(
+          this,
+          this.view,
+          this.cameraConfig,
+        );
+      if (!browseMediaQueryParameters) {
+        return;
+      }
+
       BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange(
         this,
         this.hass,
         this.view,
-        this.browseMediaQueryParameters,
+        browseMediaQueryParameters,
       );
       return renderProgressIndicator();
     }

src/components/live.ts

@@ -1,4 +1,5 @@
-// TODO readme
+// TODO autodetect live provider from cameras configuration, or allow explicit setting.
+// TODO verify README links worked correctly (e.g. basic cameras configuration)
 
 import {
   CSSResultGroup,
@@ -371,7 +372,8 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
     const config = getOverriddenConfig(
       this.liveConfig,
       this.liveOverrides,
-      conditionState) as LiveConfig;
+      conditionState,
+    ) as LiveConfig;
 
     return html` <div class="embla__slide">
       <frigate-card-live-provider
@@ -832,6 +834,13 @@ export class FrigateCardLiveJSMPEG extends LitElement {
     this._jsmpegCanvasElement = document.createElement('canvas');
     this._jsmpegCanvasElement.className = 'media';
 
+    if (!this.cameraConfig?.camera_name) {
+      return dispatchErrorMessageEvent(
+        this,
+        localize('error.no_camera_name') + `: ${JSON.stringify(this.cameraConfig)}`,
+      );
+    }
+
     const url = await this._getURL();
     if (url) {
       this._jsmpegVideoPlayer = this._createJSMPEGPlayer(url);

src/components/viewer.ts

@@ -18,6 +18,7 @@ import type {
   BrowseMediaNeighbors,
   BrowseMediaQueryParameters,
   BrowseMediaSource,
+  CameraConfig,
   ExtendedHomeAssistant,
   MediaShowInfo,
   ViewerConfig,
@@ -30,10 +31,7 @@ import {
 } from './thumbnail-carousel.js';
 import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
 import { View } from '../view.js';
-import {
-  createMediaShowInfo,
-  dispatchErrorMessageEvent,
-} from '../common.js';
+import { createMediaShowInfo, dispatchErrorMessageEvent } from '../common.js';
 import { renderProgressIndicator } from '../components/message.js';
 
 import './next-prev-control.js';
@@ -53,7 +51,7 @@ export class FrigateCardViewer extends LitElement {
   protected viewerConfig?: ViewerConfig;
 
   @property({ attribute: false })
-  protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
+  protected cameraConfig?: CameraConfig;
 
   @property({ attribute: false })
   protected resolvedMediaCache?: ResolvedMediaCache;
@@ -63,7 +61,17 @@ export class FrigateCardViewer extends LitElement {
    * @returns A rendered template.
    */
   protected render(): TemplateResult | void {
-    if (!this.hass || !this.view || !this.browseMediaQueryParameters) {
+    if (!this.hass || !this.view || !this.cameraConfig) {
+      return;
+    }
+
+    const browseMediaQueryParameters =
+      BrowseMediaUtil.getBrowseMediaQueryParametersOrDispatchError(
+        this,
+        this.view,
+        this.cameraConfig,
+      );
+    if (!browseMediaQueryParameters) {
       return;
     }
 
@@ -72,7 +80,7 @@ export class FrigateCardViewer extends LitElement {
         this,
         this.hass,
         this.view,
-        this.browseMediaQueryParameters,
+        browseMediaQueryParameters,
       );
       return renderProgressIndicator();
     }
@@ -82,7 +90,7 @@ export class FrigateCardViewer extends LitElement {
       .viewerConfig=${this.viewerConfig}
       .resolvedMediaCache=${this.resolvedMediaCache}
       .hass=${this.hass}
-      .browseMediaQueryParameters=${this.browseMediaQueryParameters}
+      .browseMediaQueryParameters=${browseMediaQueryParameters}
     >
     </frigate-card-viewer-core>`;
   }