Show camera name when offline

This commit is contained in:
Nicolas Mowen 2024-05-26 14:00:53 -06:00
parent ff57e4daff
commit ccf2a43f6b
3 changed files with 25 additions and 21 deletions

View File

@ -1,33 +1,20 @@
import { useFrigateStats } from "@/api/ws";
import { import {
StatusBarMessagesContext, StatusBarMessagesContext,
StatusMessage, StatusMessage,
} from "@/context/statusbar-provider"; } from "@/context/statusbar-provider";
import useStats from "@/hooks/use-stats"; import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
import { FrigateStats } from "@/types/stats";
import { useContext, useEffect, useMemo } from "react"; import { useContext, useEffect, useMemo } from "react";
import { FaCheck } from "react-icons/fa"; import { FaCheck } from "react-icons/fa";
import { IoIosWarning } from "react-icons/io"; import { IoIosWarning } from "react-icons/io";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import useSWR from "swr";
export default function Statusbar() { export default function Statusbar() {
const { data: initialStats } = useSWR<FrigateStats>("stats", {
revalidateOnFocus: false,
});
const { payload: latestStats } = useFrigateStats();
const { messages, addMessage, clearMessages } = useContext( const { messages, addMessage, clearMessages } = useContext(
StatusBarMessagesContext, StatusBarMessagesContext,
)!; )!;
const stats = useMemo(() => { const stats = useAutoFrigateStats();
if (latestStats) {
return latestStats;
}
return initialStats;
}, [initialStats, latestStats]);
const cpuPercent = useMemo(() => { const cpuPercent = useMemo(() => {
const systemCpu = stats?.cpu_usages["frigate.full_system"]?.cpu; const systemCpu = stats?.cpu_usages["frigate.full_system"]?.cpu;

View File

@ -1,6 +1,5 @@
import { import {
useFrigateEvents, useFrigateEvents,
useFrigateStats,
useInitialCameraState, useInitialCameraState,
useMotionActivity, useMotionActivity,
} from "@/api/ws"; } from "@/api/ws";
@ -11,7 +10,7 @@ import { useTimelineUtils } from "./use-timeline-utils";
import { ObjectType } from "@/types/ws"; import { ObjectType } from "@/types/ws";
import useDeepMemo from "./use-deep-memo"; import useDeepMemo from "./use-deep-memo";
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import useStats from "./use-stats"; import { useAutoFrigateStats } from "./use-stats";
type useCameraActivityReturn = { type useCameraActivityReturn = {
activeTracking: boolean; activeTracking: boolean;
@ -121,21 +120,21 @@ export function useCameraActivity(
// determine if camera is offline // determine if camera is offline
const { payload: frigateStats } = useFrigateStats(); const stats = useAutoFrigateStats();
const offline = useMemo(() => { const offline = useMemo(() => {
if (!frigateStats) { if (!stats) {
return false; return false;
} }
const cameras = frigateStats["cameras"]; const cameras = stats["cameras"];
if (!cameras) { if (!cameras) {
return false; return false;
} }
return cameras[camera.name].camera_fps == 0; return cameras[camera.name].camera_fps == 0;
}, [camera, frigateStats]); }, [camera, stats]);
return { return {
activeTracking: hasActiveObjects, activeTracking: hasActiveObjects,

View File

@ -9,6 +9,7 @@ import { useMemo } from "react";
import useSWR from "swr"; import useSWR from "swr";
import useDeepMemo from "./use-deep-memo"; import useDeepMemo from "./use-deep-memo";
import { capitalizeFirstLetter } from "@/utils/stringUtil"; import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { useFrigateStats } from "@/api/ws";
export default function useStats(stats: FrigateStats | undefined) { export default function useStats(stats: FrigateStats | undefined) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
@ -91,3 +92,20 @@ export default function useStats(stats: FrigateStats | undefined) {
return { potentialProblems }; return { potentialProblems };
} }
export function useAutoFrigateStats() {
const { data: initialStats } = useSWR<FrigateStats>("stats", {
revalidateOnFocus: false,
});
const { payload: latestStats } = useFrigateStats();
const stats = useMemo(() => {
if (latestStats) {
return latestStats;
}
return initialStats;
}, [initialStats, latestStats]);
return stats;
}