Refactor DraggableContainer to render children without additional div when disabled, and enhance SessionUsersPanel layout by restoring className for better styling. Clean up SessionPage structure for improved readability.

2025-10-31 16:21:16 +05:00
parent f88e4a80c0
commit 590686247b
3 changed files with 85 additions and 99 deletions
@@ -157,108 +157,93 @@ function SessionUsersPanel({
        windowDimensions.width >= 640 ? "bottom-right" : "top-right"
      }
      padding="1.111vw"
-      className={clsx(
-        "z-[100] 2xl:gap-[0.556vw] gap-2",
-        mode === "mini"
-          ? "flex"
-          : `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} relative bg-black`
-      )}
+      // className={clsx(
+      //   "z-[100] 2xl:gap-[0.556vw] gap-2",
+      //   mode === "mini"
+      //     ? "flex"
+      //     : `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} relative bg-black`
+      // )}
    >
-      {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 === "full" && activeCamerasCount <= 2
-                ? "m-auto"
-                : activeCamerasCount > 12
-                ? "!aspect-square w-full"
-                : "w-full"
-            )}
-          />
-        ))}
-
-      {/* Камеры удаленных участников - показываем только если есть поток с активными треками */}
-      {participants
-        .filter(
-          (participant) =>
-            participant.stream != null &&
-            participant.stream.getTracks().length > 0
-        )
-        .map((participant) => (
-          <UserCamera
-            className={clsx(
-              mode === "full" &&
-                (activeCamerasCount <= 2
+      <div
+        className={clsx(
+          "z-[100] 2xl:gap-[0.556vw] gap-2",
+          mode === "mini"
+            ? "flex"
+            : `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} relative bg-black`
+        )}
+      >
+        {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 === "full" && activeCamerasCount <= 2
                  ? "m-auto"
                  : activeCamerasCount > 12
                  ? "!aspect-square w-full"
-                  : "w-full")
-            )}
-            key={participant.id}
-            mode={mode}
-            name={participant.id}
-            isMuted={participant.isMuted || false}
-            isVideoOff={participant.isVideoOff || false}
-            isSpeaking={participant.isSpeaking}
-            isControlDisabled={true}
-            isAdmin={true}
-            mediaStream={participant.stream}
-            hasLocalMediaPermission={hasLocalStream}
-            onMute={() => console.log(`Mute user ${participant.id}`)}
-            onVideoOff={() => console.log(`Video off user ${participant.id}`)}
-            onCanControl={() =>
-              console.log(`Can control user ${participant.id}`)
-            }
-          />
-        ))}
+                  : "w-full"
+              )}
+            />
+          ))}

-      <UserDevicesControls
-        mode={mode}
-        toggleAudio={toggleAudio}
-        toggleVideo={toggleVideo}
-        isAudioMuted={isLocalAudioMuted}
-        isVideoMuted={isLocalVideoMuted}
-        hasLocalStream={hasLocalStream}
-      />
+        {/* Камеры удаленных участников - показываем только если есть поток с активными треками */}
+        {participants
+          .filter(
+            (participant) =>
+              participant.stream != null &&
+              participant.stream.getTracks().length > 0
+          )
+          .map((participant) => (
+            <UserCamera
+              className={clsx(
+                mode === "full" &&
+                  (activeCamerasCount <= 2
+                    ? "m-auto"
+                    : activeCamerasCount > 12
+                    ? "!aspect-square w-full"
+                    : "w-full")
+              )}
+              key={participant.id}
+              mode={mode}
+              name={participant.id}
+              isMuted={participant.isMuted || false}
+              isVideoOff={participant.isVideoOff || false}
+              isSpeaking={participant.isSpeaking}
+              isControlDisabled={true}
+              isAdmin={true}
+              mediaStream={participant.stream}
+              hasLocalMediaPermission={hasLocalStream}
+              onMute={() => console.log(`Mute user ${participant.id}`)}
+              onVideoOff={() => console.log(`Video off user ${participant.id}`)}
+              onCanControl={() =>
+                console.log(`Can control user ${participant.id}`)
+              }
+            />
+          ))}
+
+        <UserDevicesControls
+          mode={mode}
+          toggleAudio={toggleAudio}
+          toggleVideo={toggleVideo}
+          isAudioMuted={isLocalAudioMuted}
+          isVideoMuted={isLocalVideoMuted}
+          hasLocalStream={hasLocalStream}
+        />
+      </div>
    </DraggableContainer>
  );
-  // }
-
-  // Для режима mini используем flex-обертку для центрирования и внутри grid
-  // return (
-  //   <div className="flex justify-center items-center w-full h-full z-[99]a">
-  //     <div
-  //       className={clsx(
-  //         "grid 2xl:gap-[0.556vw] gap-2",
-  //         gridColumns === 1 && "grid-cols-1 2xl:w-[45vw] w-[calc(50vw-1rem)]",
-  //         gridColumns === 2 && "grid-cols-2 2xl:w-[90vw] w-[calc(100vw-2rem)]",
-  //         gridColumns === 3 && "grid-cols-3 2xl:w-[90vw] w-[calc(100vw-2rem)]",
-  //         gridColumns === 4 && "grid-cols-4 2xl:w-[90vw] w-[calc(100vw-2rem)]",
-  //         gridColumns === 5 && "grid-cols-5 2xl:w-[90vw] w-[calc(100vw-2rem)]",
-  //         gridRows === 1 && "auto-rows-[calc((86vh-1.111vw)/1)]",
-  //         gridRows === 2 && "auto-rows-[calc((86vh-1.667vw)/2)]",
-  //         gridRows === 3 && "auto-rows-[calc((86vh-2.222vw)/3)]",
-  //         gridRows === 4 && "auto-rows-[calc((86vh-2.778vw)/4)]",
-  //         gridRows === 5 && "auto-rows-[calc((86vh-3.333vw)/5)]"
-  //       )}
-  //     >
-  //       {camerasContent}
-  //     </div>
-  //   </div>
-  // );
 }

 export default SessionUsersPanel;