Update webcam modal to include a directional button for user-facing and environment facing cams; Include cancel button to escape from modal; Upate size of modal for devices

Author: leekahung

src/components/Modals/WebcamModal.jsx

@@ -1,14 +1,24 @@
 // React Imports
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import Webcam from 'react-webcam';
 // Material UI Imports
 import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
+import CameraswitchIcon from '@mui/icons-material/Cameraswitch';
 
 // TODO: Determine future of this modal
 // web camera modal
 const WebcamModal = ({ open, onClose, onCapture }) => {
   const webcamRef = useRef(null);
+  const [facingDirection, setFacingDirection] = useState('environment');
+
+  const handleCameraDirection = () => {
+    if (facingDirection === 'environment') {
+      setFacingDirection('user');
+    } else {
+      setFacingDirection('environment');
+    }
+  };
 
   const handleCapture = () => {
     const imageSrc = webcamRef.current.getScreenshot();
@@ -29,19 +39,27 @@ const WebcamModal = ({ open, onClose, onCapture }) => {
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
-          height: '100vh'
+          gap: '10px',
+          height: '100dvh'
         }}
       >
-        <h2 id="webcam-modal-title">Webcam</h2>
         <Webcam
           audio={false}
           ref={webcamRef}
           screenshotFormat="image/jpeg"
-          videoConstraints={{ facingMode: 'user' }}
+          videoConstraints={{ facingMode: facingDirection }}
         />
-        <Button variant="contained" color="primary" onClick={handleCapture}>
-          Take Photo
-        </Button>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Button variant="contained" color="primary" onClick={() => onClose()}>
+            Cancel
+          </Button>
+          <Button variant="contained" color="primary" onClick={handleCapture}>
+            Take Photo
+          </Button>
+          <Button variant="contained" color="primary" onClick={handleCameraDirection}>
+            <CameraswitchIcon />
+          </Button>
+        </div>
       </div>
     </Modal>
   );