Feat/calls

app/src/components/AppLayout.tsx

@@ -4,6 +4,10 @@ import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
 import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+import { useEffect, useState } from "react";
+import { useSocket } from "@hooks/useSocket";
+import { callStatusEmitter } from "@features/calls/context/callStatusEmitter";
+import CallLayout from "@features/calls/CallLayout";
 
 const StyledApp = styled.div<{
   $isChatOpen: boolean;
@@ -40,7 +44,17 @@ function AppLayout() {
   const { chatId } = useParams();
   const isChatOpen = !!chatId;
   const { isRightSideBarOpen } = useRightSideBarContext();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [callStatus, setCallStatus] = useState<
+    "inactive" | "active" | "calling" | "incoming" | "ended"
+  >("inactive");
 
+  useEffect(() => {
+    const handler = (status: typeof callStatus) => setCallStatus(status);
+    callStatusEmitter.on("update", handler);
+
+    return () => callStatusEmitter.off("update", handler);
+  }, []);
   return (
     <StyledApp
       $isChatOpen={isChatOpen}
@@ -50,6 +64,13 @@ function AppLayout() {
       <SideBar type="left" />
       <Main>
         <Outlet />
+        {callStatus != "inactive" && (
+          <CallLayout
+            isCollapsed={isCollapsed}
+            setIsCollapsed={setIsCollapsed}
+            callStatus={callStatus}
+          />
+        )}
       </Main>
       {isRightSideBarOpen && <SideBar type="right" />}
     </StyledApp>

app/src/components/side-bar/groups/AddMoreMembers.tsx

@@ -30,7 +30,6 @@ function AddMoreMembers() {
   const dispatch = useDispatch();
 
   if (isPending) return;
-  console.log(chatType);
 
   function handleClick() {
     addGroupMembers({

app/src/constants.ts

@@ -5,6 +5,9 @@ const {
   VITE_PORT: PORT,
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
+  TURN_URL,
+  VITE_TURN_USERNAME: TURN_USERNAME,
+  VITE_TURN_PASSWORD: TURN_PASSWORD
 } = import.meta.env;
 
 const MOBILE_VIEW = "(max-width: 800px)";
@@ -21,4 +24,7 @@ export {
   MOBILE_VIEW,
   DESKTOP_VIEW,
   MAX_STORY_SIZE,
+  TURN_URL,
+  TURN_USERNAME,
+  TURN_PASSWORD
 };

app/src/features/authentication/signup/hooks/useSignup.ts

@@ -6,19 +6,15 @@ export function useSignup() {
     mutate: signup,
     isSuccess,
     isPending,
-    isError,
+    isError
   } = useMutation({
-    mutationFn: Signup,
-
-    onSuccess: (email) => {
-      console.log(email);
-    },
+    mutationFn: Signup
   });
 
   return {
     signup,
     isPending,
     isSuccess,
-    isError,
+    isError
   };
 }

app/src/features/calls/CallLayout.tsx

@@ -7,6 +7,7 @@ import { useCallContext } from "./hooks/useCallContext";
 import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
+import { EnableSpeaker } from "./SpeakerEnable";
 
 const ModalContainer = styled.div`
   position: fixed;
@@ -193,21 +194,19 @@ const ActiveHeaderOpen = styled.div`
 type PropsType = {
   isCollapsed: boolean;
   setIsCollapsed: (arg0: boolean) => void;
-  chatId: string | undefined;
   callStatus: string | undefined;
 };
 
 export default function CallLayout({
   isCollapsed,
   setIsCollapsed,
-  chatId,
   callStatus
 }: PropsType) {
-  const { endCall } = useCallContext();
-  const { acceptCall } = useSocket();
+  const { acceptCall, finishCall } = useSocket();
+  const { endCall, chatId } = useCallContext();
   const chats = useAppSelector((state) => state.chats.chats);
   const chat = getChatByID({
-    chatID: chatId ?? "",
+    chatID: chatId.current ?? "",
     chats: chats
   });
 
@@ -249,16 +248,30 @@ export default function CallLayout({
                           <ButtonText>accept</ButtonText>
                         </ButtonContainer>
                       )}
-                      <ButtonContainer>
-                        <RoundButton
-                          onClick={() => endCall()}
-                          $bgColor="var(--color-error)"
-                          $bgColorHover="var(--color-error-shade)"
-                        >
-                          {getIcon("EndCall")}
-                        </RoundButton>
-                        <ButtonText>end call</ButtonText>
-                      </ButtonContainer>
+
+                      {callStatus === "incoming" ? (
+                        <ButtonContainer>
+                          <RoundButton
+                            onClick={() => endCall()}
+                            $bgColor="var(--color-error)"
+                            $bgColorHover="var(--color-error-shade)"
+                          >
+                            {getIcon("EndCall")}
+                          </RoundButton>
+                          <ButtonText>end call</ButtonText>
+                        </ButtonContainer>
+                      ) : (
+                        <ButtonContainer>
+                          <RoundButton
+                            onClick={() => finishCall()}
+                            $bgColor="var(--color-error)"
+                            $bgColorHover="var(--color-error-shade)"
+                          >
+                            {getIcon("EndCall")}
+                          </RoundButton>
+                          <ButtonText>end call</ButtonText>
+                        </ButtonContainer>
+                      )}
                     </ButtonsContainer>
                   </AvatarContainer>
                 </ModalContent>

app/src/features/calls/SpeakerEnable.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { useCallContext } from "./hooks/useCallContext";
+
+interface EnableSpeakerProps {
+  children?: React.ReactNode;
+}
+
+export const EnableSpeaker: React.FC<EnableSpeakerProps> = ({ children }) => {
+  const { clientId } = useCallContext();
+
+  useEffect(() => {
+    const playStreamsToSpeaker = () => {
+      if (!clientId?.current) {
+        console.warn("clientId is not available or has no current value.");
+        return;
+      }
+
+      clientId.current.forEach((clientData, clientIdKey) => {
+        if (!clientData || !clientData.connection) {
+          console.warn(`No connection found for client: ${clientIdKey}`);
+          return;
+        }
+
+        // Get all tracks from the remote connection
+        const receivers = clientData.connection.getReceivers();
+        const remoteStream = new MediaStream(
+          receivers.map((receiver) => receiver.track).filter(Boolean)
+        );
+
+        if (remoteStream && remoteStream.getTracks().length > 0) {
+          const audio = new Audio();
+          audio.srcObject = remoteStream;
+          audio.play().catch((err) => {
+            console.error(
+              `Failed to play audio for client: ${clientIdKey}`,
+              err
+            );
+          });
+          console.log(`Playing audio for client: ${clientIdKey}`);
+        }
+      });
+    };
+
+    playStreamsToSpeaker();
+  }, [clientId]);
+
+  return <div>{children}</div>;
+};