- added feature to cache sounds for cross devices - should work in theory

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -18,9 +18,11 @@ const SoundUpload = () => {
     soundFile: null,
     soundFileName: "",
     soundUrl: "",
+    uploadedAt: Date.now(),
   };
 
   const handleSubmit = async (values: SoundUploadValue) => {
+    console.log(values);
     if (!values.soundFile) {
       toast.warning("Please select an audio file");
       return;
@@ -65,15 +67,12 @@ const SoundUpload = () => {
               className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
               onChange={(e) => {
                 if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") {
-                  if (e.target.files[0].size / (1024 * 1024) >= 1) {
-                    toast.error("File is too large. Max size is 1MB");
-                    return;
-                  }
                   const url = URL.createObjectURL(e.target.files[0]);
                   setFieldValue("soundUrl", url);
                   setFieldValue("name", e.target.files[0].name);
                   setFieldValue("soundFileName", e.target.files[0].name);
                   setFieldValue("soundFile", e.target.files[0]);
+                  setFieldValue("uploadedAt", Date.now());
                 } else {
                   setFieldError("soundFile", "Not an mp3 file");
                   toast.error("Not an mp3 file");

src/components/SettingForms/Sound/SoundUploadCard.tsx

@@ -4,7 +4,7 @@ import SoundUpload from "./SoundUpload";
 
 const SoundUploadCard = () => {
   return (
-    <Card className="p-4 col-span-3 w-full">
+    <Card className="p-4 col-span-5 lg:col-span-3 w-full">
       <CardHeader title={"Sound upload"} />
       <SoundUpload />
     </Card>

src/components/SightingsWidget/SightingWidget.tsx

@@ -44,8 +44,8 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   useNow(1000);
   const { state } = useSoundContext();
 
-  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, notification);
-  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, popup);
+  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, state?.soundOptions, notification);
+  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, state?.soundOptions, popup);
 
   const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
   const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });

src/components/UI/CardHeader.tsx

@@ -11,25 +11,18 @@ type CameraOverviewHeaderProps = {
   sighting?: SightingType | null;
 };
 
-const CardHeader = ({
-  title,
-  icon,
-  img,
-  sighting,
-}: CameraOverviewHeaderProps) => {
+const CardHeader = ({ title, icon, img, sighting }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative justify-between"
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between"
       )}
     >
       <div className="flex items-center space-x-2">
         {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
         <h2 className="text-xl">{title}</h2>
       </div>
-      {img && (
-        <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />
-      )}
+      {img && <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />}
       {sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
     </div>
   );

src/hooks/useFileUpload.ts

@@ -23,7 +23,9 @@ const uploadFile = async (file: File) => {
 
 const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
   const [, fileName] = queryKey;
-  const url = `${camBase}/Mobile/${fileName}`;
+
+  // console.log(`${camBase}/Mobile/${fileName}`);
+  const url = fileName;
   return getOrCacheBlob(url);
 };
 
@@ -38,7 +40,7 @@ export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {
     mutationFn: (file: File) => uploadFile(file),
     mutationKey: ["uploadFile"],
     onError: (err) => toast.error(err ? err.message : ""),
-    onSuccess: (msg) => toast.success(msg),
+    onSuccess: async (msg) => toast.success(msg),
   });
 
   return { query: queryKey ? query : undefined, mutation };

src/hooks/useSightingFeed.ts

@@ -25,9 +25,9 @@ export function useSightingFeed(url: string | undefined) {
   const [sessionStarted, setSessionStarted] = useState(false);
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(null);
 
-  const { src: soundSrc } = useCachedSoundSrc(state?.sightingSound, switchSound);
-  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, notification);
-  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, popup);
+  const { src: soundSrc } = useCachedSoundSrc(state?.sightingSound, state?.soundOptions, switchSound);
+  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, state?.soundOptions, notification);
+  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, state?.soundOptions, popup);
 
   const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
   const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });

src/hooks/usecachedSoundSrc.ts

@@ -1,13 +1,20 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFileUpload } from "./useFileUpload";
 import { getSoundFileURL } from "../utils/utils";
+import type { SoundUploadValue } from "../types/types";
+import { resolveSoundSource } from "../utils/soundResolver";
 
-export function useCachedSoundSrc(selected: string | undefined, fallbackUrl: string) {
+export function useCachedSoundSrc(
+  selected: string | undefined,
+  soundOptions: SoundUploadValue[] | undefined,
+  fallbackUrl: string
+) {
   const isUploaded = !!selected && (selected.endsWith(".mp3") || selected.endsWith(".wav"));
-  const fileName = isUploaded ? selected : undefined;
+
+  const resolved = resolveSoundSource(selected, soundOptions);
 
   const { query } = useFileUpload({
-    queryKey: fileName ? [fileName] : undefined,
+    queryKey: resolved?.type === "uploaded" ? [resolved?.url] : undefined,
   });
 
   const [objectUrl, setObjectUrl] = useState<string>();
@@ -15,6 +22,7 @@ export function useCachedSoundSrc(selected: string | undefined, fallbackUrl: str
 
   useEffect(() => {
     const blob = query?.data;
+
     if (blob instanceof Blob) {
       if (objRef.current) URL.revokeObjectURL(objRef.current);
       const url = URL.createObjectURL(blob);

src/types/types.ts

@@ -294,6 +294,7 @@ export type SoundUploadValue = {
   soundFileName?: string;
   soundFile?: File | null;
   soundUrl?: string;
+  uploadedAt?: number;
 };
 
 export type SoundState = {

src/utils/cacheSound.ts

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

src/utils/soundResolver.ts

@@ -0,0 +1,24 @@
+import { getSoundFileURL } from "./utils";
+import { CAM_BASE } from "./config";
+import type { SoundUploadValue } from "../types/types";
+
+export function resolveSoundSource(
+  selected: string | undefined,
+  soundOptions: SoundUploadValue[] | undefined
+): { type: "uploaded"; url: string } | { type: "builtin"; url: string } | undefined {
+  if (!selected) return undefined;
+
+  const isFile = selected.endsWith(".mp3") || selected.endsWith(".wav");
+
+  if (isFile) {
+    const match = soundOptions?.find((o) => o.soundFileName === selected);
+    const version = match?.uploadedAt ?? 0;
+    const url = `${CAM_BASE}/Mobile/${encodeURIComponent(selected)}?v=${version}`;
+    return { type: "uploaded", url };
+  }
+
+  const builtin = getSoundFileURL(selected);
+  if (builtin) return { type: "builtin", url: builtin };
+
+  return undefined;
+}