redy to push

src/components/HomePage/CallBar/index.tsx

@@ -16,12 +16,15 @@ 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 StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
+import ScreenShareIcon from '@mui/icons-material/ScreenShare';
 import Alert from '@mui/material/Alert';
 
 import { getChat } from '../../../redux/chat/selector';
 import { getAuthorizationState } from '../../../redux/authorization/selector'; 
 import { prodAwsS3,prodBaseURL,prodSocketURL, firstLetter, slicedWord,getTimeBySeconds,playNotification } from '../../../helpers'
 import { socketIdChat } from '../../../api-data';
+import { current } from '@reduxjs/toolkit';
 
 const Peer = require('simple-peer')
 const socket = io(prodSocketURL)
@@ -168,6 +171,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
   const [mutedMyAudio,setMutedMyAudio] = useState<boolean>(false)
   const [companionSocket, setCompanionSocket] = useState<string>('')
   const [myStream, setMyStream] = useState<any>(null)
+  const [myShareStream, setMyShareStream] = useState<any>(null)
   const [companionSignal, setCompanionSignal] = useState<any>(null)
   const [name, setName] = useState<string>('')
   const [lastName, setLastName] = useState<string>('')
@@ -197,6 +201,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
       setAudioHtml(null)
     }
     if(myStream) myStream.getTracks().forEach((track:any) => track.stop())
+    setMyShareStream(null)
     setMutedMyVideo(false)
     setMutedMyAudio(false)
     setCompanionSocket('')
@@ -220,12 +225,41 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
   const handleConversationLast = (e: any) =>
     cetConversationLast(getTimeBySeconds(e.target.currentTime))
   
+  const handleMuteShare = async () => {
+    try {
+      if (myStream) {
+        const mediaDevices: any = navigator.mediaDevices;
+        const stream = await mediaDevices.getDisplayMedia({
+          video: true,
+          audio: true
+        })
+        setMyShareStream(stream)
+        const shareTrack = stream.getVideoTracks()[0]
+        const videoTrack = myStream.getVideoTracks()[0]
+        const senders = connectionRef.current._pc.getSenders()
+        const replaceStream = (track:any) => senders.forEach((sender: any) => sender.track.kind === "video" &&
+           sender.replaceTrack(track))
+        shareTrack.onended = () => {
+          setMyShareStream(null)
+          replaceStream(videoTrack)
+        }
+        replaceStream(shareTrack)
+      } else {
+        setAlert(`You can not enable Share before stream started`)
+        setTimeout(() => setAlert(''),1000)
+      }
+    } catch (e: any) {
+      setCallStatus('permission not allowed')
+    }
+  }  
+  
   const handleMuteVideo = () => {
     if (myStream&&myStream.getVideoTracks()[0]) {
       setMutedMyVideo(!mutedMyVideo)
       myStream.getVideoTracks()[0].enabled = !myStream.getVideoTracks()[0].enabled
     } else {
-      setAlert(`You can not ${mutedMyVideo?'enable':'disable'} Video before stream started`)
+      setAlert(`You can not ${mutedMyVideo ? 'enable' : 'disable'} Video before stream started`)
+      setTimeout(() => setAlert(''),1000)
     }
   }
 
@@ -234,15 +268,15 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
       setMutedMyAudio(!mutedMyAudio)
       myStream.getAudioTracks()[0].enabled = !myStream.getAudioTracks()[0].enabled
     } else {
-      setAlert(`You can not ${mutedMyAudio?'enable':'disable'} Audio before stream started`)
+      setAlert(`You can not ${mutedMyAudio ? 'enable' : 'disable'} Audio before stream started`)
+      setTimeout(() => setAlert(''),1000)
     }
   }
   
   const handleStartCall = useCallback(async () => {
     try {
       setCallStatus('waiting...')
-      const mediaDevices: any = navigator.mediaDevices
-      const stream = await mediaDevices.getDisplayMedia({
+      const stream = await navigator.mediaDevices.getUserMedia({
         video: true,
         audio: true
       })
@@ -306,7 +340,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
       const peer = new Peer({
         initiator: false,
         trickle: false,
-        stream,
+        stream:false,
       });
       peer.on("signal", (data: any) => {
         socket.emit("answerCall", {
@@ -358,7 +392,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
           signal: 'busy',
           to: companionSocket,
         });
-      }
+      } 
     })
   }, [setCallStatus,companionSocket])
 
@@ -439,6 +473,13 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
           backgroundColor:'rgb(36, 36, 36)'}} onTimeUpdate={handleConversationLast} />
         <audio ref={companionAudioRef} autoPlay />
         <div className={classes.bottomWrapper}>
+          {!myShareStream&&<div className={classes.bottomItem} onClick={handleMuteShare}>
+            <Avatar className={classes.bottomIcon} 
+              sx={{backgroundColor: '#ffffff',color: 'rgb(36, 36, 36)', width: 44, height: 44,zIndex:0}}>
+              {<StopScreenShareIcon fontSize="medium" />}
+            </Avatar>
+            <Typography variant="h6" className={classes.titleIconBottom}>StartShare</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}}>