Improved the incoming call flow

PezhmanGhavami · Jun 11, 2023 · 7360016 · 7360016
1 parent 11f13c3
commit 7360016
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/client/src/context/call.context.tsx b/client/src/context/call.context.tsx
@@ -34,6 +34,7 @@ interface ICallContext {
   localCameraEnabled: boolean;
   localMicrophoneEnabled: boolean;
   callStarted: boolean;
+  isConnecting: boolean;
   isRecivingCall: boolean;
   isCallInitiator: boolean;
   endCall: () => void;
@@ -49,6 +50,7 @@ const callContextInit: ICallContext = {
   localCameraEnabled: true,
   localMicrophoneEnabled: true,
   callStarted: false,
+  isConnecting: false,
   isRecivingCall: false,
   isCallInitiator: false,
   remoteUser: { displayName: "", id: "", stream: null, signalData: null },
@@ -66,6 +68,9 @@ const CallProvider = ({ children }: { children: ReactNode }) => {
   const [remoteUser, setRemoteUser] = useState({
     ...callContextInit.remoteUser,
   });
+  const [isConnecting, setIsConnecting] = useState(
+    callContextInit.isConnecting,
+  );
   const [isRecivingCall, setIsRecivingCall] = useState(
     callContextInit.isRecivingCall,
   );
@@ -190,6 +195,7 @@ const CallProvider = ({ children }: { children: ReactNode }) => {
 
   const answerCall = async () => {
     console.log("answering call...");
+    setIsConnecting(true);
 
     const newPeer = new Peer({
       initiator: false,
@@ -216,6 +222,7 @@ const CallProvider = ({ children }: { children: ReactNode }) => {
     newPeer.on("connect", () => {
       console.log("connected.");
       setCallStarted(true);
+      setIsConnecting(false);
     });
 
     newPeer.on("error", (error) => {
@@ -230,6 +237,7 @@ const CallProvider = ({ children }: { children: ReactNode }) => {
     peer?.destroy();
     setPeer(null);
     setCallStarted(false);
+    setIsConnecting(false);
     setIsRecivingCall(false);
     setIsCallInitiator(false);
     setRemoteUser({ ...callContextInit.remoteUser });
@@ -278,6 +286,7 @@ const CallProvider = ({ children }: { children: ReactNode }) => {
     localCameraEnabled,
     localMicrophoneEnabled,
     callStarted,
+    isConnecting,
     isRecivingCall,
     isCallInitiator,
     endCall,

diff --git a/client/src/pages/call/call.page.tsx b/client/src/pages/call/call.page.tsx
@@ -72,6 +72,7 @@ function CallStarted() {
 
   const {
     localStream,
+    isConnecting,
     localCameraEnabled,
     localMicrophoneEnabled,
     remoteUser,
@@ -111,7 +112,11 @@ function CallStarted() {
         {callStarted ? (
           <p>{remoteUser.displayName}</p>
         ) : (
-          <p>Calling {remoteUser.displayName}...</p>
+          <p>
+            {`${isConnecting ? "Connecting to" : "Calling"} ${
+              remoteUser.displayName
+            }...`}
+          </p>
         )}
       </div>
 
@@ -181,12 +186,18 @@ function CallStarted() {
 }
 
 function IncomingCall() {
-  const { localStream, callStarted, remoteUser, endCall, answerCall } =
-    useContext(CallContext);
+  const {
+    isConnecting,
+    localStream,
+    callStarted,
+    remoteUser,
+    endCall,
+    answerCall,
+  } = useContext(CallContext);
 
   useEffect(() => {
     const timeout = setTimeout(() => {
-      if (!callStarted) {
+      if (!callStarted && !isConnecting) {
         endCall();
       }
     }, 60 * 1000);
@@ -221,7 +232,7 @@ function IncomingCall() {
 }
 
 function Call() {
-  const { isCallInitiator, isRecivingCall, callStarted } =
+  const { isConnecting, isCallInitiator, isRecivingCall, callStarted } =
     useContext(CallContext);
 
   const navigate = useNavigate();
@@ -232,7 +243,7 @@ function Call() {
     }
   }, [isCallInitiator, isRecivingCall, callStarted]);
 
-  if (isRecivingCall && !callStarted) {
+  if (isRecivingCall && !callStarted && !isConnecting) {
     return <IncomingCall />;
   }