parent
d8e92cf1bd
commit
50c5281e34
9 changed files with 277 additions and 97 deletions
@ -1,103 +1,24 @@ |
||||
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 { |
||||
|
||||
render(){ |
||||
const {message, user1, user2,file,document} = 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, |
||||
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 ? `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> |
||||
<> |
||||
{ |
||||
message.type === 'normal' ?
|
||||
<NormalMessage message={message} user1={user1} user2={user2} file={file} document={document} /> : null |
||||
} |
||||
{ |
||||
message.type === '2d' ?
|
||||
<Message2D message={message} user1={user1} user2={user2} /> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
} |
@ -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> |
||||
); |
||||
} |
||||
} |
Loading…
Reference in new issue