mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-06 13:34:13 +03:00
restore frigate+ submission inside FrigatePlusDialog with legacy behavior
when the snapshot tab was refacatored to remove the buttons, they were never re-added to FrigatePlusDialog
This commit is contained in:
Josh Hawkins
parent
1ffba7caa8
commit
7ebb700ce6
@ -6,51 +6,199 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { Event } from "@/types/event";
|
import { Event } from "@/types/event";
|
||||||
import { isDesktop, isMobile } from "react-device-detect";
|
import { isDesktop, isMobile, isSafari } from "react-device-detect";
|
||||||
import { ObjectSnapshotTab } from "../detail/SearchDetailDialog";
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { useCallback, useEffect, useState } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useTranslation, Trans } from "react-i18next";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||||
|
import { FaCheckCircle } from "react-icons/fa";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
||||||
|
import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
|
||||||
|
import { baseUrl } from "@/api/baseUrl";
|
||||||
|
import { getTranslatedLabel } from "@/utils/i18n";
|
||||||
|
import useImageLoaded from "@/hooks/use-image-loaded";
|
||||||
|
|
||||||
type FrigatePlusDialogProps = {
|
export type FrigatePlusDialogProps = {
|
||||||
upload?: Event;
|
upload?: Event;
|
||||||
dialog?: boolean;
|
dialog?: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onEventUploaded: () => void;
|
onEventUploaded: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function FrigatePlusDialog({
|
export function FrigatePlusDialog({
|
||||||
upload,
|
upload,
|
||||||
dialog = true,
|
dialog = true,
|
||||||
onClose,
|
onClose,
|
||||||
onEventUploaded,
|
onEventUploaded,
|
||||||
}: FrigatePlusDialogProps) {
|
}: FrigatePlusDialogProps) {
|
||||||
if (!upload) {
|
const { t, i18n } = useTranslation(["components/dialog"]);
|
||||||
return;
|
|
||||||
}
|
type SubmissionState = "reviewing" | "uploading" | "submitted";
|
||||||
if (dialog) {
|
const [state, setState] = useState<SubmissionState>(
|
||||||
return (
|
upload?.plus_id ? "submitted" : "reviewing",
|
||||||
<Dialog
|
);
|
||||||
open={upload != undefined}
|
useEffect(() => {
|
||||||
onOpenChange={(open) => (!open ? onClose() : null)}
|
setState(upload?.plus_id ? "submitted" : "reviewing");
|
||||||
|
}, [upload?.plus_id]);
|
||||||
|
|
||||||
|
const onSubmitToPlus = useCallback(
|
||||||
|
async (falsePositive: boolean) => {
|
||||||
|
if (!upload) return;
|
||||||
|
falsePositive
|
||||||
|
? axios.put(`events/${upload.id}/false_positive`)
|
||||||
|
: axios.post(`events/${upload.id}/plus`, { include_annotation: 1 });
|
||||||
|
setState("submitted");
|
||||||
|
onEventUploaded();
|
||||||
|
},
|
||||||
|
[upload, onEventUploaded],
|
||||||
|
);
|
||||||
|
|
||||||
|
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
||||||
|
const showCard =
|
||||||
|
!!upload &&
|
||||||
|
upload.data.type === "object" &&
|
||||||
|
upload.plus_id !== "not_enabled" &&
|
||||||
|
upload.end_time &&
|
||||||
|
upload.label !== "on_demand";
|
||||||
|
|
||||||
|
if (!dialog || !upload) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={true} onOpenChange={(open) => (!open ? onClose() : null)}>
|
||||||
|
<DialogContent
|
||||||
|
className={cn(
|
||||||
|
"scrollbar-container overflow-y-auto",
|
||||||
|
isDesktop &&
|
||||||
|
"max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
|
||||||
|
isMobile && "px-4",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DialogContent
|
<DialogHeader>
|
||||||
className={cn(
|
<DialogTitle className="sr-only">Submit to Frigate+</DialogTitle>
|
||||||
"scrollbar-container overflow-y-auto",
|
<DialogDescription className="sr-only">
|
||||||
isDesktop &&
|
Submit this snapshot to Frigate+
|
||||||
"max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
|
</DialogDescription>
|
||||||
isMobile && "px-4",
|
</DialogHeader>
|
||||||
)}
|
|
||||||
>
|
<div className="relative size-full">
|
||||||
<DialogHeader>
|
<ImageLoadingIndicator
|
||||||
<DialogTitle className="sr-only">Submit to Frigate+</DialogTitle>
|
className="absolute inset-0 aspect-video min-h-[60dvh] w-full"
|
||||||
<DialogDescription className="sr-only">
|
imgLoaded={imgLoaded}
|
||||||
Submit this snapshot to Frigate+
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<ObjectSnapshotTab
|
|
||||||
search={upload}
|
|
||||||
onEventUploaded={onEventUploaded}
|
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
<div className={imgLoaded ? "visible" : "invisible"}>
|
||||||
</Dialog>
|
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
|
||||||
);
|
<div className="flex flex-col space-y-3">
|
||||||
}
|
<TransformComponent
|
||||||
|
wrapperStyle={{ width: "100%", height: "100%" }}
|
||||||
|
contentStyle={{
|
||||||
|
position: "relative",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{upload.id && (
|
||||||
|
<div className="relative mx-auto">
|
||||||
|
<img
|
||||||
|
ref={imgRef}
|
||||||
|
className="mx-auto max-h-[60dvh] rounded-lg bg-black object-contain"
|
||||||
|
src={`${baseUrl}api/events/${upload.id}/snapshot.jpg`}
|
||||||
|
alt={`${upload.label}`}
|
||||||
|
loading={isSafari ? "eager" : "lazy"}
|
||||||
|
onLoad={onImgLoad}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TransformComponent>
|
||||||
|
|
||||||
|
{showCard && (
|
||||||
|
<Card className="p-1 text-sm md:p-2">
|
||||||
|
<CardContent className="flex flex-col items-center justify-between gap-3 p-2 md:flex-row">
|
||||||
|
<div className="flex flex-col space-y-3">
|
||||||
|
<div className="text-lg leading-none">
|
||||||
|
{t("explore.plus.submitToPlus.label")}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{t("explore.plus.submitToPlus.desc")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-full flex-1 flex-col justify-center gap-2 md:ml-8 md:w-auto md:justify-end">
|
||||||
|
{state === "reviewing" && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
{i18n.language === "en" ? (
|
||||||
|
/^[aeiou]/i.test(upload.label || "") ? (
|
||||||
|
<Trans
|
||||||
|
ns="components/dialog"
|
||||||
|
values={{ label: upload.label }}
|
||||||
|
>
|
||||||
|
explore.plus.review.question.ask_an
|
||||||
|
</Trans>
|
||||||
|
) : (
|
||||||
|
<Trans
|
||||||
|
ns="components/dialog"
|
||||||
|
values={{ label: upload.label }}
|
||||||
|
>
|
||||||
|
explore.plus.review.question.ask_a
|
||||||
|
</Trans>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<Trans
|
||||||
|
ns="components/dialog"
|
||||||
|
values={{
|
||||||
|
untranslatedLabel: upload.label,
|
||||||
|
translatedLabel: getTranslatedLabel(
|
||||||
|
upload.label,
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
explore.plus.review.question.ask_full
|
||||||
|
</Trans>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex w-full flex-row gap-2">
|
||||||
|
<Button
|
||||||
|
className="flex-1 bg-success"
|
||||||
|
aria-label={t("button.yes", { ns: "common" })}
|
||||||
|
onClick={() => {
|
||||||
|
setState("uploading");
|
||||||
|
onSubmitToPlus(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("button.yes", { ns: "common" })}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="flex-1 text-white"
|
||||||
|
aria-label={t("button.no", { ns: "common" })}
|
||||||
|
variant="destructive"
|
||||||
|
onClick={() => {
|
||||||
|
setState("uploading");
|
||||||
|
onSubmitToPlus(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("button.no", { ns: "common" })}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{state === "uploading" && <ActivityIndicator />}
|
||||||
|
{state === "submitted" && (
|
||||||
|
<div className="flex flex-row items-center justify-center gap-2">
|
||||||
|
<FaCheckCircle className="size-4 text-success" />
|
||||||
|
{t("explore.plus.review.state.submitted")}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TransformWrapper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user