diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js index cd3f363..0f5c818 100644 --- a/app/components/CallOverlay.js +++ b/app/components/CallOverlay.js @@ -1,183 +1,186 @@ import React from 'react'; import { View, Text } from 'react-native'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import autoBind from 'auto-bind'; import { Appbar } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { ActivityIndicator, Colors } from 'react-native-paper'; import styles from '../assets/styles/blink/_AudioCallBox.scss'; function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class CallOverlay extends React.Component { constructor(props) { super(props); autoBind(this); this.state = { callState: null, call: this.props.call, direction: this.props.call ? this.props.call.direction : 'outgoing' } this.duration = null; this.finalDuration = null; this.timer = null; this._isMounted = true; this.reconnecting = false; } componentDidMount() { if (this.state.call) { if (this.state.call.state === 'established') { this.startTimer(); } this.state.call.on('stateChanged', this.callStateChanged); this.setState({callState: this.state.call.state}); } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.call && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call}); } } componentWillUnmount() { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this._isMounted = false; clearTimeout(this.timer); } callStateChanged(oldState, newState, data) { if (newState === 'established' && this._isMounted) { this.startTimer(); } if (newState === 'terminated') { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); this.finalDuration = this.duration; this.duration = null; this.timer = null; } this.setState({callState: newState}); } startTimer() { if (this.timer !== null) { // already armed return; } // TODO: consider using window.requestAnimationFrame const startTime = new Date(); this.timer = setInterval(() => { this.duration = moment.duration(new Date() - startTime).format('hh:mm:ss', {trim: false}); if (this.props.show) { this.forceUpdate(); } }, 300); } render() { /* console.log('Render call overlay with call state', this.state.callState); if (this.props.connection) { console.log('Connection state', this.props.connection.state); } */ let header = null; let displayName = this.props.remoteUri; if (this.props.remoteDisplayName && this.props.remoteDisplayName !== this.props.remoteUri) { displayName = this.props.remoteDisplayName; } if (this.props.show) { let callDetail; if (this.duration) { callDetail = {this.duration}; callDetail = 'Duration:' + this.duration; } else { if (this.finalDuration && (!this.props.connection || this.props.connection.state !== 'ready' || !this.props.accountId)) { if (this.state.callState && this.state.callState === 'terminated') { callDetail = 'Restoring the conversation...'; this.reconnecting = true; } else { callDetail = 'Waiting for connection...'; } } else { - if (this.state.callState === 'terminated' && this.finalDuration) { - callDetail = 'Call ended after ' + this.finalDuration; + if (this.state.callState === 'terminated') { + callDetail = 'Call ended'; + if (this.finalDuration) { + callDetail = callDetail + ' after ' + this.finalDuration; + } } else { callDetail = this.state.callState ? toTitleCase(this.state.callState) : 'Connecting...'; } } } if (this.props.remoteUri.search('videoconference') > -1) { displayName = this.props.remoteUri.split('@')[0]; header = ( ); } else { header = ( ); } } return header } } CallOverlay.propTypes = { show: PropTypes.bool.isRequired, remoteUri: PropTypes.string.isRequired, remoteDisplayName: PropTypes.string, accountId: PropTypes.string, call: PropTypes.object, connection: PropTypes.object }; export default CallOverlay;