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

Add Frigate+ dialog

Browse Source
This commit is contained in:
Nicolas Mowen 2024-10-14 16:45:37 -06:00
parent b5f99c8bd5
commit 9756829325
1 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/components/card/SearchThumbnail.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useMemo } from "react"; import { useCallback, useMemo, useState } from "react";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { getIconForLabel } from "@/utils/iconUtil"; import { getIconForLabel } from "@/utils/iconUtil";
import TimeAgo from "../dynamic/TimeAgo"; import TimeAgo from "../dynamic/TimeAgo";
@ -30,6 +30,8 @@ import {
LuTrash2, LuTrash2,
} from "react-icons/lu"; } from "react-icons/lu";
import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon"; import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
import { Event } from "@/types/event";
type SearchThumbnailProps = { type SearchThumbnailProps = {
searchResult: SearchResult; searchResult: SearchResult;
@ -44,6 +46,10 @@ export default function SearchThumbnail({
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded(); const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
// interactions
const [showFrigatePlus, setShowFrigatePlus] = useState(false);
const handleOnClick = useCallback(() => { const handleOnClick = useCallback(() => {
onClick(searchResult); onClick(searchResult);
}, [searchResult, onClick]); }, [searchResult, onClick]);
@ -78,6 +84,14 @@ export default function SearchThumbnail({
return ( return (
<div className="relative size-full cursor-pointer" onClick={handleOnClick}> <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
<FrigatePlusDialog
upload={
showFrigatePlus ? (searchResult as unknown as Event) : undefined
}
onClose={() => setShowFrigatePlus(false)}
onEventUploaded={() => {}}
/>
<ImageLoadingIndicator <ImageLoadingIndicator
className="absolute inset-0" className="absolute inset-0"
imgLoaded={imgLoaded} imgLoaded={imgLoaded}
@ -146,12 +160,17 @@ export default function SearchThumbnail({
{formattedDate} {formattedDate}
</div> </div>
<div className="flex flex-row items-center justify-end gap-4"> <div className="flex flex-row items-center justify-end gap-4">
<Tooltip> {config?.plus?.enabled && searchResult.end_time && (
<TooltipTrigger asChild> <Tooltip>
<FrigatePlusIcon className="size-5 cursor-pointer text-white" /> <TooltipTrigger asChild>
</TooltipTrigger> <FrigatePlusIcon
<TooltipContent>Submit to Frigate+</TooltipContent> className="size-5 cursor-pointer text-white"
</Tooltip> onClick={() => setShowFrigatePlus(true)}
/>
</TooltipTrigger>
<TooltipContent>Submit to Frigate+</TooltipContent>
</Tooltip>
)}
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>