- added sounds for all hotlist sounds

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,6 +29,7 @@ const SoundSettingsFields = () => {
       ...values,
       sightingVolume: state.sightingVolume,
       NPEDsoundVolume: state.NPEDsoundVolume,
+      hotlistSoundVolume: state.hotlistSoundVolume,
     };
 
     dispatch({ type: "UPDATE", payload: updatedValues });
@@ -44,7 +46,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 +87,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 +134,7 @@ const SoundSettingsFields = () => {
                   </div>
                 )}
               />
-            </FormGroup>
+            </FormGroup> */}
           </div>
           <button
             type="submit"

src/components/SightingsWidget/SightingWidget.tsx

@@ -47,11 +47,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   }, [state.NPEDsound]);
 
   const soundSrcHotlist = useMemo(() => {
-    return getSoundFileURL(state?.hotlists?.[0]?.sound) ?? notification;
-  }, [state.hotlists]);
+    return getSoundFileURL(state?.hotlistSound) ?? notification;
+  }, [state?.hotlistSound]);
 
   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>
   );
 };