Add support for editing id field.

src/card.ts

@@ -415,10 +415,10 @@ export class FrigateCard extends LitElement {
       }
 
       if (config.camera_name) {
-        const id = config.card_id || config.camera_entity || config.camera_name;
+        const id = config.id || config.camera_entity || config.camera_name;
         if (cameras.has(id)) {
           this._setMessageAndUpdate({
-            message: localize('error.duplicate_frigate_camera_name'),
+            message: localize('error.duplicate_camera_id'),
             type: 'error',
           });
           errorFree = false;

src/components/live.ts

@@ -1,5 +1,3 @@
-// TODO reconsider card_id, and using entity (which is unique) as that id
-// TODO rename card_id to id?
 // TODO webrtc entities in camera section?
 // TODO conditional elements based on camera name (requires event changed to propagate upwards)
 // TODO change url to frigate_url? Would need to also fix upgrade logic to refer to new name.

src/const.ts

@@ -9,6 +9,7 @@ export const CONF_CAMERAS_ARRAY_CLIENT_ID = 'cameras.#.client_id';
 export const CONF_CAMERAS_ARRAY_LABEL = 'cameras.#.label';
 export const CONF_CAMERAS_ARRAY_URL = 'cameras.#.url';
 export const CONF_CAMERAS_ARRAY_ZONE = 'cameras.#.zone';
+export const CONF_CAMERAS_ARRAY_ID = 'cameras.#.id';
 
 export const CONF_VIEW_DEFAULT = 'view.default';
 export const CONF_VIEW_TIMEOUT = 'view.timeout';

src/editor.ts

@@ -16,6 +16,7 @@ import {
   CONF_CAMERAS_ARRAY_CAMERA_ENTITY,
   CONF_CAMERAS_ARRAY_CAMERA_NAME,
   CONF_CAMERAS_ARRAY_CLIENT_ID,
+  CONF_CAMERAS_ARRAY_ID,
   CONF_CAMERAS_ARRAY_LABEL,
   CONF_CAMERAS_ARRAY_URL,
   CONF_CAMERAS_ARRAY_ZONE,
@@ -280,7 +281,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               // ways towards the least useful.
               html` <span>
                 ${cameraConfig?.title ||
-                cameraConfig?.card_id ||
+                cameraConfig?.id ||
                 [
                   cameraConfig?.camera_entity
                     ? getEntityTitle(this.hass, String(cameraConfig.camera_entity))
@@ -407,6 +408,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             ${this._renderStringInput(getArrayPath(CONF_CAMERAS_ARRAY_LABEL))}
             ${this._renderStringInput(getArrayPath(CONF_CAMERAS_ARRAY_ZONE))}
             ${this._renderStringInput(getArrayPath(CONF_CAMERAS_ARRAY_CLIENT_ID))}
+            ${this._renderStringInput(getArrayPath(CONF_CAMERAS_ARRAY_ID))}
           </div>`
         : ``}
     `;

src/localize/languages/en.json

@@ -13,6 +13,7 @@
       "camera_entity": "Camera Entity",
       "camera_name": "Frigate camera name (Autodetected from entity)",
       "client_id": "Frigate client id (For >1 Frigate server)",
+      "id": "Unique id for this camera in this card",
       "label": "Frigate label/object filter",
       "url": "Frigate server URL",
       "zone": "Frigate zone"
@@ -157,7 +158,7 @@
     "upgrade_available": "An automated card configuration upgrade is available, please visit the visual card editor",
     "missing_webrtc": "WebRTC component not found",
     "no_cameras": "No valid cameras found, you must configure at least one camera with either a camera_entity or camera_name",
-    "duplicate_frigate_camera_name": "Duplicate Frigate camera name, use the 'card_id' parameter to uniquely identify them",
+    "duplicate_camera_id": "Duplicate Frigate camera, use the 'id' parameter to uniquely identify cameras with the same 'camera_entity' or 'camera_name'",
     "could_not_render_elements": "Could not render picture elements",
     "invalid_elements_config": "Invalid picture elements configuration",
     "jsmpeg_no_sign": "Could not retrieve or sign JSMPEG websocket path",

src/types.ts

@@ -369,7 +369,9 @@ const cameraConfigDefaultSchema = z
     icon: z.string().optional(),
     title: z.string().optional(),
 
-    card_id: z.string().optional(),
+    // Optional identifier to separate different camera configurations used in
+    // this card.
+    id: z.string().optional(),
   })
   .default(cameraConfigDefault);
 export type CameraConfig = z.infer<typeof cameraConfigDefaultSchema>;