administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-15 07:35:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add same listener for search page

Browse Source
This commit is contained in:
Nicolas Mowen 2024-10-02 07:48:13 -06:00
parent 195e2e78c7
commit 38665eb5f8
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/views/search/SearchView.tsx
View File

@ -60,6 +60,7 @@ export default function SearchView({
loadMore, loadMore,
hasMore, hasMore,
}: SearchViewProps) { }: SearchViewProps) {
const contentRef = useRef<HTMLDivElement | null>(null);
const { data: config } = useSWR<FrigateConfig>("config", { const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false, revalidateOnFocus: false,
}); });
@ -239,13 +240,19 @@ export default function SearchView({
return newIndex; return newIndex;
}); });
break; break;
case "PageDown":
contentRef.current?.scrollBy({ top: 600, behavior: "smooth" });
break;
case "PageUp":
contentRef.current?.scrollBy({ top: -600, behavior: "smooth" });
break;
} }
}, },
[uniqueResults, inputFocused], [uniqueResults, inputFocused],
); );
useKeyboardListener( useKeyboardListener(
["ArrowLeft", "ArrowRight"], ["ArrowLeft", "ArrowRight", "PageDown", "PageUp"],
onKeyboardShortcut, onKeyboardShortcut,
!inputFocused, !inputFocused,
); );
@ -346,7 +353,10 @@ export default function SearchView({
)} )}
</div> </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 && ( {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"> <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" /> <LuSearchX className="size-16" />