feat: webpush support camera nickname

frigate/comms/webpush.py

@@ -334,6 +334,9 @@ class WebPushClient(Communicator):
             return
 
         camera: str = payload["after"]["camera"]
+        camera_name: str = getattr(
+            self.config.cameras[camera], "nickname", None
+        ) or titlecase(camera.replace("_", " "))
         current_time = datetime.datetime.now().timestamp()
 
         if self._within_cooldown(camera):
@@ -375,7 +378,7 @@ class WebPushClient(Communicator):
         if state == "genai" and payload["after"]["data"]["metadata"]:
             message = payload["after"]["data"]["metadata"]["scene"]
         else:
-            message = f"Detected on {titlecase(camera.replace('_', ' '))}"
+            message = f"Detected on {camera_name}"
 
         if ended:
             logger.debug(
@@ -406,6 +409,9 @@ class WebPushClient(Communicator):
             return
 
         camera: str = payload["camera"]
+        camera_name: str = getattr(
+            self.config.cameras[camera], "nickname", None
+        ) or titlecase(camera.replace("_", " "))
         current_time = datetime.datetime.now().timestamp()
 
         if self._within_cooldown(camera):
@@ -421,14 +427,16 @@ class WebPushClient(Communicator):
         name = payload["name"]
         score = payload["score"]
 
-        title = f"{name.replace('_', ' ')} triggered on {titlecase(camera.replace('_', ' '))}"
+        title = f"{name.replace('_', ' ')} triggered on {camera_name}"
-        message = f"{titlecase(trigger_type)} trigger fired for {titlecase(camera.replace('_', ' '))} with score {score:.2f}"
+        message = f"{titlecase(trigger_type)} trigger fired for {camera_name} with score {score:.2f}"
         image = f"clips/triggers/{camera}/{event_id}.webp"
 
         direct_url = f"/explore?event_id={event_id}"
         ttl = 0
 
-        logger.debug(f"Sending push notification for {camera}, trigger name {name}")
+        logger.debug(
+            f"Sending push notification for {camera_name}, trigger name {name}"
+        )
 
         for user in self.web_pushers:
             self.send_push_notification(

web/src/components/overlay/MobileCameraDrawer.tsx

@@ -4,6 +4,7 @@ import { Button } from "../ui/button";
 import { FaVideo } from "react-icons/fa";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
+import { CameraNameLabel } from "../camera/CameraNameLabel";
 
 type MobileCameraDrawerProps = {
   allCameras: string[];
@@ -44,7 +45,7 @@ export default function MobileCameraDrawer({
                 setCameraDrawer(false);
               }}
             >
-              {cam.replaceAll("_", " ")}
+              <CameraNameLabel camera={cam} />
             </div>
           ))}
         </div>

web/src/components/player/PreviewPlayer.tsx

@@ -21,6 +21,7 @@ import {
   usePreviewForTimeRange,
 } from "@/hooks/use-camera-previews";
 import { useTranslation } from "react-i18next";
+import { useCameraNickname } from "@/hooks/use-camera-nickname";
 
 type PreviewPlayerProps = {
   previewRef?: (ref: HTMLDivElement | null) => void;
@@ -148,6 +149,7 @@ function PreviewVideoPlayer({
   const { t } = useTranslation(["components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  const cameraName = useCameraNickname(camera);
   // controlling playback
 
   const previewRef = useRef<HTMLVideoElement | null>(null);
@@ -342,7 +344,7 @@ function PreviewVideoPlayer({
       )}
       {cameraPreviews && !currentPreview && (
         <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
-          {t("noPreviewFoundFor", { camera: camera.replaceAll("_", " ") })}
+          {t("noPreviewFoundFor", { camera: cameraName })}
         </div>
       )}
       {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@@ -464,6 +466,7 @@ function PreviewFramesPlayer({
 }: PreviewFramesPlayerProps) {
   const { t } = useTranslation(["components/player"]);
 
+  const cameraName = useCameraNickname(camera);
   // frames data
 
   const { data: previewFrames } = useSWR<string[]>(
@@ -564,7 +567,7 @@ function PreviewFramesPlayer({
       />
       {previewFrames?.length === 0 && (
         <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
-          {t("noPreviewFoundFor", { cameraName: camera.replaceAll("_", " ") })}
+          {t("noPreviewFoundFor", { cameraName: cameraName })}
         </div>
       )}
       {firstLoad && <Skeleton className="absolute aspect-video size-full" />}

web/src/views/recording/RecordingView.tsx

@@ -64,6 +64,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
 
 type RecordingViewProps = {
   startCamera: string;
@@ -719,7 +720,7 @@ export function RecordingView({
                         </div>
                       </TooltipTrigger>
                       <TooltipContent className="smart-capitalize">
-                        {cam.replaceAll("_", " ")}
+                        <CameraNameLabel camera={cam} />
                       </TooltipContent>
                     </Tooltip>
                   );