- {isDesktop &&
}
- {isDesktop &&
}
- {isMobile &&
}
-
-
-
+
+
+
);
}
diff --git a/web/src/api/index.tsx b/web/src/api/index.tsx
index 3ac8806c7..a9044a6d7 100644
--- a/web/src/api/index.tsx
+++ b/web/src/api/index.tsx
@@ -29,8 +29,11 @@ export function ApiProvider({ children, options }: ApiProviderType) {
error.response &&
[401, 302, 307].includes(error.response.status)
) {
- window.location.href =
- error.response.headers.get("location") ?? "login";
+ // redirect to the login page if not already there
+ const loginPage = error.response.headers.get("location") ?? "login";
+ if (window.location.href !== loginPage) {
+ window.location.href = loginPage;
+ }
}
},
...options,
diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index a78722b66..5eedcdbcd 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -2,6 +2,7 @@ import { baseUrl } from "./baseUrl";
import { useCallback, useEffect, useState } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import {
+ EmbeddingsReindexProgressType,
FrigateCameraState,
FrigateEvent,
FrigateReview,
@@ -45,27 +46,54 @@ function useValue(): useValueReturn {
const cameraActivity: { [key: string]: object } = JSON.parse(activityValue);
- if (!cameraActivity) {
+ if (Object.keys(cameraActivity).length === 0) {
return;
}
const cameraStates: WsState = {};
Object.entries(cameraActivity).forEach(([name, state]) => {
- const { record, detect, snapshots, audio, autotracking } =
+ const {
+ record,
+ detect,
+ enabled,
+ snapshots,
+ audio,
+ notifications,
+ notifications_suspended,
+ autotracking,
+ alerts,
+ detections,
+ } =
// @ts-expect-error we know this is correct
state["config"];
cameraStates[`${name}/recordings/state`] = record ? "ON" : "OFF";
+ cameraStates[`${name}/enabled/state`] = enabled ? "ON" : "OFF";
cameraStates[`${name}/detect/state`] = detect ? "ON" : "OFF";
cameraStates[`${name}/snapshots/state`] = snapshots ? "ON" : "OFF";
cameraStates[`${name}/audio/state`] = audio ? "ON" : "OFF";
+ cameraStates[`${name}/notifications/state`] = notifications
+ ? "ON"
+ : "OFF";
+ cameraStates[`${name}/notifications/suspended`] =
+ notifications_suspended || 0;
cameraStates[`${name}/ptz_autotracker/state`] = autotracking
? "ON"
: "OFF";
+ cameraStates[`${name}/review_alerts/state`] = alerts ? "ON" : "OFF";
+ cameraStates[`${name}/review_detections/state`] = detections
+ ? "ON"
+ : "OFF";
});
- setWsState({ ...wsState, ...cameraStates });
- setHasCameraState(true);
+ setWsState((prevState) => ({
+ ...prevState,
+ ...cameraStates,
+ }));
+
+ if (Object.keys(cameraStates).length > 0) {
+ setHasCameraState(true);
+ }
// we only want this to run initially when the config is loaded
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [wsState]);
@@ -76,7 +104,10 @@ function useValue(): useValueReturn {
const data: Update = JSON.parse(event.data);
if (data) {
- setWsState({ ...wsState, [data.topic]: data.payload });
+ setWsState((prevState) => ({
+ ...prevState,
+ [data.topic]: data.payload,
+ }));
}
},
onOpen: () => {
@@ -86,6 +117,9 @@ function useValue(): useValueReturn {
retain: false,
});
},
+ onClose: () => {
+ setHasCameraState(false);
+ },
shouldReconnect: () => true,
retryOnError: true,
});
@@ -132,6 +166,17 @@ export function useWs(watchTopic: string, publishTopic: string) {
return { value, send };
}
+export function useEnabledState(camera: string): {
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(`${camera}/enabled/state`, `${camera}/enabled/set`);
+ return { payload: (payload ?? "ON") as ToggleableSetting, send };
+}
+
export function useDetectState(camera: string): {
payload: ToggleableSetting;
send: (payload: ToggleableSetting, retain?: boolean) => void;
@@ -187,6 +232,31 @@ export function useAutotrackingState(camera: string): {
return { payload: payload as ToggleableSetting, send };
}
+export function useAlertsState(camera: string): {
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(`${camera}/review_alerts/state`, `${camera}/review_alerts/set`);
+ return { payload: payload as ToggleableSetting, send };
+}
+
+export function useDetectionsState(camera: string): {
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(
+ `${camera}/review_detections/state`,
+ `${camera}/review_detections/set`,
+ );
+ return { payload: payload as ToggleableSetting, send };
+}
+
export function usePtzCommand(camera: string): {
payload: string;
send: (payload: string, retain?: boolean) => void;
@@ -302,6 +372,42 @@ export function useModelState(
return { payload: data ? data[model] : undefined };
}
+export function useEmbeddingsReindexProgress(
+ revalidateOnFocus: boolean = true,
+): {
+ payload: EmbeddingsReindexProgressType;
+} {
+ const {
+ value: { payload },
+ send: sendCommand,
+ } = useWs("embeddings_reindex_progress", "embeddingsReindexProgress");
+
+ const data = useDeepMemo(JSON.parse(payload as string));
+
+ useEffect(() => {
+ let listener = undefined;
+ if (revalidateOnFocus) {
+ sendCommand("embeddingsReindexProgress");
+ listener = () => {
+ if (document.visibilityState == "visible") {
+ sendCommand("embeddingsReindexProgress");
+ }
+ };
+ addEventListener("visibilitychange", listener);
+ }
+
+ return () => {
+ if (listener) {
+ removeEventListener("visibilitychange", listener);
+ }
+ };
+ // we know that these deps are correct
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [revalidateOnFocus]);
+
+ return { payload: data };
+}
+
export function useMotionActivity(camera: string): { payload: string } {
const {
value: { payload },
@@ -358,9 +464,45 @@ export function useImproveContrast(camera: string): {
return { payload: payload as ToggleableSetting, send };
}
-export function useEventUpdate(): { payload: string } {
+export function useTrackedObjectUpdate(): { payload: string } {
const {
value: { payload },
- } = useWs("event_update", "");
+ } = useWs("tracked_object_update", "");
return useDeepMemo(JSON.parse(payload as string));
}
+
+export function useNotifications(camera: string): {
+ payload: ToggleableSetting;
+ send: (payload: string, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(`${camera}/notifications/state`, `${camera}/notifications/set`);
+ return { payload: payload as ToggleableSetting, send };
+}
+
+export function useNotificationSuspend(camera: string): {
+ payload: string;
+ send: (payload: number, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(
+ `${camera}/notifications/suspended`,
+ `${camera}/notifications/suspend`,
+ );
+ return { payload: payload as string, send };
+}
+
+export function useNotificationTest(): {
+ payload: string;
+ send: (payload: string, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs("notification_test", "notification_test");
+ return { payload: payload as string, send };
+}
diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 41bd9372f..1b20b26f6 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -1,3 +1,4 @@
+import { useEmbeddingsReindexProgress } from "@/api/ws";
import {
StatusBarMessagesContext,
StatusMessage,
@@ -41,6 +42,23 @@ export default function Statusbar() {
});
}, [potentialProblems, addMessage, clearMessages]);
+ const { payload: reindexState } = useEmbeddingsReindexProgress();
+
+ useEffect(() => {
+ if (reindexState) {
+ if (reindexState.status == "indexing") {
+ clearMessages("embeddings-reindex");
+ addMessage(
+ "embeddings-reindex",
+ `Reindexing embeddings (${Math.floor((reindexState.processed_objects / reindexState.total_objects) * 100)}% complete)`,
+ );
+ }
+ if (reindexState.status === "completed") {
+ clearMessages("embeddings-reindex");
+ }
+ }
+ }, [reindexState, addMessage, clearMessages]);
+
return (
diff --git a/web/src/components/auth/AuthForm.tsx b/web/src/components/auth/AuthForm.tsx
index f3a435828..85bd6bccb 100644
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@@ -20,24 +20,23 @@ import {
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
+import { AuthContext } from "@/context/auth-context";
interface UserAuthFormProps extends React.HTMLAttributes
{}
export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
const [isLoading, setIsLoading] = React.useState(false);
+ const { login } = React.useContext(AuthContext);
const formSchema = z.object({
- user: z.string(),
- password: z.string(),
+ user: z.string().min(1, "Username is required"),
+ password: z.string().min(1, "Password is required"),
});
const form = useForm>({
resolver: zodResolver(formSchema),
mode: "onChange",
- defaultValues: {
- user: "",
- password: "",
- },
+ defaultValues: { user: "", password: "" },
});
const onSubmit = async (values: z.infer) => {
@@ -50,11 +49,14 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
password: values.password,
},
{
- headers: {
- "X-CSRF-TOKEN": 1,
- },
+ headers: { "X-CSRF-TOKEN": 1 },
},
);
+ const profileRes = await axios.get("/profile", { withCredentials: true });
+ login({
+ username: profileRes.data.username,
+ role: profileRes.data.role || "viewer",
+ });
window.location.href = baseUrl;
} catch (error) {
if (axios.isAxiosError(error)) {
@@ -63,7 +65,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
toast.error("Exceeded rate limit. Try again later.", {
position: "top-center",
});
- } else if (err.response?.status === 400) {
+ } else if (err.response?.status === 401) {
toast.error("Login failed", {
position: "top-center",
});
@@ -85,7 +87,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
return (