diff --git a/src/assets/sounds/warning.mp3 b/src/assets/sounds/warning.mp3 new file mode 100644 index 00000000..a62c93a9 Binary files /dev/null and b/src/assets/sounds/warning.mp3 differ diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index 8d84950c..b5aeb670 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -26,7 +26,9 @@ export const DronMarker = props => { const { controlGroupAuthInfo } = useSelector( state => state.controlGroupAuthState ); - + const { controlGpArcrftWarnList } = useSelector( + state => state.controlGpLogState + ); const [arrMarkers, setArrMarkers] = useState([]); // const [arrInfos, setArrInfos] = useState([]); @@ -186,8 +188,34 @@ export const DronMarker = props => { }; //마커에 위치를 이동한다. - const moveMarkers = (marker, position) => { + const moveMarkers = (marker, position, gps) => { + const getIcon = marker.getIcon(); + marker.setPosition(position); + if ( + controlGpArcrftWarnList?.filter(i => i.cntrlId === gps.controlId).length > + 0 + ) { + if (controlGpArcrftWarnList[0].controlWarnCd) { + marker.setIcon({ + content: ``, + anchor: getIcon.anchor + }); + } else { + marker.setIcon({ + content: ``, + anchor: getIcon.anchor + }); + } + } }; const moveInfos = (info, position) => { @@ -225,7 +253,7 @@ export const DronMarker = props => { const isExists = arrMarkers.find(ele => ele.id === item.objectId); // const isInfos = arrInfos.find( info => info._id === item.objectId ) if (isExists) { - moveMarkers(isExists, position); + moveMarkers(isExists, position, item); // moveInfos(isInfos, position); } else { addMarkers(position, item.objectId, item.controlId, item); diff --git a/src/components/map/naver/dron/DronToast.js b/src/components/map/naver/dron/DronToast.js index 9c89de3f..c6c81cb1 100644 --- a/src/components/map/naver/dron/DronToast.js +++ b/src/components/map/naver/dron/DronToast.js @@ -13,14 +13,17 @@ import { objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions'; import 'react-toastify/dist/ReactToastify.css'; +import useAudio from '../../../../utility/hooks/useAudio'; +import warning from '../../../../assets/sounds/warning.mp3'; const DronToast = () => { const dispatch = useDispatch(); - + const [playing, toggle] = useAudio(warning); const { controlGpArcrftWarnList } = useSelector( state => state.controlGpLogState ); const [toastId, setToastId] = useState(); + // const [is, setIs] = useState(false); useEffect(() => { if (controlGpArcrftWarnList) { @@ -44,17 +47,28 @@ const DronToast = () => { // setToastId(null); }, onClose: () => { + toggle(false); + // setIs(true); setToastId(null); } } ); + if (!playing) { + toggle(true); + } setToastId(id); - break; } } } + for (let i = 0; i < controlGpArcrftWarnList.length; i++) { + if (!controlGpArcrftWarnList[i].controlWarnCd) { + toggle(false); + } else { + toggle(true); + } + } } }, [controlGpArcrftWarnList]); diff --git a/src/utility/hooks/useAudio.js b/src/utility/hooks/useAudio.js new file mode 100644 index 00000000..90452c39 --- /dev/null +++ b/src/utility/hooks/useAudio.js @@ -0,0 +1,24 @@ +import { useMemo, useEffect, useState } from 'react'; + +const useAudio = url => { + const audio = useMemo(() => new Audio(url), []); + const [playing, setPlaying] = useState(false); + + const toggle = val => setPlaying(val); + + useEffect(() => { + if (playing) audio.loop = true; + playing ? audio.play() : audio.pause(); + }, [playing]); + + useEffect(() => { + audio.addEventListener('ended', () => setPlaying(false)); + return () => { + audio.removeEventListener('ended', () => setPlaying(false)); + }; + }, []); + + return [playing, toggle]; +}; + +export default useAudio;