administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 13:45:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor settings to be consistent with other page structure

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-29 06:15:14 -06:00
parent cf4517cbdb
commit 623eee2202
5 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/pages/Settings.tsx
View File

@ -17,8 +17,6 @@ import {
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"; import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import MotionTuner from "@/components/settings/MotionTuner";
import MasksAndZones from "@/components/settings/MasksAndZones";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import useOptimisticState from "@/hooks/use-optimistic-state"; import useOptimisticState from "@/hooks/use-optimistic-state";
@ -26,14 +24,16 @@ import { isMobile } from "react-device-detect";
import { FaVideo } from "react-icons/fa"; import { FaVideo } from "react-icons/fa";
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig"; import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr"; import useSWR from "swr";
import General from "@/components/settings/General";
import FilterSwitch from "@/components/filter/FilterSwitch"; import FilterSwitch from "@/components/filter/FilterSwitch";
import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter"; import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
import { PolygonType } from "@/types/canvas"; import { PolygonType } from "@/types/canvas";
import ObjectSettings from "@/components/settings/ObjectSettings";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import scrollIntoView from "scroll-into-view-if-needed"; import scrollIntoView from "scroll-into-view-if-needed";
import Authentication from "@/components/settings/Authentication"; import Authentication from "@/components/settings/Authentication";
import GeneralSettingsView from "@/views/settings/GeneralSettingsVIew";
import ObjectSettingsView from "@/views/settings/ObjectSettingsView";
import MotionTunerView from "@/views/settings/MotionTunerView";
import MasksAndZonesView from "@/views/settings/MasksAndZonesView";
export default function Settings() { export default function Settings() {
const settingsViews = [ const settingsViews = [
@ -156,17 +156,19 @@ export default function Settings() {
)} )}
</div> </div>
<div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24"> <div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
{page == "general" && <General />} {page == "general" && <GeneralSettingsView />}
{page == "debug" && <ObjectSettings selectedCamera={selectedCamera} />} {page == "debug" && (
<ObjectSettingsView selectedCamera={selectedCamera} />
)}
{page == "masks / zones" && ( {page == "masks / zones" && (
<MasksAndZones <MasksAndZonesView
selectedCamera={selectedCamera} selectedCamera={selectedCamera}
selectedZoneMask={filterZoneMask} selectedZoneMask={filterZoneMask}
setUnsavedChanges={setUnsavedChanges} setUnsavedChanges={setUnsavedChanges}
/> />
)} )}
{page == "motion tuner" && ( {page == "motion tuner" && (
<MotionTuner <MotionTunerView
selectedCamera={selectedCamera} selectedCamera={selectedCamera}
setUnsavedChanges={setUnsavedChanges} setUnsavedChanges={setUnsavedChanges}
/> />

8
web/src/components/settings/General.tsx → web/src/views/settings/GeneralSettingsVIew.tsx
View File

@ -4,8 +4,8 @@ import { Switch } from "@/components/ui/switch";
import { useCallback, useEffect } from "react"; import { useCallback, useEffect } from "react";
import { Toaster } from "sonner"; import { Toaster } from "sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import { Separator } from "../ui/separator"; import { Separator } from "../../components/ui/separator";
import { Button } from "../ui/button"; import { Button } from "../../components/ui/button";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { del as delData } from "idb-keyval"; import { del as delData } from "idb-keyval";
@ -17,11 +17,11 @@ import {
SelectGroup, SelectGroup,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
} from "../ui/select"; } from "../../components/ui/select";
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16]; const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
export default function General() { export default function GeneralSettingsView() {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const clearStoredLayouts = useCallback(() => { const clearStoredLayouts = useCallback(() => {

28
web/src/components/settings/MasksAndZones.tsx → web/src/views/settings/MasksAndZonesView.tsx
View File

@ -12,7 +12,7 @@ import {
import { PolygonCanvas } from "./PolygonCanvas"; import { PolygonCanvas } from "./PolygonCanvas";
import { Polygon, PolygonType } from "@/types/canvas"; import { Polygon, PolygonType } from "@/types/canvas";
import { interpolatePoints, parseCoordinates } from "@/utils/canvasUtil"; import { interpolatePoints, parseCoordinates } from "@/utils/canvasUtil";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import { LuExternalLink, LuPlus } from "react-icons/lu"; import { LuExternalLink, LuPlus } from "react-icons/lu";
import { import {
@ -22,29 +22,33 @@ import {
} from "@/components/ui/hover-card"; } from "@/components/ui/hover-card";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { toast } from "sonner"; import { toast } from "sonner";
import { Toaster } from "../ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { Button } from "../ui/button"; import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import {
import Heading from "../ui/heading"; Tooltip,
import ZoneEditPane from "./ZoneEditPane"; TooltipContent,
import MotionMaskEditPane from "./MotionMaskEditPane"; TooltipTrigger,
import ObjectMaskEditPane from "./ObjectMaskEditPane"; } from "@/components/ui/tooltip";
import PolygonItem from "./PolygonItem"; import Heading from "@/components/ui/heading";
import ZoneEditPane from "@/components/settings/ZoneEditPane";
import MotionMaskEditPane from "@/components/settings/MotionMaskEditPane";
import ObjectMaskEditPane from "@/components/settings/ObjectMaskEditPane";
import PolygonItem from "@/components/settings/PolygonItem";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { StatusBarMessagesContext } from "@/context/statusbar-provider"; import { StatusBarMessagesContext } from "@/context/statusbar-provider";
type MasksAndZoneProps = { type MasksAndZoneViewProps = {
selectedCamera: string; selectedCamera: string;
selectedZoneMask?: PolygonType[]; selectedZoneMask?: PolygonType[];
setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>; setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
}; };
export default function MasksAndZones({ export default function MasksAndZonesView({
selectedCamera, selectedCamera,
selectedZoneMask, selectedZoneMask,
setUnsavedChanges, setUnsavedChanges,
}: MasksAndZoneProps) { }: MasksAndZoneViewProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const [allPolygons, setAllPolygons] = useState<Polygon[]>([]); const [allPolygons, setAllPolygons] = useState<Polygon[]>([]);
const [editingPolygons, setEditingPolygons] = useState<Polygon[]>([]); const [editingPolygons, setEditingPolygons] = useState<Polygon[]>([]);

14
web/src/components/settings/MotionTuner.tsx → web/src/views/settings/MotionTunerView.tsx
View File

@ -12,17 +12,17 @@ import {
useMotionContourArea, useMotionContourArea,
useMotionThreshold, useMotionThreshold,
} from "@/api/ws"; } from "@/api/ws";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "../ui/button"; import { Button } from "@/components/ui/button";
import { Switch } from "../ui/switch"; import { Switch } from "@/components/ui/switch";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import { Separator } from "../ui/separator"; import { Separator } from "@/components/ui/separator";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { LuExternalLink } from "react-icons/lu"; import { LuExternalLink } from "react-icons/lu";
import { StatusBarMessagesContext } from "@/context/statusbar-provider"; import { StatusBarMessagesContext } from "@/context/statusbar-provider";
type MotionTunerProps = { type MotionTunerViewProps = {
selectedCamera: string; selectedCamera: string;
setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>; setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
}; };
@ -33,10 +33,10 @@ type MotionSettings = {
improve_contrast?: boolean; improve_contrast?: boolean;
}; };
export default function MotionTuner({ export default function MotionTunerView({
selectedCamera, selectedCamera,
setUnsavedChanges, setUnsavedChanges,
}: MotionTunerProps) { }: MotionTunerViewProps) {
const { data: config, mutate: updateConfig } = const { data: config, mutate: updateConfig } =
useSWR<FrigateConfig>("config"); useSWR<FrigateConfig>("config");
const [changedValue, setChangedValue] = useState(false); const [changedValue, setChangedValue] = useState(false);

16
web/src/components/settings/ObjectSettings.tsx → web/src/views/settings/ObjectSettingsView.tsx
View File

@ -5,19 +5,19 @@ import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import useSWR from "swr"; import useSWR from "swr";
import Heading from "../ui/heading"; import Heading from "@/components/ui/heading";
import { Switch } from "../ui/switch"; import { Switch } from "@/components/ui/switch";
import { usePersistence } from "@/hooks/use-persistence"; import { usePersistence } from "@/hooks/use-persistence";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useCameraActivity } from "@/hooks/use-camera-activity"; import { useCameraActivity } from "@/hooks/use-camera-activity";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ObjectType } from "@/types/ws"; import { ObjectType } from "@/types/ws";
import useDeepMemo from "@/hooks/use-deep-memo"; import useDeepMemo from "@/hooks/use-deep-memo";
import { Card } from "../ui/card"; import { Card } from "@/components/ui/card";
import { getIconForLabel } from "@/utils/iconUtil"; import { getIconForLabel } from "@/utils/iconUtil";
import { capitalizeFirstLetter } from "@/utils/stringUtil"; import { capitalizeFirstLetter } from "@/utils/stringUtil";
type ObjectSettingsProps = { type ObjectSettingsViewProps = {
selectedCamera?: string; selectedCamera?: string;
}; };
@ -25,9 +25,9 @@ type Options = { [key: string]: boolean };
const emptyObject = Object.freeze({}); const emptyObject = Object.freeze({});
export default function ObjectSettings({ export default function ObjectSettingsView({
selectedCamera, selectedCamera,
}: ObjectSettingsProps) { }: ObjectSettingsViewProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const DEBUG_OPTIONS = [ const DEBUG_OPTIONS = [