- refactored code around hotlist hits and sounds

- improved performace for sounds playing

src/components/SightingsWidget/SightingWidget.tsx

@@ -13,10 +13,12 @@ import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
 import popup from "../../assets/sounds/ui/popup_open.mp3";
+import notification from "../../assets/sounds/ui/notification.mp3";
 import { useSound } from "react-sounds";
 import { useNPEDContext } from "../../context/NPEDUserContext";
 import { useSoundContext } from "../../context/SoundContext";
 import Loading from "../UI/Loading";
+import { checkIsHotListHit } from "../../utils/utils";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -43,11 +45,16 @@ export default function SightingHistoryWidget({
   useNow(1000);
   const { state } = useSoundContext();
 
-  const soundSrc = useMemo(() => {
+  const soundSrcNped = useMemo(() => {
     return getSoundFileURL(state.NPEDsound) ?? popup;
   }, [state.NPEDsound]);
 
-  const { play } = useSound(soundSrc);
+  const soundSrcHotlist = useMemo(() => {
+    return getSoundFileURL(state?.hotlists?.[0]?.sound) ?? notification;
+  }, [state.hotlists]);
+
+  const { play: npedSound } = useSound(soundSrcNped);
+  const { play: hotlistsound } = useSound(soundSrcHotlist);
   const {
     sightings,
     setSelectedSighting,
@@ -78,6 +85,7 @@ export default function SightingHistoryWidget({
   }, [mostRecent, sessionStarted, setSessionList]);
 
   const hasAutoOpenedRef = useRef(false);
+  const npedRef = useRef(false);
 
   const onRowClick = useCallback(
     (sighting: SightingType) => {
@@ -98,32 +106,52 @@ export default function SightingHistoryWidget({
       const isNPEDHitA = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
       const isNPEDHitB = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
       const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
-
-      if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
+      const isNPEDHitD = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
+      if (isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD) {
         dispatch({
           type: "ADD",
           payload: obj,
         });
       }
     });
-  }, [dispatch, rows]);
+  }, [dispatch]);
 
   useEffect(() => {
-    if (hasAutoOpenedRef.current) return;
-    const firstHot = rows?.find((r) => {
-      const isHotListHit = r?.metadata?.hotlistMatches?.Hotlist0 === true;
+    if (hasAutoOpenedRef.current || npedRef.current) return;
+    const firstNPED = rows.find((r) => {
       const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
       const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
       const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isHotListHit;
+      const isNPEDHitD = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
     });
+    const firstHot = rows?.find((r) => {
+      const isHotListHit = checkIsHotListHit(r);
+
+      return isHotListHit;
+    });
+
+    if (firstNPED) {
+      setSelectedSighting(firstNPED);
+      console.log("first");
+      npedSound();
+      setSightingModalOpen(true);
+      npedRef.current = true;
+    }
+
     if (firstHot) {
       setSelectedSighting(firstHot);
-      play();
+      hotlistsound();
       setSightingModalOpen(true);
       hasAutoOpenedRef.current = true;
     }
-  }, [play, rows, setSelectedSighting, setSightingModalOpen]);
+  }, [
+    hotlistsound,
+    npedSound,
+    rows,
+    setSelectedSighting,
+    setSightingModalOpen,
+  ]);
 
   const handleClose = () => {
     setSightingModalOpen(false);
@@ -152,11 +180,8 @@ export default function SightingHistoryWidget({
                 obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
               const isNPEDHitC =
                 obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
-              const isNPEDHitD =
-                obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
               const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
-              const isHotListHit =
-                obj?.metadata?.hotlistMatches?.Hotlist0 === true;
+              const isHotListHit = checkIsHotListHit(obj);
               return (
                 <div
                   key={obj.ref}
@@ -164,9 +189,7 @@ export default function SightingHistoryWidget({
                   onClick={() => onRowClick(obj)}
                 >
                   <div
-                    className={`flex items-center gap-3 mt-2 justify-between ${
-                      isNPEDHitD ? " border-amber-600" : ""
-                    }`}
+                    className={`flex items-center gap-3 mt-2 justify-between `}
                   >
                     <div className={`border p-1 `}>
                       <img