Move camera name and icon into camera manager.

src/components/live/live.ts

@@ -32,7 +32,6 @@ import {
 } from '../../types.js';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
 import { contentsChanged } from '../../utils/basic.js';
-import { getCameraIcon, getCameraTitle } from '../../utils/camera.js';
 import {
   dispatchExistingMediaLoadedInfoAsEvent,
   dispatchMediaUnloadedEvent,
@@ -87,7 +86,7 @@ export const getStateObjOrDispatchError = (
   if (stateObj.state === 'unavailable') {
     dispatchMessageEvent(element, localize('error.live_camera_unavailable'), 'info', {
       icon: 'mdi:connection',
-      context: getCameraTitle(hass, cameraConfig),
+      context: cameraConfig,
     });
     return null;
   }
@@ -261,6 +260,7 @@ export class FrigateCardLive extends LitElement {
           .conditionState=${this.conditionState}
           .liveOverrides=${this.liveOverrides}
           .cardWideConfig=${this.cardWideConfig}
+          .cameraManager=${this.cameraManager}
         >
         </frigate-card-live-carousel>
       </frigate-card-surround>`,
@@ -304,6 +304,9 @@ export class FrigateCardLiveCarousel extends LitElement {
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
+  @property({ attribute: false })
+  public cameraManager?: CameraManager;
+
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
   protected _refMediaCarousel: Ref<FrigateCardMediaCarousel> = createRef();
@@ -317,10 +320,7 @@ export class FrigateCardLiveCarousel extends LitElement {
 
     const frigateCardMediaCarousel = this._refMediaCarousel.value;
 
-    if (
-      frigateCardMediaCarousel &&
-      changedProperties.has('inBackground')
-    ) {
+    if (frigateCardMediaCarousel && changedProperties.has('inBackground')) {
       // If this has changed to be in the background (i.e. preloaded but not
       // visible) take the appropriate play/pause/mute/unmute actions.
       if (this.inBackground) {
@@ -493,7 +493,7 @@ export class FrigateCardLiveCarousel extends LitElement {
     cameraConfig: CameraConfig,
     slideIndex: number,
   ): TemplateResult | void {
-    if (!this.liveConfig) {
+    if (!this.liveConfig || !this.hass || !this.cameraManager) {
       return;
     }
     // The conditionState object contains the currently live camera, which (in
@@ -510,12 +510,14 @@ export class FrigateCardLiveCarousel extends LitElement {
       conditionState,
     ) as LiveConfig;
 
+    const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraConfig);
+
     return html`
       <div class="embla__slide">
         <frigate-card-live-provider
           ?disabled=${this.liveConfig.lazy_load}
           .cameraConfig=${cameraConfig}
-          .label=${getCameraTitle(this.hass, cameraConfig)}
+          .label=${cameraMetadata?.title ?? ''}
           .liveConfig=${config}
           .hass=${this.hass}
           .cardWideConfig=${this.cardWideConfig}
@@ -555,7 +557,14 @@ export class FrigateCardLiveCarousel extends LitElement {
   protected render(): TemplateResult | void {
     const [slides, cameraToSlide] = this._getSlides();
     this._cameraToSlide = cameraToSlide;
-    if (!slides.length || !this.liveConfig || !this.cameras || !this.view) {
+    if (
+      !slides.length ||
+      !this.liveConfig ||
+      !this.cameras ||
+      !this.view ||
+      !this.hass ||
+      !this.cameraManager
+    ) {
       return;
     }
 
@@ -566,7 +575,19 @@ export class FrigateCardLiveCarousel extends LitElement {
     ) as LiveConfig;
 
     const [prevID, nextID] = this._getCameraIDsOfNeighbors();
-    const title = getCameraTitle(this.hass, this.cameras.get(this.view.camera));
+
+    const cameraMetadataPrevious = prevID ? this.cameraManager.getCameraMetadata(
+      this.hass,
+      this.cameras.get(prevID),
+    ) : null;
+    const cameraMetadataCurrent = this.cameraManager.getCameraMetadata(
+      this.hass,
+      this.cameras.get(this.view.camera),
+    );
+    const cameraMetadataNext = nextID ? this.cameraManager.getCameraMetadata(
+      this.hass,
+      this.cameras.get(nextID),
+    ) : null;
 
     // Notes on the below:
     // - guard() is used to avoid reseting the carousel unless the
@@ -589,7 +610,7 @@ export class FrigateCardLiveCarousel extends LitElement {
           [this.cameras, this.liveConfig],
           this._getPlugins.bind(this),
         ) as EmblaCarouselPlugins}
-        .label="${title ? `${localize('common.live')}: ${title}` : ''}"
+        .label="${cameraMetadataCurrent ? `${localize('common.live')}: ${cameraMetadataCurrent.title}` : ''}"
         .titlePopupConfig=${config.controls.title}
         .selected=${this._getSelectedCameraIndex()}
         transitionEffect=${this._getTransitionEffect()}
@@ -604,8 +625,8 @@ export class FrigateCardLiveCarousel extends LitElement {
           .hass=${this.hass}
           .direction=${'previous'}
           .controlConfig=${config.controls.next_previous}
-          .label=${getCameraTitle(this.hass, prevID ? this.cameras.get(prevID) : null)}
-          .icon=${getCameraIcon(this.hass, prevID ? this.cameras.get(prevID) : null)}
+          .label=${cameraMetadataPrevious?.title ?? ''}
+          .icon=${cameraMetadataPrevious?.icon}
           ?disabled=${prevID === null}
           @click=${(ev) => {
             this._setViewCameraID(prevID);
@@ -619,8 +640,8 @@ export class FrigateCardLiveCarousel extends LitElement {
           .hass=${this.hass}
           .direction=${'next'}
           .controlConfig=${config.controls.next_previous}
-          .label=${getCameraTitle(this.hass, nextID ? this.cameras.get(nextID) : null)}
-          .icon=${getCameraIcon(this.hass, nextID ? this.cameras.get(nextID) : null)}
+          .label=${cameraMetadataNext?.title ?? ''}
+          .icon=${cameraMetadataNext?.icon}
           ?disabled=${nextID === null}
           @click=${(ev) => {
             this._setViewCameraID(nextID);

src/components/media-filter.ts

@@ -19,7 +19,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { CameraManager } from '../camera/manager';
 import { DateRange } from '../camera/range';
 import { CameraConfig, ExtendedHomeAssistant } from '../types';
-import { getCameraTitle } from '../utils/camera';
 import { View } from '../view/view';
 import {
   MediaFilterControls,
@@ -193,7 +192,9 @@ export class FrigateCardMediaFilter extends LitElement {
       this._cameraOptions = Array.from(this.cameras.entries()).map(
         ([cameraID, cameraConfig]) => ({
           value: cameraID,
-          label: getCameraTitle(this.hass, cameraConfig),
+          label: this.hass
+            ? this.cameraManager?.getCameraMetadata(this.hass, cameraConfig)?.title ?? ''
+            : '',
         }),
       );
     }

src/components/thumbnail.ts

@@ -16,7 +16,6 @@ import thumbnailFeatureRecordingStyle from '../scss/thumbnail-feature-recording.
 import thumbnailStyle from '../scss/thumbnail.scss';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { errorToConsole, getDurationString, prettifyTitle } from '../utils/basic.js';
-import { getCameraTitle } from '../utils/camera.js';
 import { renderTask } from '../utils/task.js';
 import { createFetchThumbnailTask, FetchThumbnailTaskArgs } from '../utils/thumbnail.js';
 import { View } from '../view/view.js';
@@ -270,7 +269,7 @@ export class FrigateCardThumbnail extends LitElement {
    * @returns A template to display to the user.
    */
   protected render(): TemplateResult | void {
-    if (!this.media || !this.cameraConfig) {
+    if (!this.media || !this.cameraConfig || !this.cameraManager || !this.hass) {
       return;
     }
 
@@ -295,6 +294,8 @@ export class FrigateCardThumbnail extends LitElement {
       this.hass &&
       this.cameraManager?.getMediaCapabilities(this.media)?.canFavorite;
 
+    const cameraTitle = this.cameraManager.getCameraMetadata(this.hass, this.cameraConfig)?.title;
+
     return html` ${ViewMediaClassifier.isEvent(this.media)
       ? html`<frigate-card-thumbnail-feature-event
           aria-label="${title ?? ''}"
@@ -306,9 +307,7 @@ export class FrigateCardThumbnail extends LitElement {
       ? html`<frigate-card-thumbnail-feature-recording
           aria-label="${title ?? ''}"
           title="${title ?? ''}"
-          .cameraTitle=${this.details || !this.cameraConfig || !this.hass
-            ? undefined
-            : getCameraTitle(this.hass, this.cameraConfig)}
+          .cameraTitle=${this.details ? undefined : cameraTitle}
           .date=${this.media.getStartTime() ?? undefined}
         ></frigate-card-thumbnail-feature-recording>`
       : html``}
@@ -343,7 +342,7 @@ export class FrigateCardThumbnail extends LitElement {
       : this.details && ViewMediaClassifier.isRecording(this.media)
       ? html`<frigate-card-thumbnail-details-recording
           .media=${this.media ?? undefined}
-          .cameraTitle=${getCameraTitle(this.hass, this.cameraConfig)}
+          .cameraTitle=${cameraTitle}
           .seek=${this.seek}
         ></frigate-card-thumbnail-details-recording>`
       : html``}

src/components/timeline-core.ts

@@ -42,7 +42,7 @@ import {
   dispatchFrigateCardEvent,
   isHoverableDevice,
 } from '../utils/basic';
-import { getAllDependentCameras, getCameraTitle } from '../utils/camera.js';
+import { getAllDependentCameras } from '../utils/camera.js';
 
 import {
   createViewForEvents,
@@ -675,16 +675,22 @@ export class FrigateCardTimelineCore extends LitElement {
 
     this._getTimelineCameraIDs().forEach((cameraID) => {
       const cameraConfig = this.cameras?.get(cameraID);
-      if (cameraConfig) {
-        if (
-          cameraConfig.frigate.camera_name &&
-          cameraConfig.frigate.camera_name !== CAMERA_BIRDSEYE
-        ) {
-          groups.push({
-            id: cameraID,
-            content: getCameraTitle(this.hass, cameraConfig),
-          });
-        }
+      if (!this.hass || !cameraConfig || !this.cameraManager) {
+        return;
+      }
+      const cameraMetadata = this.cameraManager.getCameraMetadata(
+        this.hass,
+        cameraConfig,
+      );
+      if (
+        cameraMetadata &&
+        cameraConfig.frigate.camera_name &&
+        cameraConfig.frigate.camera_name !== CAMERA_BIRDSEYE
+      ) {
+        groups.push({
+          id: cameraID,
+          content: cameraMetadata.title,
+        });
       }
     });
     return new DataSet(groups);