Commit 0c187126 authored by Thisara Kavinda's avatar Thisara Kavinda

feat: implemented captions

parent 6f5da362
...@@ -8,9 +8,17 @@ interface Props { ...@@ -8,9 +8,17 @@ interface Props {
setJoined: (x: boolean) => void setJoined: (x: boolean) => void
localCameraTrack: ICameraVideoTrack | null localCameraTrack: ICameraVideoTrack | null
localMicrophoneTrack: IMicrophoneAudioTrack | null localMicrophoneTrack: IMicrophoneAudioTrack | null
isCaptionEnable: boolean
setIsCaptionEnable: (value: boolean) => void
} }
const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Props) => { const ControlCenter = ({
setJoined,
localCameraTrack,
localMicrophoneTrack,
isCaptionEnable,
setIsCaptionEnable,
}: Props) => {
const theme: Theme = useTheme() const theme: Theme = useTheme()
const [currentTime, setCurrentTime] = React.useState(new Date()) const [currentTime, setCurrentTime] = React.useState(new Date())
...@@ -72,6 +80,8 @@ const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr ...@@ -72,6 +80,8 @@ const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
setJoined={setJoined} setJoined={setJoined}
localCameraTrack={localCameraTrack} localCameraTrack={localCameraTrack}
localMicrophoneTrack={localMicrophoneTrack} localMicrophoneTrack={localMicrophoneTrack}
isCaptionEnable={isCaptionEnable}
setIsCaptionEnable={setIsCaptionEnable}
/> />
</Box> </Box>
<Box <Box
...@@ -80,7 +90,7 @@ const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr ...@@ -80,7 +90,7 @@ const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end', justifyContent: 'flex-end',
paddingRight: '50px', paddingRight: '20px',
alignItems: 'center', alignItems: 'center',
}} }}
></Box> ></Box>
......
...@@ -14,13 +14,22 @@ interface Props { ...@@ -14,13 +14,22 @@ interface Props {
setJoined: (x: boolean) => void setJoined: (x: boolean) => void
localCameraTrack: ICameraVideoTrack | null localCameraTrack: ICameraVideoTrack | null
localMicrophoneTrack: IMicrophoneAudioTrack | null localMicrophoneTrack: IMicrophoneAudioTrack | null
isCaptionEnable: boolean
setIsCaptionEnable: (value: boolean) => void
} }
const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Props) => { const ControlsButtonGroup = ({
setJoined,
localCameraTrack,
localMicrophoneTrack,
isCaptionEnable,
setIsCaptionEnable,
}: Props) => {
const theme: Theme = useTheme() const theme: Theme = useTheme()
const [isAudioEnable, setIsAudioEnable] = useState(localMicrophoneTrack?.enabled) const [isAudioEnable, setIsAudioEnable] = useState(localMicrophoneTrack?.enabled)
const [isVideoEnabled, setIsVideoEnabled] = useState(localCameraTrack?.enabled) const [isVideoEnabled, setIsVideoEnabled] = useState(localCameraTrack?.enabled)
const [isScreenShared, setIsScreenShared] = useState(false)
const toogleAudio = async () => { const toogleAudio = async () => {
if (isAudioEnable) { if (isAudioEnable) {
...@@ -42,6 +51,14 @@ const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack ...@@ -42,6 +51,14 @@ const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack
} }
} }
const tooogleCaption = () => {
setIsCaptionEnable(!isCaptionEnable)
}
const toogleScreenShare = () => {
setIsScreenShared(!isScreenShared)
}
const handleLeaveCall = () => { const handleLeaveCall = () => {
localCameraTrack?.close() localCameraTrack?.close()
localMicrophoneTrack?.close() localMicrophoneTrack?.close()
...@@ -87,20 +104,22 @@ const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack ...@@ -87,20 +104,22 @@ const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack
borderRadius: '50%', borderRadius: '50%',
padding: '15px', padding: '15px',
marginX: '15px', marginX: '15px',
backgroundColor: '#363739', backgroundColor: isCaptionEnable ? '#8ab4f8' : '#363739',
'&:hover': { backgroundColor: '#363739' }, '&:hover': { backgroundColor: isCaptionEnable ? '#8ab4f8' : '#363739' },
}} }}
onClick={tooogleCaption}
> >
<ClosedCaptionIcon sx={{ color: theme.palette.common.white }} /> <ClosedCaptionIcon sx={{ color: isCaptionEnable ? 'black' : theme.palette.common.white }} />
</IconButton> </IconButton>
<IconButton <IconButton
sx={{ sx={{
borderRadius: '50%', borderRadius: '50%',
padding: '15px', padding: '15px',
marginX: '15px', marginX: '15px',
backgroundColor: '#363739', backgroundColor: isScreenShared ? 'blue' : '#363739',
'&:hover': { backgroundColor: '#363739' }, '&:hover': { backgroundColor: isScreenShared ? 'blue' : '#363739' },
}} }}
onClick={toogleScreenShare}
> >
<PresentToAllIcon sx={{ color: theme.palette.common.white }} /> <PresentToAllIcon sx={{ color: theme.palette.common.white }} />
</IconButton> </IconButton>
......
...@@ -30,6 +30,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr ...@@ -30,6 +30,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
const [totalUsers, setTotalUsers] = useState(0) const [totalUsers, setTotalUsers] = useState(0)
const [isPinned, setIsPinned] = useState(false) const [isPinned, setIsPinned] = useState(false)
const [pinnedUser, setPinnedUser] = useState<IAgoraRTCRemoteUser | null>(null) const [pinnedUser, setPinnedUser] = useState<IAgoraRTCRemoteUser | null>(null)
const [isCaptionEnable, setIsCaptionEnable] = useState(false)
useEffect(() => { useEffect(() => {
setTotalUsers(remoteUsers.length + 1) setTotalUsers(remoteUsers.length + 1)
...@@ -39,7 +40,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr ...@@ -39,7 +40,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
if (gridContainerRef.current) { if (gridContainerRef.current) {
setGridContainerHeight(gridContainerRef.current.offsetHeight) setGridContainerHeight(gridContainerRef.current.offsetHeight)
} }
}, [gridContainerRef?.current?.offsetHeight]) }, [gridContainerRef?.current?.offsetHeight, isCaptionEnable])
const handleUserLeft = (user: IAgoraRTCRemoteUser) => { const handleUserLeft = (user: IAgoraRTCRemoteUser) => {
if (user.uid === pinnedUser?.uid) { if (user.uid === pinnedUser?.uid) {
...@@ -67,7 +68,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr ...@@ -67,7 +68,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
height: '80%', height: isCaptionEnable ? '70%' : '85%',
}} }}
ref={gridContainerRef} ref={gridContainerRef}
> >
...@@ -91,11 +92,24 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr ...@@ -91,11 +92,24 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
/> />
)} )}
</Box> </Box>
{isCaptionEnable && (
<Box
sx={{
height: '10%',
padding: '20px 40px',
backgroundColor: '#363739',
borderRadius: '20px',
marginRight: '20px',
}}
></Box>
)}
<Box sx={{ height: '10%', width: '100%', display: 'flex', marginBottom: '40px' }}> <Box sx={{ height: '10%', width: '100%', display: 'flex', marginBottom: '40px' }}>
<ControlCenter <ControlCenter
setJoined={setJoined} setJoined={setJoined}
localCameraTrack={localCameraTrack} localCameraTrack={localCameraTrack}
localMicrophoneTrack={localMicrophoneTrack} localMicrophoneTrack={localMicrophoneTrack}
isCaptionEnable={isCaptionEnable}
setIsCaptionEnable={setIsCaptionEnable}
/> />
</Box> </Box>
</Box> </Box>
......
...@@ -26,4 +26,5 @@ code { ...@@ -26,4 +26,5 @@ code {
video { video {
border-radius: 15px; border-radius: 15px;
object-fit: cover;
} }
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