123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- import { makeStyles } from "@material-ui/core/styles";
- import { IconButton } from "@material-ui/core";
- import VideoFileIcon from '@mui/icons-material/VideoFile';
- import FileDownloadIcon from '@mui/icons-material/FileDownload';
- import { timeStampMessage } from '../../../../../../helpers'
- import poster from '../../../../../../img/videoPoster.png'
- const { Player } = require('video-react')
- const useStyles = makeStyles({
- container: {
- display: "flex",
- justifyContent: "flex-end",
- width:'auto',
- maxWidth: '80%',
- marginBottom:15
- },
- wrapper: {
- position: 'relative',
- display: 'flex',
- justifyContent: 'space-between',
- alignContent: 'center',
- alignItems: 'center',
- width: 400,
- padding: '12px 5px 12px 5px',
- backgroundColor: '#deffa9',
- borderRadius: 7,
- "&:after": {
- content: "''",
- position: "absolute",
- width: "0",
- height: "0",
- borderBottom: "15px solid #deffa9",
- borderLeft: "15px solid transparent",
- borderRight: "15px solid transparent",
- bottom: "0",
- right: "-15px"
- },
- "&:before": {
- content: "''",
- position: "absolute",
- width: "0",
- height: "0",
- borderBottom: "17px solid #deffa9",
- borderLeft: "16px solid transparent",
- borderRight: "16px solid transparent",
- bottom: "0px",
- right: "-17px"
- }
- },
- bntDownload: {
- backgroundColor: '#deffa9',
- color: '#54b0fc',
- width: 30,
- height: 30,
- marginLeft:5,
- '&:hover': {
- backgroundColor: '#54b0fc',
- color:'#ffffff'
- }
- },
- time: {
- position: "absolute",
- fontSize: ".65em",
- fontWeight:600,
- bottom: 0,
- right: 6,
- color: '#414141',
- padding: 3,
- borderRadius: 5,
- zIndex:10
- },
- });
- interface IMessageRightVideo {
- url:string,
- updatedAt: string,
- }
- const MessageRightVideo = ({ url,updatedAt }:IMessageRightVideo) => {
- const classes = useStyles();
- return (
- <div className={classes.container}>
- <div className={classes.wrapper}>
- <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>
- <Player playsInline poster={poster}
- src={url}
- />
- <a href={url} target="_blank" rel="noreferrer" download>
- <IconButton className={classes.bntDownload} >
- <FileDownloadIcon fontSize='medium'/>
- </IconButton>
- </a>
- <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
- </div>
- </div>
- )};
- export default MessageRightVideo
|