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 { useTheme, type Theme } from '@mui/material/styles'
import useMediaQuery from '@mui/material/useMediaQuery'
import {
LocalVideoTrack,
RemoteUser,
useLocalCameraTrack,
useLocalMicrophoneTrack,
useRemoteUsers,
usePublish,
} from 'agora-rtc-react'
import { LocalVideoTrack, RemoteUser, useLocalCameraTrack, useRemoteUsers } from 'agora-rtc-react'
import { useTheme, type Theme } from '@mui/material/styles'
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 isSm = useMediaQuery(theme.breakpoints.up('sm'))
const isMd = useMediaQuery(theme.breakpoints.up('md'))
const isLg = useMediaQuery(theme.breakpoints.up('lg'))
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)
const [itemOffset, setItemOffset] = useState(12)
const [itemHeight, setItemHeight] = useState(230)
const [numOfItems, setNumOfItems] = useState(1)
......@@ -40,12 +39,6 @@ const MeetingGrid = () => {
setNumOfItems(totalUsers > maxUsersDisplay ? maxUsersDisplay : totalUsers)
}, [totalUsers])
useEffect(() => {
if (gridContainerRef.current) {
setGridContainerHeight(gridContainerRef.current.offsetHeight)
}
}, [gridContainerRef?.current?.offsetHeight])
useEffect(() => {
switch (numOfItems) {
case 1:
......@@ -132,77 +125,45 @@ const MeetingGrid = () => {
}
}, [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 (
<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%' }}>
<Grid container spacing={3} width={'100%'} padding={0}>
<Grid item xs={itemOffset}>
<Box
sx={{
backgroundColor: '#262625',
height: `${itemHeight}px`,
borderRadius: '15px',
}}
>
<LocalVideoTrack
track={localCameraTrack}
play={true}
style={{ width: '100%', height: '100%', borderRadius: '20%' }}
/>
</Box>
</Grid>
{remoteUsers.map((remoteUser, index) => (
<Grid item xs={itemOffset} key={index}>
<Box
sx={{
backgroundColor: '#262625',
height: `${itemHeight}px`,
borderRadius: '15px',
}}
>
<RemoteUser
user={remoteUser}
playVideo={true}
playAudio={true}
style={{ width: '100%', height: '100%', borderRadius: '15px' }}
/>
</Box>
</Grid>
))}
<Box sx={{ display: 'flex', width: '100%' }}>
<Grid container spacing={3} width={'100%'} padding={0}>
<Grid item xs={itemOffset}>
<Box
sx={{
backgroundColor: '#262625',
height: `${itemHeight}px`,
borderRadius: '15px',
}}
>
<LocalVideoTrack
track={localCameraTrack}
play={true}
style={{ width: '100%', height: '100%', borderRadius: '20%' }}
/>
</Box>
</Grid>
{remoteUsers.map((remoteUser, index) => (
<Grid item xs={itemOffset} key={index}>
<Box
sx={{
backgroundColor: '#262625',
height: `${itemHeight}px`,
borderRadius: '15px',
}}
>
<RemoteUser
user={remoteUser}
playVideo={true}
playAudio={true}
style={{ width: '100%', height: '100%', borderRadius: '15px' }}
/>
</Box>
</Grid>
</Box>
</Box>
))}
</Grid>
</Box>
)
}
export default MeetingGrid
export default SymmetricGrid
......@@ -5,7 +5,7 @@ import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
import { Box } from '@mui/material'
import { useTheme, type Theme } from '@mui/material/styles'
import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading'
import MeetingGrid from '../../Components/MeetingGrid/MeetingGrid'
import MeetingGrid from '../../Components/MeetingLayout/MeetingLayout'
interface AgoraContextType {
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