Skip to content

S
SpeakEzy_Frontend
Commit 37f6fb5d authored by Thisara Kavinda's avatar Thisara Kavinda
Browse files
Options

refactor: created MeetingLoading component

parent b188752b
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 102 deletions
src/Components/MeetingLoading/MeetingLoading.tsx 0 → 100644
View file @ 37f6fb5d
import { Box, Button, CircularProgress, Typography } from '@mui/material'
import { useTheme, type Theme } from '@mui/material/styles'
interface Props {
variant: 'joining' | 'loading' | 'error'
}
const MeetingLoading = ({ variant }: Props) => {
const theme: Theme = useTheme()
const renderComponent = (): JSX.Element => {
switch (variant) {
case 'joining':
return (
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Typography
variant='h3'
textAlign={'center'}
sx={{ fontSize: '18px', color: theme.palette.common.white, fontWeight: '600' }}
>
Joining the meeting...
</Typography>
</Box>
)
case 'loading':
return (
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CircularProgress
size={'md'}
sx={{
color: theme.palette.common.white,
height: '20px',
width: '20px',
marginRight: '20px',
}}
/>
<Typography
variant='h3'
textAlign={'center'}
sx={{ fontSize: '18px', color: theme.palette.common.white, fontWeight: '600' }}
>
Loading devices
</Typography>
</Box>
</Box>
)
case 'error':
return (
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box
sx={{
backgroundColor: '#262625',
borderRadius: '20px',
padding: '20px 40px',
width: '30%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Typography
variant='h3'
textAlign={'center'}
sx={{
fontSize: '18px',
color: theme.palette.common.white,
fontWeight: '600',
marginTop: '10px',
}}
>
Unexpected error occurred. Please try reloading the page. 😞
</Typography>
<Button
variant='text'
sx={{
color: theme.palette.primary.main,
borderRadius: '10px',
padding: '10px 20px',
marginTop: '10px',
fontWeight: '600',
}}
onClick={() => window.location.reload()}
>
Reload
</Button>
</Box>
</Box>
)
default:
return <></>
}
}
return renderComponent()
}
export default MeetingLoading
src/Services/AgoraManager/AgoraManager.tsx
View file @ 37f6fb5d
......@@ -12,8 +12,9 @@ import {
import React, { createContext, useContext, useEffect } from 'react'
import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
import { Box, Button, CircularProgress, Typography } from '@mui/material'
import { Box } from '@mui/material'
import { useTheme, type Theme } from '@mui/material/styles'
import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading'
interface AgoraContextType {
localCameraTrack: ICameraVideoTrack | null
......@@ -82,59 +83,9 @@ export const AgoraManager = ({ children }: { children: React.ReactNode }) => {
return (
<Box sx={{ width: '100%', height: '100%', backgroundColor: theme.palette.background.default }}>
{isJoining ? (
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Typography
variant='h3'
textAlign={'center'}
sx={{ fontSize: '18px', color: theme.palette.common.white, fontWeight: '600' }}
>
Joining the meeting...
</Typography>
</Box>
<MeetingLoading variant='joining' />
) : isLoadingCam || isLoadingMic ? (
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CircularProgress
size={'md'}
sx={{
color: theme.palette.common.white,
height: '20px',
width: '20px',
marginRight: '20px',
}}
/>
<Typography
variant='h3'
textAlign={'center'}
sx={{ fontSize: '18px', color: theme.palette.common.white, fontWeight: '600' }}
>
Loading devices
</Typography>
</Box>
</Box>
<MeetingLoading variant='loading' />
) : isJoined ? (
<AgoraProvider
localCameraTrack={localCameraTrack}
......@@ -155,58 +106,10 @@ export const AgoraManager = ({ children }: { children: React.ReactNode }) => {
</div>
</AgoraProvider>
) : joinError ? (
<Box
sx={{
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box
sx={{
backgroundColor: '#262625',
borderRadius: '20px',
padding: '20px 40px',
width: '30%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Typography
variant='h3'
textAlign={'center'}
sx={{
fontSize: '18px',
color: theme.palette.common.white,
fontWeight: '600',
marginTop: '10px',
}}
>
Unexpected error occurred. Please try reloading the page. 😞
</Typography>
<Button
variant='text'
sx={{
color: theme.palette.primary.main,
borderRadius: '10px',
padding: '10px 20px',
marginTop: '10px',
fontWeight: '600',
}}
onClick={() => window.location.reload()}
>
Reload
</Button>
</Box>
</Box>
<MeetingLoading variant='error' />
) : null}
</Box>
)
}
// Export the AgoraManager component as the default export
export default AgoraManager
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment