finished call

src/api-data/index.ts

@@ -340,9 +340,19 @@ const sentMessageById = async <T>(id:string,message:string,caption:string): Prom
   }
 };
 
-const sentMessageCallById = async <T>(id:string,reject:boolean,duration:number): Promise<T | undefined> => {
+const sentMessageCallById = async <T>(id:string,duration:number): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post('/messages/call', { id, reject,duration });
+    const { data: { data } } = await axios.post('/messages/call', { id,duration });
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
+const updateMessageCallById = async <T>(id:string,duration:number): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.patch('/messages/call/end', { id,duration });
     return data
   } catch (e) {
     forbidden(e)
@@ -475,6 +485,7 @@ export {
   unpinAllMessagesById,
   sentMessageById,
   sentMessageCallById,
+  updateMessageCallById,
   sentMessageEditById,
   sentMessageReplyById,
   sentMessageForwardById,

src/components/HomePage/CallBar/index.tsx

@@ -22,7 +22,7 @@ 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,sentMessageCallById } from '../../../api-data';
+import { socketIdChat, sentMessageCallById , updateMessageCallById } from '../../../api-data';
 
 const Peer = require('simple-peer')
 const socket = io(prodSocketURL)
@@ -163,6 +163,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
   const companionVideoRef = useRef<any>(null);
   const companionAudioRef = useRef<any>(null);
   const idAudioIntervalRef = useRef<any>(null);
+  const [callMsgId, setCallMsgId] = useState<string>('')
   const [mySocket, setMySocket] = useState<string>('')
   const [myStream, setMyStream] = useState<any>(null)
   const [myShareStream, setMyShareStream] = useState<any>(null)
@@ -172,7 +173,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
   const [companionSignal, setCompanionSignal] = useState<any>(null)
   const [audioHtml, setAudioHtml] = useState<any>(null)
   const [callLast, setCallLast] = useState<number>(0)
-  const [conversationLast, cetConversationLast] = useState<string>('')
+  const [conversationLast, setConversationLast] = useState<number>(0)
   const [fullScreen, setFullScreen] = useState<boolean>(false)  
   const [alert, setAlert] = useState<string>('')
   const [name, setName] = useState<string>('')
@@ -195,7 +196,9 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
       audioHtml.pause()
       setAudioHtml(null)
     }
-    if(myStream) myStream.getTracks().forEach((track:any) => track.stop())
+    if (myStream) myStream.getTracks().forEach((track: any) => track.stop())
+    if (callMsgId) updateMessageCallById(callMsgId, conversationLast)
+    setCallMsgId('')
     setMyShareStream(null)
     setMutedMyVideo(false)
     setMutedMyAudio(false)
@@ -203,7 +206,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
     setMyStream(null)
     setCompanionSignal(null)
     setCallLast(0)
-    cetConversationLast('')
+    setConversationLast(0)
     setFullScreen(false)
     setAlert('')
     setTimeout(() => {
@@ -214,10 +217,9 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
       setColor('')
       setNumber('')
     },500)
-  }, [setCallStatus, audioHtml, myStream])
+  }, [setCallStatus, audioHtml, myStream,callMsgId,conversationLast])
   
