reza added 2d message to chat

front
Reza_ashrafi 4 years ago
parent d8e92cf1bd
commit 50c5281e34
  1. 43
      src/views/ChatRoom/Body/Body.js
  2. 105
      src/views/ChatRoom/Body/Message/Message.js
  3. 51
      src/views/ChatRoom/Body/Message/Message2D/Message2D.js
  4. 54
      src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
  5. 103
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
  6. 5
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
  7. 8
      src/views/Home/Body/Body.scss
  8. 4
      src/views/Home/Body/ChatList/Chat/Chat.scss
  9. 1
      src/views/Home/Home.scss

@ -25,6 +25,7 @@ export default class Body extends Component {
}], }],
messages: [{ messages: [{
id: 'm1', id: 'm1',
type : 'normal',
text: 'How are you, Lukas!', text: 'How are you, Lukas!',
voice: null, voice: null,
image: null, image: null,
@ -38,6 +39,7 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm2', id: 'm2',
type : 'normal',
text: 'I am good, good', text: 'I am good, good',
voice: null, voice: null,
image: null, image: null,
@ -51,6 +53,7 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm3', id: 'm3',
type : 'normal',
text: 'What about you?', text: 'What about you?',
voice: null, voice: null,
image: null, image: null,
@ -64,6 +67,7 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm4', id: 'm4',
type : 'normal',
text: 'Good as well, preparing for the stream now.', text: 'Good as well, preparing for the stream now.',
voice: null, voice: null,
image: null, image: null,
@ -77,6 +81,7 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm5', id: 'm5',
type : 'normal',
text: 'How is your uni going?', text: 'How is your uni going?',
voice: null, voice: null,
image: null, image: null,
@ -90,6 +95,7 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm6', id: 'm6',
type : 'normal',
text: '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, voice: null,
image: null, image: null,
@ -103,6 +109,7 @@ export default class Body extends Component {
}, },
}, { }, {
id: 'm7', id: 'm7',
type : 'normal',
text: '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, voice: null,
image: null, image: null,
@ -114,7 +121,41 @@ export default class Body extends Component {
id: 'u1', id: 'u1',
name: 'Vadim', name: 'Vadim',
}, },
}] },{
id: 'm7',
type: 'normal',
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',
name: 'Vadim',
},
},{
id: 'm10',
type: '2d',
options: [
[{id : 0, name : 'تکنولوژی'}],
[{id : 1, name : 'ورزشی'},{id : 2, name : 'علمی'}],
[{id : 3, name : 'مذهبی'},{id : 4, name : 'اجتماعی'},{id : 5, name : 'سیاسی'}]
],
text: 'به دنبال چی میگردی؟',
voice: null,
image: null,
video : null,
music: null,
document : null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'Lukas',
},
}
]
}, },
message : '', message : '',
voice : null, voice : null,

