UI tweaks (#14118)

* Reset snapshot state when event is moved

* Add page listener for review page

* Add same listener for search page

* Use content height

web/src/components/overlay/dialog/FrigatePlusDialog.tsx

@@ -12,7 +12,7 @@ import {
 import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
@@ -62,6 +62,11 @@ export function FrigatePlusDialog({
     upload?.plus_id ? "submitted" : "reviewing",
   );
 
+  useEffect(
+    () => setState(upload?.plus_id ? "submitted" : "reviewing"),
+    [upload],
+  );
+
   const onSubmitToPlus = useCallback(
     async (falsePositive: boolean) => {
       if (!upload) {

web/src/views/events/EventView.tsx

@@ -611,16 +611,19 @@ function DetectionReview({
 
   // keyboard
 
-  useKeyboardListener(["a", "r"], (key, modifiers) => {
+  useKeyboardListener(["a", "r", "PageDown", "PageUp"], (key, modifiers) => {
     if (modifiers.repeat || !modifiers.down) {
       return;
     }
 
-    if (key == "a" && modifiers.ctrl) {
+    switch (key) {
+      case "a":
+        if (modifiers.ctrl) {
           onSelectAllReviews();
         }
-
+        break;
-    if (key == "r" && selectedReviews.length > 0) {
+      case "r":
+        if (selectedReviews.length > 0) {
           currentItems?.forEach((item) => {
             if (selectedReviews.includes(item.id)) {
               item.has_been_reviewed = true;
@@ -629,6 +632,20 @@ function DetectionReview({
           });
           setSelectedReviews([]);
         }
+        break;
+      case "PageDown":
+        contentRef.current?.scrollBy({
+          top: contentRef.current.clientHeight / 2,
+          behavior: "smooth",
+        });
+        break;
+      case "PageUp":
+        contentRef.current?.scrollBy({
+          top: -contentRef.current.clientHeight / 2,
+          behavior: "smooth",
+        });
+        break;
+    }
   });
 
   return (

web/src/views/search/SearchView.tsx

@@ -60,6 +60,7 @@ export default function SearchView({
   loadMore,
   hasMore,
 }: SearchViewProps) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -239,13 +240,25 @@ export default function SearchView({
             return newIndex;
           });
           break;
+        case "PageDown":
+          contentRef.current?.scrollBy({
+            top: contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
+        case "PageUp":
+          contentRef.current?.scrollBy({
+            top: -contentRef.current.clientHeight / 2,
+            behavior: "smooth",
+          });
+          break;
       }
     },
     [uniqueResults, inputFocused],
   );
 
   useKeyboardListener(
-    ["ArrowLeft", "ArrowRight"],
+    ["ArrowLeft", "ArrowRight", "PageDown", "PageUp"],
     onKeyboardShortcut,
     !inputFocused,
   );
@@ -346,7 +359,10 @@ export default function SearchView({
         )}
       </div>
 
-      <div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto">
+      <div
+        ref={contentRef}
+        className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto"
+      >
         {uniqueResults?.length == 0 && !isLoading && (
           <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
             <LuSearchX className="size-16" />