just

build/asset-manifest.json

@@ -7,8 +7,8 @@
     "HomePage.js": "/static/js/HomePage.00c8d7e3.chunk.js",
     "HomePage.js.map": "/static/js/HomePage.00c8d7e3.chunk.js.map",
     "main.css": "/static/css/main.648af75f.chunk.css",
-    "main.js": "/static/js/main.0ecebb98.chunk.js",
-    "main.js.map": "/static/js/main.0ecebb98.chunk.js.map",
+    "main.js": "/static/js/main.f1c56119.chunk.js",
+    "main.js.map": "/static/js/main.f1c56119.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.304a5904.js",
     "runtime-main.js.map": "/static/js/runtime-main.304a5904.js.map",
     "static/js/5.f4279fe9.chunk.js": "/static/js/5.f4279fe9.chunk.js",
@@ -33,6 +33,6 @@
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.7a556023.chunk.js",
     "static/css/main.648af75f.chunk.css",
-    "static/js/main.0ecebb98.chunk.js"
+    "static/js/main.f1c56119.chunk.js"
   ]
 }

src/components/HomePage/CallBar/index.tsx

@@ -42,7 +42,7 @@ const useStyles = makeStyles({
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
   },
   shareScreenActive: {
-    width: '90%',
+    width: '30%',
     borderRadius: 7,
     margin: 'auto',
     border:'solid 2px #0084ff',
@@ -59,7 +59,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     justifyItems:"center",
     width: '34vw',
-    height:'50vh',
+    height:'90vh',
     borderRadius: 7,
   },
   rightIcons: {
@@ -157,16 +157,17 @@ const CallBar = ({callStatus,setCallStatus,socket,myVideoRef}:ICallBar) => {
   const classes = useStyles()
   const { _id } = useSelector(getAuthorizationState)
   const chat = useSelector(getChat)
+  const myAudioRef = useRef<any>(null);
+  const userAudioRef = useRef<any>(null);
   const userVideoRef = useRef<any>(null);
+  const connectionRef = useRef<any>(null);
   const [mySocket, setMySocket] = useState<string>('')
+  const [companionSocket, setCompanionSocket] = useState<string>('')
   const [name, setName] = useState<string>('')
   const [lastName, setLastName] = useState<string>('')
   const [avatarUrl, setAvatarUrl] = useState<string>('')
   const [color, setColor] = useState<string>('')
   const [number,setNumber] = useState<string>('')
-  const myAudioRef = useRef<any>(null);
-  const userAudioRef = useRef<any>(null);
-  const connectionRef = useRef<any>(null);
   const handleLeaveCall = () => {
     connectionRef.current.destroy();
     setCallStatus('')
@@ -193,12 +194,14 @@ const CallBar = ({callStatus,setCallStatus,socket,myVideoRef}:ICallBar) => {
       })
       setCallStatus('ringing')
     });
-    peer.on("stream", (streams:any) => {});
-      socket.on("acceptedCall", ({ signal }: any) => {
-        peer.signal(signal)
-        setCallStatus('accepted')
-        console.log(signal,'signal accepted from companion')
-    });
+    // peer.on("stream", (stream: any) => {
+    //   console.log(stream,'user stream')
+    // });
+    // socket.on("acceptedCall", ({ signal }: any) => {
+    //   // peer.signal(signal)
+    //   setCallStatus('accepted')
+    //   console.log(signal,'signal accepted from companion')
+    // });
     connectionRef.current = peer; 
   },[chat.socketId,chat.companionId,_id,socket,setCallStatus,mySocket])
 
@@ -213,13 +216,15 @@ const CallBar = ({callStatus,setCallStatus,socket,myVideoRef}:ICallBar) => {
       stream,
     });
     peer.on("signal", (data: any) => {
-      socket.emit("answerCall", { signal: data, to: chat.socketId });
+      socket.emit("answerCall", { signal: data, to: companionSocket });
       console.log(data,'sent the signal on answer')
     });
-    peer.on("stream", (streams:any) => {});
-    peer.signal();
+    // peer.on("stream", (stream: any) => {
+    //   console.log(stream,'user stream')
+    // });
+    // peer.signal();
     connectionRef.current = peer;
-  },[socket,chat.socketId])
+  },[socket,companionSocket])
 
   useEffect(() => {
     socket.on("me", (id: string) => {
@@ -233,9 +238,13 @@ const CallBar = ({callStatus,setCallStatus,socket,myVideoRef}:ICallBar) => {
       setAvatarUrl(data.avatarUrl)
       setColor(data.color)
       setNumber(data.number)
+      setCompanionSocket(data.from)
       console.log(data,'incomeCall')
     })
-  },[socket,setCallStatus,setName,setLastName,handleAnswerCall])
+    socket.on('acceptedCall', (data: any) => {
+      console.log(data,'acceptedCall')
+    })
+  },[socket,setCallStatus,setName,setLastName,setCompanionSocket])
 
   useEffect(() => {
     if(callStatus === 'requesting') handleStartCall()
@@ -278,7 +287,7 @@ const CallBar = ({callStatus,setCallStatus,socket,myVideoRef}:ICallBar) => {
           <ListItemText primary={number} primaryTypographyProps={{ color: '#ffffff', fontSize: 15, fontWeight: 500,textAlign:"center" }}/>
           <ListItemText secondary={callStatus+'...'} secondaryTypographyProps={{ color: "#dfdfdf",textAlign: "center" }} />
         </div>}
-        <video className={false?classes.shareScreenActive:classes.shareScreenDisabled} ref={userVideoRef} playsInline muted autoPlay/>
+        <video className={true ? classes.shareScreenActive : classes.shareScreenDisabled} ref={userVideoRef} playsInline autoPlay />
         <div className={classes.bottomWrapper}>
           {!true&&<div className={classes.bottomItem}>
             <Avatar className={classes.bottomIcon}