make camera

src/components/HomePage/LeftBar/EditBar/EditList/index.tsx

@@ -2,6 +2,8 @@ import { makeStyles, TextField } from '@material-ui/core'
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+import PhotoCameraFrontIcon from '@mui/icons-material/PhotoCameraFront';
+import CameraIcon from '@mui/icons-material/Camera';
 import { useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 import Webcam from "react-webcam";
@@ -21,37 +23,46 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff',
   },
   imgWrapper: {
-    cursor: 'pointer',
     marginBottom: 30,
-    position: 'relative',
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexDirection: 'row',
+    justifyContent:'center'
   },
-  imgDropZoneOverlay: {
-    position: 'absolute',
-    width: 120,
-    height: 120,
-    borderRadius: '50%',
-    backgroundColor: '#6868687d',
+  overlay: {
+    position: 'fixed',
+    top: 0,
     left: 0,
-    zIndex: 1,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
     display: 'flex',
     justifyContent: 'center',
     alignContent: 'center',
-    alignItems:'center'
+    alignItems: 'center',
+    flexDirection:'column'
   },
-  addPhoto: {
+  capturedPicture: {
+    borderRadius: 10,
+    border:'solid 2px rgb(62, 149, 231)'
+  },  
+  capturePhoto: {
     color: '#ffffff',
-    transform: 'scale(1.1)',
-    '&:hover': {
-      transform: 'scale(1.3)',
-    },
-  },
-  avatarArrow: {
     cursor: 'pointer',
-    alignSelf: 'flex-end',
     '&:hover': {
-      backgroundColor: 'rgb(62, 149, 231)'
-    }
-  }
+      color: '#48ff00',
+      animation: `$rotating 2s linear infinite`
+    },
+  },  
+  '@keyframes rotating': {
+	  'from': { transform: 'rotate(0deg)'},
+	  'to': { transform: 'rotate(360deg)'},
+   },  
 })
 
 interface IEditList {
@@ -63,13 +74,17 @@ interface IEditList {
   openBtn: boolean,
   setOpenBtn: any,
   file:any,
-  setFile: (file:any) => void
+  setFile: (file: any) => void,
+  camera: boolean,
+  setCamera: any,
+  selfie:any,
+  setSelfie: (file: any) => void,
 }
 
 const EditList = (props: IEditList) => {
   const classes = useStyles()
   const { user, name, setName, lastName, setLastName,
-    openBtn, setOpenBtn,setFile } = props
+    openBtn, setOpenBtn,file,setFile,camera,setCamera,selfie,setSelfie } = props
   const { avatarUrl, color } = user
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
         noDrag: true,
@@ -98,40 +113,64 @@ const EditList = (props: IEditList) => {
     }
   }
 
+  const handleOpenCamera = () => {
+    setCamera(true)
+    file&&setFile(null)
+  }
+
+  const handleCloseCamera = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay') {
+      setCamera(false)
+      setOpenBtn(true)
+    }
+  }
+
   useEffect(() => {
     if (acceptedFiles.slice(-1)[0]) {
       setFile(acceptedFiles.slice(-1)[0])
+      setSelfie(false)
       setOpenBtn(true)
     }
-  }, [setFile,setOpenBtn,acceptedFiles])
+  }, [setFile,setSelfie,setOpenBtn,acceptedFiles])
 
   return (
-    <div className={classes.container} >     
-      <ListItemAvatar className={classes.imgWrapper}>
-        <div {...getRootProps({ className: classes.imgDropZoneOverlay })}>
-          <AddAPhotoIcon className={classes.addPhoto} fontSize='large' />
+    <div className={classes.container}>
+      <div className={classes.imgWrapper}>
+        <div {...getRootProps()}>
+          <AddAPhotoIcon fontSize='large'
+            sx={{color: file ? 'rgb(62, 149, 231)' : '#6b6b6b',
+            '&:hover': { color: 'rgb(41, 139, 231)' },cursor:'pointer'}} />
           <input {...getInputProps()}/>
         </div>
-         <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
-           sx={{ background: color, width: 120, height: 120}}>
+        <ListItemAvatar style={{margin:'0px 20px'}}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+           sx={{ background: color, width: 120, height: 120,fontSize:30}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
-         </Avatar>
-      </ListItemAvatar>
-      <Webcam
+          </Avatar>
+        </ListItemAvatar>
+        <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='large'
+          sx={{color: selfie ? 'rgb(62, 149, 231)' : '#6b6b6b',
+          '&:hover': { color: 'rgb(41, 139, 231)' },cursor:'pointer'}}/>
+      </div>
+      {camera &&
+      <div onClick={handleCloseCamera}
+        className={classes.overlay} id='overlay'>
+        <Webcam
         audio={false}
-        height={300}
         screenshotFormat="image/jpeg"
-        width={300}
+        width='40%'
         videoConstraints={videoConstraints}
+        style={{marginBottom:30}}
       >
-        {({ getScreenshot }) => (
-          <button onClick={() => {
-            setFile(getScreenshot())
-            !openBtn&&setOpenBtn(true)
-          }}>
-            Capture photo
-          </button>)}
-      </Webcam>          
+          {({ getScreenshot }) => <>
+            <CameraIcon onClick={() => setSelfie(getScreenshot())}
+              className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
+            <img className={classes.capturedPicture} width='300' height='174'
+              style={{visibility:selfie?'visible':'hidden'}} src={selfie} alt='chosen pic'></img>
+          </>}
+        </Webcam>
+      </div>}
       <TextField
         id="name"
         name='name'
@@ -140,7 +179,7 @@ const EditList = (props: IEditList) => {
         fullWidth
         variant='outlined'
         onChange={handleTextField}
-        style={{marginBottom:20}}
+        style={{marginBottom:30}}
         />
       <TextField
         id="lastName"

src/components/HomePage/LeftBar/EditBar/index.tsx

@@ -27,6 +27,8 @@ const EditBar= () => {
   const [name, setName] = useState<string>('')
   const [lastName, setLastName] = useState<string>('')
   const [openBtn, setOpenBtn] = useState<boolean>(false)
+  const [camera, setCamera] = useState<boolean>(false)
+  const [selfie, setSelfie] = useState<any>(null)
   const [file,setFile] = useState<any>(null)
   const {name:Name,lastName:LastName} = user
 
@@ -34,12 +36,23 @@ const EditBar= () => {
     if (name !== Name || lastName !== LastName){
       await updateCredentials({ name, lastName, originalName: name, originalLastName: lastName })
     }
+    if (selfie) {
+      fetch(selfie)
+       .then(res => res.blob())
+        .then(blob => {
+          const imgFile = new File([blob], "selfie", { type: "image/jpeg" })
+          const formData: any = new FormData()
+          formData.append("avatar", imgFile);
+          updateUserAvatar(formData)
+      })
+    }
     if (file) {
       const formData: any = new FormData()
       formData.append("avatar", file);
       await updateUserAvatar(formData)
     }
     file && setFile(null)
+    selfie && setSelfie(null)
     openBtn && setOpenBtn(false)
   }
 
@@ -62,7 +75,8 @@ const EditBar= () => {
       <EditList user={user} name={name} setName={setName}
         lastName={lastName} setLastName={setLastName} 
         openBtn={openBtn} setOpenBtn={setOpenBtn}
-        file={file} setFile={setFile}/>
+        file={file} setFile={setFile} camera={camera} setCamera={setCamera}
+        selfie={selfie} setSelfie={setSelfie}/>
     </div>
   )
 }