diff --git a/src/views/VideoCall/CallRecived/CallRecived.js b/src/views/VideoCall/CallRecived/CallRecived.js
new file mode 100644
index 0000000..1619b21
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
{user.name}
+
{phase}
+
+
+
+
+
+ {/*
*/}
+
+ );
+ }
+}
diff --git a/src/views/VideoCall/CallRecived/CallRecived.scss b/src/views/VideoCall/CallRecived/CallRecived.scss
new file mode 100644
index 0000000..ae67416
--- /dev/null
+++ b/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%;
+ }
+ }
+}
diff --git a/src/views/VideoCall/CallStart/CallStart.js b/src/views/VideoCall/CallStart/CallStart.js
index 5bc4cfc..a04d843 100644
--- a/src/views/VideoCall/CallStart/CallStart.js
+++ b/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 (
-
-
-
+
+
+
);
}
diff --git a/src/views/VideoCall/Calling/Calling.js b/src/views/VideoCall/Calling/Calling.js
index ecd2a2f..1dae9d1 100644
--- a/src/views/VideoCall/Calling/Calling.js
+++ b/src/views/VideoCall/Calling/Calling.js
@@ -14,7 +14,7 @@ export default class Calling extends Component {
render() {
const { brand, user, phase } = this.props;
return (
-
+
{brand}
diff --git a/src/views/VideoCall/Calling/Calling.scss b/src/views/VideoCall/Calling/Calling.scss
index bd48a2f..63a28d7 100644
--- a/src/views/VideoCall/Calling/Calling.scss
+++ b/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);
}
}
\ No newline at end of file
diff --git a/src/views/VideoCall/VideoCall.js b/src/views/VideoCall/VideoCall.js
index f67fa6f..0e081d6 100644
--- a/src/views/VideoCall/VideoCall.js
+++ b/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" ? : null}
- {phase === "End" ? : null}
+ {phase === "Start" ? (
+
+ ) : null}
+ {phase === "End" ? (
+
+ ) : null}
+ { phase === "incoming video call" ?
+
+ : null}
);
}