voice recognition

package.json

@@ -12,9 +12,11 @@
     "@types/react-dom": "^18.0.9",
     "axios": "^1.3.4",
     "firebase": "^9.17.2",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
+    "react-player": "^2.12.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -11,6 +11,8 @@ import AppState from "./components/AppState";
 import "./app.scss";
 import "./components.scss";
 import ProtectedRoutes from "./components/ProtectedRoute";
+import ApplicationsLayout from "./Layouts/ApplicationLayout";
+import Applicant from "./views/Application";
 
 function App() {
   return (
@@ -20,7 +22,10 @@ function App() {
         <Route element={<ProtectedRoutes />}>
           <Route path="/home" element={<Home />} />
           <Route path="/settings" element={<Settings />} />
-          <Route path="/applications" element={<Applications />} />
+          <Route element={<ApplicationsLayout />}>
+            <Route path="/applications" element={<Applications />} />
+            <Route path="/applicant" element={<Applicant />} />
+          </Route>
         </Route>
       </Routes>
       <AppState />

src/Layouts/ApplicationLayout.tsx

+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Outlet, useSearchParams } from "react-router-dom";
+import { JobPayloadType, Reducers } from "../common/types";
+import Layout from "../Layouts/Layout";
+
+const ApplicationsLayout = () => {
+  const jobs = useSelector(
+    (state: Reducers) => state.common.jobs
+  ) as JobPayloadType[];
+  const [searchParams] = useSearchParams();
+  const [job, setJob] = useState<JobPayloadType | null>();
+  const jobId = searchParams.get("jobId");
+
+  useEffect(() => {
+    if (jobId) {
+      const found = jobs.find((_job) => _job._id === jobId);
+      setJob(found);
+    }
+  }, [jobId, jobs]);
+
+  const renderSkills = (skill: string, index: number) => (
+    <span className="skill" key={index}>
+      {skill}
+    </span>
+  );
+
+  if (!job) return <Layout title="Applications"></Layout>;
+  return (
+    <Layout title={job.title}>
+      <div className="row">
+        <div className="col-4">
+          <div className="card p-4 job-preview">
+            <p>
+              Salary : {job.salary.min} - {job.salary.max} {job.salary.currency}{" "}
+            </p>
+            <p className="desc">{job.description}</p>
+            <label>Primary skills</label>
+            <div className="skills">{job.primarySkills.map(renderSkills)}</div>
+            <label>Secondary skills</label>
+            <div className="skills">
+              {job.secondarySkills.map(renderSkills)}
+            </div>
+            <div className="mt-2">
+              <label>Applicattions : </label>{" "}
+              <a href={`/applications?jobId=${job._id}`}>
+                ({job.applications?.length}) Candidates
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="col-8">
+          <Outlet context={job} />
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default ApplicationsLayout;

src/components/Layout.tsx → src/Layouts/Layout.tsx

 import React from "react";
 
-import NavBar from "./NavBar";
+import NavBar from "../components/NavBar";
 
 type OwnProps = {
   title: string;

src/common/actions/common.ts

@@ -17,3 +17,16 @@ export const updateJob = (payload: JobType, success?: () => void) => ({
   payload,
   success,
 });
+
+export const updateApplication = (
+  payload: {
+    candidateId: string;
+    applicationId: string;
+    update: any;
+  },
+  success?: () => void
+) => ({
+  type: ACTIONS.UPDATE_APPLICATION,
+  payload,
+  success,
+});

src/common/actions/index.ts

@@ -15,4 +15,5 @@ export enum ACTIONS {
   GET_JOBS = "GET_JOBS",
   CREATE_JOB = "CREATE_JOB",
   UPDATE_JOB = "UPDATE_JOB",
+  UPDATE_APPLICATION = "UPDATE_APPLICATION",
 }

src/common/apis/common.ts

@@ -13,5 +13,17 @@ export default class CommonAPI {
   static applyForJob = (payload: {
     application: ApplicationType;
     resumeUrl: string;
-  }) => request("<BASE_URL>/jobs/apply", "PUT", payload);
+  }) => request("<BASE_URL>/applications/apply", "POST", payload);
+
+  static updateApplication = (payload: {
+    update: any;
+    applicationId: string;
+    candidateId: string;
+  }) => request("<BASE_URL>/applications/update", "PUT", payload);
+
+  static analyseInterview = (payload: {
+    startTime: number;
+    endTime: number;
+    applicationId: string;
+  }) => request("<BASE_URL>/applications/analyse", "POST", payload);
 }

src/common/config.ts

 import { initializeApp } from "firebase/app";
-import { getStorage, ref } from "firebase/storage";
+import { getStorage } from "firebase/storage";
 
 export const BASE_URL = "http://localhost:5000";
 export const DEFAULT_CONTROLS = {

src/common/lib/util.ts

 import {
+  AddressType,
   ApplicationType,
   CandidateType,
   OrganizationType,
@@ -60,6 +61,20 @@ export const getStatusColor = (status?: ApplicationType["status"]) => {
       ? "text-bg-warning"
       : status === "Rejected"
       ? "text-bg-danger"
-      : "text-bg-secondary";
+      : "text-bg-primary";
+  return color;
+};
+
+export const getAddress = (address: AddressType) => {
+  return `${address.addressLine}, ${address.city}, ${address.country}`;
+};
+
+export const getVerificationColor = (score: number) => {
+  const color =
+    score >= 80
+      ? "text-success"
+      : score >= 60 && score < 80
+      ? "text-warning"
+      : "text-danger";
   return color;
 };

src/common/saga/common.ts

@@ -7,7 +7,7 @@ function* getJobs({
   success,
 }: {
   type: typeof ACTIONS.GET_JOBS;
-  success: () => void;
+  success?: () => void;
 }) {
   try {
     const data: { jobs: JobType; success: boolean } = yield call(
@@ -17,9 +17,9 @@ function* getJobs({
       yield put({ type: ACTIONS.SET_JOBS, payload: data.jobs });
     }
 
-    success();
+    success?.();
   } catch (error) {
-    success();
+    success?.();
   }
 }
 
@@ -103,8 +103,46 @@ function* updateJob({
   }
 }
 
+function* updateApplication({
+  payload,
+  success,
+}: {
+  type: typeof ACTIONS.UPDATE_APPLICATION;
+  payload: { applicationId: string; update: any; candidateId: string };
+  success?: () => void;
+}) {
+  try {
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.LOADING },
+    });
+
+    const data: { success: boolean } = yield call(
+      CommonAPI.updateApplication,
+      payload
+    );
+
+    if (data.success) {
+      yield call(getJobs, { type: ACTIONS.GET_JOBS });
+    }
+
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.SUCCESS },
+    });
+    success?.();
+  } catch (error) {
+    success?.();
+    yield put({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.FAILED },
+    });
+  }
+}
+
 export default function* authSaga() {
   yield takeLeading(ACTIONS.GET_JOBS, getJobs);
   yield takeLeading(ACTIONS.CREATE_JOB, createJob);
   yield takeLeading(ACTIONS.UPDATE_JOB, updateJob);
+  yield takeLeading(ACTIONS.UPDATE_APPLICATION, updateApplication);
 }

