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

- added volume functionality for NPED notifications

Browse Source
This commit is contained in:
Toba Ojo
2025-10-20 09:11:05 +01:00
parent 82b84dc46e
commit b2dd35b311
5 changed files with 26 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,10 +38,7 @@ type SightingHistoryProps = {
className?: string;
};
export default function SightingHistoryWidget({
className,
title,
}: SightingHistoryProps) {
export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
useNow(1000);
const { state } = useSoundContext();
@@ -53,7 +50,7 @@ export default function SightingHistoryWidget({
return getSoundFileURL(state?.hotlists?.[0]?.sound) ?? notification;
}, [state.hotlists]);
const { play: npedSound } = useSound(soundSrcNped);
const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
const { play: hotlistsound } = useSound(soundSrcHotlist);
const {
sightings,
@@ -98,10 +95,7 @@ export default function SightingHistoryWidget({
[setSelectedSighting, setSightingModalOpen]
);
const rows = useMemo(
() => sightings?.filter(Boolean) as SightingType[],
[sightings]
);
const rows = useMemo(() => sightings?.filter(Boolean) as SightingType[], [sightings]);
useEffect(() => {
if (!rows?.length) return;
@@ -129,13 +123,7 @@ export default function SightingHistoryWidget({
break;
}
}
}, [
rows,
hotlistsound,
npedSound,
setSightingModalOpen,
setSelectedSighting,
]);
}, [rows, hotlistsound, npedSound, setSightingModalOpen, setSelectedSighting]);
useEffect(() => {
rows?.forEach((obj) => {
@@ -187,12 +175,7 @@ export default function SightingHistoryWidget({
};
return (
<>
<Card
className={clsx(
"overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4",
className
)}
>
<Card className={clsx("overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4", className)}>
<CardHeader title={title} />
<div className="flex flex-col gap-3 ">
{isLoading && (
@@ -215,45 +198,16 @@ export default function SightingHistoryWidget({
className={`border border-gray-700 rounded-md mb-2 p-2 cursor-pointer `}
onClick={() => onRowClick(obj)}
>
<div
className={`flex items-center gap-3 mt-2 justify-between `}
>
<div className={`flex items-center gap-3 mt-2 justify-between `}>
<div className={`border p-1 `}>
<img
src={obj?.plateUrlColour || BLANK_IMG}
height={48}
width={200}
alt="colour patch"
/>
<img src={obj?.plateUrlColour || BLANK_IMG} height={48} width={200} alt="colour patch" />
</div>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitA && (
<img
src={NPED_CAT_A}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitB && (
<img
src={NPED_CAT_B}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitC && (
<img
src={NPED_CAT_C}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
<img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />
)}
{isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
<NumberPlate motion={motionAway} vrm={obj?.vrm} />
</div>
</div>
@@ -262,11 +216,7 @@ export default function SightingHistoryWidget({
</div>
</div>
</Card>
<SightingModal
isSightingModalOpen={isSightingModalOpen}
handleClose={handleClose}
sighting={selectedSighting}
/>
<SightingModal isSightingModalOpen={isSightingModalOpen} handleClose={handleClose} sighting={selectedSighting} />
</>
);
}