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