diff --git a/web/src/components/card/TimelineItemCard.tsx b/web/src/components/card/TimelineItemCard.tsx index 8096d92f5..4bd6a2e83 100644 --- a/web/src/components/card/TimelineItemCard.tsx +++ b/web/src/components/card/TimelineItemCard.tsx @@ -1,6 +1,9 @@ -import PreviewThumbnailPlayer from "../player/PreviewThumbnailPlayer"; -import { AspectRatio } from "../ui/aspect-ratio"; -import { Card, CardContent } from "../ui/card"; +import { getTimelineItemDescription } from "@/utils/timelineUtil"; +import { Button } from "../ui/button"; +import Logo from "../Logo"; +import { formatUnixTimestampToDateTime } from "@/utils/dateUtil"; +import useSWR from "swr"; +import { FrigateConfig } from "@/types/frigateConfig"; type TimelineItemCardProps = { timeline: Timeline; @@ -10,23 +13,34 @@ export default function TimelineItemCard({ timeline, relevantPreview, }: TimelineItemCardProps) { + const { data: config } = useSWR("config"); + return ( - -
-
- +
+
+
+
+ {getTimelineItemDescription(timeline)}
-
-
{timeline.camera}
-
{timeline.data.label}
+
+ {formatUnixTimestampToDateTime(timeline.timestamp, { + strftime_fmt: + config?.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S %p", + time_style: "medium", + date_style: "medium", + })}
+
- +
); }