diff --git a/app/components/NavigationBar.js b/app/components/NavigationBar.js index 90700df..23e7fe4 100644 --- a/app/components/NavigationBar.js +++ b/app/components/NavigationBar.js @@ -1,208 +1,208 @@ import React, { Component } from 'react'; import { Linking, Image, Platform, 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 EditDisplayNameModal from './EditDisplayNameModal'; 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, showEditDisplayNameModal: false, registrationState: this.props.registrationState, connection: this.props.connection, mute: false, menuVisible: false, accountId: this.props.account ? this.props.account.id : null, displayName: this.props.displayName } this.menuRef = React.createRef(); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.account !== null && nextProps.account.id !== this.state.accountId) { this.setState({accountId: nextProps.account.id}); } this.setState({registrationState: nextProps.registrationState, connection: nextProps.connection, displayName: nextProps.displayName }); } handleMenu(event) { this.callUrl = `${config.publicUrl}/call/${this.state.accountId}`; switch (event) { case 'about': this.toggleAboutModal(); break; case 'callMeMaybe': this.toggleCallMeMaybeModal(); break; case 'displayName': this.toggleEditDisplayNameModal(); break; case 'speakerphone': this.props.toggleSpeakerPhone(); break; case 'logOut': this.props.logout(); break; case 'preview': this.props.preview(); break; case 'checkUpdate': if (Platform.OS === 'android') { Linking.openURL('https://play.google.com/store/apps/details?id=com.agprojects.sylk'); } else { Linking.openURL('https://apps.apple.com/us/app/id1489960733'); } break; case 'settings': Linking.openURL(config.serverSettingsUrl); break; default: break; } this.setState({menuVisible: false}); } saveDisplayName(displayName) { if (!displayName) { return; } this.setState({displayName: displayName}); this.props.saveDisplayName(this.state.accountId, displayName); } toggleMute() { this.setState(prevState => ({mute: !prevState.mute})); this.props.toggleMute(); } toggleAboutModal() { this.setState({showAboutModal: !this.state.showAboutModal}); } toggleCallMeMaybeModal() { this.setState({showCallMeMaybeModal: !this.state.showCallMeMaybeModal}); } toggleEditDisplayNameModal() { this.setState({showEditDisplayNameModal: !this.state.showEditDisplayNameModal}); } 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 statusColor = 'green'; statusIcon = 'check-circle'; if (!this.state.connection || this.state.connection.state !== 'ready') { statusIcon = 'alert-circle'; statusColor = 'red'; } else if (this.state.registrationState !== 'registered') { statusIcon = 'alert-circle'; statusColor = 'orange'; } let callUrl = callUrl = config.publicUrl + "/call/" + this.state.accountId; let subtitle = 'Signed in as ' + this.state.accountId; // this.handleMenu('speakerphone')} icon="speaker" title="Toggle speakerphone" /> 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('displayName')} icon="rename-box" title="My display name" /> - this.handleMenu('settings')} icon="wrench" title="Server settings" /> - this.handleMenu('checkUpdate')} icon="update" title="Update me" /> + this.handleMenu('settings')} icon="wrench" title="Server settings..." /> + this.handleMenu('checkUpdate')} icon="update" title="Check for updates..." /> this.handleMenu('logOut')} icon="logout" title="Sign out" /> ); } } NavigationBar.propTypes = { notificationCenter : PropTypes.func.isRequired, logout : PropTypes.func.isRequired, preview : PropTypes.func.isRequired, toggleSpeakerPhone : PropTypes.func.isRequired, saveDisplayName : PropTypes.func.isRequired, displayName : PropTypes.string, account : PropTypes.object, connection : PropTypes.object, toggleMute : PropTypes.func, orientation : PropTypes.string, isTablet : PropTypes.bool }; export default NavigationBar;