From a1fd29b34b2588fd13e34adcdbcc2b15f94731ff Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 13 Sep 2024 07:25:29 -0600
Subject: [PATCH] Fix filter args (#13718)

* Fix filter args in events

* Fix export arg

* Don'
t fail

* Fix filter buttons

* Fix right click

* Formatting
---
 web/src/components/card/AnimatedEventCard.tsx | 12 ++++----
 web/src/components/card/ExportCard.tsx        |  2 +-
 .../components/filter/CamerasFilterButton.tsx | 13 ++++++++-
 .../components/filter/ReviewFilterGroup.tsx   | 11 +++++++-
 .../components/filter/SearchFilterGroup.tsx   | 18 +++++++++++-
 web/src/components/player/LivePlayer.tsx      |  8 ++++--
 .../player/PreviewThumbnailPlayer.tsx         |  8 ++++--
 web/src/hooks/use-api-filter.ts               |  6 +++-
 web/src/pages/Events.tsx                      | 28 +++++++++++++++++--
 9 files changed, 88 insertions(+), 18 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 8ee4acdcf..fd8096ebc 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -135,11 +135,13 @@ export function AnimatedEventCard({
             <div
               className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
               onClick={onOpenReview}
-              onAuxClick={() =>
-                window
-                  .open(`${baseUrl}review?id=${event.id}`, "_blank")
-                  ?.focus()
-              }
+              onAuxClick={(e) => {
+                if (e.button === 1) {
+                  window
+                    .open(`${baseUrl}review?id=${event.id}`, "_blank")
+                    ?.focus();
+                }
+              }}
             >
               {!alertVideos ? (
                 <img
diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index efbc61de2..9799b5d1b 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -159,7 +159,7 @@ export default function ExportCard({
                   className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                   onClick={() =>
                     shareOrCopy(
-                      `${baseUrl}exports?id=${exportedRecording.id}`,
+                      `${baseUrl}export?id=${exportedRecording.id}`,
                       exportedRecording.name.replaceAll("_", " "),
                     )
                   }
diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx
index 1b36102b8..da188b5d7 100644
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@@ -1,6 +1,6 @@
 import { Button } from "../ui/button";
 import { CameraGroupConfig } from "@/types/frigateConfig";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -53,6 +53,17 @@ export function CamerasFilterButton({
     }`;
   }, [allCamerasSelected, currentCameras]);
 
+  // ui
+
+  useEffect(() => {
+    setCurrentCameras(
+      selectedCameras === undefined ? [...allCameras] : selectedCameras,
+    );
+    setAllCamerasSelected(selectedCameras === undefined);
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCameras]);
+
   const trigger = (
     <Button
       className="flex items-center gap-2 capitalize"
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 30c2212c7..95790b171 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -2,7 +2,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
@@ -321,6 +321,15 @@ function GeneralFilterButton({
     selectedZones,
   );
 
+  // ui
+
+  useEffect(() => {
+    setCurrentLabels(selectedLabels);
+    setCurrentZones(selectedZones);
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedLabels, selectedZones]);
+
   const trigger = (
     <Button
       size="sm"
diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
index 958149923..ceed1028c 100644
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@@ -2,7 +2,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { isMobile } from "react-device-detect";
@@ -261,6 +261,14 @@ function GeneralFilterButton({
     return `${selectedLabels.length} Labels`;
   }, [selectedLabels]);
 
+  // ui
+
+  useEffect(() => {
+    setCurrentLabels(selectedLabels);
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedLabels]);
+
   const trigger = (
     <Button
       size="sm"
@@ -447,6 +455,14 @@ function ZoneFilterButton({
     return `${selectedZones.length} Zones`;
   }, [selectedZones]);
 
+  // ui
+
+  useEffect(() => {
+    setCurrentZones(selectedZones);
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedZones]);
+
   const trigger = (
     <Button
       size="sm"
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 0d7b67fa8..8038812db 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -226,9 +226,11 @@ export default function LivePlayer({
         className,
       )}
       onClick={onClick}
-      onAuxClick={() =>
-        window.open(`${baseUrl}#${cameraConfig.name}`, "_blank")?.focus()
-      }
+      onAuxClick={(e) => {
+        if (e.button === 1) {
+          window.open(`${baseUrl}#${cameraConfig.name}`, "_blank")?.focus();
+        }
+      }}
     >
       {((showStillWithoutActivity && !liveReady) || liveReady) && (
         <>
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 69a6ac6df..5c9ccb0a2 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -177,9 +177,11 @@ export default function PreviewThumbnailPlayer({
       onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
       onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
       onClick={handleOnClick}
-      onAuxClick={() =>
-        window.open(`${baseUrl}review?id=${review.id}`, "_blank")?.focus()
-      }
+      onAuxClick={(e) => {
+        if (e.button === 1) {
+          window.open(`${baseUrl}review?id=${review.id}`, "_blank")?.focus();
+        }
+      }}
       {...swipeHandlers}
     >
       {playingBack && (
diff --git a/web/src/hooks/use-api-filter.ts b/web/src/hooks/use-api-filter.ts
index 185d0df9a..1048c87e7 100644
--- a/web/src/hooks/use-api-filter.ts
+++ b/web/src/hooks/use-api-filter.ts
@@ -69,7 +69,11 @@ export function useApiFilterArgs<
         filter[key] = value.includes(",") ? value.split(",") : [value];
       } else {
         if (value != undefined) {
-          filter[key] = JSON.parse(value);
+          try {
+            filter[key] = JSON.parse(value);
+          } catch {
+            filter[key] = `${value}`;
+          }
         }
       }
     });
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index cbdd246f3..bf9105131 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -1,5 +1,5 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { useApiFilterArgs } from "@/hooks/use-api-filter";
+import useApiFilter from "@/hooks/use-api-filter";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
@@ -71,7 +71,31 @@ export default function Events() {
   // review filter
 
   const [reviewFilter, setReviewFilter, reviewSearchParams] =
-    useApiFilterArgs<ReviewFilter>();
+    useApiFilter<ReviewFilter>();
+
+  useSearchEffect("cameras", (cameras: string) => {
+    setReviewFilter({
+      ...reviewFilter,
+      cameras: cameras.includes(",") ? cameras.split(",") : [cameras],
+    });
+    return true;
+  });
+
+  useSearchEffect("labels", (labels: string) => {
+    setReviewFilter({
+      ...reviewFilter,
+      labels: labels.includes(",") ? labels.split(",") : [labels],
+    });
+    return true;
+  });
+
+  useSearchEffect("zones", (zones: string) => {
+    setReviewFilter({
+      ...reviewFilter,
+      zones: zones.includes(",") ? zones.split(",") : [zones],
+    });
+    return true;
+  });
 
   useSearchEffect("group", (reviewGroup) => {
     if (config && reviewGroup && reviewGroup != "default") {