ui improved

streaming-react-app/src/RoomConfig.tsx

@@ -1,22 +1,23 @@
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-import {isValidRoomID, isValidPartialRoomID} from './generateNewRoomID';
-import {useCallback, useEffect, useState} from 'react';
-import Button from '@mui/material/Button';
-import {useSocket} from './useSocket';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import {RoomState} from './types/RoomState';
-import setURLParam from './setURLParam';
-import {getURLParams} from './URLParams';
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { isValidRoomID, isValidPartialRoomID } from "./generateNewRoomID";
+import { useCallback, useEffect, useState } from "react";
+import Button from "@mui/material/Button";
+import { useSocket } from "./useSocket";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import { RoomState } from "./types/RoomState";
+import setURLParam from "./setURLParam";
+import { getURLParams } from "./URLParams";
 import {
   JoinRoomConfig,
   Roles,
   ServerState,
   StreamingStatus,
-} from './types/StreamingTypes';
-import Alert from '@mui/material/Alert';
+} from "./types/StreamingTypes";
+import Alert from "@mui/material/Alert";
+import { Paper, Typography } from "@mui/material";
 
 function capitalize(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -35,22 +36,22 @@ export default function RoomConfig({
   onJoinRoomOrUpdateRoles,
   streamingStatus,
 }: Props) {
-  const {socket, clientID} = useSocket();
+  const { socket, clientID } = useSocket();
 
   const urlParams = getURLParams();
   const roomIDParam = urlParams.roomID;
   const autoJoinRoom = urlParams.autoJoin;
 
   const [roomID, setRoomID] = useState<string>(
-    (roomIDParam ?? '').toUpperCase(),
+    (roomIDParam ?? "").toUpperCase()
   );
   const [roomIDError, setRoomIDError] = useState<boolean>(false);
-  const [roles, setRoles] = useState<{speaker: boolean; listener: boolean}>({
+  const [roles, setRoles] = useState<{ speaker: boolean; listener: boolean }>({
     speaker: false,
     listener: false,
   });
   const [lockServer, setLockServer] = useState<boolean>(false);
-  const [lockServerName, setLockServerName] = useState<string>('');
+  const [lockServerName, setLockServerName] = useState<string>("");
 
   const [joinInProgress, setJoinInProgress] = useState<boolean>(false);
   const [didAttemptAutoJoin, setDidAttemptAutoJoin] = useState<boolean>(false);
@@ -66,39 +67,39 @@ export default function RoomConfig({
   const onJoinRoom = useCallback(
     (createNewRoom: boolean) => {
       if (socket == null) {
-        console.error('Socket is null, cannot join room');
+        console.error("Socket is null, cannot join room");
         return;
       }
       console.debug(`Attempting to join roomID ${roomID}...`);
 
       const lockServerValidated: string | null =
-        lockServer && roles['speaker'] ? lockServerName : null;
+        lockServer && roles["speaker"] ? lockServerName : null;
 
       setJoinInProgress(true);
 
       const configObject: JoinRoomConfig = {
         roles: (Object.keys(roles) as Array<Roles>).filter(
-          (role) => roles[role] === true,
+          (role) => roles[role] === true
         ),
         lockServerName: lockServerValidated,
       };
 
       socket.emit(
-        'join_room',
+        "join_room",
         clientID,
         createNewRoom ? null : roomID,
         configObject,
         (result) => {
-          console.log('join_room result:', result);
+          console.log("join_room result:", result);
           if (createNewRoom) {
             setRoomID(result.roomID);
           }
           if (onJoinRoomOrUpdateRoles != null) {
             onJoinRoomOrUpdateRoles();
           }
-          setURLParam('roomID', result.roomID);
+          setURLParam("roomID", result.roomID);
           setJoinInProgress(false);
-        },
+        }
       );
     },
     [
@@ -109,7 +110,7 @@ export default function RoomConfig({
       roles,
       roomID,
       socket,
-    ],
+    ]
   );
 
   useEffect(() => {
@@ -126,11 +127,11 @@ export default function RoomConfig({
         joinInProgress === false &&
         roomIDFromServer == null
       ) {
-        console.debug('Attempting to auto-join room...');
+        console.debug("Attempting to auto-join room...");
 
         onJoinRoom(false);
       } else {
-        console.debug('Unable to auto-join room', {
+        console.debug("Unable to auto-join room", {
           isValidAllInputs,
           joinInProgress,
           roomIDFromServer,
@@ -148,86 +149,129 @@ export default function RoomConfig({
   ]);
 
   return (
-    <Stack direction="column" spacing="12px">
-      <Stack direction="column" spacing={2} sx={{alignItems: 'center'}}>
-        <TextField
-          size="small"
-          label="Room Code"
-          variant="outlined"
-          disabled={roomState?.room_id != null}
-          value={roomID}
-          error={roomIDError}
-          onChange={(e) => {
-            const id = e.target.value.toUpperCase();
-            if (isValidPartialRoomID(id)) {
-              setRoomIDError(false);
-              setRoomID(id);
-            } else {
-              setRoomIDError(true);
-            }
-          }}
-          sx={{width: '100%'}}
-        />
-        
-<Stack direction="row" spacing={4} sx={{alignItems: 'center'}}>
-        <div>
-          <Button
-            variant="contained"
-            disabled={
-              isValidAllInputs === false ||
-              joinInProgress ||
-              streamingStatus !== 'stopped'
-            }
-            onClick={() => onJoinRoom(false)}>
-            {roomState?.room_id != null ? 'Update Roles' : 'Join Room'}
-          </Button>
-        </div>
-
-        {roomState?.room_id == null && (
+    <Stack direction="column" spacing="12px" sx={{ width: "80%" }}>
+      <Stack spacing={2}>
+      <Paper
+        elevation={3}
+        style={{
+          padding: "1em",
+          borderRadius: "15px",
+          border: "1px solid #ccc",
+        }}
+      >
+        <Stack
+          direction="column"
+          spacing={1}
+          sx={{ alignItems: "center", width: "100%" }}
+        >
+          <Typography fontWeight={600}>Join an Existing Room</Typography>
+          <Typography variant="body2">
+            Join an existing room by entering the room code provided by the
+            host.
+          </Typography>
+          <TextField
+            size="small"
+            label="Room Code"
+            placeholder="Enter Room Code"
+            variant="outlined"
+            disabled={roomState?.room_id != null}
+            value={roomID}
+            error={roomIDError}
+            onChange={(e) => {
+              const id = e.target.value.toUpperCase();
+              if (isValidPartialRoomID(id)) {
+                setRoomIDError(false);
+                setRoomID(id);
+              } else {
+                setRoomIDError(true);
+              }
+            }}
+            sx={{ width: "100%" }}
+          />
           <div>
             <Button
+             sx={{borderRadius: "20px"}}
               variant="contained"
               disabled={
-                roomState?.room_id != null ||
+                isValidAllInputs === false ||
                 joinInProgress ||
-                streamingStatus !== 'stopped'
+                streamingStatus !== "stopped"
               }
-              onClick={() => onJoinRoom(true)}>
-              {'Create New Room'}
+              onClick={() => onJoinRoom(false)}
+            >
+              {roomState?.room_id != null ? "Update Roles" : "Join Room"}
             </Button>
           </div>
-        )}
-      </Stack>
+        </Stack>
+      </Paper>
+
+      <Paper
+        elevation={3}
+        style={{
+          padding: "1em",
+          borderRadius: "15px",
+          border: "1px solid #ccc",
+        }}
+      >
+        <Stack
+          direction="column"
+          spacing={1}
+          sx={{ alignItems: "center", width: "100%" }}
+        >
+          <Typography fontWeight={600}>Create a New Room</Typography>
+          <Typography variant="body2">
+            Start a new room and invite others to join you in collaborative
+            sessions or discussions.
+          </Typography>
+
+          {roomState?.room_id == null && (
+            <div>
+              <Button
+              sx={{borderRadius: "20px"}}
+                variant="contained"
+                disabled={
+                  roomState?.room_id != null ||
+                  joinInProgress ||
+                  streamingStatus !== "stopped"
+                }
+                onClick={() => onJoinRoom(true)}
+              >
+                {"Create New Room"}
+              </Button>
+            </div>
+          )}
+        </Stack>
+      </Paper>
       </Stack>
 
       <FormGroup>
         <Stack direction="row" justifyContent="space-between">
-        {Object.keys(roles).map((role) => {
-          return (
-            <FormControlLabel
-              disabled={streamingStatus !== 'stopped'}
-              key={role}
-              control={
-                <Checkbox
-                  checked={roles[role]}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    setRoles((prevRoles) => ({
-                      ...prevRoles,
-                      [role]: event.target.checked,
-                    }));
-                  }}
-                />
-              }
-              label={capitalize(role)}
-            />
-          );
-        })}
+          {Object.keys(roles).map((role) => {
+            return (
+              <FormControlLabel
+                disabled={streamingStatus !== "stopped"}
+                key={role}
+                control={
+                  <Checkbox
+                    checked={roles[role]}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setRoles((prevRoles) => ({
+                        ...prevRoles,
+                        [role]: event.target.checked,
+                      }));
+                    }}
+                  />
+                }
+                label={capitalize(role)}
+              />
+            );
+          })}
         </Stack>
 
-        {urlParams.enableServerLock && roles['speaker'] === true && (
+        {urlParams.enableServerLock && roles["speaker"] === true && (
           <>
             <FormControlLabel
-              disabled={streamingStatus !== 'stopped'}
+              disabled={streamingStatus !== "stopped"}
               control={
                 <Checkbox
                   checked={lockServer}
@@ -243,10 +287,10 @@ export default function RoomConfig({
       </FormGroup>
 
       {urlParams.enableServerLock &&
-        roles['speaker'] === true &&
+        roles["speaker"] === true &&
         lockServer && (
           <TextField
-            disabled={streamingStatus !== 'stopped'}
+            disabled={streamingStatus !== "stopped"}
             label="Enter Your Name + Expected Lock End Time"
             variant="outlined"
             value={lockServerName}