No OneTemporary
Actions

Size

40 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/app/components/HistoryCard.js b/app/components/HistoryCard.js
	index 049cf2b..4072e7b 100644
	--- a/app/components/HistoryCard.js
	+++ b/app/components/HistoryCard.js
	@@ -1,310 +1,311 @@
	import React, { Component} from 'react';
	import { View, SafeAreaView, FlatList } from 'react-native';
	import autoBind from 'auto-bind';
	import PropTypes from 'prop-types';
	import moment from 'moment';
	import momentFormat from 'moment-duration-format';
	import { Card, IconButton, Button, Caption, Title, Subheading, List, Text} from 'react-native-paper';
	import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
	import uuid from 'react-native-uuid';

	import styles from '../assets/styles/blink/_HistoryCard.scss';

	import UserIcon from './UserIcon';


	function toTitleCase(str) {
	return str.replace(
	/\w\S*/g,
	function(txt) {
	return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
	}
	);
	}

	const Item = ({ nr, uri, displayName }) => (
	<View style={styles.participantView}>
	{displayName !== uri?
	<Text style={styles.participant}>{nr}. {displayName} ({uri})</Text>
	:
	<Text style={styles.participant}>{nr}. {uri}</Text>
	}

	</View>
	);

	const renderItem = ({ item }) => (
	<Item nr={item.nr} uri={item.uri} displayName={item.displayName}/>
	);



	class HistoryCard extends Component {
	constructor(props) {
	super(props);
	autoBind(this);

	this.state = {
	id: this.props.contact.id,
	displayName: this.props.contact.displayName,
	uri: this.props.contact.remoteParty,
	participants: this.props.contact.participants,
	conference: this.props.contact.conference,
	type: this.props.contact.type,
	photo: this.props.contact.photo,
	label: this.props.contact.label,
	orientation: this.props.orientation,
	isTablet: this.props.isTablet,
	favorite: (this.props.contact.tags.indexOf('favorite') > -1)? true : false,
	blocked: (this.props.contact.tags.indexOf('blocked') > -1)? true : false
	}
	}

	shouldComponentUpdate(nextProps) {
	//https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b
	return true;
	}

	handleParticipant() {
	}

	findObjectByKey(array, key, value) {
	for (var i = 0; i < array.length; i++) {
	if (array[i][key] === value) {
	return array[i];
	}
	}
	return null;
	}

	setBlockedUri() {
	let newBlockedState = this.props.setBlockedUri(this.state.uri);
	this.setState({blocked: newBlockedState});
	}

	deleteHistoryEntry() {
	this.props.deleteHistoryEntry(this.state.uri);
	}

	setFavoriteUri() {
	let newFavoriteState = this.props.setFavoriteUri(this.state.uri);
	this.setState({favorite: newFavoriteState});
	}

	setTargetUri(uri, contact) {
	if (this.isAnonymous(this.state.uri)) {
	return;
	}

	this.props.setTargetUri(this.state.uri, this.props.contact);
	}

	isAnonymous(uri) {
	if (uri.search('@guest.') > -1 \|\| uri.search('@anonymous.') > -1) {
	return true
	}

	return false;
	}

	render () {
	let containerClass = styles.portraitContainer;
	let cardClass = styles.card;
	//console.log('Render card', this.state.uri, this.state.orientation);

	let showActions = this.props.contact.showActions && this.props.contact.tags.indexOf('test') === -1;

	let uri = this.state.uri;
	let displayName = this.state.displayName;

	let buttonMode = 'text';
	let showBlockButton = uri.search('@videoconference.') === -1 ? true : false;
	let showFavoriteButton = true;
	let showDeleteButton = this.props.contact.tags.indexOf('local') > -1 ? true: false;
	let blockTextbutton = 'Block';
	let favoriteTextbutton = 'Favorite';
	let deleteTextbutton = 'Delete';
	let participantsData = [];

	if (this.isAnonymous(uri)) {
	uri = 'anonymous@anonymous.invalid';
	displayName = displayName + ' - from the Web';
	let showFavoriteButton = false;
	}

	if (this.state.favorite) {
	favoriteTextbutton = 'Remove favorite';
	if (!this.state.blocked) {
	showBlockButton = false;
	}
	}

	if (uri.search('3333@') === -1) {
	showBlockButton = false;
	}

	if (uri.search('4444@') === -1) {
	showBlockButton = false;
	}

	if (displayName === 'Myself') {
	showBlockButton = false;
	}

	if (this.state.blocked) {
	blockTextbutton = 'Unblock';
	showFavoriteButton = false;
	}

	if (this.state.isTablet) {
	containerClass = (this.state.orientation === 'landscape') ? styles.landscapeTabletContainer : styles.portraitTabletContainer;
	} else {
	containerClass = (this.state.orientation === 'landscape') ? styles.landscapeContainer : styles.portraitContainer;
	}

	if (showActions) {
	cardClass = styles.expandedCard;
	}

	let color = {};

	let title = displayName \|\| uri.split('@')[0];
	let subtitle = uri;
	let description = this.props.contact.startTime;

	if (displayName === uri) {
	title = toTitleCase(uri.split('@')[0]);
	}

	if (this.state.type === 'history') {
	let duration = moment.duration(this.props.contact.duration, 'seconds').format('hh:mm:ss', {trim: false});

	if (this.props.contact.direction === 'received' && this.props.contact.duration === 0) {
	color.color = '#a94442';
	duration = 'missed';
	} else if (this.props.contact.direction === 'placed' && this.props.contact.duration === 0) {
	duration = 'cancelled';
	}

	if (this.state.conference) {
	if (this.state.participants && this.state.participants.length) {
	if (!showActions) {
	subtitle = 'With ' + this.state.participants.length + ' participants';
	} else {
	let i = 1;
	let contact_obj;
	let dn;
	+ let _item;
	this.state.participants.forEach((participant) => {
	contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', participant);
	dn = contact_obj ? contact_obj.displayName : participant;
	- let _item = {nr: i, id: uuid.v4(), uri: participant, displayName: dn};
	+ _item = {nr: i, id: uuid.v4(), uri: participant, displayName: dn};
	participantsData.push(_item);
	i = i + 1;
	});
	}
	} else {
	subtitle = 'No participants';
	}
	}

	if (!displayName) {
	title = uri;
	if (duration === 'missed') {
	subtitle = 'Last call missed';
	} else if (duration === 'cancelled') {
	subtitle = 'Last call cancelled';
	} else {
	subtitle = 'Last call duration ' + duration ;
	}
	}

	description = description + ' (' + duration + ')';

	return (
	<Card
	onPress={() => {this.setTargetUri(uri, this.props.contact)}}
	style={[containerClass, cardClass]}
	>
	<Card.Content style={styles.content}>
	<View style={styles.mainContent}>
	<Title noWrap style={color}>{title}</Title>
	<Subheading noWrap style={color}>{subtitle}</Subheading>
	<Caption color="textSecondary">
	<Icon name={this.props.contact.direction == 'received' ? 'arrow-bottom-left' : 'arrow-top-right'}/>{description}
	</Caption>
	{this.state.participants && this.state.participants.length ?
	<SafeAreaView>
	<Title noWrap style={color}>Participants:</Title>
	<FlatList
	horizontal={false}
	data={participantsData}
	renderItem={renderItem}
	keyExtractor={item => item.id}
	/>
	</SafeAreaView>
	: null}

	</View>
	<View style={styles.userAvatarContent}>
	<UserIcon style={styles.userIcon} identity={this.state}/>
	</View>
	</Card.Content>
	{showActions ?
	<View style={styles.buttonContainer}>
	<Card.Actions>
	{showDeleteButton? <Button mode={buttonMode} style={styles.button} onPress={() => {this.deleteHistoryEntry()}}>{deleteTextbutton}</Button>: null}
	{showBlockButton? <Button mode={buttonMode} style={styles.button} onPress={() => {this.setBlockedUri()}}>{blockTextbutton}</Button>: null}
	{showFavoriteButton?<Button mode={buttonMode} style={styles.button} onPress={() => {this.setFavoriteUri()}}>{favoriteTextbutton}</Button>: null}
	</Card.Actions>
	</View>
	: null}
	</Card>
	);

	} else {

	return (
	<Card
	onPress={() => {this.props.setTargetUri(uri, this.props.contact)}}
	style={[containerClass, cardClass]}
	>
	<Card.Content style={styles.content}>
	<View style={styles.mainContent}>
	<Title noWrap style={color}>{title}</Title>
	<Subheading noWrap style={color}>{uri}</Subheading>
	<Caption color="textSecondary">
	{this.state.label}
	</Caption>
	</View>
	<View style={styles.userAvatarContent}>
	<UserIcon style={styles.userIcon} identity={this.state}/>
	</View>
	</Card.Content>
	{showActions ?
	<View style={styles.buttonContainer}>
	<Card.Actions>
	{showBlockButton? <Button mode={buttonMode} style={styles.button} onPress={() => {this.setBlockedUri()}}>{blockTextbutton}</Button>: null}
	{showFavoriteButton?<Button mode={buttonMode} style={styles.button} onPress={() => {this.setFavoriteUri()}}>{favoriteTextbutton}</Button>: null}
	</Card.Actions>
	</View>
	: null}
	</Card>
	);
	}
	}
	}

	HistoryCard.propTypes = {
	id : PropTypes.string,
	contact : PropTypes.object,
	setTargetUri : PropTypes.func,
	setBlockedUri : PropTypes.func,
	setFavoriteUri : PropTypes.func,
	deleteHistoryEntry : PropTypes.func,
	orientation : PropTypes.string,
	isTablet : PropTypes.bool,
	contacts : PropTypes.array
	};


	export default HistoryCard;
	diff --git a/app/components/HistoryTileBox.js b/app/components/HistoryTileBox.js
	index 8b012fb..153a1d4 100644
	--- a/app/components/HistoryTileBox.js
	+++ b/app/components/HistoryTileBox.js
	@@ -1,376 +1,425 @@
	import React, { Component} from 'react';
	import autoBind from 'auto-bind';

	import PropTypes from 'prop-types';
	import { SafeAreaView, ScrollView, View, FlatList, Text } from 'react-native';

	import HistoryCard from './HistoryCard';
	import utils from '../utils';
	import DigestAuthRequest from 'digest-auth-request';
	import uuid from 'react-native-uuid';

	import styles from '../assets/styles/blink/_HistoryTileBox.scss';


	class HistoryTileBox extends Component {
	constructor(props) {
	super(props);
	autoBind(this);

	this.state = {
	serverHistory: this.props.serverHistory,
	localHistory: this.props.localHistory,
	accountId: this.props.account.id,
	password: this.props.password,
	targetUri: this.props.targetUri,
	favoriteUris: this.props.favoriteUris,
	blockedUris: this.props.blockedUris
	}

	const echoTest = {
	remoteParty: '4444@sylk.link',
	displayName: 'Echo test',
	type: 'contact',
	label: 'Call to test microphone',
	id: uuid.v4(),
	tags: ['test']
	};

	this.echoTest = Object.assign({}, echoTest);

	const videoTest = {
	remoteParty: '3333@sylk.link',
	displayName: 'Video test',
	type: 'contact',
	label: 'Call to test video',
	id: uuid.v4(),
	tags: ['test']
	};

	this.videoTest = Object.assign({}, videoTest);
	}

	componentDidMount() {
	this.getServerHistory();
	}

	setTargetUri(uri, contact) {
	//console.log('Set target uri uri in history list', uri);
	this.props.setTargetUri(uri, contact);
	}

	deleteHistoryEntry(uri) {
	this.props.deleteHistoryEntry(uri);
	this.props.setTargetUri(uri);
	}

	setFavoriteUri(uri) {
	return this.props.setFavoriteUri(uri);
	+ this.props.setTargetUri();
	}

	setBlockedUri(uri) {
	return this.props.setBlockedUri(uri);
	}

	renderItem(item) {
	return(
	<HistoryCard
	id={item.id}
	contact={item.item}
	setFavoriteUri={this.setFavoriteUri}
	setBlockedUri={this.setBlockedUri}
	deleteHistoryEntry={this.deleteHistoryEntry}
	setTargetUri={this.setTargetUri}
	orientation={this.props.orientation}
	isTablet={this.props.isTablet}
	contacts={this.props.contacts}
	/>);
	}

	findObjectByKey(array, key, value) {
	for (var i = 0; i < array.length; i++) {
	if (array[i][key] === value) {
	return array[i];
	}
	}
	return null;
	}

	//getDerivedStateFromProps(nextProps, state) {
	UNSAFE_componentWillReceiveProps(props) {
	const { refreshHistory } = this.props;
	if (props.refreshHistory !== refreshHistory) {
	this.getServerHistory();
	}
	}

	getLocalHistory() {

	let history = this.state.localHistory;
	history.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1)

	let known = [];
	history = history.filter((elem) => {
	if (known.indexOf(elem.remoteParty) <= -1) {
	elem.type = 'history';
	if (!elem.tags) {
	elem.tags = [];
	}
	if (elem.tags.indexOf('history') === -1) {
	elem.tags.push('history');
	}
	if (elem.tags.indexOf('local') === -1) {
	elem.tags.push('local');
	}
	known.push(elem.remoteParty);
	return elem;
	}
	});

	return history;
	}

	+ getFavoriteContacts() {
	+ let favoriteContacts = [];
	+ let contact_obj;
	+ let displayName;
	+ let label;
	+ let media;
	+ let conference;
	+
	+ this.state.favoriteUris.forEach((uri) => {
	+ contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', uri);
	+ displayName = contact_obj ? contact_obj.displayName : uri;
	+ label = contact_obj ? contact_obj.label: null;
	+ media = ['audio'];
	+ conference = false;
	+
	+ if (uri.indexOf('@videoconference.') > -1) {
	+ displayName = 'Conference ' + uri.split('@')[0];
	+ uri = uri.split('@')[0] + '@' + this.props.config.defaultConferenceDomain;
	+ conference = true;
	+ media = ['audio', 'video', 'chat'];
	+ }
	+
	+ const item = {
	+ remoteParty: uri,
	+ displayName: displayName,
	+ conference: conference,
	+ media: media,
	+ type: 'contact',
	+ label: label,
	+ id: uuid.v4(),
	+ tags: ['favorite']
	+ };
	+ favoriteContacts.push(item);
	+ });
	+
	+ return favoriteContacts;
	+ }
	+
	getServerHistory() {
	utils.timestampedLog('Requesting call history from server');
	this.props.localHistory.forEach((item) => {
	if (!item.tags) {
	item.tags = ['local'];
	} else if (item.tags.indexOf('local') === -1) {
	item.tags.push('local');
	}
	});

	//let history = this.props.localHistory;
	let history = [];
	let getServerCallHistory = new DigestAuthRequest(
	'GET',
	`${this.props.config.serverCallHistoryUrl}?action=get_history&realm=${this.state.accountId.split('@')[1]}`,
	this.state.accountId.split('@')[0],
	this.state.password
	);

	// Disable logging
	getServerCallHistory.loggingOn = false;
	getServerCallHistory.request((data) => {
	if (data.success !== undefined && data.success === false) {
	console.log('Error getting call history from server', data.error_message);
	return;
	}

	if (data.placed) {
	data.placed.map(elem => {elem.direction = 'placed'; return elem});
	history = history.concat(data.placed);
	}

	if (data.received) {
	data.received.map(elem => {elem.direction = 'received'; return elem});
	history = history.concat(data.received);
	}

	if (history) {
	history.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1)

	const known = [];
	history = history.filter((elem) => {
	elem.conference = false;
	if (!elem.tags) {
	elem.tags = [];
	}

	if (elem.remoteParty.indexOf('@conference.sip2sip.info') > -1) {
	return null;
	}

	let username = elem.remoteParty.split('@')[0];
	let isPhoneNumber = username.match(/^(\+\|0)(\d+)$/);
	let contact_obj;

	if (this.props.contacts) {
	if (isPhoneNumber) {
	contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username);
	} else {
	contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', elem.remoteParty);
	}
	}

	if (contact_obj) {
	elem.displayName = contact_obj.displayName;
	elem.photo = contact_obj.photo;
	if (isPhoneNumber) {
	elem.remoteParty = username;
	}
	// TODO update icon here
	} else {
	elem.photo = null;
	}

	if (elem.remoteParty.indexOf('@videoconference.') > -1) {
	elem.displayName = 'Conference ' + elem.remoteParty.split('@')[0];
	elem.remoteParty = elem.remoteParty.split('@')[0] + '@' + this.props.config.defaultConferenceDomain;
	elem.conference = true;
	elem.media = ['audio', 'video', 'chat'];
	}

	if (elem.remoteParty === this.state.accountId) {
	elem.displayName = this.props.myDisplayName \|\| 'Myself';
	}

	if (known.indexOf(elem.remoteParty) <= -1) {
	elem.type = 'history';
	elem.id = uuid.v4();
	if (elem.tags.indexOf('history') === -1) {
	elem.tags.push('history');
	}

	elem.label = elem.direction;

	if (!elem.displayName) {
	elem.displayName = elem.remoteParty;
	}

	if (!elem.media \|\| !Array.isArray(elem.media)) {
	elem.media = ['audio'];
	}

	if (elem.remoteParty.indexOf('3333@') > -1) {
	// see Call.js as well if we change this
	elem.displayName = 'Video Test';
	}
	if (elem.remoteParty.indexOf('4444@') > -1) {
	// see Call.js as well if we change this
	elem.displayName = 'Echo Test';
	}

	known.push(elem.remoteParty);
	return elem;
	}
	});

	this.props.cacheHistory(history);
	this.setState({history: history});
	}
	}, (errorCode) => {
	console.log('Error getting call history from server', errorCode);
	});

	}

	render() {
	- //console.log('Render history');
	+ console.log('Render history');
	// TODO: render blocked and favorites also when there is no history

	- let localHistory = this.getLocalHistory();
	+ console.log('Favorite URIs', this.state.favoriteUris);

	- let history = localHistory.concat(this.state.serverHistory);
	-
	- let items = history.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
	+ let history = [];
	+ let searchExtraItems = [];
	+ let items= []

	- let searchExtraItems = this.props.contacts;
	+ if (this.props.filter === 'favorite') {
	+ let favoriteContact = this.getFavoriteContacts();
	+ items = favoriteContact.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));

	- if (!this.props.targetUri) {
	- if (!this.findObjectByKey(items, 'remoteParty', this.echoTest.remoteParty)) {
	- items.push(this.echoTest);
	+ } else {
	+ let localHistory = this.getLocalHistory();
	+ history = localHistory.concat(this.state.serverHistory);
	+ searchExtraItems = this.props.contacts;
	+ items = history.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
	+
	+ if (!this.props.targetUri && !this.props.filter) {
	+ if (!this.findObjectByKey(items, 'remoteParty', this.echoTest.remoteParty)) {
	+ items.push(this.echoTest);
	+ }
	+ if (!this.findObjectByKey(items, 'remoteParty', this.videoTest.remoteParty)) {
	+ items.push(this.videoTest);
	+ }
	}
	- if (!this.findObjectByKey(items, 'remoteParty', this.videoTest.remoteParty)) {
	- items.push(this.videoTest);
	+
	+ let matchedContacts = [];
	+ if (this.props.targetUri && this.props.targetUri.length > 2 && !this.props.selectedContact) {
	+ matchedContacts = searchExtraItems.filter(contact => (contact.remoteParty.toLowerCase().search(this.props.targetUri) > -1 \|\| contact.displayName.toLowerCase().search(this.props.targetUri) > -1));
	+ } else if (this.props.selectedContact && this.props.selectedContact.type === 'contact') {
	+ matchedContacts.push(this.props.selectedContact);
	}
	- }

	- let matchedContacts = [];
	- if (this.props.targetUri && this.props.targetUri.length > 2 && !this.props.selectedContact) {
	- matchedContacts = searchExtraItems.filter(contact => (contact.remoteParty.toLowerCase().search(this.props.targetUri) > -1 \|\| contact.displayName.toLowerCase().search(this.props.targetUri) > -1));
	- } else if (this.props.selectedContact && this.props.selectedContact.type === 'contact') {
	- matchedContacts.push(this.props.selectedContact);
	+ items = items.concat(matchedContacts);
	}

	- items = items.concat(matchedContacts);
	-
	items.forEach((item) => {
	item.showActions = false;
	+
	if (!item.tags) {
	item.tags = [];
	}
	if (this.state.favoriteUris.indexOf(item.remoteParty) > -1 && item.tags.indexOf('favorite') === -1) {
	item.tags.push('favorite');
	}
	if (this.state.blockedUris.indexOf(item.remoteParty) > -1 && item.tags.indexOf('blocked') === -1) {
	item.tags.push('blocked');
	}

	let idx = item.tags.indexOf('blocked');

	if (this.state.blockedUris.indexOf(item.remoteParty) === -1 && idx > -1) {
	item.tags.splice(idx, 1);
	}

	idx = item.tags.indexOf('favorite');

	if (this.state.favoriteUris.indexOf(item.remoteParty) === -1 && idx > -1) {
	item.tags.splice(idx, 1);
	}

	});

	if (this.props.filter) {
	let filteredItems = [];
	items.forEach((item) => {
	if (item.tags.indexOf(this.props.filter) > -1) {
	filteredItems.push(item);
	}
	});
	items = filteredItems;
	}

	if (items.length === 1) {
	items[0].showActions = true;
	}

	let columns = 1;

	if (this.props.isTablet) {
	columns = this.props.orientation === 'landscape' ? 3 : 2;
	} else {
	columns = this.props.orientation === 'landscape' ? 2 : 1;
	}

	return (
	<SafeAreaView style={styles.container}>
	<FlatList
	horizontal={false}
	numColumns={columns}
	data={items}
	renderItem={this.renderItem}
	keyExtractor={item => item.id}
	key={this.props.orientation}
	/>
	</SafeAreaView>
	);
	}
	}

	HistoryTileBox.propTypes = {
	account : PropTypes.object.isRequired,
	password : PropTypes.string.isRequired,
	config : PropTypes.object.isRequired,
	targetUri : PropTypes.string,
	selectedContact : PropTypes.object,
	contacts : PropTypes.array,
	orientation : PropTypes.string,
	setTargetUri : PropTypes.func,
	isTablet : PropTypes.bool,
	refreshHistory : PropTypes.bool,
	cacheHistory : PropTypes.func,
	serverHistory : PropTypes.array,
	localHistory : PropTypes.array,
	myDisplayName : PropTypes.string,
	myPhoneNumber : PropTypes.string,
	setFavoriteUri : PropTypes.func,
	setBlockedUri : PropTypes.func,
	deleteHistoryEntry : PropTypes.func,
	favoriteUris : PropTypes.array,
	blockedUris : PropTypes.array,
	filter : PropTypes.string
	};


	export default HistoryTileBox;
	diff --git a/app/components/ReadyBox.js b/app/components/ReadyBox.js
	index 5e7ab4c..8c942c4 100644
	--- a/app/components/ReadyBox.js
	+++ b/app/components/ReadyBox.js
	@@ -1,280 +1,280 @@
	import React, { Component, Fragment } from 'react';
	import PropTypes from 'prop-types';
	import classNames from 'classnames';
	// import VizSensor = require('react-visibility-sensor').default;
	import autoBind from 'auto-bind';
	import { View, Platform} from 'react-native';
	import { IconButton, Title, Button } from 'react-native-paper';

	import ConferenceModal from './ConferenceModal';
	import HistoryTileBox from './HistoryTileBox';
	import FooterBox from './FooterBox';
	import URIInput from './URIInput';
	import config from '../config';
	import utils from '../utils';

	import styles from '../assets/styles/blink/_ReadyBox.scss';

	class ReadyBox extends Component {
	constructor(props) {
	super(props);
	autoBind(this);

	this.state = {
	targetUri: this.props.missedTargetUri,
	contacts: this.props.contacts,
	selectedContact: null,
	showConferenceModal: false,
	sticky: false,
	favoriteUris: this.props.favoriteUris,
	blockedUris: this.props.blockedUris,
	historyFilter: null
	};
	}

	getTargetUri() {
	const defaultDomain = this.props.account.id.substring(this.props.account.id.indexOf('@') + 1);
	return utils.normalizeUri(this.state.targetUri, defaultDomain);
	}

	async componentDidMount() {
	//console.log('Ready now');
	if (this.state.targetUri) {
	console.log('We must call', this.state.targetUri);
	}
	}

	componentWillReceiveProps(props) {
	this.setState({'filterHistory': null});
	}

	filterHistory(filter) {
	//console.log('set historyFilter', filter);
	this.setState({'historyFilter': filter});
	this.handleTargetChange('');
	}

	handleTargetChange(value, contact) {
	let new_value = value;

	if (contact) {
	if (this.state.targetUri === contact.uri) {
	new_value = '';
	}
	}

	if (this.state.targetUri === value) {
	new_value = '';
	}

	if (new_value === '') {
	contact = null;
	}

	this.setState({targetUri: new_value, selectedContact: contact});
	}

	handleTargetSelect() {
	if (this.props.connection === null) {
	this.props._notificationCenter.postSystemNotification("Server unreachable", {timeout: 2});
	return;
	}
	// the user pressed enter, start a video call by default
	if (this.state.targetUri.endsWith(`@${config.defaultConferenceDomain}`)) {
	this.props.startConference(this.state.targetUri, {audio: true, video: true});
	} else {
	this.props.startCall(this.getTargetUri(), {audio: true, video: true});
	}
	}

	showConferenceModal(event) {
	event.preventDefault();
	if (this.state.targetUri.length !== 0) {
	const uri = `${this.state.targetUri.split('@')[0].replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`;
	this.handleConferenceCall(uri.toLowerCase());
	} else {
	this.setState({showConferenceModal: true});
	}
	}

	handleAudioCall(event) {
	if (this.props.connection === null) {
	this.props._notificationCenter.postSystemNotification("Server unreachable", {timeout: 2});
	return;
	}
	event.preventDefault();
	if (this.state.targetUri.endsWith(`@${config.defaultConferenceDomain}`)) {
	this.props.startConference(this.state.targetUri, {audio: true, video: false});
	} else {
	this.props.startCall(this.getTargetUri(), {audio: true, video: false});
	}
	}

	handleVideoCall(event) {
	if (this.props.connection === null) {
	this.props._notificationCenter.postSystemNotification("Server unreachable", {timeout: 2});
	return;
	}
	event.preventDefault();
	if (this.state.targetUri.endsWith(`@${config.defaultConferenceDomain}`)) {
	this.props.startConference(this.state.targetUri, {audio: true, video: false});
	} else {
	this.props.startCall(this.getTargetUri(), {audio: true, video: true});
	}
	}

	handleConferenceCall(targetUri, options={audio: true, video: true}) {
	if (targetUri) {
	if (!options.video) {
	console.log('ReadyBox: Handle audio only conference call to',targetUri);
	} else {
	console.log('ReadyBox: Handle video conference call to',targetUri);
	}
	this.props.startConference(targetUri, options);
	}

	this.setState({showConferenceModal: false});
	}

	render() {
	//utils.timestampedLog('Render ready');

	const defaultDomain = `${config.defaultDomain}`;

	let uriClass = styles.portraitUriInputBox;
	let uriGroupClass = styles.portraitUriButtonGroup;
	let titleClass = styles.portraitTitle;

	const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;

	if (this.props.isTablet) {
	titleClass = this.props.orientation === 'landscape' ? styles.landscapeTabletTitle : styles.portraitTabletTitle;
	} else {
	titleClass = this.props.orientation === 'landscape' ? styles.landscapeTitle : styles.portraitTitle;
	}

	if (this.props.isTablet) {
	uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriButtonGroup : styles.portraitTabletUriButtonGroup;
	} else {
	uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeUriButtonGroup : styles.portraitUriButtonGroup;
	}

	if (this.props.isTablet) {
	uriClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriInputBox : styles.portraitTabletUriInputBox;
	} else {
	uriClass = this.props.orientation === 'landscape' ? styles.landscapeUriInputBox : styles.portraitUriInputBox;
	}

	const historyClass = this.props.orientation === 'landscape' ? styles.landscapeHistory : styles.portraitHistory;

	return (
	<Fragment>
	<View style={styles.wholeContainer}>
	<View >
	<View style={uriGroupClass}>
	<View style={uriClass}>
	<URIInput
	defaultValue={this.state.targetUri}
	onChange={this.handleTargetChange}
	onSelect={this.handleTargetSelect}
	autoFocus={false}
	/>
	</View>
	<View style={styles.buttonGroup}>
	<IconButton
	style={buttonClass}
	size={34}
	disabled={this.state.targetUri.length === 0}
	onPress={this.handleAudioCall}
	icon="phone"
	/>
	<IconButton
	style={buttonClass}
	size={34}
	disabled={this.state.targetUri.length === 0}
	onPress={this.handleVideoCall}
	icon="video"
	/>
	<IconButton
	style={styles.conferenceButton}
	size={34}
	onPress={this.showConferenceModal}
	icon="account-group"
	/>
	</View>
	</View>
	</View>
	<View style={historyClass}>
	<HistoryTileBox
	contacts={this.state.contacts}
	targetUri={this.state.targetUri}
	orientation={this.props.orientation}
	setTargetUri={this.handleTargetChange}
	selectedContact={this.state.selectedContact}
	isTablet={this.props.isTablet}
	account={this.props.account}
	password={this.props.password}
	config={this.props.config}
	refreshHistory={this.props.refreshHistory}
	localHistory={this.props.localHistory}
	cacheHistory={this.props.cacheHistory}
	serverHistory={this.props.serverHistory}
	myDisplayName={this.props.myDisplayName}
	myPhoneNumber={this.props.myPhoneNumber}
	deleteHistoryEntry={this.props.deleteHistoryEntry}
	setFavoriteUri={this.props.setFavoriteUri}
	setBlockedUri={this.props.setBlockedUri}
	favoriteUris={this.state.favoriteUris}
	blockedUris={this.state.blockedUris}
	filter={this.state.historyFilter}
	/>
	</View>
	- {(this.state.favoriteUris.length > 0 \|\| this.state.blockedUris.length > 0) ?
	+ {((this.state.favoriteUris.length > 0 \|\| this.state.blockedUris.length > 0 )\|\| (this.state.favoriteUris.length === 0 && this.state.historyFilter === 'favorite')) ?
	<View style={styles.historyButtonGroup}>
	<Button style={styles.historyButton} onPress={() => {this.filterHistory(null)}}>Show all</Button>
	{(this.state.favoriteUris.length > 0 && this.state.historyFilter !== 'favorite')? <Button style={styles.historyButton} onPress={() => {this.filterHistory('favorite')}}>Favorites</Button> : null}
	{(this.state.blockedUris.length > 0 && this.state.historyFilter !== 'blocked')? <Button style={styles.historyButton} onPress={() => {this.filterHistory('blocked')}}>Blocked</Button> : null}
	</View>
	: null}
	{this.props.isTablet && 0?
	<View style={styles.footer}>
	<FooterBox />
	</View>
	: null}
	</View>
	<ConferenceModal
	show={this.state.showConferenceModal}
	targetUri={this.state.targetUri}
	handleConferenceCall={this.handleConferenceCall}
	/>
	</Fragment>
	);
	}
	}


	ReadyBox.propTypes = {
	account : PropTypes.object.isRequired,
	password : PropTypes.string.isRequired,
	config : PropTypes.object.isRequired,
	startCall : PropTypes.func.isRequired,
	startConference : PropTypes.func.isRequired,
	missedTargetUri : PropTypes.string,
	contacts : PropTypes.array,
	orientation : PropTypes.string,
	isTablet : PropTypes.bool,
	refreshHistory : PropTypes.bool,
	cacheHistory : PropTypes.func,
	serverHistory : PropTypes.array,
	localHistory : PropTypes.array,
	myDisplayName : PropTypes.string,
	myPhoneNumber : PropTypes.string,
	deleteHistoryEntry: PropTypes.func,
	setFavoriteUri : PropTypes.func,
	setBlockedUri : PropTypes.func,
	favoriteUris : PropTypes.array,
	blockedUris : PropTypes.array
	};


	export default ReadyBox;

File Metadata

Mime Type: text/x-diff
Expires: Sat, Nov 23, 2:04 PM (1 d, 4 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 3409201
Default Alt Text: (40 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions