New message layout

android/app/proguard-rules.pro

@@ -86,17 +86,8 @@
     native <methods>;
 }
 
-# Crashlytics 2.+
-
--keep class com.crashlytics.** { *; }
--keep class com.crashlytics.sdk.android.**
--keepattributes SourceFile, LineNumberTable, *Annotation*
-
-# If you are using custom exceptions, add this line so that custom exception types are skipped during obfuscation:
--keep public class * extends java.lang.Exception
-
 # For Fabric to properly de-obfuscate your crash reports, you need to remove this line from your ProGuard config:
-# -printmapping mapping.txt
+ -printmapping mapping.txt
 
 -dontwarn javax.annotation.**
 -dontwarn com.facebook.infer.**

app/containers/Avatar.js

@@ -36,7 +36,7 @@ export default class Avatar extends React.PureComponent {
 	};
 	render() {
 		const {
-			text = '', size = 25, baseUrl, borderRadius = 4, style, avatar, type = 'd'
+			text = '', size = 25, baseUrl, borderRadius = 2, style, avatar, type = 'd'
 		} = this.props;
 		const { initials, color } = avatarInitialsAndColor(`${ text }`);
 

app/containers/MessageBox/index.js

@@ -80,6 +80,7 @@ export default class MessageBox extends React.PureComponent {
 
 	onChangeText(text) {
 		this.setState({ text });
+		this.props.typing(text.length > 0);
 
 		requestAnimationFrame(() => {
 			const { start, end } = this.component._lastNativeSelection;
@@ -454,7 +455,6 @@ export default class MessageBox extends React.PureComponent {
 							style={{ margin: 8 }}
 							text={item.username || item.name}
 							size={30}
-							baseUrl={this.props.baseUrl}
 						/>,
 						<Text key='mention-item-name'>{ item.username || item.name }</Text>
 					]

app/containers/MessageBox/styles.js

@@ -22,8 +22,9 @@ export default StyleSheet.create({
 		maxHeight: 120,
 		flexGrow: 1,
 		width: 1,
-		paddingTop: 15,
-		paddingBottom: 15,
+		// paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering
+		paddingTop: 12,
+		paddingBottom: 12,
 		paddingLeft: 0,
 		paddingRight: 0
 	},
@@ -35,7 +36,7 @@ export default StyleSheet.create({
 		fontSize: 20,
 		textAlign: 'center',
 		padding: 15,
-		paddingHorizontal: 21,
+		paddingHorizontal: 12,
 		flex: 0
 	},
 	mentionList: {

app/containers/Typing.js

@@ -1,28 +1,31 @@
 import React from 'react';
-
 import PropTypes from 'prop-types';
-import { StyleSheet, Text, Keyboard } from 'react-native';
+import { View, StyleSheet, Text, Keyboard, LayoutAnimation } from 'react-native';
 import { connect } from 'react-redux';
 
 const styles = StyleSheet.create({
 	typing: {
-
 		transform: [{ scaleY: -1 }],
 		fontWeight: 'bold',
 		paddingHorizontal: 15,
 		height: 25
+	},
+	emptySpace: {
+		height: 5
 	}
 });
 
 @connect(state => ({
 	username: state.login.user && state.login.user.username,
 	usersTyping: state.room.usersTyping
 }))
-
 export default class Typing extends React.Component {
 	shouldComponentUpdate(nextProps) {
 		return this.props.usersTyping.join() !== nextProps.usersTyping.join();
 	}
+	componentWillUpdate() {
+		LayoutAnimation.easeInEaseOut();
+	}
 	onPress = () => {
 		Keyboard.dismiss();
 	}
@@ -31,7 +34,13 @@ export default class Typing extends React.Component {
 		return users.length ? `${ users.join(' ,') } ${ users.length > 1 ? 'are' : 'is' } typing` : '';
 	}
 	render() {
-		return (<Text style={styles.typing} onPress={() => this.onPress()}>{this.usersTyping}</Text>);
+		const { usersTyping } = this;
+
+		if (!usersTyping) {
+			return <View style={styles.emptySpace} />;
+		}
+
+		return (<Text style={styles.typing} onPress={() => this.onPress()}>{usersTyping}</Text>);
 	}
 }
 

app/containers/message/Audio.js

@@ -4,9 +4,9 @@ import { View, StyleSheet, TouchableOpacity, Text, Easing } from 'react-native';
 import Video from 'react-native-video';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Slider from 'react-native-slider';
+import { connect } from 'react-redux';
 import Markdown from './Markdown';
 
-
 const styles = StyleSheet.create({
 	audioContainer: {
 		flex: 1,
@@ -61,6 +61,9 @@ const formatTime = (t = 0, duration = 0) => {
 	return `${ formattedMinutes }:${ formattedSeconds }`;
 };
 
+@connect(state => ({
+	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
+}))
 export default class Audio extends React.PureComponent {
 	static propTypes = {
 		file: PropTypes.object.isRequired,
@@ -115,8 +118,8 @@ export default class Audio extends React.PureComponent {
 		const { uri, paused } = this.state;
 		const { description } = this.props.file;
 		return (
-			<View>
-				<View style={styles.audioContainer}>
+			[
+				<View key='audio' style={styles.audioContainer}>
 					<Video
 						ref={(ref) => {
 							this.player = ref;
@@ -154,9 +157,9 @@ export default class Audio extends React.PureComponent {
 							onValueChange={value => this.setState({ currentTime: value })}
 						/>
 					</View>
-				</View>
-				<Markdown msg={description} />
-			</View>
+				</View>,
+				<Markdown key='description' msg={description} />
+			]
 		);
 	}
 }

app/containers/message/Emoji.js

@@ -2,8 +2,12 @@ import React from 'react';
 import { Text, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 import { emojify } from 'react-emojione';
+import { connect } from 'react-redux';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 
+@connect(state => ({
+	customEmojis: state.customEmojis
+}))
 export default class Emoji extends React.PureComponent {
 	static propTypes = {
 		content: PropTypes.string,

app/containers/message/Header.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { View, Text, StyleSheet } from 'react-native';
+import moment from 'moment';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import Avatar from '../Avatar';
+import styles from './styles';
+
+@connect(state => ({
+	Message_GroupingPeriod: state.settings.Message_GroupingPeriod
+}))
+export default class User extends React.PureComponent {
+	static propTypes = {
+		item: PropTypes.object.isRequired,
+		Message_TimeFormat: PropTypes.string.isRequired,
+		onPress: PropTypes.func
+	}
+
+	render() {
+		const { item, previousItem } = this.props;
+		// if (previousItem && (
+		// 	(previousItem.u.username === item.u.username) &&
+		// 		(previousItem.groupable === false || item.groupable === false) &&
+		// 		(item.ts - previousItem.ts > this.props.Message_GroupingPeriod * 1000)
+		// )) {
+		// 	return null;
+		// }
+		return (
+			<View style={styles.flex}>
+				<Avatar
+					style={styles.avatar}
+					text={item.username}
+					size={50}
+					avatar={item.avatar}
+				/>
+				<User
+					onPress={this._onPress}
+					item={item}
+					Message_TimeFormat={this.timeFormat}
+				/>
+			</View>
+		);
+	}
+}

app/containers/message/Image.js

@@ -1,41 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CachedImage } from 'react-native-img-cache';
-import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
 import PhotoModal from './PhotoModal';
+import Markdown from './Markdown';
 
 const styles = StyleSheet.create({
 	button: {
 		flex: 1,
-		flexDirection: 'column',
-		height: 320,
-		borderColor: '#ccc',
-		borderWidth: 1,
-		borderRadius: 6
+		flexDirection: 'column'
 	},
 	image: {
-		flex: 1,
-		height: undefined,
-		width: undefined,
-		resizeMode: 'contain'
+		width: 320,
+		height: 200,
+		resizeMode: 'cover'
 	},
 	labelContainer: {
-		height: 62,
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	imageName: {
-		fontSize: 12,
-		alignSelf: 'center',
-		fontStyle: 'italic'
-	},
-	message: {
-		alignSelf: 'center',
-		fontWeight: 'bold'
+		alignItems: 'flex-start'
 	}
 });
 
-export default class Image extends React.PureComponent {
+@connect(state => ({
+	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
+}))
+export default class extends React.PureComponent {
 	static propTypes = {
 		file: PropTypes.object.isRequired,
 		baseUrl: PropTypes.string.isRequired,
@@ -45,8 +34,9 @@ export default class Image extends React.PureComponent {
 	state = { modalVisible: false };
 
 	getDescription() {
-		if (this.props.file.description) {
-			return <Text style={styles.message}>{this.props.file.description}</Text>;
+		const { file, customEmojis } = this.props;
+		if (file.description) {
+			return <Markdown msg={file.description} customEmojis={customEmojis} />;
 		}
 	}
 
@@ -60,27 +50,26 @@ export default class Image extends React.PureComponent {
 		const { baseUrl, file, user } = this.props;
 		const img = `${ baseUrl }${ file.image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`;
 		return (
-			<View>
+			[
 				<TouchableOpacity
+					key='image'
 					onPress={() => this._onPressButton()}
 					style={styles.button}
 				>
 					<CachedImage
 						style={styles.image}
 						source={{ uri: encodeURI(img) }}
 					/>
-					<View style={styles.labelContainer}>
-						<Text style={styles.imageName}>{this.props.file.title}</Text>
-						{this.getDescription()}
-					</View>
-				</TouchableOpacity>
+					{this.getDescription()}
+				</TouchableOpacity>,
 				<PhotoModal
+					key='modal'
 					title={this.props.file.title}
 					image={img}
 					isVisible={this.state.modalVisible}
 					onClose={() => this.setState({ modalVisible: false })}
 				/>
-			</View>
+			]
 		);
 	}
 }

app/containers/message/Markdown.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import EasyMarkdown from 'react-native-easy-markdown'; // eslint-disable-line
 import SimpleMarkdown from 'simple-markdown';
 import { emojify } from 'react-emojione';
+import { connect } from 'react-redux';
 import styles from './styles';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 
@@ -92,6 +93,10 @@ const defaultRules = {
 };
 
 const codeStyle = StyleSheet.flatten(styles.codeStyle);
+
+@connect(state => ({
+	customEmojis: state.customEmojis
+}))
 export default class Markdown extends React.Component {
 	shouldComponentUpdate(nextProps) {
 		return nextProps.msg !== this.props.msg;

app/containers/message/ReactionsModal.js

@@ -3,6 +3,7 @@ import { View, Text, TouchableWithoutFeedback, FlatList, StyleSheet } from 'reac
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import { connect } from 'react-redux';
 import Emoji from './Emoji';
 
 const styles = StyleSheet.create({
@@ -52,6 +53,10 @@ const styles = StyleSheet.create({
 });
 const standardEmojiStyle = { fontSize: 20 };
 const customEmojiStyle = { width: 20, height: 20 };
+
+@connect(state => ({
+	customEmojis: state.customEmojis
+}))
 export default class ReactionsModal extends React.PureComponent {
 	static propTypes = {
 		isVisible: PropTypes.bool.isRequired,