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

- added volume setting for sighting hits

Browse Source
This commit is contained in:
Toba Ojo
2025-10-17 16:12:02 +01:00
parent 3eb539fd9d
commit 82b84dc46e
14 changed files with 145 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -22,6 +22,7 @@
"country-flag-icons": "^1.5.19",
"formik": "^2.4.6",
"howler": "^2.2.4",
"rc-slider": "^11.1.9",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-modal": "^3.16.3",

2
src/components/SettingForms/Sound/SoundSettingsCard.tsx
View File

@@ -4,7 +4,7 @@ import SoundSettingsFields from "./SoundSettingsFields";
const SoundSettingsCard = () => {
return (
<Card className="p-4">
<Card className="p-4 col-span-5 w-full">
<CardHeader title={"Sound Settings"} />
<SoundSettingsFields />
</Card>

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

@@ -4,6 +4,7 @@ import type { FormValues, Hotlist } from "../../../types/types";
import { useSoundContext } from "../../../context/SoundContext";
import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
import { toast } from "sonner";
import SliderComponent from "../../UI/Slider";
const SoundSettingsFields = () => {
const { state, dispatch } = useSoundContext();
@@ -40,6 +41,7 @@ const SoundSettingsFields = () => {
{({ values }) => (
<Form className="flex flex-col space-y-3">
<FormGroup>
<div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
<label htmlFor="sightingSound">Sighting Sound</label>
<Field
as="select"
@@ -54,8 +56,11 @@ const SoundSettingsFields = () => {
);
})}
</Field>
<SliderComponent soundCategory="SIGHTINGVOLUME" />
</div>
</FormGroup>
<FormGroup>
<div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
<label htmlFor="NPEDsound">NPED notification Sound</label>
<Field
as="select"
@@ -68,6 +73,8 @@ const SoundSettingsFields = () => {
</option>
))}
</Field>
<SliderComponent soundCategory="NPEDVOLUME" />
</div>
</FormGroup>
<div>
<h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>

2
src/components/SettingForms/Sound/SoundUploadCard.tsx
View File

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

6
src/components/SettingForms/components/FormGroup.tsx
View File

@@ -5,11 +5,7 @@ type FormGroupProps = {
};
const FormGroup = ({ children }: FormGroupProps) => {
return (
<div className="flex flex-col md:flex-row md:items-center justify-between relative">
{children}
</div>
);
return <div className="flex flex-col md:flex-row md:items-center justify-between relative space-y-2">{children}</div>;
};
export default FormGroup;

2
src/components/SightingModal/SightingModal.tsx
View File

@@ -122,7 +122,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
<p className="text-gray-300">Hotlist</p>
<div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500">
<p className="font-medium text-2xl break-all text-amber-800">
{hotlistName ? hotlistName[0] : "-"}
{hotlistName ? hotlistName[0].replace(/\.csv$/i, "") : "-"}
</p>
</div>
</div>

47
src/components/UI/Slider.tsx Normal file
View File

@@ -0,0 +1,47 @@
import "rc-slider/assets/index.css";
import Slider from "rc-slider";
import { useSoundContext } from "../../context/SoundContext";
const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
const { dispatch, state } = useSoundContext();
const volume = soundCategory === "SIGHTINGVOLUME" ? state.sightingVolume : state.NPEDsoundVolume;
const handleChange = (value: number | number[]) => {
const number = typeof value === "number" ? value : value[0];
dispatch({ type: soundCategory, payload: number });
};
return (
<div className="flex flex-row w-full lg:w-[40%] space-x-5">
<Slider
min={0}
max={1}
onChange={handleChange}
value={volume}
step={0.1}
styles={{
handle: {
width: "1.2rem",
height: "1.2rem",
marginTop: -7,
backgroundColor: "#3b82f6",
border: "2px solid white",
borderRadius: "50%",
boxShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
},
track: {
backgroundColor: "#3b82f6",
height: 6,
},
rail: {
backgroundColor: "#e5e7eb",
height: 6,
},
}}
/>
<span>{volume * 10}</span>
</div>
);
};
export default SliderComponent;

7
src/context/SoundContext.ts
View File

@@ -7,13 +7,10 @@ type SoundContextType = {
audioArmed: boolean;
};
export const SoundContext = createContext<SoundContextType | undefined>(
undefined
);
export const SoundContext = createContext<SoundContextType | undefined>(undefined);
export const useSoundContext = () => {
const ctx = useContext(SoundContext);
if (!ctx)
throw new Error("useSoundContext must be used within <SoundContext>");
if (!ctx) throw new Error("useSoundContext must be used within <SoundContext>");
return ctx;
};

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

