diff --git a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx index 42f17109b..06ed26704 100644 --- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx +++ b/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) { diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index 25e6532d7..6d2d99fe6 100644 --- a/web/src/views/events/EventView.tsx +++ b/web/src/views/events/EventView.tsx @@ -611,23 +611,40 @@ 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) { - onSelectAllReviews(); - } - - if (key == "r" && selectedReviews.length > 0) { - currentItems?.forEach((item) => { - if (selectedReviews.includes(item.id)) { - item.has_been_reviewed = true; - markItemAsReviewed(item); + switch (key) { + case "a": + if (modifiers.ctrl) { + onSelectAllReviews(); } - }); - setSelectedReviews([]); + break; + case "r": + if (selectedReviews.length > 0) { + currentItems?.forEach((item) => { + if (selectedReviews.includes(item.id)) { + item.has_been_reviewed = true; + markItemAsReviewed(item); + } + }); + 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; } }); diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx index 866170655..7e77c20b8 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(null); const { data: config } = useSWR("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({ )} -
+
{uniqueResults?.length == 0 && !isLoading && (