Merge branch 'test' of https://github.com/SweetmanTech/HENO._CUSTOM_W…

…EBSITE into tech322/remove-date
sweetmantech · May 6, 2024 · eced7d4 · eced7d4
2 parents 664069c + 10ee312
commit eced7d4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 47 deletions.
diff --git a/components/WebCam/WebCam.tsx b/components/WebCam/WebCam.tsx
@@ -1,62 +1,20 @@
-import handleTxError from "@/lib/handleTxError"
 import { usePageLoad } from "@/providers/PageLoadProvider"
-import { useEffect, useRef, useState } from "react"
 
 const WebCam = () => {
-  const { granted, setGranted } = usePageLoad()
-  const [stream, setStream] = useState(null)
-  const videoRef = useRef(null)
-
-  const onClick = async () => {
-    try {
-      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-      setStream(mediaStream)
-      setGranted(true)
-    } catch (error) {
-      handleTxError(error)
-    }
-  }
-
-  useEffect(() => {
-    const init = async () => {
-      let mediaStream = null
-      if (granted) {
-        mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-        setStream(mediaStream)
-      }
-
-      if (!stream && !mediaStream) return
-
-      videoRef.current.srcObject = stream || mediaStream
-      videoRef.current.muted = true
-      videoRef.current.play()
-    }
-
-    if (!videoRef?.current) return
-
-    init()
-    // eslint-disable-next-line consistent-return
-    return () => {
-      if (stream) {
-        stream.getTracks().forEach((track) => track.stop())
-      }
-    }
-  }, [stream, granted, videoRef])
+  const { granted, grantCamera, videoRef } = usePageLoad()
 
   return (
     <div className="w-full h-full">
       {!granted && (
         <button
           type="button"
           className="w-full h-full flex justify-center items-center"
-          onClick={onClick}
+          onClick={grantCamera}
         >
           <p className="text-white text-xl">Verify Identity</p>
         </button>
       )}
-      {granted && (
-        <video id="vid" ref={videoRef} autoPlay playsInline muted className="w-full h-full" />
-      )}
+      {granted && <video ref={videoRef} autoPlay playsInline muted className="w-full h-full" />}
     </div>
   )
 }

diff --git a/providers/PageLoadProvider.tsx b/providers/PageLoadProvider.tsx
@@ -1,12 +1,33 @@
 import useLiveTime from "@/hooks/useLiveTime"
-import { createContext, useContext, useMemo, useState } from "react"
+import handleTxError from "@/lib/handleTxError"
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react"
 
 const PageLoadContext = createContext(null)
 
 const PageLoadProvider = ({ children }) => {
   const [entered, setEntered] = useState(false)
   const { liveTime } = useLiveTime()
   const [granted, setGranted] = useState(false)
+  const [stream, setStream] = useState(null)
+  const videoRef = useRef(null)
+
+  const grantCamera = async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+      setStream(mediaStream)
+      setGranted(true)
+    } catch (error) {
+      handleTxError(error)
+    }
+  }
+
+  useEffect(() => {
+    if (stream) {
+      videoRef.current.srcObject = stream
+      videoRef.current.muted = true
+      videoRef.current.play()
+    }
+  }, [stream, videoRef?.current])
 
   const value = useMemo(
     () => ({
@@ -15,8 +36,12 @@ const PageLoadProvider = ({ children }) => {
       liveTime,
       setGranted,
       granted,
+      stream,
+      setStream,
+      grantCamera,
+      videoRef,
     }),
-    [entered, setEntered, liveTime, granted, setGranted],
+    [entered, setEntered, liveTime, granted, setGranted, stream, setStream, grantCamera, videoRef],
   )
 
   return <PageLoadContext.Provider value={value}>{children}</PageLoadContext.Provider>