feat: implemented captions

src/Components/ControlCenter/ControlCenter.tsx

@@ -8,9 +8,17 @@ interface Props {
   setJoined: (x: boolean) => void
   localCameraTrack: ICameraVideoTrack | 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 [currentTime, setCurrentTime] = React.useState(new Date())
@@ -72,6 +80,8 @@ const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
           setJoined={setJoined}
           localCameraTrack={localCameraTrack}
           localMicrophoneTrack={localMicrophoneTrack}
+          isCaptionEnable={isCaptionEnable}
+          setIsCaptionEnable={setIsCaptionEnable}
         />
       </Box>
       <Box
@@ -80,7 +90,7 @@ const ControlCenter = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'flex-end',
-          paddingRight: '50px',
+          paddingRight: '20px',
           alignItems: 'center',
         }}
       ></Box>

src/Components/ControlsButtonGroup/ControlsButtonGroup.tsx

@@ -14,13 +14,22 @@ interface Props {
   setJoined: (x: boolean) => void
   localCameraTrack: ICameraVideoTrack | 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 [isAudioEnable, setIsAudioEnable] = useState(localMicrophoneTrack?.enabled)
   const [isVideoEnabled, setIsVideoEnabled] = useState(localCameraTrack?.enabled)
+  const [isScreenShared, setIsScreenShared] = useState(false)
 
   const toogleAudio = async () => {
     if (isAudioEnable) {
@@ -42,6 +51,14 @@ const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack
     }
   }
 
+  const tooogleCaption = () => {
+    setIsCaptionEnable(!isCaptionEnable)
+  }
+
+  const toogleScreenShare = () => {
+    setIsScreenShared(!isScreenShared)
+  }
+
   const handleLeaveCall = () => {
     localCameraTrack?.close()
     localMicrophoneTrack?.close()
@@ -87,20 +104,22 @@ const ControlsButtonGroup = ({ setJoined, localCameraTrack, localMicrophoneTrack
           borderRadius: '50%',
           padding: '15px',
           marginX: '15px',
-          backgroundColor: '#363739',
-          '&:hover': { backgroundColor: '#363739' },
+          backgroundColor: isCaptionEnable ? '#8ab4f8' : '#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
         sx={{
           borderRadius: '50%',
           padding: '15px',
           marginX: '15px',
-          backgroundColor: '#363739',
-          '&:hover': { backgroundColor: '#363739' },
+          backgroundColor: isScreenShared ? 'blue' : '#363739',
+          '&:hover': { backgroundColor: isScreenShared ? 'blue' : '#363739' },
         }}
+        onClick={toogleScreenShare}
       >
         <PresentToAllIcon sx={{ color: theme.palette.common.white }} />
       </IconButton>

src/Components/MeetingLayout/MeetingLayout.tsx

@@ -30,6 +30,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
   const [totalUsers, setTotalUsers] = useState(0)
   const [isPinned, setIsPinned] = useState(false)
   const [pinnedUser, setPinnedUser] = useState<IAgoraRTCRemoteUser | null>(null)
+  const [isCaptionEnable, setIsCaptionEnable] = useState(false)
 
   useEffect(() => {
     setTotalUsers(remoteUsers.length + 1)
@@ -39,7 +40,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
     if (gridContainerRef.current) {
       setGridContainerHeight(gridContainerRef.current.offsetHeight)
     }
-  }, [gridContainerRef?.current?.offsetHeight])
+  }, [gridContainerRef?.current?.offsetHeight, isCaptionEnable])
 
   const handleUserLeft = (user: IAgoraRTCRemoteUser) => {
     if (user.uid === pinnedUser?.uid) {
@@ -67,7 +68,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
           display: 'flex',
           flexDirection: 'row',
           width: '100%',
-          height: '80%',
+          height: isCaptionEnable ? '70%' : '85%',
         }}
         ref={gridContainerRef}
       >
@@ -91,11 +92,24 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
           />
         )}
       </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' }}>
         <ControlCenter
           setJoined={setJoined}
           localCameraTrack={localCameraTrack}
           localMicrophoneTrack={localMicrophoneTrack}
+          isCaptionEnable={isCaptionEnable}
+          setIsCaptionEnable={setIsCaptionEnable}
         />
       </Box>
     </Box>

src/index.css

@@ -26,4 +26,5 @@ code {
 
 video {
   border-radius: 15px;
+  object-fit: cover;
 }