From fe1e3b57992e2d950780ac9f4e1b56c7e1dd238c Mon Sep 17 00:00:00 2001 From: "Tirath.CometChat" Date: Tue, 1 Jun 2021 01:29:02 +0530 Subject: [PATCH] c2.3.3-1 --- README.md | 5 +- package.json | 9 +- src/components/.DS_Store | Bin 0 -> 6148 bytes .../CometChatIncomingDirectCall/controller.js | 4 +- .../Calls/CometChatOutgoingCall/index.js | 3 +- .../CometChatOutgoingDirectCall/index.js | 3 +- .../Chats/CometChatConversationList/index.js | 2 +- .../Chats/CometChatConversationList/styles.js | 7 +- .../CometChatConversationListItem/index.js | 50 +++- .../CometChatConversationListItem/styles.js | 43 ++-- .../index.js | 34 +-- src/components/CometChatUI/index.js | 6 +- .../CometChatAddGroupMemberList/index.js | 239 +++++++++--------- .../CometChatAddGroupMemberList/styles.js | 8 +- .../CometChatAddGroupMemberListItem/index.js | 6 +- .../CometChatAddGroupMemberListItem/styles.js | 9 +- .../CometChatBanGroupMemberListItem/index.js | 8 +- .../CometChatBanGroupMemberListItem/styles.js | 17 +- .../Groups/CometChatGroupDetails/index.js | 74 ++++-- .../Groups/CometChatGroupDetails/styles.js | 32 ++- .../Groups/CometChatGroupList/index.js | 20 +- .../Groups/CometChatGroupList/styles.js | 20 +- .../Groups/CometChatGroupListItem/styles.js | 32 ++- .../CometChatGroupListWithMessages/index.js | 19 +- .../CometChatViewGroupMemberList/index.js | 49 ++-- .../CometChatViewGroupMemberList/styles.js | 11 +- .../CometChatViewGroupMemberListItem/index.js | 4 +- .../CometChatViewGroupMemberListItem/style.js | 25 +- src/components/Messages/.DS_Store | Bin 0 -> 10244 bytes .../CometChatDeleteMessageBubble/index.js | 42 ++- .../CometChatDeleteMessageBubble/style.js | 2 +- .../Messages/CometChatImageViewer/styles.js | 8 +- .../Messages/CometChatLiveReactions/index.js | 10 +- .../CometChatMessageActions/actions.js | 23 +- .../composerActions.js | 56 +++- .../CometChatMessageComposer/index.js | 99 ++++++-- .../CometChatMessageComposer/styles.js | 5 +- .../Messages/CometChatMessageHeader/.DS_Store | Bin 0 -> 6148 bytes .../Messages/CometChatMessageHeader/index.js | 87 +++++-- .../resources/.DS_Store | Bin 0 -> 6148 bytes .../resources/audioCall.png | Bin 1473 -> 2812 bytes .../resources/detailpane.png | Bin 0 -> 2942 bytes .../resources/videoCall.png | Bin 1251 -> 2150 bytes .../Messages/CometChatMessageHeader/styles.js | 17 +- .../CometChatMessageList/controller.js | 6 +- .../Messages/CometChatMessageList/index.js | 107 ++++++-- .../Messages/CometChatMessageList/styles.js | 32 ++- .../Messages/CometChatMessageThread/index.js | 23 +- .../Messages/CometChatMessages/index.js | 227 ++++++++++++----- .../Messages/CometChatReadReceipt/index.js | 68 +++-- .../CometChatReadReceipt/resources/error.png | Bin 0 -> 604 bytes .../resources/sending.png | Bin 0 -> 522 bytes .../Messages/CometChatReadReceipt/styles.js | 8 +- .../index.js | 26 +- .../style.js | 12 +- .../index.js | 25 +- .../styles.js | 17 +- .../index.js | 31 ++- .../styles.js | 11 +- .../index.js | 34 +-- .../styles.js | 25 +- .../index.js | 56 ++-- .../styles.js | 15 +- .../CometChatSenderDirectCallBubble/index.js | 38 +-- .../CometChatSenderDirectCallBubble/style.js | 5 +- .../CometChatSenderFileMessageBubble/index.js | 17 +- .../styles.js | 6 +- .../index.js | 7 +- .../styles.js | 5 +- .../styles.js | 11 +- .../index.js | 44 ++-- .../styles.js | 4 +- .../styles.js | 4 +- .../Messages/CometChatVideoViewer/.DS_Store | Bin 0 -> 6148 bytes .../Messages/CometChatVideoViewer/index.js | 71 ++++++ .../CometChatVideoViewer/resources/clear.png | Bin 0 -> 205 bytes .../Messages/CometChatVideoViewer/styles.js | 49 ++++ .../Extensions/CometChatCreatePoll/index.js | 2 +- .../CometChatMessageReactions/index.js | 12 +- .../CometChatMessageReactions/styles.js | 14 +- .../index.js | 33 +-- .../styles.js | 1 - .../index.js | 14 +- .../styles.js | 2 +- .../styles.js | 2 +- .../index.js | 18 +- .../styles.js | 2 + .../CometChatSmartReplyPreview/styles.js | 4 +- .../Shared/CometChatAvatar/styles.js | 19 +- .../Shared/CometChatBadgeCount/index.js | 44 +++- .../Shared/CometChatBadgeCount/styles.js | 18 +- .../Shared/CometChatSharedMedia/controller.js | 4 +- .../Shared/CometChatSharedMedia/index.js | 10 +- .../Shared/CometChatSharedMedia/styles.js | 1 + .../Shared/CometChatUserPresence/index.js | 12 +- .../Shared/CometChatUserPresence/styles.js | 10 +- src/components/Shared/DropDownAlert/index.js | 7 +- src/components/Shared/DropDownAlert/styles.js | 2 +- .../UserProfile/CometChatUserProfile/index.js | 56 ++-- .../CometChatUserProfile/styles.js | 22 +- .../Users/CometChatUserDetails/index.js | 133 +++++++++- .../Users/CometChatUserDetails/styles.js | 33 ++- .../Users/CometChatUserList/index.js | 7 +- .../Users/CometChatUserList/styles.js | 23 +- .../Users/CometChatUserListItem/index.js | 5 +- .../Users/CometChatUserListItem/styles.js | 15 +- .../Users/CometChatUserProfile/index.js | 108 ++++++++ .../CometChatUserProfile/resources/clear.png | Bin 0 -> 205 bytes .../Users/CometChatUserProfile/styles.js | 55 ++++ src/resources/theme.js | 4 +- src/utils/actions.js | 5 + src/utils/settings.js | 1 + 112 files changed, 1924 insertions(+), 846 deletions(-) create mode 100644 src/components/.DS_Store create mode 100644 src/components/Messages/.DS_Store create mode 100644 src/components/Messages/CometChatMessageHeader/.DS_Store create mode 100644 src/components/Messages/CometChatMessageHeader/resources/.DS_Store create mode 100644 src/components/Messages/CometChatMessageHeader/resources/detailpane.png create mode 100644 src/components/Messages/CometChatReadReceipt/resources/error.png create mode 100644 src/components/Messages/CometChatReadReceipt/resources/sending.png create mode 100644 src/components/Messages/CometChatVideoViewer/.DS_Store create mode 100644 src/components/Messages/CometChatVideoViewer/index.js create mode 100644 src/components/Messages/CometChatVideoViewer/resources/clear.png create mode 100644 src/components/Messages/CometChatVideoViewer/styles.js create mode 100644 src/components/Users/CometChatUserProfile/index.js create mode 100644 src/components/Users/CometChatUserProfile/resources/clear.png create mode 100644 src/components/Users/CometChatUserProfile/styles.js create mode 100644 src/utils/settings.js diff --git a/README.md b/README.md index 21f253d..15d2fe3 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ To install React-Native UI Kit, you need to first register on CometChat Dashboar ### ii. Add the CometChat Dependency ```javascript - npm install @cometchat-pro/react-native-chat@2.3.0 --save + npm install @cometchat-pro/react-native-chat@2.3.3 --save ``` ### iii. Other required DEPENDENCIES @@ -88,6 +88,9 @@ These packages help make the ui-kit smooth and functioning [react-native-autolink](https://www.npmjs.com/package/react-native-autolink)
[react-native-screens](https://www.npmjs.com/package/react-native-screens)
[emoji-mart-native](https://www.npmjs.com/package/emoji-mart-native)
+[react-native-keep-awake](https://www.npmjs.com/package/react-native-keep-awake)
+[react-native-webview](https://www.npmjs.com/package/react-native-webview)
+
## 2. Configure CometChat inside your app diff --git a/package.json b/package.json index 433a409..4f76cb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cometchat-pro-react-native-ui-kit", - "version": "2.3.0-1", + "version": "2.3.3-1", "description": "Chat UI Kit for React Native App", "main": "./src/index.js", "scripts": { @@ -12,6 +12,7 @@ "url": "git@git.geekyants.com:cometchat/react-native.git" }, "peerDependencies": { + "react-native-keep-awake": "^4.0.0", "@react-native-community/async-storage": "^1.12.1", "react-native-sound": "^0.11.0", "react-native-vector-icons": "^7.1.0", @@ -48,9 +49,9 @@ "prettier": "^2.1.2" }, "dependencies": { - "@cometchat-pro/react-native-calls": "2.0.1", - "@cometchat-pro/react-native-chat": "2.3.0", - "@react-native-community/async-storage": "^1.12.1", + "@cometchat-pro/react-native-calls": "2.0.3-beta1", + "@cometchat-pro/react-native-chat": "2.3.3", + "@react-native-async-storage/async-storage": "^1.13.4", "lodash": "^4.17.20", "react-native-autolink": "^3.0.0", "redux": "^4.0.5", diff --git a/src/components/.DS_Store b/src/components/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a396720d10086dede0c63ae13f0a418f626210cc GIT binary patch literal 6148 zcmeHK-A)rh6g~r0w?$<6N21Bb#>50JAP@)_gtcH4jiIs)wgQ&jb|@Q{oo07Sg<8`m z@Lrz52k^=}FMI+MZ+rnSyz<&JKb4>AtueBvnfcD1pP8O-Gc!8?Kr*%RG=L5O8a9rJ z6n4K6?&qyTx|F3Gk%%#Dr~rk~sfX2$=-3c55Hs+vF~HZZ29Now#owv*>v+sT-zTT) zxnVRl^_g^aCoWySqG>5D)tlP3_E_DD?5GxI>|m2WW$kFsQF@Ls@0V^n8!oLE^`T|v zN4D$JKqR|miXmH1UBArg8CLVlp%}-K4oypH$)Y~iXv|G7Od2z@3(ZNRF+V>wY0S>d zHJeFo^!D`P>dyY*QR7wf^;^j-!Hq~rpTagAqta2RTRN!9Ldl1ApHSNml0Qr`oOuk zby|LYV#*y>F=pt*AjY~MQ0i}10=K-jyBpFdU)1};QouYf%R)DDnO`{NEo_Cz{c1$_ zSN&avGaew>#lH3e6mDd$vQpH9y0mi0$)8J{lI14JaQ;%w$#V zlIvH}OW!4%X*1ha?np(4v{V4n=C)Kdo#cGx(_}JjK2lx{Cg3hS1Pk_{4sYNX-obnL z2w&hE{2&Q3LT-@>GD{Z85_v$LkadzH1@eq+%KWbO+r8PIO(H2HcD&sKEATz$SJ2na zJDYaFpA;!t&jsfpE4)Ll&M5rF^Eh@yP@Jtg)NCP9f-Po5H&MVHxwdf$MFpj4#bog_b~%817{iF-~K2% zKmYIj`Tj40;x1+&X5jy1fFxF|l?>LV&eo19`B`gV+rh?#$F(Gi6ztS-EEIkek6{yn aK7%WWroxs)w4lTv0)mFPiy8Q<4EzN7iP50| literal 0 HcmV?d00001 diff --git a/src/components/Calls/CometChatIncomingDirectCall/controller.js b/src/components/Calls/CometChatIncomingDirectCall/controller.js index f0ed5f6..2aa492d 100644 --- a/src/components/Calls/CometChatIncomingDirectCall/controller.js +++ b/src/components/Calls/CometChatIncomingDirectCall/controller.js @@ -10,7 +10,9 @@ export class messageAlertManager { this.msgListenerId, new CometChat.MessageListener({ onCustomMessageReceived: (customMessage) => { - callback(enums.CUSTOM_MESSAGE_RECEIVED, customMessage); + if (customMessage.type == enums.CUSTOM_TYPE_MEETING) { + callback(enums.CUSTOM_MESSAGE_RECEIVED, customMessage); + } }, }), ); diff --git a/src/components/Calls/CometChatOutgoingCall/index.js b/src/components/Calls/CometChatOutgoingCall/index.js index 7566933..d6f7e6d 100644 --- a/src/components/Calls/CometChatOutgoingCall/index.js +++ b/src/components/Calls/CometChatOutgoingCall/index.js @@ -4,7 +4,7 @@ import { Text, View, Modal, TouchableOpacity } from 'react-native'; import { CometChat } from '@cometchat-pro/react-native-chat'; import Icon from 'react-native-vector-icons/MaterialIcons'; import Sound from 'react-native-sound'; - +import KeepAwake from 'react-native-keep-awake'; import { outgoingCallAlert } from '../../../resources/audio'; import { CometChatManager } from '../../../utils/controller'; import { CallScreenManager } from './controller'; @@ -361,6 +361,7 @@ class CometChatOutgoingCall extends React.PureComponent { return ( + diff --git a/src/components/Calls/CometChatOutgoingDirectCall/index.js b/src/components/Calls/CometChatOutgoingDirectCall/index.js index e6700cf..62b1d8a 100644 --- a/src/components/Calls/CometChatOutgoingDirectCall/index.js +++ b/src/components/Calls/CometChatOutgoingDirectCall/index.js @@ -2,7 +2,7 @@ import React from 'react'; import { Text, View, Modal, TouchableOpacity } from 'react-native'; import { CometChat } from '@cometchat-pro/react-native-chat'; import * as actions from '../../../utils/actions'; - +import KeepAwake from 'react-native-keep-awake'; import * as enums from '../../../utils/enums'; import { theme } from '../../../resources/theme'; @@ -117,6 +117,7 @@ class CometChatOutgoingDirectCall extends React.Component { return ( + {this.state.callSettings ? ( {this.listHeaderComponent()} { return ( @@ -872,7 +873,6 @@ class CometChatConversationList extends React.Component { ); }} ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} onScroll={this.handleScroll} onEndReached={this.endReached} onEndReachedThreshold={0.3} diff --git a/src/components/Chats/CometChatConversationList/styles.js b/src/components/Chats/CometChatConversationList/styles.js index 11fcb5d..96125c1 100644 --- a/src/components/Chats/CometChatConversationList/styles.js +++ b/src/components/Chats/CometChatConversationList/styles.js @@ -12,7 +12,7 @@ export default StyleSheet.create({ alignItems: 'center', }, conversationHeaderStyle: { - paddingBottom: 12 * heightRatio, + paddingBottom: 32, position: 'relative', paddingHorizontal: 22 * widthRatio, }, @@ -34,7 +34,7 @@ export default StyleSheet.create({ }, contactMsgStyle: { overflow: 'hidden', - width: '100%', + flex: 1, justifyContent: 'center', alignItems: 'center', }, @@ -52,8 +52,9 @@ export default StyleSheet.create({ }, headerContainer: { alignItems: 'center', - height: 32 * heightRatio, + height: 48, width: '100%', justifyContent: 'center', }, + flexGrow1: { flexGrow: 1 }, }); diff --git a/src/components/Chats/CometChatConversationListItem/index.js b/src/components/Chats/CometChatConversationListItem/index.js index ee72c24..13386fc 100644 --- a/src/components/Chats/CometChatConversationListItem/index.js +++ b/src/components/Chats/CometChatConversationListItem/index.js @@ -25,6 +25,7 @@ class CometChatConversationListItem extends React.Component { this.state = { lastMessage: '', lastMessageTimestamp: '', + isThreaded: false, }; } @@ -32,7 +33,10 @@ class CometChatConversationListItem extends React.Component { const message = this.getLastMessage(); const timestamp = this.getLastMessageTimestamp(); - this.setState({ lastMessage: message, lastMessageTimestamp: timestamp }); + this.setState({ + lastMessage: message || '', + lastMessageTimestamp: timestamp, + }); } componentDidUpdate(prevProps) { @@ -45,7 +49,7 @@ class CometChatConversationListItem extends React.Component { const timestamp = this.getLastMessageTimestamp(); this.setState({ - lastMessage: message, + lastMessage: message || '', lastMessageTimestamp: timestamp, }); } @@ -157,7 +161,7 @@ class CometChatConversationListItem extends React.Component { let time = timestamp.split(':'); // convert to array var hours = Number(time[0]); - var minutes = Number(time[1]); + var minutes = Number(time[1]?.split(' ')[0]); var timeValue; if (hours > 0 && hours <= 12) { @@ -175,8 +179,10 @@ class CometChatConversationListItem extends React.Component { } else if (diffTimestamp < 48 * 60 * 60 * 1000) { timestamp = 'Yesterday'; } else if (diffTimestamp < 7 * 24 * 60 * 60 * 1000) { - timestamp = messageTimestamp.toLocaleString('en-US', { - weekday: 'long', + timestamp = messageTimestamp.toLocaleDateString('en-US', { + year: '2-digit', + month: '2-digit', + day: '2-digit', }); } else { timestamp = messageTimestamp.toLocaleDateString('en-US', { @@ -226,6 +232,7 @@ class CometChatConversationListItem extends React.Component { getMessage = (lastMessage) => { try { let message = null; + this.setState({ isThreaded: lastMessage.parentMessageId }); switch (lastMessage.type) { case CometChat.MESSAGE_TYPE.TEXT: message = lastMessage.text; @@ -311,19 +318,21 @@ class CometChatConversationListItem extends React.Component { } let presence; + if (this.props.conversation.conversationType === 'user') { const { status } = this.props.conversation.conversationWith; presence = ( ); } return ( - + - + {this.props.conversation.conversationWith.name} - - {this.state.lastMessage} - - - {lastMessageTimeStamp} + + + + {`${this.state.isThreaded ? 'In a thread : ' : ''}` + + this.state.lastMessage} + { this.videoCall(true); }); break; case actions.DIRECT_CALL_ENDED: - this.setState( - { joinDirectCall: false, ongoingDirectCall: null }, - () => { - this.props.navigation.navigate( - enums.NAVIGATION_CONSTANTS.COMET_CHAT_MESSAGES, - { - theme: this.theme, - item: { ...this.state.item }, - tab: this.state.tab, - type: this.state.type, - composedThreadMessage: this.state.composedThreadMessage, - callMessage: this.state.callMessage, - loggedInUser: this.loggedInUser, - actionGenerated: this.actionHandler, - }, - ); - }, - ); + this.setState({ joinDirectCall: false, ongoingDirectCall: null }); break; case actions.ACCEPT_DIRECT_CALL: @@ -230,20 +210,10 @@ class CometChatConversationListWithMessages extends React.Component { const usersList = [this.state.item.uid]; CometChatManager.blockUsers(usersList) .then((response) => { - if (response) { - this.setState({ item: { ...this.state.item, blockedByMe: true } }); - this.dropDownAlertRef?.showMessage('success', 'Blocked user'); - } else { - this.dropDownAlertRef?.showMessage( - 'error', - 'Failed to blocked user', - ); - } + this.setState({ item: { ...this.state.item, blockedByMe: true } }); }) .catch((error) => { logger('Blocking user fails with error', error); - const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); }); } catch (error) { logger(error); diff --git a/src/components/CometChatUI/index.js b/src/components/CometChatUI/index.js index 2e234f7..f701e53 100644 --- a/src/components/CometChatUI/index.js +++ b/src/components/CometChatUI/index.js @@ -23,14 +23,14 @@ export default () => { if (route.name === 'Chats') { return ( - + ); } if (route.name === 'More') { return ( ); @@ -52,7 +52,7 @@ export default () => { inactiveTintColor: 'rgba(0,0,0,0.5)', activeBackgroundColor: theme.color.white, inactiveBackgroundColor: theme.color.white, - labelStyle: { fontSize: 8 * heightRatio }, + labelStyle: { fontSize: 12 }, }}> { + .catch((error) => { const errorCode = error?.message || 'ERROR'; this.dropDownAlertRef?.showMessage('error', errorCode); logger('addMembersToGroup failed with exception:', error); @@ -330,9 +329,6 @@ class CometChatAddGroupMemberList extends React.Component { */ itemSeparatorComponent = ({ leadingItem }) => { - if (leadingItem.header) { - return null; - } return ( - - { - return ( - - - - - Add Members - - - { - this.sheetRef.current.snapTo(1); - this.props.close(); - }} - style={{}}> - - Close - - + { + return ( + + + + + Add Members + - this.textInputRef.current.focus()}> - - - { - this.setState({ textInputFocused: true }); - }} - onBlur={() => { - this.setState({ textInputFocused: false }); - }} - clearButtonMode="always" - numberOfLines={1} - style={[ - style.contactSearchInputStyle, - { - color: `${this.theme.color.primary}`, - }, - ]} - /> - - - { - const chr = item.name[0].toUpperCase(); - let firstLetter = null; - if (chr !== currentLetter) { - currentLetter = chr; - firstLetter = currentLetter; - } - - return ( - - - - ); - }} - ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} - onScroll={this.handleScroll} - onEndReached={this.endReached} - onEndReachedThreshold={0.3} - showsVerticalScrollIndicator={false} - /> { + this.sheetRef.current.snapTo(1); + this.props.close(); + }} + style={{}}> + + Close + + + + this.textInputRef.current.focus()}> + - + + { + this.setState({ textInputFocused: true }); + }} + onBlur={() => { + this.setState({ textInputFocused: false }); + }} + clearButtonMode="always" + numberOfLines={1} style={[ - style.addBtnTxtStyle, + style.contactSearchInputStyle, { - color: `${this.theme.color.white}`, + color: `${this.theme.color.primary}`, }, - ]}> - Add - - - - ); - }} - onCloseEnd={() => { - this.props.close(); - }} - /> - + ]} + /> + + + { + const chr = item.name[0].toUpperCase(); + let firstLetter = null; + if (chr !== currentLetter) { + currentLetter = chr; + firstLetter = currentLetter; + } + + return ( + + + + ); + }} + ListEmptyComponent={this.listEmptyContainer} + ItemSeparatorComponent={this.itemSeparatorComponent} + onScroll={this.handleScroll} + onEndReached={this.endReached} + onEndReachedThreshold={0.3} + showsVerticalScrollIndicator={false} + /> + + + Add + + + + ); + }} + onCloseEnd={() => { + this.props.close(); + }} + /> (this.dropDownAlertRef = ref)} /> diff --git a/src/components/Groups/CometChatAddGroupMemberList/styles.js b/src/components/Groups/CometChatAddGroupMemberList/styles.js index 5bfdf24..d56e941 100644 --- a/src/components/Groups/CometChatAddGroupMemberList/styles.js +++ b/src/components/Groups/CometChatAddGroupMemberList/styles.js @@ -50,8 +50,8 @@ export default StyleSheet.create({ contactSearchInputStyle: { flex: 1, paddingVertical: 4, - marginHorizontal: 8, - fontSize: 15, + marginHorizontal: 10, + fontSize: 14, }, contactMsgStyle: { overflow: 'hidden', @@ -99,10 +99,12 @@ export default StyleSheet.create({ borderRadius: 10, padding: 10, paddingHorizontal: 15, + width: '40%', + alignItems: 'center', alignSelf: 'center', }, addBtnTxtStyle: { - fontSize: 14, + fontSize: 16, fontWeight: '500', }, }); diff --git a/src/components/Groups/CometChatAddGroupMemberListItem/index.js b/src/components/Groups/CometChatAddGroupMemberListItem/index.js index 8df3dad..e30b865 100644 --- a/src/components/Groups/CometChatAddGroupMemberListItem/index.js +++ b/src/components/Groups/CometChatAddGroupMemberListItem/index.js @@ -10,7 +10,9 @@ const CometChatAddGroupMemberListItem = (props) => { const viewTheme = { ...theme, ...props.theme }; const [checked, setChecked] = useState(() => { - const found = props.members.find((member) => member.uid === props.user.uid); + const found = props.membersToAdd.find( + (member) => member.uid === props.user.uid, + ); const value = !!found; return value; @@ -43,7 +45,7 @@ const CometChatAddGroupMemberListItem = (props) => { status={props.user.status} cornerRadius={18} borderColor={viewTheme.color.darkSecondary} - borderWidth={1} + borderWidth={2} /> diff --git a/src/components/Groups/CometChatAddGroupMemberListItem/styles.js b/src/components/Groups/CometChatAddGroupMemberListItem/styles.js index 738b845..871bd5d 100644 --- a/src/components/Groups/CometChatAddGroupMemberListItem/styles.js +++ b/src/components/Groups/CometChatAddGroupMemberListItem/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ nameStyle: { flexDirection: 'row', @@ -8,7 +8,7 @@ export default StyleSheet.create({ width: '50%', marginRight: 15, }, - userName: { fontSize: 14 }, + userName: { fontSize: 16, color: theme.color.primary }, rowStyle: { flexDirection: 'row', alignItems: 'center', @@ -17,13 +17,14 @@ export default StyleSheet.create({ paddingRight: 20 * widthRatio, justifyContent: 'space-between', width: '100%', + height: 64, fontSize: 14, }, avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, borderRadius: 22, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 15 * widthRatio, diff --git a/src/components/Groups/CometChatBanGroupMemberListItem/index.js b/src/components/Groups/CometChatBanGroupMemberListItem/index.js index 5012b6b..5b2db6f 100644 --- a/src/components/Groups/CometChatBanGroupMemberListItem/index.js +++ b/src/components/Groups/CometChatBanGroupMemberListItem/index.js @@ -50,11 +50,13 @@ export default (props) => { - + {name} diff --git a/src/components/Groups/CometChatBanGroupMemberListItem/styles.js b/src/components/Groups/CometChatBanGroupMemberListItem/styles.js index 02d322d..73febf4 100644 --- a/src/components/Groups/CometChatBanGroupMemberListItem/styles.js +++ b/src/components/Groups/CometChatBanGroupMemberListItem/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ nameStyle: { flexDirection: 'row', @@ -10,10 +10,15 @@ export default StyleSheet.create({ }, roleStyle: { width: '30%', - fontSize: 13, + fontSize: 16, + color: theme.color.helpText, }, - imageContainer: { alignItems: 'center', justifyContent: 'center' }, - unbanText: { fontSize: 10, textAlign: 'center' }, + imageContainer: { + alignItems: 'center', + justifyContent: 'center', + opacity: 0.6, + }, + unbanText: { fontSize: 12, textAlign: 'center', color: theme.color.primary }, rowStyle: { flexDirection: 'row', paddingVertical: 7 * heightRatio, @@ -27,8 +32,8 @@ export default StyleSheet.create({ avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, borderRadius: 22, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 6 * widthRatio, diff --git a/src/components/Groups/CometChatGroupDetails/index.js b/src/components/Groups/CometChatGroupDetails/index.js index 9c91704..199ddcc 100644 --- a/src/components/Groups/CometChatGroupDetails/index.js +++ b/src/components/Groups/CometChatGroupDetails/index.js @@ -4,7 +4,7 @@ import React from 'react'; import { View, Text, TouchableOpacity, Dimensions, Modal } from 'react-native'; import theme from '../../../resources/theme'; import Icon from 'react-native-vector-icons/MaterialIcons'; -import { CometChatSharedMedia } from '../../Shared'; +import { CometChatSharedMedia, CometChatAvatar } from '../../Shared'; import style from './styles'; import BottomSheet from 'reanimated-bottom-sheet'; import { CometChat } from '@cometchat-pro/react-native-chat'; @@ -21,6 +21,7 @@ import { import { deviceHeight } from '../../../utils/consts'; import { logger } from '../../../utils/common'; import DropDownAlert from '../../Shared/DropDownAlert'; +import styles from '../../Shared/CometChatAvatar/styles'; const ADD_MEMBER = 'addMember'; const VIEW_MEMBER = 'viewMember'; @@ -631,21 +632,23 @@ export default class CometChatGroupDetails extends React.Component { ); } - - let leaveGroupBtn = ( - { - this.leaveGroup(); - }}> - - Leave group - - - ); + let leaveGroupBtn = null; + if (this.props.item.scope !== CometChat.GROUP_MEMBER_SCOPE.ADMIN) { + leaveGroupBtn = ( + { + this.leaveGroup(); + }}> + + Leave group + + + ); + } let sharedMediaView = ( - - Members - + Members {viewMembersBtn} {addMembersBtn} @@ -680,10 +677,7 @@ export default class CometChatGroupDetails extends React.Component { let options = ( + style={[style.sectionHeaderStyle, { color: theme.color.helpText }]}> Options @@ -746,6 +740,18 @@ export default class CometChatGroupDetails extends React.Component { ); } + let avatar = ( + + + + ); + return ( Details + + {avatar} + + + + {this.props.item.name} + + + + {parseInt(this.props.item?.membersCount)} Members + + + + {members} {options} diff --git a/src/components/Groups/CometChatGroupDetails/styles.js b/src/components/Groups/CometChatGroupDetails/styles.js index cfaee67..7e0e2f7 100644 --- a/src/components/Groups/CometChatGroupDetails/styles.js +++ b/src/components/Groups/CometChatGroupDetails/styles.js @@ -1,12 +1,14 @@ import { Dimensions, StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ container: { flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }, itemLinkStyle: { - fontSize: 15, + fontSize: 16, lineHeight: 20, fontWeight: '600', + marginVertical: 4, + color: theme.color.primary, }, fullWidth: { width: '100%' }, listItemContainer: { width: '100%', marginVertical: 6 }, @@ -17,6 +19,7 @@ export default StyleSheet.create({ fontWeight: '500', lineHeight: 20, textTransform: 'uppercase', + color: theme.color.helpText, }, headerStyle: { flexDirection: 'row', @@ -40,4 +43,29 @@ export default StyleSheet.create({ overflow: 'hidden', minHeight: Dimensions.get('window').height - 80, }, + userName: { + fontSize: 18 * heightRatio, + color: theme.color.primary, + fontWeight: 'bold', + }, + statusText: { + fontSize: 14, + color: theme.color.blue, + }, + avatarStyle: { + width: 48, + height: 48, + borderRadius: 24, + backgroundColor: 'rgba(51,153,255,0.25)', + }, + groupDetailContainer: { + padding: 16, + flexDirection: 'row', + alignItems: 'center', + }, + groupDetail: { + paddingLeft: 8, + justifyContent: 'center', + height: 48, + }, }); diff --git a/src/components/Groups/CometChatGroupList/index.js b/src/components/Groups/CometChatGroupList/index.js index e2415d9..f9d391d 100644 --- a/src/components/Groups/CometChatGroupList/index.js +++ b/src/components/Groups/CometChatGroupList/index.js @@ -357,12 +357,15 @@ class CometChatGroupList extends React.Component { CometChat.joinGroup(this.state.guid, this.state.groupType, passcode) .then((response) => { if (typeof response === 'object') { - this.dropDownAlertRef?.showMessage( + this.dropDownAlertModelRef?.showMessage( 'success', 'Group joined Successfully', ); } else { - this.dropDownAlertRef?.showMessage('error', 'Failed to join group'); + this.dropDownAlertModelRef?.showMessage( + 'error', + 'Failed to join group', + ); return; } const groups = [...this.state.grouplist]; @@ -382,9 +385,7 @@ class CometChatGroupList extends React.Component { }) .catch((error) => { const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); - - if (error.code === 'ERR_WRONG_GROUP_PASS') Alert.alert(error.message); + this.dropDownAlertModelRef?.showMessage('error', errorCode); }); } }; @@ -673,11 +674,7 @@ class CometChatGroupList extends React.Component { backgroundColor: `${this.theme.backgroundColor.grey}`, }, ]}> - + + (this.dropDownAlertModelRef = ref)} /> ); } @@ -835,6 +833,7 @@ class CometChatGroupList extends React.Component { {this.ListHeaderComponent()} { return ( @@ -847,7 +846,6 @@ class CometChatGroupList extends React.Component { ); }} ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} onScroll={this.handleScroll} onEndReached={this.endReached} onEndReachedThreshold={0.3} diff --git a/src/components/Groups/CometChatGroupList/styles.js b/src/components/Groups/CometChatGroupList/styles.js index 4c25ba0..73d4f5e 100644 --- a/src/components/Groups/CometChatGroupList/styles.js +++ b/src/components/Groups/CometChatGroupList/styles.js @@ -12,9 +12,9 @@ export default StyleSheet.create({ alignItems: 'center', }, groupHeaderStyle: { - paddingBottom: 12 * heightRatio, + paddingBottom: 16, position: 'relative', - paddingHorizontal: 22 * widthRatio, + paddingHorizontal: 16, }, contactHeaderCloseStyle: { height: 24, @@ -27,14 +27,14 @@ export default StyleSheet.create({ fontSize: 28, }, groupSearchStyle: { - padding: 4 * heightRatio, - marginTop: 10 * heightRatio, + padding: 8, + marginTop: 16, flexDirection: 'row', position: 'relative', alignItems: 'center', width: '100%', borderWidth: 0, - borderRadius: 8, + borderRadius: 10, shadowColor: '#000', shadowOffset: { width: 0, @@ -45,13 +45,13 @@ export default StyleSheet.create({ }, contactSearchInputStyle: { flex: 1, - paddingVertical: 4 * heightRatio, - marginHorizontal: 8 * widthRatio, - fontSize: 15, + paddingVertical: 4, + marginHorizontal: 2, + fontSize: 17, }, contactMsgStyle: { overflow: 'hidden', - width: '100%', + flex: 1, justifyContent: 'center', alignItems: 'center', }, @@ -69,7 +69,7 @@ export default StyleSheet.create({ }, headerContainer: { alignItems: 'center', - height: 32 * heightRatio, + height: 48, width: '100%', justifyContent: 'center', }, diff --git a/src/components/Groups/CometChatGroupListItem/styles.js b/src/components/Groups/CometChatGroupListItem/styles.js index e336cc5..4bed56f 100644 --- a/src/components/Groups/CometChatGroupListItem/styles.js +++ b/src/components/Groups/CometChatGroupListItem/styles.js @@ -1,34 +1,44 @@ import { StyleSheet } from 'react-native'; import { widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ fullFlex: { flex: 1 }, listItem: { flexDirection: 'row', - alignItems: 'center', width: '100%', - maxHeight: 62, - paddingHorizontal: 20, + maxHeight: 64, + paddingHorizontal: 16, + marginBottom: 16, }, avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, - marginRight: 15 * widthRatio, + width: 40, + height: 40, + marginRight: 10, justifyContent: 'center', backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, }, groupDetailsContainer: { - borderBottomWidth: 0.5, + borderBottomWidth: 1, flex: 1, paddingBottom: 10, - paddingTop: 10, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', }, - memberCountStyle: { fontSize: 14, fontWeight: '200', maxWidth: '80%' }, - groupNameStyle: { fontSize: 18, fontWeight: '600', maxWidth: '80%' }, + memberCountStyle: { + fontSize: 12, + fontWeight: '200', + maxWidth: '80%', + color: theme.color.helpText, + }, + + groupNameStyle: { + fontSize: 16, + fontWeight: '600', + maxWidth: '80%', + color: theme.color.primary, + }, }); diff --git a/src/components/Groups/CometChatGroupListWithMessages/index.js b/src/components/Groups/CometChatGroupListWithMessages/index.js index 23a89d8..13a3424 100644 --- a/src/components/Groups/CometChatGroupListWithMessages/index.js +++ b/src/components/Groups/CometChatGroupListWithMessages/index.js @@ -214,24 +214,7 @@ class CometChatGroupListWithMessages extends React.Component { }); break; case actions.DIRECT_CALL_ENDED: - this.setState( - { joinDirectCall: false, ongoingDirectCall: null }, - () => { - this.props.navigation.navigate( - enums.NAVIGATION_CONSTANTS.COMET_CHAT_MESSAGES, - { - theme: this.theme, - item: { ...this.state.item }, - tab: this.state.tab, - type: this.state.type, - composedThreadMessage: this.state.composedThreadMessage, - callMessage: this.state.callMessage, - loggedInUser: this.loggedInUser, - actionGenerated: this.actionHandler, - }, - ); - }, - ); + this.setState({ joinDirectCall: false, ongoingDirectCall: null }); break; case actions.ACCEPT_DIRECT_CALL: this.setState({ joinDirectCall: true }, () => { diff --git a/src/components/Groups/CometChatViewGroupMemberList/index.js b/src/components/Groups/CometChatViewGroupMemberList/index.js index 977b0ef..859d354 100644 --- a/src/components/Groups/CometChatViewGroupMemberList/index.js +++ b/src/components/Groups/CometChatViewGroupMemberList/index.js @@ -273,30 +273,31 @@ export default class CometChatViewGroupMemberList extends React.Component { - { - return ( - - ); - }} - ListEmptyComponent={this.listEmptyContainer} - ItemSeparatorComponent={this.itemSeparatorComponent} - onScroll={this.handleScroll} - onEndReached={this.endReached} - onEndReachedThreshold={0.3} - contentContainerStyle={style.contentContainerStyle} - style={style.listStyle} - showsVerticalScrollIndicator={false} - /> + + { + return ( + + ); + }} + ListEmptyComponent={this.listEmptyContainer} + // ItemSeparatorComponent={this.itemSeparatorComponent} + onScroll={this.handleScroll} + onEndReached={this.endReached} + contentContainerStyle={{ flexGrow: 1 }} + onEndReachedThreshold={0.3} + showsVerticalScrollIndicator={false} + /> + ); }} diff --git a/src/components/Groups/CometChatViewGroupMemberList/styles.js b/src/components/Groups/CometChatViewGroupMemberList/styles.js index 2e4fc10..d1603bf 100644 --- a/src/components/Groups/CometChatViewGroupMemberList/styles.js +++ b/src/components/Groups/CometChatViewGroupMemberList/styles.js @@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native'; import { calc, deviceHeight } from '../../../utils/consts'; export default StyleSheet.create({ - container: { flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }, + container: { + flex: 1, + backgroundColor: 'rgba(0,0,0,0.7)', + }, reactionDetailsContainer: { backgroundColor: 'white', paddingVertical: 20, borderRadius: 20, - minHeight: deviceHeight, }, headerContainerStyle: { justifyContent: 'center', @@ -69,7 +71,7 @@ export default StyleSheet.create({ fontWeight: '600', }, contactListStyle: { - height: calc(), + height: 400, margin: 0, padding: 0, }, @@ -107,4 +109,7 @@ export default StyleSheet.create({ fontSize: 14, fontWeight: '500', }, + listContainer: { + height: deviceHeight * 0.8, + }, }); diff --git a/src/components/Groups/CometChatViewGroupMemberListItem/index.js b/src/components/Groups/CometChatViewGroupMemberListItem/index.js index cd070f2..0a7e69f 100644 --- a/src/components/Groups/CometChatViewGroupMemberListItem/index.js +++ b/src/components/Groups/CometChatViewGroupMemberListItem/index.js @@ -185,8 +185,8 @@ export default (props) => { ); diff --git a/src/components/Groups/CometChatViewGroupMemberListItem/style.js b/src/components/Groups/CometChatViewGroupMemberListItem/style.js index 933f42c..6462920 100644 --- a/src/components/Groups/CometChatViewGroupMemberListItem/style.js +++ b/src/components/Groups/CometChatViewGroupMemberListItem/style.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { deviceWidth, heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ container: { flexDirection: 'row', @@ -27,8 +27,8 @@ export default StyleSheet.create({ avatarContainer: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, borderRadius: 22, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 6 * widthRatio, @@ -41,7 +41,12 @@ export default StyleSheet.create({ marginRight: 12 * widthRatio, }, fullFlex: { flex: 1 }, - pickerItemStyle: { fontSize: 14 }, + pickerItemStyle: { + fontSize: 16, + color: theme.color.helpText, + + borderRadius: 24, + }, pickerItemDetail: { height: 20 * heightRatio }, doneContainer: { width: 30, alignItems: 'center', justifyContent: 'center' }, editText: { fontSize: 10, textAlign: 'center' }, @@ -52,9 +57,17 @@ export default StyleSheet.create({ alignItems: 'center', justifyContent: 'space-between', }, - actionText: { fontSize: 10, textAlign: 'center' }, - changeContainer: { flex: 1, flexDirection: 'row' }, + actionText: { + fontSize: 12, + textAlign: 'center', + color: theme.color.primary, + + marginHorizontal: 5, + }, + changeContainer: { flex: 1, flexDirection: 'row', opacity: 0.6 }, nameText: { width: 0.2 * deviceWidth, + fontSize: 16, + color: theme.color.primary, }, }); diff --git a/src/components/Messages/.DS_Store b/src/components/Messages/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e2350f846e6f944f54036a94b43e68095b772361 GIT binary patch literal 10244 zcmeHM;ZD;~6g~yiGBsjCgdZkWj0r!8fj}U{n2a%uL`{q%XrczXb%E(cSL05n$8@NMMNel%dty1 z#1y{IwWkaPEmM#N#uGJYm3GO7TraZz!aLUW7Y1_9+gAu_Y$ru zXm{x`?)doGw1cx8HK~YSmCEZ?uT-phMPTr2cNcZ~rzkj!$ISx)BY|B`jQb^mJ0A1A z>v(?oe4BXcGPO|a;pa0ZPKr}(`L)2#uf@M7mxdz<8A;6ERp} z!ma!P?MDP{av++ddJV+(dnqC){86EBoTcHXdm!v}Vz8LDC&oIhluPB%2<_tN8V&}N z(5FU(a{S(_fw(%5Byprw5e8eafql@rq(UD20!oEyQLC7$hN)2X zR*Y4QBggZrS;wwylN_LVX>xB!%gqE@^3cGxa}roZGN|I$ch=yn9MUkAK*N1#;8`Rb z{r)IERW0`~;G z5>Zz*+=z*~sv#YxINmC{H2^&=pE%Mg{viLP=8}l>cO}k)EJ({EOiqT1KgfdA91;;$ zHN;KL1@VnpqBr1DogU(Nh%ZYIIipTaByVy|RlK;jOUb&xaw2aPXTuuu#-U(C6YP!7 z6dYGoM_g_`_C((=O^)8sb0vC-aZc;BpV$GBDL+GNB0X}d@x{ai872mS${}Z)=qD4? z0o|e3(f&-#P=CzFx@ZraJr4{^lP%u=U+e$>|Jielwpe@M40*s9$rtiD82o#$C~7p?CWk|PH)9e3#vi|=CJm&Aw literal 0 HcmV?d00001 diff --git a/src/components/Messages/CometChatDeleteMessageBubble/index.js b/src/components/Messages/CometChatDeleteMessageBubble/index.js index 59189f4..7b69d1a 100644 --- a/src/components/Messages/CometChatDeleteMessageBubble/index.js +++ b/src/components/Messages/CometChatDeleteMessageBubble/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, Platform } from 'react-native'; import theme from '../../../resources/theme'; import style from './style'; import * as enums from '../../../utils/enums'; @@ -9,14 +9,38 @@ import { CometChatAvatar } from '../../Shared'; const CometChatDeleteMessageBubble = (props) => { const message = { ...props.message, messageFrom: props.messageOf }; let messageContainer = null; - const timestamp = new Date(props.message.sentAt * 1000).toLocaleTimeString( - 'en-US', - { - hour: 'numeric', - minute: 'numeric', - hour12: true, - }, - ); + + let timestamp = new Date( + props.message.sentAt + ? props.message.sentAt * 1000 + : props.message._composedAt, + ).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: 'numeric', + hour12: true, + }); + if (Platform.OS === 'android') { + let time = timestamp.split(':'); // convert to array + + // fetch + var hours = Number(time[0]); + var minutes = Number(time[1]?.split(' ')[0]); + + // calculate + var timeValue; + + if (hours > 0 && hours <= 12) { + timeValue = '' + hours; + } else if (hours > 12) { + timeValue = '' + (hours - 12); + } else if (hours == 0) { + timeValue = '12'; + } + + timeValue += minutes < 10 ? ':0' + minutes : ':' + minutes; // get minutes + timeValue += hours >= 12 ? ' PM' : ' AM'; // get AM/PM + timestamp = timeValue; + } const viewTheme = { ...theme, ...props.theme }; if (props.messageOf === enums.MESSAGE_OF_SENDER) { diff --git a/src/components/Messages/CometChatDeleteMessageBubble/style.js b/src/components/Messages/CometChatDeleteMessageBubble/style.js index 2a2afe6..9c5f087 100644 --- a/src/components/Messages/CometChatDeleteMessageBubble/style.js +++ b/src/components/Messages/CometChatDeleteMessageBubble/style.js @@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native'; import { widthRatio } from '../../../utils/consts'; export default StyleSheet.create({ - messageContainerStyle: { marginBottom: 16 }, + messageContainerStyle: { marginBottom: 16, marginHorizontal: 8 }, messageSenderNameContainerStyle: { marginBottom: 5 }, messageContainerForReceiver: { flexDirection: 'row', diff --git a/src/components/Messages/CometChatImageViewer/styles.js b/src/components/Messages/CometChatImageViewer/styles.js index 0f04070..6684ed0 100644 --- a/src/components/Messages/CometChatImageViewer/styles.js +++ b/src/components/Messages/CometChatImageViewer/styles.js @@ -22,8 +22,7 @@ export default StyleSheet.create({ }, bottomSheetContainer: { backgroundColor: 'white', - height: deviceHeight + 200 * heightRatio, - paddingBottom: 40 * heightRatio, + height: deviceHeight * 0.9, }, crossImgContainer: { alignSelf: 'flex-end', @@ -38,11 +37,10 @@ export default StyleSheet.create({ backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', - height: 450 * heightRatio, + flex: 1, }, imageStyles: { + width: '90%', height: '100%', - width: deviceWidth, - maxHeight: deviceHeight * 0.4, }, }); diff --git a/src/components/Messages/CometChatLiveReactions/index.js b/src/components/Messages/CometChatLiveReactions/index.js index 4f00cd6..f74f415 100644 --- a/src/components/Messages/CometChatLiveReactions/index.js +++ b/src/components/Messages/CometChatLiveReactions/index.js @@ -23,11 +23,11 @@ function getRandomNumber(min, max) { } class AnimatedHeart extends Component { - state = { - position: new Animated.Value(0), - }; - - componentWillMount() { + constructor(props) { + super(props); + this.state = { + position: new Animated.Value(0), + }; this._yAnimation = this.state.position.interpolate({ inputRange: [NEGATIVE_END_Y, 0], outputRange: [ANIMATION_END_Y, 0], diff --git a/src/components/Messages/CometChatMessageActions/actions.js b/src/components/Messages/CometChatMessageActions/actions.js index 5145889..cef7ebd 100644 --- a/src/components/Messages/CometChatMessageActions/actions.js +++ b/src/components/Messages/CometChatMessageActions/actions.js @@ -16,6 +16,22 @@ import { CometChat } from '@cometchat-pro/react-native-chat'; const actionIconSize = 26; export default (props) => { + let sendMessage = null; + if ( + props.message.messageFrom === enums.MESSAGE_FROM_RECEIVER && + props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP + ) { + sendMessage = ( + + props.actionGenerated(actions.SEND_MESSAGE, props.message) + }> + + Send Message Privately + + ); + } let threadedChats = ( { ); // if deleting messages need to be disabled - if (props.message.messageFrom === 'receiver') { + if ( + props.message.messageFrom === enums.MESSAGE_FROM_RECEIVER && + props.item.scope !== CometChat.GROUP_MEMBER_SCOPE.ADMIN && + props.item.scope !== CometChat.GROUP_MEMBER_SCOPE.MODERATOR + ) { deleteMessage = null; } let editMessage = ( @@ -76,6 +96,7 @@ export default (props) => { return ( {}}> + {sendMessage} {threadedChats} {editMessage} {deleteMessage} diff --git a/src/components/Messages/CometChatMessageComposer/composerActions.js b/src/components/Messages/CometChatMessageComposer/composerActions.js index 1c5a3f7..a2e168d 100644 --- a/src/components/Messages/CometChatMessageComposer/composerActions.js +++ b/src/components/Messages/CometChatMessageComposer/composerActions.js @@ -28,7 +28,7 @@ export default class ComposerActions extends Component { } } - takePhoto = async () => { + takePhoto = async (mediaType = 'photo') => { try { let granted = null; if (Platform.OS === 'android') { @@ -50,7 +50,9 @@ export default class ComposerActions extends Component { ) { launchCamera( { + mediaType, includeBase64: false, + cameraType: 'back', }, (response) => { if (response.didCancel) { @@ -64,15 +66,30 @@ export default class ComposerActions extends Component { type = response.type; name = 'Camera_001.jpeg'; } + if (mediaType == 'video') { + type = 'video/quicktime'; + name = 'Camera_002.mov'; + } const file = { - name: Platform.OS === 'android' ? response.fileName : name, - type: Platform.OS === 'android' ? response.type : type, + name: + Platform.OS === 'android' && mediaType != 'video' + ? response.fileName + : name, + type: + Platform.OS === 'android' && mediaType != 'video' + ? response.type + : type, uri: Platform.OS === 'android' ? response.uri : response.uri.replace('file://', ''), }; - this.props.sendMediaMessage(file, CometChat.MESSAGE_TYPE.IMAGE); + this.props.sendMediaMessage( + file, + mediaType === 'photo' + ? CometChat.MESSAGE_TYPE.IMAGE + : CometChat.MESSAGE_TYPE.VIDEO, + ); }, ); } @@ -87,9 +104,7 @@ export default class ComposerActions extends Component { { mediaType: type, includeBase64: false, - maxHeight: 200, - maxWidth: 200, - videoQuality: 'medium', + cameraType: 'back', }, (response) => { if (response.didCancel) { @@ -148,19 +163,39 @@ export default class ComposerActions extends Component { this.takePhoto()}> - + Take Photo ); + let takeVideoBtn = ( + this.takePhoto('video')}> + + + Take Video + + + ); let avp = ( this.launchLibrary('photo')}> - + Photo Library @@ -217,6 +252,7 @@ export default class ComposerActions extends Component { return ( {takePhotoBtn} + {takeVideoBtn} {avp} {vp} {docs} @@ -241,7 +277,7 @@ export default class ComposerActions extends Component { (this.loggedInUser = user)) + .catch((error) => { + const errorCode = error?.message || 'ERROR'; + this.props?.showMessage('error', errorCode); + }); } componentDidMount() { @@ -171,7 +178,7 @@ export default class CometChatMessageComposer extends React.PureComponent { this.messageSending = true; const { receiverId, receiverType } = this.getReceiverDetails(); - + const conversationId = this.props.getConversationId(); const mediaMessage = new CometChat.MediaMessage( receiverId, messageInput, @@ -183,17 +190,44 @@ export default class CometChatMessageComposer extends React.PureComponent { } this.endTyping(); + // mediaMessage.setSender(this.loggedInUser); + mediaMessage.setReceiver(receiverType); + mediaMessage.setConversationId(conversationId); + mediaMessage.setType(messageType); + mediaMessage._composedAt = Math.round(+new Date() / 1000); + mediaMessage._id = '_' + Math.random().toString(36).substr(2, 9); + mediaMessage.setData({ + type: messageType, + category: CometChat.CATEGORY_MESSAGE, + name: messageInput['name'], + file: messageInput, + url: messageInput['uri'], + sender: this.loggedInUser, + }); + this.props.actionGenerated(actions.MESSAGE_COMPOSED, [mediaMessage]); CometChat.sendMessage(mediaMessage) - .then((response) => { + .then(async (response) => { this.messageSending = false; this.playAudio(); - this.props.actionGenerated(actions.MESSAGE_COMPOSED, [response]); + + const newMessageObj = { + ...response, + _id: mediaMessage._id, + localFile: messageInput, + }; + this.props.actionGenerated(actions.MESSAGE_SENT, newMessageObj); }) .catch((error) => { + const newMessageObj = { ...mediaMessage, error: error }; const errorCode = error?.message || 'ERROR'; + this.props.actionGenerated( + actions.ERROR_IN_SEND_MESSAGE, + newMessageObj, + ); + this.props?.showMessage('error', errorCode); this.messageSending = false; - logger('Message sending failed with error:', error); + logger('Message sending failed with error: ', error); }); } catch (error) { logger(error); @@ -225,9 +259,11 @@ export default class CometChatMessageComposer extends React.PureComponent { this.editMessage(); return false; } + this.endTyping(); const { receiverId, receiverType } = this.getReceiverDetails(); const messageInput = this.state.messageInput.trim(); + const conversationId = this.props.getConversationId(); const textMessage = new CometChat.TextMessage( receiverId, messageInput, @@ -237,17 +273,32 @@ export default class CometChatMessageComposer extends React.PureComponent { textMessage.setParentMessageId(this.props.parentMessageId); } - this.endTyping(); - + textMessage.setSender(this.loggedInUser); + textMessage.setReceiver(receiverType); + textMessage.setText(messageInput); + textMessage.setConversationId(conversationId); + textMessage._composedAt = Date.now(); + textMessage._id = '_' + Math.random().toString(36).substr(2, 9); + this.props.actionGenerated(actions.MESSAGE_COMPOSED, [textMessage]); + this.setState({ messageInput: '', replyPreview: false }); + + this.messageInputRef.current.textContent = ''; + this.playAudio(); CometChat.sendMessage(textMessage) .then((message) => { + const newMessageObj = { ...message, _id: textMessage._id }; this.setState({ messageInput: '' }); this.messageSending = false; this.messageInputRef.current.textContent = ''; - this.playAudio(); - this.props.actionGenerated(actions.MESSAGE_COMPOSED, [message]); + // this.playAudio(); + this.props.actionGenerated(actions.MESSAGE_SENT, newMessageObj); }) .catch((error) => { + const newMessageObj = { ...textMessage, error: error }; + this.props.actionGenerated( + actions.ERROR_IN_SEND_MESSAGE, + newMessageObj, + ); logger('Message sending failed with error:', error); const errorCode = error?.message || 'ERROR'; this.props?.showMessage('error', errorCode); @@ -403,11 +454,10 @@ export default class CometChatMessageComposer extends React.PureComponent { switch (action) { case actions.POLL_CREATED: this.toggleCreatePoll(); - - // temporary check; custom data listener working for sender too - if (this.props.type === CometChat.RECEIVER_TYPE.USER) { + if (this.props.type === enums.TYPE_USER) { this.props.actionGenerated(actions.POLL_CREATED, [message]); } + // temporary check; custom data listener working for sender too\ break; case actions.SEND_STICKER: @@ -435,7 +485,7 @@ export default class CometChatMessageComposer extends React.PureComponent { sticker_name: stickerMessage.stickerName, }; const customType = enums.CUSTOM_TYPE_STICKER; - + const conversationId = this.props.getConversationId(); const customMessage = new CometChat.CustomMessage( receiverId, receiverType, @@ -445,14 +495,29 @@ export default class CometChatMessageComposer extends React.PureComponent { if (this.props.parentMessageId) { customMessage.setParentMessageId(this.props.parentMessageId); } + customMessage.setConversationId(conversationId); + customMessage.setSender(this.loggedInUser); + customMessage.setReceiver(receiverType); + customMessage.setConversationId(conversationId); + customMessage._composedAt = Date.now(); + customMessage._id = '_' + Math.random().toString(36).substr(2, 9); + this.props.actionGenerated(actions.MESSAGE_COMPOSED, [customMessage]); CometChat.sendCustomMessage(customMessage) .then((message) => { this.messageSending = false; this.playAudio(); - this.props.actionGenerated(actions.MESSAGE_COMPOSED, [message]); + const newMessageObj = { ...message, _id: customMessage._id }; + + this.props.actionGenerated(actions.MESSAGE_SENT, newMessageObj); }) .catch((error) => { + const newMessageObj = { ...customMessage, error: error }; + this.props.actionGenerated( + actions.ERROR_IN_SEND_MESSAGE, + newMessageObj, + ); const errorCode = error?.message || 'ERROR'; + this.props?.showMessage('error', errorCode); this.messageSending = false; logger('custom message sending failed with error', error); @@ -702,8 +767,12 @@ export default class CometChatMessageComposer extends React.PureComponent { {blockedPreview} {editPreview} diff --git a/src/components/Messages/CometChatMessageComposer/styles.js b/src/components/Messages/CometChatMessageComposer/styles.js index f221372..c95bfbf 100644 --- a/src/components/Messages/CometChatMessageComposer/styles.js +++ b/src/components/Messages/CometChatMessageComposer/styles.js @@ -36,11 +36,12 @@ export default StyleSheet.create({ }, messageInputStyle: { color: 'black', - fontSize: 16, + fontSize: 15, padding: 10, - backgroundColor: 'rgba(0,0,0,0.1)', + backgroundColor: 'rgba(0,0,0,0.05)', borderRadius: 20, flex: 1, + height: 36, }, inputStickyStyle: { padding: 7, diff --git a/src/components/Messages/CometChatMessageHeader/.DS_Store b/src/components/Messages/CometChatMessageHeader/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..f1e9d24078fcbc089db9a04ae2fc209949a76cdf GIT binary patch literal 6148 zcmeHKL2uJA6n^f?mK06&fV3TbLE=!MR+~0WXj0UT!){1HZ~(L=O~isiJS8b*l%ibt z5%3TADf|L{4t&oxgOVa{2!UVq{5?OvXE&c?J0>DAo+cxrJ`s6P#*U9-g>XA-OFGuG z4ivhNk`(3mrBt?}o#St0fah+LCYZN^YRuaA`MX2UsXEEkB+gZgD1JrmLT`W30*haZ z40#FW`xUK<|M*k9j}cO;Fv=9xgze=K#MbXK;#qZJ|I?@VBG0ONIQ%R+Yu#(>8=lwm zdYiqc;klZHbyQEQaa2C$+Wn|LkFEVcsr<^0;)hu}JMG^*QbiqQMOy0QEJ+dabLs3^)eb z4A{-cyWVbc9>;)V;6G=8_Xi1O3@kPV_11wxUjcw!xV6CM4@J(A76XfoL9{@GNd=lz zVXqj%q{A<5Twt*=Xwpg8%ZIQd3wuKmdUW(JbvTK@per2%j)7$c)=ag}=l{K5-~X4B zT+K1y82G0c5Z&YOc#KD~XKU->_^g%CGbjtkH3qLzVCbV5v3wM7L$$y!*#HI>8-wsb P+=qas!4-~yKgz&Y$E1pw literal 0 HcmV?d00001 diff --git a/src/components/Messages/CometChatMessageHeader/index.js b/src/components/Messages/CometChatMessageHeader/index.js index d7183d6..36b91a9 100644 --- a/src/components/Messages/CometChatMessageHeader/index.js +++ b/src/components/Messages/CometChatMessageHeader/index.js @@ -5,11 +5,11 @@ import { View, Text, TouchableOpacity, Image } from 'react-native'; import { CometChatUserPresence, CometChatAvatar } from '../../Shared'; import * as enums from '../../../utils/enums'; import * as actions from '../../../utils/actions'; - +import Icon from 'react-native-vector-icons/Ionicons'; import styles from './styles'; import audioCallIcon from './resources/audioCall.png'; import videoCallIcon from './resources/videoCall.png'; -import Icon from 'react-native-vector-icons/Ionicons'; +import detailPaneIcon from './resources/detailpane.png'; import { logger } from '../../../utils/common'; import { CometChat } from '@cometchat-pro/react-native-chat'; class CometChatMessageHeader extends React.Component { @@ -74,21 +74,46 @@ class CometChatMessageHeader extends React.Component { this.props.item.status === CometChat.USER_STATUS.ONLINE ? CometChat.USER_STATUS.ONLINE : CometChat.USER_STATUS.OFFLINE; - if ( this.props.item.status === CometChat.USER_STATUS.OFFLINE && this.props.item.lastActiveAt ) { - status = `Last active at: ${new Date( - this.props.item.lastActiveAt * 1000, - ).toLocaleTimeString('en-US', { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - hour12: true, - })}`; + let messageTimestamp = new Date(this.props.item.lastActiveAt * 1000); + const currentTimestamp = new Date(); + + if ( + messageTimestamp.getUTCFullYear() == + currentTimestamp.getUTCFullYear() && + messageTimestamp.getUTCMonth() == currentTimestamp.getUTCMonth() && + messageTimestamp.getUTCDate() == currentTimestamp.getUTCDate() + ) { + var hours = messageTimestamp.getHours(); + var minutes = messageTimestamp.getMinutes(); + var ampm = hours >= 12 ? 'pm' : 'am'; + hours = hours % 12; + hours = hours ? hours : 12; + minutes = minutes < 10 ? '0' + minutes : minutes; + status = hours + ':' + minutes + ' ' + ampm.toUpperCase(); + } else if ( + messageTimestamp.getUTCFullYear() == + currentTimestamp.getUTCFullYear() && + messageTimestamp.getUTCMonth() == currentTimestamp.getUTCMonth() && + messageTimestamp.getUTCDate() == currentTimestamp.getUTCDate() - 1 + ) { + var hours = messageTimestamp.getHours(); + var minutes = messageTimestamp.getMinutes(); + var ampm = hours >= 12 ? 'pm' : 'am'; + hours = hours % 12; + hours = hours ? hours : 12; + minutes = minutes < 10 ? '0' + minutes : minutes; + status = + 'Yesterday, ' + hours + ':' + minutes + ' ' + ampm.toUpperCase(); + } else { + const month = String(messageTimestamp.getMonth()).padStart(2, '0'); + const day = String(messageTimestamp.getDate()).padStart(2, '0'); + const year = messageTimestamp.getFullYear(); + status = day + '/' + month + '/' + year; + } } else if (this.props.item.status === CometChat.USER_STATUS.OFFLINE) { status = 'offline'; } @@ -223,9 +248,10 @@ class CometChatMessageHeader extends React.Component { presence = ( ); } else { @@ -245,14 +271,14 @@ class CometChatMessageHeader extends React.Component { this.props.actionGenerated(actions.AUDIO_CALL)} style={styles.audioCallContainer}> - + ); let videoCallBtn = ( this.props.actionGenerated(actions.VIDEO_CALL)} style={styles.videoCallContainer}> - + ); @@ -270,21 +296,31 @@ class CometChatMessageHeader extends React.Component { ) { videoCallBtn = null; } + if (this.props.item.blockedByMe) { + status = null; + presence = null; + } + + let info = ( + this.props.actionGenerated(actions.VIEW_DETAIL)} + style={styles.videoCallContainer}> + + + ); return ( this.props.actionGenerated(actions.GO_BACK)}> + onPress={() => this.props.actionGenerated(actions.GO_BACK)} + style={styles.backButtonContainer}> - this.props.actionGenerated(actions.VIEW_DETAIL)} - style={styles.headerDetailContainer}> + {status} - {audioCallBtn} {videoCallBtn} - + {audioCallBtn} + {info} + ); } diff --git a/src/components/Messages/CometChatMessageHeader/resources/.DS_Store b/src/components/Messages/CometChatMessageHeader/resources/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..df5813e37d48f2220efd1c104d0f25aa2130bb53 GIT binary patch literal 6148 zcmeHK%}&BV5S~F|P{eT4V~?Ipe1nGIfwM251vDfLB_N)A@f~~xpU(%-Z+=1wZR5=l zGec&--RXRt?zc^sB_bYeXLm$HBI>~fJ7;JbOsH_}$jBBXEog z$l49CW?P!kf~xDcq9wgd@?x6hMTRWAB76n>_*T=&oP+rWe}%8H<_#SBMCMI}bBRiG zWi0TXtiW7i+|I4m>(d5LDg3OxBEKJ0yuj=>;H+taTF;neV>SLd;0-W0tM;2NQnC7+ z7>0!cp+G2b#0p@~7VGs5qYVW@fly$lfP5bkxM1p78tSJ5jUEAjU4+%pm$QU$635iB zG{hAc8x?3&_9F%x9r48TQpeKJ=)`{bV6V)6LSe0r`zM-CoEkndu;-Lgo{aDX}F`Hqgyd@Wh=ght0A692bemR ShKRu8kATV$O(^iE3j6>UA7*&~ literal 0 HcmV?d00001 diff --git a/src/components/Messages/CometChatMessageHeader/resources/audioCall.png b/src/components/Messages/CometChatMessageHeader/resources/audioCall.png index dc14a901676640cbe6f3a71ec7a5d7c6584e7bbd..8e88f62b9b1df65669c4459b3822ec67757e8f42 100644 GIT binary patch delta 2770 zcmV;@3N7`)3;Y!!iBL{Q4GJ0x0000DNk~Le0000&0000&2nGNE0OM2u=#e2ve?p)G z00aO400961073u&008K%ffoP(3T8<}K~#7F?OO|Ql+_hJck>_+Vv~YG3v@uM;{#g? zWJ5-*k13JTz=&g&sRf3R4deLg5G&GZRYn<%47S!OZ8ijmc5LmGI#Pj2Y$qKIk0eZ6 zu~zD|LGeM05f~vR*~jg7*8SIefA9YPzq@h6{?6o|*}3$eJ;_+GlIYf z0yYQ;8(vD*w|B`=|2sxCsJw&(O-F?SDd}~ekD8}`fwukb7BQGoiN^#o2Ered*GDBa zq2beP+al;tzMvZq2E;qIlwL%}La6dxIUPm!)3(I26;HX!u*1XY_LaI3x( zpiS_SeMSqXLeEnM&vT@sN5tm}AHw1>s@0e)EbR)2XH}k>_czK*;1z#Ew-~MR^90@0 zSttIW^1PIH^oSGh68CKl1jK;@ZXj^O(Aa-TK@XUXj7Vy%2uibyf0<%AqaA_37&zaw z3X_M&Or9ORFhD=G=_2F9n26cQdx7T&1YEn^F!0Q{$<$`>Y{`d(h(hrS^t+EW0ZG*e zr~!@V5yBA&*f(CYQBcS31!6$sxe!iW1mo+I7>&N{QZ*+<&Ok^SXIS*ML8l~byNIOX zfiV3jW#w}$;0y#&f0<^Bq>R@MRu_RD&65yJ0~OE8^ECZACY*r~bk?vwjv7N%BjH-krgNp>hUAsLh;Ze?rOe{k8N)2C9Z#)DZ}* zCpwL{m(6LSD-E6_$shpCmjQw~`VeNQKNdou$UBc45C=^&(XX#Hd3JR9Ryh&#g;qNd z(B+=)t`p66^>WE`1OknI6^8M0JMo|qwJ`^6Z-fM9^Adgs%)1= z`sp$VX+aglv9Xs>omWBNcDMpD=3@F2nsh>Iu%z0#zn1!}QxPaEq8^3(BrB+N-~<&U z@jb+F1)}{r5r(asReRwP=M9{t)hbWT?_Vz7g$L|ce|hLqC81Nv`<|*yuJf)yuyJGZ z>1i}fTTTOvdn%jc7oChpP`wvr7&tzC0LGo=L3z`s9B<`P0LG&iZ%!YlG*gf>4crL7JgAt191fOV_&ke?KZQX4$u zO9nruq-`VYEGj9b_29p6lvV5u(j5jbL1He_hi9$+UrJ zzeSvZHET_a(4Yo%5xyE=`v8phMIPON!Vgpde*iQ+6s0|GL$NA9-1)SDU_-j=s0B%@ zY82eR2rJCzuH7n&RKA+;UMY?scrHN9&`!Hhx4i!>{rT!tZBm6s{t}C++ugJwNM4Qejop}e7OQeF;z)iW&5y+*wZO<%waDU= zfBjUCad{Eeu3v{&4WirecER=wCR1Z3o6Cl3s2Rc&I~bPqoLLp8V5@Kd)M)Zm8bR_p zymhAy7{_tzVnKJU_^T>!<>zdbQ$vIF5@_2kK70tim~sa`#*0>+Owu6%!7l(9EpTmf z=P86PFc0&HzqlE}o`GY*mr%dNkn2N(f0m&!+OW&REk>Gl$bQ9;Pa;u&%h*!-K|H1< zl{+zp3`FJga`fOy;?wY%hH?&ya}Xr|ZSXY`0oIS$vJ395Z`=st@wfp%J;*EI@@9FV z3{gAe(%$1lqy7W$S_bdx&|d073>gU42_vUOL$P_n1?oHSReDC{(Og^wcu(bm5XQp;fcG+YIE84Vq;^36QH_!|X9R0;my%`$*99eP%Sp9BJc-Ua?-)ckXQ+jf7?DLR;H4~6S~CLmZre`i4Kg&`~P^|fgOz_v^$E#)S0hlw;%?{0Kl&jr_Thz_YgBRTeD4t5v zCg@dMH>`re?8c4{E}rEbJw=bf=rvA4F%Zh=W+zwoZ;`X35!!~v+wP(Pf9$rRV!HK} z+l00S$?wY=5UdPc;Xx$pIBz^}B4*6nS1aB!_(>!#nk)twKQrP+6r<4-Rsc<^q%im< zA1<*y1lE1fk*^e4Sq|biz@s=#JXr;TwE~QdNa_=Bh-dIM-tpy8b>~Wv6c0>Uo~51% z(_-vsOvgz|FFdUch95TNf86L4-oa-oJhH{Q7wgG75Udnnuvf5m=nu|Q@xtZiJV6)A z9+mJ8L2J-mv`e!1Fh7SKi5>M}0fL*t!3oJmd`uyRX7Mbj0>p?ZOXFF!WZWWnD+Q2jkOrV3Ix9dVC+WctU%W8(04qB zyBG1bwhd(|ZZ#rRTDe_Lg3Jt44#Rq4PRGOq^cc7osBor+ zJ+YmuC>Bf-e`}2_Y!k#=_d51Xs9g0@iR$d@kP=j zsIwU{LEAhs^>`Kt)zFG&d3iWY^Rb2R2QWN2o2r(p`B)slY8C08;sSc1eTA@_)v8ru z`OgIqrq#Ub^)b=;_^%nyOiR&?KEl1tUf(F{ty)SSD5M%$OnoEt2m&Jrj36+AK$-~r YA0?SikI93K-T(jq07*qoM6N<$f~B7!?f?J) delta 1420 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 { const messageKey = messageList.findIndex((m) => m.id === message.id); - if (messageKey > -1) { const messageObj = messageList[messageKey]; const newMessageObj = { ...messageObj, ...message }; @@ -482,6 +484,11 @@ class CometChatMessageList extends React.PureComponent { this.props.actionGenerated(actions.CUSTOM_MESSAGE_RECEIVED, [ newMessage, ]); + } else if (message.type === enums.CUSTOM_TYPE_MEETING) { + // custom data (poll extension) does not have metadata + this.props.actionGenerated(actions.CUSTOM_MESSAGE_RECEIVED, [ + message, + ]); } } else if ( this.props.type === CometChat.RECEIVER_TYPE.USER && @@ -511,6 +518,17 @@ class CometChatMessageList extends React.PureComponent { newMessage, ]); } + } else if ( + this.props.type === CometChat.RECEIVER_TYPE.USER && + message.getReceiverType() === CometChat.RECEIVER_TYPE.USER && + message.getSender().uid === this.loggedInUser.uid + ) { + if (message.type === enums.CUSTOM_TYPE_POLL) { + // custom data (poll extension) does not have metadata + this.props.actionGenerated(actions.CUSTOM_MESSAGE_RECEIVED, [ + message, + ]); + } } } catch (error) { logger(error); @@ -889,6 +907,7 @@ class CometChatMessageList extends React.PureComponent { showMessage={this.props?.showMessage} /> ); + break; case 'meeting': component = ( ); break; @@ -951,6 +971,7 @@ class CometChatMessageList extends React.PureComponent { actionGenerated={this.props.actionGenerated} /> ); + break; case 'meeting': component = ( + { + if (this.yOffset > 50) { + this.setState({ showNewMsg: true }); + } + }; + render() { let messages = [...this.props.messages]; if (messages.length) { messages = messages.reverse(); } + let newMsgPopUp = ( + + { + this.setState({ showNewMsg: null }, () => { + this.flatListRef.current.scrollToOffset({ + offset: 0, + animated: true, + }); + }); + }} + style={styles.newMessageTextContainer}> + New message + + + + ); + return ( - this.getMessages(true)} - onEndReachedThreshold={0.3} - inverted={-1} - style={{ flex: 1, paddingHorizontal: 5 }} - contentContainerStyle={!messages.length ? { flex: 1 } : {}} - ListFooterComponent={ - messages.length && this.props.parentMessageComponent - ? this.props.parentMessageComponent - : null - } - data={messages} - renderItem={this.renderItem} - /> + <> + { + this.yOffset = event.nativeEvent.contentOffset.y; + if (this.yOffset > 50 && this.state.showNewMsg) { + this.setState({ showNewMsg: false }); + } + }} + scrollEventThrottle={16} + onEndReached={() => this.getMessages(true)} + onEndReachedThreshold={0.3} + inverted={-1} + style={{ flex: 1, paddingHorizontal: 5 }} + contentContainerStyle={!messages.length ? { flex: 1 } : {}} + ListFooterComponent={ + messages.length && this.props.parentMessageComponent + ? this.props.parentMessageComponent + : null + } + data={messages} + renderItem={this.renderItem} + /> + {this.state.showNewMsg ? newMsgPopUp : null} + ); } } diff --git a/src/components/Messages/CometChatMessageList/styles.js b/src/components/Messages/CometChatMessageList/styles.js index 3a8e36b..a959829 100644 --- a/src/components/Messages/CometChatMessageList/styles.js +++ b/src/components/Messages/CometChatMessageList/styles.js @@ -1,5 +1,5 @@ import { StyleSheet } from 'react-native'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ chatListStyle: { zIndex: 1, @@ -34,16 +34,21 @@ export default StyleSheet.create({ }, messageDateContainerStyle: { marginBottom: 16, - maxWidth: 280, alignItems: 'center', alignSelf: 'center', justifyContent: 'center', - borderRadius: 80, + borderTopWidth: 0.5, + borderBottomColor: theme.color.primary, + + opacity: 0.4, + width: '95%', }, messageDateStyle: { paddingVertical: 8, paddingHorizontal: 12, borderRadius: 100, + fontSize: 14, + color: theme.color.helpText, }, decoratorMessageStyle: { overflow: 'hidden', @@ -59,4 +64,25 @@ export default StyleSheet.create({ fontWeight: '600', transform: [{ rotateX: '180deg' }], }, + newMessagePopupContainer: { + position: 'absolute', + top: 70, + left: 0, + right: 0, + alignItems: 'center', + elevation: 1, + zIndex: 10, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.5, + shadowRadius: 2, + }, + newMessageTextContainer: { + padding: 10, + borderRadius: 16, + elevation: 15, + backgroundColor: '#fff', + flexDirection: 'row', + alignItems: 'center', + }, }); diff --git a/src/components/Messages/CometChatMessageThread/index.js b/src/components/Messages/CometChatMessageThread/index.js index 7272777..d2c5e57 100644 --- a/src/components/Messages/CometChatMessageThread/index.js +++ b/src/components/Messages/CometChatMessageThread/index.js @@ -4,6 +4,7 @@ import React from 'react'; import { CometChat } from '@cometchat-pro/react-native-chat'; import * as enums from '../../../utils/enums'; import * as actions from '../../../utils/actions'; +import { HIDE_DELETED_MSG } from '../../../utils/settings'; import { MessageThreadManager } from './controller'; import { CometChatMessageActions, @@ -190,6 +191,10 @@ class CometChatMessageThread extends React.PureComponent { ); } break; + case actions.MESSAGE_SENT: + case actions.ERROR_IN_SEND_MESSAGE: + this.messageSent(messages); + break; case actions.MESSAGE_UPDATED: this.updateMessages(messages); break; @@ -360,6 +365,17 @@ class CometChatMessageThread extends React.PureComponent { this.setState({ messageList: messages }); }; + messageSent = (message) => { + const messageList = [...this.state.messageList]; + let messageKey = messageList.findIndex((m) => m._id === message._id); + if (messageKey > -1) { + const newMessageObj = { ...message }; + + messageList.splice(messageKey, 1, newMessageObj); + this.updateMessages(messageList); + } + }; + // messages are fetched from backend prependMessages = (messages) => { const messageList = [...messages, ...this.state.messageList]; @@ -378,8 +394,12 @@ class CometChatMessageThread extends React.PureComponent { if (messageKey > -1) { const messageObj = { ...messageList[messageKey] }; const newMessageObj = { ...messageObj, ...deletedMessage }; + if (HIDE_DELETED_MSG) { + messageList.splice(messageKey, 1); + } else { + messageList.splice(messageKey, 1, newMessageObj); + } - messageList.splice(messageKey, 1, newMessageObj); this.setState({ messageList: messageList, scrollToBottom: false }); } } catch (error) { @@ -704,6 +724,7 @@ class CometChatMessageThread extends React.PureComponent { ref={(el) => { this.composerRef = el; }} + getConversationId={this.props.getConversationId} theme={this.props.theme} item={this.props.item} type={this.props.type} diff --git a/src/components/Messages/CometChatMessages/index.js b/src/components/Messages/CometChatMessages/index.js index 7d7baa6..7907e6e 100644 --- a/src/components/Messages/CometChatMessages/index.js +++ b/src/components/Messages/CometChatMessages/index.js @@ -11,6 +11,7 @@ import { import { CometChat } from '@cometchat-pro/react-native-chat'; import * as actions from '../../../utils/actions'; import _ from 'lodash'; +import { HIDE_DELETED_MSG } from '../../../utils/settings'; import { CometChatUserDetails } from '../../Users'; import { CometChatLiveReactions, @@ -21,7 +22,7 @@ import { CometChatMessageThread, } from '../index'; import { CometChatGroupDetails } from '../../Groups'; - +import CometChatVideoViewer from '../CometChatVideoViewer'; import theme from '../../../resources/theme'; import { CometChatManager } from '../../../utils/controller'; import * as enums from '../../../utils/enums'; @@ -29,6 +30,7 @@ import { checkMessageForExtensionsData } from '../../../utils/common'; import DropDownAlert from '../../Shared/DropDownAlert'; import BottomSheet from 'reanimated-bottom-sheet'; import style from './styles'; +import CometChatUserProfile from '../../Users/CometChatUserProfile'; class CometChatMessages extends React.PureComponent { loggedInUser = null; @@ -52,6 +54,7 @@ class CometChatMessages extends React.PureComponent { userDetailVisible: false, groupDetailVisible: false, user: params.type === 'user' ? params.item : null, + showProfile: false, }; this.composerRef = React.createRef(); @@ -125,7 +128,8 @@ class CometChatMessages extends React.PureComponent { }, () => { this.props.route?.params?.actionGenerated('groupDeleted', group) || - this.props.actionGenerated('groupDeleted', group); + (this.props.actionGenerated && + this.props.actionGenerated('groupDeleted', group)); this.props.navigation?.goBack(); }, ); @@ -159,8 +163,8 @@ class CometChatMessages extends React.PureComponent { const { route } = this.props; const params = route?.params || this.props; switch (action) { - case 'customMessageReceived': - case 'messageReceived': + case actions.CUSTOM_MESSAGE_RECEIVED: + case actions.MESSAGE_RECEIVED: { const message = messages[0]; if (message.parentMessageId) { @@ -171,149 +175,195 @@ class CometChatMessages extends React.PureComponent { } } break; - case 'groupDeleted': + case actions.GROUP_DELETED: this.deleteGroup(messages); break; - case 'leftGroup': + case actions.LEFT_GROUP: this.leaveGroup(messages); break; - case 'membersUpdated': + case actions.MEMBERS_UPDATED: this.updateMembersCount(messages, key); break; - case 'messageRead': + case actions.MESSAGE_READ: params.actionGenerated(action, messages); break; - case 'messageComposed': { + case actions.MESSAGE_SENT: + case actions.ERROR_IN_SEND_MESSAGE: + this.messageSent(messages); + case actions.MESSAGE_COMPOSED: { this.appendMessage(messages); - params.actionGenerated('messageComposed', messages); break; } - case 'viewMessageThread': + case actions.VIEW_MESSAGE_THREAD: this.setState({ messageToReact: null }, () => { this.viewMessageThread(messages); // route.params.actionGenerated('viewMessageThread', messages); }); break; - case 'closeThreadClicked': + case actions.CLOSE_THREAD_CLICKED: this.closeThreadMessages(); break; - case 'messageUpdated': { + case actions.MESSAGE_UPDATED: { this.updateMessages(messages); break; } - case 'messageFetched': + case actions.MESSAGE_FETCHED: this.prependMessages(messages); break; - case 'messageFetchedAgain': + case actions.MESSAGE_FETCHED_AGAIN: this.prependMessagesAndScrollBottom(messages); break; - case 'messageDeleted': + case actions.MESSAGE_DELETED: this.removeMessages(messages); break; - case 'threadMessageDeleted': - params.actionGenerated('messageDeleted', messages); + case actions.THREAD_MESSAGE_DELETED: + params.actionGenerated(actions.MESSAGE_DELETED, messages); break; - case 'deleteMessage': + case actions.DELETE_MESSAGE: this.setState({ messageToReact: null }); this.deleteMessage(messages); break; - case 'editMessage': + case actions.EDIT_MESSAGE: this.setState({ messageToReact: null }); this.editMessage(messages); break; - case 'messageEdited': + case actions.MESSAGE_EDITED: this.messageEdited(messages); break; - case 'clearEditPreview': + case actions.CLEAR_EDIT_PREVIEW: this.clearEditPreview(); break; - case 'groupUpdated': + case actions.GROUP_UPDATED: this.groupUpdated(messages, key, group, options); break; - case 'callUpdated': + case actions.CALL_UPDATED: this.callUpdated(messages); break; - case 'pollAnswered': + case actions.POLL_ANSWERED: this.updatePollMessage(messages); break; - case 'pollCreated': + case actions.POLL_CREATED: this.appendPollMessage(messages); break; - case 'viewActualImage': - params.actionGenerated('viewActualImage', messages); + case actions.VIEW_ACTUAL_IMAGE: + params.actionGenerated(actions.VIEW_ACTUAL_IMAGE, messages); + break; + case actions.VIEW_ACTUAL_VIDEO: + this.setState({ videoMessage: messages }); break; - case 'audioCall': - case 'videoCall': - case 'menuClicked': + case actions.AUDIO_CALL: + case actions.VIDEO_CALL: + case actions.MENU_CLICKED: case actions.JOIN_DIRECT_CALL: params.actionGenerated(action); break; - case 'sendReaction': + case actions.SEND_REACTION: this.toggleReaction(true); break; - case 'showReaction': + case actions.SHOW_REACTION: this.showReaction(messages); break; - case 'stopReaction': + case actions.STOP_REACTION: this.toggleReaction(false); break; - case 'reactToMessage': + case actions.REACT_TO_MESSAGE: this.reactToMessage(messages); break; - case 'goBack': + case actions.GO_BACK: this.props.navigation?.goBack(); break; - case 'closeDetail': + case actions.CLOSE_DETAIL: this.setState({ userDetailVisible: false, groupDetailVisible: false }); break; - case 'viewDetail': - if (params.type === 'user') { + case actions.VIEW_DETAIL: + if (params.type === CometChat.RECEIVER_TYPE.USER) { this.setState({ userDetailVisible: true }); } else { this.setState({ groupDetailVisible: true }); } break; - case 'blockUser': + case actions.BLOCK_USER: this.blockUser(); break; - case 'unblockUser': + case actions.UNBLOCK_USER: this.unblockUser(); break; - case 'closeMessageActions': + case actions.CLOSE_MESSAGE_ACTIONS: this.setState({ messageToReact: null }); break; - case 'openMessageActions': + case actions.OPEN_MESSAGE_ACTIONS: this.setState({ messageToReact: messages }); break; - case 'updateThreadMessage': + case actions.UPDATE_THREAD_MESSAGE: this.updateThreadMessage(messages[0], key); break; - case 'threadMessageComposed': + case actions.THREAD_MESSAGE_COMPOSED: this.onThreadMessageComposed(messages); - params.actionGenerated('threadMessageComposed', messages); + params.actionGenerated(actions.THREAD_MESSAGE_COMPOSED, messages); // this.updateLastMessage(item[0]); break; - case 'memberScopeChanged': + case actions.MEMBER_SCOPE_CHANGED: this.memberScopeChanged(messages); break; - case 'membersRemoved': + case actions.MEMBERS_REMOVED: this.membersRemoved(messages); break; - case 'membersAdded': + case actions.MEMBERS_ADDED: this.membersAdded(messages); break; - case 'memberBanned': + case actions.MEMBER_BANNED: this.memberBanned(messages); break; - case 'memberUnbanned': + case actions.MEMBER_UNBANNED: this.memberUnbanned(messages); break; - + case actions.SEND_MESSAGE: + this.setState({ messageToReact: null }); + this.sendMessage(messages); + break; + case actions.SHOW_PROFILE: + this.showProfile(); default: break; } }; + sendMessage = (message) => { + const { route } = this.props; + + const params = route?.params || this.props; + + this.props.navigation.push(enums.NAVIGATION_CONSTANTS.COMET_CHAT_MESSAGES, { + theme: params.theme, + item: { ...message.sender }, + type: CometChat.RECEIVER_TYPE.USER, + loggedInUser: params.loggedInUser, + actionGenerated: params.actionGenerated, + }); + }; + + showProfile = () => { + this.setState({ + userDetailVisible: false, + groupDetailVisible: false, + showProfile: true, + }); + }; + + messageSent = (message) => { + const messageList = [...this.state.messageList]; + + let messageKey = messageList.findIndex((m) => m._id === message._id); + if (messageKey > -1) { + const newMessageObj = { ...message }; + + messageList.splice(messageKey, 1, newMessageObj); + + messageList.sort((a, b) => a.id - b.id); + this.setState({ messageList: [...messageList] }); + } + }; + memberUnbanned = (members) => { const messageList = [...this.state.messageList]; let filteredMembers = _.uniqBy(members, 'id'); @@ -447,11 +497,14 @@ class CometChatMessages extends React.PureComponent { const usersList = [this.state.item.uid]; CometChatManager.blockUsers(usersList) - .then(() => { + .then((response) => { + this.dropDownAlertRef?.showMessage('success', 'Blocked user'); this.setState({ user: { ...this.state.item, blockedByMe: true } }); params.actionGenerated('blockUser'); }) .catch((error) => { + const errorCode = error?.message || 'ERROR'; + this.dropDownAlertRef?.showMessage('error', errorCode); console.log('Blocking user fails with error', error); }); }; @@ -602,8 +655,11 @@ class CometChatMessages extends React.PureComponent { if (messageKey > -1) { const messageObj = { ...messageList[messageKey] }; const newMessageObj = { ...messageObj, ...deletedMessage }; - - messageList.splice(messageKey, 1, newMessageObj); + if (HIDE_DELETED_MSG) { + messageList.splice(messageKey, 1); + } else { + messageList.splice(messageKey, 1, newMessageObj); + } this.setState({ messageList: messageList, scrollToBottom: false }); } }; @@ -635,6 +691,7 @@ class CometChatMessages extends React.PureComponent { // messages = messages.reverse(); messages = messages.concat(newMessages); messages = _.uniqBy(messages, 'id'); + this.setState({ messageList: messages, scrollToBottom: true }); }; @@ -737,6 +794,20 @@ class CometChatMessages extends React.PureComponent { this.setState({ messageToReact: message }); }; + getConversationId = () => { + const { route } = this.props; + const params = route?.params || this.props; + let conversationId = null; + if (params.type === CometChat.RECEIVER_TYPE.USER) { + const users = [this.loggedInUser.uid, params.item.uid]; + conversationId = users.sort().join('_user_'); + } else if (params.type === CometChat.RECEIVER_TYPE.GROUP) { + conversationId = `group_${params.item.guid}`; + } + + return conversationId; + }; + render() { const { route } = this.props; const params = route?.params || this.props; @@ -747,7 +818,11 @@ class CometChatMessages extends React.PureComponent { this.composerRef = el; }} theme={this.theme} - item={params.type === 'user' ? this.state.user : this.state.item} + item={ + params.type === CometChat.RECEIVER_TYPE.USER + ? this.state.user + : this.state.item + } type={params.type} // widgetsettings={route.params.widgetsettings} loggedInUser={this.loggedInUser} @@ -756,6 +831,7 @@ class CometChatMessages extends React.PureComponent { reaction={this.reactionName} messageToReact={this.state.messageToReact} actionGenerated={this.actionHandler} + getConversationId={this.getConversationId} showMessage={(type, message) => { this.DropDownAlertRef?.showMessage(type, message); }} @@ -804,6 +880,7 @@ class CometChatMessages extends React.PureComponent { parentMessage={this.state.threadMessageParent} loggedInUser={this.loggedInUser} actionGenerated={this.actionHandler} + getConversationId={this.getConversationId} /> ); @@ -821,11 +898,29 @@ class CometChatMessages extends React.PureComponent { behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}> + {this.state.showProfile ? ( + this.setState({ showProfile: null })} + url={this.state.user?.link} + /> + ) : null} + {this.state.videoMessage ? ( + this.setState({ videoMessage: null })} + message={this.state.videoMessage} + /> + ) : null} {this.state.userDetailVisible ? ( @@ -842,6 +937,12 @@ class CometChatMessages extends React.PureComponent { /> ) : null} { let ticks = blueDoubleTick; - if ( - _get(props, 'message.sentAt', null) && - !_get(props, 'message.readAt', null) && - !_get(props, 'message.deliveredAt', null) - ) { - ticks = greyTick; - } else if ( - _get(props, 'message.sentAt', null) && - !_get(props, 'message.readAt', null) && - _get(props, 'message.deliveredAt', null) - ) { - ticks = greyDoubleTick; - } + if (props.message.messageFrom === 'sender') { + if (props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP) { + if (props.message.hasOwnProperty('error')) { + ticks = errorTick; + } else { + ticks = sendingTick; + + if (props.message.hasOwnProperty('sentAt')) { + ticks = greyTick; + } + } + } else { + if (props.message.hasOwnProperty('error')) { + ticks = errorTick; + } else { + ticks = sendingTick; + + if (props.message.hasOwnProperty('sentAt')) { + ticks = greyTick; + if (props.message.hasOwnProperty('deliveredAt')) { + ticks = greyDoubleTick; + if (props.message.hasOwnProperty('readAt')) { + ticks = blueDoubleTick; + } + } + } + } + } + } if (props.message.messageFrom !== 'sender') { ticks = null; } - let timestamp = new Date(props.message.sentAt * 1000).toLocaleTimeString( - 'en-US', - { - hour: 'numeric', - minute: 'numeric', - hour12: true, - }, - ); - + let timestamp = new Date( + props.message.sentAt + ? props.message.sentAt * 1000 + : props.message._composedAt, + ).toLocaleTimeString('en-US', { + hour: 'numeric', + minute: 'numeric', + hour12: true, + }); if (Platform.OS === 'android') { let time = timestamp.split(':'); // convert to array // fetch var hours = Number(time[0]); - var minutes = Number(time[1]); + var minutes = Number(time[1]?.split(' ')[0]); // calculate var timeValue; @@ -63,6 +80,7 @@ const CometChatReadReceipt = (props) => { return ( {timestamp} + {ticks ? ( time ) : null} diff --git a/src/components/Messages/CometChatReadReceipt/resources/error.png b/src/components/Messages/CometChatReadReceipt/resources/error.png new file mode 100644 index 0000000000000000000000000000000000000000..5b75c534ac97b25451973bca12a420ae58e81d89 GIT binary patch literal 604 zcmV-i0;BzjP)WU z6GT^6h|6WPB~m$&$aT|Ezd*eCd6?&Cu+{noaHpr?7z1~76z=3C>}n(p833z%a^Bw$ zHX7Y7{My`vQ>(#UTZ1z`j)a`b=h0Ir0KL5_*cWB}^aN*cFlEH&CQ`lw$KsKY^eYK8vg*6ok|JBc$KXH0000 literal 0 HcmV?d00001 diff --git a/src/components/Messages/CometChatReadReceipt/resources/sending.png b/src/components/Messages/CometChatReadReceipt/resources/sending.png new file mode 100644 index 0000000000000000000000000000000000000000..44b76356fddc484a59ba41121601b53cba3be698 GIT binary patch literal 522 zcmV+l0`>igP)SH}OT{-UDwY2K-%zbkrCuH?f}&JyqA`i-%xWYO-+bsmU^ChIcIKRo zur15R1EJu-@Vj4Z+lCMVhG9TeRcQOY%=vsiL?RKyV==kD3vi0L@N+Q0{&0X#Q4k0O zV3;OMf@ZT>JXb0b=7ex-u-$Ia?e!3k$K}RwI1Gg#r_)ISKl*({skqT-AQTMVYM|@7 zJUNj_pw(<5nM~qmv%zRQhTrc;lJakzjvQ||9Ks{wYPEu@X?Q9W zAylhX%;$42;Jw?$dcDTiXe2i~5OEQWbNr;JGakzW5R_!mSSWERU;$awKlBn*aa+ literal 0 HcmV?d00001 diff --git a/src/components/Messages/CometChatReadReceipt/styles.js b/src/components/Messages/CometChatReadReceipt/styles.js index 92548d7..6eb2d0f 100644 --- a/src/components/Messages/CometChatReadReceipt/styles.js +++ b/src/components/Messages/CometChatReadReceipt/styles.js @@ -1,16 +1,20 @@ import { StyleSheet } from 'react-native'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ containerStyle: { - alignItems: 'center', flexDirection: 'row', + marginTop: 5, }, msgTimestampStyle: { fontSize: 11, fontWeight: '500', + color: theme.color.helpText, + textTransform: 'uppercase', }, tickImageStyle: { marginLeft: 3, + width: 14, + height: 10, }, }); diff --git a/src/components/Messages/CometChatReceiverDirectCallBubble/index.js b/src/components/Messages/CometChatReceiverDirectCallBubble/index.js index 5299d56..9ea3674 100644 --- a/src/components/Messages/CometChatReceiverDirectCallBubble/index.js +++ b/src/components/Messages/CometChatReceiverDirectCallBubble/index.js @@ -84,7 +84,9 @@ class CometChatReceiverDirectCallBubble extends React.Component { {this.state?.message?.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {this.state?.message?.sender.name} + + {this.state?.message?.sender.name} + ) : null} @@ -104,19 +106,17 @@ class CometChatReceiverDirectCallBubble extends React.Component { style={Styles.buttonStyle}> Join - + + + + {messageReactions} - - - - - diff --git a/src/components/Messages/CometChatReceiverDirectCallBubble/style.js b/src/components/Messages/CometChatReceiverDirectCallBubble/style.js index 080992a..a6eb524 100644 --- a/src/components/Messages/CometChatReceiverDirectCallBubble/style.js +++ b/src/components/Messages/CometChatReceiverDirectCallBubble/style.js @@ -3,7 +3,8 @@ import { widthRatio } from '../../../utils/consts'; import theme from '../../../resources/theme'; export default StyleSheet.create({ - mainContainer: { flexDirection: 'row', alignItems: 'center' }, + marginBottom: 16, + mainContainer: { flexDirection: 'row' }, mainWrapper: { flexWrap: 'wrap', flexDirection: 'row', @@ -12,22 +13,23 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, nameContainer: { width: '100%' }, messageContainer: { width: '70%', flexShrink: 1, - backgroundColor: theme.color.secondary, + backgroundColor: '#F8F8F8', borderRadius: 8, - padding: 10, - marginBottom: 16, + padding: 15, alignSelf: 'flex-start', }, imageContainer: { flexDirection: 'row', alignItems: 'center' }, imageStyle: { marginRight: 10 }, textStyle: { - fontSize: 15, + fontSize: 16, width: '80%', + color: theme.color.primary, }, buttonStyle: { backgroundColor: '#fff', diff --git a/src/components/Messages/CometChatReceiverFileMessageBubble/index.js b/src/components/Messages/CometChatReceiverFileMessageBubble/index.js index 3a79781..50be699 100644 --- a/src/components/Messages/CometChatReceiverFileMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverFileMessageBubble/index.js @@ -31,7 +31,8 @@ const CometChatReceiverFileMessageBubble = (props) => { const download = () => { let PictureDir = RNFetchBlob.fs.dirs.PictureDir; let date = new Date(); - let ext = '.' + props.message.data.attachments[0].extension; + let name = props.message.data.attachments[0].name; + RNFetchBlob.config({ // add option that makes response data to be stored as a file, // is much more performant. @@ -40,11 +41,7 @@ const CometChatReceiverFileMessageBubble = (props) => { addAndroidDownloads: { useDownloadManager: true, notification: true, - path: - PictureDir + - '/' + - Math.floor(date.getTime() + date.getSeconds() / 2) + - ext, + path: PictureDir + '/' + name, }, }) .fetch('GET', props.message.data.attachments[0].url, { @@ -72,7 +69,9 @@ const CometChatReceiverFileMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -104,13 +103,13 @@ const CometChatReceiverFileMessageBubble = (props) => { message={message} /> + - diff --git a/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js b/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js index ee96330..f851dd0 100644 --- a/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverFileMessageBubble/styles.js @@ -1,22 +1,20 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ messageWrapperStyle: { flexDirection: 'row', alignItems: 'center', - backgroundColor: '#f8f8f8', - marginBottom: 8, + backgroundColor: '#F8F8F8', alignSelf: 'flex-start', justifyContent: 'space-between', - paddingHorizontal: 12 * widthRatio, - paddingVertical: 8 * heightRatio, - borderRadius: 12, + paddingHorizontal: 12, + paddingVertical: 8, + borderRadius: 10, paddingRight: 30, }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', }, messagePreviewContainerStyle: { @@ -65,14 +63,15 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, containerStyle: { flexDirection: 'row', alignItems: 'center', }, - mainContainerStyle: { marginBottom: 16 }, + mainContainerStyle: { marginBottom: 16, marginLeft: 4 }, messageContainer: { flexDirection: 'row', alignItems: 'flex-start' }, messageContainerStyle: { minWidth: '65%' }, - attachmentNameStyle: { flex: 1, marginRight: 4 }, + attachmentNameStyle: { flex: 1, marginRight: 4, color: theme.color.primary }, senderNameContainer: { marginBottom: 5 }, }); diff --git a/src/components/Messages/CometChatReceiverImageMessageBubble/index.js b/src/components/Messages/CometChatReceiverImageMessageBubble/index.js index 54016aa..a58666c 100644 --- a/src/components/Messages/CometChatReceiverImageMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverImageMessageBubble/index.js @@ -86,7 +86,9 @@ const CometChatReceiverImageMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -97,29 +99,32 @@ const CometChatReceiverImageMessageBubble = (props) => { props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message); }}> - - - - + + - + + + + - ); }; diff --git a/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js b/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js index 52659a6..8a0d795 100644 --- a/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverImageMessageBubble/styles.js @@ -4,14 +4,13 @@ import { widthRatio } from '../../../utils/consts'; export default StyleSheet.create({ messageWrapperStyle: { flexDirection: 'row', - backgroundColor: '#f2f3f4', - marginBottom: 8, + backgroundColor: '#F8F8F8', alignItems: 'flex-start', justifyContent: 'flex-start', maxWidth: '81%', - borderRadius: 12, + borderRadius: 10, }, - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginLeft: 4 }, mainContainer: { flexDirection: 'row', alignItems: 'flex-start' }, senderNameContainer: { marginBottom: 5 }, containerStyle: { @@ -28,9 +27,10 @@ export default StyleSheet.create({ flexDirection: 'row', width: 36, height: 36, - marginRight: 10 * widthRatio, + marginRight: 8, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, messageImgWrapperStyle: { width: '100%', @@ -44,7 +44,6 @@ export default StyleSheet.create({ }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', }, }); diff --git a/src/components/Messages/CometChatReceiverTextMessageBubble/index.js b/src/components/Messages/CometChatReceiverTextMessageBubble/index.js index f90a821..2cf160c 100644 --- a/src/components/Messages/CometChatReceiverTextMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverTextMessageBubble/index.js @@ -184,7 +184,9 @@ const CometChatReceiverTextMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -192,14 +194,16 @@ const CometChatReceiverTextMessageBubble = (props) => { onLongPress={() => { props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message); }}> - - {messageText} + + + {messageText} + @@ -211,14 +215,14 @@ const CometChatReceiverTextMessageBubble = (props) => { {...props} message={message} /> + - diff --git a/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js b/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js index 2d21788..2f9882f 100644 --- a/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverTextMessageBubble/styles.js @@ -1,16 +1,21 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ messageLinkStyle: { textDecorationLine: 'underline', color: 'blue', fontSize: 15, }, - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginLeft: 4 }, innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, - senderNameStyle: { marginBottom: 5 }, - autolinkStyle: { color: 'black', fontSize: 15 }, + senderNameStyle: { + marginBottom: 2, + color: theme.color.helpText, + fontSize: 12, + paddingLeft: 8, + }, + autolinkStyle: { color: theme.color.primary, fontSize: 15 }, messageContainer: { maxWidth: '81%', minWidth: '81%' }, linkObjectDescription: { fontStyle: 'italic', @@ -22,19 +27,18 @@ export default StyleSheet.create({ messageWrapperStyle: { flexDirection: 'row', alignItems: 'center', - backgroundColor: '#f6f6f6', - marginBottom: 4, + marginBottom: 0, alignSelf: 'flex-start', justifyContent: 'space-between', - paddingHorizontal: 12 * widthRatio, - paddingVertical: 8 * heightRatio, + paddingHorizontal: 8, + paddingVertical: 8, maxWidth: '100%', borderRadius: 12, }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', + marginLeft: 8, }, messagePreviewContainerStyle: { borderRadius: 12, @@ -87,9 +91,10 @@ export default StyleSheet.create({ flexDirection: 'row', width: 36, height: 36, - marginRight: 10 * widthRatio, + marginRight: 8, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + alignSelf: 'center', }, containerStyle: { flexDirection: 'row', diff --git a/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js b/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js index b0d2c67..3a75a41 100644 --- a/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js +++ b/src/components/Messages/CometChatReceiverVideoMessageBubble/index.js @@ -1,5 +1,7 @@ import React, { createRef } from 'react'; -import { View, Text, TouchableWithoutFeedback } from 'react-native'; +import { View, Text } from 'react-native'; +import { TouchableOpacity } from 'react-native-gesture-handler'; + import VideoPlayer from 'react-native-video-controls'; import theme from '../../../resources/theme'; import CometChatThreadedMessageReplyCount from '../CometChatThreadedMessageReplyCount'; @@ -39,30 +41,34 @@ const CometChatReceiverVideoMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} - { + props.actionGenerated(actions.VIEW_ACTUAL_VIDEO, message); + }} onLongPress={() => props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message) }> - - - - + + @@ -72,14 +78,14 @@ const CometChatReceiverVideoMessageBubble = (props) => { {...props} message={message} /> + - diff --git a/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js b/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js index 0847271..796fec5 100644 --- a/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js +++ b/src/components/Messages/CometChatReceiverVideoMessageBubble/styles.js @@ -2,24 +2,22 @@ import { StyleSheet } from 'react-native'; import { widthRatio } from '../../../utils/consts'; export default StyleSheet.create({ - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginLeft: 4 }, innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, senderNameContainer: { marginBottom: 5 }, messageWrapperStyle: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - backgroundColor: '#f2f3f4', - marginBottom: 8, + backgroundColor: '#F8F8F8', alignSelf: 'flex-start', - paddingHorizontal: 18 * widthRatio, - paddingVertical: 5, + paddingHorizontal: 12, + paddingVertical: 8, maxWidth: '87.5%', - borderRadius: 12, + borderRadius: 10, }, messageInfoWrapperStyle: { flexDirection: 'row', - alignItems: 'center', justifyContent: 'flex-start', }, avatarStyle: { @@ -30,6 +28,7 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, msgTimestampStyle: { fontSize: 11, @@ -50,6 +49,6 @@ export default StyleSheet.create({ messageVideo: { height: '100%', width: '100%', - borderRadius: 12, + borderRadius: 10, }, }); diff --git a/src/components/Messages/CometChatSenderDirectCallBubble/index.js b/src/components/Messages/CometChatSenderDirectCallBubble/index.js index ef0aafc..b3bbb30 100644 --- a/src/components/Messages/CometChatSenderDirectCallBubble/index.js +++ b/src/components/Messages/CometChatSenderDirectCallBubble/index.js @@ -69,25 +69,27 @@ class CometChatSenderDirectCallBubble extends React.Component { this.state?.message, ); }}> - - - - {`You have initiated a call`} - - - this.props.actionGenerated( - actions.JOIN_DIRECT_CALL, - this.state.message, - ) - } - style={Styles.buttonStyle}> - Join - - - {messageReactions} + + + + + {`You have initiated a call`} + + + this.props.actionGenerated( + actions.JOIN_DIRECT_CALL, + this.state.message, + ) + } + style={Styles.buttonStyle}> + Join + - + {messageReactions} + + { try { let PictureDir = RNFetchBlob.fs.dirs.PictureDir; let date = new Date(); - let ext = '.' + props.message.data.attachments[0].extension; + let name = props.message.data.attachments[0].name; + RNFetchBlob.config({ // add this option that makes response data to be stored as a file, // this is much more performant. @@ -30,18 +31,18 @@ const CometChatSenderFileMessageBubble = (props) => { addAndroidDownloads: { useDownloadManager: true, notification: true, - path: - PictureDir + - '/' + - Math.floor(date.getTime() + date.getSeconds() / 2) + - ext, + path: PictureDir + '/' + name, }, }) .fetch('GET', props.message.data.attachments[0].url, { // some headers .. }) - .then(() => { + .then((res) => { Alert.alert('File Downloaded'); + // RNFetchBlob.android.actionViewIntent( + // res.path(), + // props.message.data.attachments[0].mimeType, + // ); }); } catch (error) { logger(error); @@ -65,7 +66,7 @@ const CometChatSenderFileMessageBubble = (props) => { - + { props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message) }> - + { return ( - { + props.actionGenerated(actions.VIEW_ACTUAL_VIDEO, message); + }} onLongPress={() => props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message) }> - - - - + + - + 5>YGA6QW+sQCa&LIFB)5=SKHuHiAf5@yyWB;;BULc5YZ z8}E*N9x1jLfX&vc3t$SMVH2915!3K!=%6Ma63yp$#yRfMU$xzGWTL+~q;GF>cpwB3R+3G>Ew_U=XxIKm@ydvsXSTgumtzZiD1$LR5d7qrgXXtc$6{l?HbVWB`M z5DJ6>p}9}=4|R~!oZ(ZSA30OEwhZuIqJ7AIBA6^DY1 z(5z62g=)3LutMi}s(HEMP_WQpwfL~Q@@Mg4zB=bmo({_eqYni_fn5bu`_iVm|1bHM z87=ZXCAv@`6!@ + + { + return ( + + + + + + + + + + + ); + }} + onCloseEnd={() => { + this.props.close(); + }} + /> + + + ); + } +} +export default CometChatVideoViewer; diff --git a/src/components/Messages/CometChatVideoViewer/resources/clear.png b/src/components/Messages/CometChatVideoViewer/resources/clear.png new file mode 100644 index 0000000000000000000000000000000000000000..9a939e1ccc95a57e6563629369fb8e5b3aa4c976 GIT binary patch literal 205 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt^lo-U3d z9-VKe81gkJ@VLhBVeWJn409Yr8YfkVU^%2dG2GG-qXcqp0TT~=2w+o zV7e?gvn}VB&sqCfKUaMS3J^|;DvL`t_@Ef0P+;#mk6Um(&@~L6u6{1-oD!M { }) .catch((err) => { console.log('err', err); - const errorCode = err?.message || 'ERROR'; + const errorCode = err?.details?.message || err?.message || 'ERROR'; dropDownAlertRef?.current?.showMessage('error', errorCode); setError(err); }); diff --git a/src/components/Messages/Extensions/CometChatMessageReactions/index.js b/src/components/Messages/Extensions/CometChatMessageReactions/index.js index 1e2a3a5..88f8d91 100644 --- a/src/components/Messages/Extensions/CometChatMessageReactions/index.js +++ b/src/components/Messages/Extensions/CometChatMessageReactions/index.js @@ -31,7 +31,9 @@ class CometChatMessageReactions extends Component { } componentDidUpdate(prevProps) { - if (prevProps.message !== this.props.message) { + if ( + JSON.stringify(prevProps.message) !== JSON.stringify(this.props.message) + ) { this.setState({ message: this.props.message }); } } @@ -48,7 +50,8 @@ class CometChatMessageReactions extends Component { // Reaction added successfully }) .catch((error) => { - const errorCode = error?.message || 'ERROR'; + const errorCode = + error?.details?.message || error?.message || 'ERROR'; this.props?.showMessage('error', errorCode); // Some error occured }); @@ -77,6 +80,7 @@ class CometChatMessageReactions extends Component { Object.keys(reactionData).forEach((user) => { if (reactionData[user].name) userList.push(reactionData[user].name); }); + return ( this.reactToMessages({ colons: data })} @@ -138,6 +142,9 @@ class CometChatMessageReactions extends Component { messageReactions.unshift(addReactionEmoji); } } + if (this.props.item.blockedByMe) { + return null; + } return ( // eslint-disable-next-line react/jsx-fragments <> @@ -147,6 +154,7 @@ class CometChatMessageReactions extends Component { { id: pollId, }) .then((response) => { - props.actionGenerated(actions.POLL_ANSWERED, response); + // props.actionGenerated(actions.POLL_ANSWERED, message); }) .catch((error) => { - const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); - logger(error); + const errorCode = error?.details?.message || error?.message || 'ERROR'; + props?.showMessage('error', errorCode); + logger('here', error); }); }; if (!Object.prototype.hasOwnProperty.call(props.message, 'metadata')) { @@ -154,7 +154,9 @@ const CometChatReceiverPollMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -172,19 +174,18 @@ const CometChatReceiverPollMessageBubble = (props) => { {totalText} - - - - + + - + + + + - - (this.dropDownAlertRef = ref)} /> ); }; diff --git a/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js index 3272dc3..fc1c111 100644 --- a/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatReceiverPollMessageBubble/styles.js @@ -6,7 +6,6 @@ export default StyleSheet.create({ innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, messageWrapperStyle: { backgroundColor: '#f8f8f8', - marginBottom: 8, alignSelf: 'flex-start', paddingHorizontal: 12 * widthRatio, paddingVertical: 8 * heightRatio, diff --git a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js index b78d3f6..b8aca34 100644 --- a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js +++ b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/index.js @@ -58,7 +58,9 @@ const CometChatReceiverStickerMessageBubble = (props) => { {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? ( - {message.sender.name} + + {message.sender.name} + ) : null} @@ -72,12 +74,12 @@ const CometChatReceiverStickerMessageBubble = (props) => { {...props} message={message} /> + - diff --git a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js index 8b32924..e23b49a 100644 --- a/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatReceiverStickerMessageBubble/styles.js @@ -6,7 +6,6 @@ export default StyleSheet.create({ innerContainer: { flexDirection: 'row', alignItems: 'flex-start' }, senderNameContainer: { marginBottom: 5 }, messageWrapperStyle: { - marginBottom: 4, alignSelf: 'flex-start', paddingHorizontal: 12 * widthRatio, paddingVertical: 8 * heightRatio, @@ -32,6 +31,7 @@ export default StyleSheet.create({ marginRight: 10 * widthRatio, backgroundColor: 'rgba(51,153,255,0.25)', borderRadius: 25, + marginTop: 30, }, containerStyle: { flexDirection: 'row', diff --git a/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js index fc40fd5..9796c78 100644 --- a/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatSenderPollMessageBubble/styles.js @@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../../utils/consts'; export default StyleSheet.create({ - container: { marginBottom: 16 }, + container: { marginBottom: 16, marginRight: 8 }, pollQuestionText: { fontSize: 14, textAlign: 'left', color: 'white' }, totalText: { fontSize: 14, diff --git a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js index d474c3e..0764be1 100644 --- a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js +++ b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/index.js @@ -12,10 +12,10 @@ import * as enums from '../../../../utils/enums'; import * as actions from '../../../../utils/actions'; const CometChatSenderStickerMessageBubble = (props) => { - const [message] = useState({ + const message = { ...props.message, - messageFrom: enums.MESSAGE_FROM_SENDER, - }); + messageFrom: enums.MESSAGE_FROM_RECEIVER, + }; let stickerData = null; let stickerImg = null; if ( @@ -45,11 +45,13 @@ const CometChatSenderStickerMessageBubble = (props) => { - + + + ); }; diff --git a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js index c382ad0..5780fcc 100644 --- a/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js +++ b/src/components/Messages/Extensions/CometChatSenderStickerMessageBubble/styles.js @@ -10,6 +10,8 @@ export default StyleSheet.create({ position: 'relative', flexDirection: 'column', flexShrink: 0, + marginRight: 8, + alignItems: 'flex-end', }, messageWrapperStyle: { width: '100%', diff --git a/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js b/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js index 2892d83..965ad56 100644 --- a/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js +++ b/src/components/Messages/Extensions/CometChatSmartReplyPreview/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio } from '../../../../utils/consts'; - +import theme from '../../../../resources/theme'; export default StyleSheet.create({ previewWrapperStyle: { width: '100%', @@ -12,7 +12,7 @@ export default StyleSheet.create({ paddingVertical: 8 * heightRatio, borderRadius: 18, marginVertical: 8, - shadowColor: '#141414', + shadowColor: theme.color.primary, shadowOffset: { width: 0, height: 1, diff --git a/src/components/Shared/CometChatAvatar/styles.js b/src/components/Shared/CometChatAvatar/styles.js index 13182b0..be091a0 100644 --- a/src/components/Shared/CometChatAvatar/styles.js +++ b/src/components/Shared/CometChatAvatar/styles.js @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; - +import { heightRatio, widthRatio, deviceHeight } from '../../../utils/consts'; +import theme from '../../../resources/theme'; export default StyleSheet.create({ avatarContainer: { overflow: 'hidden', @@ -17,4 +18,20 @@ export default StyleSheet.create({ width: '100%', height: undefined, }, + + groupDetailContainer: { + padding: 16, + flexDirection: 'row', + alignItems: 'center', + }, + groupDetail: { + paddingLeft: 8, + justifyContent: 'center', + width: '100%', + }, + userName: { + fontSize: 18 * heightRatio, + color: theme.color.primary, + fontWeight: 'bold', + }, }); diff --git a/src/components/Shared/CometChatBadgeCount/index.js b/src/components/Shared/CometChatBadgeCount/index.js index ed63d4a..97c6595 100644 --- a/src/components/Shared/CometChatBadgeCount/index.js +++ b/src/components/Shared/CometChatBadgeCount/index.js @@ -1,8 +1,8 @@ import React, { useRef, useEffect } from 'react'; -import { Animated } from 'react-native'; +import { Animated, View } from 'react-native'; import theme from '../../../resources/theme'; import styles from './styles'; - +import PropTypes from 'prop-types'; const CometChatBadgeCount = (props) => { const badgeTheme = { ...theme, ...props.theme }; @@ -18,20 +18,38 @@ const CometChatBadgeCount = (props) => { if (props.count) { return ( - - {props.count} - + + + {props.count} + + ); } return null; }; export default CometChatBadgeCount; + +CometChatBadgeCount.defaultProps = { + containerStyle: {}, + theme: {}, + count: 0, +}; + +CometChatBadgeCount.propTypes = { + count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + containerStyle: PropTypes.object, + theme: PropTypes.object, +}; diff --git a/src/components/Shared/CometChatBadgeCount/styles.js b/src/components/Shared/CometChatBadgeCount/styles.js index 24a64e7..313709f 100644 --- a/src/components/Shared/CometChatBadgeCount/styles.js +++ b/src/components/Shared/CometChatBadgeCount/styles.js @@ -2,17 +2,19 @@ import { StyleSheet } from 'react-native'; export default StyleSheet.create({ badgeStyle: { - fontSize: 12, - height: 18, - borderRadius: 8, + aspectRatio: 1, + height: 24, + borderRadius: 900, + marginLeft: 4, + marginRight: 2, + opacity: 1, + justifyContent: 'center', + }, + textStyle: { + fontSize: 11, overflow: 'hidden', textAlign: 'center', fontWeight: '700', - lineHeight: 18, - marginLeft: 4, - paddingVertical: 0, - paddingHorizontal: 9, - marginRight: 2, opacity: 1, }, }); diff --git a/src/components/Shared/CometChatSharedMedia/controller.js b/src/components/Shared/CometChatSharedMedia/controller.js index 35d2c06..4c2b03b 100644 --- a/src/components/Shared/CometChatSharedMedia/controller.js +++ b/src/components/Shared/CometChatSharedMedia/controller.js @@ -1,7 +1,7 @@ import { CometChat } from '@cometchat-pro/react-native-chat'; import * as enums from '../../../utils/enums'; - +import { HIDE_DELETED_MSG } from '../../../utils/settings'; export class SharedMediaManager { mediaMessageListenerId = `shared_media_${new Date().getTime()}`; @@ -14,6 +14,7 @@ export class SharedMediaManager { .setLimit(10) .setCategory(CometChat.CATEGORY_MESSAGE) .setType(messageType) + .hideDeletedMessages(HIDE_DELETED_MSG) .build(); } else { this.mediaMessageRequest = new CometChat.MessagesRequestBuilder() @@ -21,6 +22,7 @@ export class SharedMediaManager { .setLimit(10) .setCategory(CometChat.CATEGORY_MESSAGE) .setType(messageType) + .hideDeletedMessages(HIDE_DELETED_MSG) .build(); } } diff --git a/src/components/Shared/CometChatSharedMedia/index.js b/src/components/Shared/CometChatSharedMedia/index.js index 36ef8c9..dd1635b 100644 --- a/src/components/Shared/CometChatSharedMedia/index.js +++ b/src/components/Shared/CometChatSharedMedia/index.js @@ -133,7 +133,7 @@ export default class CometChatSharedMedia extends React.Component { }) .catch((error) => { const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); + this.props?.showMessage('error', errorCode); logger( '[CometChatSharedMedia] getMessages fetchPrevious error', error, @@ -142,7 +142,7 @@ export default class CometChatSharedMedia extends React.Component { }) .catch((error) => { const errorCode = error?.message || 'ERROR'; - this.dropDownAlertRef?.showMessage('error', errorCode); + this.props?.showMessage('error', errorCode); logger( '[CometChatSharedMedia] getMessages getLoggedInUser error', error, @@ -300,7 +300,7 @@ export default class CometChatSharedMedia extends React.Component { style={[ styles.sectionHeaderStyle, { - color: `${currentTheme.color.secondary}`, + color: currentTheme.color.helpText, }, ]}> Shared Media @@ -357,7 +357,9 @@ export default class CometChatSharedMedia extends React.Component { height: deviceHeight - 280 * heightRatio, }} columnWrapperStyle={styles.mediaItemColumnStyle} - contentContainerStyle={styles.mediaItemStyle} + contentContainerStyle={ + messages?.length ? null : styles.mediaItemStyle + } showsVerticalScrollIndicator={false} numColumns={2} ListEmptyComponent={this.emptyListComponent} diff --git a/src/components/Shared/CometChatSharedMedia/styles.js b/src/components/Shared/CometChatSharedMedia/styles.js index afc68ec..1775471 100644 --- a/src/components/Shared/CometChatSharedMedia/styles.js +++ b/src/components/Shared/CometChatSharedMedia/styles.js @@ -58,6 +58,7 @@ export default StyleSheet.create({ }, mediaItemStyle: { justifyContent: 'center', + flexGrow: 1, }, mediaItemColumnStyle: { justifyContent: 'space-between', diff --git a/src/components/Shared/CometChatUserPresence/index.js b/src/components/Shared/CometChatUserPresence/index.js index f452e5a..3f2aaf5 100644 --- a/src/components/Shared/CometChatUserPresence/index.js +++ b/src/components/Shared/CometChatUserPresence/index.js @@ -19,7 +19,7 @@ const CometChatUserPresence = (props) => { presenceStatus = { backgroundColor: 'rgb(0, 255, 0)', }; - borderWidth = 0; + // borderWidth = 0; } const borderStyle = { @@ -29,7 +29,15 @@ const CometChatUserPresence = (props) => { borderRadius: cornerRadius, }; return ( - + ); }; export default CometChatUserPresence; diff --git a/src/components/Shared/CometChatUserPresence/styles.js b/src/components/Shared/CometChatUserPresence/styles.js index d6d5dbe..8daa312 100644 --- a/src/components/Shared/CometChatUserPresence/styles.js +++ b/src/components/Shared/CometChatUserPresence/styles.js @@ -2,10 +2,12 @@ import { StyleSheet } from 'react-native'; export default StyleSheet.create({ statueIndicatorStyle: { - width: 8, - height: 8, - top: 25, - right: -2, + width: 12, + height: 12, + top: 30, + right: 0, + borderColor: '#fff', + borderWidth: 1, position: 'absolute', }, }); diff --git a/src/components/Shared/DropDownAlert/index.js b/src/components/Shared/DropDownAlert/index.js index 71c5d8d..dfbe8ac 100644 --- a/src/components/Shared/DropDownAlert/index.js +++ b/src/components/Shared/DropDownAlert/index.js @@ -8,6 +8,7 @@ import CloseIcon from './resources/close.png'; import styles from './styles'; import { StatusBar } from 'react-native'; import { TouchableOpacity } from 'react-native'; + export default class DropDownAlert extends Component { constructor(props) { super(props); @@ -27,6 +28,9 @@ export default class DropDownAlert extends Component { }; slideOut = () => { + if (this.props.onClose) { + this.props.onClose(); + } const self = this; Animated.timing(this.animatedY, { duration: 1000, @@ -38,6 +42,7 @@ export default class DropDownAlert extends Component { }; showMessage = (type = 'error', text = 'Something went wrong') => { + return; this.setState({ errorText: text, type }, () => { this.slideIn(); }); @@ -78,7 +83,7 @@ export default class DropDownAlert extends Component { {errorText} diff --git a/src/components/Shared/DropDownAlert/styles.js b/src/components/Shared/DropDownAlert/styles.js index 62cf34d..1f1f303 100644 --- a/src/components/Shared/DropDownAlert/styles.js +++ b/src/components/Shared/DropDownAlert/styles.js @@ -3,7 +3,7 @@ import theme from '../../../resources/theme'; export default StyleSheet.create({ mainContainer: { - bottom: Platform.OS == 'ios' ? '85%' : '90%', + bottom: Platform.OS == 'ios' ? '80%' : '85%', position: 'absolute', top: 0, left: 0, diff --git a/src/components/UserProfile/CometChatUserProfile/index.js b/src/components/UserProfile/CometChatUserProfile/index.js index f45f9bf..d868920 100644 --- a/src/components/UserProfile/CometChatUserProfile/index.js +++ b/src/components/UserProfile/CometChatUserProfile/index.js @@ -8,14 +8,20 @@ import theme from '../../../resources/theme'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { logger } from '../../../utils/common'; -const notificationIcon = ; -const privacyIcon = ; -const chatIcon = ; -const helpIcon = ; -const problemIcon = ; +const notificationIcon = ( + +); +const privacyIcon = ( + +); +const chatIcon = ; +const helpIcon = ; +const problemIcon = ( + +); const CometChatUserProfile = (props) => { - const [user, setUser] = useState({ name: '', avatar: null }); + const [user, setUser] = useState({}); const viewTheme = { ...theme, ...props.theme }; /** @@ -39,18 +45,20 @@ const CometChatUserProfile = (props) => { useEffect(() => { getProfile(); }, []); - - const avatar = ( - - - - ); + let avatar = null; + if (user) { + avatar = ( + + + + ); + } return ( @@ -59,12 +67,14 @@ const CometChatUserProfile = (props) => { {avatar} - - - {user.name} + {user?.name ? ( + + + {user?.name} + + Online - Online - + ) : null} diff --git a/src/components/UserProfile/CometChatUserProfile/styles.js b/src/components/UserProfile/CometChatUserProfile/styles.js index 7ad8368..f3f2f77 100644 --- a/src/components/UserProfile/CometChatUserProfile/styles.js +++ b/src/components/UserProfile/CometChatUserProfile/styles.js @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native'; import { widthRatio, heightRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ userInfoScreenStyle: { flex: 1, @@ -38,7 +38,8 @@ export default StyleSheet.create({ }, userName: { fontSize: 16 * heightRatio, - fontWeight: '700', + color: theme.color.primary, + fontWeight: '500', }, status: { fontWeight: '500', @@ -46,8 +47,8 @@ export default StyleSheet.create({ color: '#349afe', }, avatarStyle: { - width: 36 * widthRatio, - height: 36 * heightRatio, + width: 40, + height: 40, borderColor: 'green', marginTop: 10, }, @@ -56,18 +57,18 @@ export default StyleSheet.create({ width: '100%', }, infoItemHeadingContainer: { - marginLeft: 16 * widthRatio, + marginLeft: 16, marginTop: 8 * heightRatio, }, infoItemHeadingText: { - color: '#cccccc', + color: theme.color.helpText, fontWeight: '500', - fontSize: 16 * heightRatio, + fontSize: 16, }, infoItemsContainer: { borderColor: 'orange', - marginLeft: 32 * widthRatio, + marginLeft: 16, marginTop: 16 * heightRatio, }, infoItem: { @@ -77,9 +78,8 @@ export default StyleSheet.create({ alignItems: 'center', }, infoItemText: { - fontSize: 14 * heightRatio, - fontWeight: '700', - + fontSize: 14, + color: theme.color.primary, marginLeft: 8, }, }); diff --git a/src/components/Users/CometChatUserDetails/index.js b/src/components/Users/CometChatUserDetails/index.js index 60458e5..2a8762d 100644 --- a/src/components/Users/CometChatUserDetails/index.js +++ b/src/components/Users/CometChatUserDetails/index.js @@ -2,7 +2,13 @@ import React from 'react'; import { View, Text, TouchableOpacity, Dimensions, Modal } from 'react-native'; import theme from '../../../resources/theme'; import Icon from 'react-native-vector-icons/MaterialIcons'; -import { CometChatSharedMedia } from '../../Shared'; +import { + CometChatSharedMedia, + CometChatAvatar, + CometChatUserPresence, +} from '../../Shared'; +import { logger } from '../../../utils/common'; +import { CometChat } from '@cometchat-pro/react-native-chat'; import style from './styles'; import BottomSheet from 'reanimated-bottom-sheet'; import * as actions from '../../../utils/actions'; @@ -15,6 +21,13 @@ export default class CometChatUserDetails extends React.Component { this.viewTheme = { ...theme, ...this.props.theme }; this.sheetRef = React.createRef(null); + this.state = { + status: this.props.item.status, + }; + } + + componentDidMount() { + this.setStatusForUser(); } /** @@ -26,9 +39,82 @@ export default class CometChatUserDetails extends React.Component { } } + setStatusForUser = () => { + try { + let { status } = this.props.item; + if ( + this.props.item.status === CometChat.USER_STATUS.OFFLINE && + this.props.item.lastActiveAt + ) { + let messageTimestamp = new Date(this.props.item.lastActiveAt * 1000); + const currentTimestamp = new Date(); + + if ( + messageTimestamp.getUTCFullYear() == + currentTimestamp.getUTCFullYear() && + messageTimestamp.getUTCMonth() == currentTimestamp.getUTCMonth() && + messageTimestamp.getUTCDate() == currentTimestamp.getUTCDate() + ) { + var hours = messageTimestamp.getHours(); + var minutes = messageTimestamp.getMinutes(); + var ampm = hours >= 12 ? 'pm' : 'am'; + hours = hours % 12; + hours = hours ? hours : 12; + minutes = minutes < 10 ? '0' + minutes : minutes; + status = hours + ':' + minutes + ' ' + ampm.toUpperCase(); + } else if ( + messageTimestamp.getUTCFullYear() == + currentTimestamp.getUTCFullYear() && + messageTimestamp.getUTCMonth() == currentTimestamp.getUTCMonth() && + messageTimestamp.getUTCDate() == currentTimestamp.getUTCDate() - 1 + ) { + var hours = messageTimestamp.getHours(); + var minutes = messageTimestamp.getMinutes(); + var ampm = hours >= 12 ? 'pm' : 'am'; + hours = hours % 12; + hours = hours ? hours : 12; + minutes = minutes < 10 ? '0' + minutes : minutes; + status = + 'Yesterday, ' + hours + ':' + minutes + ' ' + ampm.toUpperCase(); + } else { + const month = String(messageTimestamp.getMonth()).padStart(2, '0'); + const day = String(messageTimestamp.getDate()).padStart(2, '0'); + const year = messageTimestamp.getFullYear(); + status = day + '/' + month + '/' + year; + } + } else if (this.props.item.status === CometChat.USER_STATUS.OFFLINE) { + status = 'offline'; + } + + this.setState({ status }); + } catch (error) { + logger(error); + } + }; + render() { let blockUserText; + let avatar = ( + + + {this.props.item && this.props.item.blockedByMe ? null : ( + + )} + + ); if (this.props.item && this.props.item.blockedByMe) { blockUserText = ( { + this.props.actionGenerated(actions.SHOW_PROFILE); + }}> + + View Profile + + + ); + let blockUserView = ( - Options + PRIVACY & SUPPORT {blockUserText} ); + let action = this.props.item?.link ? ( + + + ACTIONS + + + {showProfile} + + ) : null; + let sharedMediaView = ( Details + + {avatar} + + + + {this.props.item.name} + + + {this.props.item && this.props.item.blockedByMe ? null : ( + + {this.state.status} + + )} + + + {action} {blockUserView} + {sharedMediaView} diff --git a/src/components/Users/CometChatUserDetails/styles.js b/src/components/Users/CometChatUserDetails/styles.js index 9a8a4a7..358d89c 100644 --- a/src/components/Users/CometChatUserDetails/styles.js +++ b/src/components/Users/CometChatUserDetails/styles.js @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; import { heightRatio, widthRatio, deviceHeight } from '../../../utils/consts'; +import theme from '../../../resources/theme'; export default StyleSheet.create({ container: { flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }, @@ -18,7 +19,11 @@ export default StyleSheet.create({ }, optionsContainer: { padding: 16, flex: 1, flexGrow: 1 }, blockContainer: { width: '100%' }, - blockText: { width: '100%', marginVertical: 6 }, + blockText: { + width: '100%', + marginVertical: 6, + paddingBottom: 8, + }, headerStyle: { flexDirection: 'row', alignItems: 'center', @@ -38,4 +43,30 @@ export default StyleSheet.create({ flex: 1, minHeight: deviceHeight, }, + avatarStyle: { + width: 48, + height: 48, + borderRadius: 24, + backgroundColor: 'rgba(51,153,255,0.25)', + }, + userName: { + fontSize: 18 * heightRatio, + color: theme.color.primary, + fontWeight: 'bold', + }, + statusText: { + fontSize: 14, + color: theme.color.blue, + }, + userDetailContainer: { + padding: 16, + flexDirection: 'row', + alignItems: 'center', + }, + userDetail: { + paddingLeft: 8, + justifyContent: 'center', + height: 48, + width: '100%', + }, }); diff --git a/src/components/Users/CometChatUserList/index.js b/src/components/Users/CometChatUserList/index.js index 39d1d1e..bcf901f 100644 --- a/src/components/Users/CometChatUserList/index.js +++ b/src/components/Users/CometChatUserList/index.js @@ -309,11 +309,7 @@ class CometChatUserList extends React.PureComponent { backgroundColor: `${this.theme.backgroundColor.grey}`, }, ]}> - + { diff --git a/src/components/Users/CometChatUserListItem/styles.js b/src/components/Users/CometChatUserListItem/styles.js index 7548775..5e7436a 100644 --- a/src/components/Users/CometChatUserListItem/styles.js +++ b/src/components/Users/CometChatUserListItem/styles.js @@ -1,19 +1,19 @@ import { StyleSheet } from 'react-native'; import { widthRatio } from '../../../utils/consts'; - +import theme from '../../../resources/theme'; export default StyleSheet.create({ listItem: { flexDirection: 'row', alignItems: 'center', width: '100%', paddingVertical: 8, - paddingHorizontal: 15, + paddingHorizontal: 16, }, avatarStyle: { flexWrap: 'wrap', flexDirection: 'row', - width: 44, - height: 44, + width: 40, + height: 40, backgroundColor: 'rgba(51,153,255,0.25)', marginRight: 15 * widthRatio, }, @@ -21,5 +21,10 @@ export default StyleSheet.create({ width: '100%', justifyContent: 'center', }, - userNameText: { fontSize: 16, fontWeight: '600', maxWidth: '80%' }, + userNameText: { + fontSize: 16, + fontWeight: '600', + maxWidth: '80%', + color: theme.color.primary, + }, }); diff --git a/src/components/Users/CometChatUserProfile/index.js b/src/components/Users/CometChatUserProfile/index.js new file mode 100644 index 0000000..dff63bc --- /dev/null +++ b/src/components/Users/CometChatUserProfile/index.js @@ -0,0 +1,108 @@ +import React from 'react'; +import { + View, + Modal, + Image, + TouchableOpacity, + Dimensions, + Text, +} from 'react-native'; +import theme from '../../../resources/theme'; +import { WebView } from 'react-native-webview'; +import style from './styles'; +import { get as _get } from 'lodash'; +import BottomSheet from 'reanimated-bottom-sheet'; +import VideoPlayer from 'react-native-video-controls'; +import { ActivityIndicator } from 'react-native'; + +const cross = require('./resources/clear.png'); + +class CometChatUserProfile extends React.Component { + constructor(props) { + super(props); + this.sheetRef = React.createRef(null); + this.isLoading = true; + } + + render() { + return ( + + + { + return ( + + + + + + {this.isLoading ? ( + + + Loading... + + ) : null} + + { + const { nativeEvent } = syntheticEvent; + this.isLoading = false; + console.warn('WebView error: ', nativeEvent); + }} + onLoad={(syntheticEvent) => { + this.isLoading = false; + }} + onHttpError={(syntheticEvent) => { + const { nativeEvent } = syntheticEvent; + this.isLoading = false; + console.warn( + 'WebView received error status code: ', + nativeEvent.statusCode, + ); + }} + startInLoadingState={true} + style={{ + height: '100%', + width: '100%', + borderWidth: 3, + }} + source={{ uri: this.props.url }} + renderError={(errorName) => errorName} + /> + + + + ); + }} + onCloseEnd={() => { + this.props.close(); + }} + /> + + + ); + } +} +export default CometChatUserProfile; diff --git a/src/components/Users/CometChatUserProfile/resources/clear.png b/src/components/Users/CometChatUserProfile/resources/clear.png new file mode 100644 index 0000000000000000000000000000000000000000..9a939e1ccc95a57e6563629369fb8e5b3aa4c976 GIT binary patch literal 205 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt^lo-U3d z9-VKe81gkJ@VLhBVeWJn409Yr8YfkVU^%2dG2GG-qXcqp0TT~=2w+o zV7e?gvn}VB&sqCfKUaMS3J^|;DvL`t_@Ef0P+;#mk6Um(&@~L6u6{1-oD!M