-  const handleConversationLast = (e: any) =>
-    cetConversationLast(getTimeBySeconds(e.target.currentTime))
+  const handleConversationLast = (e: any) => setConversationLast(e.target.currentTime)
   
   const handleMuteShare = async () => {
     try {
@@ -270,7 +272,6 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
   
   const handleStartCall = useCallback(async () => {
     try {
-      sentMessageCallById(companionId,false,0)
       setCallStatus('waiting...')
       const stream = await navigator.mediaDevices.getUserMedia({
         video: true,
@@ -282,7 +283,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
       const peer = new Peer({
         initiator: true,
         trickle: false, 
-        stream 
+        stream, 
       });
       setCallStatus('ringing...')
       const audioRing = playNotification(`${prodBaseURL}/calling.mp3`)
@@ -297,7 +298,6 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
           from: mySocket,
           userId: _id,
           companionId,
-          peer
         })
       });
       peer.on("stream", (companionStream: any) => {
@@ -324,17 +324,17 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
     try {
       audioHtml.pause()
       setCallStatus('waiting...')
-      // const stream = await navigator.mediaDevices.getUserMedia({
-      //   video: true,
-      //   audio: true
-      // })
-      //stream.getVideoTracks()[0].enabled = false
-      // setMyStream(stream)
-      // myVideoRef.current.srcObject = stream;
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: true
+      })
+      stream.getVideoTracks()[0].enabled = false
+      setMyStream(stream)
+      myVideoRef.current.srcObject = stream;
       const peer = new Peer({
         initiator: false,
         trickle: false,
-        stream: false,
+        stream,
       });
       peer.on("signal", (data: any) => {
         socket.emit("answerCall", {
@@ -389,15 +389,17 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
   }, [setCallStatus,companionSocket])
 
   useEffect(() => {
-    if (callStatus === 'requesting...') {
+    if (callStatus === 'requesting...' && callMsgId === '') {
       setName(_name)
       setLastName(_lastName)
       setAvatarUrl(_avatarUrl)
       setColor(_color)
       setNumber(_number)
-      setTimeout(handleStartCall,500)
+      sentMessageCallById(companionId, 0)
+        .then((data: any) => setCallMsgId(data._id))
+      setTimeout(handleStartCall, 500)
     }
-  }, [callStatus,_name,_lastName,_avatarUrl,_color,_number, handleStartCall])
+  }, [callStatus,callMsgId,_name,_lastName,_avatarUrl,_color,_number,companionId, handleStartCall])
 
   useEffect(() => {
     if (callLast === 60) handleLeaveCall()
@@ -447,7 +449,7 @@ const CallBar = ({callStatus,setCallStatus}:ICallBar) => {
               primaryTypographyProps={{ color: '#dfdfdf', fontSize: 20, fontWeight: 500,textAlign: "center" }}/>
             <ListItemText primary={number} primaryTypographyProps={{ color: '#ffffff', fontSize: 15, fontWeight: 500, textAlign: "center" }} />
             <ListItemText secondary={callStatus} secondaryTypographyProps={{ color: "#dfdfdf", textAlign: "center" }} />
-            <ListItemText secondary={conversationLast} secondaryTypographyProps={{ color: "#dfdfdf", textAlign: "center" }} />
+            {conversationLast&&<ListItemText secondary={getTimeBySeconds(conversationLast)} secondaryTypographyProps={{ color: "#dfdfdf", textAlign: "center" }} />}
           </>}
         </div>
         <video ref={companionVideoRef} playsInline muted autoPlay controls={false}

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftCall/index.tsx

@@ -207,7 +207,6 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageLeftCall {
   message: string,
   initiator: boolean,
-  reject: boolean,
   duration: number,
   tongue: boolean,
   watched: boolean,
@@ -230,7 +229,7 @@ interface IMessageLeftCall {
   handleForward: (_id: string) => void,
 }
 
-const MessageLeftCall = ({message,initiator,reject,duration,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftCall) => {
+const MessageLeftCall = ({message,initiator,duration,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward}:IMessageLeftCall) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -280,9 +279,10 @@ const MessageLeftCall = ({message,initiator,reject,duration,tongue,watched,edite
           <PhoneIcon style={{color:'#26afee'}} fontSize='large' />
         </div>
         <div className={classes.informationWrapper}>
-          {!initiator ? <SouthWestIcon style={{ color: reject?'#f02a2a':'#959595', marginRight: 5 }} fontSize='small' /> :
-            <NorthEastIcon style={{ color: reject?'#f02a2a':'#959595',marginRight:5}} fontSize='small' />}
-           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}${duration?', '+getTimeBySeconds(duration):''}`}</div>
+          {initiator ? <NorthEastIcon style={{ color: duration ? '#959595' : '#f02a2a', marginRight: 5 }} fontSize='small' /> :
+            <SouthWestIcon style={{ color: duration?'#959595': '#f02a2a', marginRight: 5 }} fontSize='small' />}
+          <div className={classes.time} style={{ color: '#959595' }}>
+            {`${timeStampMessage(createdAt)}${duration ? ', ' + getTimeBySeconds(duration) : ''}`}</div>
            {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
         </div>
         {tongue&&<div className={classes.avatarIcon}>

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightCall/index.tsx

@@ -208,7 +208,6 @@ const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 interface IMessageRightCall {
   message: string,
   initiator: boolean,
-  reject: boolean,
   duration: number,
   tongue: boolean,
   watched: boolean,
@@ -232,7 +231,7 @@ interface IMessageRightCall {
   handleEdit:(_id: string) => void,
 }
 
-const MessageRightCall = ({message,initiator,reject,duration,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit}:IMessageRightCall) => {
+const MessageRightCall = ({message,initiator,duration,tongue,watched,edited,avatarUrl,color,name,lastName,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit}:IMessageRightCall) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
@@ -281,9 +280,10 @@ const MessageRightCall = ({message,initiator,reject,duration,tongue,watched,edit
           <PhoneIcon style={{color:'#18bd03'}} fontSize='large' />
         </div>
         <div className={classes.informationWrapper}>
-          {!initiator ? <SouthWestIcon style={{ color: reject?'#f02a2a':'#18bd03', marginRight: 5 }} fontSize='small' /> :
-            <NorthEastIcon style={{ color: reject?'#f02a2a':'#18bd03',marginRight:5}} fontSize='small' />}
-           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}${duration?', '+getTimeBySeconds(duration):''}`}</div>
+          {initiator ? <NorthEastIcon style={{ color: duration ?'#18bd03':'#f02a2a', marginRight: 5 }} fontSize='small' /> :
+            <SouthWestIcon style={{ color: duration?'#18bd03':'#f02a2a', marginRight: 5 }} fontSize='small' />}
+          <div className={classes.time} style={{ color: '#18bd03' }}>
+            {`${timeStampMessage(createdAt)}${duration ? ', ' + getTimeBySeconds(duration) : ''}`}</div>
            {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
             <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
         </div>

src/components/HomePage/CentralBar/ChatBar/index.tsx

@@ -243,7 +243,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
           createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
           _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom, forwardMessage, forwardCaption, edited,
-          deleted, initiator, reject, duration }, i) => {
+          deleted, initiator, duration }, i) => {
           const watched = seenCompanion - (i + 1) < 0 ? false : true
           let isUnread
           let isTime
@@ -301,7 +301,6 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
               <MessageLeftCall
                message={message}
                initiator={initiator}
-               reject={reject}
                duration={duration}
                tongue={isTongue}
                watched={!unread}
@@ -556,7 +555,6 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
                 <MessageRightCall   
                 message={message}
                 initiator={initiator}
-                reject={reject}
                 duration={duration}
                 tongue={isTongue}
                 watched={watched}

src/typescript/redux/allMessages/types.ts

@@ -26,7 +26,6 @@ export type TMessage = {
   edited: boolean,
   deleted: boolean,
   initiator: boolean,
-  reject: boolean,
   duration: number,
   idTime: string,
   oldId: string,

src/typescript/redux/messages/types.ts

@@ -23,7 +23,6 @@ export type TMessage = {
   edited: boolean,
   deleted: boolean,
   initiator: boolean,
-  reject: boolean,
   duration: number,
   idTime: string,
   oldId: string,

src/typescript/redux/pinnedMessages/types.ts

@@ -23,7 +23,6 @@ export type TPinnedMessage = {
   edited: boolean,
   deleted: boolean,
   initiator: boolean,
-  reject: boolean,
   duration: number,
   idTime: string,
   oldId: string,