From 57873b90c0cd98bbe37eeb9c49b5a37b60014bba Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 19 Apr 2024 14:52:39 -0600
Subject: [PATCH] Use existing switch component

---
 web/src/views/live/LiveCameraView.tsx | 85 ++++++++-------------------
 1 file changed, 23 insertions(+), 62 deletions(-)

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