Camera added

package.json

@@ -27,6 +27,7 @@
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.1",
 		"react-socks": "^2.1.0",
+		"react-webcam": "^6.0.0",
 		"web-vitals": "^0.2.4"
 	},
 	"scripts": {

src/components/CountDownModal/CountDownModal.jsx

@@ -8,7 +8,7 @@ const CountDownModal = ({ open, onClose, onComplete }) => {
 		<Dialog className="countdown-modal" open={open} onClose={onClose} fullWidth>
 			<DialogTitle>Went out of test area! Test will automatically close in</DialogTitle>
 			<DialogContent>
-				<CountDown endTime={Date.now() + 3000} onComplete={onComplete} />
+				<CountDown endTime={Date.now() + 15000} onComplete={onComplete} />
 			</DialogContent>
 			<DialogActions>
 				<Button color="secondary" className="close-modal" onClick={onClose}>

src/pages/ClubProfile.jsx

@@ -18,6 +18,7 @@ import { Link } from "react-router-dom";
 import { black } from "color-name";
 import "./ClubProfile.css";
 import "../components/Shared/Navbar/Navbar.css";
+import BannerImg from "./bannerIMG.png";
 
 const useStyles = makeStyles((theme) => ({
 	avatar: {
@@ -130,7 +131,7 @@ const OrgProfile = (props) => {
 							src={
 								data.clubBanner
 									? data.clubBanner
-									: "/assets/bannerIMG.jpg"
+									: BannerImg
 							}
 							width="100%"
 							alt=""

src/pages/Student/GetTestDomains/GetTestDomains.js

@@ -20,6 +20,8 @@ import Loading from "../../Loading";
 import StudentNavbar from "../../../components/Student/StudentNavbar/StudentNavbar";
 import Axios from "axios";
 import { Alert } from "@material-ui/lab";
+import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton';
 
 const GetTestDomains = (props) => {
 	const id = props.match.params.testId;
@@ -102,14 +104,24 @@ const GetTestDomains = (props) => {
 		return <Redirect to="/student/dashboard" />;
 	}
 
+	const handleBack = () => {
+		history.goBack();
+		  };
+
+
 	return (
 		<div className="test-details-page">
 			<StudentNavbar location="Test Domains" />
 			<Container className="test-details-container">
-				<div className="test-info">
-					<h1>
-						<a>Test Details</a>
-					</h1>
+			<div className="test-info">
+            <div style={{display: "flex", flexWrap:"wrap", justifyContent:"space-between", alignItems:"center"}}>
+              <h1>
+                <a>Test Details</a>
+              </h1>
+              <IconButton aria-label="delete" onClick={handleBack}>
+                <CloseIcon htmlColor="#FFF" />
+              </IconButton>
+            </div>
 					<div style={{ color: "#fff" }}>
 						<Grid container spacing={3}>
 							<Grid item xs={6} sm={3}>

src/pages/Student/TestScreen/TestScreen.css

@@ -27,13 +27,13 @@
 }
 
 .submit-fab {
-	/* position: fixed !important; */
+	position: fixed !important;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	z-index: 10;
-	/* bottom: 20px !important;
-	left: 30px !important; */
+	bottom: 20px !important;
+	left: 30px !important;
 }
 
 .cont-colo{

src/pages/Student/TestScreen/TestScreen.jsx

@@ -19,6 +19,10 @@ import TestQuestionDisplay from "../../../components/Student/TestQuestionDisplay
 import Loading from "../../Loading";
 import { dummyTest } from "./dummyTest";
 import "./TestScreen.css";
+import Fab from "@material-ui/core/Fab";
+import Camera from "@material-ui/icons/CameraAlt";
+import Webcam from "react-webcam";
+
 import {
   fullScreenListeners,
   fullscreenWindow,
@@ -30,6 +34,7 @@ const TestScreen = (props) => {
   const [answers, setAnswers] = useState({});
   const [loading, setLoading] = useState(true);
   const [confirmSubmit, setConfirmSubmit] = useState(false);
+  const [openCam, setopenCam] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const [error, setError] = useState(false);
   const [startedAt, setStartedAt] = useState(Date.now() * 100000);
@@ -119,6 +124,24 @@ const TestScreen = (props) => {
     setViolated(true);
     console.log("test violated");
     setCountdownModal(false);
+    setConfirmSubmit(false);
+  };
+
+  const videoConstraints = {
+    width: 300,
+    height: 200,
+    facingMode: "user",
+  };
+  const webcamRef = React.useRef(null);
+  const WebcamCapture = () => {
+    const webcamRef = React.useRef(null);
+
+    const capture = React.useCallback(
+      () => {
+        const imageSrc = webcamRef.current.getScreenshot();
+      },
+      [webcamRef]
+    );
   };
 
   useEffect(() => {
@@ -156,12 +179,15 @@ const TestScreen = (props) => {
     };
   }, []);
 
+
   if (loading) {
     return <Loading />;
   } else if (error) {
     return "There was some error";
   }
 
+
+
   return (
     <div
       className="test-page"
@@ -260,14 +286,6 @@ const TestScreen = (props) => {
           >
             Submit Test
           </Button>
-
-          {/* <Fab
-          color='primary'
-          aria-label='submit-test'
-          className='submit-fab'
-          onClick={() => setConfirmSubmit(true)}>
-          <Done />
-        </Fab> */}
         </Tooltip>
       </div>
       <Dialog
@@ -324,6 +342,44 @@ const TestScreen = (props) => {
         onClose={handleModalClose}
         onComplete={handleTestViolation}
       />
+      <Fab
+        color="primary"
+        aria-label="submit-test"
+        className="submit-fab"
+        onClick={() => setopenCam(true)}
+      >
+        <Camera />
+      </Fab>
+      <Dialog
+        open={openCam}
+        onClose={() => {
+          setopenCam(false);
+        }}
+        fullWidth
+      >
+        <DialogTitle className style={{ color: "white", background: "#252D3A" }}>
+          Live Camera Feed
+        </DialogTitle>
+        <Webcam
+        audio={false}
+        height={400}
+        ref={webcamRef}
+        screenshotFormat="image/jpeg"
+        width={600}
+        videoConstraints={videoConstraints}
+      />
+        <DialogActions style={{ color: "white", background: "#252D3A" }}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              setopenCam(false);
+            }}
+          >
+            Close ✖
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };

yarn.lock

@@ -9510,6 +9510,11 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-webcam@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-6.0.0.tgz#46dd9ba44cebe6bf3cc4ea2ff09d12243900abfa"
+  integrity sha512-pw7067WYnDHRjAXYXrsLeig9/AAxCFDnnaEJzZ5ep6UZoYMqF4UNRtVkeTk0LotpwqT/c8vHisn/+QodNbUsQA==
+
 react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"