focalxaiinspection/src/lib/Pages/BeautyshotsPage/BeautyshotsPage.js

Focalx AI Inspection

import React, { useRef, useState, useEffect } from 'react';
import Webcam from 'react-webcam';
import { Link, useNavigate } from 'react-router-dom';
import { Thumbs } from '../../Data/Thumbs';
import { NavigationArrows } from '../../Data/NavigationArrows';
import { BodyPart } from '../../Data/BodyPart';
import InspectImage from '../../services/Api/InspectImage';
import './BeautyshotsPage.scss';

const BeautyshotsPage = () => {
  const webcamRef = useRef(null);
  const [activeImagePreviewIndex, setActiveImagePreviewIndex] = useState(0);
  const [activeNavigationArrow, setActiveNavigationArrow] = useState(NavigationArrows[0]);
  const [activeBodyType, setActiveBodyType] = useState(BodyPart[0]);
  const [allImagesCaptured, setAllImagesCaptured] = useState(false);
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();


  const constraints = {
    // facingMode: facingMode,
    facingMode: { exact: "environment" }
    // facingMode: isRearCameraAvailable ? { exact: 'environment' } : 'user'
  };

  const handleCapturePhoto = async () => {
    const base64Data = webcamRef.current.getScreenshot();
    const newImagePreviewIndex = activeImagePreviewIndex + 1;
    if (newImagePreviewIndex < Thumbs.length) {
      setActiveImagePreviewIndex(newImagePreviewIndex);
      setActiveNavigationArrow(NavigationArrows[newImagePreviewIndex]);
      setActiveBodyType(BodyPart[newImagePreviewIndex]);
      const activeImagePreview = document.querySelector('.image-preview.active');
      activeImagePreview.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    const activeImagePreview = document.querySelector('.image-preview.active');
    const blob = await (await fetch(base64Data)).blob();
    let formData = new FormData();
    formData.append('image_type', 'beauty-shot');
    formData.append('image', blob, 'test1.jpg');
    formData.append('position', 'rear-right');
    //formData.append('custom_label', 'testing');
    const imageUrl = window.URL.createObjectURL(blob);
    activeImagePreview.querySelector('img').src = imageUrl;
    if (newImagePreviewIndex === Thumbs.length) {
      setAllImagesCaptured(true);
      const imageUploadPromises = [];
      for (let i = 0; i < Thumbs.length; i++) {
        const base64Data_1 = document.querySelector(`.image-preview:nth-child(${i+1}) img`).src;
        const blob_1 = await (await fetch(base64Data_1)).blob();
        let formData_1 = new FormData();
        formData_1.append('image_type', 'beauty-shot');
        formData_1.append('image', blob_1, `test${i+1}.jpg`);
        formData_1.append('position', 'rear-right');
        //formData_1.append('custom_label', 'testing');
        imageUploadPromises.push(InspectImage(formData_1));
      }
      Promise.all(imageUploadPromises).then((data) => {
        //console.log("imageUploadPromises", data);
        setLoading(false);
        navigate('/damage-report');
      }).catch(function(err) {
        setLoading(false);
        console.log(err.message);
        alert("Something Went Wrong. Please try Again");
        navigate('/');
      });
    }
  };
  
  const handleYes = () => {
      setAllImagesCaptured(false);
      setLoading(true);
      //navigate('/damage-report');
  };

  const handleNo = () => {
    setAllImagesCaptured(false);
  };

  return (
    <>   
      <div className='phone-rotate-message'>
          <img src={require('../../Assets/images/rotated.svg').default} alt='' />
          <h3>Please rotate your screen</h3>
        </div>
      <div className="camera-container">
        <div className='image-preview-list'>
          {Thumbs.map((res, index) => {
            const {photo} = res;
            return (
            <div
              className={`image-preview ${activeImagePreviewIndex === index ? 'active' : ''}`}
              key={index}
            >
              <img src={photo} alt={`navigation-arrow-${index}`} />
            </div>
          );
        })}
        </div>
      
      <Webcam 
          className='camera' 
          audio={false} 
          ref={webcamRef} 
          screenshotFormat='image/jpeg' 
          videoConstraints={constraints}
        />

        <div className='body-type-container'>
            <div className='body-type'>
              <img src={activeBodyType.photo} alt={`navigation-arrow-${activeImagePreviewIndex}`} />
            </div>
          </div>

        <div className='camera-bottom'>
          <div className='navigation-arrow-container'>
            <div className='navigation-arrow'>
              {/* <img src={NavigationArrows[activeImagePreviewIndex].image} alt={`navigation-arrow-${activeImagePreviewIndex}`} /> */}

              <img src={activeNavigationArrow.image} alt={`navigation-arrow-${activeImagePreviewIndex}`} />

            </div>
          </div>          
          <button className='capture-photo' onClick={handleCapturePhoto}>
            {/* <img src={require('../../Assets/images/camera.svg').default} alt='' /> */}
          </button>
          {/* <button className='facing-mode' onClick={handleFacingModeToggle}>
            <img src={require('../../Assets/images/rotate.svg').default} alt='' />
          </button> */}
          <Link to='/' className='close-button'>
            <img src={require('../../Assets/images/close-with-circle.svg').default} alt='' />
          </Link>
        </div>

        {allImagesCaptured === true && (
          <div className='popup-container'>
            <div className='popup'>
              <h3>Upload confirmation</h3>
              <p>We are proccessing your inspection. Hold on a few moments and we'll have it ready for you.</p>
              <div className='button-container'>
                <div className='cancel' onClick={handleNo}>No</div>
                <div className='upload' onClick={handleYes}>Yes</div>                
              </div>
            </div>
          </div>
        )}

        {loading && (
          <>
            <div className="lds-roller-overlay">
          <div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
          </div> 
          </>          
        )}
      </div>
    </>
  );
};

export default BeautyshotsPage;