Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IMPROVEMENT] Room announcements #1726

Merged
merged 9 commits into from
Feb 20, 2020
65 changes: 61 additions & 4 deletions app/views/RoomView/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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',
Expand All @@ -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 }) => {
Expand Down Expand Up @@ -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) {
Expand All @@ -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`);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -902,6 +957,7 @@ class RoomView extends React.Component {
forceInset={{ vertical: 'never' }}
>
<StatusBar theme={theme} />
{this.renderAnnouncement()}
<List
ref={this.list}
listRef={this.setListRef}
Expand All @@ -914,6 +970,7 @@ class RoomView extends React.Component {
loading={loading}
navigation={navigation}
/>
{this.renderAnnouncementModal()}
{this.renderFooter()}
{this.renderActions()}
<ReactionPicker
Expand Down
20 changes: 20 additions & 0 deletions app/views/RoomView/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down