Refactor SessionUsersPanel to optimize performance with useMemo for active cameras count, grid columns, grid rows, and active participants filtering. Update useWebRTC to prevent unnecessary state updates for participant stream, audio, video, and speaking state changes. Clean up SessionPage layout for consistency.

client/src/hooks/useWebRTC.ts

@@ -19,14 +19,6 @@ export const useWebRTC = (roomId?: string, autoJoin = false) => {
   const [isConnected, setIsConnected] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
 
-  // Мониторинг изменений участников
-  useEffect(() => {
-    console.log("[useWebRTC] Participants state updated:", participants.map(p => ({
-      id: p.id,
-      hasStream: !!p.stream,
-    })));
-  }, [participants]);
-
   useEffect(() => {
     // Создаем сервис только один раз (синглтон)
     if (!webrtcServiceInstance) {
@@ -71,6 +63,11 @@ export const useWebRTC = (roomId?: string, autoJoin = false) => {
         setParticipants((prev) => {
           const existing = prev.find((p) => p.id === participantId);
           if (existing) {
+            // Если поток уже тот же самый, не обновляем
+            if (existing.stream === stream) {
+              console.log("[useWebRTC] Stream already set for:", participantId);
+              return prev;
+            }
             console.log("[useWebRTC] Updating stream for existing participant:", participantId);
             return prev.map((p) =>
               p.id === participantId ? { ...p, stream } : p
@@ -100,26 +97,43 @@ export const useWebRTC = (roomId?: string, autoJoin = false) => {
       },
       onParticipantAudioToggle: (participantId, isEnabled) => {
         console.log(`[useWebRTC] Audio toggle for ${participantId}: ${isEnabled}`);
-        setParticipants((prev) =>
-          prev.map((p) =>
-            p.id === participantId ? { ...p, isMuted: !isEnabled } : p
-          )
-        );
+        setParticipants((prev) => {
+          const participant = prev.find((p) => p.id === participantId);
+          const newMutedState = !isEnabled;
+          // Только обновляем, если значение действительно изменилось
+          if (participant && participant.isMuted === newMutedState) {
+            return prev;
+          }
+          return prev.map((p) =>
+            p.id === participantId ? { ...p, isMuted: newMutedState } : p
+          );
+        });
       },
       onParticipantVideoToggle: (participantId, isEnabled) => {
         console.log(`[useWebRTC] Video toggle for ${participantId}: ${isEnabled}`);
-        setParticipants((prev) =>
-          prev.map((p) =>
-            p.id === participantId ? { ...p, isVideoOff: !isEnabled } : p
-          )
-        );
+        setParticipants((prev) => {
+          const participant = prev.find((p) => p.id === participantId);
+          const newVideoOffState = !isEnabled;
+          // Только обновляем, если значение действительно изменилось
+          if (participant && participant.isVideoOff === newVideoOffState) {
+            return prev;
+          }
+          return prev.map((p) =>
+            p.id === participantId ? { ...p, isVideoOff: newVideoOffState } : p
+          );
+        });
       },
       onParticipantSpeakingChange: (participantId, isSpeaking) => {
-        setParticipants((prev) =>
-          prev.map((p) =>
+        setParticipants((prev) => {
+          const participant = prev.find((p) => p.id === participantId);
+          // Только обновляем, если значение действительно изменилось
+          if (participant && participant.isSpeaking === isSpeaking) {
+            return prev;
+          }
+          return prev.map((p) =>
             p.id === participantId ? { ...p, isSpeaking } : p
-          )
-        );
+          );
+        });
       },
       onChatMessage: (message) => {
         console.log("[useWebRTC] onChatMessage called:", message);