fixing icons and switch between front and back camera functionality

imrany · Oct 16, 2024 · 1aa1e3a · 1aa1e3a
1 parent 17fd66e
commit 1aa1e3a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import { GlobalContext } from "./context";
 export default function App(){
     const API_URL=`https://gemmie.onrender.com`
     const [isSupported,setIsSupported]=useState(true)
+    const [isFacingModeUser,setIsFacingModeUser]=useState(false)
     const [videoConstraints, setVideoConstraints]=useState<any>({
         width: screen.width-400,
         height: 720,
@@ -20,7 +21,13 @@ export default function App(){
     }
 
     function changeVideoConstraints(){
-        setVideoConstraints({height:720, width:screen.width, facingMode:"user"})
+        if(isFacingModeUser===false){
+            setIsFacingModeUser(true)
+            setVideoConstraints({height:720, width:screen.width, facingMode:"user"})
+        }else{
+            setIsFacingModeUser(false)
+            setVideoConstraints({height:720, width:screen.width, facingMode:"environment"})
+        }
     }
 
     useEffect(()=>{

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -78,6 +78,7 @@ export default function MainPage() {
   }
 
   useEffect(()=>{
+    window.speechSynthesis.cancel()
     runCoco()
   },[]);
 
@@ -96,25 +97,25 @@ export default function MainPage() {
                                     <FaChevronLeft className="w-[22px] h-[20px]"/>
                                 </Link>
                                 <p>Search</p>*/}
-                                <div className="ml-auto flex flex-col gap-3">
+                                <div className="ml-auto flex flex-col gap-4">
                                     <button onClick={changeVideoConstraints}>
-                                        <IoCameraReverseSharp className="w-[25px] h-[25px]"/>
+                                        <IoCameraReverseSharp className="w-[28px] h-[28px]"/>
                                     </button>
                                     {isMuted?(
                                         <button onClick={()=>{
                                             setIsMuted(false)
                                             localStorage.setItem("audio","unmute")
                                             window.speechSynthesis.cancel()
                                         }}>
-                                            <HiMiniSpeakerWave className="w-[25px] h-[25px]"/>
+                                            <HiMiniSpeakerWave className="w-[28px] h-[28px]"/>
                                         </button>
                                     ):(
                                         <button onClick={()=>{
                                             setIsMuted(true)
                                             localStorage.setItem("audio","mute")
                                             window.speechSynthesis.cancel()
                                         }}>
-                                            <HiMiniSpeakerXMark className="w-[25px] h-[25px]"/>
+                                            <HiMiniSpeakerXMark className="w-[28px] h-[28px]"/>
                                         </button>
                                     )}
                                 </div>