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

src/hooks/useSound.ts

@@ -1,64 +0,0 @@
-// useBeep.ts
-import { useEffect, useRef } from "react";
-import { useSoundEnabled } from "react-sounds"; // so it respects your SoundBtn toggle
-
-/**
- * Plays a sound whenever `latestRef` changes.
- *
- * @param src Path to the sound file
- * @param latestRef The primitive value to watch (e.g. sighting.ref)
- * @param opts volume: 0..1, enabledOverride: force enable/disable, minGapMs: throttle interval
- */
-export function useBeep(
-  src: string,
-  latestRef: number | null,
-  opts?: { volume?: number; enabledOverride?: boolean; minGapMs?: number }
-) {
-  const audioRef = useRef<HTMLAudioElement>(undefined);
-  const prevRef = useRef<number | null>(null);
-  const lastPlay = useRef(0);
-  const [enabled] = useSoundEnabled();
-
-  const minGap = opts?.minGapMs ?? 250; // don’t play more than 4 times/sec
-
-  // Create the audio element once
-  useEffect(() => {
-    const a = new Audio(src);
-    a.preload = "auto";
-    if (opts?.volume !== undefined) a.volume = opts.volume;
-    audioRef.current = a;
-    return () => {
-      a.pause();
-    };
-  }, [src, opts?.volume]);
-
-  // Watch for ref changes
-  useEffect(() => {
-    if (latestRef == null) return;
-
-    const canPlay =
-      (opts?.enabledOverride ?? enabled) &&
-      document.visibilityState === "visible";
-    if (!canPlay) {
-      prevRef.current = latestRef; // consume the change
-      return;
-    }
-
-    if (prevRef.current !== null && latestRef !== prevRef.current) {
-      const now = Date.now();
-      if (now - lastPlay.current >= minGap) {
-        const a = audioRef.current;
-        if (a) {
-          try {
-            a.currentTime = 0; // restart from beginning
-            void a.play(); // fire and forget
-            lastPlay.current = now;
-          } catch (err) {
-            console.warn("Audio play failed:", err);
-          }
-        }
-      }
-    }
-    prevRef.current = latestRef;
-  }, [latestRef, enabled, opts?.enabledOverride, minGap]);
-}