FINAL-PROJECT-FRONT/src/components/HomePage/CallBar/index.tsx

import { makeStyles, Typography } from '@material-ui/core'
import { useState,useEffect,useCallback,useRef } from 'react';
import { useSelector,useDispatch } from 'react-redux';
import io from 'socket.io-client';
import Moveable from "react-moveable";
import { OnDrag } from "react-moveable";
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import PhoneIcon from '@mui/icons-material/Phone';
import MinimizeIcon from '@mui/icons-material/Minimize';
import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
import CloseIcon from '@mui/icons-material/Close';
import ScreenShareIcon from '@mui/icons-material/ScreenShare';
import StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
import VideocamIcon from '@mui/icons-material/Videocam';
import VideocamOffIcon from '@mui/icons-material/VideocamOff';
import MicIcon from '@mui/icons-material/Mic';
import MicOffIcon from '@mui/icons-material/MicOff';
import CallEndIcon from '@mui/icons-material/CallEnd';
 
import { getChat } from '../../../redux/chat/selector';
import { getAuthorizationState } from '../../../redux/authorization/selector'; 
import { prodAwsS3,prodSocketURL, firstLetter, slicedWord } from '../../../helpers'
import { socketIdChat, mediaControllersChat } from '../../../api-data';
import { asyncGetChatById } from '../../../redux/chat/operations'
import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../redux/control/action'

const Peer = require('simple-peer')
const socket = io(prodSocketURL)

const useStyles = makeStyles({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100vw',
    height:'100vh',
    overflow: 'hidden',
    zIndex:100,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: "center",
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
  },
  shareScreenActive: {
    width: '100%',
  },
  shareScreenDisabled: {
    width: 0,
    height:0,
  },  
  modalCall: {
    background: 'rgb(36, 36, 36)',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'start',
    alignItems: 'center',
    justifyItems:"center",
    width: '34vw',
    height:'90vh',
    borderRadius: 7,
  },
  rightIcons: {
    display: 'flex',
    justifyContent: 'end',
    alignContent: 'center',
    alignItems: 'center',
    width:'100%'
  },
  rightIconWrapper: {
    color: '#ffffff',
    cursor: 'pointer',
    padding:'3px 10px 3px 10px',
    '&:hover': {
      backgroundColor:'rgb(80, 80, 80)'
    }
  },
  rightIconWrapperClose: {
    color: '#ffffff',
    cursor: 'pointer',
    padding:'3px 10px 3px 10px',
    borderTopRightRadius:7,
    '&:hover': {
      backgroundColor:'#f02a2a'
    }
  },
  bottomWrapper: {
    display: 'flex',
    justifyContent: 'center',
    padding: 5
  },
  bottomItem: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    cursor:'pointer', 
    width: 80,
  },
  bottomIcon: {
    cursor:'pointer',
  },
  bottomIconEndAccept: {
    cursor: 'pointer',
    '&:hover': {
      animation: `$shake 1s`,
      animationIterationCount:'infinite', 
    }
  },  
  ringPulsate: {
   backgroundColor:"rgb(80, 80, 80)",
   borderRadius: '50%',
   height: 60,
   width: 60,
   position: 'absolute',
   left: 10,
   top: -8,
   animation: `$pulsate 1.5s ease-out`,
   animationIterationCount: 'infinite',
   opacity: 0,
 },  
  titleIconBottom: {
    color: '#ffffff',
    fontSize: 13,
    paddingTop:7
  },
  myVideo: {
    width: 250,
    height: 'auto',
    cursor: 'pointer',
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 150,
  },  
  '@keyframes pulsate': {
    '0%': {transform: 'scale(1, 1)', opacity: 0},
    '50%': { opacity: 1},
    '100%': {transform: 'scale(1.2, 1.2)', opacity: 0},
  },
  '@keyframes shake': {
  '0%': { transform: 'rotate(0deg)'},
  '11%': { transform: 'rotate(10deg)'},
  '22%': { transform: 'rotate(20deg)'},
  '33%': { transform: 'rotate(30deg)'},
  '44%': { transform: 'rotate(20deg)'},
  '55%': { transform: 'rotate(10deg)'},
  '66%': { transform: 'rotate(0deg)'},
  '77%': { transform: 'rotate(-10deg)'},
  '88%': { transform: 'rotate(-20deg)'},
  '100%': { transform: 'rotate(-30deg)'},
  },  
})

interface ICallBar {
  callStatus:any,
  setCallStatus: any,
}

