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