Users Cameras; Devices controls;

2025-10-15 17:06:05 +05:00
parent 728d727cd1
commit 2ade35a8ed
6 changed files with 276 additions and 7 deletions
@@ -0,0 +1,59 @@
+import UserCamera from "./ui/UserCamera";
+import UserDevicesControls from "./ui/UserDevicesControls";
+
+export default function SessionUsersPanel() {
+  const users = [
+    {
+      id: 1,
+      name: "John Doe",
+      isSpeaking: true,
+      isMuted: false,
+      isVideoOff: false,
+      isControlDisabled: false,
+      isAdmin: true,
+    },
+    {
+      id: 2,
+      name: "Jane Doe",
+      isSpeaking: false,
+      isMuted: true,
+      isVideoOff: true,
+      isControlDisabled: true,
+    },
+    {
+      id: 3,
+      name: "Jim Doe",
+      isSpeaking: false,
+      isMuted: false,
+      isVideoOff: false,
+      isControlDisabled: false,
+    },
+  ];
+
+  function handleMute(id: number) {
+    console.log(`Mute user ${id}`);
+  }
+  function handleVideoOff(id: number) {
+    console.log(`Video off user ${id}`);
+  }
+  function handleCanControl(id: number) {
+    console.log(`Can control user ${id}`);
+  }
+
+  return (
+    <div className="flex gap-4 items-end">
+      <div className="flex gap-4 w-max items-end">
+        {users.map((user) => (
+          <UserCamera
+            key={user.id}
+            onMute={() => handleMute(user.id)}
+            onVideoOff={() => handleVideoOff(user.id)}
+            onCanControl={() => handleCanControl(user.id)}
+            {...user}
+          />
+        ))}
+      </div>
+      <UserDevicesControls />
+    </div>
+  );
+}