From 7cafc36fbeb560cb29b16dd49c998bad92c4dadf Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 31 Oct 2025 14:05:42 +0500
Subject: [PATCH] Refactor SessionUsersPanel to display multiple local cameras
 based on a defined count, enhance grid column calculations for better
 responsiveness, and update UserCamera component styling. Adjust
 ControlsPopover z-index for improved visibility and clean up SessionPage
 layout for consistency.

---
 client/src/components/SessionUsersPanel.tsx  | 60 ++++++++++++--------
 client/src/components/ui/ControlsPopover.tsx |  2 +-
 client/src/components/ui/UserCamera.tsx      |  2 +-
 client/src/pages/SessionPage.tsx             |  7 +--
 4 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/client/src/components/SessionUsersPanel.tsx b/client/src/components/SessionUsersPanel.tsx
index d8bc6cc..fb556b2 100644
--- a/client/src/components/SessionUsersPanel.tsx
+++ b/client/src/components/SessionUsersPanel.tsx
@@ -5,6 +5,8 @@ import { useWebRTC } from "../hooks/useWebRTC";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 
+const LOCAL_CAMERAS_COUNT = 10;
+
 interface SessionUsersPanelProps {
   roomId: string;
   autoJoin?: boolean;
@@ -114,7 +116,7 @@ function SessionUsersPanel({
 
   // Вычисляем количество камер для grid
   const activeCamerasCount =
-    (localStream ? 1 : 0) +
+    (localStream ? LOCAL_CAMERAS_COUNT : 0) +
     participants.filter(
       (p) => p.stream != null && p.stream.getTracks().length > 0
     ).length;
@@ -129,7 +131,7 @@ function SessionUsersPanel({
 
   const getMobilePortraitGridColumns = (count: number): number => {
     if (count <= 3) return 1;
-    if (count <= 8) return 2;
+    if (count <= 12) return 2;
     return 3;
   };
 
@@ -159,29 +161,35 @@ function SessionUsersPanel({
         "z-[999] 2xl:gap-[0.556vw] gap-2",
         mode === "full"
           ? "flex"
-          : `2xl:p-[5vw] p-4 w-full 2xl:h-dvh max-2xl:portrait:h-[calc(100dvh-17.778vw)] max-2xl:landscape:h-[calc(100dvh-8.75vw)] grid grid-cols-${gridColumns}`
+          : `2xl:p-[5vw] p-4 w-full 2xl:h-dvh max-2xl:portrait:max-h-[calc(100dvh-17.778vw)] max-2xl:landscape:max-h-[calc(100dvh-8.75vw)] grid grid-cols-${gridColumns}`
       )}
     >
-      {localStream && (
-        <UserCamera
-          mode={mode}
-          name="Вы"
-          isMuted={isLocalAudioMuted}
-          isVideoOff={isLocalVideoMuted}
-          isControlDisabled={false}
-          isAdmin={true}
-          isLocal={true}
-          mediaStream={localStream}
-          onMute={toggleAudio}
-          onVideoOff={toggleVideo}
-          onCanControl={() => console.log("Toggle control")}
-          onSpeakingChange={handleSpeakingChange}
-          className={clsx(
-            mode === "mini" &&
-              (activeCamerasCount <= 2 ? "2xl:m-auto" : "w-full")
-          )}
-        />
-      )}
+      {localStream &&
+        Array.from({ length: LOCAL_CAMERAS_COUNT }).map((_, index) => (
+          <UserCamera
+            key={index}
+            mode={mode}
+            name="Вы"
+            isMuted={isLocalAudioMuted}
+            isVideoOff={isLocalVideoMuted}
+            isControlDisabled={false}
+            isAdmin={true}
+            isLocal={true}
+            mediaStream={localStream}
+            onMute={toggleAudio}
+            onVideoOff={toggleVideo}
+            onCanControl={() => console.log("Toggle control")}
+            onSpeakingChange={handleSpeakingChange}
+            className={clsx(
+              mode === "mini" &&
+                (activeCamerasCount <= 2
+                  ? "m-auto"
+                  : activeCamerasCount > 12
+                  ? "!aspect-square w-full"
+                  : "w-full")
+            )}
+          />
+        ))}
 
       {/* Камеры удаленных участников - показываем только если есть поток с активными треками */}
       {participants
@@ -194,7 +202,11 @@ function SessionUsersPanel({
           <UserCamera
             className={clsx(
               mode === "mini" &&
-                (activeCamerasCount <= 2 ? "2xl:m-auto" : "w-full")
+                (activeCamerasCount <= 2
+                  ? "m-auto"
+                  : activeCamerasCount > 12
+                  ? "!aspect-square w-full"
+                  : "w-full")
             )}
             key={participant.id}
             mode={mode}
diff --git a/client/src/components/ui/ControlsPopover.tsx b/client/src/components/ui/ControlsPopover.tsx
index c5c4bf7..df68eca 100644
--- a/client/src/components/ui/ControlsPopover.tsx
+++ b/client/src/components/ui/ControlsPopover.tsx
@@ -56,7 +56,7 @@ function ControlsPopover({ session }: ControlsPopoverProps) {
   }
 
   return (
-    <div className="order-3 2xl:hidden" ref={ref}>
+    <div className="order-3 2xl:hidden z-[9999]" ref={ref}>
       <FloatingActionButton
         ref={buttonRef}
         className={clsx(isOpened && "!bg-[#7B60F3]")}
diff --git a/client/src/components/ui/UserCamera.tsx b/client/src/components/ui/UserCamera.tsx
index 8d98da6..6ec25e1 100644
--- a/client/src/components/ui/UserCamera.tsx
+++ b/client/src/components/ui/UserCamera.tsx
@@ -280,7 +280,7 @@ export default function UserCamera({
       className={clsx(
         mode === "full"
           ? "aspect-square h-fit group 2xl:rounded-[1.667vw] rounded-2xl relative flex-shrink-0 pointer-events-auto 2xl:hover:w-[10.833vw] 2xl:w-[6.944vw] sm:w-[15.625vw] w-[27.778vw] overflow-hidden"
-          : "aspect-video 2xl:rounded-[2.222vw] rounded-[32px] overflow-hidden group relative pointer-events-auto max-w-full h-full object-cover",
+          : "aspect-video 2xl:rounded-[2.222vw] rounded-[32px] overflow-hidden group relative pointer-events-auto max-w-full h-full self-center object-cover",
         isLocal && "order-last",
         isVideoOff ? "bg-green-500" : "bg-yellow-500/10",
         className
diff --git a/client/src/pages/SessionPage.tsx b/client/src/pages/SessionPage.tsx
index 22f8e4c..a6664b6 100644
--- a/client/src/pages/SessionPage.tsx
+++ b/client/src/pages/SessionPage.tsx
@@ -93,7 +93,7 @@ function SessionPage() {
     setPopup(<SharePopup link={`${window.location.origin}/sessions/${id}`} />);
   }
 
-  const [mode, setMode] = useState<"full" | "mini">("full");
+  const [mode, setMode] = useState<"full" | "mini">("mini");
 
   function toggleMode() {
     setMode(mode === "full" ? "mini" : "full");
@@ -155,8 +155,7 @@ function SessionPage() {
   return (
     <div
       className={clsx(
-        // "flex overflow-hidden relative order-3 w-screen h-dvh bg-black touch-none"
-        "overflow-hidden relative order-3 w-screen h-dvh bg-black touch-none",
+        "overflow-hidden relative order-3 w-screen h-dvh bg-black touch-none max-2xl:flex max-2xl:portrait:items-center",
         mode === "full" && "flex"
       )}
     >
@@ -200,7 +199,7 @@ function SessionPage() {
         </div>
       )}
 
-      <ActionsSidebarWrapper className="z-[99]">
+      <ActionsSidebarWrapper className="z-[9999]">
         <FloatingActionButton onClick={toggleMode}>
           <div className="2xl:size-[1.111vw] size-4 text-white">
             {mode === "mini" ? <FullscreenExitIcon /> : <FullscreenIcon />}