TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Toba Ojo
2025-10-01 15:21:07 +01:00
parent 1b7b2eec37
commit 68e944a6a2
11 changed files with 100 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -24,7 +24,7 @@ const CameraSettingFields = ({
onZoomLevelChange,
}: CameraSettingsProps) => {
const [showPwd, setShowPwd] = useState(false);
console.log(initialData);
const initialValues = useMemo<CameraSettingValues>(
() => ({
friendlyName: initialData?.id ?? "",
@@ -48,7 +48,6 @@ const CameraSettingFields = ({
};
const handleSubmit = (values: CameraSettingValues) => {
console.log(values);
updateCameraConfig(values);
};

25
src/components/SettingForms/Sound/SoundSettingsFields.tsx
View File

@@ -12,20 +12,10 @@ const SoundSettingsFields = () => {
{ name: "hotlist2", sound: "" },
];
const soundOptions = [
{
value: "switch",
label: "Switch (Default)",
},
{
value: "notification",
label: "Notification",
},
{
value: "popup",
label: "popup",
},
];
const soundOptions = state?.soundOptions?.map((soundOption) => ({
value: soundOption?.name,
label: soundOption?.name,
}));
const initialValues: FormValues = {
sightingSound: state.sightingSound ?? "switch",
@@ -37,7 +27,6 @@ const SoundSettingsFields = () => {
dispatch({ type: "UPDATE", payload: values });
toast.success("Sound settings updated");
};
console.log(state);
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
{({ values }) => (
@@ -49,7 +38,7 @@ const SoundSettingsFields = () => {
name="sightingSound"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions.map(({ value, label }) => {
{soundOptions?.map(({ value, label }) => {
return (
<option key={value} value={value}>
{label}
@@ -65,7 +54,7 @@ const SoundSettingsFields = () => {
name="NPEDsound"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions.map(({ value, label }) => (
{soundOptions?.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
@@ -97,7 +86,7 @@ const SoundSettingsFields = () => {
id={`hotlists.${index}.sound`}
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions.map(({ value, label }) => (
{soundOptions?.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>

39
src/components/SettingForms/Sound/SoundUpload.tsx
View File

@@ -1,38 +1,61 @@
import { Form, Formik } from "formik";
import FormGroup from "../components/FormGroup";
import type { SoundUploadValue } from "../../../types/types";
import { useSoundContext } from "../../../context/SoundContext";
import { toast } from "sonner";
const SoundUpload = () => {
const { dispatch } = useSoundContext();
const initialValues: SoundUploadValue = {
name: "",
soundFile: null,
};
const handleSubmit = (values: SoundUploadValue) => {
console.log(values);
if (!values.soundFile) {
toast.warning("Please select an audio file");
} else {
dispatch({ type: "ADD", payload: values });
toast.success("Sound file upload successfully");
}
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
{({ setFieldValue }) => (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize
>
{({ setFieldValue, errors, setFieldError }) => (
<Form>
<FormGroup>
<label htmlFor="soundFile">Sighting Sound</label>
<label htmlFor="soundFile">Sound File</label>
<input
type="file"
name="soundFile"
id="sightingSoundinput"
accept="audio/mpeg"
onChange={(e) => {
if (
e.target.files &&
e.target.files[0].type.lastIndexOf(".mp3")
)
setFieldValue("sightingSound", e.target.files[0]);
e.target?.files &&
e.target?.files[0]?.type === "audio/mpeg"
) {
setFieldValue("name", e.target.files[0].name);
setFieldValue("soundFile", e.target.files[0]);
} else {
setFieldError("soundFile", "Not an mp3 file");
toast.error("Not an mp3 file");
}
}}
/>
</FormGroup>
{errors.soundFile && (
<p className="text-red-500 text-sm mt-1">Not an mp3 file</p>
)}
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
disabled={errors.soundFile ? true : false}
>
Upload
</button>

6
src/components/SightingsWidget/SightingWidget.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { SightingType } from "../../types/types";
import { BLANK_IMG, getSoundFileName } from "../../utils/utils";
import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
import NumberPlate from "../PlateStack/NumberPlate";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
@@ -43,8 +43,8 @@ export default function SightingHistoryWidget({
const { state } = useSoundContext();
const soundSrc = useMemo(() => {
return getSoundFileName(state.sightingSound) ?? popup;
}, [state.sightingSound]);
return getSoundFileURL(state.NPEDsound) ?? popup;
}, [state.NPEDsound]);
const { play } = useSound(soundSrc);
const {

4
src/context/SoundContext.ts
View File

@@ -1,9 +1,9 @@
import { createContext, useContext, type Dispatch } from "react";
import type { SoundPayload, SoundState } from "../types/types";
import type { SoundAction, SoundState } from "../types/types";
type SoundContextType = {
state: SoundState;
dispatch: Dispatch<SoundPayload>;
dispatch: Dispatch<SoundAction>;
};
export const SoundContext = createContext<SoundContextType | undefined>(

11
src/context/providers/SoundContextProvider.tsx
View File

@@ -1,17 +1,16 @@
import { useReducer, type ReactNode } from "react";
import { useMemo, useReducer, type ReactNode } from "react";
import { SoundContext } from "../SoundContext";
import { initalState, reducer } from "../reducers/SoundContextReducer";
import { initialState, reducer } from "../reducers/SoundContextReducer";
type SoundContextProviderProps = {
children: ReactNode;
};
const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
const [state, dispatch] = useReducer(reducer, initalState);
const [state, dispatch] = useReducer(reducer, initialState);
const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
return (
<SoundContext.Provider value={{ state, dispatch }}>
{children}
</SoundContext.Provider>
<SoundContext.Provider value={value}>{children}</SoundContext.Provider>
);
};

23
src/context/reducers/SoundContextReducer.ts
View File

@@ -1,14 +1,19 @@
import type { SoundPayload, SoundState } from "../../types/types";
import type { SoundAction, SoundState } from "../../types/types";
export const initalState: SoundState = {
export const initialState: SoundState = {
sightingSound: "switch",
NPEDsound: "popup",
hotlists: [],
soundOptions: [
{ name: "switch (Default)", soundFile: null },
{ name: "popup", soundFile: null },
{ name: "notification", soundFile: null },
],
};
export function reducer(state: SoundState, action: SoundPayload) {
export function reducer(state: SoundState, action: SoundAction): SoundState {
switch (action.type) {
case "UPDATE":
case "UPDATE": {
return {
...state,
sightingSound: action.payload.sightingSound,
@@ -19,5 +24,15 @@ export function reducer(state: SoundState, action: SoundPayload) {
})),
};
}
case "ADD": {
return {
...state,
soundOptions: [...(state.soundOptions ?? []), action.payload],
};
}
default:
return state;
}
}

18
src/hooks/useSightingFeed.ts
View File

@@ -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,
});

1
src/pages/Dashboard.tsx
View File

@@ -7,7 +7,6 @@ const Dashboard = () => {
const mode = import.meta.env.MODE;
const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
console.log(mode);
console.log(base_url);
return (
<SightingFeedProvider url={base_url}>
<div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">

19
src/types/types.ts
View File

@@ -276,6 +276,7 @@ export type FormValues = {
};
export type SoundUploadValue = {
name: string;
soundFile: File | null;
};
@@ -283,9 +284,21 @@ export type SoundState = {
sightingSound: SoundValue;
NPEDsound: SoundValue;
hotlists: Hotlist[];
soundOptions?: SoundUploadValue[];
};
export type SoundPayload = {
type: string;
payload: SoundState;
type UpdateAction = {
type: "UPDATE";
payload: {
sightingSound: SoundValue;
NPEDsound: SoundValue;
hotlists: Hotlist[];
};
};
type AddAction = {
type: "ADD";
payload: SoundUploadValue;
};
export type SoundAction = UpdateAction | AddAction;

2
src/utils/utils.ts
View File

@@ -2,7 +2,7 @@ import switchSound from "../assets/sounds/ui/switch.mp3";
import popup from "../assets/sounds/ui/popup_open.mp3";
import notification from "../assets/sounds/ui/notification.mp3";
export function getSoundFileName(name: string) {
export function getSoundFileURL(name: string) {
const sounds: Record<string, string> = {
switch: switchSound,
popup: popup,