diff --git a/app/i18n/locales/en.js b/app/i18n/locales/en.js
index 758294a16..f48b0f3b0 100644
--- a/app/i18n/locales/en.js
+++ b/app/i18n/locales/en.js
@@ -245,6 +245,7 @@ export default {
Message_removed: 'Message removed',
message: 'message',
messages: 'messages',
+ Message: 'Message',
Messages: 'Messages',
Message_Reported: 'Message reported',
Microphone_Permission_Message: 'Rocket Chat needs access to your microphone so you can send audio message.',
diff --git a/app/views/RoomInfoView/index.js b/app/views/RoomInfoView/index.js
index 1df5566bb..abe495a5e 100644
--- a/app/views/RoomInfoView/index.js
+++ b/app/views/RoomInfoView/index.js
@@ -1,10 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, ScrollView } from 'react-native';
+import { BorderlessButton } from 'react-native-gesture-handler';
import { connect } from 'react-redux';
import moment from 'moment';
import { SafeAreaView } from 'react-navigation';
-
+import { CustomIcon } from '../../lib/Icons';
import Status from '../../containers/Status';
import Avatar from '../../containers/Avatar';
import styles from './styles';
@@ -22,10 +23,14 @@ import { themedHeader } from '../../utils/navigation';
import { getUserSelector } from '../../selectors/login';
const PERMISSION_EDIT_ROOM = 'edit-room';
-
const camelize = str => str.replace(/^(.)/, (match, chr) => chr.toUpperCase());
-const getRoomTitle = (room, type, name, theme) => (type === 'd'
- ? {name}
+const getRoomTitle = (room, type, name, username, theme) => (type === 'd'
+ ? (
+ <>
+ { name }
+ {username && {`@${ username }`}}
+ >
+ )
: (
@@ -143,6 +148,24 @@ class RoomInfoView extends React.Component {
}
}
+ goRoom = async() => {
+ const { roomUser } = this.state;
+ const { username: name } = roomUser;
+ const { navigation } = this.props;
+ try {
+ const result = await RocketChat.createDirectMessage(name);
+ if (result.success) {
+ await navigation.navigate('RoomsListView');
+ const rid = result.room._id;
+ navigation.navigate('RoomView', { rid, name, t: 'd' });
+ }
+ } catch (e) {
+ // do nothing
+ }
+ }
+
+ videoCall = () => RocketChat.callJitsi(this.rid)
+
isDirect = () => this.t === 'd'
renderItem = (key, room) => {
@@ -163,7 +186,7 @@ class RoomInfoView extends React.Component {
const { theme } = this.props;
if (description) {
return (
-
+
{ description }
);
@@ -173,10 +196,11 @@ class RoomInfoView extends React.Component {
renderRoles = () => {
const { parsedRoles } = this.state;
+ const { theme } = this.props;
if (parsedRoles && parsedRoles.length) {
return (
- {I18n.t('Roles')}
+ {I18n.t('Roles')}
{parsedRoles.map(role => this.renderRole(role))}
@@ -261,6 +285,30 @@ class RoomInfoView extends React.Component {
return null;
}
+ renderButton = (onPress, iconName, text) => {
+ const { theme } = this.props;
+ return (
+
+
+ {text}
+
+ );
+ }
+
+ renderButtons = () => (
+
+ {this.renderButton(this.goRoom, 'message', I18n.t('Message'))}
+ {this.renderButton(this.videoCall, 'video', I18n.t('Video_call'))}
+
+ )
+
renderChannel = () => {
const { room } = this.state;
return (
@@ -287,6 +335,7 @@ class RoomInfoView extends React.Component {
render() {
const { room, roomUser } = this.state;
const { theme } = this.props;
+ const isDirect = this.isDirect();
if (!room) {
return ;
}
@@ -298,11 +347,12 @@ class RoomInfoView extends React.Component {
forceInset={{ vertical: 'never' }}
testID='room-info-view'
>
-
+
{this.renderAvatar(room, roomUser)}
- { getRoomTitle(room, this.t, roomUser && roomUser.name, theme) }
+ { getRoomTitle(room, this.t, roomUser && roomUser.name, roomUser && roomUser.username, theme) }
+ {isDirect ? this.renderButtons() : null}
- {this.isDirect() ? this.renderDirect() : this.renderChannel()}
+ {isDirect ? this.renderDirect() : this.renderChannel()}
);
diff --git a/app/views/RoomInfoView/styles.js b/app/views/RoomInfoView/styles.js
index 00901410a..fe82ca7c4 100644
--- a/app/views/RoomInfoView/styles.js
+++ b/app/views/RoomInfoView/styles.js
@@ -8,30 +8,38 @@ export default StyleSheet.create({
},
scroll: {
flex: 1,
- flexDirection: 'column',
- padding: 10
+ flexDirection: 'column'
},
item: {
- padding: 10,
+ paddingVertical: 10,
+ paddingHorizontal: 20,
justifyContent: 'center'
},
avatarContainer: {
- height: 250,
+ height: 240,
flexDirection: 'column',
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
+ marginBottom: 20
+ },
+ avatarContainerDirectRoom: {
+ height: 320
},
avatar: {
marginHorizontal: 10
},
roomTitleContainer: {
paddingTop: 20,
- flexDirection: 'row'
+ alignItems: 'center'
},
roomTitle: {
- fontSize: 18,
+ fontSize: 20,
...sharedStyles.textMedium
},
+ roomUsername: {
+ fontSize: 18,
+ ...sharedStyles.textRegular
+ },
roomTitleRow: {
flexDirection: 'row',
alignItems: 'center'
@@ -66,5 +74,17 @@ export default StyleSheet.create({
role: {
fontSize: 14,
...sharedStyles.textRegular
+ },
+ roomButtonsContainer: {
+ flexDirection: 'row',
+ paddingTop: 30
+ },
+ roomButton: {
+ alignItems: 'center',
+ paddingHorizontal: 20,
+ justifyContent: 'space-between'
+ },
+ roomButtonText: {
+ marginTop: 5
}
});