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

@@ -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

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("_", " "),
                     )
                   }

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"

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"

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"

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) && (
         <>

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 && (

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}`;
+          }
         }
       }
     });

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") {