feat(player): always show camera names + add UI config toggle

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/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} />

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

@@ -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(

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}

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]}