Move meeting timer

edumeet · Mar 3, 2024 · 6092f7f · 6092f7f
1 parent 5bab711
commit 6092f7f
Showing 1 changed file with 28 additions and 27 deletions.
diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx
@@ -1,8 +1,8 @@
-import { AppBar, Toolbar, Typography } from '@mui/material';
+import { AppBar, Chip, Toolbar, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useEffect, useState } from 'react';
 import { useAppSelector, usePermissionSelector } from '../../store/hooks';
-import { isMobileSelector, lobbyPeersLengthSelector, roomSessionCreationTimestampSelector } from '../../store/selectors';
+import { lobbyPeersLengthSelector, roomSessionCreationTimestampSelector } from '../../store/selectors';
 import edumeetConfig from '../../utils/edumeetConfig';
 import { permissions } from '../../utils/roles';
 import LobbyButton from '../controlbuttons/LobbyButton';
@@ -11,7 +11,6 @@ import FullscreenButton from '../controlbuttons/FullscreenButton';
 import LoginButton from '../controlbuttons/LoginButton';
 import SettingsButton from '../controlbuttons/SettingsButton';
 import LeaveButton from '../textbuttons/LeaveButton';
-import AccessTime from '@mui/icons-material/AccessTime';
 import { formatDuration } from '../../utils/formatDuration';
 import LogoutButton from '../controlbuttons/LogoutButton';
 
@@ -21,6 +20,11 @@ interface TopBarProps {
 	onFullscreen: () => void;
 }
 
+const StyledChip = styled(Chip)({
+	color: 'white',
+	backgroundColor: 'rgba(128, 128, 128, 0.5)',
+});
+
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
 	backgroundColor: theme.appBarColor,
 	...(theme.appBarFloating && {
@@ -50,30 +54,28 @@ const LogoImg = styled('img')(({ theme }) => ({
 interface TopBarDivProps {
 	gap?: number;
 	grow?: number;
-	margin?: number;
+	marginRight?: number;
+	marginLeft?: number;
 }
 
-const TopBarDiv = styled('div')<TopBarDivProps>(({ theme, gap = 0, grow = 0, margin = 0 }) => ({
+const TopBarDiv = styled('div')<TopBarDivProps>(({ theme, gap = 0, grow = 0, marginRight = 0, marginLeft = 0 }) => ({
 	display: 'flex',
-	marginRight: theme.spacing(margin),
+	marginRight: theme.spacing(marginRight),
+	marginLeft: theme.spacing(marginLeft),
 	gap: theme.spacing(gap),
 	flexGrow: grow,
 	alignItems: 'center',
+	justifyContent: 'center'
 }));
 
-const TopBar = ({
-	fullscreenEnabled,
-	fullscreen,
-	onFullscreen
-}: TopBarProps): React.JSX.Element => {
+const TopBar = ({ fullscreenEnabled, fullscreen, onFullscreen }: TopBarProps): React.JSX.Element => {
 	const logo = useAppSelector((state) => state.room.logo);
 	const canLock = usePermissionSelector(permissions.CHANGE_ROOM_LOCK);
 	const canPromote = usePermissionSelector(permissions.PROMOTE_PEER);
 	const loginEnabled = useAppSelector((state) => state.permissions.loginEnabled);
 	const lobbyPeersLength = useAppSelector(lobbyPeersLengthSelector);
 	const roomCreationTimestamp = useAppSelector(roomSessionCreationTimestampSelector);
 	const [ meetingDuration, setMeetingDuration ] = useState<number>(0);
-	const isMoile = useAppSelector(isMobileSelector);
 	const loggedIn = useAppSelector((state) => state.permissions.loggedIn);
 
 	useEffect(() => {
@@ -98,31 +100,30 @@ const TopBar = ({
 	return (
 		<StyledAppBar position='fixed'>
 			<Toolbar variant='dense'>
-				{ logo ?
-					<LogoImg alt='Logo' src={ logo }/>
-					:
-					<Typography variant='h6' noWrap color='inherit'>
-						{ edumeetConfig.title }
-					</Typography>
-				}
-				<TopBarDiv gap={1}>
-					{ !isMoile && <AccessTime /> }
-					<Typography>{ formatDuration(meetingDuration) }</Typography>
+				<TopBarDiv marginLeft={1}>
+					{ logo ?
+						<LogoImg alt='Logo' src={ logo }/>
+						:
+						<Typography variant='h6' noWrap color='inherit'>
+							{ edumeetConfig.title }
+						</Typography>
+					}
 				</TopBarDiv>
 				<TopBarDiv grow={1} />
-				<TopBarDiv margin={2}>
+				<TopBarDiv marginRight={1}>
 					{ fullscreenEnabled && <FullscreenButton type='iconbutton' fullscreen={fullscreen} onClick={onFullscreen} /> }
 					<SettingsButton type='iconbutton' />
 					{ canLock && <LockButton type='iconbutton' /> }
 					{ canPromote && lobbyPeersLength > 0 && <LobbyButton type='iconbutton' /> }
-					{ loginEnabled && (
-						loggedIn ? <LogoutButton type='iconbutton' /> : <LoginButton type='iconbutton' />
-					)}
+					{ loginEnabled && (loggedIn ? <LogoutButton type='iconbutton' /> : <LoginButton type='iconbutton' />) }
+				</TopBarDiv>
+				<TopBarDiv marginRight={2}>
+					<StyledChip size='small' label={ formatDuration(meetingDuration) } />
 				</TopBarDiv>
 				<LeaveButton />
 			</Toolbar>
 		</StyledAppBar>
 	);
 };
 
-export default TopBar;
+export default TopBar;