diff --git a/app/app.js b/app/app.js
index 5451270..c478ad9 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,2141 +1,2129 @@
 import React, { Component, Fragment } from 'react';
 import { Alert, View, SafeAreaView, ImageBackground, AppState, Linking, Platform, StyleSheet} from 'react-native';
 import { DeviceEventEmitter } from 'react-native';
 import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
 import { BreadProvider } from "material-bread";
 import { registerGlobals } from 'react-native-webrtc';
 import { Router, Route, Link, Switch } from 'react-router-native';
 import history from './history';
 import Logger from "../Logger";
 import autoBind from 'auto-bind';
 import { firebase } from '@react-native-firebase/messaging';
 import VoipPushNotification from 'react-native-voip-push-notification';
 import uuid from 'react-native-uuid';
 import { getUniqueId, getBundleId, isTablet, getPhoneNumber} from 'react-native-device-info';
 import RNDrawOverlay from 'react-native-draw-overlay';
 import PushNotificationIOS from "@react-native-community/push-notification-ios";
 import Contacts from 'react-native-contacts';
 
 registerGlobals();
 
 import * as sylkrtc from 'react-native-sylkrtc';
 import InCallManager from 'react-native-incall-manager';
 import RNCallKeep, { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep';
 
 import RegisterBox from './components/RegisterBox';
 import ReadyBox from './components/ReadyBox';
 import Call from './components/Call';
 import CallByUriBox from './components/CallByUriBox';
 import Conference from './components/Conference';
 import ConferenceByUriBox from './components/ConferenceByUriBox';
 // import AudioPlayer from './components/AudioPlayer';
 // import ErrorPanel from './components/ErrorPanel';
 import FooterBox from './components/FooterBox';
 import StatusBox from './components/StatusBox';
 import IncomingCallModal from './components/IncomingCallModal';
 import NotificationCenter from './components/NotificationCenter';
 import LoadingScreen from './components/LoadingScreen';
 import NavigationBar from './components/NavigationBar';
 import Preview from './components/Preview';
 import CallManager from "./CallManager";
 
 import utils from './utils';
 import config from './config';
 import storage from './storage';
 
 import styles from './assets/styles/blink/root.scss';
 const backgroundImage = require('./assets/images/dark_linen.png');
 
 const logger = new Logger("App");
 
 function checkIosPermissions() {
     return new Promise(resolve => PushNotificationIOS.checkPermissions(resolve));
   }
 
 const theme = {
     ...DefaultTheme,
     dark: true,
     roundness: 2,
     colors: {
         ...DefaultTheme.colors,
        primary: '#337ab7',
     //   accent: '#f1c40f',
     },
 };
 
 let bundleId = `${getBundleId()}`;
 const deviceId = getUniqueId();
 
 const version = '1.0.0';
 
 
 if (Platform.OS == 'ios') {
     bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`;
     // bundleId = `${bundleId}.dev`;
 }
 
 const mainStyle = StyleSheet.create({
 
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 0
  }
 });
 
 // Application modes
 const MODE_NORMAL           = Symbol('mode-normal');
 const MODE_PRIVATE          = Symbol('mode-private');
 const MODE_GUEST_CALL       = Symbol('mode-guest-call');
 const MODE_GUEST_CONFERENCE = Symbol('mode-guest-conference');
 
 
 class Sylk extends Component {
     constructor() {
         super();
         autoBind(this)
         this._loaded = false;
         this._initialSstate = {
             accountId: '',
             password: '',
             displayName: '',
             account: null,
             registrationState: null,
             registrationKeepalive: false,
             inboundCall: null,
             currentCall: null,
             isConference: false,
             connection: null,
             showIncomingModal: false,
             showScreenSharingModal: false,
             status: null,
             targetUri: '',
             missedTargetUri: '',
             loading: null,
             mode: MODE_PRIVATE,
             localMedia: null,
             generatedVideoTrack: false,
             contacts: [],
             devices: {},
             speakerPhoneEnabled: null,
             orientation : 'portrait',
             Height_Layout : '',
             Width_Layout : '',
             outgoingCallUUID: null,
             outgoingMedia: null,
             hardware: '',
             phoneNumber: '',
             isTablet: isTablet(),
             refreshHistory: false,
             myDisplayName: null,
             myPhoneNumber: null,
             localHistory: [],
             favoriteUris: [],
             blockedUris: [],
             initialUrl: null
         };
 
         this.currentRoute = null;
         this.pushtoken = null;
         this.pushkittoken = null;
         this.intercomDtmfTone = null;
         this.registrationFailureTimer = null;
 
         this.cachedHistory = []; // used for caching server history
 
         this.state = Object.assign({}, this._initialSstate);
 
         this.myParticipants = {};
         this.myInvitedParties = {};
 
         this._historyConferenceParticipants = new Map(); // for saving to local history
 
         this.__notificationCenter = null;
 
         this.participantsToInvite = null;
         this.redirectTo = null;
         this.prevPath = null;
         this.shouldUseHashRouting = false;
         this.muteIncoming = false;
 
         storage.initialize();
 
         this._callKeepManager = new CallManager(RNCallKeep, this.acceptCall, this.rejectCall, this.hangupCall, this.timeoutCall, this.callKeepStartConference, this.startCallFromCallKeeper);
 
         if (InCallManager.recordPermission !== 'granted') {
             InCallManager.requestRecordPermission()
             .then((requestedRecordPermissionResult) => {
                 console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult);
             })
             .catch((err) => {
                 console.log("InCallManager.requestRecordPermission() catch: ", err);
             });
         }
 
-
         // Load camera/mic preferences
         storage.get('devices').then((devices) => {
             if (devices) {
                 this.setState({devices: devices});
             }
         });
 
         storage.get('history').then((history) => {
             if (history) {
                 console.log('Loaded', history.length, 'local history entries');
                 this.setState({localHistory: history});
             } else {
                 console.log('Loaded 0 local history entries');
             }
         });
 
         storage.get('cachedHistory').then((history) => {
             if (history) {
                 console.log('Loaded', history.length, 'cached history entries');
                 this.cachedHistory = history;
             }
         });
 
         storage.get('myParticipants').then((myParticipants) => {
             if (myParticipants) {
                 this.myParticipants = myParticipants;
                 console.log('My participants', this.myParticipants);
             }
         });
 
         storage.get('myInvitedParties').then((myInvitedParties) => {
             if (myInvitedParties) {
                 this.myInvitedParties = myInvitedParties;
                 console.log('My invited parties', this.myInvitedParties);
             }
         });
 
         storage.get('favoriteUris').then((favoriteUris) => {
             if (favoriteUris) {
                 this.setState({favoriteUris: favoriteUris});
                 console.log('My favorite Uris', favoriteUris);
             }
         });
 
         storage.get('blockedUris').then((blockedUris) => {
             if (blockedUris) {
                 this.setState({blockedUris: blockedUris});
                 console.log('My blocked Uris', blockedUris);
             }
         });
 
     }
 
     async loadContacts() {
         Contacts.checkPermission((err, permission) => {
             if (permission === Contacts.PERMISSION_UNDEFINED) {
               Contacts.requestPermission((err, requestedContactsPermissionResult) => {
                 if (err) {
                     console.log("Contacts.requestPermission()catch: ", err);
                 }
                 console.log("Contacts.requestPermission() requestPermission: ", requestedContactsPermissionResult);
               })
             }
           })
 
           Contacts.getAll((err, contacts) => {
             if (err === 'denied'){
                 console.log('Access to contacts denied')
             } else {
                 // contacts returned in Array
                 let contact_cards = [];
                 let name;
                 let photo;
 
                 let seen_uris = new Map();
 
                 var arrayLength = contacts.length;
                 for (var i = 0; i < arrayLength; i++) {
                     photo = null;
                     contact = contacts[i];
                     if (contact['givenName'] && contact['familyName']) {
                         name = contact['givenName'] + ' ' + contact['familyName'];
                     } else if (contact['givenName']) {
                         name = contact['givenName'];
                     } else if (contact['familyName']) {
                         name = contact['familyName'];
                     } else if (contact['company']) {
                         name = contact['company'];
                     } else {
                         continue;
                     }
 
                     if (contact.hasThumbnail) {
                         photo = contact.thumbnailPath;
                     }
 
                     //console.log(name);
                     contact['phoneNumbers'].forEach(function (number, index) {
                         let number_stripped =  number['number'].replace(/\s|\-|\(|\)/g, '');
                         if (number_stripped) {
                             if (!seen_uris.has(number_stripped)) {
                                 //console.log('   ---->    ', number['label'], number_stripped);
                                 var contact_card = {id: uuid.v4(), displayName:
                                                     name, remoteParty: number_stripped,
                                                     type: 'contact',
                                                     photo: photo,
                                                     label: number['label'],
                                                     tags: ['contact']};
                                 contact_cards.push(contact_card);
                                 seen_uris.set(number_stripped, true);
                                 var contact_card = {id: uuid.v4(),
                                                     displayName: name,
                                                     remoteParty: number_stripped,
                                                     type: 'contact',
                                                     photo: photo,
                                                     label: number['label'],
                                                     tags: ['contact']
                                                     };
                             }
                         }
                     });
 
                     contact['emailAddresses'].forEach(function (email, index) {
                         let email_stripped =  email['email'].replace(/\s|\(|\)/g, '');
                         if (!seen_uris.has(email_stripped)) {
                             //console.log(name, email['label'], email_stripped);
                             //console.log('   ---->    ', email['label'], email_stripped);
                             var contact_card = {id: uuid.v4(),
                                                 displayName: name,
                                                 remoteParty: email_stripped,
                                                 type: 'contact',
                                                 photo: photo,
                                                 label: email['label'],
                                                 tags: ['contact']
                                                 };
                             contact_cards.push(contact_card);
                             seen_uris.set(email_stripped, true);
                         }
                     });
                 }
 
               this.contacts = contact_cards;
 
               if (this.state.myPhoneNumber) {
                   var myContact = this.findObjectByKey(contact_cards, 'remoteParty', this.state.myPhoneNumber);
                   if (myContact) {
                       this.setState({myDisplayName: myContact.displayName});
                   }
               }
             }
           })
     }
 
     get _notificationCenter() {
         // getter to lazy-load the NotificationCenter ref
         if (!this.__notificationCenter) {
             this.__notificationCenter = this.refs.notificationCenter;
         }
         return this.__notificationCenter;
     }
 
     findObjectByKey(array, key, value) {
         for (var i = 0; i < array.length; i++) {
             if (array[i][key] === value) {
                 return array[i];
             }
         }
         return null;
     }
 
     _detectOrientation() {
         if(this.state.Width_Layout > this.state.Height_Layout && this.state.orientation !== 'landscape') {
-            utils.timestampedLog("Orientation is landcape")
             this.setState({orientation: 'landscape'});
         } else {
-            utils.timestampedLog("Orientation is portrait")
             this.setState({orientation: 'portrait'});
         }
      }
 
     changeRoute(route) {
         if (this.currentRoute === route) {
             return;
         }
 
         utils.timestampedLog('Change route:', this.currentRoute, '->', route);
         this.currentRoute = route;
         history.push(route);
     }
 
     async componentDidMount() {
         this._loaded = true;
 
         try {
             await RNCallKeep.hasPhoneAccount();
         } catch(err) {
             utils.timestampedLog(err);
         }
 
         if (Platform.OS === 'android') {
             RNDrawOverlay.askForDispalayOverOtherAppsPermission()
                  .then(res => {
                    utils.timestampedLog("Display over other apps was granted");
                      // res will be true if permission was granted
                  })
                  .catch(e => {
                    utils.timestampedLog("Display over other apps was declined");
                      // permission was declined
                  })
         }
 
         this.changeRoute('/login');
 
         // prime the ref
         //logger.debug('NotificationCenter ref: %o', this._notificationCenter);
 
         this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this);
         this._boundOnPushRegistered = this._onPushRegistered.bind(this);
 
         if (Platform.OS === 'android') {
             Linking.getInitialURL().then((url) => {
                 if (url) {
                       utils.timestampedLog('Initial Linking URL: ' + url);
                       this.handleCallFromUrl(url);
                 }
               }).catch(err => {
                 logger.error({ err }, 'Error getting initial URL');
               });
 
             firebase.messaging().getToken()
             .then(fcmToken => {
                 if (fcmToken) {
                     this._onPushRegistered(fcmToken);
                 }
             });
 
             Linking.addEventListener('url', this.updateLinkingURL);
 
         } else if (Platform.OS === 'ios') {
             VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered);
             VoipPushNotification.registerVoipToken();
 
             PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered);
 
 
             //let permissions = await checkIosPermissions();
             //if (!permissions.alert) {
                 PushNotificationIOS.requestPermissions();
             //}
         }
 
         this.boundProximityDetect = this._proximityDetect.bind(this);
 
         DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect);
 
         AppState.addEventListener('change', this._handleAppStateChange);
 
         if (Platform.OS === 'ios') {
             this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this);
             this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this);
             VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground);
             VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground);
         } else if (Platform.OS === 'android') {
             firebase
                 .messaging()
                 .requestPermission()
                 .then(() => {
                     // User has authorised
                 })
                 .catch(error => {
                     // User has rejected permissions
                 });
 
             this.messageListener = firebase
                 .messaging()
                 .onMessage((message: RemoteMessage) => {
                     // this will just wake up the app to receive
                     // the web-socket invite handled by this.incomingCall()
                     let event = message.data.event;
                     utils.timestampedLog('Handle Firebase', event, 'push notification for', message.data['session-id']);
                     if (event === 'incoming_conference_request') {
                         this.incomingConference(message.data['session-id'], message.data['to_uri'], message.data['from_uri']);
                     } else if (event === 'cancel') {
                         this.cancelIncomingCall(message.data['session-id']);
                     }
                 });
         }
 
         this._detectOrientation();
 
         getPhoneNumber().then(phoneNumber => {
             this.setState({myPhoneNumber: phoneNumber});
             this.loadContacts();
         });
     }
 
     cancelIncomingCall(callUUID) {
         this._callKeepManager.endCall(callUUID, 6);
     }
 
     _proximityDetect(data) {
         return;
 
         if (data.isNear) {
            this.speakerphoneOff();
         } else {
            this.speakerphoneOn();
         }
     }
 
     handleCallFromUrl(url) {
         try {
             var url_parts = url.split("/");
             const direction = url_parts[2];
             const event     = url_parts[3];
             const callUUID  = url_parts[4];
             const from      = url_parts[5];
             const to        = url_parts[6];
 
             utils.timestampedLog('Parsed URL:', direction, event, 'from', from, 'to', to);
             if (direction === 'outgoing' && event === 'conference') {
                  this.incomingConference(callUUID, from, to);
             } else if (direction === 'incoming' && event === 'call') {
                 if (Platform.OS === 'android') {
                     this.setState({showIncomingModal: true});
                 } else {
                     this.incomingPushCall(callUUID, from);
                 }
             } else if (direction === 'outgoing' && event === 'call') {
                  // from native dialer
                  this.callKeepStartCall(to, {audio: true, video: false, callUUID: callUUID});
             } else {
                  utils.timestampedLog('Unclear URL structure');
             }
         } catch (err) {
             utils.timestampedLog('Error parsing url', url, ":", err);
         }
     }
 
     updateLinkingURL = (event) => {
         // this handles the use case where the app is running in the background and is activated by the listener...
         console.log('Updated Linking url', event.url);
         this.handleCallFromUrl(event.url);
     }
 
-    async startCallWhenReady(targetUri, options) {
+    startCallWhenReady(targetUri, options) {
         utils.timestampedLog('Start call when ready to', targetUri);
-        var n = 0;
-        let wait_interval = 20;
-        while (n < wait_interval) {
-            if (!this.state.connection) {
-                utils.timestampedLog('Web socket is down');
-            }
-            if (!this.state.connection || this.state.connection.state !== 'ready' || this.state.account === null) {
-                utils.timestampedLog('Waiting for connection...');
-                this._notificationCenter.postSystemNotification('Waiting for connection...', {timeout: 2});
-                await this._sleep(1000);
-            } else {
-                //this._notificationCenter.postSystemNotification('Server is ready', {timeout: 1});
-                utils.timestampedLog('Web socket is ready');
-                utils.timestampedLog('Using account', this.state.account.id);
-
-                if (options.conference) {
-                    this.startConference(targetUri, options);
-                } else {
-                    this.startCall(targetUri, options);
-                }
-                return;
-            }
-            if (n === wait_interval - 1) {
-                utils.timestampedLog('Terminating call', options.callUUID, 'that did not start yet');
-                this._callKeepManager.endCall(callUUID, 6);
-                this.setState({targetUri: null});
-            }
-            n++;
+        if (options.conference) {
+            this.startConference(targetUri, options);
+        } else {
+            this.startCall(targetUri, options);
         }
-        this._notificationCenter.postSystemNotification('No internet connection', {body: '', timeout: 3});
     }
 
     _sleep(ms) {
       return new Promise(resolve => setTimeout(resolve, ms));
     }
 
     _onPushkitRegistered(token) {
         utils.timestampedLog('Set VoIP pushkit token', token);
         this.pushkittoken = token;
     }
 
     _onPushRegistered(token) {
         utils.timestampedLog('Set background push token', token);
         this.pushtoken = token;
     }
 
     _sendPushToken() {
         if (this.state.account && this.pushtoken) {
             let token = null;
 
             if (Platform.OS === 'ios') {
                 token = `${this.pushkittoken}#${this.pushtoken}`;
             } else if (Platform.OS === 'android') {
                 token = this.pushtoken;
             }
             utils.timestampedLog('Push token', token, 'sent to server');
             this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId);
         }
     }
 
     componentWillUnmount() {
         AppState.removeEventListener('change', this._handleAppStateChange);
     }
 
     _handleAppStateChange = nextAppState => {
         //TODO - stop if we havent been backgrounded because of becoming active from a push notification and then going background again
         // if (nextAppState.match(/background/)) {
         //     logger.debug('app moving to background so we should stop the client sylk client if we dont have an active call');
         //     if (this._callKeepManager.count === 0) {
         //         logger.debug('callmanager count is 0 so closing connection');
         //         this.state.connection.close();
         //     }
         // }
 
         if (nextAppState === 'active') {
             if (this._callKeepManager.count === 0 && this.state.connection) {
                 this.state.connection.reconnect();
             }
         }
     }
 
     startCallFromCallKeeper(data) {
         // like from native iOS history
         utils.timestampedLog("CallKeep started call from outside the app to", data.handle);
         // we dont have options in the tmp var, which means this likely came from the native dialer
         // for now, we only do audio calls from the native dialer.
         let callUUID = data.callUUID || uuid.v4();
         let is_conf = data.handle.search('videoconference.') === -1 ? false: true;
         if (is_conf) {
             this.callKeepStartConference(data.handle, {audio: true, video: true, callUUID: callUUID});
         } else {
             this.callKeepStartCall(data.handle, {audio: true, video: false, callUUID: callUUID});
         }
         this._notificationCenter.removeNotification();
     }
 
     connectionStateChanged(oldState, newState) {
         utils.timestampedLog('Web socket state changed:', oldState, '->' , newState);
         switch (newState) {
             case 'closed':
                 this.setState({connection: null, loading: null});
                 //this._notificationCenter.postSystemNotification('Connection failed', {body: '', timeout: 3000});
                 break;
             case 'ready':
                 this._notificationCenter.removeNotification();
                 //this._notificationCenter.postSystemNotification('Connection OK', {body: '', timeout: 1});
                 this.processRegistration(this.state.accountId, this.state.password, this.state.displayName);
                 break;
             case 'disconnected':
                 if (this.state.localMedia) {
                     sylkrtc.utils.closeMediaStream(this.state.localMedia);
                 }
 
                 if (this.state.currentCall) {
-                    this.hangupCall(this.state.currentCall._callkeepUUID);
+                    this.hangupCall(this.state.currentCall._callkeepUUID, 'connection_failed');
                 }
 
                 if (this.state.inboundCall) {
-                    this.hangupCall(this.state.inboundCall._callkeepUUID);
+                    this.hangupCall(this.state.inboundCall._callkeepUUID, 'connection_failed');
                 }
 
-                this.changeRoute('/ready');
+                //this.changeRoute('/ready');
 
                 this.setState({
                     registrationState: 'failed',
                     currentCall: null,
                     inboundCall: null,
-                    localMedia: null,
+                    account: null,
                     generatedVideoTrack: false,
                     });
 
                 //this._notificationCenter.postSystemNotification('Connection lost', {body: '', timeout: 3000});
 
                 break;
             default:
                 if (this.state.registrationKeepalive !== true) {
                     this.setState({loading: 'Connecting...'});
                 }
                 break;
         }
     }
 
     notificationCenter() {
         return this._notificationCenter;
     }
 
     showRegisterFailure(reason) {
             logger.debug('Registration error: ' + reason);
             this.setState({
                 loading     : null,
                 registrationState: 'failed',
                 status      : {
                     msg   : 'Sign In failed: ' + reason,
                     level : 'danger'
                 }
             });
     }
 
     registrationStateChanged(oldState, newState, data) {
         utils.timestampedLog('Registration state changed:', oldState, '->', newState);
 
         if (newState === 'failed') {
             this._callKeepManager.setAvailable(false);
             let reason = data.reason;
             if (reason.match(/904|408/)) {
                 // Sofia SIP: WAT
                 reason = 'Wrong account or password';
             }
 
             this.showRegisterFailure(reason);
 
             if (this.state.registrationKeepalive === true) {
                 if (this.state.connection !== null) {
                     utils.timestampedLog('Retry to register...');
                     //this.setState({loading: 'Register...'});
                     this._notificationCenter.postSystemNotification('Registering', {body: 'now', timeout: 10000});
                     this.state.account.register();
                 } else {
                     // add a timer to retry register after awhile
                     utils.timestampedLog('Retry to register after a delay...');
                     setTimeout(this.state.account.register(), 5000);
                 }
             }
         } else if (newState === 'registered') {
             if (this.registrationFailureTimer) {
                 clearTimeout(this.registrationFailureTimer);
                 this.registrationFailureTimer = null;
             }
             this._callKeepManager.setAvailable(true);
             this.setState({loading: null, registrationKeepalive: true, registrationState: 'registered'});
 
-            if (!this.state.currentCall) {
+            //if (!this.state.currentCall) {
+            if (this.currentRoute === '/login') {
                 this.changeRoute('/ready');
             }
             //this._notificationCenter.postSystemNotification('Ready to receive calls', {body: '', timeout: 1});
             return;
         } else {
             this.setState({status: null, registrationState: newState });
             this._callKeepManager.setAvailable(false);
         }
     }
 
     showCalls(prefix) {
         if (this.state.currentCall) {
             utils.timestampedLog('Current calls', prefix, 'currentCall:', this.state.currentCall ? (this.state.currentCall._callkeepUUID + ' ' + this.state.currentCall.direction): 'None');
         }
         if (this.state.inboundCall) {
             utils.timestampedLog('Current calls', prefix, 'inboundCall:', this.state.inboundCall ? (this.state.inboundCall._callkeepUUID + ' ' + this.state.inboundCall.direction): 'None');
         }
 
         if (this._callKeepManager.callUUIDS.length > 0) {
             utils.timestampedLog('Current calls', prefix, 'callkeep sessions:', this._callKeepManager.callUUIDS);
         }
     }
 
     callStateChanged(oldState, newState, data) {
         // outgoing accepted: null -> progress -> accepted -> established -> terminated
         // incoming accepted: null -> incoming -> accepted -> established -> terminated
         // 2nd incoming call is automatically rejected by sylkrtc library
 
         //this.showCalls('Begin callStateChanged');
 
         let call = this._callKeepManager._calls.get(data.id);
 
         if (!call) {
             utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager');
             return;
         }
 
         let callUUID = call._callkeepUUID;
-        utils.timestampedLog(call.direction, 'call', callUUID, ' state change:', oldState, '->', newState);
+        utils.timestampedLog(call.direction, 'call', callUUID, 'state change:', oldState, '->', newState);
 
         let newCurrentCall;
         let newInboundCall;
+        let direction = call.direction;
 
         if (this.state.inboundCall && this.state.currentCall) {
             if (this.state.inboundCall != this.state.currentCall) {
                 utils.timestampedLog('We have two calls');
             }
 
             if (newState === 'terminated') {
                 if (this.state.inboundCall == this.state.currentCall) {
                     newCurrentCall = null;
                     newInboundCall = null;
                 } else {
                     if (oldState === 'incoming') {
                         utils.timestampedLog('Call state changed:', 'We have two calls, new call must be cancelled');
                         // new call must be cancelled
                         newInboundCall = null;
                         newCurrentCall = this.state.currentCall;
                     } else if (oldState === 'established') {
                         utils.timestampedLog('Call state changed:', 'Old call must be closed');
                         // old call must be closed
                         newCurrentCall = null;
                         newInboundCall = null;
                     } else {
                         utils.timestampedLog('Call state changed:', 'Error: unclear call combination')
                     }
                 }
             } else if (newState === 'accepted') {
                 if (this.state.inboundCall == this.state.currentCall) {
                     newCurrentCall = this.state.inboundCall;
                     newInboundCall = this.state.inboundCall;
                 } else {
                     utils.timestampedLog('Call state changed:', 'Error: we have two different calls and unhandled state transition');
                 }
             } else if (newState === 'established') {
                 if (this.state.inboundCall == this.state.currentCall) {
                     newCurrentCall = this.state.inboundCall;
                     newInboundCall = this.state.inboundCall;
                 } else {
                     utils.timestampedLog('Call state changed:', 'Error: we have two different calls and unhandled state transition');
                 }
             } else {
                 utils.timestampedLog('Call state changed:', 'We have two calls and unhandled state');
             }
         } else if (this.state.inboundCall) {
             if (oldState === 'incoming' && newState === 'terminated') {
                 utils.timestampedLog("Incoming call was cancelled");
                 this.setState({showIncomingModal: false});
                 newInboundCall = null;
                 newCurrentCall = null;
             } else if (oldState === 'incoming' && newState === 'accepted') {
                 utils.timestampedLog("Incoming call is accepted");
                 newCurrentCall = this.state.inboundCall;
                 newInboundCall = this.state.inboundCall;
                 this.setState({showIncomingModal: false});
             } else if (oldState === 'established' && newState === 'terminated') {
                 // old call was hangup to accept a new incoming calls
                 newCurrentCall = null;
                 newInboundCall = this.state.inboundCall;
             } else {
                 utils.timestampedLog('Call state changed:', 'we have one inbound call and unhandled state');
             }
         } else {
             newCurrentCall = newState === 'terminated' ? null : this.state.currentCall;
             newInboundCall = null;
         }
 
         switch (newState) {
             case 'progress':
                 InCallManager.startRingback('_BUNDLE_');
                 break;
             case 'established':
             case 'accepted':
                 this._callKeepManager.backToForeground();
                 this._callKeepManager.setCurrentCallActive(callUUID);
                 if (this.state.isConference) {
                     // allow ringtone to play once as connection is too fast
                     setTimeout(() => {InCallManager.stopRingback();}, 2000);
                 } else {
                     InCallManager.stopRingback();
                 }
 
                 if (this.state.isConference) {
                     //this._callKeepManager.backToForeground();
                     this.speakerphoneOn();
                 } else if (this.state.currentCall && this.state.currentCall.remoteMediaDirections) {
                     const videoTracks = this.state.currentCall.remoteMediaDirections.video;
                     if (videoTracks && videoTracks.length > 0) {
                         utils.timestampedLog('Call state changed:', 'Video call started')
                         //this._callKeepManager.backToForeground();
                         this.speakerphoneOn();
                     }
                 } else {
                     this.speakerphoneOff();
                 }
                 break;
             case 'terminated':
                 let callSuccesfull = false;
                 let reason = data.reason;
                 let play_busy_tone = true;
 
                 let CALLKEEP_REASON;
-                utils.timestampedLog('Call state changed:', 'call', callUUID, 'terminated reason:' + reason);
+                utils.timestampedLog('Call state changed:', 'call', callUUID, 'terminated reason:', reason);
 
                 if (!reason || reason.match(/200/)) {
                     if (oldState == 'progress') {
                         reason = 'Cancelled';
                         play_busy_tone = false;
                         CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
                     } else {
                         reason = 'Hangup';
                         callSuccesfull = true;
                         CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
                     }
                 } else if (reason.match(/403/)) {
                     reason = 'This domain is not served here';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 } else if (reason.match(/404/)) {
                     reason = 'User not found';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 } else if (reason.match(/408/)) {
                     reason = 'Timeout';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 } else if (reason.match(/480/)) {
                     reason = 'User not online';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
                 } else if (reason.match(/486/) || reason.match(/60[036]/)) {
                     reason = 'Busy';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
                 } else if (reason.match(/487/)) {
                     reason = 'Cancelled';
                     play_busy_tone = false;
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.MISSED;
                 } else if (reason.match(/488/)) {
                     reason = 'Unacceptable media';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 } else if (reason.match(/5\d\d/)) {
                     reason = 'Server failure';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 } else if (reason.match(/904/)) {
                     // Sofia SIP: WAT
                     reason = 'Wrong account or password';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 } else {
                     reason = 'Connection failed';
                     CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
                 }
 
                 utils.timestampedLog('Call', callUUID, 'ended:', reason);
                 this._callKeepManager.endCall(callUUID, CALLKEEP_REASON);
 
                 if (this.state.currentCall === null) {
                     utils.timestampedLog('Call state changed:', 'Turn off speakerphone');
                     this.speakerphoneOff();
                 }
 
                 if (play_busy_tone && oldState !== 'established') {
                     this._notificationCenter.postSystemNotification('Call ended:', {body: reason, timeout: callSuccesfull ? 5 : 10});
                 }
 
                 this.setFocusEvents(false);
 
                 if (newCurrentCall) {
                     // we had an old active call that must be revived
                     this._callKeepManager.setCurrentCallActive(newCurrentCall._callkeepUUID);
                 }
 
                 if (!newCurrentCall && !newInboundCall) {
                     if (play_busy_tone) {
                         InCallManager.stop({busytone: '_BUNDLE_'});
                     } else {
                         InCallManager.stop();
                     }
 
                     this.participantsToInvite = null;
-                    this.changeRoute('/ready');
+                    if (direction === 'incoming' || (direction === 'outgoing' && reason === 'Hangup')) {
+                        setTimeout(() => {
+                            this.changeRoute('/ready');
+                        }, 5000);
+                    }
 
                     setTimeout(() => {
                         this.setState({refreshHistory: !this.state.refreshHistory});
                     }, 1500);
                 }
 
                 this.updateHistoryEntry(callUUID);
 
                 break;
             default:
                 break;
         }
 
         this.setState({
                     currentCall: newCurrentCall,
                     inboundCall: newInboundCall
                 });
 
     }
 
     handleCallByUri(displayName, targetUri) {
         const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`;
         this.setState({
             accountId      : accountId,
             password       : '',
             displayName    : displayName,
             //mode           : MODE_GUEST_CALL,
             targetUri      : utils.normalizeUri(targetUri, config.defaultDomain),
             loading        : 'Connecting...'
         });
 
         if (this.state.connection === null) {
             let connection = sylkrtc.createConnection({server: config.wsServer});
             connection.on('stateChanged', this.connectionStateChanged);
             this.setState({connection: connection});
         }
     }
 
     handleConferenceByUri(displayName, targetUri) {
         const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`;
         this.setState({
             accountId      : accountId,
             password       : '',
             displayName    : displayName,
             //mode           : MODE_GUEST_CONFERENCE,
             targetUri      : targetUri,
             loading        : 'Connecting...'
         });
 
         if (this.state.connection === null) {
             let connection = sylkrtc.createConnection({server: config.wsServer});
             connection.on('stateChanged', this.connectionStateChanged);
             this.setState({connection: connection});
         }
     }
 
     handleRegistration(accountId, password, remember) {
         this.setState({
             accountId : accountId,
             password  : password,
             mode      : remember ? MODE_NORMAL : MODE_PRIVATE,
             loading   : 'Connecting...'
         });
 
         if (this.state.connection === null) {
             const userAgent = 'Sylk Mobile';
             console.log('User Agent:', userAgent);
             if (this.state.phoneNumber) {
                 console.log('Phone number:', this.state.phoneNumber);
             }
 
             let connection = sylkrtc.createConnection({server: config.wsServer, userAgent: {name: userAgent, version: version}});
             connection.on('stateChanged', this.connectionStateChanged);
             this.setState({connection: connection});
         } else {
             utils.timestampedLog('Websocket connection active, try to register');
             this.processRegistration(accountId, password, '');
         }
     }
 
     processRegistration(accountId, password, displayName) {
         if (this.state.account !== null) {
             logger.debug('We already have an account, removing it');
             this.state.connection.removeAccount(this.state.account,
                 (error) => {
-                    if (error) {
-                        logger.debug(error);
-                    }
                     this.setState({registrationState: null, registrationKeepalive: false});
                 }
             );
         }
 
         const options = {
             account: accountId,
             password: password,
             displayName: displayName
         };
 
         this.registrationFailureTimer = setTimeout(this.showRegisterFailure, 6000, 'Wrong account or password');
 
         const account = this.state.connection.addAccount(options, (error, account) => {
             if (!error) {
                 account.on('outgoingCall', this.outgoingCall);
                 account.on('conferenceCall', this.outgoingCall);
                 switch (this.state.mode) {
                     case MODE_PRIVATE:
                     case MODE_NORMAL:
                         account.on('registrationStateChanged', this.registrationStateChanged);
                         account.on('incomingCall', this.incomingCall);
                         account.on('missedCall', this.missedCall);
                         account.on('conferenceInvite', this.conferenceInvite);
                         this.setState({account: account});
                         this._sendPushToken();
                         account.register();
                         logger.debug(this.state.mode);
                         if (this.state.mode !== MODE_PRIVATE) {
                             storage.set('account', {
                                 accountId: this.state.accountId,
                                 password: this.state.password
                             });
                         } else {
                             // Wipe storage if private login
                             //storage.remove('account'); // lets try this out
                             // history.clear().then(() => {
                             //     this.setState({history: []});
                             // });
                         }
                         break;
                     case MODE_GUEST_CALL:
                         this.setState({account: account, loading: null, registrationState: 'registered'});
                         logger.debug(`${accountId} (guest) signed in`);
                         // Start the call immediately, this is call started with "Call by URI"
                         this.startGuestCall(this.state.targetUri, {audio: true, video: true});
                         break;
                     case MODE_GUEST_CONFERENCE:
                         this.setState({account: account, loading: null, registrationState: 'registered'});
                         logger.debug(`${accountId} (conference guest) signed in`);
                         // Start the call immediately, this is call started with "Conference by URI"
                         this.startGuestConference(this.state.targetUri);
                         break;
                     default:
                         logger.debug(`Unknown mode: ${this.state.mode}`);
                         break;
                 }
             } else {
                 this.showRegisterFailure(408);
             }
         });
 
     }
 
     setDevice(device) {
         const oldDevices = Object.assign({}, this.state.devices);
 
         if (device.kind === 'videoinput') {
             oldDevices['camera'] = device;
         } else if (device.kind === 'audioinput') {
             oldDevices['mic'] = device;
         }
 
         this.setState({devices: oldDevices});
         storage.set('devices', oldDevices);
         sylkrtc.utils.closeMediaStream(this.state.localMedia);
         this.getLocalMedia();
     }
 
     getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) {    // eslint-disable-line space-infix-ops
         let callType = mediaConstraints.video ? 'video': 'audio';
         utils.timestampedLog('Get local media for', callType, 'call, next route', nextRoute);
         const constraints = Object.assign({}, mediaConstraints);
 
         if (constraints.video === true) {
             if ((nextRoute === '/conference' ||  this.state.mode === MODE_GUEST_CONFERENCE)) {
                 constraints.video = {
                     'width': {
                         'ideal': 1280
                     },
                     'height': {
                         'ideal': 720
                     }
                 };
 
             // TODO: remove this, workaround so at least safari works when joining a video conference
             } else if ((nextRoute === '/conference' ||  this.state.mode === MODE_GUEST_CONFERENCE) && isSafari) {
                 constraints.video = false;
             } else {
                 // ask for 720p video
                 constraints.video = {
                     'width': {
                         'ideal': 1280
                     },
                     'height': {
                         'ideal': 720
                     }
                 };
             }
         }
 
         logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints);
 
         navigator.mediaDevices.enumerateDevices()
         .then((devices) => {
             devices.forEach((device) => {
                 //console.log(device);
                 if ('video' in constraints && 'camera' in this.state.devices) {
                     if (constraints.video && constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) {
                         constraints.video.deviceId = {
                             exact: device.deviceId
                         };
                     }
                 }
                 if ('mic' in this.state.devices) {
                     if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) {
                         // constraints.audio = {
                         //     deviceId: {
                         //         exact: device.deviceId
                         //     }
                         // };
                     }
                 }
             });
         })
         .catch((error) => {
             utils.timestampedLog('Error: device enumeration failed:', error);
         })
         .then(() => {
             return navigator.mediaDevices.getUserMedia(constraints)
         })
         .then((localStream) => {
             clearTimeout(this.loadScreenTimer);
             utils.timestampedLog('Got local media done, next route is', nextRoute);
             this.setState({status: null, loading: null, localMedia: localStream});
             if (nextRoute !== null) {
                 this.changeRoute(nextRoute);
             }
         })
         .catch((error) => {
             utils.timestampedLog('Access to local media failed, trying audio only', error);
             navigator.mediaDevices.getUserMedia({
                 audio: true,
                 video: false
             })
             .then((localStream) => {
                 clearTimeout(this.loadScreenTimer);
 
                 /*
                 logger.debug('Audio only media, but video was requested, creating generated video track');
                 const generatedVideoTrack = utils.generateVideoTrack(localStream);
                 localStream.addTrack(generatedVideoTrack);
                 utils.timestampedLog('Next route', nextRoute);
 
                 this.setState({status: null, loading: null, localMedia: localStream, generatedVideoTrack: true});
                 */
 
                 if (nextRoute !== null) {
                     this.changeRoute(nextRoute);
                 }
             })
             .catch((error) => {
                 utils.timestampedLog('Access to local media failed:', error);
                 clearTimeout(this.loadScreenTimer);
                 this._notificationCenter.postSystemNotification("Can't access camera or microphone", {timeout: 10});
                 this.setState({
                     loading: null
                 });
                 this.changeRoute('/ready');
             });
         });
     }
 
     callKeepStartConference(targetUri, options={audio: true, video: true}) {
         let callUUID = options.callUUID || uuid.v4();
         this.addHistoryEntry(targetUri, callUUID);
         this.setState({outgoingCallUUID: callUUID, outgoingMedia: options});
         utils.timestampedLog('CallKeep will start conference', callUUID, 'to', targetUri);
         this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: callUUID});
     }
 
     callKeepStartCall(targetUri, options) {
         let callUUID = options.callUUID || uuid.v4();
         this.setState({outgoingCallUUID: callUUID});
-
         utils.timestampedLog('CallKeep will start call', callUUID, 'to', targetUri);
-
         this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: callUUID});
     }
 
     startCall(targetUri, options) {
         utils.timestampedLog('startCall', targetUri);
         this.setState({targetUri: targetUri});
         //this.addHistoryEntry(targetUri);
         this.getLocalMedia(Object.assign({audio: true, video: true}, options), '/call');
     }
 
     callKeepAcceptCall(callUUID, options) {
         // called from user interaction with Old alert panel
         // options used to be media to accept audio only but native panels do not have this feature
         utils.timestampedLog('CallKeep answer call', callUUID);
         this._callKeepManager.answerIncomingCall(callUUID);
         this.acceptCall();
     }
 
     callKeepRejectCall(callUUID) {
         // called from user interaction with Old alert panel
         utils.timestampedLog('CallKeep must reject call', callUUID);
         this._callKeepManager.rejectCall(callUUID);
         this.rejectCall(callUUID);
     }
 
     acceptCall() {
         utils.timestampedLog('Alert panel answer call');
 
         //this.showCalls('acceptCall')
 
         this.setFocusEvents(false);
 
         if (this.state.currentCall) {
-            this.hangupCall(this.state.currentCall._callkeepUUID);
+            this.hangupCall(this.state.currentCall._callkeepUUID, 'accept_new_call');
             this.setState({currentCall: null});
 
             /*
             if (this.state.localMedia != null) {
                 sylkrtc.utils.closeMediaStream(this.state.localMedia);
                 utils.timestampedLog('Sylkrtc close local media');
             }
             */
         }
 
         this.setState({localMedia: null});
         let hasVideo = (this.state.inboundCall && this.state.inboundCall.mediaTypes && this.state.inboundCall.mediaTypes.video) ? true : false;
         this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call');
     }
 
     rejectCall(callUUID) {
         // called by Call Keep when user rejects call
         utils.timestampedLog('Alert panel reject call', callUUID);
         if (!this.state.currentCall) {
             this.changeRoute('/ready');
         }
 
         if (this.state.inboundCall && this.state.inboundCall._callkeepUUID === callUUID) {
             this.state.inboundCall.terminate();
             utils.timestampedLog('Sylkrtc reject call', callUUID);
         }
         this.forceUpdate();
     }
 
     timeoutCall(callUUID, uri) {
         utils.timestampedLog('Timeout answering call', callUUID);
         this.addHistoryEntry(uri, callUUID, direction='received');
         this.forceUpdate();
     }
 
