summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorBlaster4385 <venkateshchaturvedi12@gmail.com>2022-08-26 04:08:45 +0530
committerBlaster4385 <venkateshchaturvedi12@gmail.com>2022-08-26 04:08:45 +0530
commitbdd4ad1b8b071fd04f1025076174757f0f355315 (patch)
treeff59e8ceb65c40f189c3d6f7a59833c77bc2af46 /client
parent951b6dbaf9d3da78c056cafbde17167887f73594 (diff)
added overlay
Diffstat (limited to 'client')
-rw-r--r--client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx49
-rw-r--r--client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css13
-rw-r--r--client/src/pages/Update/PhotoCapture/PhotoCapture.jsx58
3 files changed, 91 insertions, 29 deletions
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
index ddd656c..7643f76 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -27,6 +27,25 @@ const PhotoCapture = () => {
'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')} />
@@ -50,18 +69,24 @@ const PhotoCapture = () => {
/>
<div className={styles.card__container}>
{!userData.photo ? (
- <Webcam
- audio={false}
- height={400}
- ref={webcamRef}
- screenshotFormat="image/jpeg"
- width={600}
- videoConstraints={{
- height: 400,
- width: 600,
- facingMode: 'user'
- }}
- />
+ <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} />
)}
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
index ad193e1..4a82e8e 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
@@ -2,4 +2,17 @@
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
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index b53752c..0b8b4cb 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -37,6 +37,25 @@ const PhotoCapture = () => {
'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('UPDATE')} />
@@ -58,23 +77,28 @@ const PhotoCapture = () => {
</>
}
/>
- <div className={styles.card__container}>
- {userData?.photo === '' ? (
- <Webcam
- audio={false}
- height={300}
- ref={webcamRef}
- screenshotFormat="image/jpeg"
- width={500}
- videoConstraints={{
- height: 300,
- width: 500,
- facingMode: 'user'
- }}
- />
- ) : (
- <img id="img" src={userData?.photo} />
- )}
+ <div className={styles.webcam__container}>
+ <div className={styles.card__container}>
+ {userData?.photo === '' ? (
+ <Webcam
+ audio={false}
+ height={300}
+ ref={webcamRef}
+ screenshotFormat="image/jpeg"
+ width={500}
+ videoConstraints={{
+ height: 300,
+ width: 500,
+ facingMode: 'user'
+ }}
+ />
+ ) : (
+ <img id="img" src={userData?.photo} />
+ )}
+ </div>
+ <div className={styles.overlay__container}>
+ {svgIcon()}
+ </div>
</div>
<Grid container columnSpacing={10} justifyContent="center">
<Grid item>