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 ( +
+
+

{brand}

+
+ +
+
+
+ +
+

{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 ( -
-
-
{brand}
-
- -
-
- +
+ +
); } 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}
); }