diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx index 74beb98e..c49ea04b 100644 --- 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 ( = { Mention:{ importFn: () => import ("@mui/icons-material/AlternateEmail"), }, + UnMute: { + importFn: () => import("@mui/icons-material/MicOff"), + defaultProps: { fontSize: "large" }, + } }; const iconCache = new Map(); diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx index 760c0b63..c36dc049 100644 --- 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({ - {getIcon("Mute")} + + {isMuted ? getIcon("UnMute") : getIcon("Mute")} + unmute {callStatus === "incoming" && ( diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx index 25d6ba71..b0a829d2 100644 --- 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 index b52e8f69..3cec2f65 100644 --- 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 index b5f96fab..36758e03 100644 --- 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