From 61f927c9416b33e748d37605d43c24c0e5be2236 Mon Sep 17 00:00:00 2001
From: Thibault JUNIN <thibault.junin@infomaniak.com>
Date: Tue, 28 Oct 2025 13:13:39 +0100
Subject: [PATCH] feat(player): always show camera names + add UI config toggle

---
 frigate/config/ui.py                       |  1 +
 web/public/locales/en/config/ui.json       |  3 +++
 web/src/components/player/LivePlayer.tsx   | 24 ++++++++++++++--------
 web/src/types/frigateConfig.ts             |  1 +
 web/src/views/live/DraggableGridLayout.tsx |  1 +
 web/src/views/live/LiveCameraView.tsx      |  1 +
 web/src/views/live/LiveDashboardView.tsx   |  1 +
 7 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frigate/config/ui.py b/frigate/config/ui.py
index 2f66aeed3..ea28571bd 100644
--- a/frigate/config/ui.py
+++ b/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")
diff --git a/web/public/locales/en/config/ui.json b/web/public/locales/en/config/ui.json
index fec0a9528..af221b923 100644
--- a/web/public/locales/en/config/ui.json
+++ b/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"
     }
   }
 }
\ No newline at end of file
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 1f5ca703a..5e4f368c1 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -35,6 +35,7 @@ type LivePlayerProps = {
   streamName: string;
   preferredLiveMode: LivePlayerMode;
   showStillWithoutActivity?: boolean;
+  alwaysShowCameraName?: boolean;
   useWebGL: boolean;
   windowVisible?: boolean;
   playAudio?: boolean;
@@ -59,6 +60,7 @@ export default function LivePlayer({
   streamName,
   preferredLiveMode,
   showStillWithoutActivity = true,
+  alwaysShowCameraName = false,
   useWebGL = false,
   windowVisible = true,
   playAudio = false,
@@ -433,20 +435,26 @@ export default function LivePlayer({
         </div>
       )}
 
-      <div className="absolute right-2 top-2">
+      <div className="absolute right-2 top-2 flex items-center gap-3">
+        {(alwaysShowCameraName ||
+          (offline && showStillWithoutActivity) ||
+          !cameraEnabled) && (
+          <Chip
+            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>
+        )}
         {autoLive &&
           !offline &&
           activeMotion &&
           ((showStillWithoutActivity && !liveReady) || liveReady) && (
             <MdCircle className="mr-2 size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
           )}
-        {((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`}
-          >
-            {cameraName}
-          </Chip>
-        )}
       </div>
       {showStats && (
         <PlayerStats stats={stats} minimal={cameraRef !== undefined} />
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index ffe4cc14d..8ae94ce56 100644
--- a/web/src/types/frigateConfig.ts
+++ b/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 {
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index ccd1b373b..2a6793145 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -610,6 +610,7 @@ export default function DraggableGridLayout({
                     streamName={streamName}
                     autoLive={autoLive ?? globalAutoLive}
                     showStillWithoutActivity={showStillWithoutActivity ?? true}
+                    alwaysShowCameraName={config?.ui.show_camera_names ?? false}
                     useWebGL={useWebGL}
                     cameraRef={cameraRef}
                     className={cn(
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 2253385ac..1d0aca9b0 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -654,6 +654,7 @@ export default function LiveCameraView({
                   className={`${fullscreen ? "*:rounded-none" : ""}`}
                   windowVisible
                   showStillWithoutActivity={false}
+                  alwaysShowCameraName={config?.ui.show_camera_names ?? false}
                   cameraConfig={camera}
                   playAudio={audio}
                   playInBackground={playInBackground ?? false}
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 0aaca18a1..18402ae02 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -549,6 +549,7 @@ export default function LiveDashboardView({
                     preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
                     autoLive={autoLive ?? globalAutoLive}
                     showStillWithoutActivity={showStillWithoutActivity ?? true}
+                    alwaysShowCameraName={config?.ui.show_camera_names ?? false}
                     useWebGL={useWebGL}
                     playInBackground={false}
                     showStats={statsStates[camera.name]}