administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-27 09:07:41 +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 { useMemo } from "react";
import useSWR from "swr"; 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( export function useCameraNickname(
cameraId: string | CameraConfig | undefined, cameraId: string | CameraConfig | undefined,
): string { ): string {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const name = useMemo(() => { const name = useMemo(
if (typeof cameraId === "object" && cameraId !== null) { () => resolveCameraName(config, cameraId),
const camera = cameraId as CameraConfig; [config, cameraId],
return camera?.nickname || camera?.name.replaceAll("_", " "); );
} else {
const camera = config?.cameras?.[String(cameraId)];
return camera?.nickname || String(cameraId).replaceAll("_", " ");
}
}, [config, cameraId]);
return name; 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 { Skeleton } from "@/components/ui/skeleton";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { FrigateStats } from "@/types/stats"; 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 { MdInfo } from "react-icons/md";
import { import {
Tooltip, Tooltip,
@ -14,6 +14,7 @@ import {
import useSWR from "swr"; import useSWR from "swr";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel"; import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { resolveCameraName } from "@/hooks/use-camera-nickname";
type CameraMetricsProps = { type CameraMetricsProps = {
lastUpdated: number; lastUpdated: number;
@ -27,6 +28,11 @@ export default function CameraMetrics({
const { t } = useTranslation(["views/system"]); const { t } = useTranslation(["views/system"]);
// camera info dialog // camera info dialog
const getCameraName = useCallback(
(cameraId: string) => resolveCameraName(config, cameraId),
[config],
);
const [showCameraInfoDialog, setShowCameraInfoDialog] = useState(false); const [showCameraInfoDialog, setShowCameraInfoDialog] = useState(false);
const [probeCameraName, setProbeCameraName] = useState<string>(); const [probeCameraName, setProbeCameraName] = useState<string>();
@ -133,13 +139,12 @@ export default function CameraMetrics({
} }
Object.entries(stats.cameras).forEach(([key, camStats]) => { Object.entries(stats.cameras).forEach(([key, camStats]) => {
const camera = config?.cameras?.[key]; if (!config?.cameras[key].enabled) {
if (!camera || !camera?.enabled) {
return; return;
} }
if (!(key in series)) { if (!(key in series)) {
const camName = camera?.nickname || key.replaceAll("_", " "); const camName = getCameraName(key);
series[key] = {}; series[key] = {};
series[key]["ffmpeg"] = { series[key]["ffmpeg"] = {
name: t("cameras.label.cameraFfmpeg", { camName: camName }), name: t("cameras.label.cameraFfmpeg", { camName: camName }),
@ -170,7 +175,7 @@ export default function CameraMetrics({
}); });
}); });
return series; return series;
}, [config, statsHistory, t]); }, [config, getCameraName, statsHistory, t]);
const cameraFpsSeries = useMemo(() => { const cameraFpsSeries = useMemo(() => {
if (!statsHistory) { if (!statsHistory) {
@ -190,8 +195,7 @@ export default function CameraMetrics({
Object.entries(stats.cameras).forEach(([key, camStats]) => { Object.entries(stats.cameras).forEach(([key, camStats]) => {
if (!(key in series)) { if (!(key in series)) {
const camName = const camName = getCameraName(key);
config?.cameras?.[key]?.nickname || key.replaceAll("_", " ");
series[key] = {}; series[key] = {};
series[key]["fps"] = { series[key]["fps"] = {
name: t("cameras.label.cameraFramesPerSecond", { name: t("cameras.label.cameraFramesPerSecond", {
@ -228,7 +232,7 @@ export default function CameraMetrics({
}); });
}); });
return series; return series;
}, [config, statsHistory, t]); }, [getCameraName, statsHistory, t]);
useEffect(() => { useEffect(() => {
if (!showCameraInfoDialog) { if (!showCameraInfoDialog) {