reza completed videocall

src/views/VideoCall/CallRecived/CallRecived.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import VideocamIcon from '@material-ui/icons/Videocam';
+import CallEndIcon from "@material-ui/icons/CallEnd";
+
+// import BottomControl from "../BottomControl/BottomControl";
+import StatusAvatar from "../Avatar/Avatar";
+
+import "./CallRecived.scss";
+export default class CallRecived extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    const { brand, user, phase } = this.props;
+    return (
+      <div className="video-income d-flex flex-column align-items-center">
+        <header className="video-income__header d-flex">
+          <h1 className="video-income__header--logo">{brand}</h1>
+          <div className="video-income__header--expand d-flex">
+            <ExpandMoreIcon style={{ width: 30, height: 30, color: "white" }} />
+          </div>
+        </header>
+        <div className="video-income__avatar d-flex">
+          <StatusAvatar status={user.status} src={user.src} />
+        </div>
+        <h2>{user.name}</h2>
+        <div className="video-income__phase">{phase}</div>
+        <div className="video-income__buttons d-flex">
+          <button className="d-flex" style={{ backgroundColor : 'rgb(52, 209, 52)' }}>
+            <VideocamIcon style={{ width: 38, height: 38, color: "white" }} />
+          </button>
+          <button className="d-flex" style={{ backgroundColor: 'rgb(209, 52, 52)'}}>
+            <CallEndIcon style={{ width: 38, height: 38, color: "white" }} />
+          </button>
+        </div>
+
+        {/* <BottomControl /> */}
+      </div>
+    );
+  }
+}

src/views/VideoCall/CallRecived/CallRecived.scss

@@ -0,0 +1,62 @@
+.video-income {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  padding: 15px;
+  position: relative;
+  &__header {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 25px;
+    font-size: 16px;
+    position: fixed;
+    top: 20px;
+    left: 0px;
+    h1 {
+      font-size: 18px;
+      margin: 0px;
+      font-weight: 100;
+      letter-spacing: 1px;
+      // position : fixed;
+      // left : calc(50% - 35px);
+      // top : 100px;
+    }
+    &--expand {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+  }
+  &__avatar {
+    position: fixed;
+    top: 55px;
+  }
+  h2 {
+    font-size: 22px;
+    margin-top: 20px;
+    position: fixed;
+    top: 140px;
+  }
+  &__phase {
+    margin-top: 15px;
+    position: fixed;
+    // left: calc(50% - 25px);
+    top: 200px;
+  }
+  &__buttons {
+    position: fixed;
+    bottom: 8%;
+    width: 70%;
+    justify-content: space-between;
+    button {
+      width: 65px;
+      height: 65px;
+      border: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+}

src/views/VideoCall/CallStart/CallStart.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import CallEndIcon from "@material-ui/icons/CallEnd";
 
-import StatusAvatar from '../Avatar/Avatar';
+import BottomControl from "../BottomControl/BottomControl";
 
 export default class CallStart extends Component {
   constructor(props) {
@@ -12,14 +12,11 @@ export default class CallStart extends Component {
   render() {
     const {brand,user} = this.props;
     return (
-      <div className="video-end d-flex">
+      <div className="video-calling d-flex flex-column align-items-center">
-        <header className="d-flex">
+        <button className="video-calling__endButton">
-          <div className="video-calling__logo">{brand}</div>
+          <CallEndIcon style={{ width: 30, height: 30, color: "white" }} />
-          <div className="video-calling__expand">
+        </button>
-            <ExpandMoreIcon style={{ width : 30, height : 30 , color : 'white'}} />
+        <BottomControl />
-          </div>
-        </header>
-        <StatusAvatar status={user.status} src={user.src} />
       </div>
     );
   }

src/views/VideoCall/Calling/Calling.js

@@ -14,7 +14,7 @@ export default class Calling extends Component {
   render() {
     const { brand, user, phase } = this.props;
     return (
-      <div className="video-calling d-flex flex-column">
+      <div className="video-calling d-flex flex-column align-items-center">
         <header className="video-calling__header d-flex">
           <h1 className="video-calling__header--logo">{brand}</h1>
           <div className="video-calling__header--expand d-flex">

src/views/VideoCall/Calling/Calling.scss

@@ -30,20 +30,17 @@
   }
   &__avatar{
     position: fixed;
-    left: calc(50% - 45px);
     top : 55px;
   }
   h2{
     font-size: 22px;
     margin-top: 20px;
     position: fixed;
-    left: calc(50% - 25px);
     top : 140px;
   }
   &__phase{
     margin-top: 15px;
     position: fixed;
-    left: calc(50% - 25px);
     top : 200px;
   }
   &__endButton{
@@ -57,6 +54,5 @@
     border-radius: 50%;
     position: fixed;
     bottom : 100px;
-    left : calc(50% - 28px);
   }
 }

src/views/VideoCall/VideoCall.js

@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import Calling from "./Calling/Calling";
 import CallStart from "./CallStart/CallStart";
 import CallEnd from "./CallEnd/CallEnd";
+import CallRecived from "./CallRecived/CallRecived";
 
 import pic from "../../assets/images/pic.png";
 
@@ -11,7 +12,7 @@ export default class VideoCall extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      phase: "Calling",
+      phase: "Start",
     };
   }
   render() {
@@ -25,8 +26,27 @@ export default class VideoCall extends Component {
             phase={phase}
           />
         ) : null}
-        {phase === "Start" ? <CallStart /> : null}
+        {phase === "Start" ? (
-        {phase === "End" ? <CallEnd user={this.props.user} /> : null}
+          <CallStart
+            brand={this.props.brand}
+            user={this.props.user}
+            phase={phase}
+          />
+        ) : null}
+        {phase === "End" ? (
+          <CallEnd
+            brand={this.props.brand}
+            user={this.props.user}
+            phase={phase}
+          />
+        ) : null}
+        { phase === "incoming video call" ? 
+          <CallRecived
+            brand={this.props.brand}
+            user={this.props.user}
+            phase={phase}
+          />
+         : null}
       </div>
     );
   }