From af0f6f7aee64d3a018e74c43e051155b06ad2816 Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Fri, 26 Aug 2022 14:56:04 +0530
Subject: Yo Man

---
 client/src/pages/Enrollment/Scanner/Scanner.jsx    | 139 +++++++++++++++++++++
 .../pages/Enrollment/Scanner/Scanner.module.css    |  18 +++
 2 files changed, 157 insertions(+)
 create mode 100644 client/src/pages/Enrollment/Scanner/Scanner.jsx
 create mode 100644 client/src/pages/Enrollment/Scanner/Scanner.module.css

(limited to 'client/src/pages/Enrollment')

diff --git a/client/src/pages/Enrollment/Scanner/Scanner.jsx b/client/src/pages/Enrollment/Scanner/Scanner.jsx
new file mode 100644
index 0000000..fb015fe
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.jsx
@@ -0,0 +1,139 @@
+/* eslint-disable multiline-ternary */
+import React from 'react'
+import Webcam from 'react-webcam'
+import { useNavigate } from 'react-router-dom'
+import Header from '../../../components/Header/Header'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import styles from './Scanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import { t } from 'i18next'
+import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+
+const Scanner = () => {
+  const navigate = useNavigate()
+  const { userData, setUserData } = userContext()
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback(() => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    setUserData({ ...userData, photo: imageSrc })
+  })
+
+  const description = [
+    'ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS',
+    'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO',
+    'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
+  ]
+
+  const svgIcon = () => (
+    <svg
+      width="100%"
+      height="100%"
+      className="svg"
+      viewBox="0 0 300 200"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
+          <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
+          <circle cx="50%" cy="50%" r="70" />
+        </mask>
+      </defs>
+      <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
+    </svg>
+  )
+
+  return (
+    <>
+      <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/photograph`}
+      />
+      <PopUpModal
+        title="CAPTURE_YOUR_PHOTO"
+        image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+        description={
+          <>
+            <ul>
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
+            </ul>
+          </>
+        }
+      />
+      <div className={styles.card__container}>
+          <div className={styles.webcam__container}>
+            <Webcam
+              audio={false}
+              height={400}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={600}
+              videoConstraints={{
+                height: 400,
+                width: 600,
+                facingMode: 'user'
+              }}
+            />
+            <div className={styles.overlay__container}>
+              {svgIcon()}
+            </div>
+          </div>
+          <img id="img" src={userData.photo} />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ fontSize: '1.5rem', padding: '10px 30px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              capture()
+            }}
+          >
+            {t('CAPTURE')}
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ fontSize: '1.5rem', padding: '10px 48px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              setUserData({ ...userData, photo: '' })
+            }}
+          >
+            {t('RESET')}
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center" sx={{ fontSize: '1.25rem' }}>
+            {t('PLEASE_LOOK_INTO_THE_CAMERA')}
+            <br></br>
+            {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')}
+            <br></br>
+            {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')}
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+    </>
+  )
+}
+
+export default Scanner
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.module.css b/client/src/pages/Enrollment/Scanner/Scanner.module.css
new file mode 100644
index 0000000..4a82e8e
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.module.css
@@ -0,0 +1,18 @@
+.card__container {
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+}
+
+.webcam__container {
+  position: relative;
+}
+
+.overlay__container {
+  position: absolute ;
+  width: 100%;
+  top: 0 ;
+  right: 0 ;
+  bottom: 0 ;
+  left: 0;
+}
\ No newline at end of file
-- 
cgit