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

Add share button and tidy up review detail lists

Browse Source
This commit is contained in:
Nicolas Mowen 2024-09-11 19:26:26 -06:00
parent b813bcdb20
commit 45387f3777
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/card/ExportCard.tsx
View File

@ -3,7 +3,7 @@ import { LuTrash } from "react-icons/lu";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { FaDownload, FaPlay, FaShare, FaShareAlt } from "react-icons/fa"; import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
import Chip from "../indicators/Chip"; import Chip from "../indicators/Chip";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { import {

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

@ -25,7 +25,7 @@ import { cn } from "@/lib/utils";
import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog"; import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
import ObjectLifecycle from "./ObjectLifecycle"; import ObjectLifecycle from "./ObjectLifecycle";
import Chip from "@/components/indicators/Chip"; import Chip from "@/components/indicators/Chip";
import { FaDownload, FaImages } from "react-icons/fa"; import { FaDownload, FaImages, FaShareAlt } from "react-icons/fa";
import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon"; import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
import { FaArrowsRotate } from "react-icons/fa6"; import { FaArrowsRotate } from "react-icons/fa6";
import { import {
@ -34,6 +34,8 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { baseUrl } from "@/api/baseUrl";
type ReviewDetailDialogProps = { type ReviewDetailDialogProps = {
review?: ReviewSegment; review?: ReviewSegment;
@ -136,11 +138,24 @@ export default function ReviewDetailDialog({
<div className="text-sm text-primary/40">Timestamp</div> <div className="text-sm text-primary/40">Timestamp</div>
<div className="text-sm">{formattedDate}</div> <div className="text-sm">{formattedDate}</div>
</div> </div>
<Button
className="flex max-w-24 gap-2"
variant="select"
size="sm"
onClick={() =>
navigator.share({
url: `${baseUrl}review?id=${review.id}`,
})
}
>
<FaShareAlt className="size-4" />
Share
</Button>
</div> </div>
<div className="flex w-full flex-col gap-2"> <div className="flex w-full flex-col items-center gap-2">
<div className="flex flex-col gap-1.5"> <div className="flex w-full flex-col gap-1.5">
<div className="text-sm text-primary/40">Objects</div> <div className="text-sm text-primary/40">Objects</div>
<div className="flex flex-col items-start gap-2 text-sm capitalize"> <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-scroll text-sm capitalize">
{events?.map((event) => { {events?.map((event) => {
return ( return (
<div <div
@ -159,7 +174,7 @@ export default function ReviewDetailDialog({
</div> </div>
</div> </div>
{review.data.zones.length > 0 && ( {review.data.zones.length > 0 && (
<div className="flex flex-col gap-1.5"> <div className="scrollbar-container flex max-h-32 w-full flex-col gap-1.5">
<div className="text-sm text-primary/40">Zones</div> <div className="text-sm text-primary/40">Zones</div>
<div className="flex flex-col items-start gap-2 text-sm capitalize"> <div className="flex flex-col items-start gap-2 text-sm capitalize">
{review.data.zones.map((zone) => { {review.data.zones.map((zone) => {