diff --git a/app/app.js b/app/app.js index 8aa9612..d32c918 100644 --- a/app/app.js +++ b/app/app.js @@ -1,4076 +1,4095 @@ import React, { Component, Fragment } from 'react'; import { Alert, View, SafeAreaView, ImageBackground, AppState, Linking, Platform, StyleSheet, Vibration, PermissionsAndroid} from 'react-native'; import { DeviceEventEmitter, BackHandler } from 'react-native'; import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper'; 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'; import BackgroundTimer from 'react-native-background-timer'; import DeepLinking from 'react-native-deep-linking'; import base64 from 'react-native-base64'; 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 Conference from './components/Conference'; import FooterBox from './components/FooterBox'; import StatusBox from './components/StatusBox'; import IncomingCallModal from './components/IncomingCallModal'; import LogsModal from './components/LogsModal'; 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 SQLite from 'react-native-sqlite-storage'; //SQLite.DEBUG(true); SQLite.enablePromise(true); import xss from 'xss'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import utils from './utils'; import config from './config'; import storage from './storage'; const RNFS = require('react-native-fs'); const logfile = RNFS.DocumentDirectoryPath + '/logs.txt'; 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', }, }; const URL_SCHEMES = [ 'sylk://', ]; const ONE_SECOND_IN_MS = 1000; const VIBRATION_PATTERN = [ 1 * ONE_SECOND_IN_MS, 1 * ONE_SECOND_IN_MS, 4 * ONE_SECOND_IN_MS ]; let bundleId = `${getBundleId()}`; const deviceId = getUniqueId(); const version = '1.0.0'; const MAX_LOG_LINES = 300; if (Platform.OS == 'ios') { bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`; //bundleId = 'com.agprojects.sylk-ios.dev'; } const mainStyle = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 0 } }); (function() { if ( typeof Object.id == "undefined" ) { var id = 0; Object.id = function(o) { if ( o && typeof o.__uniqueid == "undefined" ) { Object.defineProperty(o, "__uniqueid", { value: ++id, enumerable: false, // This could go either way, depending on your // interpretation of what an "id" is writable: false }); } return o ? o.__uniqueid : null; }; } })(); const requestCameraPermission = async () => { if (Platform.OS !== 'android') { return; } try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: "Sylk camera permission", message: "Sylk needs access to your camera " + "so you can have video chat.", buttonNeutral: "Ask Me Later", buttonNegative: "Cancel", buttonPositive: "OK" } ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { //console.log("You can use the camera"); } else { console.log("Camera permission denied"); } } catch (err) { console.warn(err); } try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, { title: "Sylk microphone permission", message: "Sylk needs access to your microphone " + "so you can have audio calls.", buttonNeutral: "Ask Me Later", buttonNegative: "Cancel", buttonPositive: "OK" } ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { //console.log("You can use the microphone"); } else { console.log("Microphone permission denied"); } } catch (err) { console.warn(err); } }; class Sylk extends Component { constructor() { super(); autoBind(this) this._loaded = false; this._initialState = { appState: null, autoLogin: true, inFocus: false, accountId: '', password: '', displayName: '', account: null, registrationState: null, registrationKeepalive: false, incomingCall: null, currentCall: null, connection: null, showIncomingModal: false, showScreenSharingModal: false, status: null, targetUri: '', missedTargetUri: '', loading: null, localMedia: null, generatedVideoTrack: false, contacts: [], devices: {}, speakerPhoneEnabled: null, orientation : 'portrait', Height_Layout : '', Width_Layout : '', outgoingCallUUID: null, incomingCallUUID: null, hardware: '', phoneNumber: '', isTablet: isTablet(), refreshHistory: false, refreshFavorites: false, myPhoneNumber: null, localHistory: [], favoriteUris: [], blockedUris: [], initialUrl: null, reconnectingCall: false, muted: false, participantsToInvite: [], myInvitedParties: {}, - myDisplayNames: {}, + myContacts: {}, defaultDomain: config.defaultDomain, declineReason: null, showLogsModal: false, logs: '', proximityEnabled: true, messages: {}, selectedContact: null }; utils.timestampedLog('Init app'); this.outgoingMedia = null; this.participantsToInvite = []; this.tokenSent = false; this.mustLogout = false; this.currentRoute = null; this.pushtoken = null; this.pushkittoken = null; this.intercomDtmfTone = null; this.registrationFailureTimer = null; this.contacts = []; this.startedByPush = false; this.heartbeats = 0; this.cachedHistory = []; // used for caching server history this.state = Object.assign({}, this._initialState); this.myParticipants = {}; this._historyConferenceParticipants = new Map(); // for saving to local history this._terminatedCalls = new Map(); this.__notificationCenter = null; this.redirectTo = null; this.prevPath = null; this.shouldUseHashRouting = false; this.goToReadyTimer = null; storage.initialize(); this.callKeeper = new CallManager(RNCallKeep, this.acceptCall, this.rejectCall, this.hangupCall, this.timeoutCall, this.callKeepStartConference, this.startCallFromCallKeeper, this.toggleMute, this.getConnection, this.addConferenceHistoryEntry, this.changeRoute, this.respawnConnection, this.isUnmounted ); if (InCallManager.recordPermission !== 'granted') { InCallManager.requestRecordPermission() .then((requestedRecordPermissionResult) => { //console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult); }) .catch((err) => { //console.log("InCallManager.requestRecordPermission() catch: ", err); }); } requestCameraPermission(); // 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) { if (Array.isArray(myInvitedParties)) { myInvitedParties = {}; } this.myInvitedParties = myInvitedParties; //console.log('My invited parties', this.myInvitedParties); this.setState({myInvitedParties: this.myInvitedParties}); } }); storage.get('proximityEnabled').then((proximityEnabled) => { this.setState({proximityEnabled: proximityEnabled}); }); if (this.state.proximityEnabled) { utils.timestampedLog('Proximity sensor enabled'); } else { utils.timestampedLog('Proximity sensor disabled'); } this.loadPeople(); for (let scheme of URL_SCHEMES) { DeepLinking.addScheme(scheme); } this.sqlTableVersions = {'messages': 1, 'journal': 1 } this.updateTableQueries = {'messages': {1: []}, 'journal': {1: []} }; this.db = null; this.initSQL(); } loadPeople() { let blockedUris = []; - let myDisplayNames = {}; + let myContacts = {}; let favoriteUris = []; let displayName = null; storage.get('displayName').then((displayName) => { console.log('My display name is', displayName); this.setState({displayName: displayName}); }).catch((error) => { console.log('get displayName error:', error); }); - storage.get('myDisplayNames').then((myDisplayNames) => { - let myDisplayNamesObjects = {}; - if (myDisplayNames) { - Object.keys(myDisplayNames).forEach((key) => { - if(typeof(myDisplayNames[key]) == 'string') { + storage.get('myContacts').then((myContacts) => { + let myContactsObjects = {}; + if (myContacts) { + Object.keys(myContacts).forEach((key) => { + if(typeof(myContacts[key]) == 'string') { console.log('Convert display name object'); - myDisplayNamesObjects[key] = {'name': myDisplayNames[key]} + myContactsObjects[key] = {'name': myContacts[key]} } else { - myDisplayNamesObjects[key] = myDisplayNames[key]; + myContactsObjects[key] = myContacts[key]; } }); - myDisplayNames = myDisplayNamesObjects; + myContacts = myContactsObjects; } else { - myDisplayNames = {}; + myContacts = {}; } - console.log('My displayNames:', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); + + console.log('Loaded', Object.keys(myContacts).length, 'contacts'); + this.setState({myContacts: myContacts}); storage.get('favoriteUris').then((favoriteUris) => { favoriteUris = favoriteUris.filter(item => item !== null); console.log('My favorites:', favoriteUris); this.setState({favoriteUris: favoriteUris}); favoriteUris.forEach((uri) => { - if (uri in myDisplayNames) { - myDisplayNames[uri].favorite = true; + if (uri in myContacts) { + myContacts[uri].favorite = true; } else { - myDisplayNames[uri] = {name: '', favorite: true}; + myContacts[uri] = {name: '', favorite: true}; } }); storage.remove('favoriteUris'); - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); + this.saveMyContacts(myContacts); }).catch((error) => { //console.log('get favoriteUris error:', error); - let uris = Object.keys(myDisplayNames); + let uris = Object.keys(myContacts); uris.forEach((uri) => { - if (myDisplayNames[uri].favorite) { + if (myContacts[uri].favorite) { favoriteUris.push(uri); } }); console.log('Loaded', favoriteUris.length, 'favorites'); this.setState({favoriteUris: favoriteUris}); }); storage.get('blockedUris').then((blockedUris) => { blockedUris = blockedUris.filter(item => item !== null); console.log('My blockedUris:', blockedUris); this.setState({blockedUris: blockedUris}); blockedUris.forEach((uri) => { - if (uri in myDisplayNames) { - myDisplayNames[uri].blocked = true; + if (uri in myContacts) { + myContacts[uri].blocked = true; } else { - myDisplayNames[uri] = {name: '', blocked: true}; + myContacts[uri] = {name: '', blocked: true}; } }); storage.remove('blockedUris'); - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); + this.saveMyContacts(myContacts); }).catch((error) => { //console.log('get favoriteUris error:', error); - let uris = Object.keys(myDisplayNames); + let uris = Object.keys(myContacts); uris.forEach((uri) => { - if (myDisplayNames[uri].blocked) { + if (myContacts[uri].blocked) { blockedUris.push(uri); } }); console.log('Loaded', blockedUris.length, 'blocked uris'); this.setState({blockedUris: blockedUris}); }); }).catch((error) => { - console.log('get myDisplayNames error:', error); + console.log('get myContacts error:', error); }); } async initSQL() { const database_name = "sylk.db"; const database_version = "1.0"; const database_displayname = "Sylk Database"; const database_size = 200000; await SQLite.openDatabase(database_name, database_version, database_displayname, database_size).then((DB) => { this.db = DB; console.log('SQL database', database_name, 'opened'); //this.dropTables(); this.createTables(); }).catch((error) => { console.log('SQL database error:', error); }); } dropTables() { console.log('Drop SQL tables...') this.ExecuteQuery("DROP TABLE if exists 'chat_uris';"); this.ExecuteQuery("DROP TABLE if exists 'recipients';"); this.ExecuteQuery("DROP TABLE 'messages';"); this.ExecuteQuery("DROP TABLE 'versions';"); } createTables() { console.log('Create SQL tables...') let create_versions_table = "CREATE TABLE IF NOT EXISTS 'versions' ( \ 'id' INTEGER PRIMARY KEY AUTOINCREMENT, \ 'table' TEXT UNIQUE, \ 'version' INTEGER NOT NULL );\ "; this.ExecuteQuery(create_versions_table).then((success) => { //console.log('SQL version table created'); }).catch((error) => { console.log(create_versions_table); console.log('SQL version table creation error:', error); }); let create_table_messages = "CREATE TABLE IF NOT EXISTS 'messages' ( \ 'id' INTEGER PRIMARY KEY AUTOINCREMENT, \ 'msg_id' TEXT UNIQUE, \ 'timestamp' TEXT, \ 'content' BLOB, \ 'content_type' TEXT, \ 'from_uri' TEXT, \ 'to_uri' TEXT, \ 'sent' INTEGER, \ 'sent_timestamp' TEXT, \ 'encrypted' INTEGER, \ 'encryption_key' TEXT, \ 'received' INTEGER, \ 'received_timestamp' TEXT, \ 'expire_interval' INTEGER, \ 'deleted' INTEGER, \ 'pinned' INTEGER, \ 'pending' INTEGER, \ 'system' INTEGER, \ 'url' TEXT, \ 'direction' TEXT) \ "; this.ExecuteQuery(create_table_messages).then((success) => { console.log('SQL messages table OK'); }).catch((error) => { console.log(create_table_messages); console.log('SQL messages table creation error:', error); }); let create_table_journal = " CREATE TABLE IF NOT EXISTS 'journal' ( \ 'id' INTEGER PRIMARY KEY AUTOINCREMENT, \ 'timestamp' TEXT, \ 'msg_id' TEXT, \ 'uri' TEXT, \ 'action' TEXT, \ 'data' TEXT) \ "; this.ExecuteQuery(create_table_journal).then((success) => { console.log('SQL journal table OK'); }).catch((error) => { console.log(create_table_journal); console.log('SQL journal table creation error:', error); }); this.upgradeSQLTables(); } upgradeSQLTables() { console.log('Update SQL tables') let query; let update_queries; let update_sub_queries; let version_numbers; /* this.ExecuteQuery("ALTER TABLE 'messages' add column received_timestamp TEXT after received"); this.ExecuteQuery("ALTER TABLE 'messages' add column sent_timestamp TEXT after sent"); */ query = "SELECT * FROM versions"; let currentVersions = {}; this.ExecuteQuery(query,[]).then((results) => { let rows = results.rows; for (let i = 0; i < rows.length; i++) { var item = rows.item(i); currentVersions[item.table] = item.version; } for (const [key, value] of Object.entries(this.sqlTableVersions)) { if (currentVersions[key] == null) { query = "INSERT INTO versions ('table', 'version') values ('" + key + "', '" + this.sqlTableVersions[key] + "')"; console.log(query); this.ExecuteQuery(query); } else { if (this.sqlTableVersions[key] > currentVersions[key]) { console.log('Table', key, 'must have version', value, 'and it has', currentVersions[key]); update_queries = this.updateTableQueries[key]; version_numbers = Object.keys(update_queries); version_numbers.sort(function(a, b){return a-b}); version_numbers.forEach((version) => { if (version <= currentVersions[key]) { return; } update_sub_queries = update_queries[version]; update_sub_queries.forEach((query) => { console.log('Run query for table', key, 'version', version, ':', query); this.ExecuteQuery(query); }); }); query = "update versions set version = " + this.sqlTableVersions[key] + " where \"table\" = '" + key + "';"; console.log(query); this.ExecuteQuery(query); } else { //console.log('No upgrade required for table', key); } } } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } /* * Execute sql queries * * @param sql * @param params * * @returns {resolve} results */ ExecuteQuery = (sql, params = []) => new Promise((resolve, reject) => { //console.log('Execute query:', sql); this.db.transaction((trans) => { trans.executeSql(sql, params, (trans, results) => { resolve(results); }, (error) => { //console.log('SQL error', error); reject(error); }); }); }); 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; } }) } 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') { this.setState({orientation: 'landscape'}); } else { this.setState({orientation: 'portrait'}); } } changeRoute(route, reason) { + if (route === '/ready') { + this.setState({selectedContact: null, targetUri: ''}); + } + if (this.currentRoute === route) { return; } if (this.currentRoute !== route) { utils.timestampedLog('Change route:', this.currentRoute, '->', route, reason); } - if (route === '/ready') { + if (route === '/ready' && reason !== 'back to home') { Vibration.cancel(); if (reason === 'conference_really_ended' && this.callKeeper.countCalls) { utils.timestampedLog('Change route cancelled because we still have calls'); return; } this.startedByPush = false; this.setState({ outgoingCallUUID: null, currentCall: null, incomingCall: (reason === 'accept_new_call' || reason === 'user_hangup_call') ? this.state.incomingCall: null, targetUri: '', selectedContact: null, reconnectingCall: false, muted: false }); if (this.currentRoute === '/call' || this.currentRoute === '/conference') { if (reason !== 'user_hangup_call') { this.stopRingback(); InCallManager.stop(); } this.closeLocalMedia(); if (reason === 'accept_new_call') { if (this.state.incomingCall) { // then answer the new call if any let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.mediaTypes.video) ? true : false; this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call'); } } else if (reason === 'escalate_to_conference') { const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`; const options = {audio: this.outgoingMedia ? this.outgoingMedia.audio: true, video: this.outgoingMedia ? this.outgoingMedia.video: true, participants: this.participantsToInvite} this.callKeepStartConference(uri.toLowerCase(), options); } else { if (this.state.account && this._loaded) { setTimeout(() => { this.updateServerHistory() }, 1500); } } } if (reason === 'registered') { setTimeout(() => { this.updateServerHistory() }, 1500); } if (reason === 'no_more_calls') { this.updateServerHistory() } } this.currentRoute = route; history.push(route); } componentWillUnmount() { utils.timestampedLog('App will unmount'); AppState.removeEventListener('change', this._handleAppStateChange); this.callKeeper.destroy(); this.closeConnection(); this._loaded = false; } get unmounted() { return !this._loaded; } isUnmounted() { return this.unmounted; } backPressed() { console.log('Back button pressed'); if (this.currentRoute === '/call' || this.currentRoute === '/conference') { let call = this.state.currentCall || this.state.incomingCall; if (call && call.id) { this.hangupCall(call.id, 'user_hangup_call'); } } return true; } async componentDidMount() { utils.timestampedLog('App did mount'); this._loaded = true; BackHandler.addEventListener('hardwareBackPress', this.backPressed); // Start a timer that runs once after X milliseconds BackgroundTimer.runBackgroundTimer(() => { // this will be executed once after 10 seconds // even when app is the the background this.heartbeat(); }, 5000); try { await RNCallKeep.supportConnectionService (); //utils.timestampedLog('Connection service is enabled'); } catch(err) { utils.timestampedLog(err); } try { await RNCallKeep.hasPhoneAccount(); //utils.timestampedLog('Phone account is enabled'); } 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 }) } // prime the ref //logger.debug('NotificationCenter ref: %o', this._notificationCenter); this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this); this._boundOnPushRegistered = this._onPushRegistered.bind(this); this._detectOrientation(); getPhoneNumber().then(phoneNumber => { this.setState({myPhoneNumber: phoneNumber}); this.loadContacts(); }); this.listenforPushNotifications(); } listenforPushNotifications() { if (this.state.appState === null) { this.setState({appState: 'active'}); } else { return; } if (Platform.OS === 'android') { Linking.getInitialURL().then((url) => { if (url) { utils.timestampedLog('Initial external URL: ' + url); this.eventFromUrl(url); this.changeRoute('/login', 'start up'); } else { this.changeRoute('/login', 'start up'); } }).catch(err => { logger.error({ err }, 'Error getting external URL'); }); firebase.messaging().getToken() .then(fcmToken => { if (fcmToken) { this._onPushRegistered(fcmToken); } }); Linking.addEventListener('url', this.updateLinkingURL); } else if (Platform.OS === 'ios') { this.changeRoute('/login', 'start up'); 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') { AppState.addEventListener('focus', this._handleAndroidFocus); AppState.addEventListener('blur', this._handleAndroidBlur); 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; const callUUID = message.data['session-id']; const from = message.data['from_uri']; const to = message.data['to_uri']; const displayName = message.data['from_display_name']; const outgoingMedia = {audio: true, video: message.data['media-type'] === 'video'}; const mediaType = message.data['media-type'] || 'audio'; if (this.unmounted) { return; } if (event === 'incoming_conference_request') { utils.timestampedLog('Push notification: incoming conference', callUUID); this.incomingConference(callUUID, to, from, displayName, outgoingMedia); } else if (event === 'incoming_session') { utils.timestampedLog('Push notification: incoming call', callUUID); this.incomingCallFromPush(callUUID, from, displayName, mediaType); } else if (event === 'cancel') { this.cancelIncomingCall(callUUID); } }); } } cancelIncomingCall(callUUID) { if (this.unmounted) { return; } if (this.callKeeper._acceptedCalls.has(callUUID)) { return; } utils.timestampedLog('Push notification: cancel call', callUUID); let call = this.callKeeper._calls.get(callUUID); if (!call) { if (!this.callKeeper._cancelledCalls.has(callUUID)) { utils.timestampedLog('Cancel incoming call that did not arrive on web socket', callUUID); this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED); this.startedByPush = false; if (this.startedByPush) { this.changeRoute('/ready', 'incoming_call_cancelled'); } } return; } if (call.state === 'incoming') { utils.timestampedLog('Cancel incoming call that was not yet accepted', callUUID); this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED); if (this.startedByPush) { this.changeRoute('/ready', 'incoming_call_cancelled'); } } } _proximityDetect(data) { //utils.timestampedLog('Proximity changed, isNear is', data.isNear); if (!this.state.proximityEnabled) { return; } if (data.isNear) { this.speakerphoneOff(); } else { this.speakerphoneOn(); } } startCallWhenReady(targetUri, options) { this.resetGoToReadyTimer(); if (options.conference) { this.startConference(targetUri, options); } else { this.startCall(targetUri, options); } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } _onPushkitRegistered(token) { this.pushkittoken = token; } _onPushRegistered(token) { this.pushtoken = token; } _sendPushToken() { if ((this.state.account && this.pushtoken && !this.tokenSent)) { let token = null; if (Platform.OS === 'ios') { token = `${this.pushkittoken}#${this.pushtoken}`; } else if (Platform.OS === 'android') { token = this.pushtoken; } utils.timestampedLog('Push token sent to server'); this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId); this.tokenSent = true; } } _handleAndroidFocus = nextFocus => { //utils.timestampedLog('----- APP in focus'); this.setState({inFocus: true}); this.respawnConnection(); } _handleAndroidBlur = nextBlur => { //utils.timestampedLog('----- APP out of focus'); this.setState({inFocus: false}); } _handleAppStateChange = nextAppState => { //utils.timestampedLog('----- APP state changed', this.state.appState, '->', nextAppState); if (nextAppState === this.state.appState) { return; } if (this.callKeeper.countCalls === 0 && !this.state.outgoingCallUUID) { /* utils.timestampedLog('----- APP state changed', this.state.appState, '->', nextAppState); if (this.callKeeper.countCalls) { utils.timestampedLog('- APP state changed, we have', this.callKeeper.countCalls, 'calls'); } if (this.callKeeper.countPushCalls) { utils.timestampedLog('- APP state changed, we have', this.callKeeper.countPushCalls, 'push calls'); } if (this.startedByPush) { utils.timestampedLog('- APP state changed, started by push in', nextAppState, 'state'); } if (this.state.connection) { utils.timestampedLog('- APP state changed from', this.state.appState, 'to', nextAppState, 'with connection', Object.id(this.state.connection)); } else { utils.timestampedLog('- APP state changed from', this.state.appState, 'to', nextAppState); } */ } if (this.state.appState === 'background' && nextAppState === 'active') { this.respawnConnection(nextAppState); } this.setState({appState: nextAppState}); } respawnConnection(state) { if (!this.state.connection) { utils.timestampedLog('Web socket does not exist'); } else if (!this.state.connection.state) { utils.timestampedLog('Web socket is waiting for connection...'); } else { /* if (this.state.connection.state !== 'ready' && this.state.connection.state !== 'connecting') { utils.timestampedLog('Web socket', Object.id(this.state.connection), 'reconnecting because', this.state.connection.state); this.state.connection.reconnect(); utils.timestampedLog('Web socket', Object.id(this.state.connection), 'new state is', this.state.connection.state); } */ } if (this.state.account) { if (!this.state.connection) { utils.timestampedLog('Active account without connection removed'); this.setState({account: null}); } } else { utils.timestampedLog('No active account'); } if (this.state.accountId && (!this.state.connection || !this.state.account)) { this.handleRegistration(this.state.accountId, this.state.password); } } closeConnection(reason='unmount') { if (!this.state.connection) { return; } if (!this.state.account && this.state.connection) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this.state.connection.close(); utils.timestampedLog('Web socket', Object.id(this.state.connection), 'will close'); this.setState({connection: null, account: null}); } else if (this.state.connection && this.state.account) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this.state.account.removeListener('outgoingCall', this.outgoingCall); this.state.account.removeListener('conferenceCall', this.outgoingConference); this.state.account.removeListener('incomingCall', this.incomingCallFromWebSocket); this.state.account.removeListener('missedCall', this.missedCall); this.state.account.removeListener('conferenceInvite', this.conferenceInviteFromWebSocket); this.state.connection.removeAccount(this.state.account, (error) => { if (error) { utils.timestampedLog('Failed to remove account:', error); } else { //utils.timestampedLog('Account removed'); } if (this.state.connection) { utils.timestampedLog('Web socket', Object.id(this.state.connection), 'will close'); this.state.connection.close(); } this.setState({connection: null, account: null}); } ); } else { this.setState({connection: null, account: null}); } } startCallFromCallKeeper(data) { utils.timestampedLog('Starting call from OS...'); let callUUID = data.callUUID || uuid.v4(); let is_conf = data.handle.search('videoconference.') === -1 ? false: true; this.backToForeground(); if (is_conf) { this.callKeepStartConference(data.handle, {audio: true, video: data.video || true, callUUID: callUUID}); } else { this.callKeepStartCall(data.handle, {audio: true, video: data.video, callUUID: callUUID}); } this._notificationCenter.removeNotification(); } selectContact(contact) { this.setState({selectedContact: contact}); } connectionStateChanged(oldState, newState) { if (this.unmounted) { return; } const connection = this.getConnection(); if (oldState) { utils.timestampedLog('Web socket', connection, 'state changed:', oldState, '->' , newState); } switch (newState) { case 'closed': if (this.state.connection) { utils.timestampedLog('Web socket was terminated'); this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this._notificationCenter.postSystemNotification('Connection lost'); } //this.setState({connection: null, account: null}); this.setState({account: null}); break; case 'ready': this._notificationCenter.removeNotification(); this.processRegistration(this.state.accountId, this.state.password); this.callKeeper.setAvailable(true); break; case 'disconnected': if (this.registrationFailureTimer) { clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') { this.hangupCall(this.state.currentCall.id, 'outgoing_connection_failed'); } if (this.state.incomingCall) { this.hangupCall(this.state.incomingCall.id, 'connection_failed'); } this.setState({ registrationState: 'failed', generatedVideoTrack: false, }); if (this.currentRoute === '/login') { this.changeRoute('/ready'); } break; default: if (this.state.registrationKeepalive !== true) { this.setState({loading: 'Connecting...'}); } break; } } notificationCenter() { return this._notificationCenter; } showRegisterFailure(reason) { const connection = this.getConnection(); utils.timestampedLog('Registration error: ' + reason, 'on web socket', connection); this.setState({ loading : null, registrationState: 'failed', status : { msg : 'Sign In failed: ' + reason, level : 'danger' } }); if (this.startedByPush) { // TODO: hangup incoming call } if (this.currentRoute === '/login') { this.changeRoute('/ready'); } } registrationStateChanged(oldState, newState, data) { if (this.unmounted) { return; } const connection = this.getConnection(); if (oldState) { utils.timestampedLog('Registration state changed:', oldState, '->', newState, 'on web socket', connection); } if (!this.state.account) { utils.timestampedLog('Account disabled'); return; } if (newState === 'failed') { let reason = data.reason; if (reason === 904) { // Sofia SIP: WAT reason = 'Wrong account or password'; } else if (reason === 408) { reason = 'Timeout'; } this.showRegisterFailure(reason); if (this.state.registrationKeepalive === true) { if (this.state.connection !== null && this.state.connection.state === 'ready') { utils.timestampedLog('Retry to register...'); this.state.account.register(); } } else { // add a timer to retry register after awhile if (reason >= 500 || reason === 408) { utils.timestampedLog('Retry to register after 5 seconds delay...'); setTimeout(this.state.account.register(), 5000); } else { if (this.registrationFailureTimer) { utils.timestampedLog('Cancel registration timer'); clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } } } if (this.currentRoute === '/login') { this.changeRoute('/ready'); } } else if (newState === 'registered') { if (this.registrationFailureTimer) { clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } this.setState({loading: null, registrationKeepalive: true, registrationState: 'registered', defaultDomain: this.state.account ? this.state.account.id.split('@')[1]: null }); //if (this.currentRoute === '/login' && (!this.startedByPush || Platform.OS === 'ios')) { // TODO if the call does not arrive, we never get back to ready if (this.currentRoute === '/login') { this.changeRoute('/ready', 'registered'); } return; } else { this.setState({status: null, registrationState: newState }); } if (this.mustLogout) { this.logout(); } } showInternalAlertPanel() { this.setState({showIncomingModal: true}); //Vibration.vibrate(VIBRATION_PATTERN, true); setTimeout(() => { Vibration.cancel(); }, 30000); } hideInternalAlertPanel() { Vibration.cancel(); this.setState({showIncomingModal: false}); } heartbeat() { if (this.unmounted) { return; } this.heartbeats = this.heartbeats + 1; if (this.heartbeats % 40 == 0) { this.trimLogs(); } if (this.state.connection) { //console.log('Check calls in', this.state.appState, 'with connection', Object.id(this.state.connection), this.state.connection.state); } else { //console.log('Check calls in', this.state.appState, 'with no connection'); } let callState; if (this.state.currentCall && this.state.incomingCall && this.state.incomingCall === this.state.currentCall) { //utils.timestampedLog('We have an incoming call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); callState = this.state.currentCall.state; } else if (this.state.incomingCall) { //utils.timestampedLog('We have an incoming call:', this.state.incomingCall ? (this.state.incomingCall.id + ' ' + this.state.incomingCall.state): 'None'); callState = this.state.incomingCall.state; } else if (this.state.currentCall) { //utils.timestampedLog('We have an outgoing call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); callState = this.state.currentCall.state; } else if (this.state.outgoingCallUUID) { //utils.timestampedLog('We have a pending outgoing call:', this.state.outgoingCallUUID); } else { //utils.timestampedLog('We have no calls'); if (this.state.appState === 'background' && this.state.connection && this.state.connection.state === 'ready') { //this.closeConnection('background with no calls'); } } this.callKeeper.heartbeat(); } stopRingback() { //utils.timestampedLog('Stop ringback'); InCallManager.stopRingback(); } resetGoToReadyTimer() { if (this.goToReadyTimer !== null) { clearTimeout(this.goToReadyTimer); this.goToReadyTimer = null; } } goToReadyNowAndCancelTimer() { if (this.goToReadyTimer !== null) { clearTimeout(this.goToReadyTimer); this.goToReadyTimer = null; this.changeRoute('/ready', 'cancel_timer_incoming_call'); } } isConference(call) { const _call = call || this.state.currentCall; if (_call && _call.hasOwnProperty('_participants')) { return true; } return false; } callStateChanged(oldState, newState, data) { if (this.unmounted) { return; } // outgoing accepted: null -> progress -> accepted -> established -> terminated // outgoing accepted: null -> progress -> established -> accepted -> terminated (with early media) // incoming accepted: null -> incoming -> accepted -> established -> terminated // 2nd incoming call is automatically rejected by sylkrtc library /* utils.timestampedLog('---currentCall start:', this.state.currentCall); utils.timestampedLog('---incomingCall start:', this.state.incomingCall); */ let call = this.callKeeper._calls.get(data.id); if (!call) { utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager'); return; } let callUUID = call.id; const connection = this.getConnection(); utils.timestampedLog('Sylkrtc call', callUUID, 'state change:', oldState, '->', newState, 'on web socket', connection); /* if (newState === 'established' || newState === 'accepted') { // restore the correct UI state if it has transitioned illegally to /ready state if (call.hasOwnProperty('_participants')) { this.changeRoute('/conference', 'correct call state'); } else { this.changeRoute('/call', 'correct call state'); } } */ let newCurrentCall; let newincomingCall; let direction = call.direction; let hasVideo = false; let mediaType = 'audio'; let tracks; let readyDelay = 5000; if (this.state.incomingCall && this.state.currentCall) { if (newState === 'terminated') { if (this.state.incomingCall == this.state.currentCall) { newCurrentCall = null; newincomingCall = null; } if (this.state.incomingCall.id === call.id) { if (oldState === 'incoming') { //utils.timestampedLog('Call state changed:', 'incoming call must be cancelled'); this.hideInternalAlertPanel(); } if (oldState === 'established' || oldState === 'accepted') { //utils.timestampedLog('Call state changed:', 'incoming call ended'); this.hideInternalAlertPanel(); } // new call must be cancelled newincomingCall = null; newCurrentCall = this.state.currentCall; } if (this.state.currentCall != this.state.incomingCall && this.state.currentCall.id === call.id) { if (oldState === 'established' || newState === 'accepted') { //utils.timestampedLog('Call state changed:', 'outgoing call must be hangup'); // old call must be closed } newCurrentCall = null; newincomingCall = this.state.incomingCall; } } else if (newState === 'accepted') { if (this.state.incomingCall === this.state.currentCall) { newCurrentCall = this.state.incomingCall; newincomingCall = this.state.incomingCall; } else { newCurrentCall = this.state.currentCall; } this.backToForeground(); } else if (newState === 'established') { if (this.state.incomingCall === this.state.currentCall) { //utils.timestampedLog("Incoming call media started"); newCurrentCall = this.state.incomingCall; newincomingCall = this.state.incomingCall; } else { //utils.timestampedLog("Outgoing call media started"); newCurrentCall = this.state.currentCall; } } else { //utils.timestampedLog('Call state changed:', 'We have two calls in unclear state'); } } else if (this.state.incomingCall) { //this.backToForeground(); //utils.timestampedLog('Call state changed: We have one incoming call'); newincomingCall = this.state.incomingCall; newCurrentCall = this.state.incomingCall; if (this.state.incomingCall.id === call.id) { if (newState === 'terminated') { this.startedByPush = false; //utils.timestampedLog("Incoming call was cancelled"); this.setState({showIncomingModal: false}); this.hideInternalAlertPanel(); newincomingCall = null; newCurrentCall = null; readyDelay = 10; } else if (newState === 'accepted') { //utils.timestampedLog("Incoming call was accepted"); this.hideInternalAlertPanel(); this.backToForeground(); } else if (newState === 'established') { //utils.timestampedLog("Incoming call media started"); this.hideInternalAlertPanel(); } } } else if (this.state.currentCall) { //utils.timestampedLog('Call state changed: We have one current call'); newCurrentCall = newState === 'terminated' ? null : call; newincomingCall = null; if (newState !== 'terminated') { this.setState({reconnectingCall: false}); } } else { newincomingCall = null; newCurrentCall = null; } /* utils.timestampedLog('---currentCall:', newCurrentCall); utils.timestampedLog('---incomingCall:', newincomingCall); */ switch (newState) { case 'progress': this.callKeeper.setCurrentCallActive(callUUID); this.backToForeground(); this.resetGoToReadyTimer(); tracks = call.getLocalStreams()[0].getVideoTracks(); mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio'; if (mediaType === 'video') { this.speakerphoneOn(); } else { this.speakerphoneOff(); } if (!this.isConference(call)){ InCallManager.startRingback('_BUNDLE_'); } break; case 'established': this.callKeeper.setCurrentCallActive(callUUID); this.backToForeground(); this.resetGoToReadyTimer(); tracks = call.getLocalStreams()[0].getVideoTracks(); mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio'; InCallManager.start({media: mediaType}); if (direction === 'outgoing') { this.stopRingback(); if (this.state.speakerPhoneEnabled) { this.speakerphoneOn(); } else { this.speakerphoneOff(); } } else { if (mediaType === 'video') { this.speakerphoneOn(); } else { this.speakerphoneOff(); } } break; case 'accepted': this.callKeeper.setCurrentCallActive(callUUID); this.backToForeground(); this.resetGoToReadyTimer(); if (direction === 'outgoing') { this.stopRingback(); } break; case 'terminated': this._terminatedCalls.set(callUUID, true); utils.timestampedLog(callUUID, direction, 'terminated with reason', data.reason); if (this.state.incomingCall && this.state.incomingCall.id === call.id) { newincomingCall = null; } if (this.state.currentCall && this.state.currentCall.id === call.id) { newCurrentCall = null; } let callSuccesfull = false; let reason = data.reason; let play_busy_tone = !this.isConference(call); let CALLKEEP_REASON; let missed = false; if (!reason || reason.match(/200/)) { if (oldState === 'progress' && direction === 'outgoing') { reason = 'Cancelled'; play_busy_tone = false; } else if (oldState === 'incoming') { reason = 'Cancelled'; missed = true; 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(/402/)) { reason = 'Payment required'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/403/)) { //reason = 'Forbidden'; 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 = 'Is not online'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else if (reason.match(/486/)) { reason = 'Is busy'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; if (direction === 'outgoing') { play_busy_tone = false; } } else if (reason.match(/603/)) { reason = 'Cannot answer now'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; if (direction === 'outgoing') { play_busy_tone = false; } } else if (reason.match(/487/)) { reason = 'Cancelled'; play_busy_tone = false; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; } 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; } if (play_busy_tone) { this.playBusyTone(); } if (direction === 'outgoing') { this.setState({declineReason: reason}); } this.stopRingback(); let msg; let current_datetime = new Date(); let formatted_date = utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds()); msg = formatted_date + " - " + direction +" " + mediaType + " call ended (" + reason + ")"; this.saveSystemMessage(call.remoteIdentity.uri.toLowerCase(), msg, direction, missed); this.callKeeper.endCall(callUUID, CALLKEEP_REASON); if (play_busy_tone && oldState !== 'established' && direction === 'outgoing') { this._notificationCenter.postSystemNotification('Call ended:', {body: reason}); } this.updateHistoryEntry(callUUID); break; default: break; } /* utils.timestampedLog('---currentCall end:', newCurrentCall); utils.timestampedLog('---incomingCall end:', newincomingCall); */ this.setState({ currentCall: newCurrentCall, incomingCall: newincomingCall }); if (!this.state.currentCall && !this.state.incomingCall) { this.speakerphoneOn(); if (!this.state.reconnectingCall) { if (this.state.inFocus) { if (this.currentRoute !== '/ready') { utils.timestampedLog('Will go to ready in', readyDelay/1000, 'seconds (terminated)', callUUID); this.goToReadyTimer = setTimeout(() => { this.changeRoute('/ready', 'no_more_calls'); }, readyDelay); } } else { if (this.currentRoute !== '/conference') { this.changeRoute('/ready', 'no_more_calls'); } } } } if (this.state.currentCall) { //console.log('Current:', this.state.currentCall.id); } if (this.state.incomingCall) { //console.log('Incoming:', this.state.incomingCall.id); } } - goBack() { - this.setState({selectedContact: null}); + goBackToCall() { + let call = this.state.currentCall || this.state.incomingCall; + + if (call) { + if (call.hasOwnProperty('_participants')) { + this.changeRoute('/conference', 'back to call'); + } else { + this.changeRoute('/call', 'back to call'); + } + } else { + console.log('No call to go back to'); + } + } + + goBackToHome() { + this.changeRoute('/ready', 'back to home'); } handleRegistration(accountId, password, remember=true) { if (this.state.account !== null && this.state.registrationState === 'registered' ) { return; } this.setState({ accountId : accountId, password : password, loading : 'Connecting...' }); if (this.state.connection === null) { utils.timestampedLog('Web socket handle registration for', accountId); const userAgent = 'Sylk Mobile'; if (this.state.phoneNumber) { console.log('Phone number:', this.state.phoneNumber); } let connection = sylkrtc.createConnection({server: config.wsServer}); utils.timestampedLog('Web socket', Object.id(connection), 'was opened'); connection.on('stateChanged', this.connectionStateChanged); this.setState({connection: connection}); } else { if (this.state.connection.state === 'ready' && this.state.registrationState !== 'registered') { utils.timestampedLog('Web socket', Object.id(this.state.connection), 'handle registration for', accountId); this.processRegistration(accountId, password); } } } processRegistration(accountId, password, displayName) { if (!displayName) { displayName = this.state.displayName; } if (!this.state.connection) { return; } this.updateServerHistory(); utils.timestampedLog('Process registration for', accountId, '(', displayName, ')'); if (this.state.account && this.state.connection) { this.state.connection.removeAccount(this.state.account, (error) => { this.setState({registrationState: null, registrationKeepalive: false}); } ); } const options = { account: accountId, password: password, displayName: displayName || '' }; if (this.state.connection._accounts.has(options.account)) { return; } //utils.timestampedLog('Add register 10 sec timer'); this.registrationFailureTimer = setTimeout(() => { this.showRegisterFailure('Register timeout'); this.processRegistration(accountId, password); }, 10000); const account = this.state.connection.addAccount(options, (error, account) => { if (!error) { account.on('outgoingCall', this.outgoingCall); account.on('conferenceCall', this.outgoingConference); account.on('registrationStateChanged', this.registrationStateChanged); account.on('incomingCall', this.incomingCallFromWebSocket); account.on('message', this.incomingMessage); account.on('messageStateChanged', this.messageStateChanged); account.on('missedCall', this.missedCall); account.on('conferenceInvite', this.conferenceInviteFromWebSocket); //utils.timestampedLog('Web socket account', account.id, 'is ready, registering...'); this.setState({account: account}); this._sendPushToken(); account.register(); storage.set('account', { accountId: this.state.accountId, password: this.state.password }); } 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'); const constraints = Object.assign({}, mediaConstraints); if (constraints.video === true) { if ((nextRoute === '/conference')) { constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; // TODO: remove this, workaround so at least safari works when joining a video conference } else if (nextRoute === '/conference' && isSafari) { constraints.video = false; } else { // ask for 720p video constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; } } 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('Local media acquired'); this.setState({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); if (nextRoute !== null) { this.changeRoute(nextRoute, 'local media aquired'); } }) .catch((error) => { utils.timestampedLog('Access to local media failed:', error); clearTimeout(this.loadScreenTimer); this._notificationCenter.postSystemNotification("Can't access camera or microphone"); this.setState({ loading: null }); this.changeRoute('/ready', 'local media failure'); }); }); } getConnection() { return this.state.connection ? Object.id(this.state.connection): null; } callKeepStartConference(targetUri, options={audio: true, video: true, participants: []}) { if (!targetUri) { return; } this.resetGoToReadyTimer(); let callUUID = options.callUUID || uuid.v4(); let participants = options.participants || null; this.addConferenceHistoryEntry(targetUri, callUUID); let participantsToInvite = []; if (participants) { participants.forEach((participant_uri) => { if (participant_uri === this.state.accountId) { return; } participantsToInvite.push(participant_uri); }); } this.outgoingMedia = options; this.setState({outgoingCallUUID: callUUID, reconnectingCall: false, participantsToInvite: participantsToInvite }); const media = options.video ? 'video' : 'audio'; if (participantsToInvite) { utils.timestampedLog('Will start', media, 'conference', callUUID, 'to', targetUri, 'with', participantsToInvite); } else { utils.timestampedLog('Will start', media, 'conference', callUUID, 'to', targetUri); } this.respawnConnection(); this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: callUUID}); } callKeepStartCall(targetUri, options) { this.resetGoToReadyTimer(); let callUUID = options.callUUID || uuid.v4(); this.setState({outgoingCallUUID: callUUID, reconnectingCall: false}); utils.timestampedLog('User will start call', callUUID, 'to', targetUri); this.respawnConnection(); this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: callUUID}); } startCall(targetUri, options) { this.setState({targetUri: targetUri}); this.getLocalMedia(Object.assign({audio: true, video: options.video}, options), '/call'); } timeoutCall(callUUID, uri) { utils.timestampedLog('Timeout answering call', callUUID); this.addConferenceHistoryEntry(uri, callUUID, direction='received'); this.forceUpdate(); } closeLocalMedia() { if (this.state.localMedia != null) { utils.timestampedLog('Close local media'); sylkrtc.utils.closeMediaStream(this.state.localMedia); this.setState({localMedia: null}); } } callKeepAcceptCall(callUUID) { // 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 will answer call', callUUID); this.callKeeper.acceptCall(callUUID); this.hideInternalAlertPanel(); } callKeepRejectCall(callUUID) { // called from user interaction with Old alert panel utils.timestampedLog('CallKeep will reject call', callUUID); this.callKeeper.rejectCall(callUUID); this.hideInternalAlertPanel(); } acceptCall(callUUID) { utils.timestampedLog('User accepted call', callUUID); this.hideInternalAlertPanel(); this.resetGoToReadyTimer(); if (this.state.currentCall) { utils.timestampedLog('Will hangup current call first'); this.hangupCall(this.state.currentCall.id, 'accept_new_call'); // call will continue after transition to /ready } else { utils.timestampedLog('Will get local media now'); let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.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('User rejected call', callUUID); this.hideInternalAlertPanel(); if (!this.state.currentCall) { this.changeRoute('/ready', 'rejected'); } if (this.state.incomingCall && this.state.incomingCall.id === callUUID) { utils.timestampedLog('Sylkrtc terminate call', callUUID, 'in', this.state.incomingCall.state, 'state'); this.state.incomingCall.terminate(); } } hangupCall(callUUID, reason) { utils.timestampedLog('Call', callUUID, 'hangup with reason:', reason); let call = this.callKeeper._calls.get(callUUID); let direction = null; let targetUri = null; if (call) { let direction = call.direction; utils.timestampedLog('Sylkrtc terminate call', callUUID, 'in', call.state, 'state'); call.terminate(); } if (this.busyToneInterval) { clearInterval(this.busyToneInterval); this.busyToneInterval = null; } if (reason === 'outgoing_connection_failed') { this.setState({reconnectingCall: true, outgoingCallUUID: uuid.v4()}); return; } if (reason === 'user_cancel_call' || reason === 'user_hangup_call' || reason === 'answer_failed' || reason === 'callkeep_hangup_call' || reason === 'accept_new_call' || reason === 'stop_preview' || reason === 'escalate_to_conference' || reason === 'user_hangup_conference_confirmed' || reason === 'timeout' ) { this.changeRoute('/ready', reason); } else if (reason === 'user_hangup_conference') { utils.timestampedLog('Save conference maybe?'); setTimeout(() => { this.changeRoute('/ready', 'conference_really_ended'); }, 15000); } else if (reason === 'user_cancelled_conference') { utils.timestampedLog('Save conference maybe?'); setTimeout(() => { this.changeRoute('/ready', 'conference_really_ended'); }, 15000); } else { utils.timestampedLog('Will go to ready in 6 seconds (hangup)'); setTimeout(() => { this.changeRoute('/ready', reason); }, 6000); } } playBusyTone() { //utils.timestampedLog('Play busy tone'); InCallManager.stop({busytone: '_BUNDLE_'}); } callKeepSendDtmf(digits) { utils.timestampedLog('Send DTMF', digits); if (this.state.currentCall) { this.callKeeper.sendDTMF(this.state.currentCall.id, digits); } } toggleProximity() { storage.set('proximityEnabled', !this.state.proximityEnabled); if (!this.state.proximityEnabled) { utils.timestampedLog('Proximity sensor enabled'); } else { utils.timestampedLog('Proximity sensor disabled'); } this.setState({proximityEnabled: !this.state.proximityEnabled}); } toggleMute(callUUID, mute) { utils.timestampedLog('Toggle mute for call', callUUID, ':', mute); this.callKeeper.setMutedCall(callUUID, mute); this.setState({muted: 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}); } outgoingCall(call) { // called by sylkrtc.js when an outgoing call starts const localStreams = call.getLocalStreams(); let mediaType = 'audio'; let hasVideo = false; if (localStreams.length > 0) { const localStream = call.getLocalStreams()[0]; mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio'; hasVideo = localStream.getVideoTracks().length > 0 ? true : false; } this.callKeeper.startOutgoingCall(call.id, call.remoteIdentity.uri, hasVideo); utils.timestampedLog('Outgoing', mediaType, 'call', call.id, 'started to', call.remoteIdentity.uri); this.callKeeper.addWebsocketCall(call); call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); } outgoingConference(call) { // called by sylrtc.js when an outgoing conference starts const localStreams = call.getLocalStreams(); let mediaType = 'audio'; let hasVideo = false; if (localStreams.length > 0) { const localStream = call.getLocalStreams()[0]; mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio'; hasVideo = localStream.getVideoTracks().length > 0 ? true : false; } this.callKeeper.startOutgoingCall(call.id, call.remoteIdentity.uri, hasVideo); utils.timestampedLog('Outgoing', mediaType, 'conference', call.id, 'started to', call.remoteIdentity.uri); this.callKeeper.addWebsocketCall(call); call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); } _onLocalNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); utils.timestampedLog('Handle local iOS PUSH notification: ', notificationContent); } _onNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); const event = notificationContent['event']; const callUUID = notificationContent['session-id']; const to = notificationContent['to_uri']; const from = notificationContent['from_uri']; const displayName = notificationContent['from_display_name']; const outgoingMedia = {audio: true, video: notificationContent['media-type'] === 'video'}; const mediaType = notificationContent['media-type'] || 'audio'; /* * Local Notification Payload * * - `alertBody` : The message displayed in the notification alert. * - `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; * - `soundName` : The sound played when the notification is fired (optional). * - `category` : The category of this notification, required for actionable notifications (optional). * - `userInfo` : An optional object containing additional notification data. */ if (event === 'incoming_session') { utils.timestampedLog('Push notification: incoming call', callUUID); this.startedByPush = true; this.incomingCallFromPush(callUUID, from, displayName, mediaType); } else if (event === 'incoming_conference_request') { utils.timestampedLog('Push notification: incoming conference', callUUID); this.startedByPush = true; this.incomingConference(callUUID, to, from, displayName, outgoingMedia); } else if (event === 'cancel') { utils.timestampedLog('Push notification: cancel call', callUUID); VoipPushNotification.presentLocalNotification({alertBody:'Call cancelled'}); this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED); } /* if (notificationContent['event'] === 'incoming_session') { VoipPushNotification.presentLocalNotification({ alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name'] }); } */ if (VoipPushNotification.wakeupByPush) { utils.timestampedLog('We wake up by push notification'); VoipPushNotification.wakeupByPush = false; VoipPushNotification.onVoipNotificationCompleted(callUUID); } } backToForeground() { if (this.state.appState !== 'active') { this.callKeeper.backToForeground(); } if (this.state.accountId) { this.handleRegistration(this.state.accountId, this.state.password); } } incomingConference(callUUID, to, from, displayName, outgoingMedia={audio: true, video: true}) { if (this.unmounted) { return; } const mediaType = outgoingMedia.video ? 'video' : 'audio'; utils.timestampedLog('Incoming', mediaType, 'conference invite from', from, displayName, 'to room', to); if (this.state.account && from === this.state.account.id) { utils.timestampedLog('Reject conference call from myself', callUUID); this.callKeeper.rejectCall(callUUID); return; } if (this.autoRejectIncomingCall(callUUID, from, to)) { return; } this.setState({incomingCallUUID: callUUID}); this.callKeeper.handleConference(callUUID, to, from, displayName, mediaType, outgoingMedia); } startConference(targetUri, options={audio: true, video: true, participants: []}) { utils.timestampedLog('New outgoing conference to room', targetUri); this.setState({targetUri: targetUri}); this.getLocalMedia({audio: options.audio, video: options.video}, '/conference'); } escalateToConference(participants) { let outgoingMedia = {audio: true, video: true}; let mediaType = 'video'; let call; if (this.state.currentCall) { call = this.state.currentCall; } else if (this.state.incomingCall) { call = this.state.currentCall; } else { console.log('No call to escalate'); return } const localStreams = call.getLocalStreams(); if (localStreams.length > 0) { const localStream = call.getLocalStreams()[0]; if (localStream.getVideoTracks().length == 0) { outgoingMedia.video = false; mediaType = 'audio'; } } this.outgoingMedia = outgoingMedia; this.participantsToInvite = participants; console.log('Escalate', mediaType, 'call', call.id, 'to conference with', participants.toString()); this.hangupCall(call.id, 'escalate_to_conference'); } conferenceInviteFromWebSocket(data) { // comes from web socket utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room); if (this.isConference()) { return; } //this._notificationCenter.postSystemNotification('Expecting conference invite', {body: `from ${data.originator.displayName || data.originator.uri}`}); } 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.eventFromUrl(event.url); DeepLinking.evaluateUrl(event.url); } eventFromUrl(url) { url = decodeURI(url); try { let direction; let event; let callUUID; let from; let to; let displayName; var url_parts = url.split("/"); let scheme = url_parts[0]; //console.log(url_parts); if (scheme === 'sylk:') { //sylk://conference/incoming/callUUID/from/to/media - when Android is asleep //sylk://call/outgoing/callUUID/to/displayName - from system dialer/history //sylk://call/incoming/callUUID/from/to/displayName - when Android is asleep //sylk://call/cancel//callUUID - when Android is asleep event = url_parts[2]; direction = url_parts[3]; callUUID = url_parts[4]; from = url_parts[5]; to = url_parts[6]; displayName = url_parts[7]; mediaType = url_parts[8] || 'audio'; if (event !== 'cancel' && from && from.search('@videoconference.') > -1) { event = 'conference'; to = from; } this.setState({targetUri: from}); } else if (scheme === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link direction = 'outgoing'; event = url_parts[3]; to = url_parts[4]; callUUID = uuid.v4(); if (to.indexOf('@') === -1 && event === 'conference') { to = url_parts[4] + '@' + config.defaultConferenceDomain; } else if (to.indexOf('@') === -1 && event === 'call') { to = url_parts[4] + '@' + this.state.defaultDomain; } this.setState({targetUri: to}); } if (event === 'conference') { utils.timestampedLog('Conference from external URL:', url); this.startedByPush = true; if (direction === 'outgoing' && to) { utils.timestampedLog('Outgoing conference to', to); this.backToForeground(); this.callKeepStartConference(to, {audio: true, video: true, callUUID: callUUID}); } else if (direction === 'incoming' && from) { utils.timestampedLog('Incoming conference from', from); // allow app to wake up this.backToForeground(); const media = {audio: true, video: mediaType === 'video'} this.incomingConference(callUUID, to, from, displayName, media); } } else if (event === 'call') { this.startedByPush = true; if (direction === 'outgoing') { utils.timestampedLog('Call from external URL:', url); utils.timestampedLog('Outgoing call to', from); this.backToForeground(); this.callKeepStartCall(from, {audio: true, video: false, callUUID: callUUID}); } else if (direction === 'incoming') { utils.timestampedLog('Call from external URL:', url); utils.timestampedLog('Incoming call from', from); this.backToForeground(); this.incomingCallFromPush(callUUID, from, displayName, mediaType, true); } else if (direction === 'cancel') { this.cancelIncomingCall(callUUID); } } else { utils.timestampedLog('Error: Invalid external URL event', event); } } catch (err) { utils.timestampedLog('Error parsing URL', url, ":", err); } } autoRejectIncomingCall(callUUID, from, to) { //utils.timestampedLog('Check auto reject call from', from); if (this.state.blockedUris && this.state.blockedUris.indexOf(from) > -1) { utils.timestampedLog('Reject call', callUUID, 'from blocked URI', from); this.callKeeper.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Call rejected', {body: `from ${from}`}); return true; } const fromDomain = '@' + from.split('@')[1] if (this.state.blockedUris && this.state.blockedUris.indexOf(fromDomain) > -1) { utils.timestampedLog('Reject call', callUUID, 'from blocked domain', fromDomain); this.callKeeper.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Call rejected', {body: `from domain ${fromDomain}`}); return true; } if (this.state.currentCall && this.state.incomingCall && this.state.currentCall === this.state.incomingCall && this.state.incomingCall.id !== callUUID) { utils.timestampedLog('Reject second incoming call'); this.callKeeper.rejectCall(callUUID); } 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.callKeeper.rejectCall(callUUID); return true; } if (this._terminatedCalls.has(callUUID)) { utils.timestampedLog('Reject call already terminated', callUUID); this.cancelIncomingCall(callUUID); return true; } if (this.isConference()) { utils.timestampedLog('Reject call while in a conference', callUUID); if (to !== this.state.targetUri) { this._notificationCenter.postSystemNotification('Missed call from', {body: from}); } this.callKeeper.rejectCall(callUUID); return true; } if (this.state.currentCall && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri !== from) { utils.timestampedLog('Reject call while outgoing in progress', callUUID); this.callKeeper.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Missed call from', {body: from}); return true; } return false; } autoAcceptIncomingCall(callUUID, from) { // TODO: handle ping pong where we call each other back if (this.state.currentCall && this.state.currentCall.direction === 'outgoing' && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri === from) { this.hangupCall(this.state.currentCall.id, 'accept_new_call'); this.setState({currentCall: null}); utils.timestampedLog('Auto accept incoming call from same address I am calling', callUUID); return true; } return false; } incomingCallFromPush(callUUID, from, displayName, mediaType, force) { //utils.timestampedLog('Handle incoming PUSH call', callUUID, 'from', from, '(', displayName, ')'); if (this.unmounted) { return; } if (this.autoRejectIncomingCall(callUUID, from)) { return; } //this.showInternalAlertPanel(); if (this.autoAcceptIncomingCall(callUUID, from)) { return; } this.goToReadyNowAndCancelTimer(); this.setState({targetUri: from}); let skipNativePanel = false; if (!this.callKeeper._calls.get(callUUID) || (this.state.currentCall && this.state.currentCall.direction === 'outgoing')) { //this._notificationCenter.postSystemNotification('Incoming call', {body: `from ${from}`}); if (Platform.OS === 'android' && this.state.appState === 'foreground') { skipNativePanel = true; } } this.callKeeper.incomingCallFromPush(callUUID, from, displayName, mediaType, force, skipNativePanel); } incomingCallFromWebSocket(call, mediaTypes) { if (this.unmounted) { return; } this.callKeeper.addWebsocketCall(call); const callUUID = call.id; const from = call.remoteIdentity.uri; //utils.timestampedLog('Handle incoming web socket call', callUUID, 'from', from, 'on connection', Object.id(this.state.connection)); // 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 (this.autoRejectIncomingCall(callUUID, from)) { return; } const autoAccept = this.autoAcceptIncomingCall(callUUID, from); this.goToReadyNowAndCancelTimer(); call.mediaTypes = mediaTypes; call.on('stateChanged', this.callStateChanged); this.setState({incomingCall: call}); let skipNativePanel = false; if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') { if (Platform.OS === 'android') { this.showInternalAlertPanel(); skipNativePanel = true; } } this.callKeeper.incomingCallFromWebSocket(call, autoAccept, skipNativePanel); } missedCall(data) { utils.timestampedLog('Missed call from ' + data.originator.uri, '(', data.originator.displayName, ')'); /* let msg; let current_datetime = new Date(); let formatted_date = utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds()); msg = formatted_date + " - missed call"; this.saveSystemMessage(data.originator.uri.toLowerCase(), msg, 'incoming', true); */ if (!this.state.currentCall) { let from = data.originator.displayName || data.originator.uri; this._notificationCenter.postSystemNotification('Missed call', {body: `from ${from}`}); if (Platform.OS === 'ios') { VoipPushNotification.presentLocalNotification({alertBody:'Missed call from ' + from}); } } this.updateServerHistory() } updateServerHistory() { if (this.currentRoute === '/ready') { this.setState({refreshHistory: !this.state.refreshHistory}); } } 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 = []; } this.setState({localHistory: newHistory}); storage.set('history', newHistory); } } sendMessage(uri, message) { // Send outgoing messages console.log('Outgoing message to', uri); let outgoingMessage; message.sent = false; message.received = false; message.direction = 'outgoing'; if (this.state.account) { outgoingMessage = this.state.account.sendMessage(uri, message.text, {id: message._id}); message.pending = true; } else { message.pending = false; } this.saveOutgoingMessage(uri, message); let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) === -1) { renderMessages[uri] = []; } renderMessages[uri].push(message); this.setState({messages: renderMessages}); } async reSendMessage(message, uri) { await this.deleteMessage(message._id, uri).then((result) => { message._id = uuid.v4(); message.createdAt = new Date(); this.sendMessage(uri, message); }).catch((error) => { console.log('Failed to delete old messages'); }); } async saveOutgoingMessage(uri, message) { this.saveOutgoingChatUri(uri); let query = "INSERT INTO messages (msg_id, timestamp, content, content_type, from_uri, to_uri, " + " direction, pending, sent, received) VALUES ('" + message._id + "', '" + message.createdAt + "', '" + base64.encode(message.text) + "', '" + 'text/plain' + "', '" + this.state.account.id + "', '" + uri + "', '" + 'outgoing' + "', " + "0, 0, 0" + ")"; //console.log(query); await this.ExecuteQuery(query).then((result) => { //console.log('SQL insert message OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async saveConferenceMessage(uri, message) { let query = "INSERT INTO messages (msg_id, timestamp, content, content_type, from_uri, to_uri, " + " direction, pending, sent, received) VALUES ('" + message._id + "', '" + message.createdAt + "', '" + base64.encode(message.text) + "', '" + 'text/plain' + "', '" + this.state.account.id + "', '" + uri + "', '" + 'outgoing' + "', '" + (message.pending ? 1: 0) + "', '" + (message.sent ? 1: 0) + "', '" + (message.received ? 1: 0) + "')"; //console.log(query); await this.ExecuteQuery(query).then((result) => { //console.log('SQL insert message OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async messageStateChanged(obj) { // valid API states: pending -> accepted -> delivered -> displayed, // error, failed or forbidden // valid UI render states: pending, read, received let id = obj.messageId; let state = obj.state; let uri; utils.timestampedLog('Message state changed for message', id, state); let query; if (state == 'accepted') { query = "UPDATE messages set pending = 0 where msg_id = '" + id + "'"; } else if (state == 'delivered') { query = "UPDATE messages set sent = 1 where msg_id = '" + id + "'"; } else if (state == 'displayed') { query = "UPDATE messages set received = 1 where msg_id = '" + id + "'"; } else if (state == 'failed') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'error') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'forbidden') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } //console.log(query); await this.ExecuteQuery(query).then((results) => { this.updateRenderMessage(id, state); // console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async deleteMessage(id, uri) { utils.timestampedLog('Delete message', id); let query; // TODO send request to server query = "DELETE from messages where msg_id = '" + id + "'"; //console.log(query); this.addJournal(id, 'delete'); await this.ExecuteQuery(query).then((results) => { this.deleteRenderMessage(id, uri); // console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async expireMessage(id, duration=300) { utils.timestampedLog('Expire message', id, 'in', duration, 'seconds after read'); // TODO expire message } async deleteRenderMessage(id, uri) { if (uri.indexOf('@videoconference.') > -1) { uri = uri.split('@')[0]; } let changes = false; let renderedMessages = this.state.messages; let newRenderedMessages = []; if (uri in this.state.messages) { renderedMessages[uri].forEach((m) => { if (m._id !== id) { newRenderedMessages.push(m); } else { changes = true; } }); renderedMessages[uri] = newRenderedMessages; } if (changes) { this.setState({messages: renderedMessages}); } } async updateRenderMessage(id, state) { let query; let uri; let changes = false; query = "SELECT * from messages where msg_id = '" + id + "';"; //console.log(query); await this.ExecuteQuery(query,[]).then((results) => { let rows = results.rows; if (rows.length === 1) { var item = rows.item(0); uri = item.direction === 'outgoing' ? item.to_uri : item.from_uri; //console.log('Message uri', uri, 'new state', state); if (uri in this.state.messages) { let renderedMessages = this.state.messages; renderedMessages[uri].forEach((m) => { if (m._id === id) { if (state === 'accepted') { m.pending = false; changes = true; } if (state === 'delivered') { m.sent = true; m.pending = false; changes = true; } if (state === 'displayed') { m.received = true; m.sent = true; m.pending = false; changes = true; } if (state === 'failed') { m.received = false; m.sent = false; m.pending = false; m.failed = true; changes = true; } if (state === 'pinned') { m.pinned = true; changes = true; } if (state === 'unpinned') { m.pinned = false; changes = true; } } }); if (changes) { console.log('Message', id, 'updated'); this.setState({messages: renderedMessages}); } } else { //console.log('Messages for', uri, 'are not rendered now'); } } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async saveOutgoingChatUri(uri) { //console.log('saveOutgoingChatUri', uri); let current_datetime = new Date(); let formatted_date = 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 query; - let myDisplayNames = this.state.myDisplayNames; + let myContacts = this.state.myContacts; - if (uri in myDisplayNames) { + if (uri in myContacts) { // } else { - myDisplayNames[uri] = {}; + myContacts[uri] = {}; } - myDisplayNames[uri].timestamp = formatted_date; - myDisplayNames[uri].unread = 0; + myContacts[uri].timestamp = formatted_date; + myContacts[uri].unread = 0; - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); + this.saveMyContacts(myContacts); } pinMessage(id) { let query; query = "UPDATE messages set pinned = 1 where msg_id ='" + id + "'"; //console.log(query); this.ExecuteQuery(query).then((results) => { console.log('Message', id, 'pinned'); this.updateRenderMessage(id, 'pinned') this.addJournal(id, 'pinned'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } unpinMessage(id) { let query; query = "UPDATE messages set pinned = 0 where msg_id ='" + id + "'"; //console.log(query); this.ExecuteQuery(query).then((results) => { this.updateRenderMessage(id, 'unpinned') this.addJournal(id, 'unpinned'); console.log('Message', id, 'unpinned'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async addJournal(id, action, data={}) { //console.log('Add journal entry:', action, id); } async confirmRead(uri){ - //console.log('Confirm read messages for', uri); + console.log('Confirm read messages for', uri); let query; let displayed = []; - query = "SELECT * FROM messages where from_uri = '" + uri + "' and received is NULL and system is NULL"; + query = "SELECT * FROM messages where from_uri = '" + uri + "' and received = 0 and system is NULL"; //console.log(query); await this.ExecuteQuery(query).then((results) => { let rows = results.rows; - //console.log('We must confirm read of', rows.length, 'messages'); + if (rows.length > 0) { + console.log('We must confirm read of', rows.length, 'messages'); + } for (let i = 0; i < rows.length; i++) { var item = rows.item(i); if (this.sendDispositionNotification(item)) { displayed.push(item.msg_id); } } if (displayed.length > 0) { let sql_ids = ''; let i = 1; displayed.forEach((msg_id) => { sql_ids = sql_ids + "'" + msg_id + "'"; if (i < displayed.length) { sql_ids = sql_ids + ', '; } i = i + 1; }); query = "UPDATE messages set received = 1 where msg_id in (" + sql_ids + ")"; //console.log(query); this.ExecuteQuery(query).then((results) => { - console.log('Sent disposition saved for', displayed.length, 'messages'); + //console.log('Sent disposition saved for', displayed.length, 'messages'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); this.resetUnreadCount(uri); } async resetUnreadCount(uri) { - let myDisplayNames = this.state.myDisplayNames; - if (uri in myDisplayNames && myDisplayNames[uri]['unread'] > 0) { - myDisplayNames[uri].unread = 0; - this.setState({myDisplayNames: myDisplayNames}); + console.log('Reset read count for', uri); + let myContacts = this.state.myContacts; + if (uri in myContacts && myContacts[uri].unread > 0) { + myContacts[uri].unread = 0; + this.setState({myContacts: myContacts}); } } async sendDispositionNotification(message) { - //console.log('Confirm read message', message.msg_id); + console.log('Confirm read message', message.msg_id); let query; let result = {}; this.state.account.sendDispositionNotification(message.from_uri, message.msg_id, message.timestamp, 'displayed',(error) => { if (!error) { console.log('Displayed notification for message', message.msg_id, 'was sent'); return true; } else { console.log('Displayed notification for message', message.msg_id, 'failed'); return false; } }); } async getMessages(uri, limit=200){ - //console.log('Get messages with', uri); + console.log('Get messages with', uri); let messages = this.state.messages; let msg; let query; query = "SELECT * FROM messages where from_uri = '" + uri + "' or to_uri = '" + uri + "' order by id desc limit " + limit + ";"; // TODO add pagination, reload older messages //console.log(query); await this.ExecuteQuery(query).then((results) => { //console.log('SQL get messages OK'); let rows = results.rows; messages[uri] = []; let content; let image; for (let i = 0; i < rows.length; i++) { var item = rows.item(i); //console.log(item); content = base64.decode(item.content); if (item.content_type === 'text/html') { content = xss(content, { whiteList: [], // empty, means filter out all tags stripIgnoreTag: true, // filter out all HTML not in the whitelist stripIgnoreTagBody: ["script"] // the script tag is a special case, we need // to filter out its content }); content = utils.escapeHtml(content); } else if (item.content_type === 'text/plain') { content = content; } else if (item.content_type.indexOf('image/') > -1) { image = `data:${item.content_type};base64,${btoa(content)}` } else { content = 'Unknown message type received ' + item.content_type; } let failed = (item.pending === 0 && item.received === 0 && item.sent === 1) ? true: false, msg = { _id: item.msg_id, text: content, image: image, createdAt: item.timestamp, sent: ((item.sent === 1 || item.received === 1) && !failed) ? true : false, direction: item.direction, received: item.received === 1 ? true : false, pending: (item.pending === 1 && item.sent !== 1) ? true : false, system: item.system === 1 ? true : false, failed: (item.pending === 0 && item.received === 0 && item.sent === 1) ? true: false, pinned: (item.pinned === 1) ? true: false, user: item.direction == 'incoming' ? {_id: item.from_uri, name: item.from_name} : {} } messages[uri].push(msg) } messages[uri].reverse(); if (messages[uri].length > 0) { console.log('Got', messages[uri].length, 'messages for', uri); //console.log(messages[uri]); } this.setState({messages: messages}); - this.confirmRead(uri); - }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async purgeMessages(uri) { console.log('Purge messages with', uri); let query; this.addJournal(uri, 'delete_messages'); query = "DELETE FROM messages where from_uri = '" + uri + "' or to_uri = '" + uri + "';" await this.ExecuteQuery(query).then((result) => { //console.log('SQL delete messages OK'); let messages = this.state.messages; delete messages[uri]; this.setState({messages: messages}); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); - if (uri in this.state.myDisplayNames) { - let myDisplayNames = this.state.myDisplayNames; - myDisplayNames[uri].read = 0; - myDisplayNames[uri].timestamp = ''; - this.setState({myDisplayNames: myDisplayNames}); + if (uri in this.state.myContacts) { + let myContacts = this.state.myContacts; + myContacts[uri].read = 0; + myContacts[uri].timestamp = ''; + this.setState({myContacts: myContacts}); } } incomingMessage(message) { // Handle incoming messages if (message.content.indexOf('?OTRv3') > -1) { return; } this.saveIncomingMessage(message.sender.uri, message); let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(message.sender.uri) === -1) { renderMessages[message.sender.uri] = []; } renderMessages[message.sender.uri].push(utils.sylkToRenderMessage(message)); this.setState({messages: renderMessages}); } async saveSystemMessage(uri, content, direction, missed=false) { let timestamp = new Date(); let query = "INSERT INTO messages (msg_id, timestamp, content, content_type, from_uri, to_uri, pending, system, direction) VALUES ('" + uuid.v4() + "', '" + timestamp + "', '" + base64.encode(content) + "', '" + 'text/plain' + "', '" + (direction === 'incoming' ? uri : this.state.account.id) + "', '" + (direction === 'outgoing' ? uri : this.state.account.id) + "', 0, 1, '" + direction + "')"; //console.log(query); await this.ExecuteQuery(query).then((result) => { if (missed) { this.updateUnreadMessages(uri); } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async saveIncomingMessage(uri, message) { var content = message.content; let query = "INSERT INTO messages (msg_id, timestamp, content, content_type, from_uri, to_uri, direction, received) VALUES ('" + message.id + "', '" + message.timestamp + "', '" + base64.encode(content) + "', '" + message.contentType + "', '" + message.sender.uri + "', '" + this.state.account.id + "', 'incoming', 0" + ")"; - console.log(query); + //console.log(query); await this.ExecuteQuery(query).then((result) => { this.updateUnreadMessages(uri, message.sender.toString()); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async updateUnreadMessages(uri, name='') { - console.log('updateUnreadMessages', uri); let current_datetime = new Date(); let formatted_date = 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 myDisplayNames = this.state.myDisplayNames; + let myContacts = this.state.myContacts; - if (uri in myDisplayNames) { + if (uri in myContacts) { // } else { - myDisplayNames[uri] = {'name': name}; + myContacts[uri] = {'name': name}; } - console.log('unread', myDisplayNames[uri].unread); - - if (myDisplayNames[uri].unread >= 0) { - myDisplayNames[uri].unread = myDisplayNames[uri].unread + 1; + if (myContacts[uri].unread >= 1) { + myContacts[uri].unread = myContacts[uri].unread + 1; } else { - myDisplayNames[uri].unread = 0; + myContacts[uri].unread = 1; } - myDisplayNames[uri].timestamp = formatted_date; + myContacts[uri].timestamp = formatted_date; + console.log(uri, 'has', myContacts[uri].unread, 'unread messages'); - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); + this.saveMyContacts(myContacts); } saveParticipant(callUUID, room, uri) { 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 + '@' + this.state.defaultDomain) !== this.state.account.id) { this.myParticipants[room].push(uri); } } else { let new_uris = []; if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { new_uris.push(uri); } if (new_uris) { this.myParticipants[room] = new_uris; } } storage.set('myParticipants', this.myParticipants); } saveDisplayName(uri, displayName) { displayName = displayName.trim(); - let myDisplayNames = this.state.myDisplayNames; + let myContacts = this.state.myContacts; - if (uri in myDisplayNames) { - myDisplayNames[uri].name = displayName; + if (uri in myContacts) { + myContacts[uri].name = displayName; } else { - myDisplayNames[uri] = {}; - myDisplayNames[uri].name = displayName; - myDisplayNames[uri].favorite = false; - myDisplayNames[uri].blocked = false; + myContacts[uri] = {}; + myContacts[uri].name = displayName; + myContacts[uri].favorite = false; + myContacts[uri].blocked = false; } - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); + this.saveMyContacts(myContacts); if (displayName && uri === this.state.accountId) { storage.set('displayName', displayName); this.setState({displayName: displayName}); if (this.state.account && displayName !== this.state.account.displayName) { this.processRegistration(this.state.accountId, this.state.password, displayName); } } - console.log('myDisplayNames', myDisplayNames); + console.log('myContacts', myContacts); } setFavoriteUri(uri) { let favoriteUris = this.state.favoriteUris; let idx = favoriteUris.indexOf(uri); let favorite; if (idx === -1) { favoriteUris.push(uri); favorite = true; } else { let removed = favoriteUris.splice(idx, 1); favorite = true; } storage.set('favoriteUris', favoriteUris); this.setState({favoriteUris: favoriteUris, refreshFavorites: !this.state.refreshFavorites}); - let myDisplayNames = this.state.myDisplayNames; - if (uri in myDisplayNames) { - myDisplayNames[uri].favorite = favorite; + let myContacts = this.state.myContacts; + if (uri in myContacts) { + myContacts[uri].favorite = favorite; } else { - myDisplayNames[uri] = {}; - myDisplayNames[uri].name = ''; - myDisplayNames[uri].favorite = favorite; + myContacts[uri] = {}; + myContacts[uri].name = ''; + myContacts[uri].favorite = favorite; } - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); - console.log('myDisplayNames', myDisplayNames); - + this.saveMyContacts(myContacts); return favorite; } setBlockedUri(uri) { let blockedUris = this.state.blockedUris; console.log('Old blocked Uris:', blockedUris); let blocked; let idx = blockedUris.indexOf(uri); if (idx === -1) { blockedUris.push(uri); blocked = true; } else { let removed = blockedUris.splice(idx, 1); blocked = false; } console.log('New blocked Uris:', blockedUris); storage.set('blockedUris', blockedUris); this.setState({blockedUris: blockedUris}); - let myDisplayNames = this.state.myDisplayNames; - if (uri in myDisplayNames) { - myDisplayNames[uri].blocked = blocked; + let myContacts = this.state.myContacts; + if (uri in myContacts) { + myContacts[uri].blocked = blocked; } else { - myDisplayNames[uri] = {}; - myDisplayNames[uri].name = uri; - myDisplayNames[uri].blocked = blocked; + myContacts[uri] = {}; + myContacts[uri].name = uri; + myContacts[uri].blocked = blocked; } - storage.set('myDisplayNames', myDisplayNames); - this.setState({myDisplayNames: myDisplayNames}); - console.log('myDisplayNames', myDisplayNames); + this.saveMyContacts(myContacts); return blocked; } + saveMyContacts(myContacts) { + console.log('Saved', Object.keys(myContacts).length, 'contacts'); + storage.set('myContacts', myContacts); + this.setState({myContacts: myContacts}); + } saveInvitedParties(room, uris) { room = room.split('@')[0]; //console.log('Save invited parties', uris, 'for room', room); 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 + '@' + this.state.defaultDomain) !== this.state.account.id) { this.myInvitedParties[room].push(uri); } }); } else { let new_uris = []; uris.forEach((uri) => { if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { new_uris.push(uri); } }); if (new_uris) { this.myInvitedParties[room] = new_uris; } } storage.set('myInvitedParties', this.myInvitedParties); this.setState({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}); } addConferenceHistoryEntry(uri, callUUID, direction='placed', participants=[]) { 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, participants: participants, media: ['audio', 'video'], displayName: uri.split('@')[0], sessionId: callUUID, startTime: startTime, stopTime: startTime, startTimeObject: current_datetime, duration: 0, tags: ['history', 'local'] }; const historyItem = Object.assign({}, item); let newHistory = this.state.localHistory; newHistory.push(historyItem); this.setState({localHistory: newHistory}); storage.set('history', newHistory); } render() { let footerBox = ; let extraStyles = {}; if (this.state.localMedia || this.state.registrationState === 'registered') { footerBox = null; } return ( this.setState({ Width_Layout : event.nativeEvent.layout.width, Height_Layout : event.nativeEvent.layout.height }, ()=> this._detectOrientation())}> ); } notFound(match) { const status = { title : '404', message : 'Oops, the page your looking for can\'t found', level : 'danger', width : 'large' } return ( ); } saveHistoryForLater(history) { //console.log('Cache history for later', history.length) this.cachedHistory = history; storage.set('cachedHistory', history); } hideLogsModal() { this.setState({showLogsModal: false}); } purgeLogs() { RNFS.unlink(logfile) .then(() => { utils.timestampedLog('Log file initialized'); this.showLogs(); }) // `unlink` will throw an error, if the item to unlink does not exist .catch((err) => { console.log(err.message); }); } showLogs() { this.setState({showLogsModal: true}); RNFS.readFile(logfile, 'utf8').then((content) => { console.log('Read', content.length, 'bytes from', logfile); const lastlines = content.split('\n').slice(-MAX_LOG_LINES).join('\n'); this.setState({logs: lastlines}); }); } trimLogs() { RNFS.readFile(logfile, 'utf8').then((content) => { const lines = content.split('\n'); //console.log('Read', lines.length, 'lines and', content.length, 'bytes from', logfile); if (lines.length > (MAX_LOG_LINES + 50) || content.length > 100000) { const text = lines.slice(-MAX_LOG_LINES).join('\n'); RNFS.writeFile(logfile, text + '\r\n', 'utf8') .then((success) => { //console.log('Trimmed logs to', MAX_LOG_LINES, 'lines and', text.length, 'bytes'); }) .catch((err) => { console.log(err.message); }); } }); } ready() { return ( ); } preview() { return ( ); } call() { let call = this.state.currentCall || this.state.incomingCall; return ( ) } 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(this.state.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) => { _previousParticipants.add(uri); }); } } } let previousParticipants = Array.from(_previousParticipants); return ( ) } matchContact(contact, filter='', matchDisplayName=true) { if (contact.remoteParty.toLowerCase().startsWith(filter.toLowerCase())) { return true; } if (matchDisplayName && contact.displayName && contact.displayName.toLowerCase().indexOf(filter.toLowerCase()) > -1) { return true; } return false; } lookupContacts(text, addressbook=true, favorites=true, localHistory=true, serverHistory=true) { let contacts = []; if (addressbook) { const addressbook_contacts = this.contacts.filter(contact => this.matchContact(contact, text)); addressbook_contacts.forEach((c) => { const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false)); if (existing_contacts.length === 0) { contacts.push(c); } }); } if (favorites) { const favorite_contacts = this.favoritesContacts.filter(contact => this.matchContact(contact, text)); favorite_contacts.forEach((c) => { const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false)); if (existing_contacts.length === 0) { contacts.push(c); } }); } if (localHistory) { const local_history_contacts = this.state.localHistory.filter(contact => this.matchContact(contact, text)); local_history_contacts.forEach((c) => { const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false)); if (c.remoteParty.toLowerCase().indexOf('@guest.')) { } if (c.remoteParty.toLowerCase().indexOf('@conference.')) { } if (c.remoteParty.toLowerCase().indexOf('@videoconference.')) { } if (existing_contacts.length === 0) { contacts.push(c); } }); } if (serverHistory) { const server_history_contacts = this.cachedHistory.filter(contact => this.matchContact(contact, text)); server_history_contacts.forEach((c) => { const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false)); if (c.remoteParty.toLowerCase().indexOf('@guest.')) { } if (c.remoteParty.toLowerCase().indexOf('@conference.')) { } if (existing_contacts.length === 0) { contacts.push(c); } }); } return contacts; } get favoritesContacts() { let favoriteContacts = []; let displayName = ''; let conference = false; this.state.favoriteUris.forEach((uri) => { if (!uri) { return; } uri = uri.toLowerCase(); displayName = ''; - if (this.state.myDisplayNames && this.state.myDisplayNames.hasOwnProperty(uri)) { - displayName = this.state.myDisplayNames[uri].name; + if (this.state.myContacts && this.state.myContacts.hasOwnProperty(uri)) { + displayName = this.state.myContacts[uri].name; } conference = false; let tags = ['favorite']; if (uri.indexOf('@videoconference.') > -1) { displayName = uri.split('@')[0]; const room = uri.split('@')[0]; uri = room + '@' + config.defaultConferenceDomain; conference = true; tags.push('conference'); } const item = { remoteParty: uri, displayName: displayName, conference: conference, type: 'contact', id: uuid.v4(), tags: tags }; favoriteContacts.push(item); }); return favoriteContacts; } 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 ( ); } return ( ); } login() { let registerBox; let statusBox; this.mustLogout = false; if (this.state.status !== null) { statusBox = ( ); } if (this.state.registrationState !== 'registered') { registerBox = ( ); } return ( {registerBox} {statusBox} ); } logout() { this.callKeeper.setAvailable(false); if (!this.mustLogout && this.state.registrationState !== null && this.state.connection && this.state.connection.state === 'ready') { // remove token from server this.mustLogout = true; this.state.account.setDeviceToken('None', Platform.OS, deviceId, true, bundleId); this.state.account.register(); return; } else if (this.mustLogout && this.state.connection && this.state.account) { this.state.account.unregister(); } this.tokenSent = false; if (this.state.connection && this.state.account) { this.state.connection.removeAccount(this.state.account, (error) => { if (error) { logger.debug(error); } }); } storage.set('account', {accountId: this.state.accountId, password: this.state.password}); this.serverHistory = []; this.setState({account: null, registrationState: null, registrationKeepalive: false, status: null, autoLogin: false, history: [], localHistory: [], cachedHistory: [], defaultDomain: config.defaultDomain }); this.changeRoute('/login'); return null; } main() { return null; } } export default Sylk; diff --git a/app/assets/styles/blink/_ReadyBox.scss b/app/assets/styles/blink/_ReadyBox.scss index 93cd837..2cab040 100644 --- a/app/assets/styles/blink/_ReadyBox.scss +++ b/app/assets/styles/blink/_ReadyBox.scss @@ -1,162 +1,169 @@ @import './variables'; .container { flex: 1; flex-direction: column; justify-content: center; } .historyLandscapeContainer { margin-top: 0px; width: 100%; flex: 9; } .historyPortraitContainer { width: 100%; flex: 9; } .landscapeTitle { color: white; font-size: 20px; width: 90%; margin-left: 5%; } .portraitTitle { color: white; font-size: 20px; width: 90%; margin-top: 10px; margin-left: 5%; } .landscapeTabletTitle { margin-top: 20px; color: white; font-size: 24px; width: 100%; margin-left: 3px; } .portraitTabletTitle { margin-top: 20px; color: white; font-size: 20px; width: 100%; margin-left: 10px; } .portraitUriButtonGroup { flex-direction: column; width: 100%; margin-left: 0%; } .landscapeUriButtonGroup { flex-direction: row; width: 100%; margin-left: 2px; justify-content: space-between; } .portraitTabletUriButtonGroup { flex-direction: column; width: 100%; margin-left: 0%; justify-content: space-between; } .landscapeTabletUriButtonGroup { flex-direction: row; width: 100%; margin-left: 0%; justify-content: space-between; } .portraitUriInputBox { align: left; width: 100%; } .landscapeUriInputBox { align: left; flex: 1; padding-top: 10px; margin-left: 2px; margin-right: 8px; } .portraitTabletUriInputBox { align: left; padding-top: 10px; width: 100%; } .landscapeTabletUriInputBox { align: left; padding-top: 10px; width: 66%; margin-left: 3px; } .historyButtonGroup { flex-direction: row; justify-content: center; } .historyButton { width:33%; } .buttonGroup { flex-direction: row; padding-top: 5px; justify-content: center; } .landscapeButtonGroup { flex: 1; flex-direction: row; justify-content: flex-end; } .uriInputBox { align: left; padding-top: 10px; width: 100%; } .button { background-color: rgba(#6DAA63, .9); margin: 10px; padding-top: 2px; padding-left: 1px; } .iosButton { background-color: rgba(#6DAA63, .9); margin: 10px; padding-top: 4px; padding-left: 1px; } .androidButton { background-color: rgba(#6DAA63, .9); margin: 10px; padding-top: 1px; padding-left: 1px; } .conferenceButton { background-color: rgba(#4572a6, 1); margin: 10px; } .footer { flex: 1; justify-content: flex-end; padding-bottom: 0px; } +.backButton { + background-color: red; + color: white; + margin: 10px; + border-radius: 10px; + border: 1px; +} diff --git a/app/components/AudioCallBox.js b/app/components/AudioCallBox.js index 8df5168..1892c07 100644 --- a/app/components/AudioCallBox.js +++ b/app/components/AudioCallBox.js @@ -1,353 +1,355 @@ import React, { Component } from 'react'; import { View, Platform, TouchableWithoutFeedback } from 'react-native'; import { IconButton, Dialog, Text, ActivityIndicator, Colors } from 'react-native-paper'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import EscalateConferenceModal from './EscalateConferenceModal'; import CallOverlay from './CallOverlay'; import DTMFModal from './DTMFModal'; import UserIcon from './UserIcon'; import styles from '../assets/styles/blink/_AudioCallBox.scss'; import utils from '../utils'; import TrafficStats from './BarChart'; function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class AudioCallBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { remoteUri : this.props.remoteUri, remoteDisplayName : this.props.remoteDisplayName, photo : this.props.photo, active : false, audioMuted : this.props.muted, showDtmfModal : false, showEscalateConferenceModal : false, call : this.props.call, reconnectingCall : this.props.reconnectingCall, info : this.props.info, packetLossQueue : [], audioBandwidthQueue : [], latencyQueue : [], declineReason : this.props.declineReason }; this.remoteAudio = React.createRef(); this.userHangup = false; } 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.state.call != null) { switch (this.state.call.state) { case 'established': this.attachStream(this.state.call); break; case 'incoming': this.props.mediaPlaying(); // fall through default: this.state.call.on('stateChanged', this.callStateChanged); break; } } } componentWillUnmount() { if (this.state.call != null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.call !== null && nextProps.call !== this.state.call) { if (nextProps.call.state === 'established') { this.attachStream(nextProps.call); this.setState({reconnectingCall: false}); } nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call}); } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.hasOwnProperty('muted')) { this.setState({audioMuted: nextProps.muted}); } if (nextProps.hasOwnProperty('info')) { this.setState({info: nextProps.info}); } if (nextProps.hasOwnProperty('packetLossQueue')) { this.setState({packetLossQueue: nextProps.packetLossQueue}); } if (nextProps.hasOwnProperty('audioBandwidthQueue')) { this.setState({audioBandwidthQueue: nextProps.audioBandwidthQueue}); } if (nextProps.hasOwnProperty('latencyQueue')) { this.setState({latencyQueue: nextProps.latencyQueue}); } this.setState({remoteUri: nextProps.remoteUri, remoteDisplayName: nextProps.remoteDisplayName, photo: nextProps.photo, declineReason: nextProps.declineReason }); } componentWillUnmount() { if (this.state.call != null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.callTimer); } callStateChanged(oldState, newState, data) { if (newState === 'established') { this.attachStream(this.state.call); this.setState({reconnectingCall: false}); } } attachStream(call) { this.setState({stream: call.getRemoteStreams()[0]}); //we dont use it anywhere though as audio gets automatically piped } escalateToConference(participants) { this.props.escalateToConference(participants); } hangupCall(event) { event.preventDefault(); this.props.hangupCall('user_hangup_call'); this.userHangup = true; } cancelCall(event) { event.preventDefault(); this.props.hangupCall('user_cancel_call'); } muteAudio(event) { event.preventDefault(); this.props.toggleMute(this.props.call.id, !this.state.audioMuted); } showDtmfModal() { this.setState({showDtmfModal: true}); } hideDtmfModal() { this.setState({showDtmfModal: false}); } toggleEscalateConferenceModal() { this.setState({ showEscalateConferenceModal: !this.state.showEscalateConferenceModal }); } handleDoubleTap() { const now = Date.now(); const DOUBLE_PRESS_DELAY = 300; if (this.lastTap && now - this.lastTap < DOUBLE_PRESS_DELAY) { this.props.showLogs(); } else { this.lastTap = now; } } render() { let buttonContainerClass; let userIconContainerClass; let remoteIdentity = {uri: this.state.remoteUri || '', displayName: this.state.remoteDisplayName || '', photo: this.state.photo }; const username = this.state.remoteUri.split('@')[0]; const isPhoneNumber = username.match(/^(\+|0)(\d+)$/); let displayName = this.state.remoteUri ? toTitleCase(this.state.remoteUri.split('@')[0]) : ''; if (this.state.remoteDisplayName && this.state.remoteUri !== this.state.remoteDisplayName) { displayName = this.state.remoteDisplayName; } if (this.props.isTablet) { buttonContainerClass = this.props.orientation === 'landscape' ? styles.tabletLandscapeButtonContainer : styles.tabletPortraitButtonContainer; userIconContainerClass = styles.tabletUserIconContainer; } else { buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer; userIconContainerClass = styles.userIconContainer; } const buttonSize = this.props.isTablet ? 40 : 34; const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; return ( {displayName} {this.state.remoteUri} {this.props.orientation !== 'landscape' && this.state.reconnectingCall ? : null } {this.state.call && ((this.state.call.state === 'accepted' || this.state.call.state === 'established') && !this.state.reconnectingCall) ? {isPhoneNumber ? : null } : } ); } } AudioCallBox.propTypes = { remoteUri : PropTypes.string, remoteDisplayName : PropTypes.string, photo : PropTypes.string, call : PropTypes.object, connection : PropTypes.object, accountId : PropTypes.string, escalateToConference : PropTypes.func, info : PropTypes.string, hangupCall : PropTypes.func, mediaPlaying : PropTypes.func, callKeepSendDtmf : PropTypes.func, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, orientation : PropTypes.string, isTablet : PropTypes.bool, reconnectingCall : PropTypes.bool, muted : PropTypes.bool, packetLossQueue : PropTypes.array, videoBandwidthQueue : PropTypes.array, audioBandwidthQueue : PropTypes.array, latencyQueue : PropTypes.array, declineReason : PropTypes.string, - showLogs : PropTypes.func + showLogs : PropTypes.func, + goBackFunc : PropTypes.func }; export default AudioCallBox; diff --git a/app/components/Call.js b/app/components/Call.js index 4360660..12f9d90 100644 --- a/app/components/Call.js +++ b/app/components/Call.js @@ -1,964 +1,969 @@ 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 AudioCallBox from './AudioCallBox'; import LocalMedia from './LocalMedia'; import VideoBox from './VideoBox'; import config from '../config'; import utils from '../utils'; function randomIntFromInterval(min,max) { return Math.floor(Math.random()*(max-min+1)+min); } function FixedQueue( size, initialValues ){ // If there are no initial arguments, default it to // an empty value so we can call the constructor in // a uniform way. initialValues = (initialValues || []); // Create the fixed queue array value. var queue = Array.apply( null, initialValues ); // Store the fixed size in the queue. queue.fixedSize = size; // Add the class methods to the queue. Some of these have // to override the native Array methods in order to make // sure the queue lenght is maintained. queue.push = FixedQueue.push; queue.splice = FixedQueue.splice; queue.unshift = FixedQueue.unshift; // Trim any initial excess from the queue. FixedQueue.trimTail.call( queue ); // Return the new queue. return( queue ); } // I trim the queue down to the appropriate size, removing // items from the beginning of the internal array. FixedQueue.trimHead = function(){ // Check to see if any trimming needs to be performed. if (this.length <= this.fixedSize){ // No trimming, return out. return; } // Trim whatever is beyond the fixed size. Array.prototype.splice.call( this, 0, (this.length - this.fixedSize) ); }; // I trim the queue down to the appropriate size, removing // items from the end of the internal array. FixedQueue.trimTail = function(){ // Check to see if any trimming needs to be performed. if (this.length <= this.fixedSize){ // No trimming, return out. return; } // Trim whatever is beyond the fixed size. Array.prototype.splice.call( this, this.fixedSize, (this.length - this.fixedSize) ); }; // I synthesize wrapper methods that call the native Array // methods followed by a trimming method. FixedQueue.wrapMethod = function( methodName, trimMethod ){ // Create a wrapper that calls the given method. var wrapper = function(){ // Get the native Array method. var method = Array.prototype[ methodName ]; // Call the native method first. var result = method.apply( this, arguments ); // Trim the queue now that it's been augmented. trimMethod.call( this ); // Return the original value. return( result ); }; // Return the wrapper method. return( wrapper ); }; // Wrap the native methods. FixedQueue.push = FixedQueue.wrapMethod( "push", FixedQueue.trimHead ); FixedQueue.splice = FixedQueue.wrapMethod( "splice", FixedQueue.trimTail ); FixedQueue.unshift = FixedQueue.wrapMethod( "unshift", FixedQueue.trimTail ); class Call extends Component { constructor(props) { super(props); autoBind(this); this.samples = 30; this.sampleInterval = 3; this.defaultWaitInterval = 60; // until we can connect or reconnect this.waitCounter = 0; this.waitInterval = this.defaultWaitInterval; this.videoBytesSent = 0; this.audioBytesSent = 0; this.videoBytesReceived = 0; this.audioBytesReceived = 0; this.packetLoss = 0; this.packetLossQueue = FixedQueue(this.samples); this.latencyQueue = FixedQueue(this.samples); this.audioBandwidthQueue = FixedQueue(this.samples); this.videoBandwidthQueue = FixedQueue(this.samples); this.mediaLost = false; let callUUID; let remoteUri = ''; let remoteDisplayName = ''; let callState = null; let direction = null; let callEnded = false; this.mediaIsPlaying = false; this.ended = false; this.answering = false; if (this.props.call) { // If current call is available on mount we must have incoming this.props.call.on('stateChanged', this.callStateChanged); remoteUri = this.props.call.remoteIdentity.uri; remoteDisplayName = this.props.call.remoteIdentity.displayName || this.props.call.remoteIdentity.uri; direction = this.props.call.direction; callUUID = this.props.call.id; } else { remoteUri = this.props.targetUri; remoteDisplayName = this.props.targetUri; callUUID = this.props.callUUID; direction = callUUID ? 'outgoing' : 'incoming'; } if (this.props.connection) { this.props.connection.on('stateChanged', this.connectionStateChanged); } let audioOnly = false; if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) { audioOnly = true; } this.state = { call: this.props.call, targetUri: this.props.targetUri, audioOnly: audioOnly, boo: false, remoteUri: remoteUri, remoteDisplayName: remoteDisplayName, localMedia: this.props.localMedia, connection: this.props.connection, accountId: this.props.account ? this.props.account.id : null, callState: callState, direction: direction, callUUID: callUUID, reconnectingCall: this.props.reconnectingCall, info: '', packetLossQueue: [], audioBandwidthQueue: [], videoBandwidthQueue: [], latencyQueue: [], declineReason: this.props.declineReason } this.statisticsTimer = setInterval(() => { this.getConnectionStats(); }, this.sampleInterval * 1000); } componentDidMount() { this.resetStats(); this.lookupContact(); if (this.state.direction === 'outgoing' && this.state.callUUID) { + utils.timestampedLog('Call: start call', this.state.callUUID, 'when ready to', this.state.targetUri); this.startCallWhenReady(this.state.callUUID); } if (this.state.call === null) { this.mediaPlaying(); } } componentWillUnmount() { this.ended = true; this.answering = false; if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } if (this.state.connection) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); } } resetStats() { if (this.ended) { return; } this.setState({ bandwidth: '', packetLossQueue: [], audioBandwidthQueue: [], videoBandwidthQueue: [], latencyQueue: [] }); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { // Needed for switching to incoming call while in a call if (this.ended) { return; } this.setState({connection: nextProps.connection, accountId: nextProps.account ? nextProps.account.id : null}); if (this.state.call === null && nextProps.call !== null) { //utils.timestampedLog('Call: Sylkrtc call has been set'); nextProps.call.on('stateChanged', this.callStateChanged); this.setState({ call: nextProps.call, remoteUri: nextProps.call.remoteIdentity.uri, direction: nextProps.call.direction, callUUID: nextProps.call.id, remoteDisplayName: nextProps.call.remoteIdentity.displayName }); this.lookupContact(); } else { if (nextProps.callUUID !== null && this.state.callUUID !== nextProps.callUUID) { this.setState({'callUUID': nextProps.callUUID, 'direction': 'outgoing', 'call': null }); this.startCallWhenReady(nextProps.callUUID); } } if (nextProps.reconnectingCall !== this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.targetUri !== this.state.targetUri && this.state.direction === 'outgoing') { this.setState({targetUri: nextProps.targetUri}); } this.setState({registrationState: nextProps.registrationState, declineReason: nextProps.declineReason}); if (nextProps.localMedia !== null && nextProps.localMedia !== this.state.localMedia && this.state.direction === 'outgoing') { utils.timestampedLog('Call: media for outgoing call has been changed'); let audioOnly = false; if (nextProps.localMedia.getVideoTracks().length === 0) { audioOnly = true; } this.setState({localMedia: nextProps.localMedia, audioOnly: audioOnly}); //this.mediaPlaying(nextProps.localMedia); } } getConnectionStats() { if (this.ended) { return; } let speed = 0; let diff = 0; let delay = 0; let audioPackets = 0; let videoPackets = 0; let audioPacketsLost = 0; let videoPacketsLost = 0; let audioPacketLoss = 0; let videoPacketLoss = 0; let bandwidthUpload = 0; let bandwidthDownload = 0; let mediaType; let foundVideo = false; if (!this.state.call || !this.state.call._pc) { this.resetStats(); return; } this.state.call._pc.getStats(null).then(stats => { stats.forEach(report => { if (report.type === "ssrc") { report.values.forEach(object => { if (object.mediaType) { mediaType = object.mediaType; } }); report.values.forEach(object => { if (object.bytesReceived) { const bytesReceived = Math.floor(object.bytesReceived); if (mediaType === 'audio') { if (this.audioBytesReceived > 0 && this.audioBytesReceived < bytesReceived) { diff = bytesReceived - this.audioBytesReceived; diff = bytesReceived - this.audioBytesReceived; speed = Math.floor(diff / this.sampleInterval * 8 / 1000); //console.log('Audio bandwidth received', speed, 'kbit/s'); bandwidthDownload = bandwidthDownload + speed; if (this.audioBandwidthQueue.length < this.samples) { var n = this.samples; while (n > 0) { this.audioBandwidthQueue.push(0); n = n - 1; } } this.audioBandwidthQueue.push(speed); } this.audioBytesReceived = bytesReceived; } else if (mediaType === 'video') { foundVideo = true; if (this.videoBytesReceived > 0 && this.videoBytesReceived < bytesReceived) { diff = bytesReceived - this.videoBytesReceived; speed = Math.floor(diff / this.sampleInterval * 8 / 1000); //console.log('Video bandwidth received', speed, 'kbit/s'); bandwidthDownload = bandwidthDownload + speed; if (this.videoBandwidthQueue.length < this.samples) { var n = this.samples; while (n > 0) { this.videoBandwidthQueue.push(0); n = n - 1; } } this.videoBandwidthQueue.push(speed) } this.videoBytesReceived = bytesReceived; } } else if (object.bytesSent) { const bytesSent = Math.floor(object.bytesSent); if (mediaType === 'audio') { if (this.audioBytesSent > 0 && bytesSent > this.audioBytesSent) { const diff = bytesSent - this.audioBytesSent; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); bandwidthUpload = bandwidthUpload + speed; //console.log('Audio bandwidth sent', speed, 'kbit/s'); } this.audioBytesSent = bytesSent; } else if (mediaType === 'video') { foundVideo = true; if (this.videoBytesSent > 0 && bytesSent > this.videoBytesSent) { const diff = bytesSent - this.videoBytesSent; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); bandwidthUpload = bandwidthUpload + speed; //console.log('Video bandwidth sent', speed, 'kbit/s'); } this.videoBytesSent = bytesSent; } } else if (object.packetsLost) { if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsLost); audioPacketsLost = audioPacketsLost + Math.floor(object.packetsLost); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsLost); videoPacketsLost = videoPacketsLost + Math.floor(object.packetsLost); } } else if (object.packetsReceived) { if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsReceived); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsReceived); } } else if (object.googCurrentDelayMs) { delay = object.googCurrentDelayMs; } //console.log(object); }); }}); // packet loss videoPacketLoss = 0; if (videoPackets > 0) { videoPacketLoss = Math.floor(videoPacketsLost / videoPackets * 100); if (videoPacketLoss > 1) { //console.log('Video packet loss', videoPacketLoss, '%'); } } audioPacketLoss = 0; if (audioPackets > 0) { audioPacketLoss = Math.floor(audioPacketsLost / audioPackets * 100); if (audioPacketLoss > 3) { //console.log('Audio packet loss', audioPacketLoss, '%'); } } this.packetLoss = videoPacketLoss > audioPacketLoss ? videoPacketLoss : audioPacketLoss; //this.packetLoss = randomIntFromInterval(2, 10); if (this.packetLoss < 3) { this.packetLoss = 0; } if (this.packetLossQueue.length < this.samples) { var n = this.samples; while (n > 0) { this.packetLossQueue.push(0); n = n - 1; } } if (this.latencyQueue.length < this.samples) { var n = this.samples; while (n > 0) { this.latencyQueue.push(0); n = n - 1; } } this.latencyQueue.push(Math.ceil(delay)); this.packetLossQueue.push(this.packetLoss); this.audioPacketLoss = audioPacketLoss; this.videoPacketLoss = videoPacketLoss; let info; let suffix = 'kbit/s'; if (foundVideo && (bandwidthUpload > 0 || bandwidthDownload > 0)) { suffix = 'Mbit/s'; bandwidthUpload = Math.ceil(bandwidthUpload / 1000 * 100) / 100; bandwidthDownload = Math.ceil(bandwidthDownload / 1000 * 100) / 100; } if (bandwidthDownload > 0 && bandwidthUpload > 0) { info = '⇣' + bandwidthDownload + ' ⇡' + bandwidthUpload; } else if (bandwidthDownload > 0) { info = '⇣' + bandwidthDownload; } else if (bandwidthUpload > 0) { info = '⇡' + this.bandwidthUpload; } if (info) { info = info + ' ' + suffix; } if (this.packetLoss > 2) { info = info + ' - ' + Math.ceil(this.packetLoss) + '% loss'; } if (delay > 150) { info = info + ' - ' + Math.ceil(delay) + ' ms'; } this.setState({packetLossQueue: this.packetLossQueue, latencyQueue: this.latencyQueue, videoBandwidthQueue: this.videoBandwidthQueue, audioBandwidthQueue: this.audioBandwidthQueue, info: info }); }); }; mediaPlaying(localMedia) { if (this.state.direction === 'incoming') { const media = localMedia ? localMedia : this.state.localMedia; this.answerCall(media); } else { this.mediaIsPlaying = true; } } answerCall(localMedia) { const media = localMedia ? localMedia : this.state.localMedia; if (this.state.call && this.state.call.state === 'incoming' && media) { let options = {pcConfig: {iceServers: config.iceServers}}; options.localStream = media; if (!this.answering) { this.answering = true; const connectionState = this.state.connection.state ? this.state.connection.state : null; utils.timestampedLog('Call: answering call', this.state.call.id, 'in connection state', connectionState); try { this.state.call.answer(options); utils.timestampedLog('Call: answered'); } catch (error) { utils.timestampedLog('Call: failed to answer', error); this.hangupCall('answer_failed') } } else { utils.timestampedLog('Call: answering call in progress...'); } } else { if (!this.state.call) { utils.timestampedLog('Call: no Sylkrtc call present'); this.hangupCall('answer_failed'); } if (this.state.call && this.state.call.state !== 'incoming') { utils.timestampedLog('Call: state is not incoming'); } if (!media) { utils.timestampedLog('Call: waiting for local media'); } } } lookupContact() { let photo = null; let remoteUri = this.state.remoteUri || ''; let remoteDisplayName = this.state.remoteDisplayName || ''; if (!remoteUri) { return; } if (remoteUri.indexOf('3333@') > -1) { remoteDisplayName = 'Video Test'; } else if (remoteUri.indexOf('4444@') > -1) { remoteDisplayName = 'Echo Test'; - } else if (this.props.myDisplayNames.hasOwnProperty(remoteUri) && this.props.myDisplayNames[remoteUri].name) { - remoteDisplayName = this.props.myDisplayNames[remoteUri]; + } else if (this.props.myContacts.hasOwnProperty(remoteUri) && this.props.myContacts[remoteUri].name) { + remoteDisplayName = this.props.myContacts[remoteUri]; } 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; photo = contact_obj.photo; if (isPhoneNumber) { remoteUri = username; } } else { if (isPhoneNumber) { remoteUri = username; remoteDisplayName = username; } } } this.setState({remoteDisplayName: remoteDisplayName, remoteUri: remoteUri, photo: photo }); } callStateChanged(oldState, newState, data) { //console.log('Call: callStateChanged', oldState, '->', newState); if (this.ended) { return; } let remoteHasNoVideoTracks; let remoteIsRecvOnly; let remoteIsInactive; let remoteStreams; this.answering = false; if (newState === 'established') { this.setState({reconnectingCall: false}); const currentCall = this.state.call; if (currentCall) { remoteStreams = currentCall.getRemoteStreams(); if (remoteStreams) { if (remoteStreams.length > 0) { const remotestream = remoteStreams[0]; remoteHasNoVideoTracks = remotestream.getVideoTracks().length === 0; remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly'; remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive'; } } } if (remoteStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) { //console.log('Media type changed to audio'); // Stop local video if (this.state.localMedia.getVideoTracks().length !== 0) { currentCall.getLocalStreams()[0].getVideoTracks()[0].stop(); } this.setState({audioOnly: true}); } else { this.forceUpdate(); } } 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.state.localMedia && this.state.localMedia.getVideoTracks().length !== 0) { //console.log('Media type changed to video on accepted'); this.setState({audioOnly: false}); } } this.forceUpdate(); } connectionStateChanged(oldState, newState) { switch (newState) { case 'closed': break; case 'ready': break; case 'disconnected': if (oldState === 'ready' && this.state.direction === 'outgoing') { utils.timestampedLog('Call: reconnecting the call...'); this.waitInterval = this.defaultWaitInterval; } 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; } canConnect() { if (!this.state.connection) { console.log('Call: no connection yet'); return false; } if (this.state.connection.state !== 'ready') { console.log('Call: connection is not ready'); return false; } if (this.props.registrationState !== 'registered') { console.log('Call: account not ready yet'); return false; } if (!this.mediaIsPlaying) { if (this.waitCounter > 0) { console.log('Call: media is not yet playing'); } return false; } return true; } async startCallWhenReady(callUUID) { - utils.timestampedLog('Call: start call', callUUID, 'when ready to', this.state.targetUri); this.waitCounter = 0; let diff = 0; while (this.waitCounter < this.waitInterval) { if (this.waitCounter === 1) { utils.timestampedLog('Call: waiting for establishing call', this.waitInterval, 'seconds'); } if (this.userHangup) { this.hangupCall('user_cancelled'); return; } if (this.ended) { return; } if (this.waitCounter >= this.waitInterval - 1) { this.hangupCall('timeout'); } if (!this.canConnect()) { //utils.timestampedLog('Call: waiting for connection', this.waitInterval - this.waitCounter, 'seconds'); if (this.state.call && this.state.call.id === callUUID && this.state.call.state !== 'terminated') { return; } if (this.waitCounter > 0) { console.log('Wait', this.waitCounter); } await this._sleep(1000); } else { this.waitCounter = 0; this.start(); return; } this.waitCounter++; } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } start() { utils.timestampedLog('Call: starting call', this.state.callUUID); if (this.state.localMedia === null) { console.log('Call: cannot create new call without local media'); return; } let options = {pcConfig: {iceServers: config.iceServers}, id: this.state.callUUID}; options.localStream = this.state.localMedia; let call = this.props.account.call(this.state.targetUri, options); if (call) { call.on('stateChanged', this.callStateChanged); } } hangupCall(reason) { let callUUID = this.state.call ? this.state.call.id : this.state.callUUID; this.waitInterval = this.defaultWaitInterval; if (this.state.call) { this.state.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); } render() { let box = null; if (this.state.localMedia !== null) { if (this.state.audioOnly) { box = ( ); } else { if (this.state.call !== null && (this.state.call.state === 'established' || (this.state.call.state === 'terminated' && this.state.reconnectingCall))) { box = ( ); } else { if (this.state.call && this.state.call.state === 'terminated' && this.state.reconnectingCall) { //console.log('Skip render local media because we will reconnect'); } else { box = ( ); } } } } else { box = ( ); } return box; } } Call.propTypes = { targetUri : PropTypes.string, account : PropTypes.object, hangupCall : PropTypes.func, connection : PropTypes.object, registrationState : PropTypes.string, call : PropTypes.object, localMedia : PropTypes.object, shareScreen : PropTypes.func, escalateToConference : PropTypes.func, generatedVideoTrack : PropTypes.bool, callKeepSendDtmf : PropTypes.func, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, callUUID : PropTypes.string, contacts : PropTypes.array, intercomDtmfTone : PropTypes.string, orientation : PropTypes.string, isTablet : PropTypes.bool, reconnectingCall : PropTypes.bool, muted : PropTypes.bool, - myDisplayNames : PropTypes.object, + myContacts : PropTypes.object, declineReason : PropTypes.string, - showLogs : PropTypes.func + showLogs : PropTypes.func, + goBackFunc : PropTypes.func }; export default Call; diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js index eef0d8d..79e296e 100644 --- a/app/components/CallOverlay.js +++ b/app/components/CallOverlay.js @@ -1,220 +1,222 @@ 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 { 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 = { call: this.props.call, declineReason: this.props.declineReason, media: this.props.media ? this.props.media : 'audio', callState: this.props.call ? this.props.call.state : null, direction: this.props.call ? this.props.call.direction: null, remoteUri: this.props.remoteUri, remoteDisplayName: this.props.remoteDisplayName, reconnectingCall: this.props.reconnectingCall } this.duration = null; this.finalDuration = null; this.timer = null; this._isMounted = true; } componentDidMount() { if (this.state.call) { if (this.state.call.state === 'established') { this.startTimer(); } this.state.call.on('stateChanged', this.callStateChanged); this.setState({callState: this.state.call.state}); } } componentWillUnmount() { this._isMounted = false; if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (!this._isMounted) { return; } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.call !== null && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call, direction: nextProps.call.direction}); } this.setState({remoteDisplayName: nextProps.remoteDisplayName, remoteUri: nextProps.remoteUri, media: nextProps.media, declineReason: nextProps.declineReason }); } callStateChanged(oldState, newState, data) { if (newState === 'established' && this._isMounted) { this.startTimer(); } if (newState === 'terminated') { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); this.finalDuration = this.duration; this.duration = null; this.timer = null; } if (!this._isMounted) { return; } this.setState({callState: newState}); } startTimer() { if (this.timer !== null) { // already armed return; } // TODO: consider using window.requestAnimationFrame const startTime = new Date(); this.timer = setInterval(() => { const duration = moment.duration(new Date() - startTime); if (this.duration > 3600) { this.duration = duration.format('hh:mm:ss', {trim: false}); } else { this.duration = duration.format('mm:ss', {trim: false}); } if (this.props.show) { this.forceUpdate(); } }, 1000); } render() { let header = null; let displayName = this.state.remoteUri; if (this.state.remoteDisplayName && this.state.remoteDisplayName !== this.state.remoteUri) { displayName = this.state.remoteDisplayName; } if (this.props.show) { let callDetail = ''; if (this.duration) { callDetail = {this.duration}; callDetail = 'Duration: ' + this.duration; } else { if (this.state.reconnectingCall) { callDetail = 'Reconnecting call...'; } else if (this.state.callState === 'terminated') { if (this.finalDuration) { callDetail = 'Call ended after ' + this.finalDuration } else if (this.state.direction === 'outgoing' && this.state.declineReason) { callDetail = this.state.declineReason; } else { callDetail = 'Call ended'; } } else if (this.state.callState === 'incoming') { callDetail = 'Waiting for incoming call...'; } else if (this.state.callState === 'accepted') { callDetail = 'Waiting for ' + this.state.media + '...'; } else if (this.state.callState === 'progress') { callDetail = 'Connecting...'; } else if (this.state.callState === 'established') { callDetail = 'Media established'; } else if (this.state.callState) { callDetail = toTitleCase(this.state.callState); } } if (this.props.info) { callDetail = callDetail + ' - ' + this.props.info; } if (this.state.remoteUri && this.state.remoteUri.search('videoconference') > -1) { displayName = this.state.remoteUri.split('@')[0]; header = ( ); } else { header = ( + {this.props.goBackFunc()}} /> ); } } return header } } CallOverlay.propTypes = { show: PropTypes.bool.isRequired, remoteUri: PropTypes.string, remoteDisplayName: PropTypes.string, call: PropTypes.object, connection: PropTypes.object, reconnectingCall: PropTypes.bool, declineReason : PropTypes.string, media: PropTypes.string, - info: PropTypes.string + info: PropTypes.string, + goBackFunc: PropTypes.func }; export default CallOverlay; diff --git a/app/components/Conference.js b/app/components/Conference.js index e487161..f5ba814 100644 --- a/app/components/Conference.js +++ b/app/components/Conference.js @@ -1,431 +1,440 @@ import React 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 ConferenceBox from './ConferenceBox'; import LocalMedia from './LocalMedia'; import config from '../config'; import utils from '../utils'; const DEBUG = debug('blinkrtc:Conference'); debug.enable('*'); class Conference extends React.Component { constructor(props) { super(props); autoBind(this); this.defaultWaitInterval = 90; // until we can connect or reconnect this.waitCounter = 0; this.waitInterval = this.defaultWaitInterval; this.userHangup = false; this.ended = false; this.started = false; this.participants = []; this.state = { currentCall: null, callState: null, targetUri: this.props.targetUri, callUUID: this.props.callUUID, localMedia: this.props.localMedia, connection: this.props.connection, account: this.props.account, registrationState: this.props.registrationState, startedByPush: this.props.startedByPush, reconnectingCall: this.props.reconnectingCall, myInvitedParties: this.props.myInvitedParties, isFavorite: this.props.favoriteUris.indexOf(this.props.targetUri) > -1 } if (this.props.connection) { this.props.connection.on('stateChanged', this.connectionStateChanged); } if (this.props.participantsToInvite) { this.props.participantsToInvite.forEach((p) => { if (this.participants.indexOf(p) === -1) { this.participants.push(p); } }); } } componentWillUnmount() { this.ended = true; if (this.state.currentCall) { this.state.currentCall.removeListener('stateChanged', this.callStateChanged); } if (this.state.connection) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); } } callStateChanged(oldState, newState, data) { //utils.timestampedLog('Conference: callStateChanged', oldState, '->', newState); if (newState === 'established') { this.setState({reconnectingCall: false}); } this.setState({callState: newState}); } connectionStateChanged(oldState, newState) { switch (newState) { case 'disconnected': if (oldState === 'ready') { utils.timestampedLog('Conference: connection failed, reconnecting the call...'); this.waitInterval = this.defaultWaitInterval; } break; default: break; } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { //console.log('Conference got props'); if (nextProps.account !== null && nextProps.account !== this.props.account) { this.setState({account: nextProps.account}); } this.setState({registrationState: nextProps.registrationState}); if (nextProps.connection !== null && nextProps.connection !== this.state.connection) { this.setState({connection: nextProps.connection}); nextProps.connection.on('stateChanged', this.connectionStateChanged); } if (nextProps.reconnectingCall !== this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.localMedia !== null && nextProps.localMedia !== this.state.localMedia) { this.setState({localMedia: nextProps.localMedia}); } if (nextProps.callUUID !== null && this.state.callUUID !== nextProps.callUUID) { this.setState({callUUID: nextProps.callUUID, reconnectingCall: true, currentCall: null}); this.startCallWhenReady(); } this.setState({myInvitedParties: nextProps.myInvitedParties, isFavorite: nextProps.favoriteUris.indexOf(this.props.targetUri) > -1 }); } mediaPlaying() { this.startCallWhenReady(); } canConnect() { if (!this.state.localMedia) { console.log('Conference: no local media'); return false; } if (!this.state.connection) { console.log('Conference: no connection yet'); return false; } if (this.state.connection.state !== 'ready') { console.log('Conference: connection is not ready'); return false; } if (!this.state.account) { console.log('Conference: no account yet'); return false; } if (this.state.registrationState !== 'registered') { console.log('Conference: account not ready yet'); return false; } if (this.state.currentCall) { console.log('Conference: call already in progress'); return false; } return true; } async startCallWhenReady() { utils.timestampedLog('Conference: start conference', this.state.callUUID, 'when ready to', this.props.targetUri); this.waitCounter = 0; //utils.timestampedLog('Conference: waiting for connecting to the conference', this.waitInterval, 'seconds'); let diff = 0; while (this.waitCounter < this.waitInterval) { if (this.userHangup) { this.props.hangupCall(this.state.callUUID, 'user_cancelled_conference'); return; } if (this.state.currentCall) { return; } if (this.waitCounter >= this.waitInterval - 1) { utils.timestampedLog('Conference: cancelling conference', this.state.callUUID); this.props.hangupCall(this.state.callUUID, 'timeout'); } if (!this.canConnect()) { console.log('Retrying for', (this.waitInterval - this.waitCounter), 'seconds'); await this._sleep(1000); } else { this.waitCounter = 0; this.start(); return; } this.waitCounter++; } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } start() { + if (this.state.currentCall) { + console.log('Conference: call already in progress'); + } + const options = { id: this.state.callUUID, pcConfig: {iceServers: config.iceServers}, localStream: this.state.localMedia, audio: this.props.proposedMedia.audio, video: this.props.proposedMedia.video, offerOptions: { offerToReceiveAudio: false, offerToReceiveVideo: false }, initialParticipants: this.props.participantsToInvite }; + utils.timestampedLog('Conference: Sylkrtc.js will start conference call', this.state.callUUID, 'to', this.props.targetUri.toLowerCase()); + if (this.props.participantsToInvite) { utils.timestampedLog('Initial participants', this.props.participantsToInvite); } confCall = this.state.account.joinConference(this.props.targetUri.toLowerCase(), options); if (confCall) { confCall.on('stateChanged', this.callStateChanged); this.setState({currentCall: confCall}); } } saveParticipant(callUUID, room, uri) { console.log('Save saveParticipant', uri); if (this.participants.indexOf(uri) === -1) { this.participants.push(uri); } this.props.saveParticipant(callUUID, room, uri); } saveMessage(room, messages) { this.props.saveMessage(room, messages); } showSaveDialog() { if (!this.userHangup) { return false; } if (this.state.reconnectingCall) { console.log('No save dialog because call is reconnecting') return false; } if (this.participants.length === 0) { console.log('No show dialog because there are no participants') return false; } if (this.state.isFavorite) { let room = this.state.targetUri.split('@')[0]; let must_display = false; if (this.props.myInvitedParties.hasOwnProperty(room)) { let old_participants = this.state.myInvitedParties[room]; this.participants.forEach((p) => { if (old_participants.indexOf(p) === -1) { console.log(p, 'is not in', old_participants); must_display = true; } }); } if (must_display) { console.log('Show save dialog because we have new participants'); return true; } else { console.log('No save dialog because is already favorite with same participants') return false; } } else { console.log('Show save dialog because room', this.state.targetUri, 'is not in favorites'); return true; } return true; } saveConference() { if (!this.state.isFavorite) { this.props.setFavoriteUri(this.props.targetUri); } let room = this.state.targetUri.split('@')[0]; if (this.props.myInvitedParties.hasOwnProperty(room)) { let participants = this.state.myInvitedParties[room]; this.participants.forEach((p) => { if (participants.indexOf(p) === -1) { participants.push(p); } }); this.props.saveInvitedParties(this.props.targetUri, participants); } else { this.props.saveInvitedParties(this.props.targetUri, this.participants); } this.props.hangupCall(this.state.callUUID, 'user_hangup_conference_confirmed'); } hangup(reason='user_hangup_conference') { this.userHangup = true; if (!this.showSaveDialog()) { reason = 'user_hangup_conference_confirmed'; } this.props.hangupCall(this.state.callUUID, reason); if (this.waitCounter > 0) { this.waitCounter = this.waitInterval; } } render() { let box = null; let messages = []; if (this.state.localMedia !== null) { let media = 'audio' if (this.props.proposedMedia && this.props.proposedMedia.video === true) { media = 'video'; } let room = this.state.targetUri.split('@')[0]; if (this.props.myMessages && this.props.myMessages.hasOwnProperty(room)) { messages = this.props.myMessages[room]; } if (this.state.currentCall != null && (this.state.callState === 'established')) { box = ( ); } else { box = ( ); } } else { console.log('Waiting for local media'); } return box; } } Conference.propTypes = { notificationCenter : PropTypes.func, account : PropTypes.object, connection : PropTypes.object, registrationState : PropTypes.string, hangupCall : PropTypes.func, saveParticipant : PropTypes.func, saveMessage : PropTypes.func, myMessages : PropTypes.object, saveInvitedParties : PropTypes.func, previousParticipants : PropTypes.array, currentCall : PropTypes.object, localMedia : PropTypes.object, targetUri : PropTypes.string, participantsToInvite : PropTypes.array, generatedVideoTrack : PropTypes.bool, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, callUUID : PropTypes.string, proposedMedia : PropTypes.object, isLandscape : PropTypes.bool, isTablet : PropTypes.bool, muted : PropTypes.bool, defaultDomain : PropTypes.string, startedByPush : PropTypes.bool, inFocus : PropTypes.bool, setFavoriteUri : PropTypes.func, saveInvitedParties : PropTypes.func, reconnectingCall : PropTypes.bool, favoriteUris : PropTypes.array, - myDisplayNames : PropTypes.object, - lookupContacts : PropTypes.func + myContacts : PropTypes.object, + lookupContacts : PropTypes.func, + goBackFunc : PropTypes.func + }; export default Conference; diff --git a/app/components/ConferenceBox.js b/app/components/ConferenceBox.js index e654a10..6c72b67 100644 --- a/app/components/ConferenceBox.js +++ b/app/components/ConferenceBox.js @@ -1,1677 +1,1679 @@ 'use strict'; import React, {useState, Component, Fragment} from 'react'; import { View, Platform, TouchableWithoutFeedback, Dimensions, SafeAreaView, ScrollView, FlatList } from 'react-native'; import PropTypes from 'prop-types'; import * as sylkrtc from 'react-native-sylkrtc'; import classNames from 'classnames'; import debug from 'react-native-debug'; import superagent from 'superagent'; import autoBind from 'auto-bind'; import { RTCView } from 'react-native-webrtc'; import { IconButton, Appbar, Portal, Modal, Surface, Paragraph } from 'react-native-paper'; import uuid from 'react-native-uuid'; import config from '../config'; import utils from '../utils'; //import AudioPlayer from './AudioPlayer'; import ConferenceDrawer from './ConferenceDrawer'; import ConferenceDrawerLog from './ConferenceDrawerLog'; // import ConferenceDrawerFiles from './ConferenceDrawerFiles'; import ConferenceDrawerParticipant from './ConferenceDrawerParticipant'; import ConferenceDrawerParticipantList from './ConferenceDrawerParticipantList'; import ConferenceDrawerSpeakerSelection from './ConferenceDrawerSpeakerSelection'; import ConferenceDrawerSpeakerSelectionWrapper from './ConferenceDrawerSpeakerSelectionWrapper'; import ConferenceHeader from './ConferenceHeader'; import ConferenceCarousel from './ConferenceCarousel'; import ConferenceParticipant from './ConferenceParticipant'; import ConferenceMatrixParticipant from './ConferenceMatrixParticipant'; import ConferenceParticipantSelf from './ConferenceParticipantSelf'; import InviteParticipantsModal from './InviteParticipantsModal'; import ConferenceAudioParticipantList from './ConferenceAudioParticipantList'; import ConferenceAudioParticipant from './ConferenceAudioParticipant'; import { GiftedChat } from 'react-native-gifted-chat' import xss from 'xss'; import styles from '../assets/styles/blink/_ConferenceBox.scss'; const DEBUG = debug('blinkrtc:ConferenceBox'); debug.enable('*'); function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class ConferenceBox extends Component { constructor(props) { super(props); autoBind(this); this.audioBytesReceived = new Map(); this.audioBandwidth = new Map(); this.bandwidthDownload = 0; this.bandwidthUpload = 0; this.videoBytesReceived = new Map(); this.videoBandwidth = new Map(); this.audioPacketLoss = new Map(); this.videoPacketLoss = new Map(); this.packetLoss = new Map(); this.latency = new Map(); this.mediaLost = new Map(); this.sampleInterval = 5; this.seenMessages = new Map(); let messages = []; props.messages.reverse().forEach((m) => { if (!this.seenMessages.has(m._id)) { messages.push(m); this.seenMessages.set(m.id, true); } }); messages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); if (this.props.call) { let giftedChatMessage; this.props.call.messages.reverse().forEach((sylkMessage) => { giftedChatMessage = utils.sylkToRenderMessage(sylkMessage); messages.push(giftedChatMessage); }); } this.state = { callOverlayVisible: true, call: this.props.call, ended: false, audioMuted: this.props.muted, videoMuted: !this.props.inFocus, videoMutedbyUser: false, participants: props.call.participants.slice(), showInviteModal: false, showDrawer: false, showFiles: false, shareOverlayVisible: false, showSpeakerSelection: false, activeSpeakers: props.call.activeParticipants.slice(), selfDisplayedLarge: false, eventLog: [], sharedFiles: props.call.sharedFiles.slice(), largeVideoStream: null, previousParticipants: this.props.previousParticipants, inFocus: this.props.inFocus, reconnectingCall: this.props.reconnectingCall, terminated: this.props.terminated, messages: messages, chatView: false }; const friendlyName = this.props.remoteUri.split('@')[0]; //if (window.location.origin.startsWith('file://')) { this.conferenceUrl = `${config.publicUrl}/conference/${friendlyName}`; //} else { // this.conferenceUrl = `${window.location.origin}/conference/${friendlyName}`; //} const emailMessage = `You can join me in the conference using a Web browser at ${this.conferenceUrl} ` + 'or by using the freely available Sylk WebRTC client app at http://sylkserver.com'; const subject = 'Join me, maybe?'; this.emailLink = `mailto:?subject=${encodeURI(subject)}&body=${encodeURI(emailMessage)}`; this.overlayTimer = null; this.logEvent = {}; this.haveVideo = false; this.uploads = []; this.selectSpeaker = 1; this.foundContacts = new Map(); if (this.props.call) { this.lookupContact(this.props.call.localIdentity._uri, this.props.call.localIdentity._displayName); } [ 'error', 'warning', 'info', 'debug' ].forEach((level) => { this.logEvent[level] = ( (action, messages, originator) => { const log = this.state.eventLog.slice(); log.unshift({originator, originator, level: level, action: action, messages: messages}); this.setState({eventLog: log}); } ); }); this.invitedParticipants = new Map(); props.initialParticipants.forEach((uri) => { this.invitedParticipants.set(uri, {timestamp: Date.now(), status: 'Invited'}) this.lookupContact(uri); }); this.participantsTimer = setInterval(() => { this.updateParticipantsStatus(); }, this.sampleInterval * 1000); } getInfo() { let info; if (this.bandwidthDownload > 0 && this.bandwidthUpload > 0) { info = '⇣' + this.bandwidthDownload + ' ⇡' + this.bandwidthUpload; } else if (this.bandwidthDownload > 0) { info = '⇣' + this.bandwidthDownload ; } else if (this.bandwidthUpload > 0) { info = '⇡' + this.bandwidthUpload; } if (info) { return info + ' Mbit/s'; } return info; } updateParticipantsStatus() { let participants_uris = []; this.state.participants.forEach((p) => { participants_uris.push(p.identity._uri); }); this.getConnectionStats(); const invitedParties = Array.from(this.invitedParticipants.keys()); //console.log('Invited participants', invitedParties); //console.log('Current participants', participants_uris); let p; let interval; invitedParties.forEach((_uri) => { if (participants_uris.indexOf(_uri) > 0) { this.invitedParticipants.delete(_uri); } p = this.invitedParticipants.get(_uri); if (!p) { return; } interval = Math.floor((Date.now() - p.timestamp) / 1000); if (interval >= 60) { this.invitedParticipants.delete(_uri); this.forceUpdate(); } if (p.status.indexOf('Invited') > -1 && interval > 5) { p.status = 'Wait .'; } if (p.status.indexOf('.') > -1) { if (interval > 45) { p.status = 'No answer'; this.postChatSystemMessage(_uri + ' did not answer'); } else { p.status = p.status + '.'; } } }); this.forceUpdate(); } postChatSystemMessage(text, timestamp=true) { if (timestamp) { var now = new Date(); var hours = now.getHours(); var mins = now.getMinutes(); var secs = now.getSeconds(); var ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; mins = mins < 10 ? '0' + mins : mins; secs = secs < 10 ? '0' + secs : secs; text = text + ' at ' + hours + ":" + mins + ':' + secs + ' ' + ampm; } const giftedChatMessage = { _id: uuid.v4(), createdAt: now, text: text, system: true, }; this.setState({messages: GiftedChat.append(this.state.messages, [giftedChatMessage])}); } componentDidMount() { for (let p of this.state.participants) { p.on('stateChanged', this.onParticipantStateChanged); p.attach(); } this.props.call.on('participantJoined', this.onParticipantJoined); this.props.call.on('participantLeft', this.onParticipantLeft); this.props.call.on('roomConfigured', this.onConfigureRoom); this.props.call.on('fileSharing', this.onFileSharing); this.props.call.on('composingIndication', this.composingIndicationReceived); this.props.call.on('message', this.messageReceived); if (this.state.participants.length > 1) { this.armOverlayTimer(); } // attach to ourselves first if there are no other participants if (this.state.participants.length === 0) { setTimeout(() => { const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); }); } else { this.state.participants.forEach((p) => { if (p.identity._uri.search('guest.') === -1 && p.identity._uri !== this.props.call.localIdentity._uri) { // used for history item this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], p.identity._uri); this.lookupContact(p.identity._uri, p.identity._displayName); } }); // this.changeResolution(); } if (this.props.call.getLocalStreams()[0].getVideoTracks().length !== 0) { this.haveVideo = true; } if (this.state.videoMuted) { this._muteVideo(); } //let msg = "Others can join the conference using a web browser at " + this.conferenceUrl; //this.postChatSystemMessage(msg, false); } componentWillUnmount() { clearTimeout(this.overlayTimer); clearTimeout(this.participantsTimer); this.uploads.forEach((upload) => { this.props.notificationCenter().removeNotification(upload[1]); upload[0].abort(); }) } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.hasOwnProperty('muted')) { this.setState({audioMuted: nextProps.muted}); } if (nextProps.call !== null && nextProps.call !== this.state.call) { this.setState({call: nextProps.call}); } if (nextProps.inFocus !== this.state.inFocus) { if (nextProps.inFocus) { if (!this.state.videoMutedbyUser) { this._resumeVideo(); } } else { this._muteVideo(); } this.setState({inFocus: nextProps.inFocus}); } if (nextProps.reconnectingCall !== this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } this.setState({terminated: nextProps.terminated}); } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } composingIndicationReceived(data) { utils.timestampedLog('isComposing received'); } messageReceived(sylkMessage) { if (sylkMessage.content.indexOf('has joined the room') > -1) { return; } if (sylkMessage.content.indexOf('has left the room after') > -1) { return; } const giftedChatMessage = utils.sylkToRenderMessage(sylkMessage); this.setState({messages: GiftedChat.append(this.state.messages, [giftedChatMessage])}); this.props.saveMessage(this.props.remoteUri.split('@')[0], giftedChatMessage); } onSendMessage(messages) { if (!this.props.call) { return; } messages.forEach((message) => { this.props.call.sendMessage(message.text, 'text/plain') this.props.saveMessage(this.props.remoteUri.split('@')[0], message); }); this.setState({messages: GiftedChat.append(this.state.messages, messages)}); } lookupContact(uri, displayName) { let photo; let username = uri.split('@')[0]; - if (this.props.myDisplayNames.hasOwnProperty(uri) && this.props.myDisplayNames[uri].name) { - displayName = this.props.myDisplayNames[uri].name; + if (this.props.myContacts.hasOwnProperty(uri) && this.props.myContacts[uri].name) { + displayName = this.props.myContacts[uri].name; } else if (this.props.contacts) { let username = uri.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', uri); } if (contact_obj) { displayName = contact_obj.displayName; photo = contact_obj.photo; if (isPhoneNumber) { uri = username; } } else { if (isPhoneNumber) { uri = username; displayName = toTitleCase(username); } } } const c = {photo: photo, displayName: displayName || toTitleCase(username)}; this.foundContacts.set(uri, c) } getConnectionStats() { let audioPackets = 0; let videoPackets = 0; let delay = 0; let audioPacketsLost = 0; let videoPacketsLost = 0; let audioPacketLoss = 0; let videoPacketLoss = 0; let totalPackets = 0; let totalPacketsLost = 0; let totalPacketLoss = 0; let totalAudioBandwidth = 0; let totalVideoBandwidth = 0; let totalSpeed = 0; let bandwidthUpload = 0; let mediaType; if (this.state.participants.length === 0) { this.bandwidthDownload = 0; this.videoBandwidth.set('total', 0); this.audioBandwidth.set('total', 0); } let participants = this.state.participants.concat(this.props.call); participants.forEach((p) => { if (!p._pc) { return; } let identity; if (p.identity) { identity = p.identity.uri; } else { identity = 'myself'; } p._pc.getStats(null).then(stats => { audioPackets = 0; videoPackets = 0; audioPacketsLost = 0; videoPacketsLost = 0; audioPacketLoss = 0; videoPacketLoss = 0; stats.forEach(report => { if (report.type === "ssrc") { report.values.forEach(object => { if (object.mediaType) { mediaType = object.mediaType; } }); report.values.forEach(object => { if (object.bytesReceived && identity !== 'myself') { const bytesReceived = Math.floor(object.bytesReceived); if (mediaType === 'audio') { if (this.audioBytesReceived.has(p.id)) { const lastBytes = this.audioBytesReceived.get(p.id); const diff = bytesReceived - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); totalAudioBandwidth = totalAudioBandwidth + speed; totalSpeed = totalSpeed + speed; //console.log(identity, 'audio bandwidth', speed, 'kbit/s from', identity); this.audioBandwidth.set(p.id, speed); } this.audioBytesReceived.set(p.id, bytesReceived); } else if (mediaType === 'video') { if (this.videoBytesReceived.has(p.id)) { const lastBytes = this.videoBytesReceived.get(p.id); const diff = bytesReceived - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); totalVideoBandwidth = totalVideoBandwidth + speed; totalSpeed = totalSpeed + speed; //console.log(identity, 'video bandwidth', speed, 'kbit/s from', identity); this.videoBandwidth.set(p.id, speed); } this.videoBytesReceived.set(p.id, bytesReceived); } } else if (object.bytesSent && identity === 'myself') { const bytesSent = Math.floor(object.bytesSent); if (mediaType === 'audio') { if (this.audioBytesReceived.has(p.id)) { const lastBytes = this.audioBytesReceived.get(p.id); const diff = bytesSent - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); bandwidthUpload = bandwidthUpload + speed; //console.log(identity, 'audio bandwidth', speed, 'kbit/s from', identity); this.audioBandwidth.set(p.id, speed); } this.audioBytesReceived.set(p.id, bytesSent); } else if (mediaType === 'video') { if (this.videoBytesReceived.has(p.id)) { const lastBytes = this.videoBytesReceived.get(p.id); const diff = bytesSent - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); bandwidthUpload = bandwidthUpload + speed; //console.log(identity, 'video bandwidth', speed, 'kbit/s from', identity); this.videoBandwidth.set(p.id, speed); } this.videoBytesReceived.set(p.id, bytesSent); } } else if (object.totalAudioEnergy) { //console.log('Total audio energy', object.totalAudioEnergy, 'from', identity); } else if (object.audioOutputLevel) { //console.log('Output level', object.audioOutputLevel, 'from', identity); this.mediaLost.set(p.id, Math.floor(object.audioOutputLevel) < 5 ? true : false); } else if (object.audioInputLevel) { //console.log('Input level', object.audioInputLevel, 'from', identity); this.mediaLost.set(p.id, Math.floor(object.audioInputLevel) < 5 ? true : false); } else if (object.packetsLost) { totalPackets = totalPackets + Math.floor(object.packetsLost); totalPacketsLost = totalPacketsLost + Math.floor(object.packetsLost); if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsLost); audioPacketsLost = audioPacketsLost + Math.floor(object.packetsLost); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsLost); videoPacketsLost = videoPacketsLost + Math.floor(object.packetsLost); } if (object.packetsLost > 0) { //console.log(identity, mediaType, 'packetsLost', object.packetsLost); } } else if (object.packetsReceived && identity !== 'myself') { totalPackets = totalPackets + Math.floor(object.packetsReceived); if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsReceived); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsReceived); } //console.log(identity, mediaType, 'packetsReceived', object.packetsReceived); } else if (object.packetsSent && identity === 'myself') { totalPackets = totalPackets + Math.floor(object.packetsSent); if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsSent); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsSent); } //console.log(identity, mediaType, 'packetsSent', object.packetsSent); } else if (object.googCurrentDelayMs && identity !== 'myself') { delay = object.googCurrentDelayMs; //console.log('mediaType', mediaType, 'identity', identity, 'delay', delay); this.latency.set(p.id, Math.ceil(delay)); //console.log(object); } if (identity === 'myself') { //console.log(object); } }); if (videoPackets > 0) { videoPacketLoss = Math.floor(videoPacketsLost / videoPackets * 100); } else { videoPacketLoss = 100; } if (audioPackets > 0) { audioPacketLoss = Math.floor(audioPacketsLost / audioPackets * 100); } else { audioPacketLoss = 100; } if (totalPackets > 0) { totalPacketLoss = Math.floor(totalPacketsLost / totalPackets * 100); } else { totalPacketLoss = 100; } this.audioPacketLoss.set(p.id, audioPacketLoss); this.videoPacketLoss.set(p.id, videoPacketLoss); this.packetLoss.set(p.id, totalPacketLoss); }}); //console.log(identity, p.id, 'audio loss', audioPacketLoss, '%, video loss', videoPacketLoss, '%, total loss', totalPacketLoss, '%'); const bandwidthDownload = totalVideoBandwidth + totalAudioBandwidth; this.bandwidthDownload = Math.ceil(bandwidthDownload / 1000 * 100) / 100; this.bandwidthUpload = Math.ceil(bandwidthUpload / 1000 * 100) / 100; this.videoBandwidth.set('total', totalVideoBandwidth); this.audioBandwidth.set('total', totalAudioBandwidth); //console.log('audio bandwidth', totalAudioBandwidth); //console.log('video bandwidth', totalVideoBandwidth); //console.log('total bandwidth', this.bandwidthDownload); //console.log('this.latency', this.latency); }); }); }; onParticipantJoined(p) { console.log('----joined the conference'); if (p.identity._uri.search('guest.') === -1) { if (p.identity._uri !== this.props.call.localIdentity._uri) { // used for history item this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], p.identity._uri); } const dn = p.identity._uri + ' joined'; this.postChatSystemMessage(dn); } else { this.postChatSystemMessage('An anonymous guest joined'); } this.lookupContact(p.identity._uri, p.identity._displayName); if (this.invitedParticipants.has(p.identity._uri)) { this.invitedParticipants.delete(p.identity._uri); } // this.refs.audioPlayerParticipantJoined.play(); p.on('stateChanged', this.onParticipantStateChanged); p.attach(); this.setState({ participants: this.state.participants.concat([p]) }); // this.changeResolution(); if (this.state.participants.length > 1) { this.armOverlayTimer(); } else { this.setState({callOverlayVisible: true}); } } onParticipantLeft(p) { //console.log(p.identity.uri, 'left the conference'); const participants = this.state.participants.slice(); this.audioBandwidth.delete(p.id); this.videoBandwidth.delete(p.id); this.latency.delete(p.id); this.audioBytesReceived.delete(p.id); this.videoBytesReceived.delete(p.id); this.audioPacketLoss.delete(p.id); this.videoPacketLoss.delete(p.id); this.packetLoss.delete(p.id); this.mediaLost.delete(p.id); const idx = participants.indexOf(p); if (idx !== -1) { participants.splice(idx, 1); this.setState({ participants: participants }); } p.detach(true); // this.changeResolution(); if (this.state.participants.length > 1) { this.armOverlayTimer(); } else { this.setState({callOverlayVisible: true}); } this.postChatSystemMessage(p.identity.uri + ' left'); } onParticipantStateChanged(oldState, newState) { if (newState === 'established' || newState === null) { this.maybeSwitchLargeVideo(); } } onConfigureRoom(config) { const newState = {}; newState.activeSpeakers = config.activeParticipants; this.setState(newState); if (config.activeParticipants.length === 0) { this.logEvent.info('set speakers to', ['Nobody'], config.originator); } else { const speakers = config.activeParticipants.map((p) => {return p.identity.displayName || p.identity.uri}); this.logEvent.info('set speakers to', speakers, config.originator); } this.maybeSwitchLargeVideo(); } onFileSharing(files) { let stateFiles = this.state.sharedFiles; stateFiles = stateFiles.concat(files); this.setState({sharedFiles: stateFiles}); files.forEach((file)=>{ if (file.session !== this.props.call.id) { this.props.notificationCenter().postFileShared(file, this.showFiles); } }) } onVideoSelected(item) { const participants = this.state.participants.slice(); const idx = participants.indexOf(item); participants.splice(idx, 1); participants.unshift(item); if (item.videoPaused) { item.resumeVideo(); } this.setState({ participants: participants }); } changeResolution() { let stream = this.props.call.getLocalStreams()[0]; if (this.state.participants.length < 2) { this.props.call.scaleLocalTrack(stream, 1.5); } else if (this.state.participants.length < 5) { this.props.call.scaleLocalTrack(stream, 2); } else { this.props.call.scaleLocalTrack(stream, 1); } } selectVideo(item) { DEBUG('Switching video to: %o', item); if (item.stream) { this.setState({selfDisplayedLarge: true, largeVideoStream: item.stream}); } } maybeSwitchLargeVideo() { // Switch the large video to another source, maybe. if (this.state.participants.length === 0 && !this.state.selfDisplayedLarge) { // none of the participants are eligible, show ourselves const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); } else if (this.state.selfDisplayedLarge) { this.setState({selfDisplayedLarge: false}); } } handleClipboardButton() { utils.copyToClipboard(this.conferenceUrl); this.props.notificationCenter().postSystemNotification('Join me, maybe?', {body: 'Link copied to the clipboard'}); this.setState({shareOverlayVisible: false}); } handleEmailButton(event) { // if (navigator.userAgent.indexOf('Chrome') > 0) { // let emailWindow = window.open(this.emailLink, '_blank'); // setTimeout(() => { // emailWindow.close(); // }, 500); // } else { // window.open(this.emailLink, '_self'); // } this.setState({shareOverlayVisible: false}); } handleShareOverlayEntered() { this.setState({shareOverlayVisible: true}); } handleShareOverlayExited() { this.setState({shareOverlayVisible: false}); } handleActiveSpeakerSelected(participant, secondVideo=false) { // eslint-disable-line space-infix-ops let newActiveSpeakers = this.state.activeSpeakers.slice(); if (secondVideo) { if (participant.id !== 'none') { if (newActiveSpeakers.length >= 1) { newActiveSpeakers[1] = participant; } else { newActiveSpeakers[0] = participant; } } else { newActiveSpeakers.splice(1,1); } } else { if (participant.id !== 'none') { newActiveSpeakers[0] = participant; } else { newActiveSpeakers.shift(); } } this.props.call.configureRoom(newActiveSpeakers.map((element) => element.publisherId), (error) => { if (error) { // This causes a state update, hence the drawer lists update this.logEvent.error('set speakers failed', [], this.localIdentity); } }); } handleDrop(files) { DEBUG('Dropped file %o', files); this.uploadFiles(files); }; handleFiles(e) { DEBUG('Selected files %o', e.target.files); this.uploadFiles(e.target.files); event.target.value = ''; } toggleSpeakerSelection() { this.setState({showSpeakerSelection: !this.state.showSpeakerSelection}); } startSpeakerSelection(number) { this.selectSpeaker = number; this.toggleSpeakerSelection(); } uploadFiles(files) { for (var key in files) { // is the item a File? if (files.hasOwnProperty(key) && files[key] instanceof File) { let uploadRequest; let complete = false; const filename = files[key].name let progressNotification = this.props.notificationCenter().postFileUploadProgress( filename, (notification) => { if (!complete) { uploadRequest.abort(); this.uploads.splice(this.uploads.indexOf(uploadRequest), 1); } } ); uploadRequest = superagent .post(`${config.fileSharingUrl}/${this.props.remoteUri}/${this.props.call.id}/${filename}`) .send(files[key]) .on('progress', (e) => { this.props.notificationCenter().editFileUploadNotification(e.percent, progressNotification); }) .end((err, response) => { complete = true; this.props.notificationCenter().removeFileUploadNotification(progressNotification); if (err) { this.props.notificationCenter().postFileUploadFailed(filename); } this.uploads.splice(this.uploads.indexOf(uploadRequest), 1); }); this.uploads.push([uploadRequest, progressNotification]); } } } downloadFile(filename) { // const a = document.createElement('a'); // a.href = `${config.fileSharingUrl}/${this.props.remoteUri}/${this.props.call.id}/${filename}`; // a.target = '_blank'; // a.download = filename; // const clickEvent = document.createEvent('MouseEvent'); // clickEvent.initMouseEvent('click', true, true, window, 0, // clickEvent.screenX, clickEvent.screenY, clickEvent.clientX, clickEvent.clientY, // clickEvent.ctrlKey, clickEvent.altKey, clickEvent.shiftKey, clickEvent.metaKey, // 0, null); // a.dispatchEvent(clickEvent); } preventOverlay(event) { // Stop the overlay when we are the thumbnail bar event.stopPropagation(); } muteAudio(event) { event.preventDefault(); if (this.state.audioMuted) { this.postChatSystemMessage('Audio un-muted'); } else { this.postChatSystemMessage('Audio muted'); } this.props.toggleMute(this.props.call.id, !this.state.audioMuted); } toggleChat(event) { event.preventDefault(); this.setState({chatView: !this.state.chatView}); } toggleCamera(event) { event.preventDefault(); const localStream = this.props.call.getLocalStreams()[0]; if (localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; track._switchCamera(); } } muteVideo(event) { event.preventDefault(); if (this.state.videoMuted) { this._resumeVideo(); this.setState({videoMutedbyUser: false}); } else { this.setState({videoMutedbyUser: true}); this._muteVideo(); } } _muteVideo() { const localStream = this.props.call.getLocalStreams()[0]; if (localStream && localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if (!this.state.videoMuted) { console.log('Mute camera'); track.enabled = false; this.setState({videoMuted: true}); } } } _resumeVideo() { const localStream = this.props.call.getLocalStreams()[0]; if (localStream && localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if (this.state.videoMuted) { console.log('Resume camera'); track.enabled = true; this.setState({videoMuted: false}); } } } hangup(event) { event.preventDefault(); for (let participant of this.state.participants) { participant.detach(); } this.props.hangup('user_hangup_conference'); } armOverlayTimer() { if (this.props.audioOnly) { return; } clearTimeout(this.overlayTimer); this.overlayTimer = setTimeout(() => { this.setState({callOverlayVisible: false}); }, 4000); } showOverlay() { if (this.props.audioOnly) { return; } // if (!this.state.shareOverlayVisible && !this.state.showDrawer && !this.state.showFiles) { // if (!this.state.callOverlayVisible) { this.setState({callOverlayVisible: !this.state.callOverlayVisible}); // } // this.armOverlayTimer(); // } } toggleInviteModal() { this.setState({showInviteModal: !this.state.showInviteModal}); } toggleDrawer() { this.setState({callOverlayVisible: true, showDrawer: !this.state.showDrawer, showFiles: false, showSpeakerSelection: false}); clearTimeout(this.overlayTimer); } toggleFiles() { this.setState({callOverlayVisible: true, showFiles: !this.state.showFiles, showDrawer: false}); clearTimeout(this.overlayTimer); } showFiles() { this.setState({callOverlayVisible: true, showFiles: true, showDrawer: false}); clearTimeout(this.overlayTimer); } inviteParticipants(uris) { this.props.call.inviteParticipants(uris); uris.forEach((uri) => { uri = uri.replace(/ /g, ''); if (this.props.call.localIdentity._uri === uri) { return; } this.postChatSystemMessage(uri + ' invited'); this.invitedParticipants.set(uri, {timestamp: Date.now(), status: 'Invited'}) this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], uri); this.lookupContact(uri); }); this.forceUpdate() } render() { //console.log('Conference box this.state.reconnectingCall', this.state.reconnectingCall); let participantsCount = this.state.participants.length + 1; if (this.props.call === null) { return (); } let watermark; const largeVideoClasses = classNames({ 'animated' : true, 'fadeIn' : true, 'large' : true, 'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack, 'fit' : this.props.call.sharingScreen }); let matrixClasses = classNames({ 'matrix' : true }); const containerClasses = classNames({ 'video-container': true, 'conference': true, 'drawer-visible': this.state.showDrawer || this.state.showFiles }); const remoteUri = this.props.remoteUri.split('@')[0]; // const shareOverlay = ( // // // // // Invite other online users of this service, share this link with others or email, so they can easily join this conference. // // // // // // // // // // // // ); const buttons = {}; // const commonButtonTopClasses = classNames({ // 'btn' : true, // 'btn-link' : true // }); // const fullScreenButtonIcons = classNames({ // 'fa' : true, // 'fa-2x' : true, // 'fa-expand' : !this.isFullScreen(), // 'fa-compress' : this.isFullScreen() // }); const topButtons = []; // if (!this.state.showFiles) { // if (this.state.sharedFiles.length !== 0) { // topButtons.push( // // // // ); // } // } if (!this.state.showDrawer) { topButtons.push(); } buttons.top = {right: topButtons}; 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; const floatingButtons = []; if (!this.state.reconnectingCall) { floatingButtons.push( ); } if (this.haveVideo) { floatingButtons.push( ); } floatingButtons.push( ); if (this.haveVideo) { floatingButtons.push( ); floatingButtons.push( ); } if (!this.state.reconnectingCall) { floatingButtons.push( ) // floatingButtons.push( // // // // ); } floatingButtons.push( ); buttons.bottom = floatingButtons; const audioParticipants = []; let _contact; let _identity; let participants_uris = []; if (this.props.audioOnly) { _contact = this.foundContacts.get(this.props.call.localIdentity._uri); _identity = {uri: this.props.call.localIdentity._uri, displayName: _contact.displayName, photo: _contact.photo }; participants_uris.push(this.props.call.localIdentity._uri); audioParticipants.push( ); this.state.participants.forEach((p) => { _contact = this.foundContacts.get(p.identity._uri); _identity = {uri: p.identity._uri.indexOf('@guest') > -1 ? 'From the web': p.identity._uri, displayName: (_contact && _contact.displayName != p.identity._displayName) ? _contact.displayName : p.identity._displayName, photo: _contact ? _contact.photo: null }; participants_uris.push(p.identity._uri); let status; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; participantsCount = participantsCount - 1; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 150) { status = this.latency.get(p.id) + ' ms delay'; } audioParticipants.push( ); }); const invitedParties = Array.from(this.invitedParticipants.keys()); let alreadyInvitedParticipants = [] let p; invitedParties.forEach((_uri) => { if (participants_uris.indexOf(_uri) > 0) { return; } p = this.invitedParticipants.get(_uri); _contact = this.foundContacts.get(_uri); _identity = {uri: _uri, displayName: (_contact && _contact.displayName ) ? _contact.displayName : _uri, photo: _contact ? _contact.photo: null }; if (p.status != 'No answer') { alreadyInvitedParticipants.push(_uri) } audioParticipants.push( ); }); const conferenceContainer = this.props.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer; const audioContainer = this.props.isLandscape ? styles.audioContainerLandscape : styles.audioContainer; const chatContainer = this.props.isLandscape ? styles.chatContainerLandscape : styles.chatContainer; return ( {audioParticipants} {return p.identity.uri})} close={this.toggleInviteModal} room={this.props.remoteUri.split('@')[0]} defaultDomain = {this.props.defaultDomain} accountId = {this.props.call.localIdentity._uri} notificationCenter = {this.props.notificationCenter} lookupContacts = {this.props.lookupContacts} /> {drawerParticipants} ); } const participants = []; const drawerParticipants = []; if (this.state.participants.length > 0) { if (this.state.activeSpeakers.findIndex((element) => {return element.id === this.props.call.id}) === -1) { participants.push( ); } } drawerParticipants.push( ); let videos = []; let status = ''; if (this.state.participants.length === 0) { videos.push( ); } else { const activeSpeakers = this.state.activeSpeakers; const activeSpeakersCount = activeSpeakers.length; if (activeSpeakersCount > 0) { activeSpeakers.forEach((p) => { status = ''; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) { status = this.latency.get(p.id) + ' ms delay'; } if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } videos.push( ); }); this.state.participants.forEach((p) => { status = ''; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; participantsCount = participantsCount - 1; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) { status = this.latency.get(p.id) + ' ms delay'; } if (this.state.activeSpeakers.indexOf(p) === -1) { participants.push( {}} pauseVideo={true} display={false} status={status} /> ); } drawerParticipants.push( ); }); } else { this.state.participants.forEach((p, idx) => { status = ''; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; participantsCount = participantsCount - 1; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) { status = this.latency.get(p.id) + ' ms'; } videos.push( = 4) || (idx >= 2 && this.props.isTablet === false)} isLandscape={this.props.isLandscape} isTablet={this.props.isTablet} useTwoRows={this.state.participants.length > 2} status={status} /> ); if (idx >= 4 || idx >= 2 && this.props.isTablet === false) { participants.push( ); } drawerParticipants.push( ); }); } } // let filesDrawerContent = ( // // ); const currentParticipants = this.state.participants.map((p) => {return p.identity.uri}) const alreadyInvitedParticipants = this.invitedParticipants ? Array.from(this.invitedParticipants.keys()) : []; const conferenceContainer = this.props.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer; const audioContainer = this.props.isLandscape ? styles.audioContainerLandscape : styles.audioContainer; const chatContainer = this.props.isLandscape ? styles.chatContainerLandscape : styles.chatContainer; return ( {videos} {participants} {this.state.chatView ? : null} {drawerParticipants} ); } } ConferenceBox.propTypes = { notificationCenter : PropTypes.func.isRequired, call : PropTypes.object, connection : PropTypes.object, hangup : PropTypes.func, saveParticipant : PropTypes.func, saveMessage : PropTypes.func, messages : PropTypes.array, previousParticipants: PropTypes.array, remoteUri : PropTypes.string, generatedVideoTrack : PropTypes.bool, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, isLandscape : PropTypes.bool, isTablet : PropTypes.bool, muted : PropTypes.bool, defaultDomain : PropTypes.string, inFocus : PropTypes.bool, reconnectingCall : PropTypes.bool, audioOnly : PropTypes.bool, initialParticipants : PropTypes.array, terminated : PropTypes.bool, - myDisplayNames : PropTypes.object, - lookupContacts : PropTypes.func - + myContacts : PropTypes.object, + lookupContacts : PropTypes.func, + goBackFunc : PropTypes.func }; export default ConferenceBox; diff --git a/app/components/ConferenceHeader.js b/app/components/ConferenceHeader.js index f88df9e..43425df 100644 --- a/app/components/ConferenceHeader.js +++ b/app/components/ConferenceHeader.js @@ -1,193 +1,194 @@ import React, { useState, useEffect, useRef, Fragment, Component } from 'react'; import { View } from 'react-native'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import { Text, Appbar } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import styles from '../assets/styles/blink/_ConferenceHeader.scss'; class ConferenceHeader extends React.Component { constructor(props) { super(props); autoBind(this); this.state = { call: this.props.call, callState: this.props.call ? this.props.call.state : null, participants: this.props.participants, reconnectingCall: this.props.reconnectingCall, info: this.props.info } this.duration = null; this.timer = null; this._isMounted = false; } componentDidMount() { this._isMounted = true; if (!this.state.call) { return; } if (this.state.call.state === 'established') { this.startTimer(); } this.state.call.on('stateChanged', this.callStateChanged); this.setState({callState: this.state.call.state}); } startTimer() { if (this.timer !== null) { // already armed return; } // TODO: consider using window.requestAnimationFrame const startTime = new Date(); this.timer = setInterval(() => { const duration = moment.duration(new Date() - startTime); if (this.duration > 3600) { this.duration = duration.format('hh:mm:ss', {trim: false}); } else { this.duration = duration.format('mm:ss', {trim: false}); } if (this.props.show) { this.forceUpdate(); } }, 1000); } componentWillUnmount() { this._isMounted = false; if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (!this._isMounted) { return; } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.call !== null && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call}); } this.setState({info: nextProps.info, participants: nextProps.participants}); } callStateChanged(oldState, newState, data) { if (newState === 'established' && this._isMounted && !this.props.terminated) { this.startTimer(); } if (newState === 'terminated') { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); this.duration = null; this.timer = null; } if (!this._isMounted) { return; } this.setState({callState: newState}); } render() { let videoHeader; let callButtons; if (this.props.terminated) { clearTimeout(this.timer); this.duration = null; this.timer = null; } if (this.props.show) { const room = this.props.remoteUri.split('@')[0]; let callDetail; if (this.state.reconnectingCall) { callDetail = 'Reconnecting call...'; } else if (this.state.terminated) { callDetail = 'Conference ended'; } else if (this.duration) { callDetail = (this.props.isTablet ? 'Duration: ' : '') + this.duration + ' - ' + this.state.participants + ' participant' + (this.state.participants > 1 ? 's' : ''); } if (this.state.info) { callDetail = callDetail + ' - ' + this.state.info; } videoHeader = ( {this.props.audioOnly ? null : this.props.buttons.top.right} ); callButtons = ( {this.props.buttons.bottom} ); } return ( {videoHeader} {callButtons} ); } } ConferenceHeader.propTypes = { show: PropTypes.bool.isRequired, remoteUri: PropTypes.string.isRequired, call: PropTypes.object, isTablet: PropTypes.bool, participants: PropTypes.number, buttons: PropTypes.object.isRequired, reconnectingCall: PropTypes.bool, audioOnly: PropTypes.bool, terminated: PropTypes.bool, - info: PropTypes.string + info: PropTypes.string, + goBackFunc: PropTypes.func }; export default ConferenceHeader; diff --git a/app/components/HistoryTileBox.js b/app/components/HistoryTileBox.js index 0c3a813..88464e5 100644 --- a/app/components/HistoryTileBox.js +++ b/app/components/HistoryTileBox.js @@ -1,1075 +1,1071 @@ import React, { Component} from 'react'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import { Clipboard, SafeAreaView, 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 { GiftedChat, IMessage, Bubble } from 'react-native-gifted-chat' import MessageInfoModal from './MessageInfoModal'; import ShareMessageModal from './ShareMessageModal'; import moment from 'moment'; import momenttz from 'moment-timezone'; import styles from '../assets/styles/blink/_HistoryTileBox.scss'; class HistoryTileBox extends Component { constructor(props) { super(props); autoBind(this); this.favoriteContacts = []; this.state = { serverHistory: this.props.serverHistory, localHistory: this.props.localHistory, accountId: this.props.account ? this.props.account.id : '', password: this.props.password, targetUri: this.props.targetUri, favoriteUris: this.props.favoriteUris, blockedUris: this.props.blockedUris, isRefreshing: false, isLandscape: this.props.isLandscape, contacts: this.props.contacts, myInvitedParties: this.props.myInvitedParties, refreshHistory: this.props.refreshHistory, refreshFavorites: this.props.refreshFavorites, selectedContact: this.props.selectedContact, - myDisplayNames: this.props.myDisplayNames, + myContacts: this.props.myContacts, messages: this.props.messages, renderMessages: [], chat: this.props.chat, pinned: false, showMessageModal: false, message: null, showShareMessageModal: false } 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); this.ended = false; } componentDidMount() { this.ended = false; this.updateFavorites(); } componentWillUnmount() { this.ended = true; } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (this.ended) { return; } if (nextProps.myInvitedParties !== this.state.myInvitedParties) { this.setState({myInvitedParties: nextProps.myInvitedParties}); } if (nextProps.contacts !== this.state.contacts) { this.setState({contacts: nextProps.contacts}); } if (nextProps.favoriteUris !== this.state.favoriteUris) { this.setState({favoriteUris: nextProps.favoriteUris}); } if (nextProps.account !== null && nextProps.account !== this.props.account) { this.setState({accountId: nextProps.account.id}); } if (nextProps.refreshHistory !== this.state.refreshHistory) { this.setState({refreshHistory: nextProps.refreshHistory}); this.getServerHistory(); } if (nextProps.refreshFavorites !== this.state.refreshFavorites) { this.setState({refreshFavorites: nextProps.refreshFavorites}); this.updateFavorites(); } if (nextProps.selectedContact !== this.state.selectedContact) { this.setState({selectedContact: nextProps.selectedContact}); if (nextProps.selectedContact) { this.getMessages(nextProps.selectedContact); } }; - if (nextProps.myDisplayNames !== this.state.myDisplayNames) { - this.setState({myDisplayNames: nextProps.myDisplayNames}); + if (nextProps.myContacts !== this.state.myContacts) { + this.setState({myContacts: nextProps.myContacts}); }; if (this.state.messages) { let renderMessages = []; if (this.state.selectedContact) { let uri = this.state.selectedContact.remoteParty; let username = uri.split('@')[0]; if (this.state.selectedContact.remoteParty.indexOf('@videoconference') > -1) { uri = username; } if (nextProps.messages && nextProps.messages.hasOwnProperty(uri)) { renderMessages = nextProps.messages[uri]; if (this.state.renderMessages.length !== renderMessages.length) { this.props.confirmRead(uri); } } this.setState({renderMessages: GiftedChat.append(renderMessages, [])}); } } this.setState({isLandscape: nextProps.isLandscape, chat: nextProps.chat, showMessageModal: nextProps.showMessageModal, message: nextProps.message }); } getMessages(contact) { - if (!contact) { return; } - let uri = contact.remoteParty; - console.log('Get messages for', uri); if (uri.indexOf('@videoconference') > -1) { let username = uri.split('@')[0]; uri = username; } - this.props.getMessages(uri); } 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); } saveInvitedParties(room, uris) { if (this.ended) { return; } this.props.saveInvitedParties(room, uris); let myInvitedParties = this.state.myInvitedParties; if (myInvitedParties && myInvitedParties.hasOwnProperty(room)) { myInvitedParties[room] = uris; this.setState({myInvitedParties: myInvitedParties}); } } setBlockedUri(uri) { return this.props.setBlockedUri(uri); } togglePinned() { this.setState({pinned: !this.state.pinned}); } renderItem(object) { let item = object.item || object; let invitedParties = []; let uri = item.remoteParty; let myDisplayName; let username = uri.split('@')[0]; - if (this.state.myDisplayNames && this.state.myDisplayNames.hasOwnProperty(uri)) { - myDisplayName = this.state.myDisplayNames[uri].name; + if (this.state.myContacts && this.state.myContacts.hasOwnProperty(uri)) { + myDisplayName = this.state.myContacts[uri].name; } if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(username)) { invitedParties = this.state.myInvitedParties[username]; } if (myDisplayName) { if (item.displayName === item.remoteParty || item.displayName !== myDisplayName) { item.displayName = myDisplayName; } } return( ); } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } getLocalHistory() { let history = this.state.localHistory; history.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1) let known = []; let uri; history = history.filter((elem) => { uri = elem.remoteParty.toLowerCase(); if (uri.indexOf('@videoconference') === -1) { return; } if (known.indexOf(uri) <= -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(uri); return elem; } }); return history; } updateFavorites() { let favoriteContacts = []; let displayName; let label; let conference; let metadata = ''; let contacts = this.state.contacts; contacts = contacts.concat(this.videoTest); contacts = contacts.concat(this.echoTest); let currentFavoriteContacts = this.favoriteContacts; currentFavoriteContacts.forEach((contact) => { if (this.state.favoriteUris.indexOf(contact.remoteParty) === -1) { let idx = this.favoriteContacts.indexOf(contact); this.favoriteContacts.splice(idx, 1); } }); this.state.favoriteUris.forEach((uri) => { if (!uri) { return; } uri = uri.toLowerCase(); const contact_obj = this.findObjectByKey(contacts, 'remoteParty', uri); displayName = contact_obj ? contact_obj.displayName : uri; label = contact_obj ? contact_obj.label: null; conference = false; let tags = ['favorite']; const history_obj = this.findObjectByKey(this.state.serverHistory, 'remoteParty', uri); const startTime = history_obj? history_obj.startTime : null; const stopTime = history_obj? history_obj.stopTime : null; const duration = history_obj? history_obj.duration : 0; let media = history_obj? history_obj.media : ['audio']; tags.push('history'); if (uri.indexOf('@videoconference.') > -1) { displayName = uri.split('@')[0]; const room = uri.split('@')[0]; uri = room + '@' + this.props.config.defaultConferenceDomain; conference = true; media = ['audio', 'video', 'chat']; tags.push('conference'); if (this.state.myInvitedParties.hasOwnProperty(room)) { metadata = this.state.myInvitedParties[room].toString(); } } const item = { remoteParty: uri, metadata: metadata, displayName: displayName, conference: conference, media: media, type: 'contact', startTime: startTime, startTime: startTime, duration: duration, label: label, id: uuid.v4(), tags: tags }; favoriteContacts.push(item); }); this.favoriteContacts = favoriteContacts; } closeMessageModal() { this.setState({showMessageModal: false, message: null}); } onSendMessage(messages) { let uri; if (!this.state.selectedContact) { if (this.props.targetUri && this.state.chat) { let contacts = this.searchedContact(this.props.targetUri); if (contacts.length !== 1) { return; } uri = contacts[0].remoteParty; } else { return; } } else { uri = this.state.selectedContact.remoteParty; } messages.forEach((message) => { /* sent: true, // Mark the message as received, using two tick received: true, // Mark the message as pending with a clock loader pending: true, */ this.props.sendMessage(uri, message); }); this.setState({renderMessages: GiftedChat.append(this.state.renderMessages, messages)}); } getBlockedContacts() { let blockedContacts = []; let contact_obj; let displayName; let label; let contacts= this.state.contacts contacts = contacts.concat(this.videoTest); contacts = contacts.concat(this.echoTest); this.state.blockedUris.forEach((uri) => { contact_obj = this.findObjectByKey(contacts, 'remoteParty', uri); displayName = contact_obj ? contact_obj.displayName : uri; label = contact_obj ? contact_obj.label: null; const item = { remoteParty: uri.toLowerCase(), displayName: displayName, conference: false, type: 'contact', label: label, id: uuid.v4(), tags: ['blocked'] }; blockedContacts.push(item); }); return blockedContacts; } getChatContacts() { let chatContacts = []; let contact_obj; let displayName; let label; //console.log('this.state.chatUris', this.state.chatUris); let contacts= this.state.contacts contacts = contacts.concat(this.videoTest); contacts = contacts.concat(this.echoTest); - const uris = Object.keys(this.state.myDisplayNames); + const uris = Object.keys(this.state.myContacts); uris.forEach((uri) => { contact_obj = this.findObjectByKey(contacts, 'remoteParty', uri); displayName = contact_obj ? contact_obj.displayName : uri; label = contact_obj ? contact_obj.label: null; const item = { remoteParty: uri.toLowerCase(), displayName: displayName, conference: false, type: 'contact', - unread: this.state.myDisplayNames[uri].unread ? this.state.myDisplayNames[uri].unread.toString() : "0", - startTime: this.state.myDisplayNames[uri].timestamp, - stopTime: this.state.myDisplayNames[uri].timestamp, + unread: this.state.myContacts[uri].unread ? this.state.myContacts[uri].unread.toString() : "0", + startTime: this.state.myContacts[uri].timestamp, + stopTime: this.state.myContacts[uri].timestamp, media: ['chat'], label: label, id: uuid.v4(), tags: contact_obj ? ['chat', 'history'] : ['chat', 'syntetic', 'history'] }; chatContacts.push(item); }); //console.log('chatContacts', chatContacts); return chatContacts; } searchedContact(uri) { let contacts = []; let displayName = uri; if (uri.indexOf('@') === -1) { uri = uri + '@' + this.props.defaultDomain; } const item = { remoteParty: uri.toLowerCase(), displayName: displayName, conference: false, type: 'contact', id: uuid.v4(), tags: ['syntetic'] }; contacts.push(item); return contacts; } getServerHistory() { if (this.ended || !this.state.accountId || this.state.isRefreshing) { return; } this.setState({isRefreshing: true}); //utils.timestampedLog('Requesting call history from server'); let history = []; let localTime; let hasMissedCalls = false; 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.received) { data.received.map(elem => {elem.direction = 'received'; return elem}); history = history.concat(data.received); } if (data.placed) { data.placed.map(elem => {elem.direction = 'placed'; return elem}); history = history.concat(data.placed); } history.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1) if (history) { const known = []; history = history.filter((elem) => { elem.conference = false; if (!elem.tags) { elem.tags = []; } if (elem.remoteParty.indexOf('@conference.') > -1) { return null; } elem.remoteParty = elem.remoteParty.toLowerCase(); let username = elem.remoteParty.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); let contact_obj; if (this.state.contacts) { if (isPhoneNumber) { contact_obj = this.findObjectByKey(this.state.contacts, 'remoteParty', username); } else { contact_obj = this.findObjectByKey(this.state.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('@guest.') > -1) { elem.remoteParty = elem.displayName.toLowerCase().replace(/ /g, '') + '@' + elem.remoteParty.split('@')[1]; } if (elem.remoteParty.indexOf('@videoconference.') > -1) { elem.displayName = 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'; } 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'; } if (elem.timezone !== undefined) { localTime = momenttz.tz(elem.startTime, elem.timezone).toDate(); elem.startTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss'); localTime = momenttz.tz(elem.stopTime, elem.timezone).toDate(); elem.stopTime = moment(localTime).format('YYYY-MM-DD HH:mm:ss'); } if (known.indexOf(elem.remoteParty) <= -1) { known.push(elem.remoteParty); if (elem.direction === 'received' && elem.duration === 0) { elem.tags.push('missed'); hasMissedCalls = true; } return elem; } }); this.props.cacheHistory(history); if (this.ended) { return; } this.setState({serverHistory: history, isRefreshing: false}); this.props.setMissedCalls(hasMissedCalls); } }, (errorCode) => { console.log('Error getting call history from server', errorCode); }); this.setState({isRefreshing: false}); } matchContact(contact, filter='') { if (contact.remoteParty.toLowerCase().startsWith(filter.toLowerCase())) { return true; } if (contact.displayName && contact.displayName.toLowerCase().indexOf(filter.toLowerCase()) > -1) { return true; } if (!this.state.selectedContact && contact.conference && contact.metadata && filter.length > 2 && contact.metadata.indexOf(filter) > -1) { return true; } return false; } noChatInputToolbar () { return null; } onLongMessagePress(context, currentMessage) { if (currentMessage && currentMessage.text) { let options = ['Copy'] if (this.props.targetUri.indexOf('@videoconference') === -1) { options.push('Delete'); if (currentMessage.direction === 'outgoing') { if (currentMessage.failed) { options.push('Resend') } else { if (!currentMessage.received) { options.push('Delete after read') } } } if (currentMessage.pinned) { options.push('Unpin'); } else { options.push('Pin'); } } options.push('Share'); options.push('Info'); options.push('Cancel'); const cancelButtonIndex = options.length - 1; const infoButtonIndex = options.length - 2; const shareButtonIndex = options.length - 3; context.actionSheet().showActionSheetWithOptions({ options, cancelButtonIndex, }, (buttonIndex) => { switch (buttonIndex) { case 0: Clipboard.setString(currentMessage.text); break; case 1: this.props.deleteMessage(currentMessage._id, this.props.targetUri); break; case 2: if (currentMessage.direction !== 'outgoing') { if (currentMessage.pinned) { this.props.unpinMessage(currentMessage._id); } else { this.props.pinMessage(currentMessage._id); } } else { if (currentMessage.failed) { this.props.reSendMessage(currentMessage, this.props.targetUri); } else { if (!currentMessage.received) { this.props.expireMessage(currentMessage._id, 300); } } } break; case 3: if (currentMessage.direction !== 'outgoing') { break; } if (currentMessage.pinned) { this.props.unpinMessage(currentMessage._id); } else { this.props.pinMessage(currentMessage._id); } break; case infoButtonIndex: this.setState({message: currentMessage, showMessageModal: true}); break; case shareButtonIndex: this.setState({message: currentMessage, showShareMessageModal: true }); break; default: break; } }); } }; shouldUpdateMessage(props, nextProps) { return true; } toggleShareMessageModal() { this.setState({showShareMessageModal: !this.state.showShareMessageModal}); } renderMessageBubble (props) { let rightColor = '#0084ff'; let leftColor = '#f0f0f0'; if (props.currentMessage.failed) { rightColor = 'red'; } else { if (props.currentMessage.pinned) { rightColor = '#2ecc71'; leftColor = '#2ecc71'; } } return ( ) } get showChat() { if (this.props.selectedContact || this.props.targetUri) { return true; } return false; } render() { let history = []; let searchExtraItems = []; let items = []; let matchedContacts = []; let messages = this.state.renderMessages; let chatInputClass; if (this.state.selectedContact && this.state.selectedContact.remoteParty.indexOf('@videoconference') > -1) { chatInputClass = this.noChatInputToolbar; } else if (!this.state.chat) { chatInputClass = this.noChatInputToolbar; } if (this.props.filter === 'favorite') { items = this.favoriteContacts.filter(historyItem => this.matchContact(historyItem, this.props.targetUri)); } else if (this.props.filter === 'blocked') { let blockedContacts = this.getBlockedContacts(); items = blockedContacts.filter(historyItem => this.matchContact(historyItem, this.props.targetUri)); } else if (this.props.filter === 'missed') { history = this.state.serverHistory; items = history.filter(historyItem => this.matchContact(historyItem, this.props.targetUri) && historyItem.tags.indexOf('missed') > -1); } else { let chatContacts = this.getChatContacts(); items = chatContacts.filter(chatItem => this.matchContact(chatItem, this.props.targetUri)); history = this.getLocalHistory(); history = history.concat(this.state.serverHistory); history = history.concat(items); searchExtraItems = searchExtraItems.concat(this.state.contacts); searchExtraItems = searchExtraItems.concat(this.favoriteContacts); searchExtraItems = searchExtraItems.concat(this.videoTest); searchExtraItems = searchExtraItems.concat(this.echoTest); items = history.filter(historyItem => this.matchContact(historyItem, this.props.targetUri)); if (this.props.targetUri && this.props.targetUri.length > 2 && !this.state.selectedContact) { matchedContacts = searchExtraItems.filter(contact => this.matchContact(contact, this.props.targetUri)); } else if (this.state.selectedContact && this.state.selectedContact.type === 'contact') { matchedContacts.push(this.state.selectedContact); } items = items.concat(matchedContacts); } if (this.props.targetUri && items.length == 0) { items = items.concat(this.searchedContact(this.props.targetUri)); } const known = []; items.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1) items = items.filter((elem) => { if (known.indexOf(elem.remoteParty) <= -1) { known.push(elem.remoteParty); if (!elem.startTime) { elem.startTime = '1970-01-01 01:01:01' } return elem; } }); 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); } } items.forEach((item) => { item.showActions = false; if (!item.tags) { item.tags = []; } if (!item.unread) { item.unread = "0"; } if (this.state.favoriteUris.indexOf(item.remoteParty) > -1 && item.tags.indexOf('favorite') === -1) { item.tags.push('favorite'); } if (this.state.blockedUris.indexOf(item.remoteParty) > -1 && item.tags.indexOf('blocked') === -1) { item.tags.push('blocked'); } let idx = item.tags.indexOf('blocked'); if (this.state.blockedUris.indexOf(item.remoteParty) === -1 && idx > -1) { item.tags.splice(idx, 1); } idx = item.tags.indexOf('favorite'); if (this.state.favoriteUris.indexOf(item.remoteParty) === -1 && idx > -1) { item.tags.splice(idx, 1); } if (item.remoteParty.indexOf('@videoconference.') === -1) { item.conference = false; } }); let filteredItems = []; items.reverse(); items.forEach((item) => { const fromDomain = '@' + item.remoteParty.split('@')[1]; if (this.props.filter && item.tags.indexOf(this.props.filter) > -1) { filteredItems.push(item); } else if (this.state.blockedUris.indexOf(item.remoteParty) === -1 && this.state.blockedUris.indexOf(fromDomain) === -1) { filteredItems.push(item); } }); items = filteredItems; items.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1) if (items.length === 1) { //console.log(items[0]); 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; } const chatContainer = this.props.orientation === 'landscape' ? styles.chatLandscapeContainer : styles.chatPortraitContainer; const container = this.props.orientation === 'landscape' ? styles.landscapeContainer : styles.portraitContainer; const contactsContainer = this.props.orientation === 'landscape' ? styles.contactsLandscapeContainer : styles.contactsPortraitContainer; const borderClass = (messages.length > 0 && !this.state.chat) ? styles.chatBorder : null; if (items.length === 1) { items[0].unread = "0"; if (items[0].tags.toString() === 'syntetic') { messages = []; } } let pinned_messages = [] if (this.state.pinned) { messages.forEach((m) => { if (m.pinned) { pinned_messages.push(m); } }); messages = pinned_messages; if (pinned_messages.length === 0) { let msg = { _id: uuid.v4(), text: 'No pinned messages found. Touch individual messages to pin them.', system: true } pinned_messages.push(msg); } } return ( {items.length === 1 ? (this.renderItem(items[0])) : item.id} key={this.props.orientation} /> } {this.showChat ? : (items.length === 1) ? { return null }} renderBubble={this.renderBubble} onSend={this.onSendMessage} onLongPress={this.onLongMessagePress} shouldUpdateMessage={this.shouldUpdateMessage} onPress={this.onLongMessagePress} scrollToBottom inverted={false} timeTextStyle={{ left: { color: 'red' }, right: { color: 'yellow' } }} infiniteScroll /> : null } ); } } HistoryTileBox.propTypes = { account : PropTypes.object, password : PropTypes.string.isRequired, config : PropTypes.object.isRequired, targetUri : PropTypes.string, selectedContact : PropTypes.object, contacts : PropTypes.array, chat : PropTypes.bool, orientation : PropTypes.string, setTargetUri : PropTypes.func, isTablet : PropTypes.bool, isLandscape : PropTypes.bool, refreshHistory : PropTypes.bool, refreshFavorites: PropTypes.bool, cacheHistory : PropTypes.func, serverHistory : PropTypes.array, localHistory : PropTypes.array, myDisplayName : PropTypes.string, myPhoneNumber : PropTypes.string, setFavoriteUri : PropTypes.func, saveInvitedParties: PropTypes.func, myInvitedParties: PropTypes.object, setBlockedUri : PropTypes.func, deleteHistoryEntry : PropTypes.func, favoriteUris : PropTypes.array, blockedUris : PropTypes.array, setMissedCalls : PropTypes.func, filter : PropTypes.string, defaultDomain : PropTypes.string, saveDisplayName : PropTypes.func, - myDisplayNames : PropTypes.object, + myContacts : PropTypes.object, messages : PropTypes.object, getMessages : PropTypes.func, confirmRead : PropTypes.func, sendMessage : PropTypes.func, reSendMessage : PropTypes.func, deleteMessage : PropTypes.func, expireMessage : PropTypes.func, pinMessage : PropTypes.func, unpinMessage : PropTypes.func, purgeMessages : PropTypes.func }; export default HistoryTileBox; diff --git a/app/components/LocalMedia.js b/app/components/LocalMedia.js index 4fead6e..ac2d3a1 100644 --- a/app/components/LocalMedia.js +++ b/app/components/LocalMedia.js @@ -1,150 +1,154 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import { View, Dimensions } from 'react-native'; import { RTCView } from 'react-native-webrtc'; import { IconButton, Button, Text} from 'react-native-paper'; import CallOverlay from './CallOverlay'; import styles from '../assets/styles/blink/_LocalMedia.scss'; class LocalMedia extends Component { constructor(props) { super(props); autoBind(this); this.localVideo = React.createRef(); this.state = { localMedia: this.props.localMedia, historyEntry: this.props.historyEntry, participants: this.props.participants, reconnectingCall: this.props.reconnectingCall, declineReason: this.props.declineReason }; } componentDidMount() { this.props.mediaPlaying(); } //getDerivedStateFromProps(nextProps, state) UNSAFE_componentWillReceiveProps(nextProps) { /* if (nextProps.localMedia && nextProps.localMedia !== this.state.localMedia) { this.props.mediaPlaying(); } */ this.setState({historyEntry: nextProps.historyEntry, participants: nextProps.participants, reconnectingCall: nextProps.reconnectingCall, declineReason: nextProps.declineReason}); } saveConference(event) { event.preventDefault(); this.props.saveConference(); } showSaveDialog() { if (!this.props.showSaveDialog) { return false; } return this.props.showSaveDialog(); } hangupCall(event) { event.preventDefault(); this.props.hangupCall('user_hangup_conference_confirmed'); } render() { + let {height, width} = Dimensions.get('window'); let videoStyle = { height, width }; const streamUrl = this.props.localMedia ? this.props.localMedia.toURL() : null; const buttonSize = this.props.isTablet ? 40 : 34; const buttonContainerClass = this.props.isTablet ? styles.tabletButtonContainer : styles.buttonContainer; return ( {this.showSaveDialog() ? Save conference maybe? Would you like to save participants {this.state.participants.toString().replace(/,/g, ', ')} for having another conference later? You can find later it in your Favorites. : } ); } } LocalMedia.propTypes = { call : PropTypes.object, remoteUri : PropTypes.string, remoteDisplayName : PropTypes.string, localMedia : PropTypes.object.isRequired, mediaPlaying : PropTypes.func.isRequired, hangupCall : PropTypes.func, showSaveDialog : PropTypes.func, saveConference : PropTypes.func, reconnectingCall : PropTypes.bool, connection : PropTypes.object, participants : PropTypes.array, media : PropTypes.string, declineReason : PropTypes.string, - showLogs : PropTypes.func + showLogs : PropTypes.func, + goBackFunc : PropTypes.func + }; export default LocalMedia; diff --git a/app/components/NavigationBar.js b/app/components/NavigationBar.js index da2b30e..e05b4d0 100644 --- a/app/components/NavigationBar.js +++ b/app/components/NavigationBar.js @@ -1,233 +1,233 @@ import React, { Component } from 'react'; import { Linking, Image, Platform, View } from 'react-native'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import { Appbar, Menu, Divider, Text } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import config from '../config'; import AboutModal from './AboutModal'; import CallMeMaybeModal from './CallMeMaybeModal'; import EditDisplayNameModal from './EditDisplayNameModal'; import styles from '../assets/styles/blink/_NavigationBar.scss'; const blinkLogo = require('../assets/images/blink-white-big.png'); class NavigationBar extends Component { constructor(props) { super(props); autoBind(this); this.state = { showAboutModal: false, + inCall: this.props.inCall, showCallMeMaybeModal: false, showEditDisplayNameModal: false, registrationState: this.props.registrationState, connection: this.props.connection, proximity: this.props.proximity, selectedContact: this.props.selectedContact, mute: false, menuVisible: false, accountId: this.props.account ? this.props.account.id : null, displayName: this.props.displayName } this.menuRef = React.createRef(); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.account !== null && nextProps.account.id !== this.state.accountId) { this.setState({accountId: nextProps.account.id}); } this.setState({registrationState: nextProps.registrationState, connection: nextProps.connection, displayName: nextProps.displayName, proximity: nextProps.proximity, + inCall: nextProps.inCall, selectedContact: nextProps.selectedContact }); } handleMenu(event) { this.callUrl = `${config.publicUrl}/call/${this.state.accountId}`; switch (event) { case 'about': this.toggleAboutModal(); break; case 'callMeMaybe': this.toggleCallMeMaybeModal(); break; case 'displayName': this.toggleEditDisplayNameModal(); break; case 'speakerphone': this.props.toggleSpeakerPhone(); break; case 'proximity': this.props.toggleProximity(); break; case 'logOut': this.props.logout(); break; case 'logs': this.props.showLogs(); break; case 'preview': this.props.preview(); break; case 'checkUpdate': if (Platform.OS === 'android') { Linking.openURL('https://play.google.com/store/apps/details?id=com.agprojects.sylk'); } else { Linking.openURL('https://apps.apple.com/us/app/id1489960733'); } break; case 'settings': Linking.openURL(config.serverSettingsUrl); break; default: break; } this.setState({menuVisible: false}); } saveDisplayName(displayName) { if (!displayName) { return; } this.setState({displayName: displayName}); this.props.saveDisplayName(this.state.accountId, displayName); } toggleMute() { this.setState(prevState => ({mute: !prevState.mute})); this.props.toggleMute(); } toggleAboutModal() { this.setState({showAboutModal: !this.state.showAboutModal}); } toggleCallMeMaybeModal() { this.setState({showCallMeMaybeModal: !this.state.showCallMeMaybeModal}); } toggleEditDisplayNameModal() { this.setState({showEditDisplayNameModal: !this.state.showEditDisplayNameModal}); } - render() { const muteIcon = this.state.mute ? 'bell-off' : 'bell'; let subtitleStyle = this.props.isTablet ? styles.tabletSubtitle: styles.subtitle; let titleStyle = this.props.isTablet ? styles.tabletTitle: styles.title; let statusIcon = null; let statusColor = 'green'; statusIcon = 'check-circle'; if (!this.state.connection || this.state.connection.state !== 'ready') { statusIcon = 'alert-circle'; statusColor = 'red'; } else if (this.state.registrationState !== 'registered') { statusIcon = 'alert-circle'; statusColor = 'orange'; } let callUrl = callUrl = config.publicUrl + "/call/" + this.state.accountId; let subtitle = 'Signed in as ' + this.state.accountId; let proximityTitle = this.state.proximity ? 'Disable proximity sensor' : 'Enable proximity sensor'; let proximityIcon = this.state.proximity ? 'ear-hearing-off' : 'ear-hearing'; // this.handleMenu('speakerphone')} icon="speaker" title="Toggle speakerphone" /> - //console.log('Nabvar selectedContact', this.state.selectedContact); - return ( - {(this.props.goBackFunc && this.state.selectedContact)? + {this.state.selectedContact? {this.props.goBackFunc()}} /> : } {this.props.isTablet? {subtitle} : null} {statusIcon ? : null } this.setState({menuVisible: !this.state.menuVisible})} anchor={ this.setState({menuVisible: !this.state.menuVisible})} /> } > this.handleMenu('about')} icon="information" title="About Sylk"/> this.handleMenu('preview')} icon="video" title="Video preview" /> this.handleMenu('callMeMaybe')} icon="share" title="Call me, maybe?" /> this.handleMenu('displayName')} icon="rename-box" title="My display name" /> this.handleMenu('settings')} icon="wrench" title="Server settings..." /> this.handleMenu('logs')} icon="timeline-text-outline" title="Show logs" /> this.handleMenu('proximity')} icon={proximityIcon} title={proximityTitle} /> this.handleMenu('checkUpdate')} icon="update" title="Check for updates..." /> this.handleMenu('logOut')} icon="logout" title="Sign out" /> ); } } NavigationBar.propTypes = { notificationCenter : PropTypes.func.isRequired, logout : PropTypes.func.isRequired, preview : PropTypes.func.isRequired, toggleSpeakerPhone : PropTypes.func.isRequired, toggleProximity : PropTypes.func.isRequired, saveDisplayName : PropTypes.func.isRequired, showLogs : PropTypes.func.isRequired, + inCall : PropTypes.bool, proximity : PropTypes.bool, - goBackFunc : PropTypes.func, displayName : PropTypes.string, account : PropTypes.object, connection : PropTypes.object, toggleMute : PropTypes.func, orientation : PropTypes.string, isTablet : PropTypes.bool, - selectedContact : PropTypes.object + selectedContact : PropTypes.object, + goBackFunc : PropTypes.func }; export default NavigationBar; diff --git a/app/components/ReadyBox.js b/app/components/ReadyBox.js index 31264e5..2f210ec 100644 --- a/app/components/ReadyBox.js +++ b/app/components/ReadyBox.js @@ -1,510 +1,528 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import autoBind from 'auto-bind'; import { View, Platform} from 'react-native'; import { IconButton, Title, Button } from 'react-native-paper'; import ConferenceModal from './ConferenceModal'; import HistoryTileBox from './HistoryTileBox'; import FooterBox from './FooterBox'; import URIInput from './URIInput'; import config from '../config'; import utils from '../utils'; import styles from '../assets/styles/blink/_ReadyBox.scss'; class ReadyBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { targetUri: '', contacts: this.props.contacts, selectedContact: this.props.selectedContact, showConferenceModal: false, sticky: false, favoriteUris: this.props.favoriteUris, blockedUris: this.props.blockedUris, historyFilter: null, missedCalls: false, isLandscape: this.props.isLandscape, participants: null, myInvitedParties: this.props.myInvitedParties, messages: this.props.messages, myDisplayName: this.props.myDisplayName, chat: false, - edit: false + edit: false, + call: this.props.call }; this.ended = false; } UNSAFE_componentWillReceiveProps(nextProps) { if (this.ended) { return; } if (this.state.selectedContact && nextProps.selectedContact === null) { this.setState({targetUri: '', chat: false}); } if (this.state.selectedContact !== nextProps.selectedContact && nextProps.selectedContact) { this.setState({chat: !this.chatDisabledForUri(nextProps.selectedContact.remoteParty)}); } this.setState({myInvitedParties: nextProps.myInvitedParties, messages: nextProps.messages, myDisplayName: nextProps.myDisplayName, + call: nextProps.call, selectedContact: nextProps.selectedContact, isLandscape: nextProps.isLandscape}); } getTargetUri(uri) { return utils.normalizeUri(uri, this.props.defaultDomain); } async componentDidMount() { this.ended = false; } componentWillUnmount() { this.ended = true; } setMissedCalls(flag) { if (this.ended) { return; } this.setState({missedCalls: flag}); } filterHistory(filter) { if (this.ended) { return; } this.setState({'historyFilter': filter}); this.handleTargetChange(''); } chatDisabledForUri(uri) { if (uri.indexOf('@videoconference') > -1) { return true; } if (uri.indexOf('@guest') > -1) { return true; } if (uri.indexOf('3333@') > -1) { return true; } if (uri.indexOf('4444@') > -1) { return true; } return false; } get showSearchBar() { if (this.props.isTablet) { return true; } return (this.state.selectedContact === null); } get showButtonsBar() { if (this.props.isTablet) { return true; } if (this.state.chat && this.state.selectedContact) { return false; } return true; } handleTargetChange(value, contact) { if (this.state.selectedContact === contact) { this.setState({edit: !this.state.edit}); if (this.state.chat) { this.setState({chat: false}); } return; } else { this.setState({chat: false}); } let new_value = value; if (contact) { if (this.state.targetUri === contact.uri) { new_value = ''; } } else { contact = null; } if (this.state.targetUri === value) { new_value = ''; } if (new_value === '') { contact = null; } new_value = new_value.replace(' ',''); this.props.selectContact(contact); this.setState({targetUri: new_value}); } handleTargetSelect() { if (this.props.connection === null) { this.props._notificationCenter.postSystemNotification("Server unreachable"); return; } let uri = this.state.targetUri.toLowerCase(); if (uri.endsWith(`@${config.defaultConferenceDomain}`)) { let participants; if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(uri)) { participants = this.state.myInvitedParties[uri]; } this.props.startConference(uri, {audio: true, video: true, participants: this.state.participants}); } else { this.props.startCall(this.getTargetUri(uri), {audio: true, video: true}); } } showConferenceModal(event) { event.preventDefault(); this.setState({showConferenceModal: true}); return; } handleChat(event) { event.preventDefault(); if (!this.state.chat && !this.state.selectedContact && this.state.targetUri.toLowerCase().indexOf('@') === -1) { this.setState({targetUri: this.getTargetUri(this.state.targetUri)}); } let uri = this.state.targetUri.toLowerCase(); this.setState({chat: !this.state.chat}); } handleAudioCall(event) { event.preventDefault(); let uri = this.state.targetUri.toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; uri = uri_parts[4]; if (event === 'conference') { uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain; } } if (uri.endsWith(`@${config.defaultConferenceDomain}`)) { this.props.startConference(uri, {audio: true, video: false}); } else { this.props.startCall(this.getTargetUri(uri), {audio: true, video: false}); } } handleVideoCall(event) { event.preventDefault(); let uri = this.state.targetUri.toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; uri = uri_parts[4]; if (event === 'conference') { uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain; } } if (uri.endsWith(`@${config.defaultConferenceDomain}`)) { this.props.startConference(uri, {audio: true, video: true}); } else { this.props.startCall(this.getTargetUri(uri), {audio: true, video: true}); } } handleConferenceCall(targetUri, options={audio: true, video: true, participants: []}) { this.props.startConference(targetUri, {audio: options.audio, video: options.video, participants: options.participants}); this.setState({showConferenceModal: false}); } conferenceButtonActive() { if (this.state.targetUri.indexOf('@guest.') > -1) { return false; } if (this.state.targetUri.indexOf('@') > -1 && this.state.targetUri.indexOf(config.defaultConferenceDomain) === -1) { return false; } let uri = this.state.targetUri.toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; if (event === 'call') { return false; } } if (this.state.targetUri.match(/^(\+)(\d+)$/)) { return false; } return true; } get chatButtonDisabled() { let uri = this.state.targetUri.trim(); if (this.chatDisabledForUri(uri)) { return true; } return this.callButtonDisabled; } get callButtonDisabled() { let uri = this.state.targetUri.trim(); if (uri.indexOf(' ') > -1) { return true; } if (uri.length === 0 || uri.indexOf('@videoconference') > -1 || uri.indexOf('@guest') > -1 ) { return true; } return false; } render() { let uriClass = styles.portraitUriInputBox; let uriGroupClass = styles.portraitUriButtonGroup; let titleClass = styles.portraitTitle; let uri = this.state.targetUri.toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; uri = uri_parts[4]; if (event === 'conference') { uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain; } } const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; if (this.props.isTablet) { titleClass = this.props.orientation === 'landscape' ? styles.landscapeTabletTitle : styles.portraitTabletTitle; } else { titleClass = this.props.orientation === 'landscape' ? styles.landscapeTitle : styles.portraitTitle; } if (this.props.isTablet) { uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriButtonGroup : styles.portraitTabletUriButtonGroup; } else { uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeUriButtonGroup : styles.portraitUriButtonGroup; } if (this.props.isTablet) { uriClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriInputBox : styles.portraitTabletUriInputBox; } else { uriClass = this.props.orientation === 'landscape' ? styles.landscapeUriInputBox : styles.portraitUriInputBox; } const historyContainer = this.props.orientation === 'landscape' ? styles.historyLandscapeContainer : styles.historyPortraitContainer; const buttonGroupClass = this.props.orientation === 'landscape' ? styles.landscapeButtonGroup : styles.buttonGroup; const borderClass = this.state.chat ? null : styles.historyBorder; + const callType = (this.state.call && this.state.call.hasOwnProperty('_participants')) ? 'Back to conference' : 'Back to call'; return ( {this.showButtonsBar ? {this.showSearchBar ? : null} + {!this.state.call ? + : + + + + } + : null} {(((this.state.favoriteUris.length > 0 || this.state.blockedUris.length > 0 ) || (this.state.favoriteUris.length === 0 && this.state.historyFilter === 'favorite') || (this.state.blockedUris.length === 0 && this.state.historyFilter === 'blocked') || (this.state.historyFilter === 'missed')) && !this.state.chat) ? {this.state.historyFilter !== null ? : null} {(this.state.favoriteUris.length > 0 && this.state.historyFilter !== 'favorite')? : null} {(this.state.blockedUris.length > 0 && this.state.historyFilter !== 'blocked')? : null} {(this.state.missedCalls && this.state.historyFilter !== 'missed')? : null} : null} {this.props.isTablet && 0? : null} ); } } ReadyBox.propTypes = { account : PropTypes.object, password : PropTypes.string.isRequired, config : PropTypes.object.isRequired, startCall : PropTypes.func.isRequired, startConference : PropTypes.func.isRequired, contacts : PropTypes.array, orientation : PropTypes.string, isTablet : PropTypes.bool, isLandscape : PropTypes.bool, refreshHistory : PropTypes.bool, refreshFavorites: PropTypes.bool, cacheHistory : PropTypes.func, serverHistory : PropTypes.array, localHistory : PropTypes.array, myDisplayName : PropTypes.string, myPhoneNumber : PropTypes.string, deleteHistoryEntry: PropTypes.func, setFavoriteUri : PropTypes.func, myInvitedParties: PropTypes.object, setBlockedUri : PropTypes.func, favoriteUris : PropTypes.array, blockedUris : PropTypes.array, defaultDomain : PropTypes.string, saveDisplayName : PropTypes.func, selectContact: PropTypes.func, lookupContacts : PropTypes.func, sendMessage : PropTypes.func, reSendMessage : PropTypes.func, purgeMessages : PropTypes.func, confirmRead : PropTypes.func, deleteMessage : PropTypes.func, expireMessage : PropTypes.func, getMessages : PropTypes.func, pinMessage : PropTypes.func, unpinMessage : PropTypes.func, selectedContact : PropTypes.object, - messages : PropTypes.object + messages : PropTypes.object, + call : PropTypes.object, + goBackFunc : PropTypes.func }; export default ReadyBox; diff --git a/app/components/VideoBox.js b/app/components/VideoBox.js index 18a1c2f..2e69bfd 100644 --- a/app/components/VideoBox.js +++ b/app/components/VideoBox.js @@ -1,408 +1,410 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import dtmf from 'react-native-dtmf'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import { IconButton, ActivityIndicator, Colors } from 'react-native-paper'; import { View, Dimensions, TouchableWithoutFeedback, 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 styles from '../assets/styles/blink/_VideoBox.scss'; //import TrafficStats from './BarChart'; import utils from '../utils'; const DEBUG = debug('blinkrtc:Video'); debug.enable('*'); class VideoBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { call: this.props.call, reconnectingCall: this.props.reconnectingCall, audioMuted: this.props.muted, mirror: true, callOverlayVisible: true, videoMuted: false, localVideoShow: true, remoteVideoShow: true, remoteSharesScreen: false, showEscalateConferenceModal: false, localStream: this.props.call.getLocalStreams()[0], remoteStream: this.props.call.getRemoteStreams()[0], info: this.props.info, showDtmfModal: false, doorOpened: false, packetLossQueue : [], audioBandwidthQueue : [], latencyQueue : [] }; this.overlayTimer = null; this.localVideo = React.createRef(); this.remoteVideo = React.createRef(); this.userHangup = false; } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.hasOwnProperty('muted')) { this.setState({audioMuted: nextProps.muted}); } if (nextProps.hasOwnProperty('info')) { this.setState({info: nextProps.info}); } if (nextProps.hasOwnProperty('packetLossQueue')) { this.setState({packetLossQueue: nextProps.packetLossQueue}); } if (nextProps.hasOwnProperty('audioBandwidthQueue')) { this.setState({audioBandwidthQueue: nextProps.audioBandwidthQueue}); } if (nextProps.hasOwnProperty('latencyQueue')) { this.setState({latencyQueue: nextProps.latencyQueue}); } if (nextProps.call && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call, localStream: nextProps.call.getLocalStreams()[0], remoteStream: nextProps.call.getRemoteStreams()[0] }); } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } } callStateChanged(oldState, newState, data) { 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.state.call !== null && this.state.call.state === 'established') { this.state.call.sendDtmf(tone); } } componentDidMount() { if (this.state.call) { this.state.call.on('stateChanged', this.callStateChanged); } this.armOverlayTimer(); } componentWillUnmount() { if (this.state.call != null) { this.state.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}); } handleRemoteResize(event, target) { 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(); this.props.toggleMute(this.state.call.id, !this.state.audioMuted); } 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(); this.setState({mirror: !this.state.mirror}); } } hangupCall(event) { event.preventDefault(); this.props.hangupCall('user_hangup_call'); this.userHangup = true; } cancelCall(event) { event.preventDefault(); this.props.hangupCall('user_cancel_call'); } escalateToConference(participants) { this.props.escalateToConference(participants); } armOverlayTimer() { clearTimeout(this.overlayTimer); this.overlayTimer = setTimeout(() => { this.setState({callOverlayVisible: false}); }, 4000); } toggleCallOverlay() { this.setState({callOverlayVisible: !this.state.callOverlayVisible}); } toggleEscalateConferenceModal() { this.setState({ callOverlayVisible : false, showEscalateConferenceModal : !this.state.showEscalateConferenceModal }); } render() { if (this.state.call === null) { return null; } // 'mirror' : !this.state.call.sharingScreen && !this.props.generatedVideoTrack, // we do not want mirrored local video once the call has started, just in preview const localVideoClasses = classNames({ 'video-thumbnail' : true, 'hidden' : !this.state.localVideoShow, 'animated' : true, 'fadeIn' : this.state.localVideoShow || this.state.videoMuted, 'fadeOut' : this.state.videoMuted, 'fit' : this.state.call.sharingScreen }); const remoteVideoClasses = classNames({ 'poster' : !this.state.remoteVideoShow, 'animated' : true, 'fadeIn' : this.state.remoteVideoShow, 'large' : true, 'fit' : this.state.remoteSharesScreen }); let buttonContainerClass; let buttons; 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; const buttonSize = this.props.isTablet ? 40 : 34; if (this.props.isTablet) { buttonContainerClass = this.props.orientation === 'landscape' ? styles.tabletLandscapeButtonContainer : styles.tabletPortraitButtonContainer; userIconContainerClass = styles.tabletUserIconContainer; } else { buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer; } if (this.state.callOverlayVisible) { let content = ( ); if (this.props.intercomDtmfTone) { content = ( ); } buttons = ({content}); } const remoteStreamUrl = this.state.remoteStream ? this.state.remoteStream.toURL() : null const show = this.state.callOverlayVisible || this.state.reconnectingCall; return ( {this.state.remoteVideoShow && !this.state.reconnectingCall ? : null } { this.state.localVideoShow ? : null } {this.state.reconnectingCall ? : null } {buttons} ); } } VideoBox.propTypes = { call : PropTypes.object, connection : PropTypes.object, photo : PropTypes.string, accountId : PropTypes.string, remoteUri : PropTypes.string, remoteDisplayName : PropTypes.string, localMedia : PropTypes.object, hangupCall : PropTypes.func, info : PropTypes.string, shareScreen : PropTypes.func, escalateToConference : PropTypes.func, generatedVideoTrack : PropTypes.bool, callKeepSendDtmf : PropTypes.func, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, intercomDtmfTone : PropTypes.string, orientation : PropTypes.string, isTablet : PropTypes.bool, reconnectingCall : PropTypes.bool, muted : PropTypes.bool, - showLogs : PropTypes.func + showLogs : PropTypes.func, + goBackFunc : PropTypes.func }; export default VideoBox;