From 38665eb5f80261c052474e9ca306763497a9b021 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 2 Oct 2024 07:48:13 -0600
Subject: [PATCH] Add same listener for search page

---
 web/src/views/search/SearchView.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 866170655..e586c8846 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/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,19 @@ export default function SearchView({
             return newIndex;
           });
           break;
+        case "PageDown":
+          contentRef.current?.scrollBy({ top: 600, behavior: "smooth" });
+          break;
+        case "PageUp":
+          contentRef.current?.scrollBy({ top: -600, behavior: "smooth" });
+          break;
       }
     },
     [uniqueResults, inputFocused],
   );
 
   useKeyboardListener(
-    ["ArrowLeft", "ArrowRight"],
+    ["ArrowLeft", "ArrowRight", "PageDown", "PageUp"],
     onKeyboardShortcut,
     !inputFocused,
   );
@@ -346,7 +353,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" />