Update recordings view (#10585)

* Update recordings view

* Fix opening recordings view from gif

web/src/components/filter/FilterCheckBox.tsx

@@ -5,6 +5,7 @@ import { IconType } from "react-icons";
 type FilterCheckBoxProps = {
   label: string;
   CheckIcon?: IconType;
+  iconClassName?: string;
   isChecked: boolean;
   onCheckedChange: (isChecked: boolean) => void;
 };
@@ -12,6 +13,7 @@ type FilterCheckBoxProps = {
 export default function FilterCheckBox({
   label,
   CheckIcon = LuCheck,
+  iconClassName = "size-6",
   isChecked,
   onCheckedChange,
 }: FilterCheckBoxProps) {
@@ -22,9 +24,9 @@ export default function FilterCheckBox({
       onClick={() => onCheckedChange(!isChecked)}
     >
       {isChecked ? (
-        <CheckIcon className="w-6 h-6" />
+        <CheckIcon className={iconClassName} />
       ) : (
-        <div className="w-6 h-6" />
+        <div className={iconClassName} />
       )}
       <div className="ml-1 w-full flex justify-start">{label}</div>
     </Button>

web/src/components/filter/ReviewFilterGroup.tsx

@@ -280,7 +280,7 @@ type CalendarFilterButtonProps = {
   day?: Date;
   updateSelectedDay: (day?: Date) => void;
 };
-function CalendarFilterButton({
+export function CalendarFilterButton({
   reviewSummary,
   day,
   updateSelectedDay,

web/src/components/image/AnimatedEventThumbnail.tsx

@@ -7,6 +7,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import { Skeleton } from "../ui/skeleton";
+import { RecordingStartingPoint } from "@/types/record";
 
 type AnimatedEventThumbnailProps = {
   event: ReviewSegment;
@@ -18,7 +19,13 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
 
   const navigate = useNavigate();
   const onOpenReview = useCallback(() => {
-    navigate("events", { state: { review: event.id } });
+    navigate("events", {
+      state: {
+        camera: event.camera,
+        startTime: event.start_time,
+        severity: event.severity,
+      } as RecordingStartingPoint,
+    });
   }, [navigate, event]);
 
   // image behavior