[IMPROVEMENT] Room announcements (#1726)

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/views/RoomView/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, View, InteractionManager } from 'react-native';
+import { ScrollView, BorderlessButton } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
 import { SafeAreaView } from 'react-navigation';
+import Modal from 'react-native-modal';
 
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import moment from 'moment';
@@ -51,6 +53,7 @@ import { Review } from '../../utils/review';
 import RoomClass from '../../lib/methods/subscriptions/room';
 import { getUserSelector } from '../../selectors/login';
 import { CONTAINER_TYPES } from '../../lib/methods/actions';
+import Markdown from '../../containers/markdown';
 
 const stateAttrsUpdate = [
 	'joined',
@@ -62,9 +65,10 @@ const stateAttrsUpdate = [
 	'loading',
 	'editing',
 	'replying',
-	'reacting'
+	'reacting',
+	'showAnnouncementModal'
 ];
-const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout'];
+const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement'];
 
 class RoomView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -173,7 +177,9 @@ class RoomView extends React.Component {
 			editing: false,
 			replying: !!selectedMessage,
 			replyWithMention: false,
-			reacting: false
+			reacting: false,
+			showAnnouncementModal: false,
+			announcement: null
 		};
 
 		if (room && room.observe) {
@@ -184,7 +190,6 @@ class RoomView extends React.Component {
 
 		this.messagebox = React.createRef();
 		this.list = React.createRef();
-		this.willBlurListener = props.navigation.addListener('willBlur', () => this.mounted = false);
 		this.mounted = false;
 		this.sub = new RoomClass(this.rid);
 		console.timeEnd(`${ this.constructor.name } init`);
@@ -783,6 +788,56 @@ class RoomView extends React.Component {
 		return message;
 	}
 
+	toggleAnnouncementModal = (showModal) => {
+		this.setState({ showAnnouncementModal: showModal });
+	}
+
+	renderAnnouncement = () => {
+		const { theme } = this.props;
+		const { room } = this.state;
+		if (room.announcement) {
+			return (
+				<BorderlessButton style={[styles.announcementTextContainer, { backgroundColor: themes[theme].bannerBackground }]} key='room-user-status' testID='room-user-status' onPress={() => this.toggleAnnouncementModal(true)}>
+					<Markdown
+						useMarkdown
+						msg={room.announcement}
+						theme={theme}
+						numberOfLines={1}
+						preview
+					/>
+				</BorderlessButton>
+			);
+		} else {
+			return null;
+		}
+	}
+
+	renderAnnouncementModal = () => {
+		const { room, showAnnouncementModal } = this.state;
+		const { theme } = this.props;
+		return (
+			<Modal
+				onBackdropPress={() => this.toggleAnnouncementModal(false)}
+				onBackButtonPress={() => this.toggleAnnouncementModal(false)}
+				useNativeDriver
+				isVisible={showAnnouncementModal}
+				animationIn='fadeIn'
+				animationOut='fadeOut'
+			>
+				<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
+					<Text style={[styles.announcementTitle, { color: themes[theme].auxiliaryText }]}>{I18n.t('Announcement')}</Text>
+					<ScrollView style={styles.modalScrollView}>
+						<Markdown
+							useMarkdown
+							msg={room.announcement}
+							theme={theme}
+						/>
+					</ScrollView>
+				</View>
+			</Modal>
+		);
+	}
+
 	renderFooter = () => {
 		const {
 			joined, room, selectedMessage, editing, replying, replyWithMention
@@ -902,6 +957,7 @@ class RoomView extends React.Component {
 				forceInset={{ vertical: 'never' }}
 			>
 				<StatusBar theme={theme} />
+				{this.renderAnnouncement()}
 				<List
 					ref={this.list}
 					listRef={this.setListRef}
@@ -914,6 +970,7 @@ class RoomView extends React.Component {
 					loading={loading}
 					navigation={navigation}
 				/>
+				{this.renderAnnouncementModal()}
 				{this.renderFooter()}
 				{this.renderActions()}
 				<ReactionPicker

app/views/RoomView/styles.js

@@ -25,6 +25,26 @@ export default StyleSheet.create({
 		flexDirection: 'column',
 		overflow: 'hidden'
 	},
+	announcementTextContainer: {
+		paddingVertical: 12,
+		paddingHorizontal: 15,
+		alignItems: 'center'
+	},
+	announcementTitle: {
+		fontSize: 16,
+		...sharedStyles.textMedium
+	},
+	modalView: {
+		padding: 20,
+		justifyContent: 'center'
+	},
+	modalScrollView: {
+		maxHeight: 100,
+		marginVertical: 20
+	},
+	modalCloseButton: {
+		alignSelf: 'flex-end'
+	},
 	joinRoomContainer: {
 		justifyContent: 'flex-end',
 		alignItems: 'center',