Refactor sound context and update sound settings functionality; remove console logs and improve sound file handling

src/hooks/useSightingFeed.ts

@@ -2,9 +2,8 @@ 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 { useSoundContext } from "../context/SoundContext";
-import { getSoundFileName } from "../utils/utils";
+import { getSoundFileURL } from "../utils/utils";
 import switchSound from "../assets/sounds/ui/switch.mp3";
 
 async function fetchSighting(
@@ -27,11 +26,22 @@ export function useSightingFeed(url: string | undefined) {
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );
+  const first = useRef(true);
+
+  const trigger = useMemo(() => {
+    if (latestRef == null) return null;
+    if (first.current) {
+      first.current = false;
+      return Symbol("skip");
+    }
+    return latestRef;
+  }, [latestRef]);
   const soundSrc = useMemo(() => {
-    return getSoundFileName(state.sightingSound) ?? switchSound;
+    return getSoundFileURL(state.sightingSound) ?? switchSound;
   }, [state.sightingSound]);
 
-  useSoundOnChange(soundSrc, latestRef, {
+  //use latestref instead of trigger to revert back
+  useSoundOnChange(soundSrc, trigger, {
     volume: 1,
   });