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 دقیقه پیش آنلاین بوده

-
+
{ - this.state.data.messages.map(item => ( - - )) + this.state.data.messages.map(item => this.state.file === null ? ( + + ) : null) } - + { + this.state.image !== null ? +
+ +
: null + } + { + this.state.video !== null ? +
+ +
: null + } + { + this.state.music !== null ? +
+ +
: null + } +
diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/Body.scss index 00fef23..3402d86 100644 --- a/src/views/ChatRoom/Body/Body.scss +++ b/src/views/ChatRoom/Body/Body.scss @@ -23,13 +23,30 @@ &__content{ padding : 0px 20px 40px; height : calc(100vh - 268px); - overflow-y: scroll !important; min-height: 200px; + position: relative; + &--preview{ + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 100%; + justify-content:center; + align-items:center; + background-color: rgb(210, 196, 214); + & img{ + width: 100%; + max-height : 400px; + object-fit:scale-down; + } + } } &__footer{ width: 100%; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; + z-index: 200; + background-color: rgb(210, 196, 214); } } } \ No newline at end of file diff --git a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js b/src/views/ChatRoom/Body/ChatInputs/ChatInput.js index 2612478..086d578 100644 --- a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js +++ b/src/views/ChatRoom/Body/ChatInputs/ChatInput.js @@ -10,7 +10,7 @@ import SendIcon from '@material-ui/icons/Send'; import './ChatInputs.scss'; export default class ChatInputs extends Component { render(){ - const {onStop,stop,start,recordState,cancel,typeText,message,sendMessage} = this.props; + const {onStop,stop,start,recordState,cancel,typeText,message,sendMessage,addFile,file} = this.props; return (
@@ -26,7 +26,7 @@ export default class ChatInputs extends Component { } */}
- + addFile(e)}/>
{/* */} @@ -35,13 +35,13 @@ export default class ChatInputs extends Component {
{ - (recordState === null && message === '') || (recordState && recordState.url && message === '') ? + (recordState === null && message === '' && file === null) || (recordState && recordState.url && message === '' && file === null) ?
: null } { - message !== '' ? + message !== '' || file !== null?
sendMessage()}>
: null diff --git a/src/views/ChatRoom/Body/Message/Message.js b/src/views/ChatRoom/Body/Message/Message.js index d9ed406..c0b6438 100644 --- a/src/views/ChatRoom/Body/Message/Message.js +++ b/src/views/ChatRoom/Body/Message/Message.js @@ -1,19 +1,20 @@ import React, { Component } from 'react'; import ReactAudioPlayer from 'react-audio-player'; - +import ReactPlayer from 'react-player'; import './Message.scss'; export default class Message extends Component { render(){ - const {message, user1, user2} = this.props; + const {message, user1, user2,file} = this.props; return (
{ - message.text !== null ? -

{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 ? +
+ +

{message.text}

+
+ : null + } + { + message.video !== null ? +
+ + + +

{message.text}

+
+ : null + } + { + message.music !== null ? + : null + + }
diff --git a/src/views/ChatRoom/Body/Message/Message.scss b/src/views/ChatRoom/Body/Message/Message.scss index 105a358..e46d4df 100644 --- a/src/views/ChatRoom/Body/Message/Message.scss +++ b/src/views/ChatRoom/Body/Message/Message.scss @@ -32,7 +32,36 @@ color: rgb(155, 155, 155); } } + &--caption{ + width: 100%; + margin-bottom: 20px; + text-align: right; + & img{ + height: 100%; + max-height: 250px; + width: 100%; + max-width: 250px; + object-fit: scale-down; + border-radius: 0px; + border : 0px; + position: static; + } + & video{ + height: 100%; + width: 100%; + } + & p{ + margin-top: 20px; + } + // & audio{ + // min-width: 100% !important; + // } + } } } +} + +.react-audio-player{ + width: 100% !important; } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7f74c10..e973cf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4152,7 +4152,7 @@ deep-is@^0.1.3, deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= -deepmerge@^4.2.2: +deepmerge@^4.0.0, deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== @@ -7290,6 +7290,11 @@ load-json-file@^2.0.0: pify "^2.0.0" strip-bom "^3.0.0" +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ= + loader-runner@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" @@ -7501,6 +7506,11 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -9562,6 +9572,11 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -9577,6 +9592,17 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-player@^2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.9.0.tgz#ef7fe7073434087565f00ff219824e1e02c4b046" + integrity sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA== + dependencies: + deepmerge "^4.0.0" + load-script "^1.0.0" + memoize-one "^5.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.0.1" + react-redux@^7.2.4: version "7.2.4" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"