Feat simplify UI (#210)

* fix login button label placement on firefox * fix fullscreen text zindex bug * update imprint to impressum * remove empty lines * Update translations * move blur and audio output text * change apply label to save icon * fix-countdown timer bug on firefox (am/pm) * fix blur bug with multiple camera devices * Change mgmt login style + add custom login image option * create managementSlice (#209) * create managementSlice * use loggedIn selector * Tweak countdown timer on mobile view * Hide modification menu, when creating for mgmt stuff * add tooltip text back as a 'footer' on the dialog screen * make it info text only show on join dialog and landing page * stop listeners when leaving room * remove redundant text * add alt to logo * Make qr code hidden by default * move save button to startAdornment (and change to text) * remove zindex workaround for overshowing text * remove commented code * make menu items collapse when size is limited * fix apply label width * Fix ui bugs with more icons on topbar * fix width of tables for mgmt interface * rename text for hidden emails in mgmt interface * move volume indicator into the join dialog video box + remove outside volume component * center room timer if countdown timer is disabled * disable countdowntimer by default (add to config file) * add countdowntimer param to example.js * fix info text position on landing page * do not show countdown timer enable disable button * remove divider on top infotext * update translations * remove client-sample notifications * hide label too if component is disabled --------- Co-authored-by: Johannes Jeppsson <[email protected]>
edumeet · Jan 31, 2025 · d7edd96 · d7edd96
1 parent c07fea4
commit d7edd96
Show file tree

Hide file tree

Showing 67 changed files with 997 additions and 386 deletions.
diff --git a/package.json b/package.json
@@ -15,12 +15,13 @@
 		"@feathersjs/socketio-client": "^5.0.30",
 		"@mui/icons-material": "^6.1.5",
 		"@mui/material": "^6.1.5",
-		"@mui/x-date-pickers": "^7.22.0",
+		"@mui/x-date-pickers": "^7.23.0",
 		"@observertc/client-monitor-js": "^3.11.0",
 		"@observertc/samples-encoder": "^2.2.12",
 		"@reduxjs/toolkit": "^1.9.7",
 		"awaitqueue": "^3.0.2",
 		"bowser": "^2.11.0",
+		"dayjs": "^1.11.13",
 		"debug": "^4.3.7",
 		"dompurify": "^3.1.6",
 		"file-saver": "^2.0.5",

diff --git a/public/config/config.example.js b/public/config/config.example.js
@@ -7,10 +7,22 @@
 
 // eslint-disable-next-line
 var config = {
+	// If enabled QR code will show at the join dialog
+	qrCodeEnabled: false,
+	// If enabled countdownTimer will be enabled in the room.
+	countdownTimerEnabled: false,
+	// If enabled a Tooltip will show at the landing page and join dialog bottom
+	infoTooltipEnabled: false,
+	infoTooltipText: 'Tooltip text',
+	infoTooltipLink: '',
+	infoTooltipDesc: 'Tooltip desc ... Lorem ipsum',
 	// Location of management service.
 	managementUrl: 'http://localhost:3030',
 	// Location of the privacy files.
-	impressumUrl: '/privacy/privacy.html',
+	imprintUrl: '',
+	privacyUrl: '',
+
+	loginImageURL: '',
 	// If ability to log in is enabled.
 	loginEnabled: true,
 

diff --git a/src/components/audiooutputtest/AudioOutputTest.tsx b/src/components/audiooutputtest/AudioOutputTest.tsx
@@ -1,12 +1,12 @@
-import { Button } from '@mui/material';
+import { Button, Tooltip } from '@mui/material';
 import {
 	useAppDispatch,
 	useAppSelector,
 	useDeviceSelector
 } from '../../store/hooks';
 import { notificationsActions } from '../../store/slices/notificationsSlice';
-import { ChooserDiv } from '../devicechooser/DeviceChooser';
 import { testAudioOutputLabel } from '../translated/translatedComponents';
+import AudiotrackIcon from '@mui/icons-material/Audiotrack';
 
 const TestAudioOutputButton = (): JSX.Element => {
 	const audioDevices = useDeviceSelector('audiooutput');
@@ -20,14 +20,14 @@ const TestAudioOutputButton = (): JSX.Element => {
 	return (
 		<>
 			{ audioDevices.length > 1 &&
-			<ChooserDiv>
-				<Button
-					variant='contained'
-					onClick={triggerTestSound}
-					disabled={audioInProgress}
-				>
-					{ testAudioOutputLabel() }
-				</Button></ChooserDiv>
+				<Tooltip title={ testAudioOutputLabel() }>
+					<Button
+						onClick={triggerTestSound}
+						disabled={audioInProgress}
+					>
+						<AudiotrackIcon />
+					</Button>
+				</Tooltip>
 			}
 		</>
 	);

diff --git a/src/components/breakoutrooms/BreakoutModerator.tsx b/src/components/breakoutrooms/BreakoutModerator.tsx
@@ -1,10 +1,11 @@
 import { IconButton, styled } from '@mui/material';
 import { memo, useState } from 'react';
 import { createBreakoutRoomLabel, newBreakoutRoomNameLabel } from '../translated/translatedComponents';
-import { useAppDispatch } from '../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { createBreakoutRoom } from '../../store/actions/roomActions';
 import TextInputField from '../textinputfield/TextInputField';
 import GroupAddIcon from '@mui/icons-material/GroupAdd';
+import { fullscreenConsumerSelector } from '../../store/selectors';
 
 const ModeratorDiv = styled('div')(({ theme }) => ({
 	width: '100%',
@@ -26,10 +27,12 @@ const BreakoutModerator = (): JSX.Element => {
 		}
 	};
 
+	const consumer = useAppSelector(fullscreenConsumerSelector);
+
 	return (
 		<ModeratorDiv>
 			<TextInputField
-				label={newBreakoutRoomNameLabel()}
+				label={consumer ? '' : newBreakoutRoomNameLabel()}
 				value={name}
 				margin='dense'
 				setValue={setName}

diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
@@ -2,9 +2,10 @@ import { Send } from '@mui/icons-material';
 import { IconButton, styled } from '@mui/material';
 import { useState } from 'react';
 import { sendChat } from '../../store/actions/chatActions';
-import { useAppDispatch } from '../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import TextInputField from '../textinputfield/TextInputField';
 import { chatInputLabel } from '../translated/translatedComponents';
+import { fullscreenConsumerSelector } from '../../store/selectors';
 
 const ChatInputDiv = styled('div')(({ theme }) => ({
 	marginLeft: theme.spacing(1),
@@ -22,10 +23,12 @@ const ChatInput = (): JSX.Element => {
 		}
 	};
 
+	const consumer = useAppSelector(fullscreenConsumerSelector);
+
 	return (
 		<ChatInputDiv>
 			<TextInputField
-				label={chatInputLabel()}
+				label={ consumer ? '' : chatInputLabel()}
 				value={message}
 				margin='dense'
 				setValue={setMessage}

diff --git a/src/components/controlbuttons/FullscreenVideoButton.tsx b/src/components/controlbuttons/FullscreenVideoButton.tsx
@@ -5,7 +5,6 @@ import ControlButton, { ControlButtonProps } from './ControlButton';
 import { enterFullscreenLabel, leaveFullscreenLabel } from '../translated/translatedComponents';
 import { fullscreenConsumerSelector } from '../../store/selectors';
 import { roomSessionsActions } from '../../store/slices/roomSessionsSlice';
-
 interface FullscreenVideoButtonProps extends ControlButtonProps {
 	consumerId: string;
 }

diff --git a/src/components/controlbuttons/LoginButton.tsx b/src/components/controlbuttons/LoginButton.tsx
@@ -4,6 +4,10 @@ import ControlButton, { ControlButtonProps } from './ControlButton';
 import { loginLabel } from '../translated/translatedComponents';
 import { login } from '../../store/actions/permissionsActions';
 import React from 'react';
+import { Button } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import LoginIcon from '@mui/icons-material/Login';
+import edumeetConfig from '../../utils/edumeetConfig';
 
 const LoginButton = ({
 	...props
@@ -21,4 +25,26 @@ const LoginButton = ({
 	);
 };
 
+export const CustomLoginButton = (): React.JSX.Element => {
+	const dispatch = useAppDispatch();
+
+	const loginImageURL = edumeetConfig.loginImageURL;
+
+	return (
+		<Button
+			onClick={() => dispatch(login())}
+		>
+			<Grid container spacing={2}>
+				<Grid size={12}>
+					{ loginImageURL!='' && <img src={loginImageURL} alt='login' />}
+					{ loginImageURL=='' && <LoginIcon />}
+				</Grid>
+				<Grid size={12}>
+					Tenant {loginLabel()}		
+				</Grid>
+			</Grid>
+		</Button>
+	);
+};
+
 export default LoginButton;
diff --git a/src/components/countdowntimer/CountdownTimer.tsx b/src/components/countdowntimer/CountdownTimer.tsx
@@ -1,14 +1,17 @@
 import React, { useRef } from 'react';
-import { IconButton, Grid, Switch, TextField, styled } from '@mui/material';
+import { IconButton, Grid, styled } from '@mui/material';
 import { HighlightOff as HighlightOffIcon, Pause as PauseIcon, PlayArrow as PlayArrowIcon } from '@mui/icons-material';
 import moment from 'moment';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import { setCountdownTimerInitialTime, startCountdownTimer, stopCountdownTimer, disableCountdownTimer, enableCountdownTimer } from '../../store/actions/countdownTimerActions';
+import { setCountdownTimerInitialTime, startCountdownTimer, stopCountdownTimer } from '../../store/actions/countdownTimerActions';
 import { 
-	countdownTimerStartLabel, countdownTimerStopLabel, 
-	countdownTimerEnableLabel, countdownTimerDisableLabel, countdownTimerSetLabel } 
-	from '../translated/translatedComponents';
+	countdownTimerStartLabel, countdownTimerStopLabel }	from '../translated/translatedComponents';
 import { isMobileSelector } from '../../store/selectors';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { fullscreenConsumerSelector } from '../../store/selectors';
+import 'dayjs/locale/de';
 
 const CountdownTimerDiv = styled('div')(({ theme }) => ({
 	display: 'flex',
@@ -43,6 +46,8 @@ const CountdownTimer = () : JSX.Element => {
 			clearTimeout(timeout);
 		};
 	};
+
+	const consumer = useAppSelector(fullscreenConsumerSelector);
 
 	return (
 		<CountdownTimerDiv>
@@ -53,35 +58,25 @@ const CountdownTimer = () : JSX.Element => {
 
 				{/*  set */}
 				<Grid item xs={8}>
-					<TextField fullWidth
-						aria-label={countdownTimerSetLabel()}
-						inputRef={inputRef}
-						autoFocus={!isMobile}
-						sx={{ flexGrow: '1' }}
-						variant='outlined'
-						label={(isMobile) ? 'timer (HH:mm)' : 'timer (HH:mm:ss)'}
-						disabled={!isEnabled || (isStarted && remainingTime !== '00:00:00')}
-						type='time'
-						value={remainingTime}
-						size='small'
-						InputLabelProps={{ shrink: true }}
-						inputProps={{ step: '1' }}
-						onChange={(e) => {
-							const time = (isMobile && moment(e.target.value, 'HH:mm', true).isValid())
-								? moment(`${e.target.value}:00`, 'HH:mm:ss').format('HH:mm:ss')
-								: moment(`${e.target.value}`, 'HH:mm:ss').format('HH:mm:ss');
-
-							dispatch(setCountdownTimerInitialTime(time));
-						}}
-						onKeyDown={(e) => {
-							if (remainingTime !== '00:00:00') {
-								if (e.key === 'Enter') {
-									dispatch(startCountdownTimer());
-									e.preventDefault();
-								}
+					<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de">
+						<TimePicker
+							label={
+								consumer 
+									? '' // Hide the label if consumer is empty
+									: (isMobile ? 'timer (HH:mm)' : 'timer (HH:mm:ss)')
 							}
-						}}
-					/>
+
+							ampm={false}
+							views={[ 'hours', 'minutes', 'seconds' ]}
+							defaultValue={moment('2024-12-01T00:00')}
+							disabled={!isEnabled || (isStarted && remainingTime !== '00:00:00')}
+							onChange={(newValue: moment.Moment | null) => {
+								if (newValue)
+									dispatch(setCountdownTimerInitialTime(newValue.format('HH:mm:ss')));
+							}}
+						/>  
+					</LocalizationProvider>
+
 				</Grid>
 
 				{/* reset */}
@@ -125,7 +120,7 @@ const CountdownTimer = () : JSX.Element => {
 				</Grid>
 
 				{/*  enable/disable */}
-				<Grid item xs={1}>
+				{/* <Grid item xs={1}>
 					<Switch
 						aria-label={ !isStarted ? 
 							countdownTimerDisableLabel() : 
@@ -143,7 +138,7 @@ const CountdownTimer = () : JSX.Element => {
 						color='error'
 						size='small'
 					/>
-				</Grid>
+				</Grid> */}
 			</Grid>
 		</CountdownTimerDiv>
 	);

diff --git a/src/components/countdowntimer/CountdownTimerChip.tsx b/src/components/countdowntimer/CountdownTimerChip.tsx
@@ -38,7 +38,7 @@ const CountdownTimerChip = (): JSX.Element => {
 						backgroundColor: backgroundColor,
 						background: `linear-gradient(to right, ${indicatorColor} ${percentage}%, ${backgroundColor} ${percentage}%)`,
 						animation: `${percentage}% blink-animation 1s infinite`,
-						width: '86px',
+						width: 'auto',
 					}}
 					label={remainingTime}
 					size="small"

diff --git a/src/components/devicechooser/AudioInputChooser.tsx b/src/components/devicechooser/AudioInputChooser.tsx
@@ -67,16 +67,19 @@ const AudioInputChooser = ({
 						noDevicesLabel={noAudioInputDevicesLabel()}
 						disabled={audioDevices.length < 2 || audioInProgress}
 						devices={audioDevices}
+						extraButtons={<>{ withConfirm && (selectedAudioDevice !== audioDevice) && (
+							<Button
+								style={{ minWidth: 'fit-content' }}
+								variant='text'
+								onClick={handleConfirm}
+								disabled={audioInProgress}
+							>
+								{applyLabel()}
+							</Button>
+
+						)}</>}
 					/>
-					{ withConfirm && (selectedAudioDevice !== audioDevice) && (
-						<Button
-							variant='contained'
-							onClick={handleConfirm}
-							disabled={audioInProgress}
-						>
-							{ applyLabel() }
-						</Button>
-					)}
+
 				</ChooserDiv>
 			}
 		</>

diff --git a/src/components/devicechooser/AudioOutputChooser.tsx b/src/components/devicechooser/AudioOutputChooser.tsx
@@ -7,6 +7,7 @@ import {
 import DeviceChooser, { ChooserDiv } from './DeviceChooser';
 import { settingsActions } from '../../store/slices/settingsSlice';
 import { audioOutputDeviceLabel, noAudioOutputDevicesLabel, selectAudioOutputDeviceLabel } from '../translated/translatedComponents';
+import TestAudioOutputButton from '../audiooutputtest/AudioOutputTest';
 
 const AudioOutputChooser = (): JSX.Element => {
 	const dispatch = useAppDispatch();
@@ -36,9 +37,14 @@ const AudioOutputChooser = (): JSX.Element => {
 						noDevicesLabel={noAudioOutputDevicesLabel()}
 						disabled={audioDevices.length < 2 || audioInProgress}
 						devices={audioDevices}
+						extraButtons={<TestAudioOutputButton />						}
 					/>
 				</ChooserDiv>
 			)}
+			{audioDevices.length == 1 && (
+				<TestAudioOutputButton />
+			)}
+
 		</>
 	);
 };

diff --git a/src/components/devicechooser/DeviceChooser.tsx b/src/components/devicechooser/DeviceChooser.tsx
@@ -5,7 +5,7 @@ import {
 	Select,
 	styled
 } from '@mui/material';
-import { memo } from 'react';
+import { memo, ReactElement } from 'react';
 import { MediaDevice } from '../../services/deviceService';
 
 interface DeviceChooserProps {
@@ -17,6 +17,7 @@ interface DeviceChooserProps {
 	noDevicesLabel: string;
 	disabled: boolean;
 	devices: MediaDevice[];
+	extraButtons?: ReactElement;
 }
 
 export const ChooserDiv = styled('div')(({ theme }) => ({
@@ -35,6 +36,7 @@ const DeviceChooser = ({
 	noDevicesLabel,
 	disabled,
 	devices,
+	extraButtons
 }: DeviceChooserProps): JSX.Element => {
 	const label = devices.length ? devicesLabel : noDevicesLabel;
 	const labelId = new Date().getUTCMilliseconds();
@@ -47,6 +49,7 @@ const DeviceChooser = ({
 			<Select
 				labelId={`device-simple-select-helper-label-${labelId}`}
 				label={label}
+				startAdornment={extraButtons}
 				value={devices.length ? (value || '') : ''}
 				onChange={(event) => {
 					if (event.target.value)