Merge pull request #2 from Hyathi/change-ui

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}

streaming-react-app/src/StreamingInterface.css

@@ -3,6 +3,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
+  min-height: 100vh;
 }
 
 .main-container-sra {
@@ -11,8 +13,8 @@
   flex-direction: column;
   justify-content: flex-start;
   text-align: left;
-  margin: 16px;
-  margin-bottom: 36px;
+  padding: 16px;
+  padding-bottom: 36px;
   border-radius: 8px;
   box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -21,7 +23,7 @@
 
 .top-section-sra {
   padding-top: 24px;
-  margin-bottom: 24px;
+  padding-bottom: 24px;
 }
 
 .horizontal-padding-sra {
@@ -34,12 +36,12 @@
   flex-direction: column;
   gap:10px;
   align-items: center;
-  margin-bottom: 24px;
+  padding-bottom: 20px;
 }
 
 .header-icon-sra {
   display: block;
-  margin-right: 12px;
+  padding-right: 12px;
 }
 
 .translation-text-container-sra {
@@ -49,5 +51,5 @@
 }
 
 .text-chunk-sra {
-  margin-bottom: 12px;
+  padding-bottom: 12px;
 }

streaming-react-app/src/StreamingInterface.tsx

@@ -98,8 +98,8 @@ async function requestDisplayMediaAudioStream(
 }
 
 const buttonLabelMap: {[key in StreamingStatus]: string} = {
-  stopped: 'Start Streaming',
-  running: 'Stop Streaming',
+  stopped: 'Start broadcasting',
+  running: 'Stop broadcasting',
   starting: 'Starting...',
 };
 
@@ -734,13 +734,14 @@ export default function StreamingInterface() {
 
   return (
     <div className="app-wrapper-sra">
-      <Box
+      <div
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore Not sure why it's complaining about complexity here
-        sx={{width: '100%', maxWidth: '800px', minWidth: '320px'}}>
+        style={{width:"100%"}}
+        >
         <div className="main-container-sra">
           <Stack direction={{ xs: 'column', md: 'row' }} spacing={6} className="top-section-sra horizontal-padding-sra">
-            <Stack alignItems="center" spacing={4} sx={{flex:1}}>
+          <Stack alignItems="center" sx={{ flex: 1, borderRight: { md: 1 } }}>
             <div className="header-container-sra">
               <img
                 src={"./logo.png"}
@@ -750,13 +751,13 @@ export default function StreamingInterface() {
               />
 
               <div>
-                <Typography variant="h1" fontSize={18} sx={{color: '#65676B'}}>
+                <Typography variant="h1" fontSize={20} >
                   Hotdub Real Time Translation
                 </Typography>
               </div>
             </div>
             
-              <Box>
+              {/* <Box> */}
                 <RoomConfig
                   roomState={roomState}
                   serverState={serverState}
@@ -781,54 +782,13 @@ export default function StreamingInterface() {
                     {volumeSliderNode}
                   </Box>
                 )}
-              </Box>
+              {/* </Box> */}
               </Stack>
 
               <Stack spacing="22px" direction="column" sx={{flex:1}}>
               {!isSpeaker && (
                 <>
-                  <Stack spacing="12px" direction="column">
-                    <FormLabel id="output-modes-radio-group-label">
-                      Model
-                    </FormLabel>
-                    <FormControl
-                      disabled={
-                        streamFixedConfigOptionsDisabled ||
-                        agentsCapabilities.length === 0
-                      }
-                      fullWidth
-                      sx={{minWidth: '14em'}}>
-                      <InputLabel id="model-selector-input-label">
-                        Model
-                      </InputLabel>
-                      <Select
-                        labelId="model-selector-input-label"
-                        label="Model"
-                        onChange={(e: SelectChangeEvent) => {
-                          const newAgent =
-                            agentsCapabilities.find(
-                              (agent) => e.target.value === agent.name,
-                            ) ?? null;
-                          if (newAgent == null) {
-                            console.error(
-                              'Unable to find agent with name',
-                              e.target.value,
-                            );
-                          }
-                          setAgentAndUpdateParams(newAgent);
-                        }}
-                        value={model ?? ''}>
-                        {agentsCapabilities.map((agent) => (
-                          <MenuItem value={agent.name} key={agent.name}>
-                            Hotdub Real Time Translation
-                          </MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-
-                  </Stack>
-
-                  <Stack spacing={0.5}>
+                <Stack spacing={0.5}>
                     <FormLabel id="output-modes-radio-group-label">
                       Output
                     </FormLabel>
@@ -836,7 +796,7 @@ export default function StreamingInterface() {
                     <Box sx={{paddingTop: 2, paddingBottom: 1}}>
                       <FormControl fullWidth sx={{minWidth: '14em'}}>
                         <InputLabel id="target-selector-input-label">
-                          Target Language
+                           Language
                         </InputLabel>
                         <Select
                           labelId="target-selector-input-label"
@@ -934,14 +894,56 @@ export default function StreamingInterface() {
                     </Grid>
                   </Stack>
 
+                  <Stack spacing="12px" direction="column">
+                    <FormLabel id="output-modes-radio-group-label">
+                      Model
+                    </FormLabel>
+                    <FormControl
+                      disabled={
+                        streamFixedConfigOptionsDisabled ||
+                        agentsCapabilities.length === 0
+                      }
+                      fullWidth
+                      sx={{minWidth: '14em'}}>
+                      <InputLabel id="model-selector-input-label">
+                        Model
+                      </InputLabel>
+                      <Select
+                        labelId="model-selector-input-label"
+                        label="Model"
+                        onChange={(e: SelectChangeEvent) => {
+                          const newAgent =
+                            agentsCapabilities.find(
+                              (agent) => e.target.value === agent.name,
+                            ) ?? null;
+                          if (newAgent == null) {
+                            console.error(
+                              'Unable to find agent with name',
+                              e.target.value,
+                            );
+                          }
+                          setAgentAndUpdateParams(newAgent);
+                        }}
+                        value={model ?? ''}>
+                        {agentsCapabilities.map((agent) => (
+                          <MenuItem value={agent.name} key={agent.name}>
+                            Hotdub Real Time Translation
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+
+                  </Stack>
+
+
                   <Stack
                     direction="row"
-                    spacing={2}
-                    justifyContent="space-between">
-                    <Box sx={{flex: 1}}>
+                    // spacing={2}
+                    justifyContent="space-between" >
+                    <Box >
                       <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel id="input-source-radio-group-label">
-                          Input Source
+                        Audio Input
                         </FormLabel>
                         <RadioGroup
                           aria-labelledby="input-source-radio-group-label"
@@ -964,7 +966,7 @@ export default function StreamingInterface() {
                       </FormControl>
                     </Box>
 
-                    <Box sx={{flex: 1, flexGrow: 2}}>
+                    <Box >
                     <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel>Options</FormLabel>
                         <FormControlLabel
@@ -982,7 +984,7 @@ export default function StreamingInterface() {
                               }
                             />
                           }
-                          label="Noise Suppression"
+                          label="Noise Reduction"
                         />
                         <FormControlLabel
                           control={
@@ -999,7 +1001,7 @@ export default function StreamingInterface() {
                               }
                             />
                           }
-                          label="Echo Cancellation (not recommended)"
+                          label="Echo Reduction"
                         />
                         <FormControlLabel
                           control={
@@ -1010,7 +1012,7 @@ export default function StreamingInterface() {
                               ) => setServerDebugFlag(event.target.checked)}
                             />
                           }
-                          label="Enable Server Debugging"
+                          label="Debug Mode"
                         />
                       </FormControl>
                     </Box>
@@ -1038,9 +1040,10 @@ export default function StreamingInterface() {
                     </div>
                   )}
 
-                  <Stack direction="row" spacing={2}>
+                  <Stack direction="row" spacing={6} justifyContent="center">
                     {streamingStatus === 'stopped' ? (
                       <Button
+                      sx={{borderRadius: "20px"}}
                         variant="contained"
                         onClick={startStreaming}
                         disabled={
@@ -1185,7 +1188,7 @@ export default function StreamingInterface() {
             </Stack>
           </div> */}
         </div>
-      </Box>
+      </div>
     </div>
   );
 }

streaming-react-app/src/theme.ts

@@ -21,7 +21,6 @@ const themeObject = {
   //   text: {primary: '#1C2A33'},
   // },
   palette: {
-    background: {default: '#000033'},
     primary: {
       main: '#1976d2',
     },

streaming-react-app/src/types/StreamingTypes.ts

@@ -54,7 +54,7 @@ export const SUPPORTED_INPUT_SOURCES: Array<{
   label: string;
 }> = [
   {value: 'userMedia', label: 'Microphone'},
-  {value: 'displayMedia', label: 'Browser Tab (Chrome only)'},
+  {value: 'displayMedia', label: 'Browser Tab'},
 ];
 
 export type StartStreamEventConfig = {