Merged develop into bugfix/uploadsounds

Develop

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -1,4 +1,4 @@
-import { Field, FieldArray, Form, Formik } from "formik";
+import { Field, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
@@ -13,13 +13,14 @@ const SoundSettingsFields = () => {
   const hotlists: Hotlist[] = state.hotlists;
 
   const soundOptions = state?.soundOptions?.map((soundOption) => ({
-    value: soundOption?.soundFile,
+    value: soundOption?.soundFileName,
     label: soundOption?.name,
   }));
 
   const initialValues: FormValues = {
     sightingSound: state.sightingSound ?? "switch",
     NPEDsound: state.NPEDsound ?? "popup",
+    hotlistSound: state.hotlistSound ?? "notification",
     hotlists,
   };
 
@@ -28,9 +29,12 @@ const SoundSettingsFields = () => {
       ...values,
       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",
@@ -44,7 +48,7 @@ const SoundSettingsFields = () => {
   };
   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">
@@ -85,6 +89,23 @@ const SoundSettingsFields = () => {
           <div>
             <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
             <FormGroup>
+              <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+                <label htmlFor="hotlistSound">All hotlist Sounds</label>
+                <Field
+                  as="select"
+                  name="hotlistSound"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  {soundOptions?.map(({ value, label }) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </Field>
+                <SliderComponent soundCategory="HOTLISTVOLUME" />
+              </div>
+            </FormGroup>
+            {/* <FormGroup>
               <FieldArray
                 name="hotlists"
                 render={() => (
@@ -115,7 +136,7 @@ const SoundSettingsFields = () => {
                   </div>
                 )}
               />
-            </FormGroup>
+            </FormGroup> */}
           </div>
           <button
             type="submit"

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 {
-      dispatch({ type: "ADD", payload: values });
-      toast.success("Sound file upload successfully");
+      return;
     }
+    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/SightingsWidget/SightingWidget.tsx

@@ -43,15 +43,23 @@ 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(() => {
-    return getSoundFileURL(state?.hotlists?.[0]?.sound) ?? notification;
-  }, [state.hotlists]);
+    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.soundOptions]);
 
   const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
-  const { play: hotlistsound } = useSound(soundSrcHotlist);
+  const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
   const {
     sightings,
     setSelectedSighting,

src/components/UI/Slider.tsx

@@ -4,7 +4,20 @@ import { useSoundContext } from "../../context/SoundContext";
 
 const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
   const { dispatch, state } = useSoundContext();
-  const volume = soundCategory === "SIGHTINGVOLUME" ? state.sightingVolume : state.NPEDsoundVolume;
+
+  const getVolumeOption = (soundCategory: string) => {
+    if (soundCategory === "SIGHTINGVOLUME") {
+      return state.sightingVolume;
+    }
+    if (soundCategory === "NPEDVOLUME") {
+      return state.NPEDsoundVolume;
+    }
+    if (soundCategory === "HOTLISTVOLUME") {
+      return state.hotlistSoundVolume;
+    }
+  };
+
+  const volume = getVolumeOption(soundCategory);
 
   const handleChange = (value: number | number[]) => {
     const number = typeof value === "number" ? value : value[0];
@@ -39,7 +52,7 @@ const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" |
           },
         }}
       />
-      <span>{volume * 10}</span>
+      <span>{volume ? volume * 10 : 1}</span>
     </div>
   );
 };

src/context/providers/SoundContextProvider.tsx

@@ -20,8 +20,12 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
         operation: "VIEW",
         path: "soundSettings",
       });
-      console.log(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

@@ -3,15 +3,16 @@ import type { SoundAction, SoundState } from "../../types/types";
 export const initialState: SoundState = {
   sightingSound: "switch",
   NPEDsound: "popup",
+  hotlistSound: "warning",
   hotlists: [{ name: "hotlistName", sound: "notification" }],
   soundOptions: [
-    { name: "Switch (Default)", soundFile: "switch" },
-    { name: "Popup", soundFile: "popup" },
-    { name: "Notification", soundFile: "notification" },
-    { name: "Beep", soundFile: "beep" },
-    { name: "Ding", soundFile: "ding" },
-    { name: "Shutter", soundFile: "shutter" },
-    { name: "Warning (voice)", soundFile: "warning" },
+    { name: "Switch (Default)", soundFileName: "switch" },
+    { name: "Popup", soundFileName: "popup" },
+    { name: "Notification", soundFileName: "notification" },
+    { name: "Beep", soundFileName: "beep" },
+    { name: "Ding", soundFileName: "ding" },
+    { name: "Shutter", soundFileName: "shutter" },
+    { name: "Warning (voice)", soundFileName: "warning" },
   ],
   sightingVolume: 1,
   NPEDsoundVolume: 1,
@@ -25,12 +26,15 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         ...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,
       };
     }
 
@@ -53,6 +57,12 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         NPEDsoundVolume: action.payload,
       };
 
+    case "HOTLISTVOLUME":
+      return {
+        ...state,
+        hotlistSoundVolume: action.payload,
+      };
+
     default:
       return state;
   }

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

@@ -285,17 +285,22 @@ export type FormValues = {
   sightingSound: SoundValue;
   NPEDsound: SoundValue;
   hotlists: Hotlist[];
+  hotlistSound: SoundValue;
+  soundOptions?: SoundUploadValue[];
 };
 
 export type SoundUploadValue = {
   name: string;
-  soundFile: File | null;
+  soundFileName?: string;
+  soundFile?: File | null;
+  soundUrl?: string;
 };
 
 export type SoundState = {
   sightingSound: SoundValue;
   NPEDsound: SoundValue;
   hotlists: Hotlist[];
+  hotlistSound: SoundValue;
   soundOptions?: SoundUploadValue[];
   sightingVolume: number;
   NPEDsoundVolume: number;
@@ -310,7 +315,9 @@ type UpdateAction = {
     hotlists: Hotlist[];
     sightingVolume: number;
     NPEDsoundVolume: number;
-    hotlistSoundVolume?: number;
+    hotlistSoundVolume: number;
+    hotlistSound: SoundValue;
+    soundOptions?: SoundUploadValue[];
   };
 };
 

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