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

use download button component in review detail dialog

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-14 16:02:33 -05:00
parent 13523ff5c3
commit 99386d159d
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/overlay/detail/ReviewDetailDialog.tsx
View File

@ -38,6 +38,8 @@ import {
MobilePageTitle, MobilePageTitle,
} from "@/components/mobile/MobilePage"; } from "@/components/mobile/MobilePage";
import { useOverlayState } from "@/hooks/use-overlay-state"; import { useOverlayState } from "@/hooks/use-overlay-state";
import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type ReviewDetailDialogProps = { type ReviewDetailDialogProps = {
review?: ReviewSegment; review?: ReviewSegment;
@ -143,7 +145,7 @@ export default function ReviewDetailDialog({
<Description className="sr-only">Review item details</Description> <Description className="sr-only">Review item details</Description>
<div <div
className={cn( className={cn(
"absolute flex lg:flex-col gap-2", "absolute flex gap-2 lg:flex-col",
isDesktop && "right-1 top-8", isDesktop && "right-1 top-8",
isMobile && "right-0 top-3", isMobile && "right-0 top-3",
)} )}
@ -159,20 +161,19 @@ export default function ReviewDetailDialog({
<FaShareAlt className="size-4 text-secondary-foreground" /> <FaShareAlt className="size-4 text-secondary-foreground" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal>
<TooltipContent>Share this review item</TooltipContent> <TooltipContent>Share this review item</TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<a <DownloadVideoButton
download source={`${baseUrl}api/${review.camera}/start/${review.start_time}/end/${review.end_time || Date.now() / 1000}/clip.mp4`}
href={`${baseUrl}api/${review.camera}/start/${review.start_time}/end/${review.end_time || Date.now() / 1000}/clip.mp4`} />
>
<Button size="sm">
<FaDownload className="size-4 text-secondary-foreground" />
</Button>
</a>
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal>
<TooltipContent>Download</TooltipContent> <TooltipContent>Download</TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</div> </div>
</Header> </Header>
@ -193,7 +194,7 @@ export default function ReviewDetailDialog({
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-center gap-2"> <div className="flex w-full flex-col items-center gap-2">
<div className="flex w-full flex-col gap-1.5"> <div className="flex w-full flex-col gap-1.5 lg:pr-8">
<div className="text-sm text-primary/40">Objects</div> <div className="text-sm text-primary/40">Objects</div>
<div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize"> <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize">
{events?.map((event) => { {events?.map((event) => {