Fix calls (#172)

* fix: call ended * fix: fix mute button --------- Co-authored-by: sarah kamal <[email protected]>
TelwareSW · Dec 22, 2024 · 80f46ad · 80f46ad
1 parent 904d9b9
commit 80f46ad
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 7 deletions.
diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
@@ -39,8 +39,6 @@ function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
     }
   }, [input]);
 
-  console.log(filteredMembers);
-
   return (
     <StyledMentionsInput>
       <MentionsInput

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
@@ -69,6 +69,7 @@ enum icons {
   Group,
   CallAccept,
   Mention,
+  UnMute
 }
 
 type iconStrings = keyof typeof icons;
@@ -446,6 +447,10 @@ const iconImports: Record<iconStrings, IconConfig> = {
   Mention:{
     importFn: () => import ("@mui/icons-material/AlternateEmail"),
   },
+  UnMute: {
+    importFn: () => import("@mui/icons-material/MicOff"),
+    defaultProps: { fontSize: "large" },
+  }
 };
 
 const iconCache = new Map<string, React.ReactElement>();

diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
@@ -8,6 +8,7 @@ import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
 import { EnableSpeaker } from "./SpeakerEnable";
+import { useState } from "react";
 
 const ModalContainer = styled.div`
   position: fixed;
@@ -203,12 +204,22 @@ export default function CallLayout({
   callStatus
 }: PropsType) {
   const { acceptCall, finishCall } = useSocket();
-  const { endCall, chatId } = useCallContext();
+  const { endCall, chatId, mute, unmute } = useCallContext();
+  const [isMuted, setIsMuted] = useState(false);
   const chats = useAppSelector((state) => state.chats.chats);
   const chat = getChatByID({
     chatID: chatId.current ?? "",
     chats: chats
   });
+  const toggleMute = () => {
+    if (isMuted) {
+      setIsMuted(false);
+      unmute();
+    } else {
+      setIsMuted(true);
+      mute();
+    }
+  };
 
   return (
     <>
@@ -233,7 +244,9 @@ export default function CallLayout({
                     </NameContainer>
                     <ButtonsContainer>
                       <ButtonContainer>
-                        <RoundButton>{getIcon("Mute")}</RoundButton>
+                        <RoundButton onClick={toggleMute}>
+                          {isMuted ? getIcon("UnMute") : getIcon("Mute")}
+                        </RoundButton>
                         <ButtonText>unmute</ButtonText>
                       </ButtonContainer>
                       {callStatus === "incoming" && (

diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
@@ -6,7 +6,6 @@ import { CallStatus } from "types/calls";
 import { TURN_USERNAME, TURN_PASSWORD } from "@constants";
 const Servers = {
   iceServers: [
-    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] },
     {
       urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"]
     },
@@ -134,6 +133,14 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
     [clearClientIds, removeClientId, setCallStatus]
   );
 
+  const mute = () => {
+    if (localStream.current)
+      localStream.current.getAudioTracks()[0].enabled = false;
+  };
+  const unmute = () => {
+    if (localStream.current)
+      localStream.current.getAudioTracks()[0].enabled = true;
+  };
   const acceptCall = useCallback(() => {
     if (callIdRef.current && chatIdRef.current) {
       if (
@@ -302,6 +309,8 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
     endCall,
     recieveICE,
     recieveAnswer,
+    mute,
+    unmute,
     getPeerConnection
   };
 

diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
@@ -28,8 +28,7 @@ function useChatInput() {
     setIsEmojiSelectorOpen(false);
   };
 
-  const handleSubmit = (e: Event, voiceNoteName = "") => {
-    console.log(voiceNoteName);
+  const handleSubmit = (e: Event) => {
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;

diff --git a/app/src/types/calls.ts b/app/src/types/calls.ts
@@ -15,6 +15,9 @@ export interface CallContextType {
   joinCall: (newCallId: string, newSenderId: string, newChatId: string) => void;
   endCall: (clientId: string | null) => void;
 
+  mute: () => void;
+  unmute: () => void;
+
   acceptCall: () => void;
   startPeerConnection: (
     clientId: string