Refactor SessionUsersPanel to improve drag-and-drop functionality with enhanced state management and animations. Update UserCamera and UserDevicesControls for consistent styling and layout adjustments. Modify NewSessionPage to import updated SessionUsersPanel component.

2025-10-21 17:14:50 +05:00
parent e8e781ae99
commit 0ce81e2e4f
6 changed files with 467 additions and 109 deletions
@@ -0,0 +1,57 @@
+import UserCamera from "./ui/UserCamera";
+import UserDevicesControls from "./ui/UserDevicesControls";
+import DraggableContainer from "./DraggableContainer";
+
+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 SessionUsersPanel2() {
+  return (
+    <DraggableContainer
+      enableSnapping={true}
+      autoAlign={true}
+      initialPosition={{ top: 20, left: 20 }}
+      padding={20}
+      className="flex gap-4"
+    >
+      {users.map((user) => (
+        <UserCamera
+          key={user.id}
+          onMute={() => console.log(`Mute user ${user.id}`)}
+          onVideoOff={() => console.log(`Video off user ${user.id}`)}
+          onCanControl={() => console.log(`Can control user ${user.id}`)}
+          {...user}
+        />
+      ))}
+
+      <UserDevicesControls />
+    </DraggableContainer>
+  );
+}
+
+export default SessionUsersPanel2;