administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-14 15:15:22 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix frigate+ dialog when using mobile page component

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-12 14:21:26 -05:00
parent 3cdaccb6af
commit 764d80e1d9
1 changed files with 71 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
web/src/components/overlay/dialog/FrigatePlusDialog.tsx
View File

@ -13,6 +13,7 @@ import { Event } from "@/types/event";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import axios from "axios"; import axios from "axios";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { isDesktop } from "react-device-detect";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import useSWR from "swr"; import useSWR from "swr";
@ -34,6 +35,9 @@ export function FrigatePlusDialog({
// layout // layout
const Title = isDesktop ? DialogTitle : "div";
const Description = isDesktop ? DialogDescription : "div";
const grow = useMemo(() => { const grow = useMemo(() => {
if (!config || !upload) { if (!config || !upload) {
return ""; return "";
@ -79,60 +83,74 @@ export function FrigatePlusDialog({
const content = ( const content = (
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}> <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
<DialogHeader className={state == "submitted" ? "sr-only" : ""}> <div className="flex flex-col space-y-3">
<DialogTitle>Submit To Frigate+</DialogTitle> <DialogHeader
<DialogDescription> className={state == "submitted" ? "sr-only" : "text-left"}
Objects in locations you want to avoid are not false positives. >
Submitting them as false positives will confuse the model. <Title
</DialogDescription> className={
</DialogHeader> !isDesktop
<TransformComponent ? "text-lg font-semibold leading-none tracking-tight"
wrapperStyle={{ : undefined
width: "100%", }
height: "100%", >
}} Submit To Frigate+
contentStyle={{ </Title>
position: "relative", <Description
width: "100%", className={!isDesktop ? "text-sm text-muted-foreground" : undefined}
height: "100%", >
}} Objects in locations you want to avoid are not false positives.
> Submitting them as false positives will confuse the model.
{upload?.id && ( </Description>
<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%",
)} }}
</TransformComponent> contentStyle={{
position: "relative",
width: "100%",
height: "100%",
}}
>
{upload?.id && (
<img
className={`w-full ${grow} bg-black`}
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
alt={`${upload?.label}`}
/>
)}
</TransformComponent>
<DialogFooter> <DialogFooter className="flex flex-row justify-end gap-2">
{state == "reviewing" && ( {state == "reviewing" && (
<> <>
{dialog && <Button onClick={onClose}>Cancel</Button>} {dialog && <Button onClick={onClose}>Cancel</Button>}
<Button <Button
className="bg-success" className="bg-success"
onClick={() => { onClick={() => {
setState("uploading"); setState("uploading");
onSubmitToPlus(false); onSubmitToPlus(false);
}} }}
> >
This is a {upload?.label} This is a {upload?.label}
</Button> </Button>
<Button <Button
className="text-white" className="text-white"
variant="destructive" variant="destructive"
onClick={() => { onClick={() => {
setState("uploading"); setState("uploading");
onSubmitToPlus(true); onSubmitToPlus(true);
}} }}
> >
This is not a {upload?.label} This is not a {upload?.label}
</Button> </Button>
</> </>
)} )}
{state == "uploading" && <ActivityIndicator />} {state == "uploading" && <ActivityIndicator />}
</DialogFooter> </DialogFooter>
</div>
</TransformWrapper> </TransformWrapper>
); );