fix: disable the microphone after end the call

Author: ye231101

src/components/RoomScreen.js

@@ -34,9 +34,25 @@ function useMediaControls() {
     }
   }, [localParticipant, isMuted]);
 
+  const disableMic = useCallback(async () => {
+    if (isMuted || !localParticipant) {
+      setIsMuted(true);
+      return;
+    }
+
+    try {
+      await localParticipant.setMicrophoneEnabled(false);
+    } catch (err) {
+      console.error('Failed to disable microphone', err);
+    } finally {
+      setIsMuted(true);
+    }
+  }, [localParticipant, isMuted]);
+
   return {
     isMuted,
     enableMic,
+    disableMic,
   };
 }
 
@@ -81,28 +97,33 @@ function ParticipantTile({ participant }) {
 }
 
 function RoomContainer({ roomName, onLeave }) {
-  const { isMuted, enableMic } = useMediaControls();
+  const { isMuted, enableMic, disableMic } = useMediaControls();
 
   const hadRemoteParticipantRef = useRef(false);
 
   const remoteParticipants = useRemoteParticipants({
     updateOnlyOn: [RoomEvent.ParticipantConnected, RoomEvent.ParticipantDisconnected],
   });
 
+  const leaveRoom = useCallback(async () => {
+    await disableMic();
+    onLeave();
+  }, [disableMic, onLeave]);
+
   useEffect(() => {
     if (remoteParticipants.length > 0) {
       hadRemoteParticipantRef.current = true;
       return;
     }
 
     if (hadRemoteParticipantRef.current && remoteParticipants.length === 0) {
-      onLeave();
+      leaveRoom();
     }
-  }, [remoteParticipants.length, onLeave]);
+  }, [remoteParticipants.length, leaveRoom]);
 
   const handleClose = async (event) => {
     event.stopPropagation();
-    onLeave();
+    await leaveRoom();
 
     if (remoteParticipants.length === 0) {
       try {