Merge branch 'main' into feat/use-call-link-as-join-link

src/App.tsx

@@ -10,8 +10,11 @@ import P2PCallMain from "./features/p2p-call/P2PCallMain";
 import CallCreationMain from "./features/call-selection/CallCreationMain";
 import CallJoinMain from "./features/call-selection/CallJoinMain";
 import PendingUserMain from "./features/call-selection/PendingUserMain";
+import useValidateSession from "./hooks/useValidateSession";
+import BlockedSession from "./features/auth/BlockedSession";
 
 export default function App() {
+  useValidateSession();
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -29,6 +32,7 @@ export default function App() {
           <Route path="/join" component={CallJoinMain} />
           <Route path="/left" component={() => <p>Left.</p>} />
           <Route path="/p2p-call/:callUid" component={P2PCallMain} />
+          <Route path="/blocked-session" component={BlockedSession} />
           <Route>
             <Redirect to="/" />
           </Route>

src/components/basic/Video.tsx

@@ -47,7 +47,8 @@ export const Video = forwardRef<HTMLVideoElement | null, VideoProps>(
               ...sx,
               height: {
                 xs: "120px",
-                md: "350px",
+                md: "230px",
+                xl: "315px",
               },
               objectFit: "scale-down",
             }}

src/components/templates/HomeTemplate.test.tsx

@@ -161,4 +161,25 @@ describe("HomeTemplate", () => {
       )
     ).toBe(null);
   });
+
+  it("does not show logout and settings buttons when user session is blocked", () => {
+    fullRender(
+      <HomeTemplate>
+        <p>Hello World!</p>
+      </HomeTemplate>,
+      {
+        preloadedState: {
+          user: {
+            ...userInitialState,
+            uid: "123",
+            status: "authenticated",
+            isSessionBlocked: true,
+          },
+        },
+      }
+    );
+
+    expect(screen.queryByLabelText("Logout")).toBe(null);
+    expect(screen.queryByLabelText("Settings")).toBe(null);
+  });
 });

src/components/templates/HomeTemplate.tsx

@@ -12,7 +12,11 @@ import mainCharWhiteOutlineImg from "../../assets/main-char-white-outline.png";
 import mainCharPinkOutlineImg from "../../assets/main-char-pink-outline.png";
 import { useAppDispatch, useAppSelector } from "../../state";
 import useAgentHelper from "../../hooks/useAgentHelper";
-import { logout, selectIsUserAuthenticated } from "../../state/user";
+import {
+  logout,
+  selectIsSessionBlocked,
+  selectIsUserAuthenticated,
+} from "../../state/user";
 import SettingsModal from "../settings/SettingsModal";
 import ErrorAlert from "../basic/ErrorAlert";
 import WarningAlert from "../basic/WarningAlert";
@@ -32,6 +36,7 @@ export default function HomeTemplate({
   const handleLogoutClick = () => dispatch(logout());
 
   const isAuthenticated = useAppSelector(selectIsUserAuthenticated);
+  const isSessionBlocked = useAppSelector(selectIsSessionBlocked);
 
   const { canRunWebRTC, isChromeBased, isFirefoxBased } = useAgentHelper();
 
@@ -92,7 +97,7 @@ export default function HomeTemplate({
               pb: 1,
             }}
           >
-            {isAuthenticated && (
+            {isAuthenticated && !isSessionBlocked && (
               <IconButton
                 aria-label="Logout"
                 title="Logout"
@@ -103,13 +108,15 @@ export default function HomeTemplate({
                 <LogoutIcon />
               </IconButton>
             )}
-            <IconButton
-              aria-label="Settings"
-              title="Settings"
-              onClick={openSettings}
-            >
-              <SettingsIcon />
-            </IconButton>
+            {!isSessionBlocked && (
+              <IconButton
+                aria-label="Settings"
+                title="Settings"
+                onClick={openSettings}
+              >
+                <SettingsIcon />
+              </IconButton>
+            )}
           </Box>
         </Box>
         {!canRunWebRTC() && (

src/features/auth/BlockedSession.test.tsx

@@ -0,0 +1,10 @@
+import "../../testing-helpers/mock-firestore-auth";
+import { act } from "react-dom/test-utils";
+import fullRender from "../../testing-helpers/fullRender";
+import BlockedSession from "./BlockedSession";
+
+describe("BlockedSession", () => {
+  it("renders", async () => {
+    await act(() => fullRender(<BlockedSession />));
+  });
+});

src/features/auth/BlockedSession.tsx

@@ -0,0 +1,21 @@
+import Box from "@mui/material/Box";
+import HomeTemplate from "../../components/templates/HomeTemplate";
+import useRedirectionRule from "../../hooks/useRedirectionRule";
+import { Redirect } from "wouter";
+import ErrorAlert from "../../components/basic/ErrorAlert";
+
+export default function BlockedSession() {
+  const goTo = useRedirectionRule();
+
+  if (goTo) {
+    return <Redirect to={goTo} />;
+  }
+
+  return (
+    <HomeTemplate>
+      <Box component="span" pr={1}>
+        <ErrorAlert message="Account in use in another device. Reload to restore this session." />
+      </Box>
+    </HomeTemplate>
+  );
+}

src/features/p2p-call/P2PCallMain.tsx

@@ -82,8 +82,11 @@ export default function P2PCallMain() {
 
   const getSlotStyles = useCallback((): BoxProps["sx"] => {
     return {
-      flexBasis: "35%",
-      margin: 1,
+      flexBasis: "30%",
+      margin: {
+        xs: 0,
+        md: 1,
+      },
       width: "100%",
     };
   }, []);
@@ -125,6 +128,10 @@ export default function P2PCallMain() {
             xs: "grid",
             md: "flex",
           },
+          flexWrap: {
+            xs: "unset",
+            md: "wrap",
+          },
           gridTemplateColumns: landscape ? "repeat(5, auto)" : "auto auto",
           gap: 1,
           alignItems: "center",