reza added voice to chat

front
Reza_ashrafi 4 years ago
parent 3d25ab8ccc
commit 897310c992
  1. 87
      src/views/ChatRoom/Body/Body.js
  2. 8
      src/views/ChatRoom/Body/Body.scss
  3. 21
      src/views/ChatRoom/Body/ChatInputs/ChatInput.js
  4. 69
      src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
  5. 16
      src/views/ChatRoom/Body/Message/Message.js

@ -23,7 +23,8 @@ export default class Body extends Component {
}], }],
messages: [{ messages: [{
id: 'm1', id: 'm1',
content: 'How are you, Lukas!', text: 'How are you, Lukas!',
voice: null,
createdAt: '2020-10-10T12:48:00.000Z', createdAt: '2020-10-10T12:48:00.000Z',
user: { user: {
id: 'u1', id: 'u1',
@ -31,7 +32,8 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm2', id: 'm2',
content: 'I am good, good', text: 'I am good, good',
voice: null,
createdAt: '2020-10-03T14:49:00.000Z', createdAt: '2020-10-03T14:49:00.000Z',
user: { user: {
id: 'u2', id: 'u2',
@ -39,7 +41,8 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm3', id: 'm3',
content: 'What about you?', text: 'What about you?',
voice: null,
createdAt: '2020-10-03T14:49:40.000Z', createdAt: '2020-10-03T14:49:40.000Z',
user: { user: {
id: 'u2', id: 'u2',
@ -47,7 +50,8 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm4', 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', createdAt: '2020-10-03T14:50:00.000Z',
user: { user: {
id: 'u1', id: 'u1',
@ -55,7 +59,8 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm5', id: 'm5',
content: 'How is your uni going?', text: 'How is your uni going?',
voice: null,
createdAt: '2020-10-03T14:51:00.000Z', createdAt: '2020-10-03T14:51:00.000Z',
user: { user: {
id: 'u1', id: 'u1',
@ -63,7 +68,8 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm6', 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', createdAt: '2020-10-03T14:49:00.000Z',
user: { user: {
id: 'u2', id: 'u2',
@ -71,7 +77,8 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm7', 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', createdAt: '2020-10-03T14:53:00.000Z',
user: { user: {
id: 'u1', id: 'u1',
@ -79,7 +86,6 @@ export default class Body extends Component {
}, },
}] }]
}, },
buttonMode : 'voice',
message : '', message : '',
voice : null, voice : null,
} }
@ -102,6 +108,7 @@ export default class Body extends Component {
this.setState({ this.setState({
voice : audioData, voice : audioData,
}) })
this.sendVoice(audioData);
} }
cancel = () => { 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(){ componentDidMount(){
let chatroom = document.getElementById("chatroom"); let chatroom = document.getElementById("chatroom");
chatroom.scrollTop = chatroom.scrollHeight + 40; chatroom.scrollTop = chatroom.scrollHeight + 40;
} }
componentDidUpdate(){
let chatroom = document.getElementById("chatroom");
chatroom.scrollTop = chatroom.scrollHeight + 40;
}
render(){ render(){
return ( return (
<div className="chat-body d-flex flex-column mt-3"> <div className="chat-body d-flex flex-column mt-3">
@ -135,7 +203,10 @@ export default class Body extends Component {
stop={this.stop} stop={this.stop}
start={this.start} start={this.start}
cancel={this.cancel} cancel={this.cancel}
message={this.state.message}
recordState={this.state.voice} recordState={this.state.voice}
typeText={this.typeText}
sendMessage={this.sendMessage}
/> />
</div> </div>
</div> </div>

@ -3,6 +3,7 @@
background-color: rgb(210, 196, 214); background-color: rgb(210, 196, 214);
justify-content:flex-start; justify-content:flex-start;
flex : 1; flex : 1;
max-height: calc(100vh - 82px);
&__header{ &__header{
align-items: center; align-items: center;
height: 50px; height: 50px;
@ -12,6 +13,7 @@
letter-spacing:-1px; letter-spacing:-1px;
font-family: IRANSansNumeralBold; font-family: IRANSansNumeralBold;
} }
p{ p{
font-size: 16px; font-size: 16px;
color: rgb(101, 2, 182); color: rgb(101, 2, 182);
@ -19,13 +21,13 @@
} }
} }
&__content{ &__content{
padding : 0px 20px 15px; padding : 0px 20px 40px;
max-height: calc(100vh - 223px); height : calc(100vh - 268px);
overflow-y: scroll !important; overflow-y: scroll !important;
min-height: 200px;
} }
&__footer{ &__footer{
width: 100%; width: 100%;
min-height: 70px;
border-bottom-left-radius: 40px; border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px; border-bottom-right-radius: 40px;
} }

@ -1,14 +1,16 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import AudioReactRecorder from 'audio-react-recorder'; import AudioReactRecorder from 'audio-react-recorder';
import ReactAudioPlayer from 'react-audio-player';
import MicIcon from '@material-ui/icons/Mic'; import MicIcon from '@material-ui/icons/Mic';
import CheckIcon from '@material-ui/icons/Check'; import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close'; 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'; import './ChatInputs.scss';
export default class ChatInputs extends Component { export default class ChatInputs extends Component {
render(){ render(){
const {onStop,stop,start,recordState,cancel} = this.props; const {onStop,stop,start,recordState,cancel,typeText,message,sendMessage} = this.props;
return ( return (
<div className="chat-inputs d-flex"> <div className="chat-inputs d-flex">
<AudioReactRecorder state={recordState} onStop={onStop} /> <AudioReactRecorder state={recordState} onStop={onStop} />
@ -23,16 +25,27 @@ export default class ChatInputs extends Component {
/> : null /> : null
} */} } */}
<div className="chat-inputs__box d-flex"> <div className="chat-inputs__box d-flex">
<div className="chat-inputs__box--file">
<input type="file" />
<PermMediaIcon style={{color : "white",marginRight : 10, width : 30, height: 30,zIndex : 10,position : "absolute", top: 0, left: 0}} />
</div>
{/* <input type="text" placeholder="یک پیام بنویسید..." multiline /> */}
<TextField id="standard-textarea" label="" value={message} placeholder="یک پیام بنویسید..." rowsMax={4} onChange={(e) => typeText(e)} multiline />
</div> </div>
<div className="chat-inputs__voice d-flex"> <div className="chat-inputs__voice d-flex">
<div className="chat-inputs__voice d-flex"> <div className="chat-inputs__voice d-flex">
{ {
recordState === null || (recordState && recordState.url) ? (recordState === null && message === '') || (recordState && recordState.url && message === '') ?
<div className="chat-inputs__voice--icon d-flex" onClick={start}> <div className="chat-inputs__voice--icon d-flex" onClick={start}>
<MicIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 30, height: 30,borderRadius : 30}} /> <MicIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 30, height: 30,borderRadius : 30}} />
</div> : null </div> : null
} }
{
message !== '' ?
<div className="chat-inputs__voice--icon d-flex" onClick={() => sendMessage()}>
<SendIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 25, height: 25,borderRadius : 30}} />
</div> : null
}
{ {
recordState === 'start' ? recordState === 'start' ?
<> <>

@ -3,15 +3,58 @@
border-bottom-right-radius: 40px; border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px; border-bottom-left-radius: 40px;
width: 100%; width: 100%;
padding : 0px 15px; padding : 2px 15px 70px;
align-items : center; align-items : flex-end;
&__box{ &__box{
flex: 1; flex: 1;
border-radius: 30px; border-radius: 30px;
background: rgb(18,15,153); background: rgb(18,15,153);
background: linear-gradient(90deg, rgba(18,15,153,1) 0%, rgba(105,9,121,1) 60%); background: linear-gradient(90deg, rgba(18,15,153,1) 0%, rgba(105,9,121,1) 60%);
height: 45px; min-height: 45px;
margin-right: 10px; 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{ &__voice{
&--icon{ &--icon{
@ -30,3 +73,23 @@
.audio-react-recorder{ .audio-react-recorder{
display:none; 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;
}

@ -1,4 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import './Message.scss'; import './Message.scss';
@ -37,9 +38,18 @@ export default class Message extends Component {
{message.user.name} {message.user.name}
</span> </span>
</div> </div>
<p {
style={{color: message.user.id === user1.id ? "white" : "black" }} message.text !== null ?
>{message.content}</p> <p style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
{
message.voice !== null ?
<ReactAudioPlayer
src={message.voice.url}
controls
/> : null
}
</div> </div>
</div> </div>
); );

Loading…
Cancel
Save