Allow specifying group

web/src/components/card/AnimatedEventCard.tsx

@@ -14,8 +14,12 @@ import { baseUrl } from "@/api/baseUrl";
 
 type AnimatedEventCardProps = {
  event: ReviewSegment;
+ selectedGroup?: string;
 };
-export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
+export function AnimatedEventCard({
+ event,
+ selectedGroup,
+}: AnimatedEventCardProps) {
  const { data: config } = useSWR<FrigateConfig>("config");
 
  const currentHour = useMemo(() => isCurrentHour(event.start_time), [event]);
@@ -53,7 +57,8 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
 
  const navigate = useNavigate();
  const onOpenReview = useCallback(() => {
- navigate("review", {
+ const url = selectedGroup ? `review?group=${selectedGroup}` : "review";
+ navigate(url, {
  state: {
  severity: event.severity,
  recording: {
@@ -64,7 +69,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
  },
  });
  axios.post(`reviews/viewed`, { ids: [event.id] });
- }, [navigate, event]);
+ }, [navigate, selectedGroup, event]);
 
  // image behavior
 

web/src/pages/Events.tsx

@@ -68,6 +68,19 @@ export default function Events() {
  const [reviewFilter, setReviewFilter, reviewSearchParams] =
  useApiFilter<ReviewFilter>();
 
+ useSearchEffect("group", (reviewGroup) => {
+ if (config && reviewGroup) {
+ const group = config.camera_groups[reviewGroup];
+
+ if (group) {
+ setReviewFilter({
+ ...reviewFilter,
+ cameras: group.cameras,
+ });
+ }
+ }
+ });
+
  const onUpdateFilter = useCallback(
  (newFilter: ReviewFilter) => {
  setReviewFilter(newFilter);

web/src/views/live/LiveDashboardView.tsx

@@ -224,7 +224,13 @@ export default function LiveDashboardView({
  <TooltipProvider>
  <div className="flex items-center gap-2 px-1">
  {events.map((event) => {
- return <AnimatedEventCard key={event.id} event={event} />;
+ return (
+ <AnimatedEventCard
+ key={event.id}
+ event={event}
+ selectedGroup={cameraGroup}
+ />
+ );
  })}
  </div>
  </TooltipProvider>