From 7f7096f9feaeb1fd35ffba33f6188159d62b0066 Mon Sep 17 00:00:00 2001 From: Ajay Gajra Date: Mon, 6 Apr 2020 23:09:04 +0530 Subject: [PATCH] v1.0.0-beta2 --- CometChat/components/CallMessage/index.js | 61 ++++ .../resources/blue-double-tick-icon.png | Bin 0 -> 429 bytes .../resources/grey-double-tick-icon.png | Bin 0 -> 425 bytes .../CallMessage/resources/grey-tick-icon.png | Bin 0 -> 349 bytes CometChat/components/CallMessage/style.scss | 20 ++ CometChat/components/CallScreen/controller.js | 40 +++ CometChat/components/CallScreen/index.js | 275 ++++++++++++++++++ .../CallScreen/resources/call-blue-icon.svg | 1 + .../resources/details-pane-blue-icon.svg | 1 + .../resources/video-call-blue-icon.svg | 1 + CometChat/components/CallScreen/style.scss | 62 ++++ CometChat/components/ChatHeader/index.js | 130 ++++++--- CometChat/components/ChatWindow/controller.js | 21 ++ CometChat/components/ChatWindow/index.js | 106 ++++--- .../CometChatMessageScreen/index.js | 61 ++-- .../components/CometChatUnified/index.js | 23 +- 16 files changed, 690 insertions(+), 112 deletions(-) create mode 100644 CometChat/components/CallMessage/index.js create mode 100644 CometChat/components/CallMessage/resources/blue-double-tick-icon.png create mode 100644 CometChat/components/CallMessage/resources/grey-double-tick-icon.png create mode 100644 CometChat/components/CallMessage/resources/grey-tick-icon.png create mode 100644 CometChat/components/CallMessage/style.scss create mode 100644 CometChat/components/CallScreen/controller.js create mode 100644 CometChat/components/CallScreen/index.js create mode 100644 CometChat/components/CallScreen/resources/call-blue-icon.svg create mode 100644 CometChat/components/CallScreen/resources/details-pane-blue-icon.svg create mode 100644 CometChat/components/CallScreen/resources/video-call-blue-icon.svg create mode 100644 CometChat/components/CallScreen/style.scss diff --git a/CometChat/components/CallMessage/index.js b/CometChat/components/CallMessage/index.js new file mode 100644 index 00000000..792f7d40 --- /dev/null +++ b/CometChat/components/CallMessage/index.js @@ -0,0 +1,61 @@ +import React from "react"; +import "./style.scss"; +import blueDoubleTick from "./resources/blue-double-tick-icon.png"; +import greyDoubleTick from "./resources/grey-double-tick-icon.png"; +import greyTick from "./resources/grey-tick-icon.png"; +import { CometChat } from "@cometchat-pro/chat"; + + +class CallMessage extends React.Component { + constructor(props) { + super(props); + this.state = { + } + + } + static getDerivedStateFromProps(props, state) { + return props; + } + printMessage = (message) => { + switch (message.action) { + case CometChat.CALL_STATUS.UNANSWERED: + return

{message.receiver.name + " had missed call from " + message.sender.name}

+ break; + case CometChat.CALL_STATUS.REJECTED: + return

{message.sender.name + " had rejected call with " + message.receiver.name}

+ break; + case CometChat.CALL_STATUS.ONGOING: + return

{message.sender.name + " had joined the call with " + message.receiver.name}

+ break; + case CometChat.CALL_STATUS.INITIATED: + return

{message.sender.name + " had initiated the call with " + message.receiver.name}

+ break; + case CometChat.CALL_STATUS.ENDED: + return

{message.sender.name + " ended the call with " + message.receiver.name}

+ break; + case CometChat.CALL_STATUS.CANCELLED: + return

{message.sender.name + " rejected the call with " + message.receiver.name}

+ break; + + default: + break; + } + } + + render() { + return ( + +
+ + {this.printMessage(this.state.message)} + +
+ + ); + } +} + + + +export default CallMessage; +export const senderVideoBubble = CallMessage; diff --git a/CometChat/components/CallMessage/resources/blue-double-tick-icon.png b/CometChat/components/CallMessage/resources/blue-double-tick-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..5bd6a99a467b139e01c8c330c5451786c4dd02aa GIT binary patch literal 429 zcmV;e0aE^nP)Px$XGugsR5%gMQoBk6Q4l?MjYUB5fm(|~KERD=z``F8D=XW$f*@8F7B&_Zb`e36 z=ntf`u(zM*G1TjHVWL@}+W3)_l!IBW-J`9KexGfxOqOJWCvRI$Y)fJU-taC@Skfn literal 0 HcmV?d00001 diff --git a/CometChat/components/CallMessage/resources/grey-double-tick-icon.png b/CometChat/components/CallMessage/resources/grey-double-tick-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..68da7d303a9fd2a9e5e69b921ac7e7f0eb497136 GIT binary patch literal 425 zcmV;a0apHrP)Px$V@X6oR5%f1U_b^E5)z`wd2t%nBsI z2viyYq?v&D-|434K@a3;lF?X8142PT zfdgbRvH`#ptpEx=U_uE1r9CMrDLG_5OfA?2z__sZ`}eONQ1BDb^ewPx$7fD1xR5%f1U_b^UA|g=;K9CoI;6YhpVq#Ws!Tb&o{5Qx_0_9ai(m={ibi%M3%VmjMMXVXSy>Ok z#K9pYE-oGgl;Cl2a9{z3nC!D>&u+jJz`Y4I_Md=&z~Vc1?)-!)K%s%A*q{i|g~Lp& zEg%nm`}WPBo10tc>({T3Vfx_d1tx%vR#8#myK?190#J^ZkB{#xHZ@=|1qB5TkWI)6 zBqSshKp_ZBECJZkF+7+-nt<_P@%QgvJs|TFBO~J$78Vwb-@ktw0om7HzkYoL*Nf&^Bve($og=+1S_)AxA7s&ETN{SIkKDyEuLm00000NkvXXu0mjfMZJmq literal 0 HcmV?d00001 diff --git a/CometChat/components/CallMessage/style.scss b/CometChat/components/CallMessage/style.scss new file mode 100644 index 00000000..d322e9fc --- /dev/null +++ b/CometChat/components/CallMessage/style.scss @@ -0,0 +1,20 @@ +@import "../../resources/mixins"; +@import "../../resources/colors"; + +.cp-call-message-container { + margin: 10px; + // text-align: center; + width: 100%; + display: flex; + > p { + margin: 14px auto; + + height: 25px; + } +} + +.dark { +} + +.light { +} diff --git a/CometChat/components/CallScreen/controller.js b/CometChat/components/CallScreen/controller.js new file mode 100644 index 00000000..31968bee --- /dev/null +++ b/CometChat/components/CallScreen/controller.js @@ -0,0 +1,40 @@ +import { CometChat } from "@cometchat-pro/chat" + +export class CometChatManager { + + constructor() { + + } + isUserLogedIn; + logedInUser; + isCometChatUserLogedIn() { + let timerCounter = 10000; + let timer = 0; + return new Promise((resolve, reject) => { + if (timerCounter === timer) reject(); + if (this.logedInUser) { resolve(this.logedInUser); return; } + + this.isUserLogedIn = setInterval(() => { + if (CometChat.isInitialized()) { + CometChat.getLoggedinUser().then(user => { + this.logedInUser = user; + clearInterval(this.isUserLogedIn); + resolve(user); + timer = 0; + }, error => { + console.log(error); + }) + } else { + } + timer = + 100; + }, 100); + }); + } + attachCallListener(callback) { + var listenerID = "UNIQUE_LISTENER_ID"; + + } + checkAndSendToCallback(callback, message, isReceipt = false) { + callback(message, isReceipt); + } +} \ No newline at end of file diff --git a/CometChat/components/CallScreen/index.js b/CometChat/components/CallScreen/index.js new file mode 100644 index 00000000..c05a1c10 --- /dev/null +++ b/CometChat/components/CallScreen/index.js @@ -0,0 +1,275 @@ +import React from "react"; +import "./style.scss"; +import SenderMessageBubble from "../SenderMessageBubble"; +import ReceiverMessageBubble from "../ReceiverMessageBubble" +import SenderImageBubble from "../SenderImageBubble" +import ReceiverImageBubble from "../ReceiverImageBubble" +import SenderFileBubble from "../SenderFileBubble" +import ReceiverFileBubble from "../ReceiverFileBubble" +import SenderAudioBubble from "../SenderAudioBubble" +import ReceiverAudioBubble from "../ReceiverAudioBubble" +import SenderVideoBubble from "../SenderVideoBubble" +import ReceiverVideoBubble from "../ReceiverVideoBubble" +import { CometChatManager } from "./controller"; +import { CometChat } from "@cometchat-pro/chat"; +import CallMessage from "../CallMessage"; +import callBlue from "./resources/call-blue-icon.svg"; +import Avatar from "../Avatar"; + + + +class CallScreen extends React.Component { + constructor(props) { + super(props); + this.state = { + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + actionGenerated: (action, payload) => { + return null; + } + } + this.callScreenElement = React.createRef(); + + } + componentDidMount() { + console.log("I am called"); + this.cometChatManager = new CometChatManager(); + + let listenerID = "UNIQUE_LISTENER_ID_CALL_SCREEN"; + + CometChat.addCallListener( + listenerID, + new CometChat.CallListener({ + onIncomingCallReceived: (call) => { + if (!this.state.callIProgress) { + this.setState({ showCallScreen: true, showIncomingScreen: true, callIProgress: call }); + } else { + //TODO reject the call + } + + }, + onOutgoingCallAccepted: (call) => { + console.log(call); + this.setState({ + showCallScreen: true, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: true, + callIProgress: call + }); + CometChat.startCall( + call.getSessionId(), + document.getElementById("cp-call-screen-container"), + new CometChat.OngoingCallListener({ + onUserJoined: user => { + /* Notification received here if another user joins the call. */ + console.log("User joined call:", user); + /* this method can be use to display message or perform any actions if someone joining the call */ + }, + onUserLeft: user => { + /* Notification received here if another user left the call. */ + console.log("User left call:", user); + /* this method can be use to display message or perform any actions if someone leaving the call */ + }, + onCallEnded: call => { + /* Notification received here if current ongoing call is ended. */ + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + /* hiding/closing the call screen can be done here. */ + } + }) + ); + + }, + onOutgoingCallRejected: (call) => { + console.log("here we ate ", call) + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + }, + onIncomingCallCancelled: (call) => { + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + } + }) + ); + } + UNSAFE_componentWillReceiveProps(props) { + + if (props.outgoingCall) { + console.log(props, "asfajfhjkaskfaksf aksf kajsf kas "); + this.setState({ + showCallScreen: true, + showIncomingScreen: false, + showOutgoingScreen: true, + showIframeScreen: false, + callIProgress: props.outgoingCall + }); + } + } + // static getDerivedStateFromProps(props, state) { + // if (props.outgoingCall) { + // return { + // showCallScreen: false, + // showIncomingScreen: false, + // showOutgoingScreen: true, + // showIframeScreen: false, + // } + // } + // return null; + // // return props; + + // } + render() { + return (this.state.showCallScreen ?
+ {this.state.showIframeScreen ?
+ +
: null} + {(this.state.showIncomingScreen ?
+
+ Calling... +
+ +
+ {this.state.callIProgress.sender.name} +
+
+ +
+ +
+
{ + CometChat.acceptCall(this.state.callIProgress.sessionId).then(call => { + this.setState({ + showCallScreen: true, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: true, + }); + CometChat.startCall( + call.getSessionId(), + document.getElementById("cp-call-screen-container"), + new CometChat.OngoingCallListener({ + onUserJoined: user => { + /* Notification received here if another user joins the call. */ + console.log("User joined call:", user); + /* this method can be use to display message or perform any actions if someone joining the call */ + }, + onUserLeft: user => { + /* Notification received here if another user left the call. */ + console.log("User left call:", user); + /* this method can be use to display message or perform any actions if someone leaving the call */ + }, + onCallEnded: call => { + /* Notification received here if current ongoing call is ended. */ + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + /* hiding/closing the call screen can be done here. */ + } + }) + ); + console.log("callStarted"); + }); + }}> + ACCEPT +
+
{ + CometChat.rejectCall(this.state.callIProgress.sessionId, CometChat.CALL_STATUS.REJECTED).then(() => { + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + + }) + this.props.actionGenerated("callEnded", {}); + }, err => { + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + } + ); + } + }> + REJECT +
+
+ +
: null)} + {(this.state.showOutgoingScreen ?
+
+ Calling... +
+ +
+ {this.state.callIProgress.receiver.name} +
+
+ +
+ +
+
{ + CometChat.rejectCall(this.state.callIProgress.sessionId, CometChat.CALL_STATUS.CANCELLED).then(() => { + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + }, err => { + this.setState({ + showCallScreen: false, + showIncomingScreen: false, + showOutgoingScreen: false, + showIframeScreen: false, + callIProgress: undefined + }); + this.props.actionGenerated("callEnded", {}); + }); + + } + }> + CANCEL +
+
+ +
: null)} +
: null) + } +} + +export default CallScreen; \ No newline at end of file diff --git a/CometChat/components/CallScreen/resources/call-blue-icon.svg b/CometChat/components/CallScreen/resources/call-blue-icon.svg new file mode 100644 index 00000000..bbe388a2 --- /dev/null +++ b/CometChat/components/CallScreen/resources/call-blue-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/CometChat/components/CallScreen/resources/details-pane-blue-icon.svg b/CometChat/components/CallScreen/resources/details-pane-blue-icon.svg new file mode 100644 index 00000000..acdf38cf --- /dev/null +++ b/CometChat/components/CallScreen/resources/details-pane-blue-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/CometChat/components/CallScreen/resources/video-call-blue-icon.svg b/CometChat/components/CallScreen/resources/video-call-blue-icon.svg new file mode 100644 index 00000000..c7caf5cb --- /dev/null +++ b/CometChat/components/CallScreen/resources/video-call-blue-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/CometChat/components/CallScreen/style.scss b/CometChat/components/CallScreen/style.scss new file mode 100644 index 00000000..da8a951e --- /dev/null +++ b/CometChat/components/CallScreen/style.scss @@ -0,0 +1,62 @@ +@import "../../resources/mixins"; +@import "../../resources/colors"; + +.cp-call-screen-container { + position: fixed; + height: 100vh; + width: 100vw; + background: $gray-darken; + top: 0; + left: 0; + color: white; +} + +.cp-incoming-call-screen { + display: flex; + flex-direction: column; + height: 100%; + .cp-accept-button { + background: green; + border-radius: 5px; + } + .cp-accept-button:hover { + cursor: pointer; + } + .cp-reject-button { + background: red; + border-radius: 5px; + } + .cp-reject-button:hover { + cursor: pointer; + } +} +.cp-outgoing-call-screen { + display: flex; + flex-direction: column; + height: 100%; + .cp-accept-button { + background: green; + border-radius: 5px; + } + .cp-accept-button:hover { + cursor: pointer; + } + + .cp-reject-button { + background: red; + border-radius: 5px; + } + .cp-reject-button:hover { + cursor: pointer; + } +} +.cp-call-title { + font-weight: 600; + font-size: 40px; +} +.p-xl { + padding: 15px; +} +.m-a { + margin: auto; +} diff --git a/CometChat/components/ChatHeader/index.js b/CometChat/components/ChatHeader/index.js index f0ef2b63..8ce230da 100644 --- a/CometChat/components/ChatHeader/index.js +++ b/CometChat/components/ChatHeader/index.js @@ -1,27 +1,79 @@ import React from "react"; import "./style.scss"; import Avatar from "../Avatar"; -// import callBlue from "./resources/call-blue-icon.svg"; +import callBlue from "./resources/call-blue-icon.svg"; import detailPaneBlue from "./resources/details-pane-blue-icon.svg"; -// import videoCallBlue from "./resources/video-call-blue-icon.svg"; +import videoCallBlue from "./resources/video-call-blue-icon.svg"; +import { CometChat } from "@cometchat-pro/chat"; class ChatHeader extends React.Component { constructor(props) { super(props); this.state = { conversation: {}, - toggleUserProfile:false + toggleUserProfile: false } } - toggleUserProfile=()=>{ + toggleUserProfile = () => { this.setState({ - toggleUserProfile:!this.state.toggleUserProfile + toggleUserProfile: !this.state.toggleUserProfile }, - this.state.onActionGenerated('toggelProfile',{toggleUserProfile:!this.state.toggleUserProfile}) + this.state.onActionGenerated('toggelProfile', { toggleUserProfile: !this.state.toggleUserProfile }) ); } + makeAudioCall = () => { + + let receiverID; + let callType = CometChat.CALL_TYPE.AUDIO; + let receiverType = CometChat.RECEIVER_TYPE.USER; + + if (this.state.type === 'group') { + receiverID = this.state.item.guid; + receiverType = CometChat.RECEIVER_TYPE.GROUP; + } else { + receiverID = this.state.item.uid; + receiverType = CometChat.RECEIVER_TYPE.USER; + } + + let call = new CometChat.Call(receiverID, callType, receiverType); + + CometChat.initiateCall(call).then( + call => { + console.log("Call initiated successfully:", call); + this.state.onActionGenerated('audioCallInitiated', { call: call }) + }, + error => { + console.log("Call initialization failed with exception:", error); + } + ); + } + makeVideoCall = () => { + let receiverID; + let callType = CometChat.CALL_TYPE.VIDEO; + let receiverType = CometChat.RECEIVER_TYPE.USER; + + if (this.state.type === 'group') { + receiverID = this.state.item.guid; + receiverType = CometChat.RECEIVER_TYPE.GROUP; + } else { + receiverID = this.state.item.uid; + receiverType = CometChat.RECEIVER_TYPE.USER; + } + + let call = new CometChat.Call(receiverID, callType, receiverType); + + CometChat.initiateCall(call).then( + call => { + console.log("Call initiated successfully:", call); + this.state.onActionGenerated('videoCallInitiated', { call }) + }, + error => { + console.log("Call initialization failed with exception:", error); + } + ); + } static getDerivedStateFromProps(props, state) { return props; } @@ -29,47 +81,47 @@ class ChatHeader extends React.Component { return (
{ - this.state.type === "user"?
-
- -
-
-
- {(this.state.item ? this.state.item.name : '')}
-
- {/* */} - {/* */} - + this.state.type === "user" ?
+
+
-
- {(this.state.item ? this.state.item.status : '')} +
+
+ {(this.state.item ? this.state.item.name : '')}
+
+ + + +
+
+ {(this.state.item ? this.state.item.status : '')} +
-
-
:
-
- -
-
-
- {(this.state.item ? this.state.item.name : '')}
-
- {/* */} - {/* */} - - +
:
+
+ +
+
+
+ {(this.state.item ? this.state.item.name : '')}
+
+ + -
+ + +
-
+
- {(this.state.item ? this.state.item.type : '')} + {(this.state.item ? this.state.item.type : '')} +
+
-
-
} - +
@@ -80,7 +132,7 @@ class ChatHeader extends React.Component { export default ChatHeader; -export const chatHeader=ChatHeader; +export const chatHeader = ChatHeader; ChatHeader.defaultProps = { diff --git a/CometChat/components/ChatWindow/controller.js b/CometChat/components/ChatWindow/controller.js index 68f27c2f..84cc09fd 100644 --- a/CometChat/components/ChatWindow/controller.js +++ b/CometChat/components/ChatWindow/controller.js @@ -69,6 +69,27 @@ export class CometChatManager { }) ); + CometChat.addCallListener( + listenerID, + new CometChat.CallListener({ + onIncomingCallReceived: (call) => { + console.log(call); + this.checkAndSendToCallback(callback, call); + }, + onOutgoingCallAccepted: (call) => { + this.checkAndSendToCallback(callback, call); + + }, + onOutgoingCallRejected: (call) => { + this.checkAndSendToCallback(callback, call); + + }, + onIncomingCallCancelled: (call) => { + this.checkAndSendToCallback(callback, call); + } + }) + ); + } checkAndSendToCallback(callback, message, isReceipt = false) { if (this.type === 'group') { diff --git a/CometChat/components/ChatWindow/index.js b/CometChat/components/ChatWindow/index.js index 7ce5f0ad..4469ae06 100644 --- a/CometChat/components/ChatWindow/index.js +++ b/CometChat/components/ChatWindow/index.js @@ -12,6 +12,7 @@ import SenderVideoBubble from "../SenderVideoBubble" import ReceiverVideoBubble from "../ReceiverVideoBubble" import { CometChatManager } from "./controller"; import { CometChat } from "@cometchat-pro/chat"; +import CallMessage from "../CallMessage"; @@ -48,7 +49,7 @@ class ChatWindow extends React.Component { } componentDidUpdate(prevProps, prevState) { -if(this.state.type !== 'group') + if (prevState.inputMessageList !== this.state.inputMessageList) { this.setState({ messageList: [...this.state.messageList, ...this.state.inputMessageList] }, () => { this.scrollToBottom(); @@ -97,29 +98,29 @@ if(this.state.type !== 'group') messageUpdated = (message, isReceipt) => { if (isReceipt) { - let messageList=[] + let messageList = [] if (message.receiptType === "delivery") { - messageList=this.state.messageList.map(stateMessage => { + messageList = this.state.messageList.map(stateMessage => { if (message.messageId === stateMessage.id) { - stateMessage.deliveredAt = message.deliveredAt; + stateMessage.deliveredAt = message.deliveredAt; } - + return stateMessage; }); - this.setState({messageList}); - }else { + this.setState({ messageList }); + } else { if (message.receiptType === "read") { - messageList=this.state.messageList.map(stateMessage => { - // if (message.messageId === stateMessage.id) { - if(!stateMessage.readAt) { + messageList = this.state.messageList.map(stateMessage => { + // if (message.messageId === stateMessage.id) { + if (!stateMessage.readAt) { stateMessage.readAt = message.readAt; - } - // } - - return stateMessage; - }); - this.setState({messageList}); - } + } + // } + + return stateMessage; + }); + this.setState({ messageList }); + } } } else { @@ -134,10 +135,10 @@ if(this.state.type !== 'group') this.cometChatManager.isCometChatUserLogedIn().then( user => { this.cometChatManager.fetchPreviousMessages().then( - (messageList) => { - messageList.map(message=>{ - if(message.getSender().uid!==user.uid){ - CometChat.markAsRead(message.id, message.getSender().getUid(), 'user'); + (messageList) => { + messageList.map(message => { + if (message.getSender().uid !== user.uid) { + CometChat.markAsRead(message.id, message.getSender().getUid(), 'user'); } return true }); @@ -173,35 +174,48 @@ if(this.state.type !== 'group') } handleSenderMessages = (message) => { - switch (message.category, message.type) { - case ("message" && "text"): - return ; - case ("message" && "image"): - return ; - case ("message" && "file"): - return ; - case ("message" && "audio"): - return ; - case ("message" && "video"): - return ; + switch (message.category) { + case ("message"): { + switch (message.type) { + case ("text"): + return ; + case ("image"): + return ; + case ("file"): + return ; + case ("audio"): + return ; + case ("video"): + return ; + } + } case ("call"): { + + return ; + } default: return null; } } handlereceiverMessages = (message) => { - switch (message.category, message.type) { - case ("message" && "text"): - return - case ("message" && "image"): - return ; - case ("message" && "file"): - return ; - case ("message" && "audio"): - return ; - case ("message" && "video"): - return ; - default: - return null; + switch (message.category) { + case ("message"): { + switch (message.category, message.type) { + case ("message" && "text"): + return + case ("message" && "image"): + return ; + case ("message" && "file"): + return ; + case ("message" && "audio"): + return ; + case ("message" && "video"): + return ; + default: + return null; + } + } case ("call"): { + return ; + } } } render() { @@ -216,7 +230,7 @@ if(this.state.type !== 'group') export default ChatWindow; -export const chatWindow=ChatWindow; +export const chatWindow = ChatWindow; ChatWindow.defaultProps = { diff --git a/CometChat/components/CometChatMessageScreen/index.js b/CometChat/components/CometChatMessageScreen/index.js index 63b88053..c7acef32 100644 --- a/CometChat/components/CometChatMessageScreen/index.js +++ b/CometChat/components/CometChatMessageScreen/index.js @@ -12,11 +12,14 @@ class CometChatMessageScreen extends React.Component { this.state = { chatList: [], onItemClick: null, - messages:undefined + messages: undefined, + actionGenerated: () => { + return null; + } } } - + static getDerivedStateFromProps(props, state) { return props; @@ -24,26 +27,42 @@ class CometChatMessageScreen extends React.Component { render() { return (
-
- { - this.setState({ - ...payload - }) - }}> -
- -
+
+ { + this.state.actionGenerated(action, payload); + switch (action) { + case 'audioCallInitiated': + console.log("AUDIO calll started", payload); + + this.setState({ messages: [payload.call] }); + break; + case 'videoCallInitiated': + console.log("VIDEOP calll started", payload); + this.setState({ messages: [payload.call] }); + + break; + case 'toggelProfile': + this.setState({ + ...payload + }) + break; + } - { - this.setState({ messages: [message] }); - }} item={this.state.item} type={this.state.type}> + }}> +
+ +
+ + { + this.setState({ messages: [message] }); + }} item={this.state.item} type={this.state.type}>
- {this.state.toggleUserProfile?
- - -
:""} - - + {this.state.toggleUserProfile ?
+ + +
: ""} + +
); @@ -53,7 +72,7 @@ class CometChatMessageScreen extends React.Component { export default CometChatMessageScreen; -export const cometChatMessageScreen=CometChatMessageScreen; +export const cometChatMessageScreen = CometChatMessageScreen; CometChatMessageScreen.defaultProps = { CometChatMessageScreen: {} diff --git a/CometChat/components/CometChatUnified/index.js b/CometChat/components/CometChatUnified/index.js index c128a89a..a5db5265 100644 --- a/CometChat/components/CometChatUnified/index.js +++ b/CometChat/components/CometChatUnified/index.js @@ -1,6 +1,7 @@ import React from "react"; import "./style.scss"; import NavBar from "../NavBar"; +import CallScreen from "../CallScreen"; import CometChatMessageScreen from "../CometChatMessageScreen" @@ -36,14 +37,24 @@ class CometChatUnified extends React.Component {
{ - this.state.item ? :

Select a chat to start messaging

+ this.state.item ? { + switch (action) { + case 'audioCallInitiated': + this.setState({ outgoingCall: payload.call }); + break; + case 'videoCallInitiated': + this.setState({ outgoingCall: payload.call }); + + break; + } + }}> :

Select a chat to start messaging

} - {/* */} +
+ { + this.setState({ outgoingCall: undefined }); + }} outgoingCall={this.state.outgoingCall}>
); } @@ -52,7 +63,7 @@ class CometChatUnified extends React.Component { export default CometChatUnified; -export const cometChatUnified=CometChatUnified; +export const cometChatUnified = CometChatUnified; CometChatUnified.defaultProps = { launch: {}