Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-08-04 13:47:37 +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

19
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,7 +255,8 @@ 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">
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
<DialogHeader> <DialogHeader>
<DialogTitle>Submit To Frigate+</DialogTitle> <DialogTitle>Submit To Frigate+</DialogTitle>
<DialogDescription> <DialogDescription>
@ -263,11 +265,25 @@ export default function SubmitPlus() {
the model. the model.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<TransformComponent
wrapperStyle={{
width: "100%",
height: "100%",
}}
contentStyle={{
position: "relative",
width: "100%",
height: "100%",
}}
>
{upload?.id && (
<img <img
className={`w-full ${grow} bg-black`} className={`w-full ${grow} bg-black`}
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`} src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
alt={`${upload?.label}`} alt={`${upload?.label}`}
/> />
)}
</TransformComponent>
<DialogFooter> <DialogFooter>
<Button onClick={() => setUpload(undefined)}>Cancel</Button> <Button onClick={() => setUpload(undefined)}>Cancel</Button>
<Button <Button
@ -284,6 +300,7 @@ export default function SubmitPlus() {
This is not a {upload?.label} This is not a {upload?.label}
</Button> </Button>
</DialogFooter> </DialogFooter>
</TransformWrapper>
</DialogContent> </DialogContent>
</Dialog> </Dialog>