|
@@ -0,0 +1,91 @@
|
|
|
+import { makeStyles } from '@material-ui/core'
|
|
|
+import { useSelector } from 'react-redux';
|
|
|
+import ListItemText from '@mui/material/ListItemText';
|
|
|
+import ListItemAvatar from '@mui/material/ListItemAvatar';
|
|
|
+import Avatar from '@mui/material/Avatar';
|
|
|
+import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
|
+import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
|
|
|
+import CloseIcon from '@mui/icons-material/Close';
|
|
|
+import ScreenShareIcon from '@mui/icons-material/ScreenShare';
|
|
|
+import StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
|
|
|
+import VideocamIcon from '@mui/icons-material/Videocam';
|
|
|
+import VideocamOffIcon from '@mui/icons-material/VideocamOff';
|
|
|
+import MicIcon from '@mui/icons-material/Mic';
|
|
|
+import MicOffIcon from '@mui/icons-material/MicOff';
|
|
|
+import CallEndIcon from '@mui/icons-material/CallEnd';
|
|
|
+
|
|
|
+import { getChat } from '../../../../../../redux/chat/selector';
|
|
|
+import { prodAwsS3,firstLetter,slicedWord } from '../../../../../../helpers'
|
|
|
+
|
|
|
+const useStyles = makeStyles({
|
|
|
+ overlay: {
|
|
|
+ position: 'fixed',
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ width: '100vw',
|
|
|
+ height: '100vh',
|
|
|
+ zIndex: 100,
|
|
|
+ backgroundColor: 'rgba(104, 105, 104, 0.6)',
|
|
|
+ overflowY: 'hidden',
|
|
|
+ },
|
|
|
+ modalCall: {
|
|
|
+ background: 'rgb(5, 5, 5)',
|
|
|
+ position: 'absolute',
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'column',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyItems:"center",
|
|
|
+ width: '36vw',
|
|
|
+ height:'50vh',
|
|
|
+ left: '32vw',
|
|
|
+ bottom: '25vh',
|
|
|
+ borderRadius: 7,
|
|
|
+ padding: 7,
|
|
|
+ },
|
|
|
+ rightIcons: {
|
|
|
+ display: 'flex',
|
|
|
+ justifyContent: 'end',
|
|
|
+ alignContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
+ marginBottom: 50,
|
|
|
+ width:'100%'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const CallModal = ({setModalCall}:{setModalCall:any}) => {
|
|
|
+ const classes = useStyles()
|
|
|
+ const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)
|
|
|
+
|
|
|
+ const handleDeleteModal = (e: any) => {
|
|
|
+ // const id = e.target.id
|
|
|
+ // if (id === 'overlay' || id === 'cancel') return setModalCall(false)
|
|
|
+ // if (id === 'delete') {
|
|
|
+ // setModalCall(false)
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
|
|
|
+ <div className={classes.modalCall}>
|
|
|
+ <div className={classes.rightIcons}>
|
|
|
+ <MinimizeIcon style={{ color: '#ffffff',cursor:'pointer'}} fontSize='small' />
|
|
|
+ <CropLandscapeIcon style={{ color: '#ffffff',marginLeft:12,cursor:'pointer' }} fontSize='small' />
|
|
|
+ <CloseIcon style={{ color:'#ffffff',marginLeft:12,cursor:'pointer'}} fontSize='small' />
|
|
|
+ </div>
|
|
|
+ <ListItemAvatar>
|
|
|
+ <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
|
|
|
+ sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
|
|
|
+ {`${firstLetter(name)}${firstLetter(lastName)}`}
|
|
|
+ </Avatar>
|
|
|
+ </ListItemAvatar>
|
|
|
+ <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
|
|
|
+ ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
|
|
|
+ primaryTypographyProps={{ color: '#ffffff', fontSize: 22, fontWeight: 500 }}
|
|
|
+ secondary='ringing ...' secondaryTypographyProps={{color: '#ffffff',fontSize:17,marginBottom:20}}/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default CallModal
|