almost done call

build/asset-manifest.json

@@ -4,13 +4,13 @@
     "static/js/0.3f153385.chunk.js.map": "/static/js/0.3f153385.chunk.js.map",
     "AuthPage.js": "/static/js/AuthPage.301e3b29.chunk.js",
     "AuthPage.js.map": "/static/js/AuthPage.301e3b29.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.74e35ec5.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.74e35ec5.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.374e02d8.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.374e02d8.chunk.js.map",
     "main.css": "/static/css/main.648af75f.chunk.css",
     "main.js": "/static/js/main.df8933d1.chunk.js",
     "main.js.map": "/static/js/main.df8933d1.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.0546d937.js",
-    "runtime-main.js.map": "/static/js/runtime-main.0546d937.js.map",
+    "runtime-main.js": "/static/js/runtime-main.00619f67.js",
+    "runtime-main.js.map": "/static/js/runtime-main.00619f67.js.map",
     "static/js/5.01e74fa9.chunk.js": "/static/js/5.01e74fa9.chunk.js",
     "static/js/5.01e74fa9.chunk.js.map": "/static/js/5.01e74fa9.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
@@ -29,7 +29,7 @@
     "static/media/wallpaperNight.63a4f24a.jpg": "/static/media/wallpaperNight.63a4f24a.jpg"
   },
   "entrypoints": [
-    "static/js/runtime-main.0546d937.js",
+    "static/js/runtime-main.00619f67.js",
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.7a556023.chunk.js",
     "static/css/main.648af75f.chunk.css",

src/components/HomePage/CallBar/index.tsx

@@ -157,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);
@@ -183,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
@@ -205,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))
@@ -243,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)
     }
   }  
   
@@ -256,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)
     }
   }
 
@@ -266,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)
     }
   }
   
@@ -285,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,
@@ -306,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,
+        stream: false,
       });
       peer.on("signal", (data: any) => {
         socket.emit("answerCall", {
@@ -352,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) => {
@@ -374,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)
@@ -385,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%'}}>
@@ -444,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>
@@ -486,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>

src/helpers/index.ts

@@ -162,8 +162,8 @@ const emojisArr = ['💘','😀','😍','😲','😡']
 
 let prodBaseURL = 'https://w-telegram.herokuapp.com'
 let prodSocketURL = 'https://w-telegram-socket.herokuapp.com'
-// prodSocketURL = 'http://localhost:3001'
-// prodBaseURL = 'http://localhost:3000'
+prodSocketURL = 'http://localhost:3001'
+prodBaseURL = 'http://localhost:3000'
 
 const prodAwsS3 = 'https://my-telegram-bucket.s3.eu-west-1.amazonaws.com'