From bab17fa7b7bdfbe42c5cf23e6703d543f8a4a138 Mon Sep 17 00:00:00 2001
From: heyhiru <hirentimbadiya74@gmail.com>
Date: Sun, 12 Nov 2023 18:58:40 +0530
Subject: [PATCH] implemented mute and play/hold logic

Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>
---
 client/src/pages/room/[slug].jsx | 48 ++++++++++++++++++++++++++------
 client/src/service/peer.js       | 10 +++++++
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/room/[slug].jsx b/client/src/pages/room/[slug].jsx
index 39d39e3..e3e1735 100644
--- a/client/src/pages/room/[slug].jsx
+++ b/client/src/pages/room/[slug].jsx
@@ -6,17 +6,19 @@ import peer from '@/service/peer';
 const RoomPage = () => {
     const socket = useSocket();
     const [remoteSocketId, setRemoteSocketId] = useState(null);
-    const [myStream, setMyStream] = useState(null)
-    const [remoteStream, setRemoteStream] = useState(null)
+    const [myStream, setMyStream] = useState(null);
+    const [remoteStream, setRemoteStream] = useState(null);
+    const [isAudioMute, setIsAudioMute] = useState(false);
+    const [isVideoOnHold, setIsVideoOnHold] = useState(false);
 
     const handleUserJoined = useCallback(({ email, id }) => {
-        console.log(`Email ${email} joined the room!`);
+        //! console.log(`Email ${email} joined the room!`);
         setRemoteSocketId(id);
     }, []);
 
     const handleIncomingCall = useCallback(async ({ from, offer }) => {
         setRemoteSocketId(from);
-        // console.log(`incoming call from ${from} with offer ${offer}`);
+        //! console.log(`incoming call from ${from} with offer ${offer}`);
         const stream = await navigator.mediaDevices.getUserMedia({
             audio: true,
             video: true
@@ -35,7 +37,7 @@ const RoomPage = () => {
 
     const handleCallAccepted = useCallback(({ from, ans }) => {
         peer.setLocalDescription(ans);
-        // console.log("Call Accepted");
+        //! console.log("Call Accepted");
 
         sendStreams();
     }, [sendStreams]);
@@ -87,7 +89,8 @@ const RoomPage = () => {
             socket.off("peer:nego:final", handleNegoFinal);
         };
     },
-        [socket,
+        [
+            socket,
             handleUserJoined,
             handleIncomingCall,
             handleCallAccepted,
@@ -101,19 +104,40 @@ const RoomPage = () => {
             video: true
         });
 
+        if (isAudioMute) {
+            const audioTracks = stream.getAudioTracks();
+            audioTracks.forEach(track => track.enabled = false);
+        }
+
+        const videoTracks = stream.getVideoTracks();
+        if (isVideoOnHold) {
+            videoTracks.forEach(track => track.enabled = false);
+        }
+
         //! create offer
         const offer = await peer.getOffer();
         //* send offer to remote user
         socket.emit("user:call", { to: remoteSocketId, offer })
         // set my stream
         setMyStream(stream);
-    }, [remoteSocketId, socket]);
+    }, [remoteSocketId, socket, isAudioMute, isVideoOnHold]);
+
+
+    const handleToggleAudio = () => {
+        peer.toggleAudio();
+        setIsAudioMute(!isAudioMute);
+    };
+
+    const handleToggleVideo = () => {
+        peer.toggleVideo();
+        setIsVideoOnHold(!isVideoOnHold);
+    }
 
     return (
         <div className='flex flex-col items-center justify-center'>
             <h1 className='font-bold text-7xl md:text-5xl p-3'>RoomPage</h1>
             <h4 className='font-bold text-4xl md:text-xl p-3 mb-4'>{remoteSocketId ? "Connected" : "No One In Room"}</h4>
-            {myStream &&
+            {(myStream || remoteStream) &&
                 <button className='callButton' onClick={sendStreams}>
                     Send Stream
                 </button>
@@ -133,10 +157,16 @@ const RoomPage = () => {
                         <ReactPlayer
                             url={myStream}
                             playing
-                            muted
+                            muted={isAudioMute}
                             height={300}
                             width={500}
                         />
+                        <button className='joinButton' onClick={handleToggleAudio}>
+                            {isAudioMute ? "Unmute" : "Mute"}
+                        </button>
+                        <button className='joinButton' onClick={handleToggleVideo}>
+                            {isVideoOnHold ? "Resume Video" : "Hold Video"}
+                        </button>
                     </div>
                 }
                 {
diff --git a/client/src/service/peer.js b/client/src/service/peer.js
index 5b83578..17ba904 100644
--- a/client/src/service/peer.js
+++ b/client/src/service/peer.js
@@ -34,6 +34,16 @@ class PeerService {
             return offer;
         }
     }
+
+    toggleAudio = () => {
+        const audioTracks = this.peer.getSenders().find(sender => sender.track.kind === 'audio').track;
+        audioTracks.enabled = !audioTracks.enabled;
+    };
+
+    toggleVideo = () => {
+        const videoTracks = this.peer.getSenders().find(sender => sender.track.kind === 'video').track;
+        videoTracks.enabled = !videoTracks.enabled;
+    };
 }
 
 export default new PeerService();
\ No newline at end of file