clean up

web/src/components/settings/MotionTuner.tsx

@@ -16,6 +16,7 @@ import { useCallback, useMemo, useState } from "react";
 import { Slider } from "@/components/ui/slider";
 import { Label } from "@/components/ui/label";
 import { useMotionContourArea, useMotionThreshold } from "@/api/ws";
+import { Skeleton } from "../ui/skeleton";
 
 export default function MotionTuner() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -55,7 +56,6 @@ export default function MotionTuner() {
       if (cameraConfig && threshold != motionThreshold) {
         cameraConfig.motion.threshold = threshold;
         sendMotionThreshold(threshold);
-        console.log("setting motion threshold", threshold);
       }
     },
     [cameraConfig, motionThreshold, sendMotionThreshold],
@@ -66,7 +66,6 @@ export default function MotionTuner() {
       if (cameraConfig && contour_area != motionContourArea) {
         cameraConfig.motion.contour_area = contour_area;
         sendMotionContourArea(contour_area);
-        console.log("setting motion contour area", contour_area);
       }
     },
     [cameraConfig, motionContourArea, sendMotionContourArea],
@@ -76,11 +75,6 @@ export default function MotionTuner() {
     return <ActivityIndicator />;
   }
 
-  // console.log("selected camera", selectedCamera);
-  // console.log("threshold", motionThreshold);
-  // console.log("contour area", motionContourArea);
-  // console.log(cameraConfig);
-
   return (
     <>
       <Heading as="h2">Motion Detection Tuner</Heading>
@@ -105,41 +99,47 @@ export default function MotionTuner() {
           </SelectContent>
         </Select>
       </div>
-      <AutoUpdatingCameraImage
+      {cameraConfig ? (
-        camera={cameraConfig.name}
+        <div className="flex flex-col justify-start">
-        searchParams={new URLSearchParams([["motion", "1"]])}
+          <AutoUpdatingCameraImage
-        className="w-[50%]"
+            camera={cameraConfig.name}
-      />
+            searchParams={new URLSearchParams([["motion", "1"]])}
-      <div className="flex flex-col justify-evenly w-full">
+            className="w-[50%]"
-        <div className="flex flex-row mb-5">
-          <Slider
-            id="motion-threshold"
-            className="w-[300px]"
-            value={[motionThreshold]}
-            min={10}
-            max={80}
-            step={1}
-            onValueChange={(value) => setMotionThreshold(value[0])}
           />
-          <Label htmlFor="motion-threshold" className="px-2">
+          <div className="flex flex-row justify-evenly w-full">
-            Threshold: {motionThreshold}
+            <div className="flex flex-row mb-5">
-          </Label>
+              <Slider
+                id="motion-threshold"
+                className="w-[300px]"
+                value={[motionThreshold]}
+                min={10}
+                max={80}
+                step={1}
+                onValueChange={(value) => setMotionThreshold(value[0])}
+              />
+              <Label htmlFor="motion-threshold" className="px-2">
+                Threshold: {motionThreshold}
+              </Label>
+            </div>
+            <div className="flex flex-row">
+              <Slider
+                id="motion-contour-area"
+                className="w-[300px]"
+                value={[motionContourArea]}
+                min={10}
+                max={200}
+                step={5}
+                onValueChange={(value) => setMotionContourArea(value[0])}
+              />
+              <Label htmlFor="motion-contour-area" className="px-2">
+                Contour Area: {motionContourArea}
+              </Label>
+            </div>
+          </div>
         </div>
-        <div className="flex flex-row">
+      ) : (
-          <Slider
+        <Skeleton className="size-full rounded-2xl" />
-            id="motion-contour-area"
+      )}
-            className="w-[300px]"
-            value={[motionContourArea]}
-            min={10}
-            max={200}
-            step={5}
-            onValueChange={(value) => setMotionContourArea(value[0])}
-          />
-          <Label htmlFor="motion-contour-area" className="px-2">
-            Contour Area: {motionContourArea}
-          </Label>
-        </div>
-      </div>
     </>
   );
 }

web/src/hooks/use-double-click.ts

@@ -1,50 +0,0 @@
-import { useEffect, MutableRefObject } from "react";
-
-/**
- * A simple React hook for differentiating single and double clicks on the same component.
- *
- * @param ref Dom node to watch for double clicks
- * @param latency The amount of time (in milliseconds) to wait before differentiating a single from a double click
- * @param onSingleClick A callback function for single click events
- * @param onDoubleClick A callback function for double click events
- */
-const useDoubleClick = ({
-  ref,
-  latency = 300,
-  onSingleClick = () => null,
-  onDoubleClick = () => null,
-}: {
-  ref: MutableRefObject<HTMLElement>;
-  latency?: number;
-  onSingleClick?: (e: MouseEvent) => void;
-  onDoubleClick?: (e: MouseEvent) => void;
-}) => {
-  useEffect(() => {
-    const clickRef = ref.current;
-    let clickCount = 0;
-    const handleClick = (e: MouseEvent) => {
-      clickCount += 1;
-
-      setTimeout(() => {
-        if (clickCount === 1) onSingleClick(e);
-        else if (clickCount === 2) onDoubleClick(e);
-
-        clickCount = 0;
-      }, latency);
-    };
-
-    // Add event listener for click events
-    if (clickRef) {
-      clickRef.addEventListener("click", handleClick);
-    }
-
-    // Remove event listener
-    return () => {
-      if (clickRef) {
-        clickRef.removeEventListener("click", handleClick);
-      }
-    };
-  }, [ref, latency, onSingleClick, onDoubleClick]);
-};
-
-export default useDoubleClick;

web/vite.config.ts

@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
         ws: true,
       },
       "/vod": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
       },
       "/clips": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
       },
       "/exports": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
       },
       "/ws": {
-        target: "ws://192.168.5.4:5000",
+        target: "ws://localhost:5000",
         ws: true,
       },
       "/live": {
-        target: "ws://192.168.5.4:5000",
+        target: "ws://localhost:5000",
         changeOrigin: true,
         ws: true,
       },