- removed console.log

Bugfix/uploadsounds

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -30,9 +30,11 @@ const SoundSettingsFields = () => {
       sightingVolume: state.sightingVolume,
       NPEDsoundVolume: state.NPEDsoundVolume,
       hotlistSoundVolume: state.hotlistSoundVolume,
+      soundOptions: [...(state.soundOptions ?? [])],
     };
 
     dispatch({ type: "UPDATE", payload: updatedValues });
+
     const result = await mutation.mutateAsync({
       operation: "INSERT",
       path: "soundSettings",

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -3,21 +3,47 @@ import FormGroup from "../components/FormGroup";
 import type { SoundUploadValue } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { toast } from "sonner";
+import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 
 const SoundUpload = () => {
-  const { dispatch } = useSoundContext();
+  const { state, dispatch } = useSoundContext();
+  const { mutation } = useCameraBlackboard();
+
   const initialValues: SoundUploadValue = {
     name: "",
     soundFile: null,
+    soundFileName: "",
+    soundUrl: "",
   };
 
-  const handleSubmit = (values: SoundUploadValue) => {
+  const handleSubmit = async (values: SoundUploadValue) => {
     if (!values.soundFile) {
       toast.warning("Please select an audio file");
-    } else {
+      return;
-      dispatch({ type: "ADD", payload: values });
-      toast.success("Sound file upload successfully");
     }
+    const alreadyExists = state?.soundOptions?.some((soundOption) => soundOption.name === values.name);
+    if (state.soundOptions?.includes(values) || alreadyExists) {
+      toast.warning("Sound already in list");
+      return;
+    }
+
+    const updatedValues = {
+      ...state,
+      soundOptions: [...(state.soundOptions ?? []), values],
+    };
+
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundSettings",
+      value: updatedValues,
+    });
+    if (result.reason !== "OK") {
+      toast.error("Cannot update sound settings");
+    } else {
+      toast.success(`${values.name} file added`);
+    }
+
+    dispatch({ type: "ADD", payload: values });
   };
 
   return (
@@ -36,7 +62,10 @@ const SoundUpload = () => {
               className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
               onChange={(e) => {
                 if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") {
+                  const url = URL.createObjectURL(e.target.files[0]);
+                  setFieldValue("soundUrl", url);
                   setFieldValue("name", e.target.files[0].name);
+                  setFieldValue("soundFileName", e.target.files[0].name);
                   setFieldValue("soundFile", e.target.files[0]);
                 } else {
                   setFieldError("soundFile", "Not an mp3 file");

src/components/SightingModal/SightingModal.tsx

@@ -23,8 +23,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
   const { dispatch } = useAlertHitContext();
   const { query, mutation } = useCameraBlackboard();
 
-  const hotlistName = getHotlistName(sighting?.metadata?.hotlistMatches);
+  const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
-
   const handleAcknowledgeButton = () => {
     try {
       if (!sighting) {
@@ -117,16 +116,6 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
             <div className="flex flex-col md:flex-row gap-3 items-center">
               <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
               <img src={sighting?.plateUrlColour} alt="plate patch" className="h-16 object-contain rounded-md" />
-              {hotlistName && (
-                <div>
-                  <p className="text-gray-300">Hotlist</p>
-                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500">
-                    <p className="font-medium text-2xl break-all text-amber-800">
-                      {hotlistName ? hotlistName[0].replace(/\.csv$/i, "") : "-"}
-                    </p>
-                  </div>
-                </div>
-              )}
             </div>
 
             {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
@@ -134,6 +123,20 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
             {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" />}
           </div>
+          {hotlistNames && (
+            <div className="flex flex-col border-b border-gray-600 mb-4">
+              <p className="text-gray-300">Hotlists</p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
+                {hotlistNames.map((hotlistName) => (
+                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2">
+                    <p className="font-medium text-2xl break-all text-amber-800">
+                      {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
           <div className="flex flex-col lg:flex-row items-center gap-3">
             <img
               src={sighting?.overviewUrl}

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,16 +39,25 @@ type SightingHistoryProps = {
 };
 
 export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
+  const [modalQueue, setModalQueue] = useState<QueuedHit[]>([]);
   useNow(1000);
   const { state } = useSoundContext();
 
   const soundSrcNped = useMemo(() => {
+    if (state?.NPEDsound?.includes(".mp3") || state.NPEDsound?.includes(".wav")) {
+      const file = state.soundOptions?.find((item) => item.name === state.NPEDsound);
+      return file?.soundUrl ?? popup;
+    }
     return getSoundFileURL(state.NPEDsound) ?? popup;
-  }, [state.NPEDsound]);
+  }, [state.NPEDsound, state.soundOptions]);
 
   const soundSrcHotlist = useMemo(() => {
+    if (state?.hotlistSound?.includes(".mp3") || state.hotlistSound?.includes(".wav")) {
+      const file = state.soundOptions?.find((item) => item.name === state.hotlistSound);
+      return file?.soundUrl ?? notification;
+    }
     return getSoundFileURL(state?.hotlistSound) ?? notification;
-  }, [state?.hotlistSound]);
+  }, [state.hotlistSound, state.soundOptions]);
 
   const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
   const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
@@ -70,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,
@@ -104,26 +121,15 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       const id = sighting.vrm;
 
       if (processedRefs.current.has(id)) continue;
-      const isHot = checkIsHotListHit(sighting);
+      const isHotlistHit = checkIsHotListHit(sighting);
-      const cat = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
+      const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
+      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
 
-      if (cat === "A" || cat === "B" || cat === "C") {
+      if (isNPED || isHotlistHit) {
-        npedSound();
+        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
-        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;
       }
     }
-  }, [rows, hotlistsound, npedSound, setSightingModalOpen, setSelectedSighting]);
+  }, [rows, enqueue]);
 
   useEffect(() => {
     rows?.forEach((obj) => {
@@ -156,22 +162,33 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     });
 
     if (firstNPED) {
-      setSelectedSighting(firstNPED);
+      enqueue(firstNPED, "NPED");
-      npedSound();
+
-      setSightingModalOpen(true);
       npedRef.current = true;
     }
 
     if (firstHot) {
-      setSelectedSighting(firstHot);
+      enqueue(firstHot, "HOTLIST");
-      hotlistsound();
+
-      setSightingModalOpen(true);
       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 (
     <>

src/context/providers/SoundContextProvider.tsx

@@ -21,7 +21,11 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
         path: "soundSettings",
       });
 
-      dispatch({ type: "UPDATE", payload: result.result });
+      if (!result.result || typeof result.result !== "object") {
+        dispatch({ type: "UPDATE", payload: state });
+      } else {
+        dispatch({ type: "UPDATE", payload: result.result });
+      }
     };
     fetchSound();
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/context/reducers/SoundContextReducer.ts

@@ -34,6 +34,7 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         NPEDsoundVolume: action.payload.NPEDsoundVolume,
         sightingVolume: action.payload.sightingVolume,
         hotlistSoundVolume: action.payload.hotlistSoundVolume,
+        soundOptions: action.payload.soundOptions,
       };
     }
 

src/hooks/useSightingFeed.ts

@@ -43,8 +43,12 @@ export function useSightingFeed(url: string | undefined) {
   }, [audioArmed, latestRef]);
 
   const soundSrc = useMemo(() => {
+    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
+      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
+      return file?.soundUrl ?? switchSound;
+    }
     return getSoundFileURL(state?.sightingSound) ?? switchSound;
-  }, [state.sightingSound]);
+  }, [state.sightingSound, state.soundOptions]);
 
   function refetchInterval(query: Query<SightingType, Error, SightingType, (string | undefined)[]>) {
     if (!query) return;

src/types/types.ts

@@ -286,12 +286,14 @@ export type FormValues = {
   NPEDsound: SoundValue;
   hotlists: Hotlist[];
   hotlistSound: SoundValue;
+  soundOptions?: SoundUploadValue[];
 };
 
 export type SoundUploadValue = {
   name: string;
   soundFileName?: string;
   soundFile?: File | null;
+  soundUrl?: string;
 };
 
 export type SoundState = {
@@ -315,6 +317,7 @@ type UpdateAction = {
     NPEDsoundVolume: number;
     hotlistSoundVolume: number;
     hotlistSound: SoundValue;
+    soundOptions?: SoundUploadValue[];
   };
 };
 
@@ -368,3 +371,11 @@ export type ModemSettingsType = {
   password: string;
   authenticationType: string;
 };
+
+export type HitKind = "NPED" | "HOTLIST";
+
+export type QueuedHit = {
+  id: number | string;
+  sighting: SightingType;
+  kind: HitKind;
+};

src/utils/utils.ts

@@ -21,6 +21,10 @@ export function getSoundFileURL(name: string) {
   return sounds[name] ?? null;
 }
 
+export const showSoundURL = (url: URL | string | undefined) => {
+  console.log(url);
+};
+
 const randomChars = () => {
   const uppercaseAsciiStart = 65;
   const letterIndex = Math.floor(Math.random() * 26);
@@ -143,10 +147,12 @@ export const checkIsHotListHit = (sigthing: SightingType | null) => {
 };
 
 export function getHotlistName(obj: HotlistMatches | undefined) {
-  if (!obj || Object.values(obj).includes(false)) return;
+  if (!obj) return;
 
-  const keys = Object.keys(obj);
+  const hotlistNames = Object.entries(obj)
-  return keys;
+    .filter(([, value]) => value === true)
+    .map(([key]) => key);
+  return hotlistNames;
 }
 
 export const getNPEDCategory = (r?: SightingType | null) =>