src/common/types.ts

@@ -95,6 +95,7 @@ export type CandidateType = {
   profilePicture: string;
   state: "INTIAL" | "READY";
   resume?: string;
+  selfIntro?: string;
 };
 
 export type OrganizationType = {
@@ -191,6 +192,7 @@ export type JobPayloadType = {
 };
 
 export type ApplicationPayloadType = {
+  _id: string;
   candidate: CandidateType;
   job: string;
   status: "Pending" | "Accepted" | "In progress" | "Rejected";
@@ -199,6 +201,7 @@ export type ApplicationPayloadType = {
     time: string;
     link: string;
     videoRef?: string;
+    voiceVerification?: number;
   };
   score: {
     primary: number;

src/components.scss

@@ -207,3 +207,24 @@
     margin-top: 5px;
   }
 }
+
+.matches {
+  display: flex;
+  p {
+    padding: 2px 10px;
+    background: lightcoral;
+    margin-right: 10px;
+    border-radius: 8px;
+  }
+}
+
+.upload-interview-video {
+  background-color: #f5f5f5;
+  height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  input {
+    display: none;
+  }
+}

src/components/Application/Applicant.tsx

+import React from "react";
+import ReactPlayer from "react-player";
+import { getAddress } from "../../common/lib/util";
+import { ApplicationPayloadType } from "../../common/types";
+import Avatar from "../Avatar";
+
+type OwnProps = {
+  application: ApplicationPayloadType;
+};
+
+const Applicant = ({ application }: OwnProps) => {
+  const { candidate, score } = application;
+  const renderMatches = (match: string, index: number) => (
+    <p key={index}>{match}</p>
+  );
+
+  return (
+    <>
+      <div className="mb-3 row">
+        <div className="col-sm-3  ">
+          <Avatar
+            name={candidate?.name}
+            url={candidate?.profilePicture}
+            size="lg"
+          />
+        </div>
+        <div className="col-sm-9">
+          <div className="mb-3 row">
+            <label className="col-sm-3">Name</label>
+            <div className="col-sm-9">
+              <p>
+                <strong>{candidate.name}</strong>
+              </p>
+            </div>
+          </div>
+          <div className="row">
+            <label className="col-sm-3 col-form-label">Resume</label>
+            <div className="col-sm-9">
+              <a
+                className="btn btn-secondary btn-sm"
+                href={candidate.resume}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Preview
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-3 row">
+        <div className="col-sm-6">
+          <div className="row">
+            <label className="col-sm-4 col-form-label">Address</label>
+            <div className="col-sm-8">
+              <textarea
+                className="form-control"
+                rows={3}
+                value={getAddress(candidate.contacts.address)}
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div className="col-sm-6">
+          <div className="row">
+            <label className="col-sm-3 col-form-label">Phone</label>
+            <div className="col-sm-9">
+              <input
+                type="text"
+                className="form-control"
+                name="phone"
+                value={candidate.contacts?.phone}
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <ReactPlayer
+        url={candidate.selfIntro}
+        controls
+        width="100%"
+        height="100%"
+      />
+      <hr />
+      <table className="table table-hover table-sm">
+        <thead>
+          <tr>
+            <th scope="col">Primary Score</th>
+            <th scope="col">Secondary Score</th>
+            <th scope="col">Similarity</th>
+            <th scope="col">Total score</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{score.primary}</td>
+            <td>{score.secondary}</td>
+            <td>{score.similarity}</td>
+            <td>{score.total}</td>
+          </tr>
+        </tbody>
+      </table>
+      <label className="mb-2">
+        <strong>Primary match</strong>
+      </label>
+      <div className="matches">{score.primatyMatch?.map(renderMatches)}</div>
+      <label className="mt-3">
+        <strong>Secondary match</strong>
+      </label>
+      <div className="matches">{score.secondaryMatch?.map(renderMatches)}</div>
+    </>
+  );
+};
+
+export default Applicant;

src/components/Application/Interview.tsx

+import React, { useState, useRef, ChangeEvent } from "react";
+import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
+import moment from "moment";
+import ReactPlayer from "react-player";
+import { OnProgressProps } from "react-player/base";
+import CommonAPI from "../../common/apis/common";
+import { ApplicationPayloadType } from "../../common/types";
+import Progress from "../Progress";
+import { fileStorage } from "../../common/config";
+import { useDispatch } from "react-redux";
+import { updateApplication } from "../../common/actions/common";
+import { getVerificationColor } from "../../common/lib/util";
+
+type OwnProps = {
+  application: ApplicationPayloadType;
+};
+
+type Analysis = {
+  voice: string;
+};
+
+const Interview = ({ application }: OwnProps) => {
+  const dispatch = useDispatch();
+  const [analysis, setAnalysis] = useState<Analysis | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [startTime, setStartTime] = useState<number>(0);
+  const [progress, setProgress] = useState<number>(0);
+  const [endTime, setEndTime] = useState<number>(120);
+  const _selectedTime = useRef<number>(0);
+  const _video = useRef<ReactPlayer>(null);
+  const _hiddenFileInput = useRef<HTMLInputElement>(null);
+
+  const onSeek = (e: number) => (_selectedTime.current = e);
+  const onProgress = (e: OnProgressProps) =>
+    (_selectedTime.current = e.playedSeconds);
+  const onSetStartTime = () => setStartTime(_selectedTime.current);
+  const onSetEndTime = () => setEndTime(_selectedTime.current);
+
+  const displayStartTime = `${moment.utc(startTime * 1000).format("HH:mm:ss")}`;
+  const displayEndTime = `${moment.utc(endTime * 1000).format("HH:mm:ss")}`;
+
+  const onClickAnalyse = () => {
+    if (startTime !== endTime) {
+      setIsLoading(true);
+      CommonAPI.analyseInterview({
+        startTime,
+        endTime,
+        applicationId: application._id,
+      })
+        .then((res: any) => {
+          setAnalysis(res);
+          setIsLoading(false);
+        })
+        .catch((err) => {
+          setIsLoading(false);
+        });
+    }
+  };
+  const onSelectVideo = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setIsLoading(true);
+      const path = `/interviews/${application._id}.mp4`;
+      const uploadRef = ref(fileStorage, path);
+      const uploadTask = uploadBytesResumable(uploadRef, e.target.files[0]);
+      uploadTask.on(
+        "state_changed",
+        (snapshot) => {
+          const percent = Math.round(
+            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+          );
+          setProgress(percent);
+        },
+        (err) => {},
+        () => {
+          getDownloadURL(uploadTask.snapshot.ref).then((url) => {
+            dispatch(
+              updateApplication(
+                {
+                  applicationId: application._id,
+                  candidateId: application.candidate._id || "",
+                  update: { interview: { videoRef: url } },
+                },
+                () => {
+                  setProgress(0);
+                  setIsLoading(false);
+                }
+              )
+            );
+          });
+        }
+      );
+    }
+  };
+  const onClickUpload = () => {
+    _hiddenFileInput?.current?.click();
+  };
+
+  const renderLoading = isLoading && (
+    <div className="spinner-border text-primary" role="status">
+      <span className="visually-hidden">Loading...</span>
+    </div>
+  );
+
+  if (!application.interview?.videoRef) {
+    return (
+      <>
+        <div className="upload-interview-video">
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={onClickUpload}
+            disabled={isLoading}
+          >
+            Upload video
+          </button>
+          <input
+            type="file"
+            accept="video/mp4"
+            ref={_hiddenFileInput}
+            onChange={onSelectVideo}
+          />
+        </div>
+        <Progress progress={progress} />
+      </>
+    );
+  }
+
+  const renderVoiceVerification = () => {
+    if (application.interview?.voiceVerification) {
+      const score = application?.interview?.voiceVerification * 100;
+      const percentage = `${score?.toFixed(2)}%`;
+
+      return (
+        <strong
+          className={getVerificationColor(
+            application?.interview?.voiceVerification * 100
+          )}
+        >
+          Voice verification: {percentage}
+        </strong>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div>
+      <ReactPlayer
+        ref={_video}
+        url={application.interview.videoRef}
+        controls
+        height="100%"
+        width="100%"
+        onSeek={onSeek}
+        onProgress={onProgress}
+      />
+      {renderVoiceVerification()}
+
+      <div className="row" style={{ padding: "12px" }}>
+        <div className="col-sm-4">
+          <div className="row">
+            <button
+              type="button"
+              className="col-sm-4 btn btn-warning btn-sm"
+              onClick={onSetStartTime}
+            >
+              Start time
+            </button>
+            <div className="col-sm-8">
+              <input
+                type="text"
+                className="form-control"
+                name="startTime"
+                disabled
+                value={displayStartTime}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="col-sm-4">
+          <div className="row">
+            <button
+              type="button"
+              className="col-sm-4 btn btn-warning btn-sm"
+              onClick={onSetEndTime}
+            >
+              End time
+            </button>
+            <div className="col-sm-8">
+              <input
+                type="text"
+                className="form-control"
+                name="endTime"
+                disabled
+                value={displayEndTime}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="col-sm-4">
+          <div className="row">
+            <div className="col-sm-8">
+              <button
+                type="button"
+                className="btn btn-primary w-100"
+                onClick={onClickAnalyse}
+                disabled={isLoading}
+              >
+                Analyse
+              </button>
+            </div>
+            {renderLoading}
+          </div>
+        </div>
+      </div>
+
+      <div className="row mt-2">
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label">Voice</label>
+          <label className="col-sm-5 col-form-label">
+            <strong>{analysis?.voice}</strong>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Interview;

src/components/CandidateProfile.tsx

@@ -7,12 +7,15 @@ import { fileStorage } from "../common/config";
 import { getProfile } from "../common/lib/util";
 import { APP_STATE, CandidateType } from "../common/types";
 import Avatar from "./Avatar";
+import Progress from "./Progress";
 
 const CandidateProfile = () => {
   const dispath = useDispatch();
   const candidate = useSelector(getProfile) as CandidateType;
   const [profile, setProfile] = useState<CandidateType>(candidate);
   const [resume, setResume] = useState<File | null>(null);
+  const [selfIntro, setSelfIntro] = useState<File | null>(null);
+  const [progress, setProgress] = useState<number>(0);
 
   useEffect(() => {
     if (candidate) {
@@ -51,33 +54,66 @@ const CandidateProfile = () => {
     dispath(updateCandidate(payload));
   };
 
-  const onSubmit = () => {
-    const { jobIds, state, _id, ...rest } = profile;
-    dispath({
-      type: ACTIONS.SET_APP_STATE,
-      payload: { state: APP_STATE.LOADING },
-    });
-    if (resume) {
-      const resumeRef = ref(fileStorage, `/resumes/${profile._id}.pdf`);
-      const uploadTask = uploadBytesResumable(resumeRef, resume);
+  const uploadSingleFile = (path: string, file: File) => {
+    return new Promise((resolve, reject) => {
+      const uploadRef = ref(fileStorage, path);
+      const uploadTask = uploadBytesResumable(uploadRef, file);
       uploadTask.on(
         "state_changed",
         (snapshot) => {
           const percent = Math.round(
             (snapshot.bytesTransferred / snapshot.totalBytes) * 100
           );
-          console.log(percent);
+          setProgress(percent);
         },
         (err) => {
-          console.log("ERROR ", err);
+          reject(err);
         },
         () => {
           getDownloadURL(uploadTask.snapshot.ref).then((url) => {
-            console.log(url);
-            onUpdateCandidate({ ...rest, resume: url });
+            setProgress(0);
+            resolve(url);
           });
         }
       );
+    });
+  };
+
+  const onSubmit = async () => {
+    const { jobIds, state, _id, ...rest } = profile;
+    dispath({
+      type: ACTIONS.SET_APP_STATE,
+      payload: { state: APP_STATE.LOADING },
+    });
+    if (resume || selfIntro) {