diff --git a/app/components/NavigationBar.js b/app/components/NavigationBar.js index 1294ff7..a535054 100644 --- a/app/components/NavigationBar.js +++ b/app/components/NavigationBar.js @@ -1,151 +1,151 @@ import React, { Component } from 'react'; import { Linking, Image, View } from 'react-native'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import { Appbar, Menu, Divider, Text } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import config from '../config'; import AboutModal from './AboutModal'; import CallMeMaybeModal from './CallMeMaybeModal'; import styles from '../assets/styles/blink/_NavigationBar.scss'; const blinkLogo = require('../assets/images/blink-white-big.png'); class NavigationBar extends Component { constructor(props) { super(props); autoBind(this); this.state = { showAboutModal: false, showCallMeMaybeModal: false, mute: false, menuVisible: false } this.menuRef = React.createRef(); } handleMenu(event) { this.callUrl = `${config.publicUrl}/call/${this.props.account.id}`; switch (event) { case 'about': this.toggleAboutModal(); break; case 'callMeMaybe': this.toggleCallMeMaybeModal(); break; case 'logOut': this.props.logout(); break; case 'preview': this.props.preview(); break; case 'settings': Linking.openURL(config.serverSettingsUrl); break; default: break; } this.setState({menuVisible: false}); } toggleMute() { this.setState(prevState => ({mute: !prevState.mute})); this.props.toggleMute(); } toggleAboutModal() { this.setState({showAboutModal: !this.state.showAboutModal}); } toggleCallMeMaybeModal() { this.setState({showCallMeMaybeModal: !this.state.showCallMeMaybeModal}); } render() { const muteIcon = this.state.mute ? 'bell-off' : 'bell'; let subtitleStyle = this.props.isTablet ? styles.tabletSubtitle: styles.subtitle; let titleStyle = this.props.isTablet ? styles.tabletTitle: styles.title; let statusIcon = null; let account_id = ''; statusIcon = 'check-circle'; if (!this.props.connection || this.props.connection.state !== 'ready') { - statusIcon = 'error-outline'; + statusIcon = 'alert-circle'; } else if (this.props.registrationState && this.props.registrationState !== 'registered') { statusIcon = 'priority-high'; } // let callUrl = ''; if (this.props.account) { account_id = this.props.account.id; callUrl = config.publicUrl + "/call/" + account_id; } let subtitle = 'Signed in as ' + account_id; return ( {this.props.isTablet? {subtitle} : null} {statusIcon ? : null } this.setState({menuVisible: !this.state.menuVisible})} anchor={ this.setState({menuVisible: !this.state.menuVisible})} /> } > this.handleMenu('about')} icon="information" title="About Sylk" /> this.handleMenu('preview')} icon="video" title="Video preview" /> this.handleMenu('callMeMaybe')} icon="share" title="Call me, maybe?" /> this.handleMenu('settings')} icon="wrench" title="Server settings" /> this.handleMenu('logOut')} icon="logout" title="Sign out" /> ); } } NavigationBar.propTypes = { notificationCenter : PropTypes.func.isRequired, logout : PropTypes.func.isRequired, preview : PropTypes.func.isRequired, account : PropTypes.object, toggleMute : PropTypes.func, orientation : PropTypes.string, isTablet : PropTypes.bool }; export default NavigationBar;