- got to a good place on individual hotlist sounds

- bugfix Clamped numbers for sighting store

package.json

@@ -1,7 +1,7 @@
 {
   "name": "in-car-system-fe",
   "private": true,
-  "version": "1.0.25",
+  "version": "1.0.29",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/CameraSettings/CameraSettingFields.tsx

@@ -1,28 +1,22 @@
 import { Formik, Field, Form } from "formik";
 import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, ZoomInOptions } from "../../types/types";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
 import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
 import { capitalize, parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import { toast } from "sonner";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
-  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
   zoomLevel?: number;
   onZoomLevelChange?: (level: number | undefined) => void;
-  updateCameraConfigError: null | Error;
 };
 
-const CameraSettingFields = ({
+const CameraSettingFields = ({ initialData, zoomLevel, onZoomLevelChange }: CameraSettingsProps) => {
-  initialData,
-  updateCameraConfig,
-  zoomLevel,
-  onZoomLevelChange,
-}: CameraSettingsProps) => {
-  const [showPwd, setShowPwd] = useState(false);
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { state, dispatch } = useIntegrationsContext();
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
   const { cameraModeQuery, cameraModeMutation } = useCameraMode({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4];
@@ -30,6 +24,8 @@ const CameraSettingFields = ({
   const apiZoom = reverseZoomMapping(magnification);
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
   const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
+  const friendlyName = initialData?.id === "CameraA" ? state.cameraAFriendlyName : state.cameraBFriendlyName;
+  const { mutation: blackboardMutation } = useCameraBlackboard();
 
   useEffect(() => {
     if (!query?.data) return;
@@ -38,7 +34,7 @@ const CameraSettingFields = ({
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
-      friendlyName: initialData?.id ?? "",
+      friendlyName: friendlyName,
       cameraAddress: initialData?.propURI?.value ?? "",
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
@@ -47,7 +43,15 @@ const CameraSettingFields = ({
       zoom: apiZoom,
     }),
 
-    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
+    [
+      friendlyName,
+      initialData?.propURI?.value,
+      initialData?.id,
+      parsed?.username,
+      parsed?.password,
+      cameraMode,
+      apiZoom,
+    ]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -57,8 +61,17 @@ const CameraSettingFields = ({
     return errors;
   };
 
-  const handleSubmit = (values: CameraSettingValues) => {
+  const handleSubmit = async (values: CameraSettingValues) => {
-    updateCameraConfig(values);
+    const cameraSide = initialData?.id === "CameraA" ? "UPDATE_FRIENDLYNAMEA" : "UPDATE_FRIENDLYNAMEB";
+    dispatch({ type: cameraSide, payload: values.friendlyName });
+    const result = await blackboardMutation.mutateAsync({
+      operation: "INSERT",
+      path: cameraSide,
+      value: values.friendlyName,
+    });
+    if (result.reason === "OK") {
+      toast.success("Camera settings updated successfully");
+    }
   };
 
   const handleRadioButtonChange = async (levelNumber: number) => {
@@ -101,54 +114,6 @@ const CameraSettingFields = ({
           </div>
 
           <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="cameraAddress">Camera Address</label>
-            {touched.cameraAddress && errors.cameraAddress && (
-              <small className="absolute right-0 top-0 text-red-500">{errors.cameraAddress}</small>
-            )}
-            <Field
-              id="cameraAddress"
-              name="cameraAddress"
-              type="text"
-              className="p-2 border border-gray-400 rounded-lg"
-              placeholder="RTSP://..."
-            />
-          </div>
-
-          <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="userName">User Name</label>
-            {touched.userName && errors.userName && (
-              <small className="absolute right-0 top-0 text-red-500">{errors.userName}</small>
-            )}
-            <Field
-              id="userName"
-              name="userName"
-              type="text"
-              className="p-2 border border-gray-400 rounded-lg"
-              placeholder="Enter user name"
-              autoComplete="username"
-            />
-          </div>
-
-          <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="password">Password</label>
-            {touched.password && errors.password && (
-              <small className="absolute right-0 top-0 text-red-500">{errors.password}</small>
-            )}
-            <div className="flex gap-2 items-center relative mb-4">
-              <Field
-                id="password"
-                name="password"
-                type={showPwd ? "text" : "password"}
-                className="p-2 border border-gray-400 rounded-lg w-full "
-                placeholder="Enter password"
-              />
-              <FontAwesomeIcon
-                type="button"
-                className="absolute right-5 end-0"
-                onClick={() => setShowPwd((s) => !s)}
-                icon={showPwd ? faEyeSlash : faEye}
-              />
-            </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
               <div className="mx-auto grid grid-cols-3 place-items-center">
@@ -212,8 +177,12 @@ const CameraSettingFields = ({
             </div>
             <div className="mt-3">
               {
-                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
+                <button
-                  {isSubmitting ? "Saving" : "Save settings"}
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full"
+                >
+                  {isSubmitting ? "Saving..." : "Save settings"}
                 </button>
               }
             </div>

src/components/CameraSettings/CameraSettings.tsx

@@ -15,21 +15,13 @@ const CameraSettings = ({
   zoomLevel?: number;
   onZoomLevelChange?: (level: number | undefined) => void;
 }) => {
-  const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
+  const { data } = useFetchCameraConfig(side);
 
   return (
     <Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-        {
+        {<CameraSettingFields initialData={data} zoomLevel={zoomLevel} onZoomLevelChange={onZoomLevelChange} />}
-          <CameraSettingFields
-            initialData={data}
-            updateCameraConfig={updateCameraConfig}
-            zoomLevel={zoomLevel}
-            onZoomLevelChange={onZoomLevelChange}
-            updateCameraConfigError={updateCameraConfigError}
-          />
-        }
       </div>
     </Card>
   );

src/components/SessionForm/SessionCard.tsx

@@ -18,17 +18,17 @@ const SessionCard = () => {
 
   const sightings = [...new Map(sessionList?.map((vehicle) => [vehicle.vrm, vehicle]))];
 
-  const dedupedSightings = sightings.map((sighting) => sighting[1]);
+  const dedupedSightings = sightings?.map((sighting) => sighting[1]);
 
-  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
+  const vehicles = dedupedSightings?.reduce<Record<string, ReducedSightingType[]>>(
     (acc, item) => {
       const hotlisthit = Object.values(item.metadata?.hotlistMatches ?? {}).includes(true);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "A") acc.npedCatA.push(item);
+      if (item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A") acc.npedCatA.push(item);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "B") acc.npedCatB.push(item);
+      if (item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B") acc.npedCatB.push(item);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "C") acc.npedCatC.push(item);
+      if (item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C") acc.npedCatC.push(item);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "D") acc.npedCatD.push(item);
+      if (item?.metadata?.npedJSON?.["NPED CATEGORY"] === "D") acc.npedCatD.push(item);
-      if (item.metadata?.npedJSON["TAX STATUS"] === false) acc.notTaxed.push(item);
+      if (item?.metadata?.npedJSON?.["TAX STATUS"] === false) acc.notTaxed.push(item);
-      if (item.metadata?.npedJSON["MOT STATUS"] === false) acc.notMOT.push(item);
+      if (item?.metadata?.npedJSON?.["MOT STATUS"] === false) acc.notMOT.push(item);
       if (hotlisthit) acc.hotlistHit.push(item);
       acc.vehicles.push(item);
       return acc;

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -1,4 +1,4 @@
-import { Field, Form, Formik } from "formik";
+import { Field, FieldArray, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
@@ -10,6 +10,15 @@ const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
 
+  const hotlistsoundMapKeys = Array.from(state.hotlistSoundMap.entries());
+
+  const hotlistsoundMapValues = hotlistsoundMapKeys.map(([key, value]) => {
+    return { key, value };
+  });
+
+  console.log(hotlistsoundMapValues);
+  console.log(hotlistsoundMapKeys);
+
   const hotlists: Hotlist[] = state.hotlists;
 
   const soundOptions = state?.soundOptions?.map((soundOption) => ({
@@ -25,12 +34,15 @@ const SoundSettingsFields = () => {
   };
 
   const handleSubmit = async (values: FormValues) => {
+    console.log(values);
     const updatedValues = {
       ...values,
       sightingVolume: state.sightingVolume,
       NPEDsoundVolume: state.NPEDsoundVolume,
       hotlistSoundVolume: state.hotlistSoundVolume,
       soundOptions: [...(state.soundOptions ?? [])],
+      hotlists: [...(values.hotlists ?? [])],
+      hotlistSoundMap: { ...state.hotlistSoundMap },
     };
     dispatch({ type: "UPDATE", payload: updatedValues });
 
@@ -50,9 +62,11 @@ const SoundSettingsFields = () => {
       toast.success("Sound Settings successfully updated");
     }
   };
+
+  console.log(state);
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      {() => (
+      {({ values }) => (
         <Form className="flex flex-col space-y-3">
           <FormGroup>
             <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
@@ -109,7 +123,7 @@ const SoundSettingsFields = () => {
                 <SliderComponent soundCategory="HOTLISTVOLUME" />
               </div>
             </FormGroup>
-            {/* <FormGroup>
+            <FormGroup>
               <FieldArray
                 name="hotlists"
                 render={() => (
@@ -140,7 +154,7 @@ const SoundSettingsFields = () => {
                   </div>
                 )}
               />
-            </FormGroup> */}
+            </FormGroup>
           </div>
           <button
             type="submit"

src/components/SettingForms/Store/StoreFields.tsx

@@ -10,17 +10,35 @@ const StoreFields = () => {
   const totalReceived = storeQuery?.data?.totalReceived;
   const totalLost = storeQuery?.data?.totalLost;
 
+  const clampedTotalPending = totalPending !== undefined ? Math.max(0, totalPending) : 0;
+  const clampedTotalActive = totalActive !== undefined ? Math.max(0, totalActive) : 0;
+  const clampedTotalSent = totalSent !== undefined ? Math.max(0, totalSent) : 0;
+  const clampedTotalReceived = totalReceived !== undefined ? Math.max(0, totalReceived) : 0;
+  const clampedTotalLost = totalLost !== undefined ? Math.max(0, totalLost) : 0;
+
   if (storeQuery.isLoading) return <div className="p-4">Loading store data...</div>;
   if (storeQuery.error) return <div className="p-4">Error: {storeQuery.error.message}</div>;
 
   return (
     <div className="p-4">
       <ul className="text-white space-y-3">
-        <VehicleSessionItem sessionNumber={totalActive} textColour="text-gray-400" vehicleTag={"Total Active:"} />
+        <VehicleSessionItem
-        <VehicleSessionItem sessionNumber={totalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
+          sessionNumber={clampedTotalActive}
-        <VehicleSessionItem sessionNumber={totalReceived} textColour="text-green-400" vehicleTag={"Total Received:"} />
+          textColour="text-gray-400"
-        <VehicleSessionItem sessionNumber={totalPending} textColour="text-amber-400" vehicleTag={"Total Pending:"} />
+          vehicleTag={"Total Active:"}
-        <VehicleSessionItem sessionNumber={totalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
+        />
+        <VehicleSessionItem sessionNumber={clampedTotalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
+        <VehicleSessionItem
+          sessionNumber={clampedTotalReceived}
+          textColour="text-green-400"
+          vehicleTag={"Total Received:"}
+        />
+        <VehicleSessionItem
+          sessionNumber={clampedTotalPending}
+          textColour="text-amber-400"
+          vehicleTag={"Total Pending:"}
+        />
+        <VehicleSessionItem sessionNumber={clampedTotalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
       </ul>
     </div>
   );

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
-import { BLANK_IMG } from "../../utils/utils";
+import { BLANK_IMG, checkWhichHotlistHit } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
@@ -16,6 +16,8 @@ import NPED_CAT_D from "/NPED_Cat_D.svg";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";
 import Loading from "../UI/Loading";
 import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
+import HotlistSoundPlayer from "../UI/HotlistSoundPlayer";
+import { useSoundContext } from "../../context/SoundContext";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -52,10 +54,12 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
 
   const { dispatch, state: alertState } = useAlertHitContext();
   const { state: integrationState, dispatch: integrationDispatch } = useIntegrationsContext();
+  const { state: soundContextState } = useSoundContext();
+  const hotlists = soundContextState.hotlists;
   const sessionStarted = integrationState.sessionStarted;
   const sessionPaused = integrationState.sessionPaused;
   const processedRefs = useRef<Set<number | string>>(new Set());
-
+  const hotlistPlayersRef = useRef(new Map<string, () => void>());
   const hasAutoOpenedRef = useRef(false);
   const npedRef = useRef(false);
 
@@ -64,6 +68,15 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const isCatCEnabled = integrationState?.iscatEnabled?.catC;
   const isCatDEnabled = integrationState?.iscatEnabled?.catD;
 
+  const handleHotlistReady = useCallback((name: string, play: () => void) => {
+    hotlistPlayersRef.current.set(name, play);
+  }, []);
+
+  const playHotlistByName = (name: string) => {
+    const fn = hotlistPlayersRef.current.get(name);
+    if (fn) fn();
+  };
+
   const enqueue = useCallback(
     (sighting: SightingType, kind: HitKind) => {
       if (!sighting) return;
@@ -111,6 +124,22 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
 
   const rows = useMemo(() => sightings?.filter(Boolean) as SightingType[], [sightings]);
 
+  // Separate effect to play hotlist sounds on every hit
+  useEffect(() => {
+    if (!rows?.length) return;
+
+    const latestSighting = rows[0];
+    if (!latestSighting) return;
+
+    const isHotlistHit = checkIsHotListHit(latestSighting);
+    if (isHotlistHit) {
+      const matchedHotlists = checkWhichHotlistHit(latestSighting);
+      if (matchedHotlists?.[0]) {
+        playHotlistByName(matchedHotlists[0]);
+      }
+    }
+  }, [rows]);
+
   useEffect(() => {
     if (!rows?.length) return;
 
@@ -127,7 +156,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
         (npedcategory === "D" && isCatDEnabled);
 
       if (isNPED || isHotlistHit) {
-        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
+        enqueue(sighting, isNPED ? "NPED" : "HOTLIST");
       }
     }
   }, [rows, enqueue, isCatAEnabled, isCatBEnabled, isCatCEnabled, isCatDEnabled]);
@@ -198,8 +227,20 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     setSightingModalOpen(false);
     setModalQueue((q) => q.slice(1));
   };
+
   return (
     <>
+      {hotlists.map((hotlist) => {
+        return (
+          <HotlistSoundPlayer
+            key={hotlist.name}
+            hotlist={hotlist}
+            soundOptions={soundContextState.soundOptions}
+            volume={soundContextState.hotlistSoundVolume}
+            onReady={handleHotlistReady}
+          />
+        );
+      })}
       <Card className={clsx("overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4", className)}>
         <CardHeader title={title} />
         <div className="flex flex-col gap-3 ">
@@ -225,8 +266,13 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
                   onClick={() => onRowClick(obj)}
                 >
                   <div className={`flex items-center gap-3 mt-2 justify-between `}>
-                    <div className={`border p-1 `}>
+                    <div className={`hidden md:block border p-1 `}>
-                      <img src={obj?.plateUrlColour || BLANK_IMG} height={48} width={200} alt="colour patch" />
+                      <img
+                        src={obj?.plateUrlColour || BLANK_IMG}
+                        className="hidden md:block w-[200px] h-[48px]"
+                        style={{ objectFit: "cover" }}
+                        alt="colour patch"
+                      />
                     </div>
                     {isHotListHit && (
                       <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />

src/components/UI/HotlistSoundPlayer.tsx

@@ -0,0 +1,32 @@
+import { useSound } from "react-sounds";
+import notification from "../../assets/sounds/ui/notification.mp3";
+import { useCachedSoundSrc } from "../../hooks/usecachedSoundSrc";
+import type { Hotlist, SoundUploadValue } from "../../types/types";
+import { useEffect } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+type HotlistSoundPlayerProps = {
+  hotlist: Hotlist;
+  volume?: number;
+  soundOptions: SoundUploadValue[] | undefined;
+  onReady?: (name: string, play: () => void) => void;
+};
+const HotlistSoundPlayer = ({ hotlist, soundOptions, volume, onReady }: HotlistSoundPlayerProps) => {
+  const { src } = useCachedSoundSrc(hotlist.sound, soundOptions, notification);
+
+  const { play } = useSound(src, { volume: volume ?? 10 });
+
+  const playHotlistSound = useDebouncedCallback(() => {
+    play();
+  }, 500);
+
+  useEffect(() => {
+    if (!onReady) return;
+    onReady(hotlist.name, () => {
+      playHotlistSound();
+    });
+  }, [hotlist.name, onReady, playHotlistSound]);
+  return null;
+};
+
+export default HotlistSoundPlayer;

src/components/UI/ModalComponent.tsx

@@ -14,7 +14,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
       isOpen={isModalOpen}
       onRequestClose={close}
       className={clsx(
-        "bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
+        "bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[65%] h-[100%] md:h-[98%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
       )}
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100 "
       style={{

src/context/providers/IntegrationsContextProvider.tsx

@@ -68,6 +68,30 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
     fetchHotlistData();
   }, [query?.data]);
 
+  useEffect(() => {
+    async function fetchCameraNames() {
+      const cameraAResult = await mutation.mutateAsync({
+        operation: "VIEW",
+        path: "UPDATE_FRIENDLYNAMEA",
+      });
+
+      const cameraBResult = await mutation.mutateAsync({
+        operation: "VIEW",
+        path: "UPDATE_FRIENDLYNAMEB",
+      });
+
+      if (cameraAResult?.result && typeof cameraAResult.result === "string") {
+        console.log(cameraAResult?.result);
+        dispatch({ type: "UPDATE_FRIENDLYNAMEA", payload: cameraAResult.result });
+      }
+      if (cameraBResult?.result && typeof cameraBResult.result === "string") {
+        console.log(cameraBResult?.result);
+        dispatch({ type: "UPDATE_FRIENDLYNAMEB", payload: cameraBResult.result });
+      }
+    }
+    fetchCameraNames();
+  }, []);
+
   return (
     <IntegrationsContext.Provider
       value={{

src/context/providers/SoundContextProvider.tsx

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useReducer, useRef, useState, type ReactNode } from
 import { SoundContext } from "../SoundContext";
 import { initialState, reducer } from "../reducers/SoundContextReducer";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import { useHotlistData } from "../../hooks/useHotListData";
+import type { HotlistFile } from "../../types/types";
 
 type SoundContextProviderProps = {
   children: ReactNode;
@@ -13,6 +15,7 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
   const audioCtxRef = useRef<AudioContext | null>(null);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { mutation } = useCameraBlackboard();
+  const { query: hotlistQuery } = useHotlistData();
 
   useEffect(() => {
     const fetchSound = async () => {
@@ -36,6 +39,25 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!hotlistQuery?.data) return;
+    const fetchedHotlists = hotlistQuery.data.hotlists || [];
+    const hotlistSoundSettings = fetchedHotlists.map((hotlist: HotlistFile) => {
+      return {
+        name: hotlist.filename,
+        sound: state.hotlistSound,
+      };
+    });
+
+    const hotlistSoundMap = new Map<string, string>();
+    fetchedHotlists.forEach((hotlist: HotlistFile) => {
+      hotlistSoundMap.set(hotlist.filename, state.hotlistSound);
+    });
+
+    dispatch({ type: "SETHOTLISTSOUNDMAP", payload: hotlistSoundMap });
+    dispatch({ type: "SETHOTLISTS", payload: hotlistSoundSettings });
+  }, [hotlistQuery.data, state.hotlistSound]);
+
   useEffect(() => {
     const unlock = async () => {
       if (!audioCtxRef.current) audioCtxRef.current = new AudioContext();

src/context/reducers/IntegrationsContextReducer.ts

@@ -13,6 +13,8 @@ export const initialState = {
     catD: false,
   },
   hotlistFiles: [],
+  cameraAFriendlyName: "Camera A",
+  cameraBFriendlyName: "Camera B",
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -68,6 +70,18 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         hotlistFiles: state.hotlistFiles.filter((hotlist) => hotlist.filename !== action.payload),
       };
+
+    case "UPDATE_FRIENDLYNAMEA":
+      return {
+        ...state,
+        cameraAFriendlyName: action.payload,
+      };
+
+    case "UPDATE_FRIENDLYNAMEB":
+      return {
+        ...state,
+        cameraBFriendlyName: action.payload,
+      };
     default:
       return { ...state };
   }

src/context/reducers/SoundContextReducer.ts

@@ -5,6 +5,7 @@ export const initialState: SoundState = {
   NPEDsound: "popup",
   hotlistSound: "warning",
   hotlists: [{ name: "hotlistName", sound: "notification" }],
+  hotlistSoundMap: new Map<string, string>(),
   soundOptions: [
     { name: "Switch (Default)", soundFileName: "switch" },
     { name: "Popup", soundFileName: "popup" },
@@ -24,19 +25,23 @@ export const initialState: SoundState = {
 export function reducer(state: SoundState, action: SoundAction): SoundState {
   switch (action.type) {
     case "UPDATE": {
+      const nextHotlistSoundMap = new Map<string, string>();
+      if (action.payload.hotlistSoundMap) {
+        for (const [key, value] of Object.entries(action.payload.hotlistSoundMap)) {
+          nextHotlistSoundMap.set(key, value);
+        }
+      }
       return {
         ...state,
         sightingSound: action.payload.sightingSound,
         NPEDsound: action.payload.NPEDsound,
         hotlistSound: action.payload.hotlistSound,
-        hotlists: action.payload.hotlists?.map((hotlist) => ({
-          name: hotlist.name,
-          sound: hotlist.sound,
-        })),
         NPEDsoundVolume: action.payload.NPEDsoundVolume,
         sightingVolume: action.payload.sightingVolume,
         hotlistSoundVolume: action.payload.hotlistSoundVolume,
         soundOptions: action.payload.soundOptions,
+        hotlists: action.payload.hotlists,
+        hotlistSoundMap: nextHotlistSoundMap,
       };
     }
 
@@ -69,6 +74,16 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         ...state,
         uploadedSound: action.payload,
       };
+    case "SETHOTLISTS":
+      return {
+        ...state,
+        hotlists: action.payload,
+      };
+    case "SETHOTLISTSOUNDMAP":
+      return {
+        ...state,
+        hotlistSoundMap: action.payload,
+      };
     case "RESET":
       return initialState;
     default:

src/hooks/useCameraConfig.ts

@@ -31,7 +31,7 @@ const updateCamerasideConfig = async (data: { id: string | number; friendlyName:
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
-  if (!response.ok) throw new Error("Please make sure fields are filled in correctly");
+  if (!response.ok) throw new Error("Cannot update settings");
 };
 
 export const useFetchCameraConfig = (cameraSide: string) => {

src/hooks/useHotlistSounds.ts

@@ -0,0 +1,7 @@
+import type { Hotlist } from "../types/types";
+
+export function useHotlistSounds(hotlists: Hotlist[], hotlist: Hotlist) {
+  console.log(hotlists);
+  const foundHotlist = hotlists.find((item) => item.name === hotlist.name);
+  console.log(foundHotlist);
+}

src/hooks/useSightingFeed.ts

@@ -84,7 +84,6 @@ export function useSightingFeed(url: string | undefined) {
     if (!data || data.ref === -1) return;
     const isHotListHit = checkIsHotListHit(data);
     const cat = getNPEDCategory(data);
-
     const isNPEDHitA = cat === "A";
     const isNPEDHitB = cat === "B";
     const isNPEDHitC = cat === "C";

src/pages/FrontCamera.tsx

@@ -2,19 +2,28 @@ import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
+import { useIntegrationsContext } from "../context/IntegrationsContext";
 
 const FrontCamera = () => {
   const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
+  const { state } = useIntegrationsContext();
+
+  const friendlyName = state.cameraAFriendlyName || "Camera A";
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer
-        title={"Camera A"}
+        title={friendlyName}
         side="CameraA"
         settingsPage={true}
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}
       />
-      <CameraSettings title="Camera A Settings" side="CameraA" zoomLevel={zoomLevel} onZoomLevelChange={setZoomLevel} />
+      <CameraSettings
+        title={friendlyName + " Settings"}
+        side="CameraA"
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
+      />
       <Toaster />
     </div>
   );

src/pages/RearCamera.tsx

@@ -2,13 +2,16 @@ import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVi
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import { Toaster } from "sonner";
 import { useState } from "react";
+import { useIntegrationsContext } from "../context/IntegrationsContext";
 
 const RearCamera = () => {
   const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
+  const { state } = useIntegrationsContext();
+  const friendlyName = state.cameraBFriendlyName || "Camera B";
   return (
     <div className="mx-auto flex flex-col-reverse lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <CameraSettings
-        title="Camera B Settings"
+        title={friendlyName + " Settings"}
         side={"CameraB"}
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}

src/types/types.ts

@@ -324,6 +324,7 @@ export type SoundUploadValue = {
 
 export type SoundState = {
   sightingSound: SoundValue;
+  hotlistSoundMap: Map<string, string>;
   NPEDsound: SoundValue;
   hotlists: Hotlist[];
   hotlistSound: SoundValue;
@@ -345,6 +346,7 @@ type UpdateAction = {
     hotlistSoundVolume: number;
     hotlistSound: SoundValue;
     soundOptions?: SoundUploadValue[];
+    hotlistSoundMap: Map<string, string>;
   };
 };
 
@@ -367,7 +369,24 @@ type ResetAction = {
   type: "RESET";
 };
 
-export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState | ResetAction;
+type SetHotlistsAction = {
+  type: "SETHOTLISTS";
+  payload: Hotlist[];
+};
+
+type SetHotlistSoundMapAction = {
+  type: "SETHOTLISTSOUNDMAP";
+  payload: Map<string, string>;
+};
+
+export type SoundAction =
+  | UpdateAction
+  | AddAction
+  | VolumeAction
+  | UploadedState
+  | ResetAction
+  | SetHotlistsAction
+  | SetHotlistSoundMapAction;
 export type WifiSettingValues = {
   ssid: string;
   password: string;
@@ -435,6 +454,8 @@ export type NPEDSTATE = {
   npedUser: NPEDUser;
   iscatEnabled: CategoryPopups;
   hotlistFiles: HotlistFile[];
+  cameraAFriendlyName: string;
+  cameraBFriendlyName: string;
 };
 
 export type NPEDACTION = {

src/utils/config.ts

@@ -1,4 +1,4 @@
-const rawCamBase = import.meta.env.VITE_CHRIS_BOX_URL;
+const rawCamBase = import.meta.env.VITE_AGX_BOX_URL;
 const environment = import.meta.env.MODE;
 
 export const CAM_BASE = environment === "development" ? rawCamBase : window.location.origin;

src/utils/utils.ts

@@ -6,7 +6,7 @@ import warning from "../assets/sounds/ui/Warning.wav";
 import ding from "../assets/sounds/ui/Ding.wav";
 import shutter from "../assets/sounds/ui/shutter.mp3";
 import attention from "../assets/sounds/ui/Attention.wav";
-import type { HotlistMatches, SightingType } from "../types/types";
+import type { Hotlist, HotlistMatches, SightingType } from "../types/types";
 
 export function getSoundFileURL(name: string) {
   const sounds: Record<string, string> = {
@@ -215,3 +215,20 @@ export function isUtcOutOfSync(
   const driftMs = Math.abs(utc.getTime() - local.getTime() + utc.getTimezoneOffset() * 60_000);
   return { driftMs, outOfSync: driftMs > maxDriftMs };
 }
+
+export function getHotlistSoundNames(hotlists: Hotlist[], hotlistName: string) {
+  if (!hotlists || hotlists.length === 0) return;
+  const hotlistSoundName = hotlists?.find((hotlist) => hotlist.name === hotlistName)?.sound;
+  return hotlistSoundName;
+}
+
+export const checkWhichHotlistHit = (sigthing: SightingType | null) => {
+  if (!sigthing) return;
+  if (sigthing?.metadata?.hotlistMatches) {
+    const hotlistHits = Object.entries(sigthing?.metadata?.hotlistMatches)
+      .filter(([, value]) => value === true)
+      .map(([key]) => key);
+
+    return hotlistHits;
+  }
+};

vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
     host: true,
     proxy: {
       "/api": {
-        target: "http://100.72.72.70:8080",
+        target: "http://100.118.196.113:8080",
         changeOrigin: true,
       },
     },