reza added video and image and music

front
Reza_ashrafi 4 years ago
parent 897310c992
commit c7872dd9e8
  1. 1
      package.json
  2. 188
      src/views/ChatRoom/Body/Body.js
  3. 19
      src/views/ChatRoom/Body/Body.scss
  4. 8
      src/views/ChatRoom/Body/ChatInputs/ChatInput.js
  5. 37
      src/views/ChatRoom/Body/Message/Message.js
  6. 29
      src/views/ChatRoom/Body/Message/Message.scss
  7. 28
      yarn.lock

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

@ -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,7 +158,45 @@ 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 = () => {
if(this.state.file !== null){
this.sendFile();
return
}else{
let now = new Date();
this.setState(prevState => ({
data : {...prevState.data,messages : [...prevState.data.messages,
@ -144,6 +217,7 @@ export default class Body extends Component {
message : '',
})
}
}
sendVoice = (audioData) => {
let now = new Date();
@ -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,11 +344,32 @@ 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>
@ -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>

@ -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);
}
}
}

@ -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 (
<div className="chat-inputs d-flex">
<AudioReactRecorder state={recordState} onStop={onStop} />
@ -26,7 +26,7 @@ export default class ChatInputs extends Component {
} */}
<div className="chat-inputs__box d-flex">
<div className="chat-inputs__box--file">
<input type="file" />
<input type="file" onChange={(e) => addFile(e)}/>
<PermMediaIcon style={{color : "white",marginRight : 10, width : 30, height: 30,zIndex : 10,position : "absolute", top: 0, left: 0}} />
</div>
{/* <input type="text" placeholder="یک پیام بنویسید..." multiline /> */}
@ -35,13 +35,13 @@ export default class ChatInputs extends Component {
<div className="chat-inputs__voice d-flex">
<div className="chat-inputs__voice d-flex">
{
(recordState === null && message === '') || (recordState && recordState.url && message === '') ?
(recordState === null && message === '' && file === null) || (recordState && recordState.url && message === '' && file === null) ?
<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}} />
</div> : null
}
{
message !== '' ?
message !== '' || file !== null?
<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

@ -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 (
<div
className="message d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0
marginLeft: message.user.id === user1.id ? 40 : 0,
filter: file !== null ? 'blur(16px)': 'blur(0px)',
}}
>
<img
@ -39,8 +40,8 @@ export default class Message extends Component {
</span>
</div>
{
message.text !== null ?
<p style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
message.text !== null && message.video === null && message.image === null && message.music === null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
{
message.voice !== null ?
@ -49,6 +50,32 @@ export default class Message extends Component {
controls
/> : null
}
{
message.image !== null ?
<div className="message__box--caption">
<a href={message.image} download><img src={message.image} download/></a>
<p id="2" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p>
</div>
: null
}
{
message.video !== null ?
<div className="message__box--caption">
<a href={message.video} download>
<ReactPlayer url={message.video} controls width={'100%'} height={250}/>
</a>
<p id="1" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p>
</div>
: null
}
{
message.music !== null ?
<ReactAudioPlayer
src={message.music}
controls
/> : null
}
</div>
</div>

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

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

Loading…
Cancel
Save