@@ -1,11 +1,4 @@
import {
useEffect,
useMemo,
useReducer,
useRef,
useState,
type ReactNode,
} from "react";
import { useEffect, useMemo, useReducer, useRef, useState, type ReactNode } from "react";
import { SoundContext } from "../SoundContext";
import { initialState, reducer } from "../reducers/SoundContextReducer";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
@@ -27,7 +20,6 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
operation: "VIEW",
path: "soundSettings",
});
dispatch({ type: "UPDATE", payload: result.result });
};
fetchSound();
@@ -63,13 +55,8 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
};
}, []);
const value = useMemo(
() => ({ state, dispatch, audioArmed }),
[state, audioArmed]
);
return (
<SoundContext.Provider value={value}>{children}</SoundContext.Provider>
);
const value = useMemo(() => ({ state, dispatch, audioArmed }), [state, audioArmed]);
return <SoundContext.Provider value={value}>{children}</SoundContext.Provider>;
};
export default SoundContextProvider;

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

@@ -13,6 +13,9 @@ export const initialState: SoundState = {
{ name: "Shutter", soundFile: "shutter" },
{ name: "Warning (voice)", soundFile: "warning" },
],
sightingVolume: 1,
NPEDsoundVolume: 1,
hotlistSoundVolume: 1,
};
export function reducer(state: SoundState, action: SoundAction): SoundState {
@@ -35,6 +38,18 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
soundOptions: [...(state.soundOptions ?? []), action.payload],
};
}
// todo: refactor to use single state coupled with sound name. e.g : {name: <soundname>, volume: <volume>}
case "SIGHTINGVOLUME":
return {
...state,
sightingVolume: action.payload,
};
case "NPEDVOLUME":
return {
...state,
NPEDsoundVolume: action.payload,
};
default:
return state;

3
src/hooks/useSightingFeed.ts
View File

@@ -75,8 +75,9 @@ export function useSightingFeed(url: string | undefined) {
});
//use latestref instead of trigger to revert back
useSoundOnChange(soundSrc, trigger, {
volume: 1,
volume: state.sightingVolume,
initial: false,
});

2
src/pages/SystemSettings.tsx
View File

@@ -47,7 +47,7 @@ const SystemSettings = () => {
</div>
</TabPanel>
<TabPanel>
<div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full">
<div className="mx-auto grid grid-rows-2 sm:grid-cols-1 lg:grid-cols-8 gap-4 px-2 sm:px-4 lg:px-0 w-full">
<SoundSettingsCard />
<SoundUploadCard />
</div>

10
src/types/types.ts
View File

@@ -297,6 +297,9 @@ export type SoundState = {
NPEDsound: SoundValue;
hotlists: Hotlist[];
soundOptions?: SoundUploadValue[];
sightingVolume: number;
NPEDsoundVolume: number;
hotlistSoundVolume: number;
};
type UpdateAction = {
@@ -313,7 +316,12 @@ type AddAction = {
payload: SoundUploadValue;
};
export type SoundAction = UpdateAction | AddAction;
type VolumeAction = {
type: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME";
payload: number;
};
export type SoundAction = UpdateAction | AddAction | VolumeAction;
export type WifiSettingValues = {
ssid: string;
password: string;

29
yarn.lock
View File

@@ -138,7 +138,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.27.1"
"@babel/runtime@^7.1.2":
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
version "7.28.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
@@ -1044,6 +1044,11 @@ chownr@^3.0.0:
resolved "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz"
integrity sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==
classnames@^2.2.5:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
clsx@^2.0.0, clsx@^2.1.1:
version "2.1.1"
resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
@@ -1875,6 +1880,23 @@ queue-microtask@^1.2.2:
resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
rc-slider@^11.1.9:
version "11.1.9"
resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-util "^5.36.0"
rc-util@^5.36.0:
version "5.44.4"
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
dependencies:
"@babel/runtime" "^7.18.3"
react-is "^18.2.0"
react-dom@^19.1.1:
version "19.1.1"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz"
@@ -1892,6 +1914,11 @@ react-is@^16.13.1, react-is@^16.7.0:
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-is@^18.2.0:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
react-lifecycles-compat@^3.0.0:
version "3.0.4"
resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"