diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js
index 23beaa7..6f3caa0 100644
--- a/src/views/ChatRoom/Body/Body.js
+++ b/src/views/ChatRoom/Body/Body.js
@@ -23,7 +23,8 @@ export default class Body extends Component {
}],
messages: [{
id: 'm1',
- content: 'How are you, Lukas!',
+ text: 'How are you, Lukas!',
+ voice: null,
createdAt: '2020-10-10T12:48:00.000Z',
user: {
id: 'u1',
@@ -31,7 +32,8 @@ export default class Body extends Component {
},
}, {
id: 'm2',
- content: 'I am good, good',
+ text: 'I am good, good',
+ voice: null,
createdAt: '2020-10-03T14:49:00.000Z',
user: {
id: 'u2',
@@ -39,7 +41,8 @@ export default class Body extends Component {
},
}, {
id: 'm3',
- content: 'What about you?',
+ text: 'What about you?',
+ voice: null,
createdAt: '2020-10-03T14:49:40.000Z',
user: {
id: 'u2',
@@ -47,7 +50,8 @@ export default class Body extends Component {
},
}, {
id: 'm4',
- content: 'Good as well, preparing for the stream now.',
+ text: 'Good as well, preparing for the stream now.',
+ voice: null,
createdAt: '2020-10-03T14:50:00.000Z',
user: {
id: 'u1',
@@ -55,7 +59,8 @@ export default class Body extends Component {
},
}, {
id: 'm5',
- content: 'How is your uni going?',
+ text: 'How is your uni going?',
+ voice: null,
createdAt: '2020-10-03T14:51:00.000Z',
user: {
id: 'u1',
@@ -63,7 +68,8 @@ export default class Body extends Component {
},
}, {
id: 'm6',
- content: 'It is a bit tough, as I have 2 specializations. How about yours? Do you enjoy it?',
+ text: 'It is a bit tough, as I have 2 specializations. How about yours? Do you enjoy it?',
+ voice: null,
createdAt: '2020-10-03T14:49:00.000Z',
user: {
id: 'u2',
@@ -71,7 +77,8 @@ export default class Body extends Component {
},
}, {
id: 'm7',
- content: 'Big Data is really interesting. Cannot wait to go through all the material.',
+ text: 'Big Data is really interesting. Cannot wait to go through all the material.',
+ voice: null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u1',
@@ -79,7 +86,6 @@ export default class Body extends Component {
},
}]
},
- buttonMode : 'voice',
message : '',
voice : null,
}
@@ -102,6 +108,7 @@ export default class Body extends Component {
this.setState({
voice : audioData,
})
+ this.sendVoice(audioData);
}
cancel = () => {
@@ -110,10 +117,71 @@ export default class Body extends Component {
})
}
+ typeText = (e) => {
+ this.setState({
+ message : e.target.value,
+ })
+ }
+
+ sendMessage = () => {
+ let now = new Date();
+ this.setState(prevState => ({
+ data : {...prevState.data,messages : [...prevState.data.messages,
+ {
+ id: 'm8',
+ text: prevState.message,
+ voice : null,
+ createdAt: now.toString(),
+ user: {
+ id: 'u1',
+ name: 'Vadim',
+ }
+ }
+ ]}
+ ,
+ }));
+ this.setState({
+ message : '',
+ })
+ }
+
+ sendVoice = (audioData) => {
+ let now = new Date();
+ this.setState(prevState => ({
+ data : {...prevState.data,messages : [...prevState.data.messages,
+ {
+ id: 'm9',
+ text: null,
+ voice : audioData,
+ createdAt: now.toString(),
+ user: {
+ id: 'u1',
+ name: 'Vadim',
+ }
+ }
+ ]}
+ ,
+ }));
+ this.setState({
+ voice : null,
+ })
+ }
+
+ sendFile = () => {
+
+ }
+
componentDidMount(){
let chatroom = document.getElementById("chatroom");
chatroom.scrollTop = chatroom.scrollHeight + 40;
}
+
+ componentDidUpdate(){
+ let chatroom = document.getElementById("chatroom");
+ chatroom.scrollTop = chatroom.scrollHeight + 40;
+ }
+
+
render(){
return (
@@ -135,7 +203,10 @@ export default class Body extends Component {
stop={this.stop}
start={this.start}
cancel={this.cancel}
+ message={this.state.message}
recordState={this.state.voice}
+ typeText={this.typeText}
+ sendMessage={this.sendMessage}
/>
diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/Body.scss
index c2b5643..00fef23 100644
--- a/src/views/ChatRoom/Body/Body.scss
+++ b/src/views/ChatRoom/Body/Body.scss
@@ -3,6 +3,7 @@
background-color: rgb(210, 196, 214);
justify-content:flex-start;
flex : 1;
+ max-height: calc(100vh - 82px);
&__header{
align-items: center;
height: 50px;
@@ -12,6 +13,7 @@
letter-spacing:-1px;
font-family: IRANSansNumeralBold;
}
+
p{
font-size: 16px;
color: rgb(101, 2, 182);
@@ -19,13 +21,13 @@
}
}
&__content{
- padding : 0px 20px 15px;
- max-height: calc(100vh - 223px);
+ padding : 0px 20px 40px;
+ height : calc(100vh - 268px);
overflow-y: scroll !important;
+ min-height: 200px;
}
&__footer{
width: 100%;
- min-height: 70px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
diff --git a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js b/src/views/ChatRoom/Body/ChatInputs/ChatInput.js
index bfbee71..2612478 100644
--- a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js
+++ b/src/views/ChatRoom/Body/ChatInputs/ChatInput.js
@@ -1,14 +1,16 @@
import React, { Component } from 'react';
import AudioReactRecorder from 'audio-react-recorder';
-import ReactAudioPlayer from 'react-audio-player';
import MicIcon from '@material-ui/icons/Mic';
import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close';
+import PermMediaIcon from '@material-ui/icons/PermMedia';
+import TextField from '@material-ui/core/TextField';
+import SendIcon from '@material-ui/icons/Send';
import './ChatInputs.scss';
export default class ChatInputs extends Component {
render(){
- const {onStop,stop,start,recordState,cancel} = this.props;
+ const {onStop,stop,start,recordState,cancel,typeText,message,sendMessage} = this.props;
return (
@@ -23,16 +25,27 @@ export default class ChatInputs extends Component {
/> : null
} */}
-
+
+ {/*
*/}
+
typeText(e)} multiline />
{
- recordState === null || (recordState && recordState.url) ?
+ (recordState === null && message === '') || (recordState && recordState.url && message === '') ?
: null
}
+ {
+ message !== '' ?
+
sendMessage()}>
+
+
: null
+ }
{
recordState === 'start' ?
<>
diff --git a/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss b/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
index da7e16b..3aa25d1 100644
--- a/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
+++ b/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
@@ -3,15 +3,58 @@
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
width: 100%;
- padding : 0px 15px;
- align-items : center;
+ padding : 2px 15px 70px;
+ align-items : flex-end;
&__box{
flex: 1;
border-radius: 30px;
background: rgb(18,15,153);
background: linear-gradient(90deg, rgba(18,15,153,1) 0%, rgba(105,9,121,1) 60%);
- height: 45px;
+ min-height: 45px;
margin-right: 10px;
+ align-items: center;
+ padding : 8px 15px;
+ &--file{
+ width: 30px;
+ height: 30px;
+ position: relative;
+ align-self : flex-end;
+ input[type=file]{
+ opacity: 0;
+ width :100%;
+ height : 100%;
+ z-index: 100;
+ position: relative;
+ }
+ }
+ // input[type=text]{
+ // flex : 1;
+ // background-color: inherit;
+ // border : 0px;
+ // text-align: right;
+ // direction: rtl;
+ // color : white;
+ // font-size: 14px;
+ // &:focus{
+ // outline:none;
+ // }
+ // &::placeholder{
+ // color : white;
+ // }
+ // }
+ .MuiTextField-root{
+ flex : 1;
+ border : 0px !important;
+ outline : none !important;
+ text-align : right;
+ textarea{
+ text-align: right;
+ direction: rtl;
+ color : white;
+ font-size: 14px;
+ font-family: IRANSansNumeralLight;
+ }
+ }
}
&__voice{
&--icon{
@@ -29,4 +72,24 @@
.audio-react-recorder{
display:none;
+}
+
+.MuiInput-underline:hover:not(.Mui-disabled):before {
+ border-bottom: 0px !important;
+}
+
+.MuiInput-underline:hover:not(.Mui-disabled):before{
+ border-bottom : 0px !important;
+}
+
+.MuiInput-underline:hover:not(.Mui-disabled):before{
+ border-bottom : 0px !important;
+}
+
+.MuiInput-underline:after{
+ border-bottom : 0px !important;
+}
+
+.MuiInput-underline:before{
+ border-bottom: 0px !important;
}
\ No newline at end of file
diff --git a/src/views/ChatRoom/Body/Message/Message.js b/src/views/ChatRoom/Body/Message/Message.js
index fd33c89..d9ed406 100644
--- a/src/views/ChatRoom/Body/Message/Message.js
+++ b/src/views/ChatRoom/Body/Message/Message.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import ReactAudioPlayer from 'react-audio-player';
import './Message.scss';
@@ -37,9 +38,18 @@ export default class Message extends Component {
{message.user.name}
-
{message.content}
+ {
+ message.text !== null ?
+
{message.text}
: null
+ }
+ {
+ message.voice !== null ?
+
: null
+ }
+
);