parent
d8e92cf1bd
commit
50c5281e34
9 changed files with 277 additions and 97 deletions
@ -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> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue