|
|
@@ -17,14 +17,12 @@ import MicIcon from '@mui/icons-material/Mic';
|
|
|
import MicOffIcon from '@mui/icons-material/MicOff';
|
|
|
import CallEndIcon from '@mui/icons-material/CallEnd';
|
|
|
import StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
|
|
|
-import ScreenShareIcon from '@mui/icons-material/ScreenShare';
|
|
|
import Alert from '@mui/material/Alert';
|
|
|
|
|
|
import { getChat } from '../../../redux/chat/selector';
|
|
|
import { getAuthorizationState } from '../../../redux/authorization/selector';
|
|
|
import { prodAwsS3,prodBaseURL,prodSocketURL, firstLetter, slicedWord,getTimeBySeconds,playNotification } from '../../../helpers'
|
|
|
import { socketIdChat } from '../../../api-data';
|
|
|
-import { current } from '@reduxjs/toolkit';
|
|
|
|
|
|
const Peer = require('simple-peer')
|
|
|
const socket = io(prodSocketURL)
|
|
|
@@ -159,8 +157,7 @@ interface ICallBar {
|
|
|
const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
const classes = useStyles()
|
|
|
const { _id } = useSelector(getAuthorizationState)
|
|
|
- const chat = useSelector(getChat)
|
|
|
- const { socketId, companionId } = chat
|
|
|
+ const { socketId, companionId, name:_name,lastName:_lastName,avatarUrl:_avatarUrl,color:_color,number:_number } = useSelector(getChat)
|
|
|
const connectionRef = useRef<any>(null);
|
|
|
const idAudioIntervalRef = useRef<any>(null);
|
|
|
const myVideoRef = useRef<any>(null);
|
|
|
@@ -185,13 +182,11 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
const [audioHtml, setAudioHtml] = useState<any>(null)
|
|
|
|
|
|
const handleLeaveCall = useCallback(() => {
|
|
|
- if (callStatus === 'is calling you') {
|
|
|
- socket.emit("answerCall", {
|
|
|
- signal: 'declined',
|
|
|
- to: companionSocket,
|
|
|
- });
|
|
|
+ setCallStatus('hanging up...')
|
|
|
+ if (connectionRef.current) {
|
|
|
+ connectionRef.current.destroy()
|
|
|
+ connectionRef.current = null
|
|
|
}
|
|
|
- if(connectionRef.current) connectionRef.current.destroy();
|
|
|
if(idAudioIntervalRef.current) clearInterval(idAudioIntervalRef.current)
|
|
|
myVideoRef.current.srcObject = null
|
|
|
companionVideoRef.current.srcObject = null
|
|
|
@@ -207,20 +202,19 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
setCompanionSocket('')
|
|
|
setMyStream(null)
|
|
|
setCompanionSignal(null)
|
|
|
- setName('')
|
|
|
- setLastName('')
|
|
|
- setAvatarUrl('')
|
|
|
- setColor('')
|
|
|
- setNumber('')
|
|
|
setCallLast(0)
|
|
|
cetConversationLast('')
|
|
|
setFullScreen(false)
|
|
|
setAlert('')
|
|
|
- setCallStatus('')
|
|
|
- }, [setCallStatus, callStatus, companionSocket, audioHtml, myStream])
|
|
|
-
|
|
|
- const handleHangUp = () =>
|
|
|
- setCallStatus('hanging up...')
|
|
|
+ setTimeout(() => {
|
|
|
+ setCallStatus('')
|
|
|
+ setName('')
|
|
|
+ setLastName('')
|
|
|
+ setAvatarUrl('')
|
|
|
+ setColor('')
|
|
|
+ setNumber('')
|
|
|
+ },500)
|
|
|
+ }, [setCallStatus, audioHtml, myStream])
|
|
|
|
|
|
const handleConversationLast = (e: any) =>
|
|
|
cetConversationLast(getTimeBySeconds(e.target.currentTime))
|
|
|
@@ -245,11 +239,12 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
}
|
|
|
replaceStream(shareTrack)
|
|
|
} else {
|
|
|
- setAlert(`You can not enable Share before stream started`)
|
|
|
- setTimeout(() => setAlert(''),1000)
|
|
|
+ setAlert(`Can not start Share before ringing`)
|
|
|
+ setTimeout(() => setAlert(''),2000)
|
|
|
}
|
|
|
} catch (e: any) {
|
|
|
- setCallStatus('permission not allowed')
|
|
|
+ setAlert(`Permission fro getDisplayMedia is required!`)
|
|
|
+ setTimeout(() => setAlert(''),2000)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -258,8 +253,8 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
setMutedMyVideo(!mutedMyVideo)
|
|
|
myStream.getVideoTracks()[0].enabled = !myStream.getVideoTracks()[0].enabled
|
|
|
} else {
|
|
|
- setAlert(`You can not ${mutedMyVideo ? 'enable' : 'disable'} Video before stream started`)
|
|
|
- setTimeout(() => setAlert(''),1000)
|
|
|
+ setAlert(`Can not ${mutedMyVideo ? 'start' : 'stop'} Video before ringing`)
|
|
|
+ setTimeout(() => setAlert(''),2000)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -268,8 +263,8 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
setMutedMyAudio(!mutedMyAudio)
|
|
|
myStream.getAudioTracks()[0].enabled = !myStream.getAudioTracks()[0].enabled
|
|
|
} else {
|
|
|
- setAlert(`You can not ${mutedMyAudio ? 'enable' : 'disable'} Audio before stream started`)
|
|
|
- setTimeout(() => setAlert(''),1000)
|
|
|
+ setAlert(`Can not start ${mutedMyAudio ? 'start' : 'stop'} Audio before ringing`)
|
|
|
+ setTimeout(() => setAlert(''),2000)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -287,13 +282,13 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
trickle: false,
|
|
|
stream
|
|
|
});
|
|
|
+ setCallStatus('ringing...')
|
|
|
const audioRing = playNotification(`${prodBaseURL}/calling.mp3`)
|
|
|
audioRing.loop = true
|
|
|
setAudioHtml(audioRing)
|
|
|
idAudioIntervalRef.current = setInterval(() =>
|
|
|
setCallLast(prevState => prevState + 1), 1000)
|
|
|
peer.on("signal", (data: any) => {
|
|
|
- setCallStatus('ringing...')
|
|
|
socket.emit("callTo", {
|
|
|
to: socketId,
|
|
|
signalData: data,
|
|
|
@@ -308,39 +303,34 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
companionAudioRef.current.srcObject = companionStream;
|
|
|
});
|
|
|
peer.on('connect', () => {
|
|
|
- setCallStatus('connection')
|
|
|
- setAlert('')
|
|
|
audioRing.pause()
|
|
|
+ setCallStatus('connection')
|
|
|
clearInterval(idAudioIntervalRef.current)
|
|
|
- setTimeout(() => setCallStatus('conversation'),1000)
|
|
|
+ setTimeout(() => setCallStatus('conversation'),500)
|
|
|
})
|
|
|
- peer.on("close", () => setCallStatus('hanging up...'));
|
|
|
- peer.on('error', () => setCallStatus('connection lost'))
|
|
|
- socket.on("acceptedCall", ({ signal }: any) => {
|
|
|
- if (signal === 'declined') setCallStatus('request declined')
|
|
|
- else if (signal === 'busy') setCallStatus('line busy')
|
|
|
- else peer.signal(signal)
|
|
|
- });
|
|
|
+ peer.on("close", handleLeaveCall);
|
|
|
+ peer.on('error', handleLeaveCall)
|
|
|
+ socket.on("acceptedCall", ({ signal }: any) => peer.signal(signal));
|
|
|
connectionRef.current = peer;
|
|
|
} catch (e:any) {
|
|
|
- setCallStatus('permission not allowed')
|
|
|
+ handleLeaveCall()
|
|
|
}
|
|
|
- },[socketId,companionId,_id,mySocket,myVideoRef,setCallStatus])
|
|
|
+ },[socketId,companionId,_id,mySocket,myVideoRef,setCallStatus,handleLeaveCall])
|
|
|
|
|
|
const handleAnswerCall = useCallback(async () => {
|
|
|
try {
|
|
|
- setCallStatus('waiting...')
|
|
|
audioHtml.pause()
|
|
|
- const stream = await navigator.mediaDevices.getUserMedia({
|
|
|
- video: true,
|
|
|
- audio: true
|
|
|
- })
|
|
|
- setMyStream(stream)
|
|
|
- myVideoRef.current.srcObject = stream;
|
|
|
+ setCallStatus('waiting...')
|
|
|
+ // const stream = await navigator.mediaDevices.getUserMedia({
|
|
|
+ // video: true,
|
|
|
+ // audio: true
|
|
|
+ // })
|
|
|
+ // setMyStream(stream)
|
|
|
+ // myVideoRef.current.srcObject = stream;
|
|
|
const peer = new Peer({
|
|
|
initiator: false,
|
|
|
trickle: false,
|
|
|
- stream:false,
|
|
|
+ stream: false,
|
|
|
});
|
|
|
peer.on("signal", (data: any) => {
|
|
|
socket.emit("answerCall", {
|
|
|
@@ -354,17 +344,16 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
});
|
|
|
peer.on('connect', () => {
|
|
|
setCallStatus('connection')
|
|
|
- setAlert('')
|
|
|
- setTimeout(() => setCallStatus('conversation'),1000)
|
|
|
+ setTimeout(() => setCallStatus('conversation'),500)
|
|
|
})
|
|
|
- peer.on("close", () => setCallStatus('hanging up...'));
|
|
|
- peer.on('error', () => setCallStatus('connection lost'))
|
|
|
+ peer.on("close", handleLeaveCall);
|
|
|
+ peer.on('error', handleLeaveCall)
|
|
|
peer.signal(companionSignal);
|
|
|
connectionRef.current = peer;
|
|
|
- } catch (e: any) {
|
|
|
- setCallStatus('permission not allowed')
|
|
|
+ } catch (e:any) {
|
|
|
+ handleLeaveCall()
|
|
|
}
|
|
|
- }, [companionSocket, companionSignal, setCallStatus,audioHtml])
|
|
|
+ }, [companionSocket, companionSignal, setCallStatus,audioHtml,handleLeaveCall])
|
|
|
|
|
|
useEffect(() => {
|
|
|
socket.on("me", (id: string) => {
|
|
|
@@ -376,7 +365,6 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
useEffect(() => {
|
|
|
socket.on('incomeCall', ({ name, lastName, avatarUrl, color, number, from, signal }: any) => {
|
|
|
if (connectionRef.current === null) {
|
|
|
- setCallStatus('is calling you')
|
|
|
setName(name)
|
|
|
setLastName(lastName)
|
|
|
setAvatarUrl(avatarUrl)
|
|
|
@@ -387,39 +375,25 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
const audioRing = playNotification(`${prodBaseURL}/ringing.mp3`)
|
|
|
audioRing.loop = true
|
|
|
setAudioHtml(audioRing)
|
|
|
- } else if (companionSocket !== from) {
|
|
|
- socket.emit("answerCall", {
|
|
|
- signal: 'busy',
|
|
|
- to: companionSocket,
|
|
|
- });
|
|
|
+ setCallStatus('is calling you')
|
|
|
}
|
|
|
})
|
|
|
}, [setCallStatus,companionSocket])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (callLast === 60) setCallStatus('have not got response')
|
|
|
- }, [callLast, setCallStatus])
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if(callStatus === 'requesting...') handleStartCall()
|
|
|
- }, [callStatus, handleStartCall])
|
|
|
+ if (callStatus === 'requesting...') {
|
|
|
+ setName(_name)
|
|
|
+ setLastName(_lastName)
|
|
|
+ setAvatarUrl(_avatarUrl)
|
|
|
+ setColor(_color)
|
|
|
+ setNumber(_number)
|
|
|
+ setTimeout(handleStartCall,500)
|
|
|
+ }
|
|
|
+ }, [callStatus,_name,_lastName,_avatarUrl,_color,_number, handleStartCall])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (callStatus === 'hanging up...' || callStatus === 'connection lost'
|
|
|
- || callStatus === 'request declined' || callStatus === 'have not got response'
|
|
|
- || callStatus === 'permission not allowed' || callStatus === 'line busy')
|
|
|
- handleLeaveCall()
|
|
|
- }, [callStatus, handleLeaveCall, setCallStatus])
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (callStatus === '') {
|
|
|
- setName(chat.name)
|
|
|
- setLastName(chat.lastName)
|
|
|
- setAvatarUrl(chat.avatarUrl)
|
|
|
- setColor(chat.color)
|
|
|
- setNumber(chat.number)
|
|
|
- }
|
|
|
- }, [callStatus, chat])
|
|
|
+ if (callLast === 60) handleLeaveCall()
|
|
|
+ }, [callLast, handleLeaveCall])
|
|
|
|
|
|
return (
|
|
|
<div className={classes.container} style={{ top: callStatus ? 0 : '-100%'}}>
|
|
|
@@ -446,7 +420,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
style={{backgroundColor:fullScreen?'rgb(70, 70, 70)':'rgb(36, 36, 36)'}}>
|
|
|
<CropLandscapeIcon fontSize='small' />
|
|
|
</div>
|
|
|
- <div className={classes.rightIconWrapperClose} onClick={handleHangUp}>
|
|
|
+ <div className={classes.rightIconWrapperClose} onClick={handleLeaveCall}>
|
|
|
<CloseIcon fontSize='small' />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -488,7 +462,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
|
<Typography variant="h6" className={classes.titleIconBottom}>{mutedMyVideo?'Start Video':'Stop Video'}</Typography>
|
|
|
</div>
|
|
|
<div className={classes.bottomItem}>
|
|
|
- <Avatar className={classes.bottomIconEndAccept} onClick={handleHangUp}
|
|
|
+ <Avatar className={classes.bottomIconEndAccept} onClick={handleLeaveCall}
|
|
|
sx={{backgroundColor: '#f02a2a',color: '#ffffff', width: 44, height: 44,zIndex:0}}>
|
|
|
<CallEndIcon fontSize="medium" />
|
|
|
</Avatar>
|
