administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-16 03:52:09 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor: refactor use-camera-nickname hook.

Browse Source
This commit is contained in:
ZhaiSoul 2025-08-25 15:53:14 +00:00
parent 522744efed
commit 7251683324
2 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/hooks/use-camera-nickname.ts
View File

@ -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;
}

20
web/src/views/system/CameraMetrics.tsx
View File

@ -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) {