ControlsButtonGroup.tsx 4.3 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import React, { useState } from 'react'
import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
import { Box, IconButton } from '@mui/material'
import MicIcon from '@mui/icons-material/Mic'
import VideocamIcon from '@mui/icons-material/Videocam'
import { useTheme, type Theme } from '@mui/material/styles'
import ClosedCaptionIcon from '@mui/icons-material/ClosedCaption'
import PresentToAllIcon from '@mui/icons-material/PresentToAll'
import MicOffIcon from '@mui/icons-material/MicOff'
import CallEndIcon from '@mui/icons-material/CallEnd'
import VideocamOffIcon from '@mui/icons-material/VideocamOff'

interface Props {
  setJoined: (x: boolean) => void
  localCameraTrack: ICameraVideoTrack | null
  localMicrophoneTrack: IMicrophoneAudioTrack | null
Thisara Kavinda's avatar
Thisara Kavinda committed
17 18
  isCaptionEnable: boolean
  setIsCaptionEnable: (value: boolean) => void
19 20
}

Thisara Kavinda's avatar
Thisara Kavinda committed
21 22 23 24 25 26 27
const ControlsButtonGroup = ({
  setJoined,
  localCameraTrack,
  localMicrophoneTrack,
  isCaptionEnable,
  setIsCaptionEnable,
}: Props) => {
28 29 30 31
  const theme: Theme = useTheme()

  const [isAudioEnable, setIsAudioEnable] = useState(localMicrophoneTrack?.enabled)
  const [isVideoEnabled, setIsVideoEnabled] = useState(localCameraTrack?.enabled)
Thisara Kavinda's avatar
Thisara Kavinda committed
32
  const [isScreenShared, setIsScreenShared] = useState(false)
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

  const toogleAudio = async () => {
    if (isAudioEnable) {
      await localMicrophoneTrack?.setEnabled(false)
      setIsAudioEnable(false)
    } else {
      await localMicrophoneTrack?.setEnabled(true)
      setIsAudioEnable(true)
    }
  }

  const toogleVideo = async () => {
    if (isVideoEnabled) {
      await localCameraTrack?.setEnabled(false)
      setIsVideoEnabled(false)
    } else {
      await localCameraTrack?.setEnabled(true)
      setIsVideoEnabled(true)
    }
  }

Thisara Kavinda's avatar
Thisara Kavinda committed
54 55 56 57 58 59 60 61
  const tooogleCaption = () => {
    setIsCaptionEnable(!isCaptionEnable)
  }

  const toogleScreenShare = () => {
    setIsScreenShared(!isScreenShared)
  }

62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
  const handleLeaveCall = () => {
    localCameraTrack?.close()
    localMicrophoneTrack?.close()
    setJoined(false)
  }

  return (
    <Box sx={{ height: '100%', width: '100%' }}>
      <IconButton
        sx={{
          borderRadius: '50%',
          padding: '15px',
          marginX: '15px',
          backgroundColor: isAudioEnable ? 'green' : '#363739',
          '&:hover': { backgroundColor: isAudioEnable ? 'green' : '#363739' },
        }}
        onClick={toogleAudio}
      >
        {isAudioEnable ? (
          <MicIcon sx={{ color: theme.palette.common.white }} />
        ) : (
          <MicOffIcon sx={{ color: theme.palette.common.white }} />
        )}
      </IconButton>
      <IconButton
        sx={{
          borderRadius: '50%',
          padding: '15px',
          marginX: '15px',
          backgroundColor: isVideoEnabled ? 'green' : '#363739',
          '&:hover': { backgroundColor: isVideoEnabled ? 'green' : '#363739' },
        }}
        onClick={toogleVideo}
      >
        {isVideoEnabled ? (
          <VideocamIcon sx={{ color: theme.palette.common.white }} />
        ) : (
          <VideocamOffIcon sx={{ color: theme.palette.common.white }} />
        )}
      </IconButton>
      <IconButton
        sx={{
          borderRadius: '50%',
          padding: '15px',
          marginX: '15px',
Thisara Kavinda's avatar
Thisara Kavinda committed
107 108
          backgroundColor: isCaptionEnable ? '#8ab4f8' : '#363739',
          '&:hover': { backgroundColor: isCaptionEnable ? '#8ab4f8' : '#363739' },
109
        }}
Thisara Kavinda's avatar
Thisara Kavinda committed
110
        onClick={tooogleCaption}
111
      >
Thisara Kavinda's avatar
Thisara Kavinda committed
112
        <ClosedCaptionIcon sx={{ color: isCaptionEnable ? 'black' : theme.palette.common.white }} />
113 114 115 116 117 118
      </IconButton>
      <IconButton
        sx={{
          borderRadius: '50%',
          padding: '15px',
          marginX: '15px',
Thisara Kavinda's avatar
Thisara Kavinda committed
119 120
          backgroundColor: isScreenShared ? 'blue' : '#363739',
          '&:hover': { backgroundColor: isScreenShared ? 'blue' : '#363739' },
121
        }}
Thisara Kavinda's avatar
Thisara Kavinda committed
122
        onClick={toogleScreenShare}
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
      >
        <PresentToAllIcon sx={{ color: theme.palette.common.white }} />
      </IconButton>
      <IconButton
        sx={{
          borderRadius: '40%',
          padding: '15px',
          paddingX: '25px',
          marginX: '15px',
          backgroundColor: 'red',
          '&:hover': { backgroundColor: 'red' },
        }}
        onClick={handleLeaveCall}
      >
        <CallEndIcon sx={{ color: theme.palette.common.white }} />
      </IconButton>
    </Box>
  )
}

export default ControlsButtonGroup