+
+ );
+ }
+}
+
+
+
+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 00000000..5bd6a99a
Binary files /dev/null and b/CometChat/components/CallMessage/resources/blue-double-tick-icon.png differ
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 00000000..68da7d30
Binary files /dev/null and b/CometChat/components/CallMessage/resources/grey-double-tick-icon.png differ
diff --git a/CometChat/components/CallMessage/resources/grey-tick-icon.png b/CometChat/components/CallMessage/resources/grey-tick-icon.png
new file mode 100644
index 00000000..5d763a5d
Binary files /dev/null and b/CometChat/components/CallMessage/resources/grey-tick-icon.png differ
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
+