From f88e4a80c0e9f62eb545728cfd77efa6783487bf Mon Sep 17 00:00:00 2001
From: inmake <inmake.ru@gmail.com>
Date: Fri, 31 Oct 2025 15:17:52 +0500
Subject: [PATCH] Update environment variables for local development, adjust
 DraggableContainer and SessionUsersPanel to switch between 'mini' and 'full'
 modes, and refactor UserCamera and UserDevicesControls for improved styling
 and responsiveness. Clean up SessionPage layout for better structure.

---
 client/.env                                   |  8 +++----
 client/src/components/DraggableContainer.tsx  |  2 +-
 client/src/components/SessionUsersPanel.tsx   | 23 +++++++++----------
 client/src/components/ui/UserCamera.tsx       |  4 ++--
 .../src/components/ui/UserDevicesControls.tsx |  2 +-
 client/src/pages/SessionPage.tsx              |  8 +++----
 6 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/client/.env b/client/.env
index 5e374be..0f22f67 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 6f93a6d..4ebaf42 100644
--- a/client/src/components/DraggableContainer.tsx
+++ b/client/src/components/DraggableContainer.tsx
@@ -505,7 +505,7 @@ export default function DraggableContainer({
       className={clsx(
         "pointer-events-auto",
         // draggable && "touch-none",
-        !isDragging && enableSnapping && "transition-all duration-500 ease-out",
+        !isDragging && enableSnapping && "transition-[inset] duration-500 ease-out",
         draggable &&
           !dragHandleRef &&
           (isDragging ? "cursor-grabbing" : "cursor-grab"),
diff --git a/client/src/components/SessionUsersPanel.tsx b/client/src/components/SessionUsersPanel.tsx
index fb556b2..ad8fae2 100644
--- a/client/src/components/SessionUsersPanel.tsx
+++ b/client/src/components/SessionUsersPanel.tsx
@@ -150,18 +150,18 @@ function SessionUsersPanel({
 
   return (
     <DraggableContainer
-      enableSnapping={mode === "full"}
-      enabled={mode === "full"}
+      enableSnapping={mode === "mini"}
+      enabled={mode === "mini"}
       autoAlign={true}
       initialCorner={
         windowDimensions.width >= 640 ? "bottom-right" : "top-right"
       }
       padding="1.111vw"
       className={clsx(
-        "z-[999] 2xl:gap-[0.556vw] gap-2",
-        mode === "full"
+        "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}`
+          : `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 &&
@@ -181,12 +181,11 @@ function SessionUsersPanel({
             onCanControl={() => console.log("Toggle control")}
             onSpeakingChange={handleSpeakingChange}
             className={clsx(
-              mode === "mini" &&
-                (activeCamerasCount <= 2
-                  ? "m-auto"
-                  : activeCamerasCount > 12
-                  ? "!aspect-square w-full"
-                  : "w-full")
+              mode === "full" && activeCamerasCount <= 2
+                ? "m-auto"
+                : activeCamerasCount > 12
+                ? "!aspect-square w-full"
+                : "w-full"
             )}
           />
         ))}
@@ -201,7 +200,7 @@ function SessionUsersPanel({
         .map((participant) => (
           <UserCamera
             className={clsx(
-              mode === "mini" &&
+              mode === "full" &&
                 (activeCamerasCount <= 2
                   ? "m-auto"
                   : activeCamerasCount > 12
diff --git a/client/src/components/ui/UserCamera.tsx b/client/src/components/ui/UserCamera.tsx
index 6ec25e1..799d136 100644
--- a/client/src/components/ui/UserCamera.tsx
+++ b/client/src/components/ui/UserCamera.tsx
@@ -278,7 +278,7 @@ export default function UserCamera({
   return (
     <div
       className={clsx(
-        mode === "full"
+        mode === "mini"
           ? "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 self-center object-cover",
         isLocal && "order-last",
@@ -294,7 +294,7 @@ export default function UserCamera({
               window.innerWidth >= 1536 ? "0.069vw" : "1px"
             } rgba(255, 255, 255, 0.3)`,
         transition:
-          mode === "full"
+          mode === "mini"
             ? "box-shadow 0.1s ease-out, width 0.3s, background-color 0.3s"
             : undefined,
       }}
diff --git a/client/src/components/ui/UserDevicesControls.tsx b/client/src/components/ui/UserDevicesControls.tsx
index da5a7c7..e3d0ffd 100644
--- a/client/src/components/ui/UserDevicesControls.tsx
+++ b/client/src/components/ui/UserDevicesControls.tsx
@@ -35,7 +35,7 @@ export default function UserDevicesControls({
   return (
     <div
       className={clsx(
-        mode === "full"
+        mode === "mini"
           ? "hidden order-last 2xl:grid grid-cols-2 gap-[0.278vw] aspect-square p-[0.556vw] flex-wrap justify-between items-center size-[6.944vw] rounded-[1.667vw] bg-[#00000040] shadow-[0_4px_40px_0_#0F10111A] backdrop-blur-[10px] pointer-events-auto"
           : "2xl:flex hidden items-center gap-[0.278vw] p-[0.556vw] rounded-[1.667vw] ring-[0.104vw] ring-[#FFFFFF]/15 absolute bottom-[0.556vw] left-1/2 -translate-x-1/2 bg-[#00000040] backdrop-blur-[10px]"
       )}
diff --git a/client/src/pages/SessionPage.tsx b/client/src/pages/SessionPage.tsx
index d4834a3..d4f4460 100644
--- a/client/src/pages/SessionPage.tsx
+++ b/client/src/pages/SessionPage.tsx
@@ -161,7 +161,7 @@ function SessionPage() {
     <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 === "full" && "flex"
+        mode === "mini" && "flex"
       )}
     >
       {/* Pixel Streaming - показывается только когда сессия активна */}
@@ -169,7 +169,7 @@ function SessionPage() {
         session.mode === "stream" &&
         session.server?.localIp &&
         session.playerPort && (
-          <div className="absolute w-full h-full aspect-video">
+          <div className="absolute z-0 w-full h-full aspect-video">
             <PixelStreamingWrapper
               initialSettings={{
                 ss: `ws://${session.server.localIp}:${session.playerPort}`,
@@ -204,10 +204,10 @@ function SessionPage() {
         </div>
       )}
 
-      <ActionsSidebarWrapper className="z-[9999]">
+      <ActionsSidebarWrapper className="z-[150]">
         <FloatingActionButton onClick={toggleMode}>
           <div className="2xl:size-[1.111vw] size-4 text-white">
-            {mode === "mini" ? <FullscreenExitIcon /> : <FullscreenIcon />}
+            {mode === "full" ? <FullscreenExitIcon /> : <FullscreenIcon />}
           </div>
         </FloatingActionButton>
         <FloatingActionButton