inmake/stream.graff.tech-new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update environment variables for production URLs, refactor DraggableContainer to wrap children in a div when disabled, and enhance SessionUsersPanel layout with responsive adjustments for camera display. Improve UserCamera component's class handling and clean up SessionPage layout for better structure.

Browse Source
This commit is contained in:
Lanskikh
2025-10-31 00:17:00 +05:00
parent 000c4caacb
commit c6157f62b2
5 changed files with 61 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/SessionUsersPanel.tsx
+42 -46
View File
@@ -66,7 +66,7 @@ function SessionUsersPanel({
// Вычисляем количество камер для grid
const activeCamerasCount =
(localStream ? 8 : 0) +
(localStream ? 1 : 0) +
participants.filter(
(p) => p.stream != null && p.stream.getTracks().length > 0
).length;
@@ -76,19 +76,28 @@ function SessionUsersPanel({
if (count <= 2) return 1;
if (count <= 4) return 2;
if (count <= 9) return 3;
if (count <= 16) return 4;
return 5;
return 4;
};
const gridColumns = getGridColumns(activeCamerasCount);
// Вычисляем количество рядов для правильного расчета высоты
const gridRows = Math.ceil(activeCamerasCount / gridColumns);
// const gridRows = Math.ceil(activeCamerasCount / gridColumns);
// Рендерим камеры
const camerasContent = (
<>
{/* Локальная камера пользователя - показываем только если есть разрешение */}
return (
<DraggableContainer
enableSnapping={mode === "full"}
enabled={mode === "full"}
autoAlign={true}
initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
padding="1.111vw"
className={clsx(
"z-[999]",
mode === "full"
? "flex 2xl:gap-[0.556vw] gap-2"
: `2xl:p-[5vw] w-full max- h-dvh grid grid-cols-${gridColumns} 2xl:gap-[0.556vw] gap-2`
)}
>
{localStream && (
<UserCamera
mode={mode}
@@ -103,6 +112,7 @@ function SessionUsersPanel({
onVideoOff={toggleVideo}
onCanControl={() => console.log("Toggle control")}
onSpeakingChange={handleSpeakingChange}
className={activeCamerasCount <= 2 ? "m-auto" : " w-full"}
/>
)}
@@ -115,6 +125,7 @@ function SessionUsersPanel({
)
.map((participant) => (
<UserCamera
className={activeCamerasCount <= 2 ? "m-auto" : " w-full"}
key={participant.id}
mode={mode}
name={participant.id}
@@ -141,47 +152,32 @@ function SessionUsersPanel({
isVideoMuted={isLocalVideoMuted}
hasLocalStream={hasLocalStream}
/>
</>
</DraggableContainer>
);
// Для режима full используем DraggableContainer
if (mode === "full") {
return (
<DraggableContainer
enableSnapping={true}
enabled={true}
autoAlign={true}
initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
padding="1.111vw"
className="z-[999] flex gap-4"
>
{camerasContent}
</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>
);
// 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;