reza completed videocall

master
Reza_ashrafi 3 years ago
parent 37446bb804
commit 42cd2211fc
  1. 43
      src/views/VideoCall/CallRecived/CallRecived.js
  2. 62
      src/views/VideoCall/CallRecived/CallRecived.scss
  3. 17
      src/views/VideoCall/CallStart/CallStart.js
  4. 2
      src/views/VideoCall/Calling/Calling.js
  5. 4
      src/views/VideoCall/Calling/Calling.scss
  6. 26
      src/views/VideoCall/VideoCall.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>
);
}
}

@ -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%;
}
}
}

@ -1,7 +1,7 @@
import React, { Component } from "react"; 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 { export default class CallStart extends Component {
constructor(props) { constructor(props) {
@ -12,14 +12,11 @@ export default class CallStart extends Component {
render() { render() {
const {brand,user} = this.props; const {brand,user} = this.props;
return ( 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> </div>
); );
} }

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

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

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

Loading…
Cancel
Save