123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- import { makeStyles } from "@material-ui/core/styles";
- import { IconButton } from "@material-ui/core";
- import AudioFileIcon from '@mui/icons-material/AudioFile';
- import FileDownloadIcon from '@mui/icons-material/FileDownload';
- import ReactAudioPlayer from 'react-audio-player';
- import { timeStampMessage,handleDownload } from '../../../../../../helpers'
- const useStyles = makeStyles({
- container: {
- display: "flex",
- justifyContent: "flex-start",
- width:'auto',
- maxWidth: '80%',
- marginBottom:15
- },
- wrapper: {
- position: 'relative',
- display: 'flex',
- justifyContent: 'space-between',
- alignContent: 'center',
- alignItems: 'center',
- padding: '12px 5px 12px 5px',
- backgroundColor: '#ffffff',
- borderRadius: 7,
- "&:after": {
- content: "''",
- position: "absolute",
- width: "0",
- height: "0",
- borderBottom: "15px solid #ffffff",
- borderLeft: "15px solid transparent",
- borderRight: "15px solid transparent",
- bottom: '0px',
- left: "-15px"
- },
- "&:before": {
- content: "''",
- position: "absolute",
- width: "0",
- height: "0",
- borderBottom: "17px solid #ffffff",
- borderLeft: "16px solid transparent",
- borderRight: "16px solid transparent",
- bottom: "0px",
- left: "-17px"
- }
- },
- bntDownload: {
- backgroundColor: '#ffffff',
- color: '#54b0fc',
- width: 30,
- height:30,
- '&:hover': {
- backgroundColor: '#54b0fc',
- color:'#ffffff'
- }
- },
- player: {
- margin: '0 5px 0 5px',
- borderRadius:7
- },
- time: {
- position: "absolute",
- fontSize: ".65em",
- fontWeight:600,
- bottom: 0,
- right: 6,
- color: '#414141',
- padding: 3,
- borderRadius: 5,
- },
- });
- interface IMessageLeftAudio {
- url:string,
- updatedAt: string,
- fullType:string
- }
- const MessageLeftAudio = ({ url,updatedAt,fullType }:IMessageLeftAudio) => {
- const classes = useStyles();
- return (
- <div className={classes.container}>
- <div className={classes.wrapper}>
- <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>
- <ReactAudioPlayer className={classes.player}
- src={url}
- controls
- />
- <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload} >
- <FileDownloadIcon fontSize='medium'/>
- </IconButton>
- <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
- </div>
- </div>
- )};
- export default MessageLeftAudio
|