diff --git a/package.json b/package.json index 031d456..f27bb7d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react": "^17.0.2", "react-audio-player": "^0.17.0", "react-dom": "^17.0.2", + "react-player": "^2.9.0", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js index 6f3caa0..63b66ea 100644 --- a/src/views/ChatRoom/Body/Body.js +++ b/src/views/ChatRoom/Body/Body.js @@ -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 {
2 دقیقه پیش آنلاین بوده
-{message.text}
: null + message.text !== null && message.video === null && message.image === null && message.music === null ? +{message.text}
: null } { message.voice !== null ? @@ -49,6 +50,32 @@ export default class Message extends Component { controls /> : null } + { + message.image !== null ? + + : null + } + { + message.video !== null ? +{message.text}
+