|
|
@ -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> |
|
|
|