Merged develop into enhancement/sessionstats

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { ReducedSightingType, SightingType } from "../../types/types";
+import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
 import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
@@ -39,6 +39,7 @@ type SightingHistoryProps = {
 };
 
 export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
+  const [modalQueue, setModalQueue] = useState<QueuedHit[]>([]);
   useNow(1000);
   const { state } = useSoundContext();
 
@@ -78,6 +79,14 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const hasAutoOpenedRef = useRef(false);
   const npedRef = useRef(false);
 
+  const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
+    const id = sighting.vrm ?? sighting.ref;
+    if (processedRefs.current.has(id)) return;
+    processedRefs.current.add(id);
+
+    setModalQueue((q) => [...q, { id, sighting, kind }]);
+  }, []);
+
   const reduceObject = (obj: SightingType): ReducedSightingType => {
     return {
       vrm: obj.vrm,
@@ -113,26 +122,15 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       const id = sighting.vrm;
 
       if (processedRefs.current.has(id)) continue;
-      const isHot = checkIsHotListHit(sighting);
-      const cat = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
+      const isHotlistHit = checkIsHotListHit(sighting);
+      const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
+      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
 
-      if (cat === "A" || cat === "B" || cat === "C") {
-        npedSound();
-        setSelectedSighting(sighting);
-        setSightingModalOpen(true);
-        processedRefs.current.add(id);
-        break; // stop after one new open per render cycle
-      }
-
-      if (isHot) {
-        hotlistsound();
-        setSelectedSighting(sighting);
-        setSightingModalOpen(true);
-        processedRefs.current.add(id);
-        break;
+      if (isNPED || isHotlistHit) {
+        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
       }
     }
-  }, [rows, hotlistsound, npedSound, setSightingModalOpen, setSelectedSighting]);
+  }, [rows, enqueue]);
 
   useEffect(() => {
     rows?.forEach((obj) => {
@@ -165,22 +163,33 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     });
 
     if (firstNPED) {
-      setSelectedSighting(firstNPED);
-      npedSound();
-      setSightingModalOpen(true);
+      enqueue(firstNPED, "NPED");
+
       npedRef.current = true;
     }
 
     if (firstHot) {
-      setSelectedSighting(firstHot);
-      hotlistsound();
-      setSightingModalOpen(true);
+      enqueue(firstHot, "HOTLIST");
+
       hasAutoOpenedRef.current = true;
     }
-  }, [hotlistsound, npedSound, setSelectedSighting]);
+  }, [enqueue, hotlistsound, npedSound, rows, setSelectedSighting, setSightingModalOpen]);
+
+  useEffect(() => {
+    if (!isSightingModalOpen && modalQueue.length > 0) {
+      const next = modalQueue[0];
+
+      if (next.kind === "NPED") npedSound();
+      else hotlistsound();
+
+      setSelectedSighting(next.sighting);
+      setSightingModalOpen(true);
+    }
+  }, [isSightingModalOpen, npedSound, hotlistsound, setSelectedSighting, setSightingModalOpen, modalQueue]);
 
   const handleClose = () => {
     setSightingModalOpen(false);
+    setModalQueue((q) => q.slice(1));
   };
   return (
     <>