-    hangupCall(callUUID) {
-        utils.timestampedLog('User hangup call', callUUID);
-
-        //this.showCalls('hangupCall');
+    hangupCall(callUUID, reason) {
+        utils.timestampedLog('Hangup call', callUUID, 'reason:', reason);
 
         let call = this._callKeepManager._calls.get(callUUID);
+        let direction = null;
+        let targetUri = null;
 
         if (call) {
+            let direction = call.direction;
+            targetUri = call.remoteIdentity.uri;
             call.terminate();
         } else {
             if (this.state.localMedia != null) {
                 sylkrtc.utils.closeMediaStream(this.state.localMedia);
                 utils.timestampedLog('Sylkrtc close media');
             }
         }
 
-        // just terminate all calls to be sure
-        // this._callKeepManager.endCalls();
-        this.changeRoute('/ready');
+        if (reason !== 'connection_failed') {
+            if (reason === 'user_cancelled' || reason === 'timeout') {
+                this.changeRoute('/ready');
+                setTimeout(() => {
+                    this.setState({refreshHistory: !this.state.refreshHistory});
+                }, 200);
+            } else {
+                setTimeout(() => {
+                    this.setState({localMedia: null});
+                    this.changeRoute('/ready');
+                }, 5000);
+            }
+         } else {
+             utils.timestampedLog('Call', callUUID, 'failed due to connection');
+        }
     }
 
     callKeepSendDtmf(digits) {
         utils.timestampedLog('Send DTMF', digits);
         if (this.state.currentCall) {
             this._callKeepManager.sendDTMF(this.state.currentCall._callkeepUUID, digits);
         }
     }
 
     callKeepToggleMute(mute) {
         utils.timestampedLog('Toggle mute %s', mute);
         if (this.state.currentCall) {
             this._callKeepManager.setMutedCall(this.state.currentCall._callkeepUUID, mute);
         }
     }
 
     toggleSpeakerPhone() {
         if (this.state.speakerPhoneEnabled === true) {
             this.speakerphoneOff();
         } else {
             this.speakerphoneOn();
         }
     }
 
     speakerphoneOn() {
         utils.timestampedLog('Speakerphone On');
         this.setState({speakerPhoneEnabled: true});
         InCallManager.setForceSpeakerphoneOn(true);
     }
 
     speakerphoneOff() {
         utils.timestampedLog('Speakerphone Off');
         this.setState({speakerPhoneEnabled: false});
         InCallManager.setForceSpeakerphoneOn(false);
     }
 
     startGuestConference(targetUri) {
         this.setState({targetUri: targetUri});
         this.getLocalMedia({audio: true, video: true});
     }
 
     toggleMute() {
         this.muteIncoming = !this.muteIncoming;
     }
 
     outgoingCall(call) {
         // called by sylrtc.js when an outgoig call or conference starts
         const localStreams = call.getLocalStreams();
         let mediaType = 'audio';
 
         if (localStreams.length > 0) {
             const localStream = call.getLocalStreams()[0];
             mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio';
         }
 
         utils.timestampedLog('Outgoing', mediaType, 'call', call.id, 'started to', call.remoteIdentity.uri);
         this._callKeepManager.handleOutgoingCall(call);
 
         InCallManager.start({media: mediaType});
 
         call.on('stateChanged', this.callStateChanged);
         this.setState({currentCall: call});
-        this._callKeepManager.updateDisplay(call._callkeepUUID, call.remoteIdentity.displayName, call.remoteIdentity.uri);
+        //this._callKeepManager.updateDisplay(call._callkeepUUID, call.remoteIdentity.displayName, call.remoteIdentity.uri);
     }
 
     _onLocalNotificationReceivedBackground(notification) {
         let notificationContent = notification.getData();
         utils.timestampedLog('Handle local iOS push notification: ', notificationContent);
     }
 
     _onNotificationReceivedBackground(notification) {
         let notificationContent = notification.getData();
 
         // get the uuid from the notification
         // have we already got a waiting call in call manager? if we do, then its been "answered" and we're waiting for the invite
         // we may still never get the invite if theres network issues... so still need a timeout
         // no waiting call, so that means its still "ringing" (it may have been cancelled) so set a timer and if we havent recieved
         // an invite within 10 seconds then clear it down
 
         let event = notificationContent['event'];
         let callUUID = notificationContent['session-id'];
         utils.timestampedLog('Handle iOS', event, 'push notification for', callUUID);
         logger.debug(notificationContent);
 
         if (notificationContent['event'] === 'incoming_session') {
             utils.timestampedLog('Incoming call for push mobile notification for call', callUUID);
 
             this.incomingPushCall(callUUID, notificationContent['from_uri']);
 
             if (VoipPushNotification.wakeupByPush) {
                 utils.timestampedLog('We wake up by a push notification');
                 VoipPushNotification.wakeupByPush = false;
             }
             VoipPushNotification.onVoipNotificationCompleted(callUUID);
         } else if (notificationContent['event'] === 'incoming_conference_request') {
             let callUUID = notificationContent['session-id'];
             utils.timestampedLog('Incoming conference for push mobile notification for call', callUUID);
             this.incomingConference(callUUID, notificationContent['to_uri'], notificationContent['from_uri']);
 
             VoipPushNotification.onVoipNotificationCompleted(callUUID);
         }
 
         /*
         if (notificationContent['event'] === 'incoming_session') {
             VoipPushNotification.presentLocalNotification({
                 alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name']
             });
         }
         */
 
         if (notificationContent['event'] === 'cancel') {
             this.cancelIncomingCall(callUUID);
             VoipPushNotification.presentLocalNotification({
                 alertBody:'Call cancelled'
             });
         }
 
         if (VoipPushNotification.wakeupByPush) {
             utils.timestampedLog('We wake up by push notification');
             VoipPushNotification.wakeupByPush = false;
         }
     }
 
     incomingPushCall(callUUID, from) {
         utils.timestampedLog('Handle incoming push call', callUUID, 'from', from);
         if (this.state.account && from === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri === from) {
             utils.timestampedLog('Reject call to myself', callUUID);
             this._callKeepManager.rejectCall(callUUID);
         } else {
             this._callKeepManager.handleIncomingPushCall(callUUID);
         }
     }
 
     async incomingConference(callUUID, to_uri, from_uri) {
         utils.timestampedLog('Handle incoming conference', callUUID, 'when ready');
         var n = 0;
         let wait_interval = 15;
         while (n < wait_interval) {
             if (!this.state.connection || this.state.connection.state !== 'ready' || this.state.account === null) {
                 utils.timestampedLog('Waiting for connection...');
                 this._notificationCenter.postSystemNotification('Waiting for connection...', {timeout: 1});
                 await this._sleep(1000);
             } else {
                 utils.timestampedLog('Web socket is ready');
                 utils.timestampedLog('Using account', this.state.account.id);
                 // answer here
                 this._callKeepManager.handleConference(callUUID, to_uri, from_uri);
                 this.setFocusEvents(true);
                 return;
             }
 
             if (n === wait_interval - 1) {
                 utils.timestampedLog('Terminating call', callUUID, 'that did not start yet');
                 this._callKeepManager.endCall(callUUID, 6);
             }
             n++;
         }
     }
 
     startConference(targetUri, options={audio: true, video: true}) {
         utils.timestampedLog('New outgoing conference to room', targetUri);
         this.setState({targetUri: targetUri, isConference: true});
         this.getLocalMedia({audio: options.audio, video: options.video}, '/conference');
     }
 
     escalateToConference(participants) {
         const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`;
         utils.timestampedLog('Move current call to conference', uri, 'with participants', participants);
         if (this.state.currentCall) {
-            this.hangupCall(this.state.currentCall._callkeepUUID);
+            this.hangupCall(this.state.currentCall._callkeepUUID, 'escalate_to_conference');
             this.setState({currentCall: null});
         }
 
         if (this.state.inboundCall) {
-            this.hangupCall(this.state.inboundCall._callkeepUUID);
+            this.hangupCall(this.state.inboundCall._callkeepUUID, 'escalate_to_conference');
             this.setState({inboundCall: null});
         }
 
         this.setState({localMedia: null});
         this.participantsToInvite = participants;
         this.callKeepStartConference(uri);
     }
 
     conferenceInvite(data) {
         // comes from web socket
         utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room);
         //this._notificationCenter.postSystemNotification('Conference invite', {body: `From ${data.originator.displayName || data.originator.uri} for room ${data.room}`, timeout: 15, silent: false});
         if (Platform.OS === 'android') {
             this.incomingConference(data.id, data.room, data.originator.uri);
         }
     }
 
     incomingCall(call, mediaTypes) {
         // this is called by the websocket invite
 
         // because of limitation in Sofia stack, we cannot have more then two calls at a time
         // we can have one outgoing call and one incoming call but not two incoming calls
         // we cannot have two incoming calls, second one is automatically rejected by sylkrtc.js
 
         if (call.remoteIdentity.uri === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri) {
             utils.timestampedLog('Reject call to myself', call.id);
             this._callKeepManager.rejectCall(call.id);
             call.terminate();
             return;
         }
 
         if (this.state.blockedUris && this.state.blockedUris.indexOf(call.remoteIdentity.uri) > -1) {
             utils.timestampedLog('Reject call from blocked URI', call.remoteIdentity.uri);
             this._callKeepManager.rejectCall(call.id);
             call.terminate();
             let from = call.remoteIdentity.displayName || call.remoteIdentity.uri;
             this._notificationCenter.postSystemNotification('Call rejected', {body: `from ${from}`, timeout: 5000, silent: true});
             return;
         }
 
         let mediaType = mediaTypes.video ? 'video' : 'audio';
         call.mediaTypes = mediaTypes;
 
         utils.timestampedLog('New', mediaType, 'incoming call from', call.remoteIdentity['_displayName'], call.remoteIdentity['_uri']);
 
         call.on('stateChanged', this.callStateChanged);
         this.setState({inboundCall: call});
 
         InCallManager.start({media: mediaType});
 
         this._callKeepManager.handleIncomingWebSocketCall(call);
 
         this.setFocusEvents(true);
 
     }
 
     setFocusEvents(enabled) {
         // if (this.shouldUseHashRouting) {
         //     const remote = window.require('electron').remote;
         //     if (enabled) {
         //         const currentWindow = remote.getCurrentWindow();
         //         currentWindow.on('focus', this.hasFocus);
         //         currentWindow.on('blur', this.hasNoFocus);
         //         this.setState({haveFocus: currentWindow.isFocused()});
         //     } else {
         //         const currentWindow = remote.getCurrentWindow();
         //         currentWindow.removeListener('focus', this.hasFocus);
         //         currentWindow.removeListener('blur', this.hasNoFocus);
         //     }
         // }
     }
 
     // hasFocus() {
     //     this.setState({haveFocus: true});
     // }
 
     // hasNoFocus() {
     //     this.setState({haveFocus: false});
     // }
 
     missedCall(data) {
         utils.timestampedLog('Missed call from ' + data.originator);
         if (!this.state.currentCall) {
             //utils.timestampedLog('Update snackbar');
             let from = data.originator.display_name || data.originator.uri;
             this._notificationCenter.postSystemNotification('Missed call', {body: `from ${from}`, timeout: 180, silent: false});
         }
         this.forceUpdate();
     }
 
     startPreview() {
         this.getLocalMedia({audio: true, video: true}, '/preview');
     }
 
     updateHistoryEntry(callUUID) {
         let newHistory = this.state.localHistory;
         var historyItem = this.findObjectByKey(newHistory, 'sessionId', callUUID);
         if (historyItem) {
             let current_datetime = new Date();
             let stopTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
             historyItem.stopTime = stopTime;
             var diff = current_datetime.getTime() - historyItem.startTimeObject.getTime();
             historyItem.duration = parseInt(diff/1000);
             delete historyItem['startTimeObject'];
             if (this._historyConferenceParticipants.has(callUUID)) {
                 historyItem.participants = this._historyConferenceParticipants.get(callUUID);
             } else {
                 historyItem.participants = [];
             }
             //console.log('Save history', historyItem);
             this.setState({localHistory: newHistory});
             storage.set('history', newHistory);
         }
     }
 
     setFavoriteUri(uri) {
         let favoriteUris = this.state.favoriteUris;
         let idx = favoriteUris.indexOf(uri);
         let ret;
 
         console.log('idx', idx);
 
         if (idx === -1) {
             favoriteUris.push(uri);
             ret = true;
 
         } else {
             let removed = favoriteUris.splice(idx, 1);
             ret = false;
         }
 
         storage.set('favoriteUris', favoriteUris);
         this.setState({favoriteUris: favoriteUris, refreshHistory: !this.state.refreshHistory});
         return ret;
     }
 
     setBlockedUri(uri) {
         let blockedUris = this.state.blockedUris;
         console.log('Old blocked Uris:', blockedUris);
 
         let ret;
         let idx = blockedUris.indexOf(uri);
 
         console.log('idx', idx);
         if (idx === -1) {
             blockedUris.push(uri);
             ret = true;
         } else {
             let removed = blockedUris.splice(idx, 1);
             console.log('Removed', removed);
             ret = false;
         }
 
         console.log('New blocked Uris:', blockedUris);
         storage.set('blockedUris', blockedUris);
         this.setState({blockedUris: blockedUris, refreshHistory: !this.state.refreshHistory});
         return ret;
     }
 
     saveParticipant(callUUID, room, uri) {
         console.log('Save participant', uri, 'for conference', room);
 
         if (this._historyConferenceParticipants.has(callUUID)) {
             let old_participants = this._historyConferenceParticipants.get(callUUID);
             if (old_participants.indexOf(uri) === -1) {
                 old_participants.push(uri);
             }
 
         } else {
             let new_participants = [uri];
             this._historyConferenceParticipants.set(callUUID, new_participants);
         }
 
         if (!this.myParticipants) {
             this.myParticipants = new Object();
         }
 
         if (this.myParticipants.hasOwnProperty(room)) {
             let old_uris = this.myParticipants[room];
             if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
                 this.myParticipants[room].push(uri);
             }
 
         } else {
             let new_uris = [];
             if (uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
                 new_uris.push(uri);
             }
 
             if (new_uris) {
                 this.myParticipants[room] = new_uris;
             }
         }
 
         storage.set('myParticipants', this.myParticipants);
     }
 
     saveInvitedParties(callUUID, room, uris) {
         if (!this.myInvitedParties) {
             this.myInvitedParties = new Object();
         }
 
         if (this.myInvitedParties.hasOwnProperty(room)) {
             let old_uris = this.myInvitedParties[room];
             uris.forEach((uri) => {
                 if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
                     this.myInvitedParties[room].push(uri);
                 }
             });
 
         } else {
             let new_uris = [];
             uris.forEach((uri) => {
                 if (uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
                     new_uris.push(uri);
                 }
             });
 
             if (new_uris) {
                 this.myInvitedParties[room] = new_uris;
             }
         }
 
         storage.set('myInvitedParties', this.myInvitedParties);
     }
 
     deleteHistoryEntry(uri) {
         let history = this.state.localHistory;
         for (var i = history.length - 1; i >= 0; --i) {
             if (history[i].remoteParty === uri) {
                 history.splice(i,1);
             }
         }
 
         storage.set('history', history);
         this.setState({localHistory: history,
                        refreshHistory: !this.state.refreshHistory});
     }
 
     addHistoryEntry(uri, callUUID, direction='placed') {
         if (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE) {
             let current_datetime = new Date();
             let startTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
 
             let item = {
                         remoteParty: uri,
                         direction: direction,
                         type: 'history',
                         conference: true,
                         media: ['audio', 'video'],
                         displayName: 'Conference ' + uri.split('@')[0],
                         sessionId: callUUID,
                         startTime: startTime,
                         stopTime: startTime,
                         startTimeObject: current_datetime,
                         duration: 0,
                         tags: ['history', 'local']
                         };
 
             const historyItem = Object.assign({}, item);
             console.log('Added history item', historyItem);
             let newHistory = this.state.localHistory;
             newHistory.push(historyItem);
             this.setState({localHistory: newHistory});
             storage.set('history', newHistory);
         }
     }
 
     // checkRoute(nextPath, navigation, match) {
     //     if (nextPath !== this.prevPath) {
     //         logger.debug(`Transition from ${this.prevPath} to ${nextPath}`);
 
     //
     //         // Press back in ready after a login, prevent initial navigation
     //         // don't deny if there is no registrationState (connection fail)
     //         if (this.prevPath === '/ready' && nextPath === '/login' && this.state.registrationState !== null) {
     //             logger.debug('Transition denied redirecting to /logout');
     //             this.changeRoute('/logout');
     //             return false;
 
     //         // Press back in ready after a call
     //         } else if ((nextPath === '/call' || nextPath === '/conference') && this.state.localMedia === null && this.state.registrationState === 'registered') {
     //             return false;
 
     //         // Press back from within a call/conference, don't navigate terminate the call and
     //         // let termination take care of navigating
     //         } else if (nextPath === '/ready' && this.state.registrationState === 'registered' && this.state.currentCall !== null) {
     //             this.state.currentCall.terminate();
     //             return false;
 
     //         // Guest call ended, needed to logout and display msg and logout
     //         } else if (nextPath === '/ready' && (this.state.mode === MODE_GUEST_CALL || this.state.mode === MODE_GUEST_CONFERENCE)) {
     //             this.changeRoute('/logout');
     //             this.forceUpdate();
     //         }
     //     }
     //     this.prevPath = nextPath;
     // }
 
     render() {
         //utils.timestampedLog('Render main app');
         let footerBox = <View style={styles.footer}><FooterBox /></View>;
 
         let extraStyles = {};
 
         if (this.state.localMedia || this.state.registrationState === 'registered') {
            footerBox = null;
         }
 
         return (
             <BreadProvider>
                 <PaperProvider theme={theme}>
                     <Router history={history} ref="router">
                         <ImageBackground source={backgroundImage} style={{width: '100%', height: '100%'}}>
                                     <View style={mainStyle.MainContainer} onLayout={(event) => this.setState({
                                                                             Width_Layout : event.nativeEvent.layout.width,
                                                                             Height_Layout : event.nativeEvent.layout.height
                                                                            }, ()=> this._detectOrientation())}>
                             <SafeAreaView style={[styles.root, extraStyles]}>
 
                                 <LoadingScreen
                                 text={this.state.loading}
                                 show={this.state.loading !== null}
                                 orientation={this.state.orientation}
                                 isTablet={this.state.isTablet}
                                 />
 
                                 <IncomingCallModal
                                     call={this.state.inboundCall}
                                     onAccept={this.callKeepAcceptCall}
                                     onReject={this.callKeepRejectCall}
                                     show={this.state.showIncomingModal}
                                     contacts = {this.contacts}
                                 />
 
                                 {/* <Locations hash={this.shouldUseHashRouting}  onBeforeNavigation={this.checkRoute}> */}
                                 <Switch>
                                     <Route exact path="/" component={this.main} />
                                     <Route exact path="/login" component={this.login} />
                                     <Route exact path="/logout" component={this.logout} />
                                     <Route exact path="/ready" component={this.ready} />
                                     <Route exact path="/call" component={this.call} />
                                     <Route path="/call/:targetUri" component={this.callByUri} />
                                     {/* <Location path="/call/:targetUri" urlPatternOptions={{segmentValueCharset: 'a-zA-Z0-9-_ \.@'}} handler={this.callByUri} /> */}
                                     <Route exact path="/conference" component={this.conference} />
                                     <Route path="/conference/:targetUri" component={this.conferenceByUri} />
                                     {/* <Location path="/conference/:targetUri" urlPatternOptions={{segmentValueCharset: 'a-zA-Z0-9-_~ %\.@'}}  handler={this.conferenceByUri} /> */}
                                     <Route exact path="/preview" component={this.preview} />
                                     <Route component={this.notFound} />
                                 </Switch>
 
                                 <NotificationCenter ref="notificationCenter" />
 
                             </SafeAreaView>
                             </View>
                         </ImageBackground>
                     </Router>
                 </PaperProvider>
             </BreadProvider>
         );
     }
 
     notFound(match) {
 
         const status = {
             title   : '404',
             message : 'Oops, the page your looking for can\'t found',
             level   : 'danger',
             width   : 'large'
         }
         return (
             <StatusBox
                 {...status}
             />
         );
     }
 
     saveHistoryForLater(history) {
         //console.log('Cache history for later', history.length)
         this.cachedHistory = history;
         storage.set('cachedHistory', history);
     }
 
     ready() {
         if (!this.state.account) {
             return null;
         }
 
         return (
             <Fragment>
                 <NavigationBar
                     notificationCenter = {this.notificationCenter}
                     account = {this.state.account}
                     logout = {this.logout}
                     preview = {this.startPreview}
                     connection = {this.state.connection}
                     registration = {this.state.registrationState}
                     orientation = {this.state.orientation}
                     isTablet = {this.state.isTablet}
                 />
                 <ReadyBox
                     account = {this.state.account}
                     password = {this.state.password}
                     config = {config}
                     startCall = {this.callKeepStartCall}
                     startConference = {this.callKeepStartConference}
                     missedTargetUri = {this.state.missedTargetUri}
                     orientation = {this.state.orientation}
                     contacts = {this.contacts}
                     isTablet = {this.state.isTablet}
                     localHistory = {this.state.localHistory}
                     refreshHistory = {this.state.refreshHistory}
                     cacheHistory = {this.saveHistoryForLater}
                     serverHistory = {this.cachedHistory}
                     myDisplayName = {this.state.myDisplayName}
                     myPhoneNumber = {this.state.myPhoneNumber}
                     deleteHistoryEntry = {this.deleteHistoryEntry}
                     setFavoriteUri = {this.setFavoriteUri}
                     setBlockedUri = {this.setBlockedUri}
                     favoriteUris = {this.state.favoriteUris}
                     blockedUris = {this.state.blockedUris}
                 />
             </Fragment>
         );
     }
 
     preview() {
         return (
             <Fragment>
                 <Preview
                     localMedia = {this.state.localMedia}
                     hangupCall = {this.hangupCall}
                     setDevice = {this.setDevice}
                     selectedDevices = {this.state.devices}
                 />
             </Fragment>
         );
     }
 
     call() {
         return (
             <Call
                 account = {this.state.account}
                 targetUri = {this.state.targetUri}
                 call = {this.state.currentCall || this.state.inboundCall}
+                connection = {this.state.connection}
                 localMedia = {this.state.localMedia}
                 escalateToConference = {this.escalateToConference}
                 hangupCall = {this.hangupCall}
                 // shareScreen = {this.switchScreensharing}
                 generatedVideoTrack = {this.state.generatedVideoTrack}
                 callKeepSendDtmf = {this.callKeepSendDtmf}
                 callKeepToggleMute = {this.callKeepToggleMute}
                 callKeepStartCall = {this.callKeepStartCall}
                 toggleSpeakerPhone = {this.toggleSpeakerPhone}
                 speakerPhoneEnabled = {this.state.speakerPhoneEnabled}
                 speakerphoneOn = {this.speakerphoneOn}
                 speakerphoneOff = {this.speakerphoneOff}
                 callUUID = {this.state.outgoingCallUUID}
                 contacts = {this.contacts}
                 intercomDtmfTone = {this.intercomDtmfTone}
                 orientation = {this.state.orientation}
                 isTablet = {this.state.isTablet}
             />
         )
     }
 
     callByUri(urlParameters) {
         // check if the uri contains a domain
         if (urlParameters.targetUri.indexOf('@') === -1) {
             const status = {
                 title   : 'Invalid user',
                 message : `Oops, the domain of the user is not set in '${urlParameters.targetUri}'`,
                 level   : 'danger',
                 width   : 'large'
             }
             return (
                 <StatusBox {...status} />
             );
         }
         return (
             <CallByUriBox
                 handleCallByUri = {this.handleCallByUri}
                 notificationCenter = {this.notificationCenter}
                 targetUri = {urlParameters.targetUri}
                 localMedia = {this.state.localMedia}
                 account = {this.state.account}
                 currentCall = {this.state.currentCall}
                 hangupCall = {this.hangupCall}
                 // shareScreen = {this.switchScreensharing}
                 generatedVideoTrack = {this.state.generatedVideoTrack}
             />
         );
     }
 
     conference() {
         let _previousParticipants = new Set();
 
         if (this.myParticipants) {
             let room = this.state.targetUri.split('@')[0];
             if (this.myParticipants.hasOwnProperty(room)) {
                 let uris = this.myParticipants[room];
                 if (uris) {
                     uris.forEach((uri) => {
                         if (uri.search(config.defaultDomain) > -1) {
                             let user = uri.split('@')[0];
                             _previousParticipants.add(user);
                         } else {
                             _previousParticipants.add(uri);
                         }
                     });
                 }
             }
         }
 
         if (this.myInvitedParties) {
             let room = this.state.targetUri.split('@')[0];
             if (this.myInvitedParties.hasOwnProperty(room)) {
                 let uris = this.myInvitedParties[room];
                 if (uris) {
                     uris.forEach((uri) => {
                         if (uri.search(config.defaultDomain) > -1) {
                             let user = uri.split('@')[0];
                             _previousParticipants.add(user);
                         } else {
                             _previousParticipants.add(uri);
                         }
                     });
                 }
             }
         }
 
         let previousParticipants = Array.from(_previousParticipants);
 
         return (
             <Conference
                 notificationCenter = {this.notificationCenter}
                 localMedia = {this.state.localMedia}
                 account = {this.state.account}
                 targetUri = {this.state.targetUri}
                 currentCall = {this.state.currentCall}
                 saveParticipant = {this.saveParticipant}
                 saveInvitedParties = {this.saveInvitedParties}
                 previousParticipants = {previousParticipants}
                 participantsToInvite = {this.participantsToInvite}
                 hangupCall = {this.hangupCall}
                 shareScreen = {this.switchScreensharing}
                 generatedVideoTrack = {this.state.generatedVideoTrack}
                 toggleSpeakerPhone = {this.toggleSpeakerPhone}
                 speakerPhoneEnabled = {this.state.speakerPhoneEnabled}
                 callUUID = {this.state.outgoingCallUUID}
                 proposedMedia = {this.state.outgoingMedia}
                 isLandscape = {this.state.orientation === 'landscape'}
                 isTablet = {this.state.isTablet}
             />
         )
     }
 
     conferenceByUri(urlParameters) {
         const targetUri = utils.normalizeUri(urlParameters.targetUri, config.defaultConferenceDomain);
         const idx = targetUri.indexOf('@');
         const uri = {};
         const pattern = /^[A-Za-z0-9\-\_]+$/g;
         uri.user = targetUri.substring(0, idx);
 
         // check if the uri.user is valid
         if (!pattern.test(uri.user)) {
             const status = {
                 title   : 'Invalid conference',
                 message : `Oops, the conference ID is invalid: ${targetUri}`,
                 level   : 'danger',
                 width   : 'large'
             }
             return (
                 <StatusBox
                     {...status}
                 />
             );
         }
 
         return (
             <ConferenceByUriBox
                 notificationCenter = {this.notificationCenter}
                 handler = {this.handleConferenceByUri}
                 targetUri = {targetUri}
                 localMedia = {this.state.localMedia}
                 account = {this.state.account}
                 currentCall = {this.state.currentCall}
                 hangupCall = {this.hangupCall}
                 shareScreen = {this.switchScreensharing}
                 generatedVideoTrack = {this.state.generatedVideoTrack}
             />
         );
     }
 
     login() {
         let registerBox;
         let statusBox;
 
         if (this.state.status !== null) {
             statusBox = (
                 <StatusBox
                     message={this.state.status.msg}
                     level={this.state.status.level}
                 />
             );
         }
 
         if (this.state.registrationState !== 'registered') {
             registerBox = (
                 <RegisterBox
                     registrationInProgress = {this.state.registrationState !== null && this.state.registrationState !== 'failed'}
                     handleRegistration = {this.handleRegistration}
                     autoLogin={true}
                     orientation = {this.state.orientation}
                     isTablet = {this.state.isTablet}
                     phoneNumber= {this.state.phoneNumber}
                 />
             );
         }
 
         return (
             <Fragment>
                 {registerBox}
                 {statusBox}
             </Fragment>
         );
     }
 
     logout() {
         this._callKeepManager.setAvailable(false);
 
         if (this.state.registrationState !== null && (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE)) {
             this.state.account.unregister();
         }
 
         if (this.state.account !== null) {
             this.state.connection.removeAccount(this.state.account, (error) => {
                 if (error) {
                     logger.debug(error);
                 }
             });
         }
         storage.set('account', {accountId: this.state.accountId, password: ''});
         this.serverHistory = [];
         this.setState({account: null,
                        registrationState: null,
                        registrationKeepalive: false,
                        status: null,
                        history: [],
                        localHistory: [],
                        cachedHistory: []
                        });
         this.changeRoute('/login');
         return null;
     }
 
     main() {
         return null;
     }
 }
 
 export default Sylk;
diff --git a/app/assets/styles/blink/_AudioCallBox.scss b/app/assets/styles/blink/_AudioCallBox.scss
index 1035beb..2e5f6aa 100644
--- a/app/assets/styles/blink/_AudioCallBox.scss
+++ b/app/assets/styles/blink/_AudioCallBox.scss
@@ -1,63 +1,71 @@
 .container {
     flex: 1;
 }
 
 .userIconContainer {
     padding-top: 20px;
     margin: 0 auto;
 }
 
+.appbarContainer {
+    backgroundColor: black;
+}
+
 .portraitButtonContainer {
     justify-self: flex-end;
     flex-direction: row;
     margin: 0 auto;
     margin-top:auto;
     bottom: 20;
     margin-bottom: 40px;
 }
 
 .landscapeButtonContainer {
     justify-self: flex-end;
     flex-direction: row;
     margin: 0 auto;
     margin-top:auto;
-    bottom: 20;
+    bottom: 10;
     margin-bottom: 0px;
 }
 
+.activity {
+    margin-top: 30px;
+}
+
 .button {
     background-color: white;
     margin: 10px;
     padding-top: 5px;
     padding-left: 0px;
 }
 
 .iosButton {
     background-color: rgba(#F9F9F9, .7);
     margin: 10px;
     padding-top: 5px;
 }
 
 .androidButton {
     background-color: rgba(#F9F9F9, .7);
     margin: 10px;
     padding-top: 1px;
 }
 
 .hangupButton {
     background-color: rgba(#a94442, .8);
 }
 
 .displayName {
     padding-top: 10px;
     font-size: 30px;
     text-align: center;
     color: white;
 }
 .uri {
     padding: 0px;
     font-size: 18px;
     text-align: center;
     color: white;
 }
 
diff --git a/app/components/AudioCallBox.js b/app/components/AudioCallBox.js
index ccede38..4e73bb0 100644
--- a/app/components/AudioCallBox.js
+++ b/app/components/AudioCallBox.js
@@ -1,237 +1,269 @@
 import React, { Component } from 'react';
 import { View, Platform } from 'react-native';
-import { IconButton, Dialog, Text } from 'react-native-paper';
+import { IconButton, Dialog, Text, ActivityIndicator, Colors } from 'react-native-paper';
+
 import PropTypes from 'prop-types';
 import autoBind from 'auto-bind';
 
 import Logger from "../../Logger";
 import CallOverlay from './CallOverlay';
 import DTMFModal from './DTMFModal';
 import EscalateConferenceModal from './EscalateConferenceModal';
 import UserIcon from './UserIcon';
 
 import utils from '../utils';
 
 import styles from '../assets/styles/blink/_AudioCallBox.scss';
 
-
 const logger = new Logger("AudioCallBox");
 
 
 class AudioCallBox extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
+
+        this.userHangup = false;
+
         this.state = {
             active                      : false,
             audioMuted                  : false,
             showDtmfModal               : false,
             showEscalateConferenceModal : false
         };
         // this.speechEvents = null;
 
         this.remoteAudio = React.createRef();
     }
 
     componentDidMount() {
         // This component is used both for as 'local media' and as the in-call component.
         // Thus, if the call is not null it means we are beyond the 'local media' phase
         // so don't call the mediaPlaying prop.
 
         if (this.props.call != null) {
             switch (this.props.call.state) {
                 case 'established':
                     this.attachStream(this.props.call);
                     break;
                 case 'incoming':
                     this.props.mediaPlaying();
                     // fall through
                 default:
                     this.props.call.on('stateChanged', this.callStateChanged);
                     break;
             }
         } else {
             this.props.mediaPlaying();
         }
     }
 
     componentWillUnmount() {
         if (this.props.call != null) {
             this.props.call.removeListener('stateChanged', this.callStateChanged);
         }
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (this.props.call == null && nextProps.call) {
             if (nextProps.call.state === 'established') {
                 this.attachStream(nextProps.call);
             } else {
                 nextProps.call.on('stateChanged', this.callStateChanged);
             }
         }
     }
 
     componentWillUnmount() {
         if (this.props.call != null) {
             this.props.call.removeListener('stateChanged', this.callStateChanged);
         }
                 clearTimeout(this.callTimer);
         // if (this.speechEvents !== null) {
         //     this.speechEvents.stop();
         //     this.speechEvents = null;
         // }
     }
 
     callStateChanged(oldState, newState, data) {
         if (newState === 'established') {
             this.attachStream(this.props.call);
         }
     }
 
     attachStream(call) {
         this.setState({stream: call.getRemoteStreams()[0]}); //we dont use it anywhere though as audio gets automatically piped
         // const options = {
         //     interval: 225,
         //     play: false
         // };
         // this.speechEvents = hark(remoteStream, options);
         // this.speechEvents.on('speaking', () => {
         //     this.setState({active: true});
         // });
         // this.speechEvents.on('stopped_speaking', () => {
         //     this.setState({active: false});
         // });
     }
 
     escalateToConference(participants) {
         this.props.escalateToConference(participants);
     }
 
     hangupCall(event) {
         event.preventDefault();
-        this.props.hangupCall();
+        this.props.hangupCall('user_press_hangup');
+        this.userHangup = true;
+    }
+
+    cancelCall(event) {
+        event.preventDefault();
+        this.props.hangupCall('user_cancelled');
     }
 
     muteAudio(event) {
         event.preventDefault();
         const localStream = this.props.call.getLocalStreams()[0];
         const track = localStream.getAudioTracks()[0];
 
         if(this.state.audioMuted) {
             //console.log('Unmute microphone');
             this.props.callKeepToggleMute(false);
             track.enabled = true;
             this.setState({audioMuted: false});
         } else {
             //console.log('Mute microphone');
             track.enabled = false;
             this.props.callKeepToggleMute(true);
             this.setState({audioMuted: true});
         }
     }
 
     showDtmfModal() {
         this.setState({showDtmfModal: true});
     }
 
     hideDtmfModal() {
         this.setState({showDtmfModal: false});
     }
 
     toggleEscalateConferenceModal() {
         this.setState({
             showEscalateConferenceModal: !this.state.showEscalateConferenceModal
         });
     }
 
     render() {
         let remoteIdentity = {uri: this.props.remoteUri,
                               displayName: this.props.remoteDisplayName};
 
         const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
         let displayName = (this.props.remoteDisplayName && this.props.remoteUri !== this.props.remoteDisplayName) ? this.props.remoteDisplayName: this.props.remoteUri;
         let buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer;
 
         return (
             <View style={styles.container}>
                 <CallOverlay style={styles.callStatus}
                     show={true}
                     remoteUri={this.props.remoteUri}
                     remoteDisplayName={this.props.remoteDisplayName}
                     call={this.props.call}
+                    connection={this.props.connection}
+                    accountId={this.props.accountId}
                 />
                 <View style={styles.userIconContainer}>
                     <UserIcon identity={remoteIdentity} large={true} active={this.state.active} />
                 </View>
                 <Dialog.Title style={styles.displayName}>{displayName}</Dialog.Title>
                 { (this.props.remoteDisplayName && this.props.remoteUri !== this.props.remoteDisplayName) ?
+
                 <Text style={styles.uri}>{this.props.remoteUri}</Text>
                 : null }
 
-                <View style={buttonContainerClass}>
+                {this.props.orientation !== 'landscape' && !this.userHangup && (!this.props.call || (this.props.call && this.props.call.state !== 'established')) ?
+                <ActivityIndicator style={styles.activity} animating={true} size={'large'} color={Colors.red800} />
+                :
+                null
+                }
+
+                {this.props.call && this.props.call.state === 'established' ?
+                    <View style={buttonContainerClass}>
                     <IconButton
                         size={34}
                         style={buttonClass}
                         icon="account-plus"
                         onPress={this.toggleEscalateConferenceModal}
                     />
                     <IconButton
                         size={34}
                         style={buttonClass}
                         icon={this.state.audioMuted ? 'microphone-off' : 'microphone'}
                         onPress={this.muteAudio}
                     />
                     <IconButton
                         size={34}
                         style={buttonClass}
                         icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
                         onPress={this.props.toggleSpeakerPhone}
                     />
                     <IconButton
                         size={34}
                         style={buttonClass}
                         icon="dialpad"
                         onPress={this.showDtmfModal}
                         disabled={!(this.props.call && this.props.call.state === 'established')}
                     />
                     <IconButton
                         size={34}
                         style={[buttonClass, styles.hangupButton]}
                         icon="phone-hangup"
                         onPress={this.hangupCall}
                     />
-                </View>
+                    </View>
+                    :
+                    <View style={buttonContainerClass}>
+                    <IconButton
+                        size={34}
+                        style={[buttonClass, styles.hangupButton]}
+                        icon="phone-hangup"
+                        onPress={this.cancelCall}
+                    />
+                    </View>
+                }
+
                 <DTMFModal
                     show={this.state.showDtmfModal}
                     hide={this.hideDtmfModal}
                     call={this.props.call}
                     callKeepSendDtmf={this.props.callKeepSendDtmf}
                 />
                 <EscalateConferenceModal
                     show={this.state.showEscalateConferenceModal}
                     call={this.props.call}
                     close={this.toggleEscalateConferenceModal}
                     escalateToConference={this.escalateToConference}
                 />
             </View>
         );
     }
 }
 
 AudioCallBox.propTypes = {
     remoteUri               : PropTypes.string.isRequired,
     remoteDisplayName       : PropTypes.string,
     call                    : PropTypes.object,
+    connection              : PropTypes.object,
+    accountId               : PropTypes.string,
     escalateToConference    : PropTypes.func,
     hangupCall              : PropTypes.func,
     mediaPlaying            : PropTypes.func,
     callKeepSendDtmf        : PropTypes.func,
     callKeepToggleMute      : PropTypes.func,
     toggleSpeakerPhone      : PropTypes.func,
     speakerPhoneEnabled     : PropTypes.bool,
     orientation             : PropTypes.string,
     isTablet                : PropTypes.bool
 };
 
 export default AudioCallBox;
diff --git a/app/components/Call.js b/app/components/Call.js
index 2ba2bd8..87e8050 100644
--- a/app/components/Call.js
+++ b/app/components/Call.js
@@ -1,279 +1,379 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import assert from 'assert';
 import debug from 'react-native-debug';
 import autoBind from 'auto-bind';
+import uuid from 'react-native-uuid';
 
 import Logger from "../../Logger";
 import AudioCallBox from './AudioCallBox';
 import LocalMedia from './LocalMedia';
 import VideoBox from './VideoBox';
 import config from '../config';
+import utils from '../utils';
 
 const logger = new Logger("Call");
 
 
 class Call extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
+        this.waitCounter = 0;
+        this.waitInterval = 20;
+
         let audioOnly = false;
         if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) {
             //logger.debug('Will send audio only');
             audioOnly = true;
         }
 
         let remoteUri = '';
         let remoteDisplayName = '';
+        let callState = null;
+        let direction = 'outgoing';
+        let callUUID;
 
         if (this.props.call !== null) {
             // If current call is available on mount we must have incoming
             this.props.call.on('stateChanged', this.callStateChanged);
+            callState = this.props.call.state;
             remoteUri = this.props.call.remoteIdentity.uri;
+            direction = this.props.call.direction;
+            callUUID = this.props.call.id;
             remoteDisplayName = this.props.call.remoteIdentity.displayName;
         } else {
             remoteUri = this.props.targetUri;
             remoteDisplayName = this.props.targetUri;
+            callUUID = this.props.callUUID;
+        }
+
+        if (this.props.connection) {
+            this.props.connection.on('stateChanged', this.connectionStateChanged);
         }
 
         this.state = {
                       audioOnly: audioOnly,
                       remoteUri: remoteUri,
-                      remoteDisplayName: remoteDisplayName
+                      remoteDisplayName: remoteDisplayName,
+                      connection: this.props.connection,
+                      accountId: this.props.account.id,
+                      callState: callState,
+                      direction: direction,
+                      callUUID: callUUID
                       }
-
     }
 
     lookupContact() {
         // console.log('Lookup contact');
         let remoteUri = '';
         let remoteDisplayName = '';
 
         if (this.props.call !== null) {
             remoteUri = this.props.call.remoteIdentity.uri;
             remoteDisplayName = this.props.call.remoteIdentity.displayName || this.props.call.remoteIdentity.uri;
-            console.log('Incoming call remoteUri', remoteUri);
-            console.log('Incoming call remoteDisplayName', remoteDisplayName);
+            //console.log('Incoming call remoteUri', remoteUri);
+            //console.log('Incoming call remoteDisplayName', remoteDisplayName);
         } else {
             remoteUri = this.props.targetUri;
             remoteDisplayName = this.props.targetUri;
         }
 
         if (remoteUri.indexOf('3333@') > -1) {
             remoteDisplayName = 'Video Test';
         } else if (remoteUri.indexOf('4444@') > -1) {
             remoteDisplayName = 'Echo Test';
         } else if (this.props.contacts) {
             let username = remoteUri.split('@')[0];
             let isPhoneNumber = username.match(/^(\+|0)(\d+)$/);
 
             if (isPhoneNumber) {
                 var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username);
             } else {
                 var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', remoteUri);
             }
 
             if (contact_obj) {
                 remoteDisplayName = contact_obj.displayName;
                 this.setState({remoteDisplayName: remoteDisplayName});
                 if (isPhoneNumber) {
                     remoteUri = username;
                 }
             } else {
                 if (isPhoneNumber) {
                     remoteUri = username;
                     remoteDisplayName = username;
                 }
             }
         }
 
         this.setState({remoteDisplayName: remoteDisplayName,
                        remoteUri: remoteUri
                        });
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         // Needed for switching to incoming call while in a call
         if (this.props.call != null && this.props.call != nextProps.currentCall) {
             if (nextProps.currentCall != null) {
                 nextProps.currentCall.on('stateChanged', this.callStateChanged);
             }
         }
     }
 
     callStateChanged(oldState, newState, data) {
-        // console.log('Call: callStateChanged', newState, '->', newState);
+        //console.log('Call: callStateChanged', oldState, '->', newState);
         if (newState === 'established') {
             // Check the media type again, remote can choose to not accept all offered media types
             const currentCall = this.props.call;
             const remoteHasStreams = currentCall.getRemoteStreams().length > 0;
             const remoteHasNoVideoTracks = currentCall.getRemoteStreams()[0].getVideoTracks().length === 0;
             const remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly';
             const remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive';
 
             if (remoteHasStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) {
-                console.log('Media type changed to audio');
+                //console.log('Media type changed to audio');
                 // Stop local video
                 if (this.props.localMedia.getVideoTracks().length !== 0) {
                     currentCall.getLocalStreams()[0].getVideoTracks()[0].stop();
                 }
                 this.setState({audioOnly: true});
                 this.props.speakerphoneOff();
             } else {
                 this.forceUpdate();
             }
             currentCall.removeListener('stateChanged', this.callStateChanged);
         // Switch to video earlier. The callOverlay has a handle on
         // 'established'. It starts a timer. To prevent a state updating on
         // unmounted component we try to switch on 'accept'. This means we get
         // to localMedia first.
         } else if (newState === 'accepted') {
             // Switch if we have audioOnly and local videotracks. This means
             // the call object switched and we are transitioning to an
             // incoming call.
             if (this.state.audioOnly &&  this.props.localMedia && this.props.localMedia.getVideoTracks().length !== 0) {
-                console.log('Media type changed to video on accepted');
+                //console.log('Media type changed to video on accepted');
                 this.setState({audioOnly: false});
                 this.props.speakerphoneOn();
             }
         }
+
         this.forceUpdate();
     }
 
+    connectionStateChanged(oldState, newState) {
+        utils.timestampedLog('Call: connection state changed:', oldState, '->' , newState);
+        switch (newState) {
+            case 'closed':
+                break;
+            case 'ready':
+                break;
+            case 'disconnected':
+                let callUUID = uuid.v4();
+                this.setState({callUUID: callUUID});
+                if (oldState === 'ready' && this.state.direction === 'outgoing') {
+                    utils.timestampedLog('Call: reconnecting the call using new UUID', callUUID);
+                    this.waitInterval = 20;
+                    this.startCallWhenReady();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+
     findObjectByKey(array, key, value) {
         for (var i = 0; i < array.length; i++) {
             if (array[i][key] === value) {
                 return array[i];
             }
         }
         return null;
     }
 
+    async startCallWhenReady() {
+        utils.timestampedLog('Call: start call', this.props.callUUID, 'when ready to', this.props.targetUri);
+        this.waitCounter = 0;
+
+        utils.timestampedLog('Call: waiting for establishing call', this.waitInterval, 'seconds');
+
+        let diff = 0;
+
+        while (this.waitCounter < this.waitInterval) {
+            //console.log('Call: connection', this.props.connection);
+            //console.log('Call: account', this.props.account);
+
+            if (!this.props.connection || this.props.connection.state !== 'ready' || this.props.account === null) {
+                utils.timestampedLog('Call: waiting for connection', this.waitInterval - this.waitCounter, 'seconds');
+                await this._sleep(1000);
+            } else {
+                //this._notificationCenter.postSystemNotification('Server is ready', {timeout: 1});
+                this.waitCounter = 0;
+                this.call();
+                return;
+            }
+
+            if (this.waitCounter >= this.waitInterval - 1) {
+                utils.timestampedLog('Call: terminating call', this.props.callUUID, 'that did not start yet');
+                this.hangupCall('timeout');
+            }
+
+            this.waitCounter++;
+        }
+    }
+
+    _sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
     call() {
-        //console.log('Call: Make new call');
+        //console.log('Call: creating new call', this.props.callUUID);
         assert(this.props.call === null, 'currentCall is not null');
 
         this.lookupContact();
 
         let options = {pcConfig: {iceServers: config.iceServers}, id: this.props.callUUID};
         options.localStream = this.props.localMedia;
+
         let call = this.props.account.call(this.props.targetUri, options);
+        console.log('Call: call initiated', call.id);
         call.on('stateChanged', this.callStateChanged);
     }
 
     answerCall() {
         //console.log('Call: Answer call');
         assert(this.props.call !== null, 'currentCall is null');
 
         this.lookupContact();
 
         let options = {pcConfig: {iceServers: config.iceServers}};
         options.localStream = this.props.localMedia;
         this.props.call.answer(options);
     }
 
-    hangupCall() {
-        let callUUID = this.props.call._callkeepUUID;
-        this.props.call.removeListener('stateChanged', this.callStateChanged);
-        this.props.hangupCall(callUUID);
+    hangupCall(reason) {
+        let callUUID = this.props.call ? this.props.call._callkeepUUID : this.state.callUUID;
+        this.waitInterval = 20;
+
+        this.props.callUUID || this.props.call._callkeepUUID;
+        console.log('Call: hangup call', callUUID, 'reason', reason);
+
+        if (this.props.call) {
+            this.props.call.removeListener('stateChanged', this.callStateChanged);
+        }
+
+        if (this.props.connection) {
+            this.props.connection.removeListener('stateChanged', this.connectionStateChanged);
+        }
+
+        if (this.waitCounter > 0) {
+            this.waitCounter = this.waitInterval;
+        }
+
+        this.props.hangupCall(callUUID, reason);
     }
 
     mediaPlaying() {
         if (this.props.call === null) {
-            this.call();
+            this.startCallWhenReady();
         } else {
             this.answerCall();
         }
     }
 
     render() {
-        //console.log('Call: render call to', this.state.remoteUri);
+        //console.log('Call: render', this.state.direction, 'call', this.props.callUUID, 'to', this.state.remoteUri);
+
         let box = null;
 
         if (this.props.localMedia !== null) {
             if (this.state.audioOnly) {
                 box = (
                     <AudioCallBox
                         remoteUri = {this.state.remoteUri}
                         remoteDisplayName = {this.state.remoteDisplayName}
                         hangupCall = {this.hangupCall}
                         call = {this.props.call}
+                        accountId={this.state.accountId}
+                        connection = {this.props.connection}
                         mediaPlaying = {this.mediaPlaying}
                         escalateToConference = {this.props.escalateToConference}
                         callKeepSendDtmf = {this.props.callKeepSendDtmf}
                         callKeepToggleMute = {this.props.callKeepToggleMute}
                         speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
                         toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
                         orientation = {this.props.orientation}
                         isTablet = {this.props.isTablet}
                     />
                 );
             } else {
                 if (this.props.call != null && this.props.call.state === 'established') {
                     box = (
                         <VideoBox
-                            call = {this.props.call}
                             remoteUri = {this.state.remoteUri}
                             remoteDisplayName = {this.state.remoteDisplayName}
+                            hangupCall = {this.hangupCall}
+                            call = {this.props.call}
+                            accountId={this.state.accountId}
+                            connection = {this.props.connection}
                             localMedia = {this.props.localMedia}
                             shareScreen = {this.props.shareScreen}
-                            hangupCall = {this.hangupCall}
                             escalateToConference = {this.props.escalateToConference}
                             generatedVideoTrack = {this.props.generatedVideoTrack}
                             callKeepSendDtmf = {this.props.callKeepSendDtmf}
                             callKeepToggleMute = {this.props.callKeepToggleMute}
                             speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
                             toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
                             intercomDtmfTone = {this.props.intercomDtmfTone}
                             orientation = {this.props.orientation}
                             isTablet = {this.props.isTablet}
                         />
                     );
                 } else {
-                    //console.log('Will render local media');
                     if (this.props.call && this.props.call.state && this.props.call.state === 'terminated') {
                         // do not render
                     } else {
                         box = (
                             <LocalMedia
                                 remoteUri = {this.state.remoteUri}
                                 remoteDisplayName = {this.state.remoteDisplayName}
                                 localMedia = {this.props.localMedia}
                                 mediaPlaying = {this.mediaPlaying}
                                 hangupCall = {this.hangupCall}
                                 generatedVideoTrack = {this.props.generatedVideoTrack}
                             />
                         );
                     }
                 }
             }
         }
         return box;
     }
 }
 
 Call.propTypes = {
     targetUri               : PropTypes.string.isRequired,
-    account                 : PropTypes.object.isRequired,
-    hangupCall              : PropTypes.func.isRequired,
+    account                 : PropTypes.object,
+    hangupCall              : PropTypes.func,
+    connection              : PropTypes.object,
     call                    : PropTypes.object,
     localMedia              : PropTypes.object,
     shareScreen             : PropTypes.func,
     escalateToConference    : PropTypes.func,
     generatedVideoTrack     : PropTypes.bool,
     callKeepSendDtmf        : PropTypes.func,
     callKeepToggleMute      : PropTypes.func,
     speakerphoneOn          : PropTypes.func,
     speakerphoneOff         : PropTypes.func,
     callUUID                : PropTypes.string,
     contacts                : PropTypes.array,
     intercomDtmfTone        : PropTypes.string,
     orientation             : PropTypes.string,
     isTablet                : PropTypes.bool
 };
 
 
 export default Call;
diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js
index c4d239d..390c91f 100644
--- a/app/components/CallOverlay.js
+++ b/app/components/CallOverlay.js
@@ -1,144 +1,175 @@
 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
+            callState: null,
+            direction: this.props.call ? this.props.call.direction : 'outgoing'
         }
 
         this.duration = null;
+        this.finalDuration = null;
         this.timer = null;
         this._isMounted = true;
+        this.reconnecting = false;
 
         if (this.props.call) {
             this.props.call.on('stateChanged', this.callStateChanged);
         }
     }
 
     componentDidMount() {
         if (this.props.call) {
             if (this.props.call.state === 'established') {
                 this.startTimer();
             } else if (this.props.call.state !== 'terminated') {
                 this.props.call.on('stateChanged', this.callStateChanged);
             }
         }
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (this.props.call == null && nextProps.call) {
             if (nextProps.call.state !== 'terminated') {
                 nextProps.call.on('stateChanged', this.callStateChanged);
             }
         }
     }
 
     componentWillUnmount() {
         if (this.props.call) {
             this.props.call.removeListener('stateChanged', this.callStateChanged);
         }
         this._isMounted = false;
         clearTimeout(this.timer);
     }
 
     callStateChanged(oldState, newState, data) {
-        // Prevent starting timer when we are unmounted
+        //console.log('Overlay: callStateChanged', newState, '->', newState);
         if (newState === 'established' && this._isMounted) {
             this.startTimer();
         }
 
         if (newState === 'terminated') {
-            this.props.call.removeListener('stateChanged', this.callStateChanged);
-        } else {
-            this.setState({callState: newState});
+            if (this.props.call) {
+                this.props.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');
         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 !== null) {
+
+            if (this.duration) {
                 callDetail = <View><Icon name="clock"/><Text>{this.duration}</Text></View>;
                 callDetail = 'Duration:' + this.duration;
             } else {
-                callDetail = this.state.callState ? toTitleCase(this.state.callState) : 'Connecting...';
+                if (!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;
+                    } else {
+                        callDetail = this.state.callState ? toTitleCase(this.state.callState) : 'Connecting...';
+                    }
+                }
             }
 
             if (this.props.remoteUri.search('videoconference') > -1) {
                 header = (
                     <Appbar.Header style={{backgroundColor: 'black'}}>
                         <Appbar.Content
                             title={`Conference: ${displayName}`} subtitle={callDetail}
                         />
                     </Appbar.Header>
                 );
             } else {
                 header = (
-                    <Appbar.Header style={{backgroundColor: 'black'}}>
+                    <Appbar.Header style={styles.appbarContainer}>
                         <Appbar.Content
                             title={`Call with ${displayName}`} subtitle={callDetail}
                         />
                     </Appbar.Header>
                 );
             }
         }
 
         return header
     }
 }
 
 CallOverlay.propTypes = {
     show: PropTypes.bool.isRequired,
     remoteUri: PropTypes.string.isRequired,
     remoteDisplayName: PropTypes.string,
-    call: PropTypes.object
+    accountId: PropTypes.string,
+    call: PropTypes.object,
+    connection: PropTypes.object
 };
 
 
 export default CallOverlay;
diff --git a/app/components/HistoryTileBox.js b/app/components/HistoryTileBox.js
index a37e9c5..1cb2453 100644
--- a/app/components/HistoryTileBox.js
+++ b/app/components/HistoryTileBox.js
@@ -1,454 +1,453 @@
 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;
     }
 
     getBlockedContacts() {
         let blockedContacts = [];
         let contact_obj;
         let displayName;
         let label;
 
         this.state.blockedUris.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;
 
             const item = {
                 remoteParty: uri,
                 displayName: displayName,
                 conference: false,
                 type: 'contact',
                 label: label,
                 id: uuid.v4(),
                 tags: ['blocked']
                 };
             blockedContacts.push(item);
         });
 
         return blockedContacts;
     }
 
     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');
         // TODO: render blocked and favorites also when there is no history
 
         //console.log('Favorite URIs', this.state.favoriteUris);
         //console.log('blockedUris URIs', this.state.blockedUris);
 
         let history = [];
         let searchExtraItems = [];
         let items = [];
 
         if (this.props.filter === 'favorite') {
             let favoriteContacts = this.getFavoriteContacts();
             items = favoriteContacts.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
         } else if (this.props.filter === 'blocked') {
             let blockedContacts = this.getBlockedContacts();
             items = blockedContacts.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
 
         } 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);
                 }
             }
 
             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.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);
             }
 
         });
 
         let filteredItems = [];
         items.forEach((item) => {
             if (this.props.filter && item.tags.indexOf(this.props.filter) > -1) {
                 filteredItems.push(item);
             } else if (this.state.blockedUris.indexOf(item.remoteParty) === -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}
                 listKey={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/VideoBox.js b/app/components/VideoBox.js
index e7e94ae..a32ec4e 100644
--- a/app/components/VideoBox.js
+++ b/app/components/VideoBox.js
@@ -1,411 +1,428 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import debug from 'react-native-debug';
 import autoBind from 'auto-bind';
-import { IconButton } from 'react-native-paper';
+import { IconButton, ActivityIndicator, Colors } from 'react-native-paper';
 import { View, Dimensions, TouchableOpacity, Platform  } from 'react-native';
 import { RTCView } from 'react-native-webrtc';
 
 import CallOverlay from './CallOverlay';
 import EscalateConferenceModal from './EscalateConferenceModal';
 import DTMFModal from './DTMFModal';
 import config from '../config';
 import dtmf from 'react-native-dtmf';
 
 import styles from '../assets/styles/blink/_VideoBox.scss';
 
 const DEBUG = debug('blinkrtc:Video');
 debug.enable('*');
 
 class VideoBox extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
+        this.userHangup = false;
         this.state = {
             callOverlayVisible: true,
             audioMuted: false,
             videoMuted: false,
             localVideoShow: false,
             remoteVideoShow: false,
             remoteSharesScreen: false,
             showEscalateConferenceModal: false,
             localStream: null,
             remoteStream: null,
             showDtmfModal: false,
             doorOpened: false
         };
 
         this.overlayTimer = null;
         this.localVideo = React.createRef();
         this.remoteVideo = React.createRef();
     }
 
     callStateChanged(oldState, newState, data) {
         DEBUG(`Call state changed ${oldState} -> ${newState}`);
         if (newState === 'established') {
             this.forceUpdate();
         }
     }
 
     openDoor() {
         const tone = this.props.intercomDtmfTone;
         DEBUG('DTMF tone sent to intercom: ' + tone);
         this.setState({doorOpened: true});
         this.forceUpdate();
 
         dtmf.stopTone(); //don't play a tone at the same time as another
         dtmf.playTone(dtmf['DTMF_' + tone], 1000);
 
         if (this.props.call !== null && this.props.call.state === 'established') {
             this.props.call.sendDtmf(tone);
             /*this.props.notificationCenter.postSystemNotification('Door opened', {timeout: 5});*/
         }
     }
 
     componentDidMount() {
-
         console.log('localStreams', this.props.call.getLocalStreams());
         console.log('remoteStreams', this.props.call.getRemoteStreams());
 
-        this.setState({localStream: this.props.call.getLocalStreams()[0], localVideoShow: true, remoteStream: this.props.call.getRemoteStreams()[0], remoteVideoShow: true});
+        this.setState({localStream: this.props.call.getLocalStreams()[0],
+                       localVideoShow: true,
+                       remoteStream: this.props.call.getRemoteStreams()[0],
+                       remoteVideoShow: true});
 
         this.props.call.on('stateChanged', this.callStateChanged);
 
 
         // sylkrtc.utils.attachMediaStream(, this.localVideo.current, {disableContextMenu: true});
         // let promise =  this.localVideo.current.play()
         // if (promise !== undefined) {
         //     promise.then(_ => {
         //         this.setState({localVideoShow: true});    // eslint-disable-line react/no-did-mount-set-state
         //         // Autoplay started!
         //     }).catch(error => {
         //         // Autoplay was prevented.
         //         // Show a "Play" button so that user can start playback.
         //     });
         // } else {
         //     this.localVideo.current.addEventListener('playing', () => {
         //         this.setState({});    // eslint-disable-line react/no-did-mount-set-state
         //     });
         // }
 
         // this.remoteVideo.current.addEventListener('playing', this.handleRemoteVideoPlaying);
         // sylkrtc.utils.attachMediaStream(this.props.call.getRemoteStreams()[0], this.remoteVideo.current, {disableContextMenu: true});
     }
 
     componentWillUnmount() {
         // clearTimeout(this.overlayTimer);
         // this.remoteVideo.current.removeEventListener('playing', this.handleRemoteVideoPlaying);
         // this.exitFullscreen();
         if (this.props.call != null) {
             this.props.call.removeListener('stateChanged', this.callStateChanged);
         }
     }
 
     showDtmfModal() {
         this.setState({showDtmfModal: true});
     }
 
     hideDtmfModal() {
         this.setState({showDtmfModal: false});
     }
 
     handleFullscreen(event) {
         event.preventDefault();
         // this.toggleFullscreen();
     }
 
     handleRemoteVideoPlaying() {
         this.setState({remoteVideoShow: true});
         // this.remoteVideo.current.onresize = (event) => {
         //     this.handleRemoteResize(event)
         // };
         // this.armOverlayTimer();
     }
 
     handleRemoteResize(event, target) {
         //DEBUG("%o", event);
         const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180'];
         const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
         if (resolutions.indexOf(videoResolution) === -1) {
             this.setState({remoteSharesScreen: true});
         } else {
             this.setState({remoteSharesScreen: false});
         }
     }
 
     muteAudio(event) {
         event.preventDefault();
         const localStream = this.state.localStream;
         if (localStream.getAudioTracks().length > 0) {
             const track = localStream.getAudioTracks()[0];
             if(this.state.audioMuted) {
                 DEBUG('Unmute microphone');
                 track.enabled = true;
                 this.props.callKeepToggleMute(false);
                 this.setState({audioMuted: false});
             } else {
                 DEBUG('Mute microphone');
                 track.enabled = false;
                 this.props.callKeepToggleMute(true);
                 this.setState({audioMuted: true});
             }
         }
     }
 
     muteVideo(event) {
         event.preventDefault();
         const localStream = this.state.localStream;
         if (localStream.getVideoTracks().length > 0) {
             const track = localStream.getVideoTracks()[0];
             if(this.state.videoMuted) {
                 DEBUG('Unmute camera');
                 track.enabled = true;
                 this.setState({videoMuted: false});
             } else {
                 DEBUG('Mute camera');
                 track.enabled = false;
                 this.setState({videoMuted: true});
             }
         }
     }
 
     toggleCamera(event) {
         event.preventDefault();
         const localStream = this.state.localStream;
         if (localStream.getVideoTracks().length > 0) {
             const track = localStream.getVideoTracks()[0];
             track._switchCamera();
         }
     }
 
     hangupCall(event) {
         event.preventDefault();
-        this.props.hangupCall();
+        this.props.hangupCall('user_press_hangup');
+        this.userHangup = true;
+    }
+
+    cancelCall(event) {
+        event.preventDefault();
+        this.props.hangupCall('user_cancelled');
     }
 
     escalateToConference(participants) {
         this.props.escalateToConference(participants);
     }
 
     armOverlayTimer() {
         clearTimeout(this.overlayTimer);
         this.overlayTimer = setTimeout(() => {
             this.setState({callOverlayVisible: false});
         }, 4000);
     }
 
     showCallOverlay() {
         if (this.state.remoteVideoShow) {
             this.setState({callOverlayVisible: true});
             this.armOverlayTimer();
         }
     }
 
     toggleEscalateConferenceModal() {
         this.setState({
             callOverlayVisible          : false,
             showEscalateConferenceModal : !this.state.showEscalateConferenceModal
         });
     }
 
     render() {
         if (this.props.call == null) {
             return null;
         }
 
         const localVideoClasses = classNames({
             'video-thumbnail' : true,
             'mirror'          : !this.props.call.sharingScreen && !this.props.generatedVideoTrack,
             'hidden'          : !this.state.localVideoShow,
             'animated'        : true,
             'fadeIn'          : this.state.localVideoShow || this.state.videoMuted,
             'fadeOut'         : this.state.videoMuted,
             'fit'             : this.props.call.sharingScreen
         });
 
         const remoteVideoClasses = classNames({
             'poster'        : !this.state.remoteVideoShow,
             'animated'      : true,
             'fadeIn'        : this.state.remoteVideoShow,
             'large'         : true,
             'fit'           : this.state.remoteSharesScreen
         });
 
         let callButtons;
         let watermark;
 
         if (this.state.callOverlayVisible) {
             // const screenSharingButtonIcons = classNames({
             //     'fa'                    : true,
             //     'fa-clone'              : true,
             //     'fa-flip-horizontal'    : true,
             //     'text-warning'          : this.props.call.sharingScreen
             // });
 
             // const fullScreenButtonIcons = classNames({
             //     'fa'            : true,
             //     'fa-expand'     : !this.isFullScreen(),
             //     'fa-compress'   : this.isFullScreen()
             // });
 
             // const commonButtonClasses = classNames({
             //     'btn'           : true,
             //     'btn-round'     : true,
             //     'btn-default'   : true
             // });
             const buttons = [];
 
             // buttons.push(<Button key="shareScreen" type="button" title="Share screen" className={commonButtonClasses} onPress={this.props.shareScreen}><i className={screenSharingButtonIcons}></i></button>);
             // if (this.isFullscreenSupported()) {
             //     buttons.push(<button key="fsButton" type="button" className={commonButtonClasses} onPress={this.handleFullscreen}> <i className={fullScreenButtonIcons}></i> </button>);
             // }
             // buttons.push(<br key="break" />);
 
             // callButtons = (
             //     // <CSSTransition
             //     //     key="buttons"
             //     //     classNames="videobuttons"
             //     //     timeout={{ enter: 300, exit: 300}}
             //     // >
 
             //     // </CSSTransition>
             // );
         } else {
             // watermark = (
             //     <CSSTransition
             //         key="watermark"
             //         classNames="watermark"
             //         timeout={{enter: 600, exit: 300}}
             //     >
             //         <View className="watermark"></View>
             //     </CSSTransition>
             // );
         }
 
         //console.log('local media stream in videobox', this.state);
 
         const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone';
         const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video';
         const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
         let buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer;
 
         return (
             <View style={styles.container}>
-                {/*onMouseMove={this.showCallOverlay}*/}
                 <CallOverlay
                     show = {true}
                     remoteUri={this.props.remoteUri}
                     remoteDisplayName={this.props.remoteDisplayName}
                     call = {this.props.call}
+                    connection={this.props.connection}
+                    accountId={this.props.accountId}
                 />
                 {/* <TransitionGroup> */}
                     {/* {watermark} */}
                 {/* </TransitionGroup> */}
+                {this.props.orientation !== 'landscape' && !this.userHangup && (!this.props.call || (this.props.call && this.props.call.state !== 'established')) ?
+                <ActivityIndicator style={styles.activity} animating={true} size={'large'} color={Colors.red800} />
+                :
+                null
+                }
                 {this.state.remoteVideoShow ?
                     <View style={[styles.container, styles.remoteVideoContainer]}>
                         <RTCView objectFit='cover' style={[styles.video, styles.remoteVideo]} poster="assets/images/transparent-1px.png" ref={this.remoteVideo} streamURL={this.state.remoteStream ? this.state.remoteStream.toURL() : null} />
                     </View>
                 : null }
                 { this.state.localVideoShow ?
                 <TouchableOpacity style={[styles.container, styles.localVideoContainer]} onPress={this.toggleCamera}>
                     <View style={[styles.container, styles.localVideoContainer]}>
                         <RTCView objectFit='cover' style={[styles.video, styles.localVideo]} ref={this.localVideo}
                         streamURL={this.state.localStream ? this.state.localStream.toURL() : null} mirror={true} />
                     </View>
                 </TouchableOpacity>
                 : null }
                 { this.props.intercomDtmfTone ?
                  <View style={buttonContainerClass}>
                     <IconButton
                         size={50}
                         style={buttonClass}
                         icon={this.state.doorOpened ? "door-open": "door" }
                         onPress={this.openDoor}
                         disabled={!(this.props.call && this.props.call.state === 'established')}
                     />
                     <IconButton
                         size={34}
                         style={[buttonClass]}
                         icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
                         onPress={this.props.toggleSpeakerPhone}
                     />
                     <IconButton
                         size={50}
                         style={[styles.button, styles.hangupButton]}
                         onPress={this.hangupCall}
                         icon="phone-hangup"
                     />
                 </View>
                 :
                 <View style={buttonContainerClass}>
                     <IconButton
                         size={34}
                         style={buttonClass}
                         onPress={this.toggleEscalateConferenceModal}
                         icon="account-plus"
                     />
                     <IconButton
                         size={34}
                         style={buttonClass}
                         onPress={this.muteAudio}
                         icon={muteButtonIcons}
                     />
                     <IconButton
                         size={34}
                         style={buttonClass}
                         onPress={this.muteVideo}
                         icon={muteVideoButtonIcons}
                     />
                     <IconButton
                         size={34}
                         style={[buttonClass]}
                         icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
                         onPress={this.props.toggleSpeakerPhone}
                     />
                     <IconButton
                         size={34}
                         style={[buttonClass, styles.hangupButton]}
                         onPress={this.hangupCall}
                         icon="phone-hangup"
                     />
                 </View>
 
                 }
                 <DTMFModal
                     show={this.state.showDtmfModal}
                     hide={this.hideDtmfModal}
                     call={this.props.call}
                     callKeepSendDtmf={this.props.callKeepSendDtmf}
                 />
                 <EscalateConferenceModal
                     show={this.state.showEscalateConferenceModal}
                     call={this.props.call}
                     close={this.toggleEscalateConferenceModal}
                     escalateToConference={this.escalateToConference}
                 />
             </View>
         );
     }
 }
 
 VideoBox.propTypes = {
     call                    : PropTypes.object,
+    connection              : PropTypes.object,
+    accountId               : PropTypes.string,
     remoteUri               : PropTypes.string,
     remoteDisplayName       : PropTypes.string,
     localMedia              : PropTypes.object,
     hangupCall              : PropTypes.func,
     shareScreen             : PropTypes.func,
     escalateToConference    : PropTypes.func,
     generatedVideoTrack     : PropTypes.bool,
     callKeepSendDtmf        : PropTypes.func,
     callKeepToggleMute      : PropTypes.func,
     toggleSpeakerPhone      : PropTypes.func,
     speakerPhoneEnabled     : PropTypes.bool,
     intercomDtmfTone        : PropTypes.string,
     orientation             : PropTypes.string,
     isTablet                : PropTypes.bool
 };
 
 export default VideoBox;