From 72516833245acbf81181766ac6716a8bc53f3f66 Mon Sep 17 00:00:00 2001
From: ZhaiSoul <842607283@qq.com>
Date: Mon, 25 Aug 2025 15:53:14 +0000
Subject: [PATCH] refactor: refactor use-camera-nickname hook.

---
 web/src/hooks/use-camera-nickname.ts   | 26 +++++++++++++++++---------
 web/src/views/system/CameraMetrics.tsx | 20 ++++++++++++--------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/web/src/hooks/use-camera-nickname.ts b/web/src/hooks/use-camera-nickname.ts
index ac1d753eb..5f5fe9cf1 100644
--- a/web/src/hooks/use-camera-nickname.ts
+++ b/web/src/hooks/use-camera-nickname.ts
@@ -2,20 +2,28 @@ import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { useMemo } from "react";
 import useSWR from "swr";
 
+export function resolveCameraName(
+  config: FrigateConfig | undefined,
+  cameraId: string | CameraConfig | undefined,
+) {
+  if (typeof cameraId === "object" && cameraId !== null) {
+    const camera = cameraId as CameraConfig;
+    return camera?.nickname || camera?.name.replaceAll("_", " ");
+  } else {
+    const camera = config?.cameras?.[String(cameraId)];
+    return camera?.nickname || String(cameraId).replaceAll("_", " ");
+  }
+}
+
 export function useCameraNickname(
   cameraId: string | CameraConfig | undefined,
 ): string {
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const name = useMemo(() => {
-    if (typeof cameraId === "object" && cameraId !== null) {
-      const camera = cameraId as CameraConfig;
-      return camera?.nickname || camera?.name.replaceAll("_", " ");
-    } else {
-      const camera = config?.cameras?.[String(cameraId)];
-      return camera?.nickname || String(cameraId).replaceAll("_", " ");
-    }
-  }, [config, cameraId]);
+  const name = useMemo(
+    () => resolveCameraName(config, cameraId),
+    [config, cameraId],
+  );
 
   return name;
 }
diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index 13af347dd..1da8cc94b 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -4,7 +4,7 @@ import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateStats } from "@/types/stats";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { MdInfo } from "react-icons/md";
 import {
   Tooltip,
@@ -14,6 +14,7 @@ import {
 import useSWR from "swr";
 import { useTranslation } from "react-i18next";
 import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
+import { resolveCameraName } from "@/hooks/use-camera-nickname";
 
 type CameraMetricsProps = {
   lastUpdated: number;
@@ -27,6 +28,11 @@ export default function CameraMetrics({
   const { t } = useTranslation(["views/system"]);
   // camera info dialog
 
+  const getCameraName = useCallback(
+    (cameraId: string) => resolveCameraName(config, cameraId),
+    [config],
+  );
+
   const [showCameraInfoDialog, setShowCameraInfoDialog] = useState(false);
   const [probeCameraName, setProbeCameraName] = useState<string>();
 
@@ -133,13 +139,12 @@ export default function CameraMetrics({
       }
 
       Object.entries(stats.cameras).forEach(([key, camStats]) => {
-        const camera = config?.cameras?.[key];
-        if (!camera || !camera?.enabled) {
+        if (!config?.cameras[key].enabled) {
           return;
         }
 
         if (!(key in series)) {
-          const camName = camera?.nickname || key.replaceAll("_", " ");
+          const camName = getCameraName(key);
           series[key] = {};
           series[key]["ffmpeg"] = {
             name: t("cameras.label.cameraFfmpeg", { camName: camName }),
@@ -170,7 +175,7 @@ export default function CameraMetrics({
       });
     });
     return series;
-  }, [config, statsHistory, t]);
+  }, [config, getCameraName, statsHistory, t]);
 
   const cameraFpsSeries = useMemo(() => {
     if (!statsHistory) {
@@ -190,8 +195,7 @@ export default function CameraMetrics({
 
       Object.entries(stats.cameras).forEach(([key, camStats]) => {
         if (!(key in series)) {
-          const camName =
-            config?.cameras?.[key]?.nickname || key.replaceAll("_", " ");
+          const camName = getCameraName(key);
           series[key] = {};
           series[key]["fps"] = {
             name: t("cameras.label.cameraFramesPerSecond", {
@@ -228,7 +232,7 @@ export default function CameraMetrics({
       });
     });
     return series;
-  }, [config, statsHistory, t]);
+  }, [getCameraName, statsHistory, t]);
 
   useEffect(() => {
     if (!showCameraInfoDialog) {