|
@@ -22,7 +22,7 @@ import Alert from '@mui/material/Alert';
|
|
import { getChat } from '../../../redux/chat/selector';
|
|
import { getChat } from '../../../redux/chat/selector';
|
|
import { getAuthorizationState } from '../../../redux/authorization/selector';
|
|
import { getAuthorizationState } from '../../../redux/authorization/selector';
|
|
import { prodAwsS3,prodBaseURL,prodSocketURL, firstLetter, slicedWord,getTimeBySeconds,playNotification } from '../../../helpers'
|
|
import { prodAwsS3,prodBaseURL,prodSocketURL, firstLetter, slicedWord,getTimeBySeconds,playNotification } from '../../../helpers'
|
|
-import { socketIdChat } from '../../../api-data';
|
|
|
|
|
|
+import { socketIdChat,sentMessageCallById } from '../../../api-data';
|
|
|
|
|
|
const Peer = require('simple-peer')
|
|
const Peer = require('simple-peer')
|
|
const socket = io(prodSocketURL)
|
|
const socket = io(prodSocketURL)
|
|
@@ -159,27 +159,27 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
const { _id } = useSelector(getAuthorizationState)
|
|
const { _id } = useSelector(getAuthorizationState)
|
|
const { socketId, companionId, name:_name,lastName:_lastName,avatarUrl:_avatarUrl,color:_color,number:_number } = useSelector(getChat)
|
|
const { socketId, companionId, name:_name,lastName:_lastName,avatarUrl:_avatarUrl,color:_color,number:_number } = useSelector(getChat)
|
|
const connectionRef = useRef<any>(null);
|
|
const connectionRef = useRef<any>(null);
|
|
- const idAudioIntervalRef = useRef<any>(null);
|
|
|
|
const myVideoRef = useRef<any>(null);
|
|
const myVideoRef = useRef<any>(null);
|
|
const companionVideoRef = useRef<any>(null);
|
|
const companionVideoRef = useRef<any>(null);
|
|
const companionAudioRef = useRef<any>(null);
|
|
const companionAudioRef = useRef<any>(null);
|
|
|
|
+ const idAudioIntervalRef = useRef<any>(null);
|
|
const [mySocket, setMySocket] = useState<string>('')
|
|
const [mySocket, setMySocket] = useState<string>('')
|
|
- const [mutedMyVideo,setMutedMyVideo] = useState<boolean>(false)
|
|
|
|
- const [mutedMyAudio,setMutedMyAudio] = useState<boolean>(false)
|
|
|
|
- const [companionSocket, setCompanionSocket] = useState<string>('')
|
|
|
|
const [myStream, setMyStream] = useState<any>(null)
|
|
const [myStream, setMyStream] = useState<any>(null)
|
|
const [myShareStream, setMyShareStream] = useState<any>(null)
|
|
const [myShareStream, setMyShareStream] = useState<any>(null)
|
|
|
|
+ const [mutedMyVideo,setMutedMyVideo] = useState<boolean>(true)
|
|
|
|
+ const [mutedMyAudio,setMutedMyAudio] = useState<boolean>(false)
|
|
|
|
+ const [companionSocket, setCompanionSocket] = useState<string>('')
|
|
const [companionSignal, setCompanionSignal] = useState<any>(null)
|
|
const [companionSignal, setCompanionSignal] = useState<any>(null)
|
|
|
|
+ const [audioHtml, setAudioHtml] = useState<any>(null)
|
|
|
|
+ const [callLast, setCallLast] = useState<number>(0)
|
|
|
|
+ const [conversationLast, cetConversationLast] = useState<string>('')
|
|
|
|
+ const [fullScreen, setFullScreen] = useState<boolean>(false)
|
|
|
|
+ const [alert, setAlert] = useState<string>('')
|
|
const [name, setName] = useState<string>('')
|
|
const [name, setName] = useState<string>('')
|
|
const [lastName, setLastName] = useState<string>('')
|
|
const [lastName, setLastName] = useState<string>('')
|
|
const [avatarUrl, setAvatarUrl] = useState<string>('')
|
|
const [avatarUrl, setAvatarUrl] = useState<string>('')
|
|
const [color, setColor] = useState<string>('')
|
|
const [color, setColor] = useState<string>('')
|
|
const [number, setNumber] = useState<string>('')
|
|
const [number, setNumber] = useState<string>('')
|
|
- const [callLast, setCallLast] = useState<number>(0)
|
|
|
|
- const [conversationLast, cetConversationLast] = useState<string>('')
|
|
|
|
- const [fullScreen, setFullScreen] = useState<boolean>(false)
|
|
|
|
- const [alert, setAlert] = useState<string>('')
|
|
|
|
- const [audioHtml, setAudioHtml] = useState<any>(null)
|
|
|
|
|
|
|
|
const handleLeaveCall = useCallback(() => {
|
|
const handleLeaveCall = useCallback(() => {
|
|
setCallStatus('hanging up...')
|
|
setCallStatus('hanging up...')
|
|
@@ -239,11 +239,11 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
}
|
|
}
|
|
replaceStream(shareTrack)
|
|
replaceStream(shareTrack)
|
|
} else {
|
|
} else {
|
|
- setAlert(`Can not start Share before ringing`)
|
|
|
|
|
|
+ setAlert(`Can not start Share before stream`)
|
|
setTimeout(() => setAlert(''),2000)
|
|
setTimeout(() => setAlert(''),2000)
|
|
}
|
|
}
|
|
} catch (e: any) {
|
|
} catch (e: any) {
|
|
- setAlert(`Permission fro getDisplayMedia is required!`)
|
|
|
|
|
|
+ setAlert(`Permission for getDisplayMedia is required!`)
|
|
setTimeout(() => setAlert(''),2000)
|
|
setTimeout(() => setAlert(''),2000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -253,7 +253,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
setMutedMyVideo(!mutedMyVideo)
|
|
setMutedMyVideo(!mutedMyVideo)
|
|
myStream.getVideoTracks()[0].enabled = !myStream.getVideoTracks()[0].enabled
|
|
myStream.getVideoTracks()[0].enabled = !myStream.getVideoTracks()[0].enabled
|
|
} else {
|
|
} else {
|
|
- setAlert(`Can not ${mutedMyVideo ? 'start' : 'stop'} Video before ringing`)
|
|
|
|
|
|
+ setAlert(`Can not ${mutedMyVideo ? 'start' : 'stop'} Video before stream`)
|
|
setTimeout(() => setAlert(''),2000)
|
|
setTimeout(() => setAlert(''),2000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -263,18 +263,20 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
setMutedMyAudio(!mutedMyAudio)
|
|
setMutedMyAudio(!mutedMyAudio)
|
|
myStream.getAudioTracks()[0].enabled = !myStream.getAudioTracks()[0].enabled
|
|
myStream.getAudioTracks()[0].enabled = !myStream.getAudioTracks()[0].enabled
|
|
} else {
|
|
} else {
|
|
- setAlert(`Can not start ${mutedMyAudio ? 'start' : 'stop'} Audio before ringing`)
|
|
|
|
|
|
+ setAlert(`Can not start ${mutedMyAudio ? 'start' : 'stop'} Audio before stream`)
|
|
setTimeout(() => setAlert(''),2000)
|
|
setTimeout(() => setAlert(''),2000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
const handleStartCall = useCallback(async () => {
|
|
const handleStartCall = useCallback(async () => {
|
|
try {
|
|
try {
|
|
|
|
+ sentMessageCallById(companionId,false,0)
|
|
setCallStatus('waiting...')
|
|
setCallStatus('waiting...')
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: true,
|
|
video: true,
|
|
audio: true
|
|
audio: true
|
|
})
|
|
})
|
|
|
|
+ stream.getVideoTracks()[0].enabled = false
|
|
setMyStream(stream)
|
|
setMyStream(stream)
|
|
myVideoRef.current.srcObject = stream;
|
|
myVideoRef.current.srcObject = stream;
|
|
const peer = new Peer({
|
|
const peer = new Peer({
|
|
@@ -312,8 +314,9 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
peer.on('error', handleLeaveCall)
|
|
peer.on('error', handleLeaveCall)
|
|
socket.on("acceptedCall", ({ signal }: any) => peer.signal(signal));
|
|
socket.on("acceptedCall", ({ signal }: any) => peer.signal(signal));
|
|
connectionRef.current = peer;
|
|
connectionRef.current = peer;
|
|
- } catch (e:any) {
|
|
|
|
- handleLeaveCall()
|
|
|
|
|
|
+ } catch (e: any) {
|
|
|
|
+ setAlert(`Permission for getUserMedia is required!`)
|
|
|
|
+ setTimeout(handleLeaveCall,2000)
|
|
}
|
|
}
|
|
},[socketId,companionId,_id,mySocket,myVideoRef,setCallStatus,handleLeaveCall])
|
|
},[socketId,companionId,_id,mySocket,myVideoRef,setCallStatus,handleLeaveCall])
|
|
|
|
|
|
@@ -325,6 +328,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
// video: true,
|
|
// video: true,
|
|
// audio: true
|
|
// audio: true
|
|
// })
|
|
// })
|
|
|
|
+ //stream.getVideoTracks()[0].enabled = false
|
|
// setMyStream(stream)
|
|
// setMyStream(stream)
|
|
// myVideoRef.current.srcObject = stream;
|
|
// myVideoRef.current.srcObject = stream;
|
|
const peer = new Peer({
|
|
const peer = new Peer({
|
|
@@ -344,6 +348,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
});
|
|
});
|
|
peer.on('connect', () => {
|
|
peer.on('connect', () => {
|
|
setCallStatus('connection')
|
|
setCallStatus('connection')
|
|
|
|
+ clearInterval(idAudioIntervalRef.current)
|
|
setTimeout(() => setCallStatus('conversation'),500)
|
|
setTimeout(() => setCallStatus('conversation'),500)
|
|
})
|
|
})
|
|
peer.on("close", handleLeaveCall);
|
|
peer.on("close", handleLeaveCall);
|
|
@@ -351,7 +356,8 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
peer.signal(companionSignal);
|
|
peer.signal(companionSignal);
|
|
connectionRef.current = peer;
|
|
connectionRef.current = peer;
|
|
} catch (e:any) {
|
|
} catch (e:any) {
|
|
- handleLeaveCall()
|
|
|
|
|
|
+ setAlert(`Permission for getUserMedia is required!`)
|
|
|
|
+ setTimeout(handleLeaveCall,2000)
|
|
}
|
|
}
|
|
}, [companionSocket, companionSignal, setCallStatus,audioHtml,handleLeaveCall])
|
|
}, [companionSocket, companionSignal, setCallStatus,audioHtml,handleLeaveCall])
|
|
|
|
|
|
@@ -376,6 +382,8 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
|
|
audioRing.loop = true
|
|
audioRing.loop = true
|
|
setAudioHtml(audioRing)
|
|
setAudioHtml(audioRing)
|
|
setCallStatus('is calling you')
|
|
setCallStatus('is calling you')
|
|
|
|
+ idAudioIntervalRef.current = setInterval(() =>
|
|
|
|
+ setCallLast(prevState => prevState + 1), 1000)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}, [setCallStatus,companionSocket])
|
|
}, [setCallStatus,companionSocket])
|