@ -1,103 +1,24 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import ReactPlayer from 'react-player';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import './Message.scss'; import NormalMessage from './NormalMessage/NormalMessage';
import Message2D from './Message2D/Message2D';
export default class Message extends Component { export default class Message extends Component {
render(){ render(){
const {message, user1, user2,file,document} = this.props; const {message, user1, user2,file,document} = this.props;
return ( return (
<div <>
className="message d-flex flex-column d-flex" {
style={{ message.type === 'normal' ?
marginRight: message.user.id === user1.id ? 0 : 40, <NormalMessage message={message} user1={user1} user2={user2} file={file} document={document} /> : null
marginLeft: message.user.id === user1.id ? 40 : 0, }
filter: document !== null ? 'blur(16px)': 'blur(0px)', {
}} message.type === '2d' ?
> <Message2D message={message} user1={user1} user2={user2} /> : null
<img }
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri} </>
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
alt={message.id}
/>
<div
className={message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ? `message__box d-flex` : `message__box d-flex message__box--file`}
style={{backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white" }}
>
{
message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
<div
className="message__box--detail"
style={{
right : message.user.id === user1.id ? "auto" : 20 ,
left : message.user.id === user1.id ? 20 : "auto"
}}
>
<span
style={{color: message.user.id === user1.id ? "white" : "black" }}
>
{message.user.name}
</span>
</div> : null
}
{
message.text !== null && message.video === null && message.image === null && message.music === null && message.document === null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
{
message.voice !== null ?
<ReactAudioPlayer
src={message.voice.url}
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
}
{
message.document !== null ?
<a
href={message.document.data}
download
className="message__box--document d-flex"
style={{
backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white",
color: message.user.id === user1.id ? "white" : "black"
}}
>
<CloudDownloadIcon style={{color : message.user.id === user1.id ? "white" : "black" , width : 32, height : 32, marginRight: 10}} />
<div>{message.document.name}</div>
</a> : null
}
</div>
</div>
); );
} }
} }

@ -0,0 +1,51 @@
import React, { Component } from 'react';
import './Message2D.scss';
export default class Message2D extends Component {
render(){
const {message, user1, user2} = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
alt={message.id}
/>
<div
className='message-2d__text d-flex'
>
{
message.text !== null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
</div>
<div className="message-2d__options d-flex flex-column">
{
message.options.map(option => (
<div className="message-2d__options--row d-flex">
{
option.map(
item => (
<div className="d-flex" style={{ width : `calc(100% / ${option.length} )`}}>
<span>{item.name}</span>
</div>
)
)
}
</div>
))
}
</div>
</div>
);
}
}

@ -0,0 +1,54 @@
@media screen and (max-width: 450px){
.message-2d{
// width: 100%;
position: relative;
img{
width: 65px;
height:65px;
object-fit: cover;
border-radius: 30px;
border : 3px solid rgba(201, 201, 201, 0.857);
position: relative;
top: 20px;
z-index: 50;
}
&__text{
justify-content:flex-end;
width: 100%;
padding : 15px 15px 5px;
background-color:white;
border-radius: 5px;
position: relative;
margin-bottom: 5px;
p{
width: 100%;
text-align: right;
font-size: 17px;
font-family: IRANSansNumeralBold;
}
}
&__options{
width: 100%;
z-index: 1000;
&--row{
width: 100%;
justify-content: space-around;
div{
background-color: white;
border-radius: 10px;
justify-content: center;
align-items: center;
margin : 5px 3px;
padding : 10px;
span{
font-size: 16px;
color : black;
font-weight: 600;
}
}
}
}
}
}

@ -0,0 +1,103 @@
import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import ReactPlayer from 'react-player';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import './NormalMessage.scss';
export default class NormalMessage extends Component {
render(){
const {message, user1, user2,file,document} = this.props;
return (
<div
className="normal-message d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
filter: document !== null ? 'blur(16px)': 'blur(0px)',
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
alt={message.id}
/>
<div
className={message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ? `normal-message__box d-flex` : `normal-message__box d-flex normal-message__box--file`}
style={{backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white" }}
>
{
message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
<div
className="normal-message__box--detail"
style={{
right : message.user.id === user1.id ? "auto" : 20 ,
left : message.user.id === user1.id ? 20 : "auto"
}}
>
<span
style={{color: message.user.id === user1.id ? "white" : "black" }}
>
{message.user.name}
</span>
</div> : null
}
{
message.text !== null && message.video === null && message.image === null && message.music === null && message.document === null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
{
message.voice !== null ?
<ReactAudioPlayer
src={message.voice.url}
controls
/> : null
}
{
message.image !== null ?
<div className="normal-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="normal-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
}
{
message.document !== null ?
<a
href={message.document.data}
download
className="normal-message__box--document d-flex"
style={{
backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white",
color: message.user.id === user1.id ? "white" : "black"
}}
>
<CloudDownloadIcon style={{color : message.user.id === user1.id ? "white" : "black" , width : 32, height : 32, marginRight: 10}} />
<div>{message.document.name}</div>
</a> : null
}
</div>
</div>
);
}
}

@ -1,5 +1,5 @@
@media screen and (max-width: 450px){ @media screen and (max-width: 450px){
.message{ .normal-message{
// width: 100%; // width: 100%;
position: relative; position: relative;
img{ img{
@ -77,9 +77,6 @@
} }
} }
a:focus{
text-decoration: none;
}
.react-audio-player{ .react-audio-player{
width: 100% !important; width: 100% !important;

@ -7,3 +7,11 @@
overflow-y : scroll; overflow-y : scroll;
} }
} }
a:focus{
text-decoration: none !important;
}
a:hover{
text-decoration: none !important;
}

@ -50,3 +50,7 @@
} }
} }
} }
a:focus{
text-decoration: normal;
}

@ -5,5 +5,6 @@
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%); background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
border-radius: 40px; border-radius: 40px;
height: 100vh; height: 100vh;
box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
} }
} }
Loading…
Cancel
Save