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

Use existing switch component

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-19 14:52:39 -06:00
parent 5e4c075340
commit 57873b90c0
1 changed files with 23 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
web/src/views/live/LiveCameraView.tsx
View File

@ -6,6 +6,7 @@ import {
useSnapshotsState, useSnapshotsState,
} from "@/api/ws"; } from "@/api/ws";
import CameraFeatureToggle from "@/components/dynamic/CameraFeatureToggle"; import CameraFeatureToggle from "@/components/dynamic/CameraFeatureToggle";
import FilterSwitch from "@/components/filter/FilterSwitch";
import LivePlayer from "@/components/player/LivePlayer"; import LivePlayer from "@/components/player/LivePlayer";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"; import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
@ -15,8 +16,6 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
@ -623,67 +622,29 @@ function FrigateCameraFeatures({
/> />
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="px-2 py-4 flex flex-col gap-3 rounded-2xl"> <DrawerContent className="px-2 py-4 flex flex-col gap-3 rounded-2xl">
<div className="flex justify-between items-center gap-1"> <FilterSwitch
<Label label="Object Detection"
className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer" isChecked={detectState == "ON"}
htmlFor={"camera-detect"} onCheckedChange={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
>
Object Detection
</Label>
<Switch
id={"camera-detect"}
checked={detectState == "ON"}
onCheckedChange={() =>
sendDetect(detectState == "ON" ? "OFF" : "ON")
}
/> />
</div> <FilterSwitch
<div className="flex justify-between items-center gap-1"> label="Recording"
<Label isChecked={recordState == "ON"}
className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer" onCheckedChange={() => sendRecord(recordState == "ON" ? "OFF" : "ON")}
htmlFor={"camera-record"}
>
Recording
</Label>
<Switch
id={"camera-record"}
checked={recordState == "ON"}
onCheckedChange={() =>
sendRecord(recordState == "ON" ? "OFF" : "ON")
}
/> />
</div> <FilterSwitch
<div className="flex justify-between items-center gap-1"> label="Snapshots"
<Label isChecked={snapshotState == "ON"}
className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer"
htmlFor={"camera-snapshot"}
>
Snapshots
</Label>
<Switch
id={"camera-snapshot"}
checked={snapshotState == "ON"}
onCheckedChange={() => onCheckedChange={() =>
sendSnapshot(snapshotState == "ON" ? "OFF" : "ON") sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
} }
/> />
</div>
{audioDetectEnabled && ( {audioDetectEnabled && (
<div className="flex justify-between items-center gap-1"> <FilterSwitch
<Label label="Audio Detection"
className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer" isChecked={audioState == "ON"}
htmlFor={"camera-audio-detect"} onCheckedChange={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
>
Audio Detection
</Label>
<Switch
id={"camera-audio-detect"}
checked={audioState == "ON"}
onCheckedChange={() =>
sendAudio(audioState == "ON" ? "OFF" : "ON")
}
/> />
</div>
)} )}
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>