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.
This commit is contained in:
@@ -496,7 +496,7 @@ export default function DraggableContainer({
|
||||
|
||||
// Если компонент отключен, просто рендерим children без стилей и логики
|
||||
if (!enabled) {
|
||||
return <div className={className}>{children}</div>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -505,7 +505,9 @@ export default function DraggableContainer({
|
||||
className={clsx(
|
||||
"pointer-events-auto",
|
||||
// draggable && "touch-none",
|
||||
!isDragging && enableSnapping && "transition-[inset] duration-500 ease-out",
|
||||
!isDragging &&
|
||||
enableSnapping &&
|
||||
"transition-[inset] duration-500 ease-out",
|
||||
draggable &&
|
||||
!dragHandleRef &&
|
||||
(isDragging ? "cursor-grabbing" : "cursor-grab"),
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -160,8 +160,7 @@ function SessionPage() {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"overflow-hidden relative order-3 w-screen h-dvh bg-black touch-none max-2xl:flex max-2xl:portrait:items-center",
|
||||
mode === "mini" && "flex"
|
||||
"overflow-hidden relative order-3 w-screen h-dvh bg-black touch-none max-2xl:flex max-2xl:portrait:items-center"
|
||||
)}
|
||||
>
|
||||
{/* Pixel Streaming - показывается только когда сессия активна */}
|
||||
|
||||
Reference in New Issue
Block a user