- storing changes for now

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -6,15 +6,11 @@ import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
 import SliderComponent from "../../UI/Slider";
 import { useFileUpload } from "../../../hooks/useFileUpload";
-import { useSound } from "react-sounds";
-import { useMemo } from "react";
-import { getSoundFileURL } from "../../../utils/utils";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
-
+  const { query: fileQuery } = useFileUpload({
-  const { query } = useFileUpload({
     queryKey: state.sightingSound ? [state.sightingSound] : undefined,
   });
 
@@ -31,31 +27,8 @@ const SoundSettingsFields = () => {
     hotlistSound: state.hotlistSound ?? "notification",
     hotlists,
   };
-
+  const handleSyce = () => {
-  const soundSrc = useMemo(() => {
+    fileQuery?.refetch();
-    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
-      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
-      query?.refetch();
-      console.log(query?.data);
-
-      // set state
-      dispatch({ type: "UPLOADEDSOUND", payload: query?.data });
-      if (!query?.data) {
-        query?.refetch();
-        return;
-      }
-      //get from state?
-      if (!state.uploadedSound) return "switchSound";
-      const url = URL.createObjectURL(state.uploadedSound);
-      return url ?? "switchSound";
-    }
-    return getSoundFileURL(state?.sightingSound) ?? "switchSound";
-  }, [state.sightingSound, state.soundOptions]);
-
-  const { play } = useSound(soundSrc);
-  const handletest = () => {
-    console.log(state.uploadedSound);
-    play();
   };
   const handleSubmit = async (values: FormValues) => {
     const updatedValues = {
@@ -176,7 +149,7 @@ const SoundSettingsFields = () => {
           >
             Save Settings
           </button>
-          <button onClick={handletest} type="button">
+          <button onClick={handleSyce} type="button">
             click
           </button>
         </Form>

src/hooks/useFileUpload.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import { toast } from "sonner";
+import { getOrCacheBlob } from "../utils/cacheSound";
 const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE;
 
 type UseFileUploadProps = {
@@ -22,11 +23,8 @@ const uploadFile = async (file: File) => {
 
 const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
   const [, fileName] = queryKey;
-  const response = await fetch(`${camBase}/Mobile/${fileName}`);
+  const url = `${camBase}/Mobile/${fileName}`;
-  if (!response.ok) {
+  return getOrCacheBlob(url);
-    throw new Error("Cannot reach upload file endpoint");
-  }
-  return response.blob();
 };
 
 export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {

src/hooks/useSightingFeed.ts

@@ -8,6 +8,7 @@ import { checkIsHotListHit, getNPEDCategory, getSoundFileURL } from "../utils/ut
 import switchSound from "../assets/sounds/ui/switch.mp3";
 import notification from "../assets/sounds/ui/notification.mp3";
 import popup from "../assets/sounds/ui/popup_open.mp3";
+import { useFileUpload } from "./useFileUpload";
 
 async function fetchSighting(url: string | undefined, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`, {
@@ -18,12 +19,22 @@ async function fetchSighting(url: string | undefined, ref: number): Promise<Sigh
 }
 
 export function useSightingFeed(url: string | undefined) {
-  const { state, audioArmed } = useSoundContext();
+  const { state, audioArmed, dispatch } = useSoundContext();
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [sessionStarted, setSessionStarted] = useState(false);
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(null);
 
+  const isUploaded = state?.sightingSound?.endsWith(".mp3") || state?.sightingSound?.endsWith(".wav");
+
+  const fileName = isUploaded ? state.sightingSound : switchSound;
+
+  const { query: fileQuery } = useFileUpload({
+    queryKey: fileName ? [fileName] : undefined,
+  });
+
+  const objUrlRef = useRef<string | null>(null);
+
   const soundSrcHotlist = useMemo(() => {
     if (state?.hotlistSound?.includes(".mp3") || state.hotlistSound?.includes(".wav")) {
       const file = state.soundOptions?.find((item) => item.name === state.hotlistSound);
@@ -41,12 +52,20 @@ export function useSightingFeed(url: string | undefined) {
   }, [state.NPEDsound, state.soundOptions]);
 
   const soundSrc = useMemo(() => {
-    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
+    if (isUploaded && fileQuery?.data instanceof Blob) {
-      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
+      if (objUrlRef.current) URL.revokeObjectURL(objUrlRef.current);
-      return file?.soundUrl ?? switchSound;
+      objUrlRef.current = URL.createObjectURL(fileQuery.data);
+      console.log(fileQuery.data);
+      return objUrlRef.current;
     }
     return getSoundFileURL(state?.sightingSound) ?? switchSound;
-  }, [state.sightingSound, state.soundOptions]);
+  }, [isUploaded, fileQuery?.data, state?.sightingSound]);
+
+  useEffect(() => {
+    return () => {
+      if (objUrlRef.current) URL.revokeObjectURL(objUrlRef.current);
+    };
+  }, []);
 
   const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
   const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });

src/utils/cacheSound.ts

@@ -0,0 +1,16 @@
+export async function getOrCacheBlob(url: string) {
+  const cache = await caches.open("app-sounds-v1");
+  const hit = await cache.match(url);
+  if (hit) return await hit.blob();
+
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
+  await cache.put(url, res.clone());
+
+  return await res.blob();
+}
+
+export async function evictFromCache(url: string) {
+  const cache = await caches.open("app-sounds-v1");
+  await cache.delete(url);
+}