UI Improvements and Tweaks (#13689)

* Improve image loading by not loading when off screen

* Add share menu to export

* Add share button and tidy up review detail lists

* Fix missing key

* Use query args for review filter

* Add object lifecycle to explore dialog

* Adjust sizing

* Simplify share button

* Always show snapshot but hide buttons for frigate+ if not applicable

* Handle case when user switches to element missing the previously selected tab

* Handle cases where share is not available

* Fix logic

web/src/pages/Events.tsx

@@ -1,5 +1,5 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import useApiFilter from "@/hooks/use-api-filter";
+import { useApiFilterArgs } 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";
@@ -54,6 +54,8 @@ export default function Events() {
         }
       })
       .catch(() => {});
+
+    return true;
   });
 
   const [startTime, setStartTime] = useState<number>();
@@ -69,7 +71,7 @@ export default function Events() {
   // review filter
 
   const [reviewFilter, setReviewFilter, reviewSearchParams] =
-    useApiFilter<ReviewFilter>();
+    useApiFilterArgs<ReviewFilter>();
 
   useSearchEffect("group", (reviewGroup) => {
     if (config && reviewGroup && reviewGroup != "default") {
@@ -83,7 +85,11 @@ export default function Events() {
           cameras: group.cameras,
         });
       }
+
+      return true;
     }
+
+    return false;
   });
 
   const onUpdateFilter = useCallback(

web/src/pages/Explore.tsx

@@ -43,6 +43,7 @@ export default function Explore() {
     setSearch(`similarity:${similarityId}`);
     // @ts-expect-error we want to clear this
     setSearchFilter({ ...searchFilter, similarity_search_id: undefined });
+    return false;
   });
 
   useEffect(() => {

web/src/pages/Exports.tsx

@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
+import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
@@ -46,6 +47,20 @@ function Exports() {
     );
   }, [exports, search]);
 
+  // Viewing
+
+  const [selected, setSelected] = useState<Export>();
+  const [selectedAspect, setSelectedAspect] = useState(0.0);
+
+  useSearchEffect("id", (id) => {
+    if (!exports) {
+      return false;
+    }
+
+    setSelected(exports.find((exp) => exp.id == id));
+    return true;
+  });
+
   // Deleting
 
   const [deleteClip, setDeleteClip] = useState<DeleteClipType | undefined>();
@@ -91,11 +106,6 @@ function Exports() {
     [mutate],
   );
 
-  // Viewing
-
-  const [selected, setSelected] = useState<Export>();
-  const [selectedAspect, setSelectedAspect] = useState(0.0);
-
   return (
     <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
       <Toaster closeButton={true} />

web/src/pages/Live.tsx

@@ -29,7 +29,11 @@ function Live() {
       if (group) {
         setCameraGroup(cameraGroup);
       }
+
+      return true;
     }
+
+    return false;
   });
 
   // fullscreen