Update environment configurations for client and server, refactor ControlsPopover to accept session prop, and adjust media handling in UserCamera. Disable buttons based on session state and improve participant popup functionality.

client/src/components/ui/ControlsPopover.tsx

@@ -15,8 +15,13 @@ import SharePopup from "../popups/SharePopup";
 import SettingsModal from "../modals/SettingsModal";
 import clsx from "clsx";
 import { useClickAway } from "@uidotdev/usehooks";
+import type { Session } from "../../types/Session";
 
-function ControlsPopover() {
+interface ControlsPopoverProps {
+  session?: Session;
+}
+
+function ControlsPopover({ session }: ControlsPopoverProps) {
   const [isOpened, setIsOpened] = useState(false);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -33,7 +38,9 @@ function ControlsPopover() {
 
   function handleClickOpenParticipantsPopup() {
     setIsOpened(false);
-    setPopup(<ParticipantsPopup />);
+    if (session) {
+      setPopup(<ParticipantsPopup session={session} />);
+    }
   }
 
   function handleClickOpenSharePopup() {
@@ -77,6 +84,7 @@ function ControlsPopover() {
           variant="tertiary"
           className="w-full !justify-start"
           onClick={handleClickOpenParticipantsPopup}
+          disabled={!session}
         >
           <div className="size-4">
             <UsersFilledIcon />

client/src/components/ui/UserCamera.tsx

@@ -314,7 +314,7 @@ export default function UserCamera({
           (!mediaStream || isVideoOff) && "hidden"
         )}
         autoPlay
-        muted={isLocal ? isMuted : isAudioMuted}
+        muted={isLocal ? true : isAudioMuted}
         playsInline
         onLoadedData={() => {
           if (!isLocal && ref.current) {

client/src/pages/HomePage.tsx

@@ -2,15 +2,12 @@ import Button from "../components/ui/Button";
 import FloatingActionButton from "../components/ui/FloatingActionButton";
 import { useMe, useLogout } from "../hooks/useAuth";
 import { useNavigate } from "react-router";
-import ShareFilledIcon from "../components/icons/ShareFilledIcon";
 import usePopupStore from "../store/popupStore";
 import SettingsModal from "../components/modals/SettingsModal";
 import useModalStore from "../store/modalStore";
 import CogFilledIcon from "../components/icons/CogFilledIcon";
 import ChatPopup from "../components/popups/ChatPopup";
 import ChatFilledIcon from "../components/icons/ChatFilledIcon";
-import ParticipantsPopup from "../components/popups/ParticipantsPopup";
-import ControlsPopover from "../components/ui/ControlsPopover";
 
 function HomePage() {
   const { data: user } = useMe();
@@ -33,14 +30,14 @@ function HomePage() {
 
           {/* Потестить модалки */}
 
-          <FloatingActionButton
+          {/* <FloatingActionButton
             variant="default"
             onClick={() => setPopup(<ParticipantsPopup />)}
           >
             <div className="2xl:size-[1.111vw] size-4 text-white">
               <ShareFilledIcon />
             </div>
-          </FloatingActionButton>
+          </FloatingActionButton> */}
           <FloatingActionButton
             variant="default"
             onClick={() => setPopup(<ChatPopup />)}
@@ -58,7 +55,7 @@ function HomePage() {
               <CogFilledIcon />
             </div>
           </FloatingActionButton>
-          <ControlsPopover />
+          {/* <ControlsPopover /> */}
 
           <div className="space-y-4">
             <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">

client/src/pages/SessionPage.tsx

@@ -84,7 +84,9 @@ function SessionPage() {
   }
 
   function handleParticipantsOpen() {
-    setPopup(<ParticipantsPopup session={session} />);
+    if (session) {
+      setPopup(<ParticipantsPopup session={session} />);
+    }
   }
 
   function handleShareOpen() {
@@ -250,7 +252,7 @@ function SessionPage() {
             <ExitFilledIcon />
           </div>
         </FloatingActionButton>
-        <ControlsPopover />
+        <ControlsPopover session={session} />
       </ActionsSidebarWrapper>
 
       {/* WebRTC видеочат - работает всегда, пока пользователь на странице */}