Commit 16cb267f authored by Thisara Kavinda's avatar Thisara Kavinda

refactor: introduced SymmetricGrid

parent cb91def6
import React, { useEffect, useRef, useState } from 'react'
import { Box } from '@mui/material'
import { useTheme, type Theme } from '@mui/material/styles'
import {
useLocalCameraTrack,
useLocalMicrophoneTrack,
useRemoteUsers,
usePublish,
} from 'agora-rtc-react'
import SymmetricGrid from '../SymmetricGrid/SymmetricGrid'
const MeetingLayout = () => {
const theme: Theme = useTheme()
const { localCameraTrack } = useLocalCameraTrack()
const { localMicrophoneTrack } = useLocalMicrophoneTrack()
usePublish([localMicrophoneTrack, localCameraTrack])
const remoteUsers = useRemoteUsers()
const gridContainerRef = useRef<HTMLDivElement>(null)
const [gridContainerHeight, setGridContainerHeight] = useState(0)
const [totalUsers, setTotalUsers] = useState(20)
useEffect(() => {
setTotalUsers(remoteUsers.length + 1)
}, [remoteUsers])
useEffect(() => {
if (gridContainerRef.current) {
setGridContainerHeight(gridContainerRef.current.offsetHeight)
}
}, [gridContainerRef?.current?.offsetHeight])
return (
<Box
sx={{
width: '100%',
height: '80%',
backgroundColor: theme.palette.background.default,
padding: '30px',
display: 'flex',
flexDirection: 'column',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%',
}}
ref={gridContainerRef}
>
<SymmetricGrid
totalUsers={totalUsers}
setTotalUsers={setTotalUsers}
gridContainerHeight={gridContainerHeight}
setGridContainerHeight={setGridContainerHeight}
/>
</Box>
</Box>
)
}
export default MeetingLayout
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Box, Grid } from '@mui/material' import { Box, Grid } from '@mui/material'
import { useTheme, type Theme } from '@mui/material/styles'
import useMediaQuery from '@mui/material/useMediaQuery' import useMediaQuery from '@mui/material/useMediaQuery'
import { import { LocalVideoTrack, RemoteUser, useLocalCameraTrack, useRemoteUsers } from 'agora-rtc-react'
LocalVideoTrack, import { useTheme, type Theme } from '@mui/material/styles'
RemoteUser,
useLocalCameraTrack,
useLocalMicrophoneTrack,
useRemoteUsers,
usePublish,
} from 'agora-rtc-react'
const MeetingGrid = () => { interface Props {
totalUsers: number
setTotalUsers: (value: number) => void
gridContainerHeight: number
setGridContainerHeight: (value: number) => void
}
const SymmetricGrid = ({
totalUsers,
setTotalUsers,
gridContainerHeight,
setGridContainerHeight,
}: Props) => {
const theme: Theme = useTheme() const theme: Theme = useTheme()
const isSm = useMediaQuery(theme.breakpoints.up('sm')) const isSm = useMediaQuery(theme.breakpoints.up('sm'))
const isMd = useMediaQuery(theme.breakpoints.up('md')) const isMd = useMediaQuery(theme.breakpoints.up('md'))
const isLg = useMediaQuery(theme.breakpoints.up('lg')) const isLg = useMediaQuery(theme.breakpoints.up('lg'))
const { localCameraTrack } = useLocalCameraTrack() const { localCameraTrack } = useLocalCameraTrack()
const { localMicrophoneTrack } = useLocalMicrophoneTrack()
usePublish([localMicrophoneTrack, localCameraTrack])
const remoteUsers = useRemoteUsers() const remoteUsers = useRemoteUsers()
const gridContainerRef = useRef<HTMLDivElement>(null)
const [gridContainerHeight, setGridContainerHeight] = useState(0)
const [totalUsers, setTotalUsers] = useState(20)
const [itemOffset, setItemOffset] = useState(12) const [itemOffset, setItemOffset] = useState(12)
const [itemHeight, setItemHeight] = useState(230) const [itemHeight, setItemHeight] = useState(230)
const [numOfItems, setNumOfItems] = useState(1) const [numOfItems, setNumOfItems] = useState(1)
...@@ -40,12 +39,6 @@ const MeetingGrid = () => { ...@@ -40,12 +39,6 @@ const MeetingGrid = () => {
setNumOfItems(totalUsers > maxUsersDisplay ? maxUsersDisplay : totalUsers) setNumOfItems(totalUsers > maxUsersDisplay ? maxUsersDisplay : totalUsers)
}, [totalUsers]) }, [totalUsers])
useEffect(() => {
if (gridContainerRef.current) {
setGridContainerHeight(gridContainerRef.current.offsetHeight)
}
}, [gridContainerRef?.current?.offsetHeight])
useEffect(() => { useEffect(() => {
switch (numOfItems) { switch (numOfItems) {
case 1: case 1:
...@@ -132,37 +125,7 @@ const MeetingGrid = () => { ...@@ -132,37 +125,7 @@ const MeetingGrid = () => {
} }
}, [totalUsers, isSm, isMd, isLg, gridContainerHeight, numOfItems]) }, [totalUsers, isSm, isMd, isLg, gridContainerHeight, numOfItems])
// const onUserPublish = async (user: IAgoraRTCRemoteUser, mediaType: 'video' | 'audio') => {
// if (mediaType === 'video') {
// const remoteTrack = await agoraEngine.subscribe(user, mediaType)
// remoteTrack.play('remote-video')
// }
// if (mediaType === 'audio') {
// const remoteTrack = await agoraEngine.subscribe(user, mediaType)
// remoteTrack.play()
// }
// }
return ( return (
<Box
sx={{
width: '100%',
height: '80%',
backgroundColor: theme.palette.background.default,
padding: '30px',
display: 'flex',
flexDirection: 'column',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%',
}}
ref={gridContainerRef}
>
<Box sx={{ display: 'flex', width: '100%' }}> <Box sx={{ display: 'flex', width: '100%' }}>
<Grid container spacing={3} width={'100%'} padding={0}> <Grid container spacing={3} width={'100%'} padding={0}>
<Grid item xs={itemOffset}> <Grid item xs={itemOffset}>
...@@ -200,9 +163,7 @@ const MeetingGrid = () => { ...@@ -200,9 +163,7 @@ const MeetingGrid = () => {
))} ))}
</Grid> </Grid>
</Box> </Box>
</Box>
</Box>
) )
} }
export default MeetingGrid export default SymmetricGrid
...@@ -5,7 +5,7 @@ import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng' ...@@ -5,7 +5,7 @@ import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
import { Box } from '@mui/material' import { Box } from '@mui/material'
import { useTheme, type Theme } from '@mui/material/styles' import { useTheme, type Theme } from '@mui/material/styles'
import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading' import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading'
import MeetingGrid from '../../Components/MeetingGrid/MeetingGrid' import MeetingGrid from '../../Components/MeetingLayout/MeetingLayout'
interface AgoraContextType { interface AgoraContextType {
localCameraTrack: ICameraVideoTrack | null localCameraTrack: ICameraVideoTrack | null
......
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