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

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>

59
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,34 +41,40 @@ const SoundSettingsFields = () => {
{({ values }) => (
<Form className="flex flex-col space-y-3">
<FormGroup>
<label htmlFor="sightingSound">Sighting Sound</label>
<Field
as="select"
name="sightingSound"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions?.map(({ value, label }) => {
return (
<option key={label} value={value}>
{label}
</option>
);
})}
</Field>
<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"
name="sightingSound"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions?.map(({ value, label }) => {
return (
<option key={label} value={value}>
{label}
</option>
);
})}
</Field>
<SliderComponent soundCategory="SIGHTINGVOLUME" />
</div>
</FormGroup>
<FormGroup>
<label htmlFor="NPEDsound">NPED notification Sound</label>
<Field
as="select"
name="NPEDsound"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions?.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
))}
</Field>
<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"
name="NPEDsound"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{soundOptions?.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</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;