- {!config?.model?.plus && (
-
- {t("frigatePlus.modelInfo.loading")}
-
- )}
- {config?.model?.plus === null && (
-
- {t("frigatePlus.modelInfo.error")}
-
- )}
- {config?.model?.plus && (
-
-
-
+ {config?.model.plus && (
+
+ {!config?.model?.plus && (
+
+ {t("frigatePlus.modelInfo.loading")}
+
+ )}
+ {config?.model?.plus === null && (
+
+ {t("frigatePlus.modelInfo.error")}
+
+ )}
+ {config?.model?.plus && (
+
+
{config.model.plus.baseModel} (
{config.model.plus.isBaseModel
@@ -291,21 +288,21 @@ export default function FrigatePlusSettingsView({
)}
)
-
-
+ }
+ />
+
{new Date(
config.model.plus.trainDate,
).toLocaleString()}
-
-
+ }
+ />
+
{config.model.plus.name} (
{config.model.plus.width +
@@ -313,226 +310,231 @@ export default function FrigatePlusSettingsView({
config.model.plus.height}
)
-
-
+ }
+ />
+
{config.model.plus.supportedDetectors.join(", ")}
-
-
-
- {t("frigatePlus.modelInfo.availableModels")}
-
-
+ )}
+
+ )}
+
+ {config?.model.plus && (
+
+
+ frigatePlus.modelInfo.modelSelect
+
+ }
+ content={
+
+ }
+ />
+
+ )}
+
+
+
+
+
+ frigatePlus.snapshotConfig.desc
+
+
+
+
+ {t("readTheDocumentation", { ns: "common" })}
+
+
+
+
+ }
+ content={
+
+
+
+
+
+ |
+ {t("frigatePlus.snapshotConfig.table.camera")}
+ |
+
+ {t(
+ "frigatePlus.snapshotConfig.table.snapshots",
+ )}
+ |
+
- frigatePlus.modelInfo.modelSelect
+ frigatePlus.snapshotConfig.table.cleanCopySnapshots
-
+ |
+
+
+
+ {Object.entries(config.cameras).map(
+ ([name, camera]) => (
+
+ |
+
+ |
+
+ {camera.snapshots.enabled ? (
+
+ ) : (
+
+ )}
+ |
+
+ {camera.snapshots?.enabled &&
+ camera.snapshots?.clean_copy ? (
+
+ ) : (
+
+ )}
+ |
+
+ ),
+ )}
+
+
+
+ {needCleanSnapshots() && (
+
+
+
+
+
+ frigatePlus.snapshotConfig.cleanCopyWarning
+
-
-
-
-
- {t("frigatePlus.snapshotConfig.title")}
-
-
-
-
-
- frigatePlus.snapshotConfig.desc
-
-
-
-
- {t("readTheDocumentation", { ns: "common" })}
-
-
-
-
- {config && (
-
-
-
-
- |
- {t("frigatePlus.snapshotConfig.table.camera")}
- |
-
- {t("frigatePlus.snapshotConfig.table.snapshots")}
- |
-
-
- frigatePlus.snapshotConfig.table.cleanCopySnapshots
-
- |
-
-
-
- {Object.entries(config.cameras).map(
- ([name, camera]) => (
-
- |
-
- |
-
- {camera.snapshots.enabled ? (
-
- ) : (
-
- )}
- |
-
- {camera.snapshots?.enabled &&
- camera.snapshots?.clean_copy ? (
-
- ) : (
-
- )}
- |
-
- ),
- )}
-
-
-
- )}
- {needCleanSnapshots() && (
-
-
-
-
-
- frigatePlus.snapshotConfig.cleanCopyWarning
-
-
+ )}
-
- )}
-
+ }
+ />
+
+
-
-
-
+
+
+
-
+
);
}
diff --git a/web/src/views/settings/NotificationsSettingsView.tsx b/web/src/views/settings/NotificationsSettingsView.tsx
deleted file mode 100644
index 77da16386..000000000
--- a/web/src/views/settings/NotificationsSettingsView.tsx
+++ /dev/null
@@ -1,785 +0,0 @@
-import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { Button } from "@/components/ui/button";
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@/components/ui/form";
-import Heading from "@/components/ui/heading";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { Toaster } from "@/components/ui/sonner";
-import { StatusBarMessagesContext } from "@/context/statusbar-provider";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { zodResolver } from "@hookform/resolvers/zod";
-import axios from "axios";
-
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-
-import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
-import { CiCircleAlert } from "react-icons/ci";
-import { Link } from "react-router-dom";
-import { toast } from "sonner";
-import useSWR from "swr";
-import { z } from "zod";
-import {
- useNotifications,
- useNotificationSuspend,
- useNotificationTest,
-} from "@/api/ws";
-import {
- Select,
- SelectTrigger,
- SelectValue,
- SelectContent,
- SelectItem,
-} from "@/components/ui/select";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import FilterSwitch from "@/components/filter/FilterSwitch";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Trans, useTranslation } from "react-i18next";
-import { useDateLocale } from "@/hooks/use-date-locale";
-import { useDocDomain } from "@/hooks/use-doc-domain";
-import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
-import { useIsAdmin } from "@/hooks/use-is-admin";
-import { cn } from "@/lib/utils";
-
-const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
-
-type NotificationSettingsValueType = {
- allEnabled: boolean;
- email?: string;
- cameras: string[];
-};
-
-type NotificationsSettingsViewProps = {
- setUnsavedChanges: React.Dispatch
>;
-};
-export default function NotificationView({
- setUnsavedChanges,
-}: NotificationsSettingsViewProps) {
- const { t } = useTranslation(["views/settings"]);
- const { getLocaleDocUrl } = useDocDomain();
-
- // roles
-
- const isAdmin = useIsAdmin();
-
- const { data: config, mutate: updateConfig } = useSWR(
- "config",
- {
- revalidateOnFocus: false,
- },
- );
-
- const allCameras = useMemo(() => {
- if (!config) {
- return [];
- }
-
- return Object.values(config.cameras).sort(
- (aConf, bConf) => aConf.ui.order - bConf.ui.order,
- );
- }, [config]);
-
- const notificationCameras = useMemo(() => {
- if (!config) {
- return [];
- }
-
- return Object.values(config.cameras)
- .filter(
- (conf) =>
- conf.enabled_in_config &&
- conf.notifications &&
- conf.notifications.enabled_in_config,
- )
- .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
- }, [config]);
-
- const { send: sendTestNotification } = useNotificationTest();
-
- // status bar
-
- const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
- const [changedValue, setChangedValue] = useState(false);
-
- useEffect(() => {
- if (changedValue) {
- addMessage(
- "notification_settings",
- t("notification.unsavedChanges"),
- undefined,
- `notification_settings`,
- );
- } else {
- removeMessage("notification_settings", `notification_settings`);
- }
- // we know that these deps are correct
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [changedValue]);
-
- // notification state
-
- const [registration, setRegistration] =
- useState();
-
- useEffect(() => {
- if (!("Notification" in window) || !window.isSecureContext) {
- return;
- }
- navigator.serviceWorker
- .getRegistration(NOTIFICATION_SERVICE_WORKER)
- .then((worker) => {
- if (worker) {
- setRegistration(worker);
- } else {
- setRegistration(null);
- }
- })
- .catch(() => {
- setRegistration(null);
- });
- }, []);
-
- // form
-
- const [isLoading, setIsLoading] = useState(false);
- const formSchema = z.object({
- allEnabled: z.boolean(),
- email: z.string(),
- cameras: z.array(z.string()),
- });
-
- const form = useForm>({
- resolver: zodResolver(formSchema),
- mode: "onChange",
- defaultValues: {
- allEnabled: config?.notifications.enabled,
- email: config?.notifications.email,
- cameras: config?.notifications.enabled
- ? []
- : notificationCameras.map((c) => c.name),
- },
- });
-
- const watchAllEnabled = form.watch("allEnabled");
- const watchCameras = form.watch("cameras");
-
- const anyCameraNotificationsEnabled = useMemo(
- () =>
- config &&
- Object.values(config.cameras).some(
- (c) =>
- c.enabled_in_config &&
- c.notifications &&
- c.notifications.enabled_in_config,
- ),
- [config],
- );
-
- const shouldFetchPubKey = Boolean(
- config &&
- (config.notifications?.enabled || anyCameraNotificationsEnabled) &&
- (watchAllEnabled ||
- (Array.isArray(watchCameras) && watchCameras.length > 0)),
- );
-
- const { data: publicKey } = useSWR(
- shouldFetchPubKey ? "notifications/pubkey" : null,
- { revalidateOnFocus: false },
- );
-
- const subscribeToNotifications = useCallback(
- (registration: ServiceWorkerRegistration) => {
- if (registration) {
- addMessage(
- "notification_settings",
- t("notification.unsavedRegistrations"),
- undefined,
- "registration",
- );
-
- registration.pushManager
- .subscribe({
- userVisibleOnly: true,
- applicationServerKey: publicKey,
- })
- .then((pushSubscription) => {
- axios
- .post("notifications/register", {
- sub: pushSubscription,
- })
- .catch(() => {
- toast.error(t("notification.toast.error.registerFailed"), {
- position: "top-center",
- });
- pushSubscription.unsubscribe();
- registration.unregister();
- setRegistration(null);
- });
- toast.success(t("notification.toast.success.registered"), {
- position: "top-center",
- });
- });
- }
- },
- [publicKey, addMessage, t],
- );
-
- useEffect(() => {
- if (watchCameras.length > 0) {
- form.setValue("allEnabled", false);
- }
- }, [watchCameras, allCameras, form]);
-
- const onCancel = useCallback(() => {
- if (!config) {
- return;
- }
-
- setUnsavedChanges(false);
- setChangedValue(false);
- form.reset({
- allEnabled: config.notifications.enabled,
- email: config.notifications.email || "",
- cameras: config?.notifications.enabled
- ? []
- : notificationCameras.map((c) => c.name),
- });
- // we know that these deps are correct
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [config, removeMessage, setUnsavedChanges]);
-
- const saveToConfig = useCallback(
- async (
- { allEnabled, email, cameras }: NotificationSettingsValueType, // values submitted via the form
- ) => {
- const allCameraNames = allCameras.map((cam) => cam.name);
-
- const enabledCameraQueries = cameras
- .map((cam) => `&cameras.${cam}.notifications.enabled=True`)
- .join("");
-
- const disabledCameraQueries = allCameraNames
- .filter((cam) => !cameras.includes(cam))
- .map(
- (cam) =>
- `&cameras.${cam}.notifications.enabled=${allEnabled ? "True" : "False"}`,
- )
- .join("");
-
- const allCameraQueries = enabledCameraQueries + disabledCameraQueries;
-
- axios
- .put(
- `config/set?notifications.enabled=${allEnabled ? "True" : "False"}¬ifications.email=${email}${allCameraQueries}`,
- {
- requires_restart: 0,
- },
- )
- .then((res) => {
- if (res.status === 200) {
- toast.success(t("notification.toast.success.settingSaved"), {
- position: "top-center",
- });
- updateConfig();
- } else {
- toast.error(
- t("toast.save.error.title", {
- errorMessage: res.statusText,
- ns: "common",
- }),
- {
- position: "top-center",
- },
- );
- }
- })
- .catch((error) => {
- const errorMessage =
- error.response?.data?.message ||
- error.response?.data?.detail ||
- "Unknown error";
- toast.error(
- t("toast.save.error.title", { errorMessage, ns: "common" }),
- {
- position: "top-center",
- },
- );
- })
- .finally(() => {
- setIsLoading(false);
- });
- },
- [updateConfig, setIsLoading, allCameras, t],
- );
-
- function onSubmit(values: z.infer) {
- setIsLoading(true);
- saveToConfig(values as NotificationSettingsValueType);
- }
-
- useEffect(() => {
- document.title = t("documentTitle.notifications");
- }, [t]);
-
- if (!("Notification" in window) || !window.isSecureContext) {
- return (
-
-
-
-
- {t("notification.notificationSettings.title")}
-
-
-
-
{t("notification.notificationSettings.desc")}
-
-
- {t("readTheDocumentation", { ns: "common" })}
-
-
-
-
-
-
-
-
- {t("notification.notificationUnavailable.title")}
-
-
-
- notification.notificationUnavailable.desc
-
-
-
- {t("readTheDocumentation", { ns: "common" })}{" "}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t("notification.notificationSettings.title")}
-
-
-
-
-
{t("notification.notificationSettings.desc")}
-
-
- {t("readTheDocumentation", { ns: "common" })}{" "}
-
-
-
-
-
-
- {isAdmin && (
-
-
- )}
-
-
-
-
-
-
-
- {t("notification.deviceSpecific")}
-
-
- {isAdmin && registration != null && registration.active && (
-
- )}
-
-
- {isAdmin && notificationCameras.length > 0 && (
-
-
-
-
- {t("notification.globalSettings.title")}
-
-
-
-
{t("notification.globalSettings.desc")}
-
-
-
-
-
-
- {notificationCameras.map((item) => (
-
- ))}
-
-
-
-
-
- )}
-
-
-
-
-
-
- {!isSuspended ? (
-
- ) : (
-
- )}
-
-
-
- {!isSuspended ? (
-
- {t("notification.active")}
-
- ) : (
-
- {t("notification.suspended", {
- time: formatSuspendedUntil(notificationSuspendUntil),
- })}
-
- )}
-
-
-
-
- {!isSuspended ? (
-
- ) : (
-
- )}
-
-
- {title}
-
- {children}
-