frigate/config/ui.py

@@ -43,3 +43,4 @@ class UIConfig(FrigateBaseModel):
     unit_system: UnitSystemEnum = Field(
         default=UnitSystemEnum.metric, title="The unit system to use for measurements."
     )
+    show_camera_names: Optional[bool] = Field(default=False, title="Show camera name")

web/public/locales/en/config/ui.json

@@ -18,6 +18,9 @@
     },
     "unit_system": {
       "label": "The unit system to use for measurements."
+    },
+    "show_camera_names": {
+      "label": "Show the camera name in the player"
     }
   }
 }

web/public/locales/en/views/settings.json

@@ -47,10 +47,6 @@
       "playAlertVideos": {
         "label": "Play Alert Videos",
         "desc": "By default, recent alerts on the Live dashboard play as small looping videos. Disable this option to only show a static image of recent alerts on this device/browser."
-      },
-      "displayCameraNames": {
-        "label": "Always Show Camera Names",
-        "desc": "Always show the camera names in a chip in the multi-camera live view dashboard."
       }
     },
     "storedLayouts": {

web/src/components/player/LivePlayer.tsx

@@ -440,7 +440,11 @@ export default function LivePlayer({
           (offline && showStillWithoutActivity) ||
           !cameraEnabled) && (
           <Chip
-            className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize`}
+            className={`z-0 flex items-start justify-between space-x-1 text-xs capitalize ${
+              (offline && showStillWithoutActivity) || !cameraEnabled
+                ? "bg-red-500 bg-gradient-to-br from-red-400 to-red-500"
+                : "bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+            }`}
           >
             {cameraName}
           </Chip>

web/src/types/frigateConfig.ts

@@ -10,6 +10,7 @@ export interface UiConfig {
   dashboard: boolean;
   order: number;
   unit_system?: "metric" | "imperial";
+  show_camera_names?: boolean;
 }
 
 export interface BirdseyeConfig {

web/src/views/live/DraggableGridLayout.tsx

@@ -95,7 +95,6 @@ export default function DraggableGridLayout({
   } = useCameraLiveMode(cameras, windowVisible);
 
   const [globalAutoLive] = usePersistence("autoLiveView", true);
-  const [displayCameraNames] = usePersistence("displayCameraNames", false);
 
   const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } =
     useStreamingSettings();
@@ -611,7 +610,7 @@ export default function DraggableGridLayout({
                     streamName={streamName}
                     autoLive={autoLive ?? globalAutoLive}
                     showStillWithoutActivity={showStillWithoutActivity ?? true}
-                    alwaysShowCameraName={displayCameraNames}
+                    alwaysShowCameraName={config?.ui.show_camera_names ?? false}
                     useWebGL={useWebGL}
                     cameraRef={cameraRef}
                     className={cn(

web/src/views/live/LiveCameraView.tsx

@@ -654,7 +654,7 @@ export default function LiveCameraView({
                   className={`${fullscreen ? "*:rounded-none" : ""}`}
                   windowVisible
                   showStillWithoutActivity={false}
-                  alwaysShowCameraName={false}
+                  alwaysShowCameraName={config?.ui.show_camera_names ?? false}
                   cameraConfig={camera}
                   playAudio={audio}
                   playInBackground={playInBackground ?? false}

web/src/views/live/LiveDashboardView.tsx

@@ -211,7 +211,6 @@ export default function LiveDashboardView({
   } = useCameraLiveMode(cameras, windowVisible);
 
   const [globalAutoLive] = usePersistence("autoLiveView", true);
-  const [displayCameraNames] = usePersistence("displayCameraNames", false);
 
   const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } =
     useStreamingSettings();
@@ -550,7 +549,7 @@ export default function LiveDashboardView({
                     preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
                     autoLive={autoLive ?? globalAutoLive}
                     showStillWithoutActivity={showStillWithoutActivity ?? true}
-                    alwaysShowCameraName={displayCameraNames}
+                    alwaysShowCameraName={config?.ui.show_camera_names ?? false}
                     useWebGL={useWebGL}
                     playInBackground={false}
                     showStats={statsStates[camera.name]}

web/src/views/settings/UiSettingsView.tsx

@@ -92,10 +92,6 @@ export default function UiSettingsView() {
   // settings
 
   const [autoLive, setAutoLive] = usePersistence("autoLiveView", true);
-  const [cameraNames, setCameraName] = usePersistence(
-    "displayCameraNames",
-    false,
-  );
   const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1);
   const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0);
   const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true);
@@ -146,21 +142,6 @@ export default function UiSettingsView() {
                 <p>{t("general.liveDashboard.playAlertVideos.desc")}</p>
               </div>
             </div>
-            <div className="space-y-3">
-              <div className="flex flex-row items-center justify-start gap-2">
-                <Switch
-                  id="camera-names"
-                  checked={cameraNames}
-                  onCheckedChange={setCameraName}
-                />
-                <Label className="cursor-pointer" htmlFor="auto-live">
-                  {t("general.liveDashboard.displayCameraNames.label")}
-                </Label>
-              </div>
-              <div className="my-2 max-w-5xl text-sm text-muted-foreground">
-                <p>{t("general.liveDashboard.displayCameraNames.desc")}</p>
-              </div>
-            </div>
           </div>
 
           <div className="my-3 flex w-full flex-col space-y-6">