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

Fix plus view resetting (#13160)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-08-18 07:41:10 -06:00
parent ef46451b80
commit 58ca44bd15
1 changed files with 124 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -242,119 +242,136 @@ export default function SubmitPlus() {
<PlusSortSelector selectedSort={sort} setSelectedSort={setSort} /> <PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
</div> </div>
<div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4"> <div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
{isValidating ? ( {!events?.length ? (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" /> <>
) : events?.length === 0 ? ( {isValidating ? (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center"> <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
<LuFolderX className="size-16" /> ) : (
No snapshots found <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
</div> <LuFolderX className="size-16" />
No snapshots found
</div>
)}
</>
) : ( ) : (
<div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"> <>
<Dialog <div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
open={upload != undefined} <Dialog
onOpenChange={(open) => (!open ? setUpload(undefined) : null)} open={upload != undefined}
> onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
<DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"> >
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}> <DialogContent className="md:max-w-3xl lg:max-w-4xl xl:max-w-7xl">
<DialogHeader> <TransformWrapper
<DialogTitle>Submit To Frigate+</DialogTitle> minScale={1.0}
<DialogDescription> wheel={{ smoothStep: 0.005 }}
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%",
}}
> >
{upload?.id && ( <DialogHeader>
<img <DialogTitle>Submit To Frigate+</DialogTitle>
className={`w-full ${grow} bg-black`} <DialogDescription>
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`} Objects in locations you want to avoid are not false
alt={`${upload?.label}`} positives. Submitting them as false positives will
/> confuse the model.
)} </DialogDescription>
</TransformComponent> </DialogHeader>
<DialogFooter> <TransformComponent
<Button onClick={() => setUpload(undefined)}>Cancel</Button> wrapperStyle={{
<Button width: "100%",
className="bg-success" height: "100%",
onClick={() => onSubmitToPlus(false)} }}
contentStyle={{
position: "relative",
width: "100%",
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)}>
</TransformWrapper> Cancel
</DialogContent> </Button>
</Dialog> <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>
{events?.map((event) => { {events?.map((event) => {
if (event.data.type != "object" || event.plus_id) { if (event.data.type != "object" || event.plus_id) {
return; return;
} }
return ( return (
<div <div
key={event.id} key={event.id}
className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl" className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl"
onClick={() => setUpload(event)} onClick={() => setUpload(event)}
> >
<div className="absolute left-0 top-2 z-40"> <div className="absolute left-0 top-2 z-40">
<Tooltip> <Tooltip>
<div className="flex"> <div className="flex">
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white"> <div className="mx-3 pb-1 text-sm text-white">
<Chip <Chip
className={`z-0 flex items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`} className={`z-0 flex items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
> >
{[event.label].map((object) => { {[event.label].map((object) => {
return getIconForLabel( return getIconForLabel(
object, object,
"size-3 text-white", "size-3 text-white",
); );
})} })}
<div className="text-xs"> <div className="text-xs">
{Math.round(event.data.score * 100)}% {Math.round(event.data.score * 100)}%
</div> </div>
</Chip> </Chip>
</div> </div>
</TooltipTrigger> </TooltipTrigger>
</div> </div>
<TooltipContent className="capitalize"> <TooltipContent className="capitalize">
{[event.label] {[event.label]
.map((text) => capitalizeFirstLetter(text)) .map((text) => capitalizeFirstLetter(text))
.sort() .sort()
.join(", ") .join(", ")
.replaceAll("-verified", "")} .replaceAll("-verified", "")}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</div>
<img
className="aspect-video h-full rounded-lg object-contain md:rounded-2xl"
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
loading="lazy"
/>
</div> </div>
<img );
className="aspect-video h-full rounded-lg object-contain md:rounded-2xl" })}
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`} </div>
loading="lazy" {!isDone && isValidating ? (
/> <div className="flex w-full items-center justify-center">
</div> <ActivityIndicator />
); </div>
})} ) : (
{!isValidating && !isDone && <div ref={lastEventRef} />} <div ref={lastEventRef} />
</div> )}
</>
)} )}
</div> </div>
</div> </div>