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

update review activity custom component for rdp

Browse Source
This commit is contained in:
Josh Hawkins 2025-05-15 10:16:38 -05:00
parent d567740e5c
commit 1d8aaa08f8
1 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/overlay/ReviewActivityCalendar.tsx
View File

@ -1,9 +1,9 @@
import { RecordingsSummary, ReviewSummary } from "@/types/review"; import { RecordingsSummary, ReviewSummary } from "@/types/review";
import { Calendar } from "../ui/calendar"; import { Calendar } from "../ui/calendar";
import { useMemo } from "react"; import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
import { FaCircle } from "react-icons/fa"; import { FaCircle } from "react-icons/fa";
import { getUTCOffset } from "@/utils/dateUtil"; import { getUTCOffset } from "@/utils/dateUtil";
import { type DayContentProps } from "react-day-picker"; import { type DayButtonProps } from "react-day-picker";
import { LAST_24_HOURS_KEY } from "@/types/filter"; import { LAST_24_HOURS_KEY } from "@/types/filter";
import { usePersistence } from "@/hooks/use-persistence"; import { usePersistence } from "@/hooks/use-persistence";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -94,7 +94,7 @@ export default function ReviewActivityCalendar({
onSelect={onSelect} onSelect={onSelect}
modifiers={modifiers} modifiers={modifiers}
components={{ components={{
DayContent: ReviewActivityDay, DayButton: ReviewActivityDay,
}} }}
defaultMonth={selectedDay ?? new Date()} defaultMonth={selectedDay ?? new Date()}
weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType} weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
@ -102,30 +102,41 @@ export default function ReviewActivityCalendar({
); );
} }
function ReviewActivityDay({ date, activeModifiers }: DayContentProps) { function ReviewActivityDay({
day,
modifiers,
...buttonProps
}: DayButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) {
const ref = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (modifiers.focused) ref.current?.focus();
}, [modifiers.focused]);
const dayActivity = useMemo(() => { const dayActivity = useMemo(() => {
if (activeModifiers["alerts"]) { if (modifiers["alerts"]) {
return "alert"; return "alert";
} else if (activeModifiers["detections"]) { } else if (modifiers["detections"]) {
return "detection"; return "detection";
} else { } else {
return "none"; return "none";
} }
}, [activeModifiers]); }, [modifiers]);
return ( return (
<button ref={ref} {...buttonProps}>
<div className={cn("flex flex-col items-center justify-center gap-0.5")}> <div className={cn("flex flex-col items-center justify-center gap-0.5")}>
<span <span className="text-primary">{day.date.getDate()}</span>
<div
className={cn( className={cn(
"w-4", "w-4",
activeModifiers["recordings"] modifiers["recordings"]
? "border-b border-primary/60 text-primary" ? "border-b border-primary/60 text-primary"
: "text-primary/40", : "text-primary/40",
activeModifiers.selected && "border-white text-white", modifiers.selected && "border-white text-white",
)} )}
> />
{date.getDate()}
</span>
<div className="mt-0.5 flex h-2 flex-row gap-0.5"> <div className="mt-0.5 flex h-2 flex-row gap-0.5">
{dayActivity != "none" && ( {dayActivity != "none" && (
<FaCircle <FaCircle
@ -139,6 +150,7 @@ function ReviewActivityDay({ date, activeModifiers }: DayContentProps) {
)} )}
</div> </div>
</div> </div>
</button>
); );
} }