diff --git a/src/components/SettingForms/Sound/SoundSettingsFields.tsx b/src/components/SettingForms/Sound/SoundSettingsFields.tsx index 99a8efa..41d039e 100644 --- a/src/components/SettingForms/Sound/SoundSettingsFields.tsx +++ b/src/components/SettingForms/Sound/SoundSettingsFields.tsx @@ -30,9 +30,11 @@ const SoundSettingsFields = () => { sightingVolume: state.sightingVolume, NPEDsoundVolume: state.NPEDsoundVolume, hotlistSoundVolume: state.hotlistSoundVolume, + soundOptions: [...(state.soundOptions ?? [])], }; - console.log(updatedValues); + dispatch({ type: "UPDATE", payload: updatedValues }); + const result = await mutation.mutateAsync({ operation: "INSERT", path: "soundSettings", diff --git a/src/components/SettingForms/Sound/SoundUpload.tsx b/src/components/SettingForms/Sound/SoundUpload.tsx index 7b095ba..c30d389 100644 --- a/src/components/SettingForms/Sound/SoundUpload.tsx +++ b/src/components/SettingForms/Sound/SoundUpload.tsx @@ -3,9 +3,12 @@ import FormGroup from "../components/FormGroup"; import type { SoundUploadValue } from "../../../types/types"; import { useSoundContext } from "../../../context/SoundContext"; import { toast } from "sonner"; +import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard"; const SoundUpload = () => { - const { dispatch } = useSoundContext(); + const { state, dispatch } = useSoundContext(); + const { mutation } = useCameraBlackboard(); + const initialValues: SoundUploadValue = { name: "", soundFile: null, @@ -13,14 +16,34 @@ const SoundUpload = () => { soundUrl: "", }; - const handleSubmit = (values: SoundUploadValue) => { + const handleSubmit = async (values: SoundUploadValue) => { if (!values.soundFile) { toast.warning("Please select an audio file"); - } else { - dispatch({ type: "ADD", payload: values }); - - toast.success("Sound file upload successfully"); + return; } + const alreadyExists = state?.soundOptions?.some((soundOption) => soundOption.name === values.name); + if (state.soundOptions?.includes(values) || alreadyExists) { + toast.warning("Sound already in list"); + return; + } + + const updatedValues = { + ...state, + soundOptions: [...(state.soundOptions ?? []), values], + }; + + const result = await mutation.mutateAsync({ + operation: "INSERT", + path: "soundSettings", + value: updatedValues, + }); + if (result.reason !== "OK") { + toast.error("Cannot update sound settings"); + } else { + toast.success(`${values.name} file added`); + } + + dispatch({ type: "ADD", payload: values }); }; return ( diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx index 52317b9..4cf0de7 100644 --- a/src/components/SightingsWidget/SightingWidget.tsx +++ b/src/components/SightingsWidget/SightingWidget.tsx @@ -43,12 +43,20 @@ export default function SightingHistoryWidget({ className, title }: SightingHist const { state } = useSoundContext(); const soundSrcNped = useMemo(() => { + if (state?.NPEDsound?.includes(".mp3") || state.NPEDsound?.includes(".wav")) { + const file = state.soundOptions?.find((item) => item.name === state.NPEDsound); + return file?.soundUrl ?? popup; + } return getSoundFileURL(state.NPEDsound) ?? popup; - }, [state.NPEDsound]); + }, [state.NPEDsound, state.soundOptions]); const soundSrcHotlist = useMemo(() => { + if (state?.hotlistSound?.includes(".mp3") || state.hotlistSound?.includes(".wav")) { + const file = state.soundOptions?.find((item) => item.name === state.hotlistSound); + return file?.soundUrl ?? notification; + } return getSoundFileURL(state?.hotlistSound) ?? notification; - }, [state?.hotlistSound]); + }, [state.hotlistSound, state.soundOptions]); const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume }); const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume }); diff --git a/src/context/providers/SoundContextProvider.tsx b/src/context/providers/SoundContextProvider.tsx index 37e75ec..f534800 100644 --- a/src/context/providers/SoundContextProvider.tsx +++ b/src/context/providers/SoundContextProvider.tsx @@ -21,7 +21,11 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => { path: "soundSettings", }); - dispatch({ type: "UPDATE", payload: result.result }); + if (!result.result || typeof result.result !== "object") { + dispatch({ type: "UPDATE", payload: state }); + } else { + dispatch({ type: "UPDATE", payload: result.result }); + } }; fetchSound(); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/context/reducers/SoundContextReducer.ts b/src/context/reducers/SoundContextReducer.ts index 86cac6e..0145094 100644 --- a/src/context/reducers/SoundContextReducer.ts +++ b/src/context/reducers/SoundContextReducer.ts @@ -34,6 +34,7 @@ export function reducer(state: SoundState, action: SoundAction): SoundState { NPEDsoundVolume: action.payload.NPEDsoundVolume, sightingVolume: action.payload.sightingVolume, hotlistSoundVolume: action.payload.hotlistSoundVolume, + soundOptions: action.payload.soundOptions, }; } diff --git a/src/hooks/useSightingFeed.ts b/src/hooks/useSightingFeed.ts index 8a771f0..4c7d88e 100644 --- a/src/hooks/useSightingFeed.ts +++ b/src/hooks/useSightingFeed.ts @@ -43,9 +43,9 @@ export function useSightingFeed(url: string | undefined) { }, [audioArmed, latestRef]); const soundSrc = useMemo(() => { - if (state?.sightingSound?.includes(".mp3")) { + if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) { const file = state.soundOptions?.find((item) => item.name === state.sightingSound); - return file?.soundUrl; + return file?.soundUrl ?? switchSound; } return getSoundFileURL(state?.sightingSound) ?? switchSound; }, [state.sightingSound, state.soundOptions]); diff --git a/src/types/types.ts b/src/types/types.ts index 866b1e3..72a2369 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -286,6 +286,7 @@ export type FormValues = { NPEDsound: SoundValue; hotlists: Hotlist[]; hotlistSound: SoundValue; + soundOptions?: SoundUploadValue[]; }; export type SoundUploadValue = { @@ -316,6 +317,7 @@ type UpdateAction = { NPEDsoundVolume: number; hotlistSoundVolume: number; hotlistSound: SoundValue; + soundOptions?: SoundUploadValue[]; }; };