Update API URL in .env; refactor routing in main.tsx to switch between NewSessionPage and TestPage; enhance PixelStreamingWrapper with video initialization callback; improve UI components for better interaction and responsiveness in ActionsSidebarWrapper, UserCamera, UserDevicesControls, and ControlsPopover; add session data fetching and error handling in NewSessionPage.

client/src/components/ActionsSidebarWrapper.tsx

@@ -20,7 +20,7 @@ function ActionsSidebarWrapper({
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           className={clsx(
-            "flex 2xl:flex 2xl:gap-[0.556vw] 2xl:flex-col gap-2 max-2xl:p-2 max-2xl:rounded-[32px] absolute 2xl:top-1/2 2xl:-translate-y-1/2 2xl:right-[1.111vw] max-2xl:left-1/2 max-2xl:-translate-x-1/2 max-2xl:bottom-2 max-2xl:landscape:bg-[#00000026] max-2xl:landscape:backdrop-blur",
+            "flex 2xl:flex 2xl:gap-[0.556vw] 2xl:flex-col gap-2 max-2xl:p-2 max-2xl:rounded-[32px] absolute 2xl:top-1/2 2xl:-translate-y-1/2 2xl:right-[1.111vw] max-2xl:left-1/2 max-2xl:-translate-x-1/2 max-2xl:bottom-2 max-2xl:bg-[#00000026] max-2xl:backdrop-blur",
             className
           )}
         >

client/src/components/PixelStreamingWrapper.tsx

@@ -10,10 +10,12 @@ import type { AllSettings } from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.7
 
 export interface PixelStreamingWrapperProps {
   initialSettings?: Partial<AllSettings>;
+  onVideoInitialized?: () => void;
 }
 
 export const PixelStreamingWrapper = ({
   initialSettings,
+  onVideoInitialized,
 }: PixelStreamingWrapperProps) => {
   // A reference to parent div element that the Pixel Streaming library attaches into:
   const videoParent = useRef<HTMLDivElement>(null);
@@ -38,6 +40,10 @@ export const PixelStreamingWrapper = ({
         setClickToPlayVisible(true);
       });
 
+      streaming.addEventListener("videoInitialized", () => {
+        onVideoInitialized?.();
+      });
+
       // Save the library instance into component state so that it can be accessed later:
       setPixelStreaming(streaming);
 

client/src/components/ui/ControlsPopover.tsx

@@ -13,6 +13,7 @@ import ChatPopup from "../popups/ChatPopup";
 import ParticipantsPopup from "../popups/ParticipantsPopup";
 import SharePopup from "../popups/SharePopup";
 import SettingsModal from "../modals/SettingsModal";
+import clsx from "clsx";
 
 function ControlsPopover() {
   const [isOpened, setIsOpened] = useState(false);
@@ -41,10 +42,10 @@ function ControlsPopover() {
   const { setModal } = useModalStore();
 
   return (
-    <div className="2xl:hidden order-3 relative ah-full">
+    <div className="2xl:hidden order-3 relative">
       <FloatingActionButton
         ref={buttonRef}
-        className="!bg-[#7B60F3]"
+        className={clsx(isOpened && "!bg-[#7B60F3]")}
         onClick={() => setIsOpened(!isOpened)}
       >
         <div className="size-4 text-white">

client/src/components/ui/UserCamera.tsx

@@ -53,7 +53,7 @@ export default function UserCamera({
           : "0.139vw solid #FFFFFF4D",
       }}
       className={clsx(
-        "aspect-square rounded-[1.667vw] bg-yellow-500 relative flex-shrink-0",
+        "aspect-square rounded-[1.667vw] bg-yellow-500 relative flex-shrink-0 pointer-events-auto",
         isAdmin && "order-last"
       )}
     >

client/src/components/ui/UserDevicesControls.tsx

@@ -8,6 +8,7 @@ import SettingsModal from "../modals/SettingsModal";
 
 export default function UserDevicesControls() {
   const { setModal } = useModalStore();
+
   function ToggleAudioDevice() {
     console.log("Mute device");
   }
@@ -22,7 +23,7 @@ export default function UserDevicesControls() {
   }
 
   return (
-    <div className="hidden 2xl:flex 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]">
+    <div className="hidden 2xl:flex 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">
       <ControlButton
         size="large"
         icon={<MicrophoneFilledIcon />}