const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const { _id } = useSelector(getAuthorizationState)
  const chat = useSelector(getChat)
  const { mutedMyVideo, mutedMyAudio, socketId, companionId } = chat
  const connectionRef = useRef<any>(null);
  const myVideoRef = useRef<any>(null);
  const myAudioRef = useRef<any>(null);
  const companionVideoRef = useRef<any>(null);
  const companionAudioRef = useRef<any>(null);
  const [formChatId, setFormChatId] = useState<string>('')
  const [mySocket, setMySocket] = useState<string>('')
  const [companionSocket, setCompanionSocket] = useState<string>('')
  const [companionSignal, setCompanionSignal] = useState<string>('')
  const [name, setName] = useState<string>('')
  const [lastName, setLastName] = useState<string>('')
  const [avatarUrl, setAvatarUrl] = useState<string>('')
  const [color, setColor] = useState<string>('')
  const [number, setNumber] = useState<string>('')
  const handleMuteVideo = () => {
    if (callStatus === 'conversation') {
      mediaControllersChat(chat.companionId,!mutedMyVideo,mutedMyAudio)
    }
  }
  const handleMuteAudio = () => {
    mediaControllersChat(chat.companionId,mutedMyVideo,!mutedMyAudio)
  }  
  const handleLeaveCall = () => {
    setCallStatus('hanging up...')
    connectionRef.current.destroy();
    setCallStatus('')
  };
  const handleStartCall = useCallback(async () => {
    setCallStatus('waiting...')
    const mediaDevices: any = navigator.mediaDevices
    const stream = await mediaDevices.getDisplayMedia({
      video: true,
      audio: true
    })
    myVideoRef.current.srcObject = stream;
    myAudioRef.current.srcObject = stream;
    companionVideoRef.current.srcObject = stream;
    companionAudioRef.current.srcObject = stream;
    const peer = new Peer({
      initiator: true,
      trickle: false, 
      stream 
    });
    peer.on("signal", (data:any) => {
      socket.emit("callTo", {
        to: socketId,
        signalData: data,
        from: mySocket,
        userId: _id,
        companionId
      })
      setCallStatus('ringing...')
    });
    peer.on("stream", (companionStream: any) => {
      companionVideoRef.current.srcObject = companionStream;
      companionAudioRef.current.srcObject = companionStream;
    });
    socket.on("acceptedCall", ({ signal }: any) => {
      setCallStatus('connection')
      peer.signal(signal)
      setCallStatus('conversation')
    });
    connectionRef.current = peer; 
  },[socketId,companionId,_id,mySocket,myVideoRef,setCallStatus])

  const handleAnswerCall = useCallback(async () => {
    setCallStatus('connection')
    dispatch(actionRightIsOpen(''))
    dispatch(actionOpenPinned(false))
    dispatch(asyncGetChatById(formChatId))
    setTimeout(() => dispatch(actionScrollChat(true)), 500)
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    myVideoRef.current.srcObject = stream;
    myAudioRef.current.srcObject = stream;
    const peer = new Peer({
      initiator: false,
      trickle: false,
      stream,
    });
    peer.on("signal", (data: any) => {
      socket.emit("answerCall", {
        signal: data,
        to: companionSocket,
      });
      setCallStatus('conversation')
    });
    peer.on("stream", (companionStream: any) => {
      companionVideoRef.current.srcObject = companionStream;
      companionAudioRef.current.srcObject = companionStream;
    });
    peer.signal(companionSignal);
    connectionRef.current = peer;
  },[companionSocket,companionSignal,setCallStatus,formChatId,dispatch])

  useEffect(() => {
    socket.on("me", (id: string) => {
      setMySocket(id)
      socketIdChat(id)
    })
    socket.on('incomeCall', ({ name, lastName, avatarUrl, color, number, from, signal,_companionId }: any) => {
      if (connectionRef.current === null) {
        setCallStatus('is calling you')
        setName(name)
        setLastName(lastName)
        setAvatarUrl(avatarUrl)
        setColor(color)
        setNumber(number)
        setCompanionSocket(from)
        setCompanionSignal(signal)
        setFormChatId(_companionId)
      }
    })
  }, [setCallStatus])

  useEffect(() => {
    if(callStatus === 'requesting...') handleStartCall()
  }, [callStatus, handleStartCall])

  useEffect(() => {
    if (callStatus === '') {
      setName(chat.name)
      setLastName(chat.lastName)
      setAvatarUrl(chat.avatarUrl)
      setColor(chat.color)
      setNumber(chat.number)
    }
  }, [callStatus, chat])

  return (
    <div className={classes.container} style={{ top: callStatus ? 0 : '-100%' }}>
      <video className={classes.myVideo} ref={myVideoRef} playsInline autoPlay/>
      <Moveable
        target={myVideoRef.current}
        draggable={true}
        throttleDrag={0}
        hideDefaultLines={true}
        renderDirections={[]}
        rotationPosition="none"
        origin={false}
        onDrag={({ target, transform }: OnDrag) =>
          target!.style.transform = transform }
      />
      <div className={classes.modalCall}>
        <div className={classes.rightIcons} style={{marginBottom: true?0:40,}}>
          <div className={classes.rightIconWrapper}>
            <MinimizeIcon fontSize='small' />
          </div>
          <div className={classes.rightIconWrapper}>
            <CropLandscapeIcon fontSize='small' />
          </div>
          <div className={classes.rightIconWrapperClose} onClick={handleLeaveCall}>
            <CloseIcon fontSize='small' />
          </div>
        </div>
        {<ListItemAvatar style={{marginBottom:5}}>
          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30,zIndex:0}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
        </ListItemAvatar>}
        {<div style={{marginBottom:'auto'}}>
          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
            primaryTypographyProps={{ color: '#dfdfdf', fontSize: 20, fontWeight: 500 }}/>
          <ListItemText primary={number} primaryTypographyProps={{ color: '#ffffff', fontSize: 15, fontWeight: 500,textAlign:"center" }}/>
          <ListItemText secondary={callStatus} secondaryTypographyProps={{ color: "#dfdfdf",textAlign: "center" }} />
        </div>}
        <audio ref={companionAudioRef} playsInline controls autoPlay/>
        <video className={true ? classes.shareScreenActive : classes.shareScreenDisabled} ref={companionVideoRef} playsInline autoPlay />
        <audio ref={myAudioRef} playsInline controls autoPlay/>
        <div className={classes.bottomWrapper}>
          {!true&&<div className={classes.bottomItem}>
            <Avatar className={classes.bottomIcon}
              sx={{backgroundColor: '#ffffff',color: 'rgb(36, 36, 36)', width: 44, height: 44,zIndex:0}}>
             <ScreenShareIcon fontSize="medium" />
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>Screencast</Typography>
          </div>}
          <div className={classes.bottomItem} onClick={handleMuteVideo}>
            <Avatar className={classes.bottomIcon} 
              sx={{backgroundColor: mutedMyVideo?'#ffffff':'rgb(88, 88, 88)',color: mutedMyVideo?'rgb(36, 36, 36)':'#ffffff', width: 44, height: 44,zIndex:0}}>
              {mutedMyVideo?<VideocamIcon fontSize="medium" />:<VideocamOffIcon fontSize="medium" />}
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>{mutedMyVideo?'Start Video':'Stop Video'}</Typography>
          </div>
          <div className={classes.bottomItem}>
            <Avatar className={classes.bottomIconEndAccept} onClick={handleLeaveCall}
              sx={{backgroundColor: '#f02a2a',color: '#ffffff', width: 44, height: 44,zIndex:0}}>
              <CallEndIcon fontSize="medium" />
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>
              {callStatus === 'is calling you' ? 'Decline' : 'End Call'}
            </Typography>
          </div>
          {callStatus === 'is calling you' &&
          <div className={classes.bottomItem} style={{position:"relative"}}>
            <div className={classes.ringPulsate}></div>
            <Avatar className={classes.bottomIconEndAccept} onClick={handleAnswerCall}
              sx={{ backgroundColor: '#21f519', color: '#ffffff', width: 44, height: 44, zIndex: 0 }}>
              <PhoneIcon fontSize="medium" />
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>
              Accept
            </Typography>
          </div>}          
          <div className={classes.bottomItem}>
            <Avatar className={classes.bottomIcon} onClick={handleMuteAudio}
              sx={{backgroundColor: mutedMyAudio?'#ffffff':'rgb(88, 88, 88)',color: mutedMyAudio?'rgb(36, 36, 36)':'#ffffff', width: 44, height: 44,zIndex:0}}>
              {mutedMyAudio?<MicOffIcon fontSize="medium" />:<MicIcon fontSize="medium" />}
            </Avatar>
            <Typography variant="h6" className={classes.titleIconBottom}>{mutedMyAudio?'Unmute':'Mute'}</Typography>
          </div>
        </div>
      </div>
    </div>      
   )
}

export default CallBar