upd

src/components/ToggleMic.tsx

@@ -8,7 +8,7 @@ import MicroOffIcon from "./icons/MicroOffIcon";
 
 function ToggleMic({ socket, handleUpdate }: any) {
   const room = useRoomContext();
-  const [muted, setMuted] = useState(false);
+  const [muted, setMuted] = useState(true);
 
   function toggleMic(value: boolean) {
     const audioTrack = room.localParticipant.getTrack(Track.Source.Microphone);
@@ -45,6 +45,10 @@ function ToggleMic({ socket, handleUpdate }: any) {
     room.on(RoomEvent.TrackUnmuted, (_, participant) => {
       console.log(participant);
     });
+
+    room.on("localTrackPublished", () => {
+      room.localParticipant.getTrack(Track.Source.Microphone)?.mute();
+    });
   }, []);
 
   return (

src/components/modals/UsersManagementModal.tsx

@@ -29,15 +29,15 @@ function UsersManagementModal({
   const [users] = useStreamUserStore((state) => [state.users]);
 
   return (
-    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px] flex flex-col gap-2">
+    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[360px] flex flex-col gap-2">
       <div className="flex flex-col lg:gap-8 gap-4">
         <p className="font-gilroy lg:text-2xl">
           <Trans i18nKey={"members"}>Участники</Trans>
         </p>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           {users.map((user: any, index: number) => (
             <div key={index} className="relative">
-              <div className="flex items-center gap-2 text-white">
+              <div className="flex items-center gap-4 text-white">
                 <div className="relative flex flex-col">
                   {user.admin ? <AdminUserIcon /> : <UserIcon />}
                 </div>
@@ -77,19 +77,19 @@ function UsersManagementModal({
                     )}
 
                     {!user.muted ? (
-                      <p
+                      <button
                         onClick={() => handleUpdate(user.id, { muted: true })}
                         className="outline-none"
                       >
                         <MicroOnIcon />
-                      </p>
+                      </button>
                     ) : (
-                      <p
+                      <button
                         onClick={() => handleUpdate(user.id, { muted: false })}
                         className="outline-none"
                       >
                         <MicroOffIcon />
-                      </p>
+                      </button>
                     )}
                   </>
                 )}