You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

241 lines
8.4 KiB

import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import ReactPlayer from 'react-player';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import Avatar from '@material-ui/core/Avatar';
import moment from 'jalali-moment';
import DoneIcon from '@material-ui/icons/Done';
import DoneAllIcon from '@material-ui/icons/DoneAll';
import EditIcon from '@material-ui/icons/Edit';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import './index.scss';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ReplyIcon from '@material-ui/icons/Reply';
import ForwardIcon from '@material-ui/icons/Forward';
import DeleteIcon from '@material-ui/icons/Delete';
import FavoriteIcon from '@material-ui/icons/Favorite';
import TextsmsIcon from '@material-ui/icons/Textsms';
import ScheduleIcon from '@material-ui/icons/Schedule';
const file = (fileId) => `${window.baseURL}/file/download/${fileId}`;
const menu = [
{ text: 'پسند', icon: FavoriteIcon, onClick: () => {} },
{ text: 'تبادل نظر', icon: TextsmsIcon, onClick: () => {} },
{ text: 'پاسخ', icon: ReplyIcon, onClick: () => {} },
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} },
];
const selfMenu = [
{ text: 'باز ارسال', icon: ForwardIcon, onClick: () => {} },
{ text: 'ویرایش', icon: EditIcon, onClick: () => {} },
{ text: 'حذف', icon: DeleteIcon, onClick: () => {} },
];
export default class NormalMessage extends Component {
state = { messageMenu: null };
handleClose = () => {
this.setState({
messageMenu: null,
});
};
handleClick = (event) => {
this.setState({
messageMenu: event.currentTarget,
});
};
render() {
const { message, user, document, isSelf, prevUserId, children } = this.props;
const { messageMenu } = this.state;
const hasavatar = prevUserId != message.userId;
return (
<div
className="normal-message d-flex flex-column d-flex"
style={{
filter: document !== null ? 'blur(16px)' : 'blur(0px)',
}}
>
{hasavatar && (
<Avatar
alt={user.name}
src={window.baseURL + '/file/download/' + user.fileId}
className=""
style={{
marginTop: -5,
backgroundColor: user.color,
alignSelf: isSelf ? 'flex-end' : 'flex-start',
}}
>
{user.name
.split(' ')
.map((e) => e.slice(0, 1))
.join(' ')}
</Avatar>
)}
<div
className="d-flex"
style={{ direction: isSelf ? 'rtl' : 'ltr', marginTop: hasavatar ? -15 : 0 }}
>
<div
className={
message.type == 'text'
? `normal-message__box `
: `normal-message__box normal-message__box--file`
}
style={{
paddingTop: hasavatar ? 25 : 15,
backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
width: 'calc(100%-70px)',
}}
>
<div
className="normal-message__box--detail d-flex"
style={{
top: 0,
direction: isSelf ? 'ltr' : 'rtl',
paddingRight: isSelf ? 70 : 0,
paddingLeft: isSelf ? 0 : 70,
}}
>
<div style={{ color: isSelf ? '#aaa' : 'gray' }}>
<ExpandMoreIcon fontSize="small" onClick={this.handleClick} />
</div>
<Menu
anchorEl={messageMenu}
keepMounted
open={Boolean(messageMenu)}
onClose={() => this.handleClose()}
className="rtl fontLight"
>
{(isSelf ? selfMenu : menu).map((e) => (
<MenuItem
className="fontLight"
onClick={() => {
this.handleClose();
e.onClick();
}}
>
<e.icon fontSize="samall" />
{e.text}
</MenuItem>
))}
</Menu>
{hasavatar && <div style={{ color: isSelf ? '#aaa' : 'gray' }}>{user.name}</div>}
</div>
{message.type == 'text' ? (
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
) : null}
{message.type == 'voice' ? (
<ReactAudioPlayer src={file(message.fileId)} controls />
) : null}
{message.type == 'image' ? (
<div className="normal-message__box--caption">
<a href={file(message.fileId)} download>
<img src={file(message.fileId)} download alt="" />
</a>
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
</div>
) : null}
{message.type == 'video' ? (
<div className="normal-message__box--caption">
<a href={file(message.fileId)} download>
<ReactPlayer url={file(message.fileId)} controls width={'100%'} height={250} />
</a>
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
</div>
) : null}
{message.type == 'audio' ? (
<div className="normal-message__box--caption">
<ReactAudioPlayer src={file(message.fileId)} controls />
<p style={{ color: isSelf ? 'white' : 'black' }}>{message.text}</p>
</div>
) : null}
{message.type == 'document' ? (
<a
href={file(message.fileId)}
download
className="normal-message__box--document d-flex"
style={{
backgroundColor: isSelf ? 'rgb(15, 93, 190)' : 'white',
color: isSelf ? 'white' : 'black',
}}
>
<CloudDownloadIcon
style={{
color: isSelf ? 'white' : 'black',
width: 32,
height: 32,
marginRight: 10,
}}
/>
<div>{message.text}</div>
</a>
) : null}
<div className={'normal-message__box--date d-flex ' + (isSelf ? 'self' : '')}>
<span style={{ color: isSelf ? '#aaa' : 'gray' }}>
{message.updatedAt != message.createdAt ? (
<>
<span> ویرایش در</span>
{moment(message.updatedAt).format(' hh:mm jMM/jDD')}
</>
) : (
moment(message.createdAt).format('hh:mm')
)}
</span>
<span
style={{
color: isSelf ? '#aaa' : 'gray',
padding: '0 2px',
}}
>
{isSelf && message.status == 0 && <ScheduleIcon fontSize="small" />}
{isSelf && message.status == 1 && <DoneIcon fontSize="small" />}
{isSelf && message.status == 2 && <DoneAllIcon fontSize="small" />}
</span>
</div>
</div>
<div className={isSelf ? 'icons self' : 'icons'}>
{!isSelf ? (
<>
{' '}
<div>
<FavoriteIcon fontSize="samall" color="primary" />
<span> {10}</span>
</div>
<div>
<TextsmsIcon fontSize="samall" color="secondary" />
<span> {10}</span>
</div>
</>
) : (
<>
<div>
<span>
+5
<br />
خلاقیت
</span>
</div>
</>
)}
</div>
</div>
<div
className="f-flex keys"
style={{
width: 'calc(100% - 70px)',
marginRight: isSelf ? 0 : 70,
marginLeft: isSelf ? 70 : 0,
alignSelf: isSelf ? 'flex-end' : 'flex-start',
}}
>
{children}
</div>
</div>
);
}
}