fix video call

advanced-computer-lab-2023 · Dec 16, 2023 · 51e9439 · 51e9439
1 parent c6de306
commit 51e9439
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 76 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,8 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/quicksand": "^5.0.16",
     "@fontsource/roboto": "^5.0.8",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/resolvers": "^3.3.1",
     "@mui/icons-material": "^5.14.12",
     "@mui/lab": "^5.0.0-alpha.147",

diff --git a/frontend/src/components/BaseLayout.tsx b/frontend/src/components/BaseLayout.tsx
@@ -240,11 +240,27 @@ export function BaseLayout() {
                 flexGrow: 1,
               }}
             >
-              <Outlet
-                context={
-                  { setSidebarLinks, sidebarLinks } satisfies OutletContextType
-                }
-              />
+              {user ? (
+                <VideoCallProvider>
+                  <Outlet
+                    context={
+                      {
+                        setSidebarLinks,
+                        sidebarLinks,
+                      } satisfies OutletContextType
+                    }
+                  />
+                </VideoCallProvider>
+              ) : (
+                <Outlet
+                  context={
+                    {
+                      setSidebarLinks,
+                      sidebarLinks,
+                    } satisfies OutletContextType
+                  }
+                />
+              )}
             </Box>
           </Box>
 
@@ -315,9 +331,9 @@ export function BaseLayout() {
 
   if (user) {
     return (
-      <VideoCallProvider>
-        <ChatsProvider>{layout}</ChatsProvider>
-      </VideoCallProvider>
+      // <VideoCallProvider>
+      <ChatsProvider>{layout}</ChatsProvider>
+      // </VideoCallProvider>
     )
   } else {
     return layout

diff --git a/frontend/src/components/video-call/VideoCallScreen.tsx b/frontend/src/components/video-call/VideoCallScreen.tsx
@@ -1,26 +1,21 @@
 import { useContext, useEffect, useState, useRef } from 'react'
 import { VideoContext } from '../../providers/VideoCallProvider'
 import '../../components/video-call/styles/Video.css' //"../Video.css";
-import { Modal, Input } from 'antd'
+import { Modal } from 'antd'
 import VideoIcon from '../../components/video-call/assests/video.svg'
 import VideoOff from '../../components/video-call/assests/video-off.svg'
-import Msg_Illus from '../../components/video-call/assests/msg_illus.svg'
-import Msg from '../../components/video-call/assests/msg.svg'
 import VideocamOffIcon from '@mui/icons-material/VideocamOff'
 import '../../components/video-call/styles/Video.css'
 import { socket } from '@/api/socket'
 import PhoneMissedIcon from '@mui/icons-material/PhoneMissed'
 
-const { Search } = Input
-
 const VideoCallScreen = () => {
   const {
     callAccepted,
     myVideo,
     userVideo,
     callEnded,
     leaveCall,
-    sendMsg: sendMsgFunc,
     chat,
     setChat,
     myVdoStatus,
@@ -31,8 +26,6 @@ const VideoCallScreen = () => {
   } = useContext(VideoContext)
 
   const [isScreenVisible, setIsScreenVisible] = useState(false)
-  const [sendMsg, setSendMsg] = useState('')
-  const [isModalVisible, setIsModalVisible] = useState(false)
   socket.on('msgRcv', ({ msg: value, sender }) => {
     const msg = { msg: value, type: 'rcv', sender, timestamp: Date.now() }
     setChat([...chat, msg])
@@ -44,15 +37,6 @@ const VideoCallScreen = () => {
     if (dummy?.current) dummy.current.scrollIntoView({ behavior: 'smooth' })
   }, [chat])
 
-  const showModal = (showVal: any) => {
-    setIsModalVisible(showVal)
-  }
-
-  const onSearch = (value: any) => {
-    if (value && value.length) sendMsgFunc(value)
-    setSendMsg('')
-  }
-
   useEffect(() => {
     if (callAccepted) {
       setIsScreenVisible(true)
@@ -115,57 +99,6 @@ const VideoCallScreen = () => {
             }}
           >
             <div className="iconsDiv">
-              {callAccepted && !callEnded && (
-                <div
-                  className="icons"
-                  onClick={() => {
-                    setIsModalVisible(!isModalVisible)
-                  }}
-                  tabIndex={0}
-                >
-                  <img src={Msg} alt="chat icon" />
-                </div>
-              )}
-              <Modal
-                title="Chat"
-                footer={null}
-                visible={isModalVisible}
-                onOk={() => showModal(false)}
-                onCancel={() => showModal(false)}
-                style={{ maxHeight: '100px' }}
-              >
-                {chat.length ? (
-                  <div className="msg_flex">
-                    {chat.map((msg) => (
-                      <div
-                        className={msg.type === 'sent' ? 'msg_sent' : 'msg_rcv'}
-                      >
-                        {msg.msg}
-                      </div>
-                    ))}
-                    <div ref={dummy} id="no_border"></div>
-                  </div>
-                ) : (
-                  <div className="chat_img_div">
-                    <img
-                      src={Msg_Illus}
-                      alt="msg_illus"
-                      className="img_illus"
-                    />
-                  </div>
-                )}
-                <Search
-                  placeholder="your message"
-                  allowClear
-                  className="input_msg"
-                  enterButton="Send 🚀"
-                  onChange={(e) => setSendMsg(e.target.value)}
-                  value={sendMsg}
-                  size="large"
-                  onSearch={onSearch}
-                />
-              </Modal>
-
               <div className="icons" onClick={() => updateVideo()} tabIndex={0}>
                 {myVdoStatus ? (
                   <img src={VideoIcon} alt="video on icon" />