|
|
|
@ -2,6 +2,8 @@ import React, { Component } from 'react'; |
|
|
|
|
import Message from './Message/Message'; |
|
|
|
|
import ChatInputs from './ChatInputs/ChatInput'; |
|
|
|
|
import { RecordState } from 'audio-react-recorder'; |
|
|
|
|
import ReactPlayer from 'react-player'; |
|
|
|
|
import ReactAudioPlayer from 'react-audio-player'; |
|
|
|
|
|
|
|
|
|
import photo from '../../../assets/images/reza.png'; |
|
|
|
|
import photo1 from '../../../assets/images/user2.png'; |
|
|
|
@ -25,6 +27,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm1', |
|
|
|
|
text: 'How are you, Lukas!', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-10T12:48:00.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
@ -34,6 +40,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm2', |
|
|
|
|
text: 'I am good, good', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-03T14:49:00.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u2', |
|
|
|
@ -43,6 +53,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm3', |
|
|
|
|
text: 'What about you?', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-03T14:49:40.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u2', |
|
|
|
@ -52,6 +66,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm4', |
|
|
|
|
text: 'Good as well, preparing for the stream now.', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-03T14:50:00.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
@ -61,6 +79,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm5', |
|
|
|
|
text: 'How is your uni going?', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-03T14:51:00.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
@ -70,6 +92,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm6', |
|
|
|
|
text: 'It is a bit tough, as I have 2 specializations. How about yours? Do you enjoy it?', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-03T14:49:00.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u2', |
|
|
|
@ -79,6 +105,10 @@ export default class Body extends Component { |
|
|
|
|
id: 'm7', |
|
|
|
|
text: 'Big Data is really interesting. Cannot wait to go through all the material.', |
|
|
|
|
voice: null, |
|
|
|
|
image: null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
createdAt: '2020-10-03T14:53:00.000Z', |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
@ -88,6 +118,11 @@ export default class Body extends Component { |
|
|
|
|
}, |
|
|
|
|
message : '', |
|
|
|
|
voice : null, |
|
|
|
|
file: null, |
|
|
|
|
image : null, |
|
|
|
|
video : null, |
|
|
|
|
music: null, |
|
|
|
|
document : null, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -123,26 +158,65 @@ export default class Body extends Component { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
addFile = (e) => { |
|
|
|
|
if(e.target.files[0].type === 'image/apng' || e.target.files[0].type === 'image/avif' || e.target.files[0].type === 'image/gif' || e.target.files[0].type === 'image/jpeg' || e.target.files[0].type === 'image/png' || e.target.files[0].type === 'image/svg+xml' || e.target.files[0].type === 'image/webp'){ |
|
|
|
|
this.setState({ |
|
|
|
|
image : URL.createObjectURL(e.target.files[0]), |
|
|
|
|
file : 'fill', |
|
|
|
|
video : null, |
|
|
|
|
document : null, |
|
|
|
|
music : null |
|
|
|
|
}) |
|
|
|
|
}else if(e.target.files[0].type === 'video/3gpp' || e.target.files[0].type === 'video/mpeg' || e.target.files[0].type === 'video/mp4' || e.target.files[0].type === 'video/ogg' || e.target.files[0].type === 'video/quicktime' || e.target.files[0].type === 'video/webm'){ |
|
|
|
|
this.setState({ |
|
|
|
|
image : null, |
|
|
|
|
file : 'fill', |
|
|
|
|
video : URL.createObjectURL(e.target.files[0]), |
|
|
|
|
document : null, |
|
|
|
|
music : null |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
else if(e.target.files[0].type === 'audio/3gpp' || e.target.files[0].type === 'audio/aac' || e.target.files[0].type === 'audio/flac' || e.target.files[0].type === 'audio/mpeg' || e.target.files[0].type === 'audio/mp3' || e.target.files[0].type === 'audio/mp4' || e.target.files[0].type === 'audio/ogg' || e.target.files[0].type === 'audio/wav' || e.target.files[0].type === 'audio/webm'){ |
|
|
|
|
this.setState({ |
|
|
|
|
image : null, |
|
|
|
|
file : 'fill', |
|
|
|
|
video : null, |
|
|
|
|
document : null, |
|
|
|
|
music : URL.createObjectURL(e.target.files[0]) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
this.setState({ |
|
|
|
|
file: e.target.files[0], |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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', |
|
|
|
|
if(this.state.file !== null){ |
|
|
|
|
this.sendFile(); |
|
|
|
|
return |
|
|
|
|
}else{ |
|
|
|
|
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 : '', |
|
|
|
|
}) |
|
|
|
|
]} |
|
|
|
|
, |
|
|
|
|
})); |
|
|
|
|
this.setState({ |
|
|
|
|
message : '', |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
sendVoice = (audioData) => { |
|
|
|
@ -154,6 +228,10 @@ export default class Body extends Component { |
|
|
|
|
text: null, |
|
|
|
|
voice : audioData, |
|
|
|
|
createdAt: now.toString(), |
|
|
|
|
image : null, |
|
|
|
|
video : null, |
|
|
|
|
document : null, |
|
|
|
|
music : null, |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
|
name: 'Vadim', |
|
|
|
@ -168,7 +246,84 @@ export default class Body extends Component { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
sendFile = () => { |
|
|
|
|
|
|
|
|
|
const {image, video, music, document} = this.state; |
|
|
|
|
let now = new Date(); |
|
|
|
|
if(image !== null){ |
|
|
|
|
this.setState(prevState => ({ |
|
|
|
|
data : {...prevState.data,messages : [...prevState.data.messages, |
|
|
|
|
{ |
|
|
|
|
id: 'm8', |
|
|
|
|
text: prevState.message, |
|
|
|
|
voice : null, |
|
|
|
|
createdAt: now.toString(), |
|
|
|
|
image : image, |
|
|
|
|
video : null, |
|
|
|
|
document : null, |
|
|
|
|
music : null, |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
|
name: 'Vadim', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
, |
|
|
|
|
})); |
|
|
|
|
this.setState({ |
|
|
|
|
file:null, |
|
|
|
|
image : null, |
|
|
|
|
message : '' |
|
|
|
|
}) |
|
|
|
|
}else if(video !== null){ |
|
|
|
|
this.setState(prevState => ({ |
|
|
|
|
data : {...prevState.data,messages : [...prevState.data.messages, |
|
|
|
|
{ |
|
|
|
|
id: 'm8', |
|
|
|
|
text: prevState.message, |
|
|
|
|
voice : null, |
|
|
|
|
createdAt: now.toString(), |
|
|
|
|
image : null, |
|
|
|
|
video : video, |
|
|
|
|
document : null, |
|
|
|
|
music : null, |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
|
name: 'Vadim', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
, |
|
|
|
|
})); |
|
|
|
|
this.setState({ |
|
|
|
|
file:null, |
|
|
|
|
video : null, |
|
|
|
|
message : '' |
|
|
|
|
}) |
|
|
|
|
}else if(music !== null){ |
|
|
|
|
this.setState(prevState => ({ |
|
|
|
|
data : {...prevState.data,messages : [...prevState.data.messages, |
|
|
|
|
{ |
|
|
|
|
id: 'm8', |
|
|
|
|
text: prevState.message, |
|
|
|
|
voice : null, |
|
|
|
|
createdAt: now.toString(), |
|
|
|
|
image : null, |
|
|
|
|
video : null, |
|
|
|
|
document : null, |
|
|
|
|
music : music, |
|
|
|
|
user: { |
|
|
|
|
id: 'u1', |
|
|
|
|
name: 'Vadim', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
, |
|
|
|
|
})); |
|
|
|
|
this.setState({ |
|
|
|
|
file:null, |
|
|
|
|
music : null, |
|
|
|
|
message : '' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
componentDidMount(){ |
|
|
|
@ -189,13 +344,34 @@ export default class Body extends Component { |
|
|
|
|
<h1>محسن محمدی</h1> |
|
|
|
|
<p>2 دقیقه پیش آنلاین بوده</p> |
|
|
|
|
</div> |
|
|
|
|
<div className="chat-body__content d-flex flex-column mt-2" id="chatroom"> |
|
|
|
|
<div className="chat-body__content d-flex flex-column mt-2" id="chatroom" style={{overflowY : this.state.file !== null ? 'hidden' : 'scroll'}}> |
|
|
|
|
{ |
|
|
|
|
this.state.data.messages.map(item => ( |
|
|
|
|
<Message key={item.id} message={item} user1={this.state.data.users[0]} user2={this.state.data.users[1]} /> |
|
|
|
|
)) |
|
|
|
|
this.state.data.messages.map(item => this.state.file === null ? ( |
|
|
|
|
<Message key={item.id} file={this.state.image} message={item} user1={this.state.data.users[0]} user2={this.state.data.users[1]} /> |
|
|
|
|
) : null) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
this.state.image !== null ? |
|
|
|
|
<div className="chat-body__content--preview d-flex"> |
|
|
|
|
<img src={this.state.image} /> |
|
|
|
|
</div> : null |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
this.state.video !== null ? |
|
|
|
|
<div className="chat-body__content--preview d-flex"> |
|
|
|
|
<ReactPlayer url={this.state.video} controls/> |
|
|
|
|
</div> : null |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
this.state.music !== null ?
|
|
|
|
|
<div className="chat-body__content--preview d-flex"> |
|
|
|
|
<ReactAudioPlayer |
|
|
|
|
src={this.state.music} |
|
|
|
|
controls |
|
|
|
|
/> |
|
|
|
|
</div> : null |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div className="chat-body__footer d-flex"> |
|
|
|
|
<ChatInputs
|
|
|
|
@ -207,6 +383,8 @@ export default class Body extends Component { |
|
|
|
|
recordState={this.state.voice} |
|
|
|
|
typeText={this.typeText} |
|
|
|
|
sendMessage={this.sendMessage} |
|
|
|
|
addFile={this.addFile} |
|
|
|
|
file={this.state.file} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|