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