mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-09 04:35:25 +03:00
Move debug camera to separate view
This commit is contained in:
Nicolas Mowen
parent
2be7576421
commit
c12852b4f2
150
web/src/components/camera/DebugCameraImage.tsx
Normal file
150
web/src/components/camera/DebugCameraImage.tsx
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
import { Switch } from "../ui/switch";
|
||||||
|
import { Label } from "../ui/label";
|
||||||
|
import { CameraConfig } from "@/types/frigateConfig";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { LuSettings } from "react-icons/lu";
|
||||||
|
import { useCallback, useMemo, useState } from "react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
||||||
|
import { usePersistence } from "@/hooks/use-persistence";
|
||||||
|
import AutoUpdatingCameraImage from "./AutoUpdatingCameraImage";
|
||||||
|
|
||||||
|
type Options = { [key: string]: boolean };
|
||||||
|
|
||||||
|
const emptyObject = Object.freeze({});
|
||||||
|
|
||||||
|
type DebugCameraImageProps = {
|
||||||
|
className?: string;
|
||||||
|
cameraConfig: CameraConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function DebugCameraImage({
|
||||||
|
className,
|
||||||
|
cameraConfig,
|
||||||
|
}: DebugCameraImageProps) {
|
||||||
|
const [showSettings, setShowSettings] = useState(false);
|
||||||
|
const [options, setOptions] = usePersistence(
|
||||||
|
`${cameraConfig?.name}-feed`,
|
||||||
|
emptyObject
|
||||||
|
);
|
||||||
|
const handleSetOption = useCallback(
|
||||||
|
(id: string, value: boolean) => {
|
||||||
|
const newOptions = { ...options, [id]: value };
|
||||||
|
setOptions(newOptions);
|
||||||
|
},
|
||||||
|
[options]
|
||||||
|
);
|
||||||
|
const searchParams = useMemo(
|
||||||
|
() =>
|
||||||
|
new URLSearchParams(
|
||||||
|
Object.keys(options).reduce((memo, key) => {
|
||||||
|
//@ts-ignore we know this is correct
|
||||||
|
memo.push([key, options[key] === true ? "1" : "0"]);
|
||||||
|
return memo;
|
||||||
|
}, [])
|
||||||
|
),
|
||||||
|
[options]
|
||||||
|
);
|
||||||
|
const handleToggleSettings = useCallback(() => {
|
||||||
|
setShowSettings(!showSettings);
|
||||||
|
}, [showSettings]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<AutoUpdatingCameraImage
|
||||||
|
camera={cameraConfig.name}
|
||||||
|
searchParams={searchParams}
|
||||||
|
/>
|
||||||
|
<Button onClick={handleToggleSettings} variant="link" size="sm">
|
||||||
|
<span className="w-5 h-5">
|
||||||
|
<LuSettings />
|
||||||
|
</span>{" "}
|
||||||
|
<span>{showSettings ? "Hide" : "Show"} Options</span>
|
||||||
|
</Button>
|
||||||
|
{showSettings ? (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Options</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<DebugSettings
|
||||||
|
handleSetOption={handleSetOption}
|
||||||
|
options={options}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type DebugSettingsProps = {
|
||||||
|
handleSetOption: (id: string, value: boolean) => void;
|
||||||
|
options: Options;
|
||||||
|
};
|
||||||
|
|
||||||
|
function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch
|
||||||
|
id="bbox"
|
||||||
|
checked={options["bbox"]}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
handleSetOption("bbox", isChecked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="bbox">Bounding Box</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch
|
||||||
|
id="timestamp"
|
||||||
|
checked={options["timestamp"]}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
handleSetOption("timestamp", isChecked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="timestamp">Timestamp</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch
|
||||||
|
id="zones"
|
||||||
|
checked={options["zones"]}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
handleSetOption("zones", isChecked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="zones">Zones</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch
|
||||||
|
id="mask"
|
||||||
|
checked={options["mask"]}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
handleSetOption("mask", isChecked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="mask">Mask</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch
|
||||||
|
id="motion"
|
||||||
|
checked={options["motion"]}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
handleSetOption("motion", isChecked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="motion">Motion</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Switch
|
||||||
|
id="regions"
|
||||||
|
checked={options["regions"]}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
handleSetOption("regions", isChecked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="regions">Regions</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -2,13 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
|
|||||||
import { CameraConfig } from "@/types/frigateConfig";
|
import { CameraConfig } from "@/types/frigateConfig";
|
||||||
import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
|
import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
|
||||||
import ActivityIndicator from "../ui/activity-indicator";
|
import ActivityIndicator from "../ui/activity-indicator";
|
||||||
import { Button } from "../ui/button";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { LuSettings } from "react-icons/lu";
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
|
||||||
import { Switch } from "../ui/switch";
|
|
||||||
import { Label } from "../ui/label";
|
|
||||||
import { usePersistence } from "@/hooks/use-persistence";
|
|
||||||
import MSEPlayer from "./MsePlayer";
|
import MSEPlayer from "./MsePlayer";
|
||||||
import JSMpegPlayer from "./JSMpegPlayer";
|
import JSMpegPlayer from "./JSMpegPlayer";
|
||||||
import { MdCircle, MdLeakAdd } from "react-icons/md";
|
import { MdCircle, MdLeakAdd } from "react-icons/md";
|
||||||
@ -19,8 +13,6 @@ import { useRecordingsState } from "@/api/ws";
|
|||||||
import { LivePlayerMode } from "@/types/live";
|
import { LivePlayerMode } from "@/types/live";
|
||||||
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
|
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
|
||||||
|
|
||||||
const emptyObject = Object.freeze({});
|
|
||||||
|
|
||||||
type LivePlayerProps = {
|
type LivePlayerProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
cameraConfig: CameraConfig;
|
cameraConfig: CameraConfig;
|
||||||
@ -29,8 +21,6 @@ type LivePlayerProps = {
|
|||||||
windowVisible?: boolean;
|
windowVisible?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Options = { [key: string]: boolean };
|
|
||||||
|
|
||||||
export default function LivePlayer({
|
export default function LivePlayer({
|
||||||
className,
|
className,
|
||||||
cameraConfig,
|
cameraConfig,
|
||||||
@ -65,35 +55,6 @@ export default function LivePlayer({
|
|||||||
|
|
||||||
const { payload: recording } = useRecordingsState(cameraConfig.name);
|
const { payload: recording } = useRecordingsState(cameraConfig.name);
|
||||||
|
|
||||||
// debug view settings
|
|
||||||
|
|
||||||
const [showSettings, setShowSettings] = useState(false);
|
|
||||||
const [options, setOptions] = usePersistence(
|
|
||||||
`${cameraConfig?.name}-feed`,
|
|
||||||
emptyObject
|
|
||||||
);
|
|
||||||
const handleSetOption = useCallback(
|
|
||||||
(id: string, value: boolean) => {
|
|
||||||
const newOptions = { ...options, [id]: value };
|
|
||||||
setOptions(newOptions);
|
|
||||||
},
|
|
||||||
[options]
|
|
||||||
);
|
|
||||||
const searchParams = useMemo(
|
|
||||||
() =>
|
|
||||||
new URLSearchParams(
|
|
||||||
Object.keys(options).reduce((memo, key) => {
|
|
||||||
//@ts-ignore we know this is correct
|
|
||||||
memo.push([key, options[key] === true ? "1" : "0"]);
|
|
||||||
return memo;
|
|
||||||
}, [])
|
|
||||||
),
|
|
||||||
[options]
|
|
||||||
);
|
|
||||||
const handleToggleSettings = useCallback(() => {
|
|
||||||
setShowSettings(!showSettings);
|
|
||||||
}, [showSettings]);
|
|
||||||
|
|
||||||
if (!cameraConfig) {
|
if (!cameraConfig) {
|
||||||
return <ActivityIndicator />;
|
return <ActivityIndicator />;
|
||||||
}
|
}
|
||||||
@ -133,34 +94,6 @@ export default function LivePlayer({
|
|||||||
height={cameraConfig.detect.height}
|
height={cameraConfig.detect.height}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else if (liveMode == "debug") {
|
|
||||||
player = (
|
|
||||||
<>
|
|
||||||
<AutoUpdatingCameraImage
|
|
||||||
camera={cameraConfig.name}
|
|
||||||
searchParams={searchParams}
|
|
||||||
/>
|
|
||||||
<Button onClick={handleToggleSettings} variant="link" size="sm">
|
|
||||||
<span className="w-5 h-5">
|
|
||||||
<LuSettings />
|
|
||||||
</span>{" "}
|
|
||||||
<span>{showSettings ? "Hide" : "Show"} Options</span>
|
|
||||||
</Button>
|
|
||||||
{showSettings ? (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Options</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<DebugSettings
|
|
||||||
handleSetOption={handleSetOption}
|
|
||||||
options={options}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
player = <ActivityIndicator />;
|
player = <ActivityIndicator />;
|
||||||
}
|
}
|
||||||
@ -222,75 +155,3 @@ export default function LivePlayer({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
type DebugSettingsProps = {
|
|
||||||
handleSetOption: (id: string, value: boolean) => void;
|
|
||||||
options: Options;
|
|
||||||
};
|
|
||||||
|
|
||||||
function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Switch
|
|
||||||
id="bbox"
|
|
||||||
checked={options["bbox"]}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
handleSetOption("bbox", isChecked);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="bbox">Bounding Box</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Switch
|
|
||||||
id="timestamp"
|
|
||||||
checked={options["timestamp"]}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
handleSetOption("timestamp", isChecked);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="timestamp">Timestamp</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Switch
|
|
||||||
id="zones"
|
|
||||||
checked={options["zones"]}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
handleSetOption("zones", isChecked);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="zones">Zones</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Switch
|
|
||||||
id="mask"
|
|
||||||
checked={options["mask"]}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
handleSetOption("mask", isChecked);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="mask">Mask</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Switch
|
|
||||||
id="motion"
|
|
||||||
checked={options["motion"]}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
handleSetOption("motion", isChecked);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="motion">Motion</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Switch
|
|
||||||
id="regions"
|
|
||||||
checked={options["regions"]}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
handleSetOption("regions", isChecked);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="regions">Regions</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user