UI tweaks (#16813)

* Add escape to close review details

* Refresh review page automatically if there are currently no items to review

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -41,6 +41,7 @@ import { useOverlayState } from "@/hooks/use-overlay-state";
 import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { LuSearch } from "react-icons/lu";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -133,6 +134,14 @@ export default function ReviewDetailDialog({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [review]);
 
+  // keyboard listener
+
+  useKeyboardListener(["Esc"], (key, modifiers) => {
+    if (key == "Esc" && modifiers.down && !modifiers.repeat) {
+      setIsOpen(false);
+    }
+  });
+
   const Overlay = isDesktop ? Sheet : MobilePage;
   const Content = isDesktop ? SheetContent : MobilePageContent;
   const Header = isDesktop ? SheetHeader : MobilePageHeader;

web/src/views/events/EventView.tsx

@@ -621,6 +621,16 @@ function DetectionReview({
 
   // existing review item
 
+  useEffect(() => {
+    if (loading || currentItems == null || itemsToReview == undefined) {
+      return;
+    }
+
+    if (currentItems.length == 0 && itemsToReview > 0) {
+      pullLatestData();
+    }
+  }, [loading, currentItems, itemsToReview, pullLatestData]);
+
   useEffect(() => {
     if (!startTime || !currentItems || currentItems.length == 0) {
       return;