diff --git a/client/.env b/client/.env index 0f22f67..5e374be 100644 --- a/client/.env +++ b/client/.env @@ -1,4 +1,4 @@ -VITE_API_URL=http://localhost:3000 -VITE_WEBRTC_URL=http://localhost:3001 -# VITE_API_URL=https://stream.graff.estate/api -# VITE_WEBRTC_URL=https://stream.graff.estate \ No newline at end of file +# VITE_API_URL=http://localhost:3000 +# VITE_WEBRTC_URL=http://localhost:3001 +VITE_API_URL=https://stream.graff.estate/api +VITE_WEBRTC_URL=https://stream.graff.estate \ No newline at end of file diff --git a/client/src/components/DraggableContainer.tsx b/client/src/components/DraggableContainer.tsx index f50da2d..6f93a6d 100644 --- a/client/src/components/DraggableContainer.tsx +++ b/client/src/components/DraggableContainer.tsx @@ -496,7 +496,7 @@ export default function DraggableContainer({ // Если компонент отключен, просто рендерим children без стилей и логики if (!enabled) { - return <>{children}; + return
{children}
; } return ( diff --git a/client/src/components/SessionUsersPanel.tsx b/client/src/components/SessionUsersPanel.tsx index e8db0ca..a4e042c 100644 --- a/client/src/components/SessionUsersPanel.tsx +++ b/client/src/components/SessionUsersPanel.tsx @@ -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 ( + = 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 && ( console.log("Toggle control")} onSpeakingChange={handleSpeakingChange} + className={activeCamerasCount <= 2 ? "m-auto" : " w-full"} /> )} @@ -115,6 +125,7 @@ function SessionUsersPanel({ ) .map((participant) => ( - + ); - - // Для режима full используем DraggableContainer - if (mode === "full") { - return ( - = 640 ? "bottom-right" : "top-right"} - padding="1.111vw" - className="z-[999] flex gap-4" - > - {camerasContent} - - ); - } + // } // Для режима mini используем flex-обертку для центрирования и внутри grid - return ( -
-
- {camerasContent} -
-
- ); + // return ( + //
+ //
+ // {camerasContent} + //
+ //
+ // ); } export default SessionUsersPanel; diff --git a/client/src/components/ui/UserCamera.tsx b/client/src/components/ui/UserCamera.tsx index 1f80021..8d98da6 100644 --- a/client/src/components/ui/UserCamera.tsx +++ b/client/src/components/ui/UserCamera.tsx @@ -75,9 +75,13 @@ export default function UserCamera({ // Отправляем изменения состояния для локального пользователя // Используем ref для отслеживания предыдущего состояния, чтобы избежать лишних вызовов const prevLocalSpeakingRef = useRef(localSpeaking); - + useEffect(() => { - if (isLocal && onSpeakingChange && prevLocalSpeakingRef.current !== localSpeaking) { + if ( + isLocal && + onSpeakingChange && + prevLocalSpeakingRef.current !== localSpeaking + ) { prevLocalSpeakingRef.current = localSpeaking; onSpeakingChange(localSpeaking); } @@ -276,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 flex-shrink-0 pointer-events-auto w-full h-full object-contain", + : "aspect-video 2xl:rounded-[2.222vw] rounded-[32px] overflow-hidden group relative pointer-events-auto max-w-full h-full object-cover", isLocal && "order-last", isVideoOff ? "bg-green-500" : "bg-yellow-500/10", className @@ -290,7 +294,9 @@ export default function UserCamera({ window.innerWidth >= 1536 ? "0.069vw" : "1px" } rgba(255, 255, 255, 0.3)`, transition: - "box-shadow 0.1s ease-out, width 0.3s, background-color 0.3s", + mode === "full" + ? "box-shadow 0.1s ease-out, width 0.3s, background-color 0.3s" + : undefined, }} onClick={handleVideoClick} > diff --git a/client/src/pages/SessionPage.tsx b/client/src/pages/SessionPage.tsx index 32a4361..c340e42 100644 --- a/client/src/pages/SessionPage.tsx +++ b/client/src/pages/SessionPage.tsx @@ -80,7 +80,6 @@ function SessionPage() { const session = sessionData?.session; function handleChatOpen() { - console.log("handleChatOpen"); setPopup(); } @@ -156,9 +155,9 @@ function SessionPage() { return (
{/* Pixel Streaming - показывается только когда сессия активна */} @@ -166,7 +165,7 @@ function SessionPage() { session.mode === "stream" && session.server?.localIp && session.playerPort && ( -
+