added sound context, and functionality to select sighting sound

src/hooks/useSightingFeed.ts

@@ -1,8 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 import { useSoundOnChange } from "react-sounds";
 import switchSound from "../assets/sounds/ui/switch.mp3";
+import popup from "../assets/sounds/ui/popup_open.mp3";
+import notification from "../assets/sounds/ui/notification.mp3";
+import { useSoundContext } from "../context/SoundContext";
 
 async function fetchSighting(
   url: string | undefined,
@@ -13,7 +16,17 @@ async function fetchSighting(
   return res.json();
 }
 
+function getSoundFileName(name: string) {
+  const sounds: Record<string, string> = {
+    switch: switchSound,
+    popup: popup,
+    notification: notification,
+  };
+  return sounds[name] ?? null;
+}
+
 export function useSightingFeed(url: string | undefined) {
+  const { state } = useSoundContext();
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [sessionStarted, setSessionStarted] = useState(false);
@@ -23,8 +36,11 @@ export function useSightingFeed(url: string | undefined) {
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );
+  const soundSrc = useMemo(() => {
+    return getSoundFileName(state.sightingSound) ?? switchSound;
+  }, [state.sightingSound]);
 
-  useSoundOnChange(switchSound, latestRef, {
+  useSoundOnChange(soundSrc, latestRef, {
     volume: 1,
   });