Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
S
SpeakEzy_Frontend
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Thisara Kavinda
SpeakEzy_Frontend
Commits
16cb267f
Commit
16cb267f
authored
Mar 15, 2024
by
Thisara Kavinda
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
refactor: introduced SymmetricGrid
parent
cb91def6
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
119 additions
and
92 deletions
+119
-92
src/Components/MeetingLayout/MeetingLayout.tsx
src/Components/MeetingLayout/MeetingLayout.tsx
+66
-0
src/Components/SymmetricGrid/SymmetricGrid.tsx
src/Components/SymmetricGrid/SymmetricGrid.tsx
+52
-91
src/Services/AgoraManager/AgoraManager.tsx
src/Services/AgoraManager/AgoraManager.tsx
+1
-1
No files found.
src/Components/MeetingLayout/MeetingLayout.tsx
0 → 100644
View file @
16cb267f
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
src/Components/
MeetingGrid/Meeting
Grid.tsx
→
src/Components/
SymmetricGrid/Symmetric
Grid.tsx
View file @
16cb267f
import
React
,
{
useEffect
,
use
Ref
,
use
State
}
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
Meeting
Grid
export
default
Symmetric
Grid
src/Services/AgoraManager/AgoraManager.tsx
View file @
16cb267f
...
...
@@ -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/Meeting
Grid/MeetingGrid
'
import
MeetingGrid
from
'
../../Components/Meeting
Layout/MeetingLayout
'
interface
AgoraContextType
{
localCameraTrack
:
ICameraVideoTrack
|
null
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment