From b2dd35b3112878d271141847222503f3e3688a78 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 20 Oct 2025 09:11:05 +0100
Subject: [PATCH] - added volume functionality for NPED notifications

---
 .../Sound/SoundSettingsFields.tsx             | 10 ++-
 .../SightingsWidget/SightingWidget.tsx        | 74 +++----------------
 .../providers/SoundContextProvider.tsx        |  1 +
 src/context/reducers/SoundContextReducer.ts   |  2 +
 src/types/types.ts                            |  3 +
 5 files changed, 26 insertions(+), 64 deletions(-)

diff --git a/src/components/SettingForms/Sound/SoundSettingsFields.tsx b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
index 7e7ab3a..b46b7fc 100644
--- a/src/components/SettingForms/Sound/SoundSettingsFields.tsx
+++ b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
@@ -24,11 +24,17 @@ const SoundSettingsFields = () => {
   };
 
   const handleSubmit = async (values: FormValues) => {
-    dispatch({ type: "UPDATE", payload: values });
+    const updatedValues = {
+      ...values,
+      sightingVolume: state.sightingVolume,
+      NPEDsoundVolume: state.NPEDsoundVolume,
+    };
+
+    dispatch({ type: "UPDATE", payload: updatedValues });
     const result = await mutation.mutateAsync({
       operation: "INSERT",
       path: "soundSettings",
-      value: values,
+      value: updatedValues,
     });
     if (result.reason !== "OK") {
       toast.error("Cannot update sound settings");
diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx
index 731166d..0d6bb2d 100644
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -38,10 +38,7 @@ type SightingHistoryProps = {
   className?: string;
 };
 
-export default function SightingHistoryWidget({
-  className,
-  title,
-}: SightingHistoryProps) {
+export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
   useNow(1000);
   const { state } = useSoundContext();
 
@@ -53,7 +50,7 @@ export default function SightingHistoryWidget({
     return getSoundFileURL(state?.hotlists?.[0]?.sound) ?? notification;
   }, [state.hotlists]);
 
-  const { play: npedSound } = useSound(soundSrcNped);
+  const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
   const { play: hotlistsound } = useSound(soundSrcHotlist);
   const {
     sightings,
@@ -98,10 +95,7 @@ export default function SightingHistoryWidget({
     [setSelectedSighting, setSightingModalOpen]
   );
 
-  const rows = useMemo(
-    () => sightings?.filter(Boolean) as SightingType[],
-    [sightings]
-  );
+  const rows = useMemo(() => sightings?.filter(Boolean) as SightingType[], [sightings]);
 
   useEffect(() => {
     if (!rows?.length) return;
@@ -129,13 +123,7 @@ export default function SightingHistoryWidget({
         break;
       }
     }
-  }, [
-    rows,
-    hotlistsound,
-    npedSound,
-    setSightingModalOpen,
-    setSelectedSighting,
-  ]);
+  }, [rows, hotlistsound, npedSound, setSightingModalOpen, setSelectedSighting]);
 
   useEffect(() => {
     rows?.forEach((obj) => {
@@ -187,12 +175,7 @@ export default function SightingHistoryWidget({
   };
   return (
     <>
-      <Card
-        className={clsx(
-          "overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4",
-          className
-        )}
-      >
+      <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 ">
           {isLoading && (
@@ -215,45 +198,16 @@ export default function SightingHistoryWidget({
                   className={`border border-gray-700 rounded-md mb-2 p-2 cursor-pointer `}
                   onClick={() => onRowClick(obj)}
                 >
-                  <div
-                    className={`flex items-center gap-3 mt-2 justify-between `}
-                  >
+                  <div className={`flex items-center gap-3 mt-2 justify-between `}>
                     <div className={`border p-1 `}>
-                      <img
-                        src={obj?.plateUrlColour || BLANK_IMG}
-                        height={48}
-                        width={200}
-                        alt="colour patch"
-                      />
+                      <img src={obj?.plateUrlColour || BLANK_IMG} height={48} width={200} alt="colour patch" />
                     </div>
                     {isHotListHit && (
-                      <img
-                        src={HotListImg}
-                        alt="hotlistHit"
-                        className="h-20 object-contain rounded-md"
-                      />
-                    )}
-                    {isNPEDHitA && (
-                      <img
-                        src={NPED_CAT_A}
-                        alt="hotlistHit"
-                        className="h-20 object-contain rounded-md"
-                      />
-                    )}
-                    {isNPEDHitB && (
-                      <img
-                        src={NPED_CAT_B}
-                        alt="hotlistHit"
-                        className="h-20 object-contain rounded-md"
-                      />
-                    )}
-                    {isNPEDHitC && (
-                      <img
-                        src={NPED_CAT_C}
-                        alt="hotlistHit"
-                        className="h-20 object-contain rounded-md"
-                      />
+                      <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />
                     )}
+                    {isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+                    {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+                    {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
                     <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                   </div>
                 </div>
@@ -262,11 +216,7 @@ export default function SightingHistoryWidget({
           </div>
         </div>
       </Card>
-      <SightingModal
-        isSightingModalOpen={isSightingModalOpen}
-        handleClose={handleClose}
-        sighting={selectedSighting}
-      />
+      <SightingModal isSightingModalOpen={isSightingModalOpen} handleClose={handleClose} sighting={selectedSighting} />
     </>
   );
 }
diff --git a/src/context/providers/SoundContextProvider.tsx b/src/context/providers/SoundContextProvider.tsx
index 07e2516..8f7fa57 100644
--- a/src/context/providers/SoundContextProvider.tsx
+++ b/src/context/providers/SoundContextProvider.tsx
@@ -20,6 +20,7 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
         operation: "VIEW",
         path: "soundSettings",
       });
+      console.log(result.result);
       dispatch({ type: "UPDATE", payload: result.result });
     };
     fetchSound();
diff --git a/src/context/reducers/SoundContextReducer.ts b/src/context/reducers/SoundContextReducer.ts
index 653caeb..791c400 100644
--- a/src/context/reducers/SoundContextReducer.ts
+++ b/src/context/reducers/SoundContextReducer.ts
@@ -29,6 +29,8 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
           name: hotlist.name,
           sound: hotlist.sound,
         })),
+        NPEDsoundVolume: action.payload.NPEDsoundVolume,
+        sightingVolume: action.payload.sightingVolume,
       };
     }
 
diff --git a/src/types/types.ts b/src/types/types.ts
index 8d45b58..fb34bc7 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -308,6 +308,9 @@ type UpdateAction = {
     sightingSound: SoundValue;
     NPEDsound: SoundValue;
     hotlists: Hotlist[];
+    sightingVolume: number;
+    NPEDsoundVolume: number;
+    hotlistSoundVolume?: number;
   };
 };