Add tooltip to live camera view.

src/common.ts

@@ -6,6 +6,7 @@ import { ZodSchema, z } from 'zod';
 import { localize } from './localize/localize.js';
 import {
   ActionType,
+  CameraConfig,
   ExtendedHomeAssistant,
   FrigateCardAction,
   FrigateCardCustomAction,
@@ -395,3 +396,14 @@ export function refreshDynamicStateParameters(
   params.icon = params.icon ?? stateIcon(state);
   return params;
 }
+
+export function refreshCameraConfigDynamicParameters(
+  hass: HomeAssistant,
+  config: CameraConfig): CameraConfig {
+  if (hass && config.camera_entity) {
+    const state = hass.states[config.camera_entity];
+    config.title = config.title ?? (state?.attributes?.friendly_name || config.camera_entity);
+    config.icon = config.icon ?? stateIcon(state);
+  }
+  return config;
+}

src/components/live.ts

@@ -36,7 +36,7 @@ import {
   dispatchPauseEvent,
   dispatchPlayEvent,
   homeAssistantSignPath,
-  refreshDynamicStateParameters,
+  refreshCameraConfigDynamicParameters,
 } from '../common.js';
 import { renderProgressIndicator } from '../components/message.js';
 
@@ -238,9 +238,13 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
     if (!this.cameras) {
       return [];
     }
-    return Array.from(this.cameras.values()).map((cameraConfig, index) =>
+    return Array.from(this.cameras.values()).map((cameraConfig, index) => {
-      this._renderLive(cameraConfig, index),
+      let refreshedConfig = {...cameraConfig};
-    );
+      if (this.hass) {
+        refreshedConfig = refreshCameraConfigDynamicParameters(this.hass, refreshedConfig);
+      }
+      return this._renderLive(refreshedConfig, index)
+    });
   }
 
   /**
@@ -271,10 +275,11 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
   protected _renderLive(cameraConfig: CameraConfig, slideIndex: number): TemplateResult {
     return html` <div class="embla__slide">
       <frigate-card-live-provider
+        .title=${cameraConfig.title ?? ''}
         .hass=${this.hass}
         .cameraConfig=${cameraConfig}
         .liveConfig=${this.liveConfig}
-        ?lazyLoad=${this._getLazyLoadCount() != null}
+        ?disabled=${this._getLazyLoadCount() != null}
         @frigate-card:media-show=${(e: CustomEvent<MediaShowInfo>) =>
           this._mediaShowEventHandler(slideIndex, e)}
       >
@@ -293,34 +298,18 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
       return [null, null];
     }
 
-    const getDynamicParameters = (config: CameraConfig): CameraConfig | null => {
-      if (!this.hass) {
-        return null;
-      }
-      const stateParameters = refreshDynamicStateParameters(this.hass, {
-        entity: config.camera_entity,
-        title: config.title,
-        icon: config.icon,
-      });
-      return {
-        ...config,
-        title: stateParameters.title ?? undefined,
-        icon: stateParameters.icon,
-      };
-    };
-
     let prev: CameraConfig | null = null,
       next: CameraConfig | null = null;
     if (currentIndex > 0) {
       prev = this.cameras.get(keys[currentIndex - 1]) ?? null;
       if (prev) {
-        prev = getDynamicParameters(prev);
+        prev = refreshCameraConfigDynamicParameters(this.hass, {...prev});
       }
     }
     if (currentIndex + 1 < this.cameras.size) {
       next = this.cameras.get(keys[currentIndex + 1]) ?? null;
       if (next) {
-        next = getDynamicParameters(next);
+        next = refreshCameraConfigDynamicParameters(this.hass, {...next});
       }
     }
     return [prev, next];

src/components/next-prev-control.ts

@@ -8,9 +8,6 @@ import controlStyle from '../scss/next-previous-control.scss';
 
 @customElement('frigate-card-next-previous-control')
 export class FrigateCardNextPreviousControl extends LitElement {
-  @property({ attribute: true })
-  public title = '';
-
   @property({ attribute: false })
   public direction?: 'next' | 'previous';