start work on video share and call

src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

@@ -15,7 +15,7 @@ import MicIcon from '@mui/icons-material/Mic';
 import MicOffIcon from '@mui/icons-material/MicOff';
 import CallEndIcon from '@mui/icons-material/CallEnd';
 import Moveable from "react-moveable";
-import {OnDrag,OnResize,OnScale} from "react-moveable";
+import { OnDrag } from "react-moveable";
 
 import { getChat } from '../../../../../../redux/chat/selector';
 import { prodAwsS3,firstLetter,slicedWord } from '../../../../../../helpers'
@@ -28,7 +28,12 @@ const useStyles = makeStyles({
     width: '100vw',
     height: '100vh',
     zIndex: 100,
-    overflowY: 'hidden',
+    overflow: 'hidden',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: "center",
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
   },
   shareScreenActive: {
     width: '90%',
@@ -42,7 +47,6 @@ const useStyles = makeStyles({
   },  
   modalCall: {
     background: 'rgb(36, 36, 36)',
-    position: 'absolute',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'start',
@@ -50,8 +54,6 @@ const useStyles = makeStyles({
     justifyItems:"center",
     width: '34vw',
     height:'50vh',
-    left: '33vw',
-    bottom: '25vh',
     borderRadius: 7,
   },
   rightIcons: {
@@ -127,12 +129,12 @@ interface ICallModal {
 const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
   const classes = useStyles()
   const { name, lastName, avatarUrl, color } = useSelector(getChat)
-  const [mute, setMute] = useState<boolean>(false)
+  const [audio, setAudio] = useState<boolean>(true)
+  const [video, setVideo] = useState<any>(false)
   const [share, setShare] = useState<any>(null)
-  const target = videoRef.current
   const handleShareScreen = async () => {
     const displayMediaStreamConstraints = {
-      video: true 
+      video: true,
     };
     const navigator:any = window.navigator
     const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints);
@@ -140,36 +142,53 @@ const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
     setShare(true)
     stream.getVideoTracks()[0].onended = () => setShare(false)
   };
-  const handleMute = () => setMute(prevState => !prevState)
+  const handleAudio = () => setAudio(prevState => !prevState)
+  const handleVideo = async () => {
+    const displayMediaStreamConstraints = {
+      audio: false,
+      video: {
+        width: {
+          min: 1280,
+          ideal: 1920,
+          max: 2560,
+        },
+        height: {
+          min: 720,
+          ideal: 1080,
+          max: 1440
+        },
+      facingMode: 'user'
+      },
+    };
+    const navigator:any = window.navigator
+    const stream = await navigator.mediaDevices.getUserMedia(displayMediaStreamConstraints)
+    
+    if (!video) {
+      setVideo(true)
+      videoRef.current.srcObject = stream;
+    } else {
+      videoRef.current.srcObject = null;
+      stream.getVideoTracks()[0].stop()
+      setVideo(false)
+    }
+  }
   const handleCloseCallModal = () => setModalCall(false)
   // requesting, waiting ,ringing, hanging up,line busy
 
   return (
     <div className={classes.overlay} >
-      <video ref={videoRef} style={{minWidth:100,minHeight:70}} playsInline muted autoPlay/>
+      <video ref={videoRef} style={{width: video ? 250 : 0, height: video ? 'auto' : 0, cursor: 'pointer',
+        position: 'absolute', top: 0, left: 0, zIndex: 100}} playsInline autoPlay muted/>
       <Moveable
-        target={target}
-        container={null}
-        origin={true}
-        edge={false}
+        target={videoRef.current}
         draggable={true}
         throttleDrag={0}
+        hideDefaultLines={true}
+        renderDirections={[]}
+        rotationPosition="none"
+        origin={false}
         onDrag={({ target, transform }: OnDrag) =>
           target!.style.transform = transform }
-        keepRatio={true}
-        resizable={true}
-        throttleResize={0}
-        onResize={({target, width, height,delta}: OnResize) => {
-          delta[0] && (target!.style.width = `${width}px`);
-          delta[1] && (target!.style.height = `${height}px`);
-        }}
-        scalable={true}
-        throttleScale={0}
-        onScale={({target, scale, transform}: OnScale) => {
-          target!.style.transform = transform;
-        }}
-        rotatable={false}
-        pinchable={true}
       />
       <div className={classes.modalCall}>
         <div className={classes.rightIcons} style={{marginBottom: share?0:40,}}>
@@ -185,7 +204,7 @@ const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
         </div>
         {!share&&<ListItemAvatar style={{marginBottom:15}}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
-            sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
+            sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30,zIndex:0}}>
              {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>
         </ListItemAvatar>}
@@ -202,31 +221,31 @@ const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
         <div className={classes.bottomWrapper}>
           {!share&&<div className={classes.bottomItem}>
             <Avatar className={classes.bottomIcon} onClick={handleShareScreen}
-              sx={{backgroundColor: '#ffffff',color: 'rgb(36, 36, 36)', width: 44, height: 44}}>
+              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}>
-            <Avatar className={classes.bottomIcon}
-              sx={{backgroundColor: share?'rgb(88, 88, 88)':'#ffffff',color: share?'#ffffff':'rgb(36, 36, 36)', width: 44, height: 44}}>
-              <VideocamOffIcon fontSize="medium" />
+            <Avatar className={classes.bottomIcon} onClick={handleVideo}
+              sx={{backgroundColor: video?'rgb(88, 88, 88)':'#ffffff',color: video?'#ffffff':'rgb(36, 36, 36)', width: 44, height: 44,zIndex:0}}>
+              {video?<VideocamOffIcon fontSize="medium" />:<VideocamIcon fontSize="medium" />}
             </Avatar>
-            <Typography variant="h6" className={classes.titleIconBottom}>Start Video</Typography>
+            <Typography variant="h6" className={classes.titleIconBottom}>{video?'Stop Video':'Start Video'}</Typography>
           </div>
           <div className={classes.bottomItem}>
             <Avatar className={classes.bottomIcon}
-              sx={{backgroundColor: '#f02a2a',color: '#ffffff', width: 44, height: 44}}>
+              sx={{backgroundColor: '#f02a2a',color: '#ffffff', width: 44, height: 44,zIndex:0}}>
               <CallEndIcon fontSize="medium" />
             </Avatar>
             <Typography variant="h6" className={classes.titleIconBottom}>End Call</Typography>
           </div>
           <div className={classes.bottomItem}>
-            <Avatar className={classes.bottomIcon} onClick={handleMute}
-              sx={{backgroundColor: mute?'#ffffff':'rgb(88, 88, 88)',color: mute?'rgb(36, 36, 36)':'#ffffff', width: 44, height: 44}}>
-              {mute?<MicOffIcon fontSize="medium" />:<MicIcon fontSize="medium" />}
+            <Avatar className={classes.bottomIcon} onClick={handleAudio}
+              sx={{backgroundColor: audio?'rgb(88, 88, 88)':'#ffffff',color: audio?'#ffffff':'rgb(36, 36, 36)', width: 44, height: 44,zIndex:0}}>
+              {audio?<MicIcon fontSize="medium" />:<MicOffIcon fontSize="medium" />}
             </Avatar>
-            <Typography variant="h6" className={classes.titleIconBottom}>{mute?'Unmute':'Mute'}</Typography>
+            <Typography variant="h6" className={classes.titleIconBottom}>{audio?'Mute':'Unmute'}</Typography>
           </div>
         </div>
       </div>