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

clean up

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-09 09:27:51 -05:00
parent 3659c4a678
commit ce7191fa18
3 changed files with 46 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/src/components/settings/MotionTuner.tsx
View File

@ -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
camera={cameraConfig.name}
searchParams={new URLSearchParams([["motion", "1"]])}
className="w-[50%]"
/>
<div className="flex flex-col justify-evenly w-full">
<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])}
{cameraConfig ? (
<div className="flex flex-col justify-start">
<AutoUpdatingCameraImage
camera={cameraConfig.name}
searchParams={new URLSearchParams([["motion", "1"]])}
className="w-[50%]"
/>
<Label htmlFor="motion-threshold" className="px-2">
Threshold: {motionThreshold}
</Label>
<div className="flex flex-row justify-evenly w-full">
<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">
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
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>
) : (
<Skeleton className="size-full rounded-2xl" />
)}
</>
);
}

50
web/src/hooks/use-double-click.ts
View File

@ -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;

12
web/vite.config.ts
View File

@ -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,
},