- added framework for playing uploaded music files. need to permanently store and retreive files

src/components/SettingForms/Sound/SoundSettingsFields.tsx

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

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -3,9 +3,12 @@ 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,
@@ -13,14 +16,34 @@ const SoundUpload = () => {
     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 (

src/components/SightingsWidget/SightingWidget.tsx

@@ -43,12 +43,20 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   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 });

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,9 +43,9 @@ export function useSightingFeed(url: string | undefined) {
   }, [audioArmed, latestRef]);
 
   const soundSrc = useMemo(() => {
-    if (state?.sightingSound?.includes(".mp3")) {
+    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
       const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
-      return file?.soundUrl;
+      return file?.soundUrl ?? switchSound;
     }
     return getSoundFileURL(state?.sightingSound) ?? switchSound;
   }, [state.sightingSound, state.soundOptions]);

src/types/types.ts

@@ -286,6 +286,7 @@ export type FormValues = {
   NPEDsound: SoundValue;
   hotlists: Hotlist[];
   hotlistSound: SoundValue;
+  soundOptions?: SoundUploadValue[];
 };
 
 export type SoundUploadValue = {
@@ -316,6 +317,7 @@ type UpdateAction = {
     NPEDsoundVolume: number;
     hotlistSoundVolume: number;
     hotlistSound: SoundValue;
+    soundOptions?: SoundUploadValue[];
   };
 };