update ui

src/pages/Room/Actions.jsx

@@ -25,23 +25,25 @@ import DeviceSelector from "../../components/controls/DeviceSelector";
 
 export default function Actions() {
   return (
-    <div className="btn-group p-5 flex gap-5 items-center justify-between">
+    <div className="btn-group bg-gray-900 shadow-3xl p-5 flex gap-5 items-center justify-between">
       <section className="flex gap-3 items-center text-black">
         <DeviceSelector />
       </section>
       <section className="flex gap-5 items-center justify-center">
-        <button className="record h-16 w-16 shadow-md rounded-full bg-indigo-500 grid place-content-center transition hover:scale-110">
+        <button className="record h-16 w-16 shadow-md      bg-gray-500  grid place-content-center transition hover:scale-110">
           <ArrowDownTrayIcon className="h-8 w-8" />
         </button>
-        <button className="stop h-16 w-16 shadow-md rounded-full bg-red-500 grid place-content-center transition hover:scale-110">
+        <button className="stop h-16 w-16 shadow-md    bg-gray-500    grid place-content-center transition hover:scale-110">
           <XMarkIcon className="h-8 w-8" />
         </button>
-        <button className="mute h-16 w-16 shadow-md rounded-full bg-gray-500 grid place-content-center transition hover:scale-110">
+        <button className="mute h-16 w-16 shadow-md   bg-gray-500 grid place-content-center transition hover:scale-110">
           <SpeakerXMarkIcon className="h-8 w-8" />
         </button>
       </section>
       <section>
-        <button className="exit">Exit</button>
+        <button className="exit h-16 px-8 rounded-md transition hover:bg-red-800 bg-red-500 text-white">
+          Hang Up
+        </button>
       </section>
     </div>
   );

src/pages/Room/Layout.jsx

@@ -5,6 +5,7 @@ import VideoWrapper from "./VideoWrapper";
 import VideoActions from "./Actions";
 import { initSocket } from "../../utils/socket";
 import { GlobalContext } from "../../App";
+import ParticipantsList from "./ParticipantsList";
 // import { initWebRtc } from "../peer.tools";
 // import { useDispatch, useSelector } from "react-redux";
 // import { setPeerConnection } from "../../store/index";
@@ -65,6 +66,7 @@ export default function Room() {
         <VideoWrapper />
         <VideoActions />
       </div>
+      <ParticipantsList />
       <Modal
         ref={dialogRef}
         show={!username.value}

src/pages/Room/ParticipantsList.jsx

@@ -0,0 +1,13 @@
+export default function ParticipantsList() {
+    const users = [
+        {id: 1, name: 'user1'}, 
+        {id: 2, name: 'user2'}, 
+    ]
+    return <div className="aboslute-list fixed top-1/3 min-w-24 right-8 bg-white border text-xs text-gray-500">
+        <h1 className="border-b p-2">当前在线成员</h1>
+        <ul className="p-2 flex flex-col gap-1">
+            {users.map(user => <li key={user.id} className="cursor-pointer hover:text-black">{user.name}</li>)}
+        </ul>
+    </div>
+
+}