Update environment configuration for production, refactor WebRTC components, and enhance chat functionality. Replace deprecated SessionUsersPanel with SessionPage, integrate chat history loading, and improve audio/video toggle handling. Remove unused SessionUsersPanel2 component and update related socket event handling in the server.

2025-10-27 16:49:52 +05:00
parent 95f7b90d38
commit 2378ed1ff4
20 changed files with 936 additions and 304 deletions
@@ -0,0 +1,94 @@
+import UserCamera from "./ui/UserCamera";
+import UserDevicesControls from "./ui/UserDevicesControls";
+import DraggableContainer from "./DraggableContainer";
+import { useWebRTC } from "../hooks/useWebRTC";
+import { useCallback } from "react";
+
+interface SessionUsersPanelProps {
+  roomId: string;
+  autoJoin?: boolean;
+}
+
+function SessionUsersPanel({
+  roomId,
+  autoJoin = false,
+}: SessionUsersPanelProps) {
+  const {
+    localStream,
+    participants,
+    isAudioMuted: isLocalAudioMuted,
+    isVideoMuted: isLocalVideoMuted,
+    toggleAudio,
+    toggleVideo,
+    updateSpeakingState,
+  } = useWebRTC(roomId, autoJoin);
+
+  const hasLocalStream = localStream !== null;
+
+  // Callback для отправки состояния speaking
+  const handleSpeakingChange = useCallback((isSpeaking: boolean) => {
+    updateSpeakingState?.(isSpeaking);
+  }, [updateSpeakingState]);
+
+  return (
+    <DraggableContainer
+      enableSnapping={true}
+      autoAlign={true}
+      initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
+      padding="1.111vw"
+      className="flex gap-4 z-[999]"
+    >
+      {/* Локальная камера пользователя - показываем только если есть разрешение */}
+      {localStream && (
+        <UserCamera
+          name="Вы"
+          isMuted={isLocalAudioMuted}
+          isVideoOff={isLocalVideoMuted}
+          isControlDisabled={false}
+          isAdmin={true}
+          isLocal={true}
+          mediaStream={localStream}
+          onMute={toggleAudio}
+          onVideoOff={toggleVideo}
+          onCanControl={() => console.log("Toggle control")}
+          onSpeakingChange={handleSpeakingChange}
+        />
+      )}
+
+      {/* Камеры удаленных участников - показываем только если есть поток с активными треками */}
+      {participants
+        .filter(
+          (participant) =>
+            participant.stream != null &&
+            participant.stream.getTracks().length > 0
+        )
+        .map((participant) => (
+          <UserCamera
+            key={participant.id}
+            name={participant.id}
+            isMuted={participant.isMuted || false}
+            isVideoOff={participant.isVideoOff || false}
+            isSpeaking={participant.isSpeaking}
+            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
+        toggleAudio={toggleAudio}
+        toggleVideo={toggleVideo}
+        isAudioMuted={isLocalAudioMuted}
+        isVideoMuted={isLocalVideoMuted}
+        hasLocalStream={hasLocalStream}
+      />
+    </DraggableContainer>
+  );
+}
+
+export default SessionUsersPanel;