Improve camera titles shown in editor.

src/common.ts

@@ -398,7 +398,15 @@ export function refreshDynamicStateParameters(
   return params;
 }
 
-function prettifyCameraName(input: string): string {
+/**
+ * Prettify a Frigate name by converting '_' to spaces and capitalizing words.
+ * @param input The input Frigate (camera/label/zone) name.
+ * @returns A prettified name.
+ */
+export function prettifyFrigateName(input?: string): string | undefined {
+  if (!input) {
+    return undefined;
+  }
   const words = input.split(/[_\s]+/);
   return words
     .map((word) => {
@@ -407,16 +415,43 @@ function prettifyCameraName(input: string): string {
     .join(' ');
 }
 
+/**
+ * Get the title of an entity.
+ * @param entity The entity id.
+ * @param hass The Home Assistant object.
+ * @returns The title or undefined.
+ */
+export function getEntityTitle(hass?: HomeAssistant, entity?: string): string | undefined {
+  return entity ? hass?.states[entity]?.attributes?.friendly_name : undefined;
+}
+
+/**
+ * Get the icon of an entity.
+ * @param entity The entity id.
+ * @param hass The Home Assistant object.
+ * @returns The icon or undefined.
+ */
+export function getEntityIcon(hass?: HomeAssistant, entity?: string): string | undefined {
+  return hass && entity ? stateIcon(hass.states[entity]) : undefined;
+}
+
+/**
+ * Refresh a camera config with the latest Home Assistant state.
+ * @param config The Camera config.
+ * @param hass The Home Assistant object.
+ * @returns A camera config modified in place.
+ */
 export function refreshCameraConfigDynamicParameters(
   config: CameraConfig,
   hass?: HomeAssistant,
 ): CameraConfig {
-  const state =
-    hass && config.camera_entity ? hass.states[config.camera_entity] : undefined;
   config.title =
-    config.title ??
+    config.title ||
-    (state?.attributes?.friendly_name || prettifyCameraName(config.camera_name || ''));
+    (config.camera_entity ? getEntityTitle(hass, config.camera_entity) : '') ||
-  config.icon = config.icon ?? (state ? stateIcon(state) : 'mdi:video');
+    (config.camera_name ? prettifyFrigateName(config.camera_name) : '');
+  config.icon = 
+    config.icon ||
+    (config.camera_entity ? getEntityIcon(hass, config.camera_entity) : 'mdi:video');
   return config;
 }
 

src/editor.ts

@@ -50,7 +50,7 @@ import {
   CONF_VIEW_TIMEOUT,
   CONF_VIEW_UPDATE_FORCE,
 } from './const.js';
-import { arrayMove } from './common.js';
+import { arrayMove, getEntityTitle, prettifyFrigateName } from './common.js';
 import {
   copyConfig,
   deleteConfigValue,
@@ -246,6 +246,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     `;
   }
 
+  // export function refreshCameraConfigDynamicParameters(
+  //   config: CameraConfig,
+  //   hass?: HomeAssistant,
+  // ): CameraConfig {
+
   /**
    * Render a camera header.
    * @param cameraIndex The index of the camera to edit/add.
@@ -278,15 +283,23 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   ${cameraConfig?.title ||
                   cameraConfig?.card_id ||
                   [
-                    cameraConfig?.camera_entity,
+                    cameraConfig?.camera_entity
+                      ? getEntityTitle(this.hass, String(cameraConfig.camera_entity))
+                      : '',
                     cameraConfig?.client_id,
-                    cameraConfig?.camera_name,
+                    cameraConfig?.camera_name
-                    cameraConfig?.label,
+                      ? prettifyFrigateName(String(cameraConfig.camera_name))
-                    cameraConfig?.zone,
+                      : '',
+                    cameraConfig?.label
+                      ? prettifyFrigateName(String(cameraConfig.label))
+                      : '',
+                    cameraConfig?.zone
+                      ? prettifyFrigateName(String(cameraConfig.zone))
+                      : '',
                   ]
                     .filter(Boolean)
                     .join(' / ') ||
-                  cameraIndex}
+                  localize('editor.camera') + ' #' + cameraIndex}
                 </span>`}
           </span>
         </div>

src/localize/languages/en.json

@@ -141,7 +141,8 @@
     "delete": "Delete",
     "move_up": "Move up",
     "move_down": "Move down",
-    "add_new_camera": "Add new camera"
+    "add_new_camera": "Add new camera",
+    "camera": "Camera"
   },
   "error": {
     "empty_response": "Received empty response from Home Assistant for request",