fixed feature to upload sound files

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -31,7 +31,7 @@ const SoundSettingsFields = () => {
       NPEDsoundVolume: state.NPEDsoundVolume,
       hotlistSoundVolume: state.hotlistSoundVolume,
     };
-
+    console.log(updatedValues);
     dispatch({ type: "UPDATE", payload: updatedValues });
     const result = await mutation.mutateAsync({
       operation: "INSERT",

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -9,6 +9,8 @@ const SoundUpload = () => {
   const initialValues: SoundUploadValue = {
     name: "",
     soundFile: null,
+    soundFileName: "",
+    soundUrl: "",
   };
 
   const handleSubmit = (values: SoundUploadValue) => {
@@ -16,6 +18,7 @@ const SoundUpload = () => {
       toast.warning("Please select an audio file");
     } else {
       dispatch({ type: "ADD", payload: values });
+
       toast.success("Sound file upload successfully");
     }
   };
@@ -36,7 +39,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/hooks/useSightingFeed.ts

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

@@ -292,6 +292,7 @@ export type SoundUploadValue = {
   name: string;
   soundFileName?: string;
   soundFile?: File | null;
+  soundUrl?: string;
 };
 
 export type SoundState = {

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);