Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Add pan/pinch/zoom capability on plus snapshots (#12953)

Browse Source
This commit is contained in:
Josh Hawkins 2024-08-11 08:15:04 -05:00 committed by GitHub
parent 4afa7bf4e1
commit 67ba3dbd8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/pages/SubmitPlus.tsx
View File

@ -47,6 +47,7 @@ import { LuFolderX } from "react-icons/lu";
import { PiSlidersHorizontalFill } from "react-icons/pi";
import useSWR from "swr";
import useSWRInfinite from "swr/infinite";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
const API_LIMIT = 100;
@ -254,36 +255,52 @@ export default function SubmitPlus() {
open={upload != undefined}
onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
>
<DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
<DialogHeader>
<DialogTitle>Submit To Frigate+</DialogTitle>
<DialogDescription>
Objects in locations you want to avoid are not false
positives. Submitting them as false positives will confuse
the model.
</DialogDescription>
</DialogHeader>
<img
className={`w-full ${grow} bg-black`}
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
alt={`${upload?.label}`}
/>
<DialogFooter>
<Button onClick={() => setUpload(undefined)}>Cancel</Button>
<Button
className="bg-success"
onClick={() => onSubmitToPlus(false)}
<DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
<DialogHeader>
<DialogTitle>Submit To Frigate+</DialogTitle>
<DialogDescription>
Objects in locations you want to avoid are not false
positives. Submitting them as false positives will confuse
the model.
</DialogDescription>
</DialogHeader>
<TransformComponent
wrapperStyle={{
width: "100%",
height: "100%",
}}
contentStyle={{
position: "relative",
width: "100%",
height: "100%",
}}
>
This is a {upload?.label}
</Button>
<Button
className="text-white"
variant="destructive"
onClick={() => onSubmitToPlus(true)}
>
This is not a {upload?.label}
</Button>
</DialogFooter>
{upload?.id && (
<img
className={`w-full ${grow} bg-black`}
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
alt={`${upload?.label}`}
/>
)}
</TransformComponent>
<DialogFooter>
<Button onClick={() => setUpload(undefined)}>Cancel</Button>
<Button
className="bg-success"
onClick={() => onSubmitToPlus(false)}
>
This is a {upload?.label}
</Button>
<Button
className="text-white"
variant="destructive"
onClick={() => onSubmitToPlus(true)}
>
This is not a {upload?.label}
</Button>
</DialogFooter>
</TransformWrapper>
</DialogContent>
</Dialog>