Update environment configuration for local development, add new dependencies for WebRTC functionality, and refactor user session management components. Remove deprecated SessionUsersPanel and enhance SessionUsersPanel2 with improved user handling and controls. Integrate socket.io for real-time communication in the server.

client/src/components/SessionUsersPanel2.tsx

@@ -1,36 +1,28 @@
 import UserCamera from "./ui/UserCamera";
 import UserDevicesControls from "./ui/UserDevicesControls";
 import DraggableContainer from "./DraggableContainer";
+import { useWebRTC } from "../hooks/useWebRTC";
 
-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,
-  },
-];
+interface SessionUsersPanel2Props {
+  roomId: string;
+  autoJoin?: boolean;
+}
+
+function SessionUsersPanel2({
+  roomId,
+  autoJoin = false,
+}: SessionUsersPanel2Props) {
+  const {
+    localStream,
+    participants,
+    isAudioMuted: isLocalAudioMuted,
+    isVideoMuted: isLocalVideoMuted,
+    toggleAudio,
+    toggleVideo,
+  } = useWebRTC(roomId, autoJoin);
+
+  const hasLocalStream = localStream !== null;
 
-function SessionUsersPanel2() {
   return (
     <DraggableContainer
       enableSnapping={true}
@@ -39,17 +31,45 @@ function SessionUsersPanel2() {
       padding="1.111vw"
       className="flex gap-4 z-[999]"
     >
-      {users.map((user) => (
+      {/* Локальная камера пользователя */}
+      <UserCamera
+        name="Вы"
+        isSpeaking={false}
+        isMuted={isLocalAudioMuted}
+        isVideoOff={isLocalVideoMuted}
+        isControlDisabled={false}
+        isAdmin={true}
+        isLocal={true}
+        mediaStream={localStream}
+        onMute={toggleAudio}
+        onVideoOff={toggleVideo}
+        onCanControl={() => console.log("Toggle control")}
+      />
+
+      {/* Камеры удаленных участников */}
+      {participants.map((participant) => (
         <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}
+          key={participant.id}
+          name={participant.id}
+          isSpeaking={false}
+          isMuted={false}
+          isVideoOff={false}
+          isControlDisabled={true}
+          isAdmin={true} // Локальный пользователь - админ своей сессии
+          mediaStream={participant.stream}
+          onMute={() => console.log(`Mute user ${participant.id}`)}
+          onVideoOff={() => console.log(`Video off user ${participant.id}`)}
+          onCanControl={() => console.log(`Can control user ${participant.id}`)}
         />
       ))}
 
-      <UserDevicesControls />
+      <UserDevicesControls
+        toggleAudio={toggleAudio}
+        toggleVideo={toggleVideo}
+        isAudioMuted={isLocalAudioMuted}
+        isVideoMuted={isLocalVideoMuted}
+        hasLocalStream={hasLocalStream}
+      />
     </DraggableContainer>
   );
 }