Unverified Commit 2ed8abb2 authored by Prateek Jain's avatar Prateek Jain Committed by GitHub
Browse files

[IMPROVEMENT] Room announcements (#1726)


Co-authored-by: default avatarDiego Mello <diegolmello@gmail.com>
parent d271e56b
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
......
......@@ -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',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment