diff --git a/app/app.js b/app/app.js
index 970c335..5c9276a 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,2162 +1,2184 @@
import React, { Component, Fragment } from 'react';
import { Alert, View, SafeAreaView, ImageBackground, AppState, Linking, Platform, StyleSheet} from 'react-native';
import { DeviceEventEmitter } from 'react-native';
import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
import { BreadProvider } from "material-bread";
import { registerGlobals } from 'react-native-webrtc';
import { Router, Route, Link, Switch } from 'react-router-native';
import history from './history';
import Logger from "../Logger";
import autoBind from 'auto-bind';
import { firebase } from '@react-native-firebase/messaging';
import VoipPushNotification from 'react-native-voip-push-notification';
import uuid from 'react-native-uuid';
import { getUniqueId, getBundleId, isTablet, getPhoneNumber} from 'react-native-device-info';
import RNDrawOverlay from 'react-native-draw-overlay';
import PushNotificationIOS from "@react-native-community/push-notification-ios";
import Contacts from 'react-native-contacts';
registerGlobals();
import * as sylkrtc from 'react-native-sylkrtc';
import InCallManager from 'react-native-incall-manager';
import RNCallKeep, { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep';
import RegisterBox from './components/RegisterBox';
import ReadyBox from './components/ReadyBox';
import Call from './components/Call';
import CallByUriBox from './components/CallByUriBox';
import Conference from './components/Conference';
import ConferenceByUriBox from './components/ConferenceByUriBox';
// import AudioPlayer from './components/AudioPlayer';
// import ErrorPanel from './components/ErrorPanel';
import FooterBox from './components/FooterBox';
import StatusBox from './components/StatusBox';
import IncomingCallModal from './components/IncomingCallModal';
import NotificationCenter from './components/NotificationCenter';
import LoadingScreen from './components/LoadingScreen';
import NavigationBar from './components/NavigationBar';
import Preview from './components/Preview';
import CallManager from "./CallManager";
import utils from './utils';
import config from './config';
import storage from './storage';
import styles from './assets/styles/blink/root.scss';
const backgroundImage = require('./assets/images/dark_linen.png');
const logger = new Logger("App");
function checkIosPermissions() {
return new Promise(resolve => PushNotificationIOS.checkPermissions(resolve));
}
const theme = {
...DefaultTheme,
dark: true,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#337ab7',
// accent: '#f1c40f',
},
};
let bundleId = `${getBundleId()}`;
const deviceId = getUniqueId();
const version = '1.0.0';
if (Platform.OS == 'ios') {
bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`;
// bundleId = `${bundleId}.dev`;
}
const mainStyle = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 0
}
});
// Application modes
const MODE_NORMAL = Symbol('mode-normal');
const MODE_PRIVATE = Symbol('mode-private');
const MODE_GUEST_CALL = Symbol('mode-guest-call');
const MODE_GUEST_CONFERENCE = Symbol('mode-guest-conference');
class Sylk extends Component {
constructor() {
super();
autoBind(this)
this._loaded = false;
this._initialSstate = {
accountId: '',
password: '',
displayName: '',
account: null,
registrationState: null,
registrationKeepalive: false,
inboundCall: null,
currentCall: null,
isConference: false,
connection: null,
showIncomingModal: false,
showScreenSharingModal: false,
status: null,
targetUri: '',
missedTargetUri: '',
loading: null,
mode: MODE_PRIVATE,
localMedia: null,
generatedVideoTrack: false,
contacts: [],
devices: {},
speakerPhoneEnabled: null,
orientation : 'portrait',
Height_Layout : '',
Width_Layout : '',
outgoingCallUUID: null,
outgoingMedia: null,
hardware: '',
phoneNumber: '',
isTablet: isTablet(),
refreshHistory: false,
myDisplayName: null,
myPhoneNumber: null,
localHistory: [],
favoriteUris: [],
blockedUris: [],
initialUrl: null,
reconnectingCall: false
};
this.currentRoute = null;
this.pushtoken = null;
this.pushkittoken = null;
this.intercomDtmfTone = null;
this.registrationFailureTimer = null;
this.cachedHistory = []; // used for caching server history
this.state = Object.assign({}, this._initialSstate);
this.myParticipants = {};
this.myInvitedParties = {};
this._historyConferenceParticipants = new Map(); // for saving to local history
this.__notificationCenter = null;
this.participantsToInvite = null;
this.redirectTo = null;
this.prevPath = null;
this.shouldUseHashRouting = false;
this.muteIncoming = false;
storage.initialize();
this._callKeepManager = new CallManager(RNCallKeep, this.acceptCall, this.rejectCall, this.hangupCall, this.timeoutCall, this.callKeepStartConference, this.startCallFromCallKeeper);
if (InCallManager.recordPermission !== 'granted') {
InCallManager.requestRecordPermission()
.then((requestedRecordPermissionResult) => {
console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult);
})
.catch((err) => {
console.log("InCallManager.requestRecordPermission() catch: ", err);
});
}
// Load camera/mic preferences
storage.get('devices').then((devices) => {
if (devices) {
this.setState({devices: devices});
}
});
storage.get('history').then((history) => {
if (history) {
console.log('Loaded', history.length, 'local history entries');
this.setState({localHistory: history});
} else {
console.log('Loaded 0 local history entries');
}
});
storage.get('cachedHistory').then((history) => {
if (history) {
console.log('Loaded', history.length, 'cached history entries');
this.cachedHistory = history;
}
});
storage.get('myParticipants').then((myParticipants) => {
if (myParticipants) {
this.myParticipants = myParticipants;
console.log('My participants', this.myParticipants);
}
});
storage.get('myInvitedParties').then((myInvitedParties) => {
if (myInvitedParties) {
this.myInvitedParties = myInvitedParties;
console.log('My invited parties', this.myInvitedParties);
}
});
storage.get('favoriteUris').then((favoriteUris) => {
if (favoriteUris) {
this.setState({favoriteUris: favoriteUris});
console.log('My favorite Uris', favoriteUris);
}
});
storage.get('blockedUris').then((blockedUris) => {
if (blockedUris) {
this.setState({blockedUris: blockedUris});
console.log('My blocked Uris', blockedUris);
}
});
}
async loadContacts() {
Contacts.checkPermission((err, permission) => {
if (permission === Contacts.PERMISSION_UNDEFINED) {
Contacts.requestPermission((err, requestedContactsPermissionResult) => {
if (err) {
console.log("Contacts.requestPermission()catch: ", err);
}
console.log("Contacts.requestPermission() requestPermission: ", requestedContactsPermissionResult);
})
}
})
Contacts.getAll((err, contacts) => {
if (err === 'denied'){
console.log('Access to contacts denied')
} else {
// contacts returned in Array
let contact_cards = [];
let name;
let photo;
let seen_uris = new Map();
var arrayLength = contacts.length;
for (var i = 0; i < arrayLength; i++) {
photo = null;
contact = contacts[i];
if (contact['givenName'] && contact['familyName']) {
name = contact['givenName'] + ' ' + contact['familyName'];
} else if (contact['givenName']) {
name = contact['givenName'];
} else if (contact['familyName']) {
name = contact['familyName'];
} else if (contact['company']) {
name = contact['company'];
} else {
continue;
}
if (contact.hasThumbnail) {
photo = contact.thumbnailPath;
}
//console.log(name);
contact['phoneNumbers'].forEach(function (number, index) {
let number_stripped = number['number'].replace(/\s|\-|\(|\)/g, '');
if (number_stripped) {
if (!seen_uris.has(number_stripped)) {
//console.log(' ----> ', number['label'], number_stripped);
var contact_card = {id: uuid.v4(), displayName:
name, remoteParty: number_stripped,
type: 'contact',
photo: photo,
label: number['label'],
tags: ['contact']};
contact_cards.push(contact_card);
seen_uris.set(number_stripped, true);
var contact_card = {id: uuid.v4(),
displayName: name,
remoteParty: number_stripped,
type: 'contact',
photo: photo,
label: number['label'],
tags: ['contact']
};
}
}
});
contact['emailAddresses'].forEach(function (email, index) {
let email_stripped = email['email'].replace(/\s|\(|\)/g, '');
if (!seen_uris.has(email_stripped)) {
//console.log(name, email['label'], email_stripped);
//console.log(' ----> ', email['label'], email_stripped);
var contact_card = {id: uuid.v4(),
displayName: name,
remoteParty: email_stripped,
type: 'contact',
photo: photo,
label: email['label'],
tags: ['contact']
};
contact_cards.push(contact_card);
seen_uris.set(email_stripped, true);
}
});
}
this.contacts = contact_cards;
if (this.state.myPhoneNumber) {
var myContact = this.findObjectByKey(contact_cards, 'remoteParty', this.state.myPhoneNumber);
if (myContact) {
this.setState({myDisplayName: myContact.displayName});
}
}
}
})
}
get _notificationCenter() {
// getter to lazy-load the NotificationCenter ref
if (!this.__notificationCenter) {
this.__notificationCenter = this.refs.notificationCenter;
}
return this.__notificationCenter;
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
_detectOrientation() {
if(this.state.Width_Layout > this.state.Height_Layout && this.state.orientation !== 'landscape') {
this.setState({orientation: 'landscape'});
} else {
this.setState({orientation: 'portrait'});
}
}
changeRoute(route) {
if (this.currentRoute === route) {
return;
}
utils.timestampedLog('Change route:', this.currentRoute, '->', route);
this.currentRoute = route;
history.push(route);
}
async componentDidMount() {
this._loaded = true;
try {
await RNCallKeep.hasPhoneAccount();
} catch(err) {
utils.timestampedLog(err);
}
if (Platform.OS === 'android') {
RNDrawOverlay.askForDispalayOverOtherAppsPermission()
.then(res => {
utils.timestampedLog("Display over other apps was granted");
// res will be true if permission was granted
})
.catch(e => {
utils.timestampedLog("Display over other apps was declined");
// permission was declined
})
}
this.changeRoute('/login');
// prime the ref
//logger.debug('NotificationCenter ref: %o', this._notificationCenter);
this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this);
this._boundOnPushRegistered = this._onPushRegistered.bind(this);
if (Platform.OS === 'android') {
Linking.getInitialURL().then((url) => {
if (url) {
utils.timestampedLog('Initial Linking URL: ' + url);
this.incomingCallFromUrl(url);
}
}).catch(err => {
logger.error({ err }, 'Error getting initial URL');
});
firebase.messaging().getToken()
.then(fcmToken => {
if (fcmToken) {
this._onPushRegistered(fcmToken);
}
});
Linking.addEventListener('url', this.updateLinkingURL);
} else if (Platform.OS === 'ios') {
VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered);
VoipPushNotification.registerVoipToken();
PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered);
//let permissions = await checkIosPermissions();
//if (!permissions.alert) {
PushNotificationIOS.requestPermissions();
//}
}
this.boundProximityDetect = this._proximityDetect.bind(this);
DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect);
AppState.addEventListener('change', this._handleAppStateChange);
if (Platform.OS === 'ios') {
this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this);
this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this);
VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground);
VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground);
} else if (Platform.OS === 'android') {
firebase
.messaging()
.requestPermission()
.then(() => {
// User has authorised
})
.catch(error => {
// User has rejected permissions
});
this.messageListener = firebase
.messaging()
.onMessage((message: RemoteMessage) => {
// this will just wake up the app to receive
// the web-socket invite handled by this.incomingCall()
let event = message.data.event;
utils.timestampedLog('Handle Firebase', event, 'push notification for', message.data['session-id']);
if (event === 'incoming_conference_request') {
this.incomingConference(message.data['session-id'], message.data['to_uri'], message.data['from_uri']);
} else if (event === 'incoming_session') {
this.incomingCallFromPush(message.data['session-id'], message.data['from_uri']);
} else if (event === 'cancel') {
this.cancelIncomingCall(message.data['session-id']);
}
});
}
this._detectOrientation();
getPhoneNumber().then(phoneNumber => {
this.setState({myPhoneNumber: phoneNumber});
this.loadContacts();
});
}
cancelIncomingCall(callUUID) {
this._callKeepManager.endCall(callUUID, 6);
}
_proximityDetect(data) {
return;
if (data.isNear) {
this.speakerphoneOff();
} else {
this.speakerphoneOn();
}
}
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.incomingCallFromUrl(event.url);
}
startCallWhenReady(targetUri, options) {
utils.timestampedLog('Start call when ready to', targetUri);
if (options.conference) {
this.startConference(targetUri, options);
} else {
this.startCall(targetUri, options);
}
}
_sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
_onPushkitRegistered(token) {
utils.timestampedLog('Set VoIP pushkit token', token);
this.pushkittoken = token;
}
_onPushRegistered(token) {
utils.timestampedLog('Set background push token', token);
this.pushtoken = token;
}
_sendPushToken() {
if (this.state.account && this.pushtoken) {
let token = null;
if (Platform.OS === 'ios') {
token = `${this.pushkittoken}#${this.pushtoken}`;
} else if (Platform.OS === 'android') {
token = this.pushtoken;
}
utils.timestampedLog('Push token', token, 'sent to server');
this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId);
}
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = nextAppState => {
//TODO - stop if we havent been backgrounded because of becoming active from a push notification and then going background again
// if (nextAppState.match(/background/)) {
// logger.debug('app moving to background so we should stop the client sylk client if we dont have an active call');
// if (this._callKeepManager.count === 0) {
// logger.debug('callmanager count is 0 so closing connection');
// this.state.connection.close();
// }
// }
if (nextAppState === 'active') {
if (this._callKeepManager.count === 0 && this.state.connection) {
this.state.connection.reconnect();
}
}
}
startCallFromCallKeeper(data) {
// like from native iOS history
utils.timestampedLog("CallKeep started call from outside the app to", data.handle);
// we dont have options in the tmp var, which means this likely came from the native dialer
// for now, we only do audio calls from the native dialer.
let callUUID = data.callUUID || uuid.v4();
let is_conf = data.handle.search('videoconference.') === -1 ? false: true;
if (is_conf) {
this.callKeepStartConference(data.handle, {audio: true, video: true, callUUID: callUUID});
} else {
this.callKeepStartCall(data.handle, {audio: true, video: false, callUUID: callUUID});
}
this._notificationCenter.removeNotification();
}
connectionStateChanged(oldState, newState) {
utils.timestampedLog('Web socket state changed:', oldState, '->' , newState);
switch (newState) {
case 'closed':
this.setState({connection: null, loading: null});
//this._notificationCenter.postSystemNotification('Connection failed', {body: '', timeout: 3000});
break;
case 'ready':
this._notificationCenter.removeNotification();
//this._notificationCenter.postSystemNotification('Connection OK', {body: '', timeout: 1});
this.processRegistration(this.state.accountId, this.state.password, this.state.displayName);
break;
case 'disconnected':
if (this.state.localMedia) {
sylkrtc.utils.closeMediaStream(this.state.localMedia);
}
if (this.state.currentCall) {
this.hangupCall(this.state.currentCall._callkeepUUID, 'connection_failed');
}
if (this.state.inboundCall) {
this.hangupCall(this.state.inboundCall._callkeepUUID, 'connection_failed');
}
this.setState({
registrationState: 'failed',
generatedVideoTrack: false,
});
//this._notificationCenter.postSystemNotification('Connection lost', {body: '', timeout: 3000});
break;
default:
if (this.state.registrationKeepalive !== true) {
this.setState({loading: 'Connecting...'});
}
break;
}
}
notificationCenter() {
return this._notificationCenter;
}
showRegisterFailure(reason) {
logger.debug('Registration error: ' + reason);
this.setState({
loading : null,
registrationState: 'failed',
status : {
msg : 'Sign In failed: ' + reason,
level : 'danger'
}
});
}
registrationStateChanged(oldState, newState, data) {
utils.timestampedLog('Registration state changed:', oldState, '->', newState);
if (newState === 'failed') {
this._callKeepManager.setAvailable(false);
let reason = data.reason;
if (reason.match(/904|408/)) {
// Sofia SIP: WAT
reason = 'Wrong account or password';
}
this.showRegisterFailure(reason);
if (this.state.registrationKeepalive === true) {
if (this.state.connection !== null) {
utils.timestampedLog('Retry to register...');
//this.setState({loading: 'Register...'});
this._notificationCenter.postSystemNotification('Registering', {body: 'now', timeout: 10000});
this.state.account.register();
} else {
// add a timer to retry register after awhile
utils.timestampedLog('Retry to register after a delay...');
setTimeout(this.state.account.register(), 5000);
}
}
} else if (newState === 'registered') {
if (this.registrationFailureTimer) {
clearTimeout(this.registrationFailureTimer);
this.registrationFailureTimer = null;
}
this._callKeepManager.setAvailable(true);
this.setState({loading: null, registrationKeepalive: true, registrationState: 'registered'});
//if (!this.state.currentCall) {
if (this.currentRoute === '/login') {
this.changeRoute('/ready');
}
//this._notificationCenter.postSystemNotification('Ready to receive calls', {body: '', timeout: 1});
return;
} else {
this.setState({status: null, registrationState: newState });
this._callKeepManager.setAvailable(false);
}
}
showCalls(prefix) {
if (this.state.currentCall) {
utils.timestampedLog('Current calls', prefix, 'currentCall:', this.state.currentCall ? (this.state.currentCall._callkeepUUID + ' ' + this.state.currentCall.direction): 'None');
}
if (this.state.inboundCall) {
utils.timestampedLog('Current calls', prefix, 'inboundCall:', this.state.inboundCall ? (this.state.inboundCall._callkeepUUID + ' ' + this.state.inboundCall.direction): 'None');
}
if (this._callKeepManager.callUUIDS.length > 0) {
utils.timestampedLog('Current calls', prefix, 'callkeep sessions:', this._callKeepManager.callUUIDS);
}
}
callStateChanged(oldState, newState, data) {
// outgoing accepted: null -> progress -> accepted -> established -> terminated
// incoming accepted: null -> incoming -> accepted -> established -> terminated
// 2nd incoming call is automatically rejected by sylkrtc library
//this.showCalls('Begin callStateChanged');
let call = this._callKeepManager._calls.get(data.id);
if (!call) {
utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager');
return;
}
let callUUID = call._callkeepUUID;
utils.timestampedLog(call.direction, 'call', callUUID, 'state change:', oldState, '->', newState);
let newCurrentCall;
let newInboundCall;
let direction = call.direction;
- let goToReady = call.direction.direction === 'incoming' ? true : false;
+ let goToReady = direction === 'incoming' ? true : false;
if (this.state.inboundCall && this.state.currentCall) {
if (this.state.inboundCall != this.state.currentCall) {
utils.timestampedLog('We have two calls');
}
if (newState === 'terminated') {
if (this.state.inboundCall == this.state.currentCall) {
newCurrentCall = null;
newInboundCall = null;
} else {
if (oldState === 'incoming') {
utils.timestampedLog('Call state changed:', 'We have two calls, new call must be cancelled');
// new call must be cancelled
newInboundCall = null;
newCurrentCall = this.state.currentCall;
} else if (oldState === 'established') {
utils.timestampedLog('Call state changed:', 'Old call must be closed');
// old call must be closed
newCurrentCall = null;
newInboundCall = null;
} else {
utils.timestampedLog('Call state changed:', 'Error: unclear call combination')
}
}
} else if (newState === 'accepted') {
if (this.state.inboundCall == this.state.currentCall) {
newCurrentCall = this.state.inboundCall;
newInboundCall = this.state.inboundCall;
} else {
utils.timestampedLog('Call state changed:', 'Error: we have two different calls and unhandled state transition');
}
} else if (newState === 'established') {
if (this.state.inboundCall == this.state.currentCall) {
newCurrentCall = this.state.inboundCall;
newInboundCall = this.state.inboundCall;
} else {
utils.timestampedLog('Call state changed:', 'Error: we have two different calls and unhandled state transition');
}
} else {
utils.timestampedLog('Call state changed:', 'We have two calls and unhandled state');
}
} else if (this.state.inboundCall) {
if (oldState === 'incoming' && newState === 'terminated') {
utils.timestampedLog("Incoming call was cancelled");
this.setState({showIncomingModal: false});
newInboundCall = null;
newCurrentCall = null;
} else if (oldState === 'incoming' && newState === 'accepted') {
utils.timestampedLog("Incoming call is accepted");
newCurrentCall = this.state.inboundCall;
newInboundCall = this.state.inboundCall;
this.setState({showIncomingModal: false});
} else if (oldState === 'established' && newState === 'terminated') {
// old call was hangup to accept a new incoming calls
newCurrentCall = null;
newInboundCall = this.state.inboundCall;
} else {
utils.timestampedLog('Call state changed:', 'we have one inbound call and unhandled state');
}
} else {
newCurrentCall = newState === 'terminated' ? null : this.state.currentCall;
newInboundCall = null;
}
switch (newState) {
case 'progress':
- utils.timestampedLog('Play ringback tone');
+ //utils.timestampedLog('Play ringback tone');
InCallManager.startRingback('_BUNDLE_');
+ this.setState({
+ currentCall: newCurrentCall,
+ inboundCall: newInboundCall
+ });
break;
case 'established':
+ this.setState({
+ currentCall: newCurrentCall,
+ inboundCall: newInboundCall
+ });
case 'accepted':
this._callKeepManager.backToForeground();
this._callKeepManager.setCurrentCallActive(callUUID);
if (this.state.isConference) {
// allow ringtone to play once as connection is too fast
setTimeout(() => {InCallManager.stopRingback();}, 1500);
} else {
utils.timestampedLog('Stop ringback tone');
InCallManager.stopRingback();
}
if (this.state.isConference) {
//this._callKeepManager.backToForeground();
this.speakerphoneOn();
} else if (this.state.currentCall && this.state.currentCall.remoteMediaDirections) {
const videoTracks = this.state.currentCall.remoteMediaDirections.video;
if (videoTracks && videoTracks.length > 0) {
utils.timestampedLog('Call state changed:', 'Video call started')
//this._callKeepManager.backToForeground();
this.speakerphoneOn();
}
} else {
this.speakerphoneOff();
}
+ this.setState({
+ currentCall: newCurrentCall,
+ inboundCall: newInboundCall
+ });
break;
case 'terminated':
let callSuccesfull = false;
let reason = data.reason;
let play_busy_tone = true;
let CALLKEEP_REASON;
utils.timestampedLog('Call state changed:', 'call', callUUID, 'terminated reason:', reason);
if (!reason || reason.match(/200/)) {
if (oldState == 'progress') {
reason = 'Cancelled';
play_busy_tone = false;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
} else {
reason = 'Hangup';
callSuccesfull = true;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
}
goToReady = true;
} else if (reason.match(/403/)) {
reason = 'This domain is not served here';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
goToReady = true;
} else if (reason.match(/404/)) {
reason = 'User not found';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
goToReady = true;
} else if (reason.match(/408/)) {
reason = 'Timeout';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
goToReady = true;
} else if (reason.match(/480/)) {
reason = 'User not online';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
goToReady = true;
} else if (reason.match(/486/) || reason.match(/60[036]/)) {
reason = 'Busy';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
goToReady = true;
} else if (reason.match(/487/)) {
reason = 'Cancelled';
play_busy_tone = false;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.MISSED;
goToReady = true;
} else if (reason.match(/488/)) {
reason = 'Unacceptable media';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
goToReady = true;
} else if (reason.match(/5\d\d/)) {
reason = 'Server failure';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
goToReady = true;
} else if (reason.match(/904/)) {
// Sofia SIP: WAT
reason = 'Wrong account or password';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
goToReady = true;
} else {
reason = 'Connection failed';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
}
utils.timestampedLog('Call', callUUID, 'ended:', reason);
this._callKeepManager.endCall(callUUID, CALLKEEP_REASON);
if (this.state.currentCall === null) {
utils.timestampedLog('Call state changed:', 'Turn off speakerphone');
this.speakerphoneOff();
}
if (play_busy_tone && oldState !== 'established') {
this._notificationCenter.postSystemNotification('Call ended:', {body: reason, timeout: callSuccesfull ? 5 : 10});
}
this.setFocusEvents(false);
if (newCurrentCall) {
// we had an old active call that must be revived
this._callKeepManager.setCurrentCallActive(newCurrentCall._callkeepUUID);
}
if (!newCurrentCall && !newInboundCall) {
if (play_busy_tone) {
this.playBusyTone();
} else {
utils.timestampedLog('Stop InCall manager');
InCallManager.stop();
}
this.participantsToInvite = null;
if (goToReady) {
setTimeout(() => {
+ this.setState({
+ localMedia: null,
+ currentCall: newCurrentCall,
+ inboundCall: newInboundCall
+ });
this.changeRoute('/ready');
}, 4000);
}
setTimeout(() => {
this.setState({refreshHistory: !this.state.refreshHistory});
}, 2000);
}
this.updateHistoryEntry(callUUID);
break;
default:
break;
}
+// console.log('newCurrentCall', newCurrentCall);
+// console.log('inboundCall', newInboundCall);
+/*
this.setState({
currentCall: newCurrentCall,
inboundCall: newInboundCall
});
+*/
}
handleCallByUri(displayName, targetUri) {
const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`;
this.setState({
accountId : accountId,
password : '',
displayName : displayName,
//mode : MODE_GUEST_CALL,
targetUri : utils.normalizeUri(targetUri, config.defaultDomain),
loading : 'Connecting...'
});
if (this.state.connection === null) {
let connection = sylkrtc.createConnection({server: config.wsServer});
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
}
}
handleConferenceByUri(displayName, targetUri) {
const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`;
this.setState({
accountId : accountId,
password : '',
displayName : displayName,
//mode : MODE_GUEST_CONFERENCE,
targetUri : targetUri,
loading : 'Connecting...'
});
if (this.state.connection === null) {
let connection = sylkrtc.createConnection({server: config.wsServer});
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
}
}
handleRegistration(accountId, password, remember) {
this.setState({
accountId : accountId,
password : password,
mode : remember ? MODE_NORMAL : MODE_PRIVATE,
loading : 'Connecting...'
});
if (this.state.connection === null) {
const userAgent = 'Sylk Mobile';
console.log('User Agent:', userAgent);
if (this.state.phoneNumber) {
console.log('Phone number:', this.state.phoneNumber);
}
let connection = sylkrtc.createConnection({server: config.wsServer, userAgent: {name: userAgent, version: version}});
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
} else {
utils.timestampedLog('Websocket connection active, try to register');
this.processRegistration(accountId, password, '');
}
}
processRegistration(accountId, password, displayName) {
if (this.state.account !== null) {
logger.debug('We already have an account, removing it');
this.state.connection.removeAccount(this.state.account,
(error) => {
this.setState({registrationState: null, registrationKeepalive: false});
}
);
}
const options = {
account: accountId,
password: password,
displayName: displayName
};
this.registrationFailureTimer = setTimeout(this.showRegisterFailure, 6000, 'Wrong account or password');
const account = this.state.connection.addAccount(options, (error, account) => {
if (!error) {
account.on('outgoingCall', this.outgoingCall);
account.on('conferenceCall', this.outgoingCall);
switch (this.state.mode) {
case MODE_PRIVATE:
case MODE_NORMAL:
account.on('registrationStateChanged', this.registrationStateChanged);
account.on('incomingCall', this.incomingCallFromWebSocket);
account.on('missedCall', this.missedCall);
account.on('conferenceInvite', this.conferenceInviteFromWebSocket);
this.setState({account: account});
this._sendPushToken();
account.register();
logger.debug(this.state.mode);
if (this.state.mode !== MODE_PRIVATE) {
storage.set('account', {
accountId: this.state.accountId,
password: this.state.password
});
} else {
// Wipe storage if private login
//storage.remove('account'); // lets try this out
// history.clear().then(() => {
// this.setState({history: []});
// });
}
break;
case MODE_GUEST_CALL:
this.setState({account: account, loading: null, registrationState: 'registered'});
logger.debug(`${accountId} (guest) signed in`);
// Start the call immediately, this is call started with "Call by URI"
this.startGuestCall(this.state.targetUri, {audio: true, video: true});
break;
case MODE_GUEST_CONFERENCE:
this.setState({account: account, loading: null, registrationState: 'registered'});
logger.debug(`${accountId} (conference guest) signed in`);
// Start the call immediately, this is call started with "Conference by URI"
this.startGuestConference(this.state.targetUri);
break;
default:
logger.debug(`Unknown mode: ${this.state.mode}`);
break;
}
} else {
this.showRegisterFailure(408);
}
});
}
setDevice(device) {
const oldDevices = Object.assign({}, this.state.devices);
if (device.kind === 'videoinput') {
oldDevices['camera'] = device;
} else if (device.kind === 'audioinput') {
oldDevices['mic'] = device;
}
this.setState({devices: oldDevices});
storage.set('devices', oldDevices);
sylkrtc.utils.closeMediaStream(this.state.localMedia);
this.getLocalMedia();
}
getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) { // eslint-disable-line space-infix-ops
let callType = mediaConstraints.video ? 'video': 'audio';
utils.timestampedLog('Get local media for', callType, 'call, next route', nextRoute);
const constraints = Object.assign({}, mediaConstraints);
if (constraints.video === true) {
if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE)) {
constraints.video = {
'width': {
'ideal': 1280
},
'height': {
'ideal': 720
}
};
// TODO: remove this, workaround so at least safari works when joining a video conference
} else if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE) && isSafari) {
constraints.video = false;
} else {
// ask for 720p video
constraints.video = {
'width': {
'ideal': 1280
},
'height': {
'ideal': 720
}
};
}
}
logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints);
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
devices.forEach((device) => {
//console.log(device);
if ('video' in constraints && 'camera' in this.state.devices) {
if (constraints.video && constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) {
constraints.video.deviceId = {
exact: device.deviceId
};
}
}
if ('mic' in this.state.devices) {
if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) {
// constraints.audio = {
// deviceId: {
// exact: device.deviceId
// }
// };
}
}
});
})
.catch((error) => {
utils.timestampedLog('Error: device enumeration failed:', error);
})
.then(() => {
return navigator.mediaDevices.getUserMedia(constraints)
})
.then((localStream) => {
clearTimeout(this.loadScreenTimer);
utils.timestampedLog('Got local media done, next route is', nextRoute);
this.setState({status: null, loading: null, localMedia: localStream});
if (nextRoute !== null) {
this.changeRoute(nextRoute);
}
})
.catch((error) => {
utils.timestampedLog('Access to local media failed, trying audio only', error);
navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
.then((localStream) => {
clearTimeout(this.loadScreenTimer);
/*
logger.debug('Audio only media, but video was requested, creating generated video track');
const generatedVideoTrack = utils.generateVideoTrack(localStream);
localStream.addTrack(generatedVideoTrack);
utils.timestampedLog('Next route', nextRoute);
this.setState({status: null, loading: null, localMedia: localStream, generatedVideoTrack: true});
*/
if (nextRoute !== null) {
this.changeRoute(nextRoute);
}
})
.catch((error) => {
utils.timestampedLog('Access to local media failed:', error);
clearTimeout(this.loadScreenTimer);
this._notificationCenter.postSystemNotification("Can't access camera or microphone", {timeout: 10});
this.setState({
loading: null
});
this.changeRoute('/ready');
});
});
}
callKeepStartConference(targetUri, options={audio: true, video: true}) {
let callUUID = options.callUUID || uuid.v4();
this.addHistoryEntry(targetUri, callUUID);
this.setState({outgoingCallUUID: callUUID, outgoingMedia: options, reconnectingCall: false});
utils.timestampedLog('CallKeep will start conference', callUUID, 'to', targetUri);
this._callKeepManager.backToForeground();
this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: callUUID});
}
callKeepStartCall(targetUri, options) {
let callUUID = options.callUUID || uuid.v4();
this.setState({outgoingCallUUID: callUUID, reconnectingCall: false});
utils.timestampedLog('CallKeep will start call', callUUID, 'to', targetUri);
this._callKeepManager.backToForeground();
this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: callUUID});
}
startCall(targetUri, options) {
utils.timestampedLog('startCall', targetUri);
this.setState({targetUri: targetUri});
//this.addHistoryEntry(targetUri);
this.getLocalMedia(Object.assign({audio: true, video: true}, options), '/call');
}
callKeepAcceptCall(callUUID, options) {
// called from user interaction with Old alert panel
// options used to be media to accept audio only but native panels do not have this feature
utils.timestampedLog('CallKeep answer call', callUUID);
this._callKeepManager.answerIncomingCall(callUUID);
this.acceptCall();
}
callKeepRejectCall(callUUID) {
// called from user interaction with Old alert panel
utils.timestampedLog('CallKeep must reject call', callUUID);
this._callKeepManager.rejectCall(callUUID);
this.rejectCall(callUUID);
}
acceptCall() {
utils.timestampedLog('Alert panel answer call');
//this.showCalls('acceptCall')
this.setFocusEvents(false);
if (this.state.currentCall) {
this.hangupCall(this.state.currentCall._callkeepUUID, 'accept_new_call');
this.setState({currentCall: null});
/*
if (this.state.localMedia != null) {
sylkrtc.utils.closeMediaStream(this.state.localMedia);
utils.timestampedLog('Sylkrtc close local media');
}
*/
}
this.setState({localMedia: null});
let hasVideo = (this.state.inboundCall && this.state.inboundCall.mediaTypes && this.state.inboundCall.mediaTypes.video) ? true : false;
this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call');
}
rejectCall(callUUID) {
// called by Call Keep when user rejects call
utils.timestampedLog('Alert panel reject call', callUUID);
if (!this.state.currentCall) {
this.changeRoute('/ready');
}
if (this.state.inboundCall && this.state.inboundCall._callkeepUUID === callUUID) {
this.state.inboundCall.terminate();
utils.timestampedLog('Sylkrtc reject call', callUUID);
}
this.forceUpdate();
}
timeoutCall(callUUID, uri) {
utils.timestampedLog('Timeout answering call', callUUID);
this.addHistoryEntry(uri, callUUID, direction='received');
this.forceUpdate();
}
hangupCall(callUUID, reason) {
utils.timestampedLog('Hangup call', callUUID, 'reason:', reason);
utils.timestampedLog('Stop ringback tone');
InCallManager.stopRingback();
let call = this._callKeepManager._calls.get(callUUID);
let direction = null;
let targetUri = null;
if (call) {
let direction = call.direction;
targetUri = call.remoteIdentity.uri;
call.terminate();
} else {
if (this.state.localMedia != null) {
sylkrtc.utils.closeMediaStream(this.state.localMedia);
utils.timestampedLog('Sylkrtc close media');
}
}
if (this.busyToneInterval) {
clearInterval(this.busyToneInterval);
this.busyToneInterval = null;
}
if (reason !== 'connection_failed') {
this.setState({reconnectingCall: false});
if (reason === 'user_cancelled' || reason === 'timeout') {
this.changeRoute('/ready');
this.setState({
refreshHistory: !this.state.refreshHistory,
currentCall: null,
localMedia: null
});
} else {
setTimeout(() => {
this.setState({localMedia: null});
this.changeRoute('/ready');
}, 4000);
}
} else {
this.setState({reconnectingCall: true});
utils.timestampedLog('Call', callUUID, 'failed due to connection');
}
}
playBusyTone() {
utils.timestampedLog('Play busy tone');
InCallManager.stop({busytone: '_BUNDLE_'});
}
callKeepSendDtmf(digits) {
utils.timestampedLog('Send DTMF', digits);
if (this.state.currentCall) {
this._callKeepManager.sendDTMF(this.state.currentCall._callkeepUUID, digits);
}
}
callKeepToggleMute(mute) {
utils.timestampedLog('Toggle mute %s', mute);
if (this.state.currentCall) {
this._callKeepManager.setMutedCall(this.state.currentCall._callkeepUUID, mute);
}
}
toggleSpeakerPhone() {
if (this.state.speakerPhoneEnabled === true) {
this.speakerphoneOff();
} else {
this.speakerphoneOn();
}
}
speakerphoneOn() {
utils.timestampedLog('Speakerphone On');
this.setState({speakerPhoneEnabled: true});
InCallManager.setForceSpeakerphoneOn(true);
}
speakerphoneOff() {
utils.timestampedLog('Speakerphone Off');
this.setState({speakerPhoneEnabled: false});
InCallManager.setForceSpeakerphoneOn(false);
}
startGuestConference(targetUri) {
this.setState({targetUri: targetUri});
this.getLocalMedia({audio: true, video: true});
}
toggleMute() {
this.muteIncoming = !this.muteIncoming;
}
outgoingCall(call) {
// called by sylrtc.js when an outgoig call or conference starts
const localStreams = call.getLocalStreams();
let mediaType = 'audio';
if (localStreams.length > 0) {
const localStream = call.getLocalStreams()[0];
mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio';
}
utils.timestampedLog('Outgoing', mediaType, 'call', call.id, 'started to', call.remoteIdentity.uri);
this._callKeepManager.handleOutgoingCall(call);
utils.timestampedLog('Start InCall manager:', mediaType);
InCallManager.start({media: mediaType});
call.on('stateChanged', this.callStateChanged);
this.setState({currentCall: call});
//this._callKeepManager.updateDisplay(call._callkeepUUID, call.remoteIdentity.displayName, call.remoteIdentity.uri);
}
_onLocalNotificationReceivedBackground(notification) {
let notificationContent = notification.getData();
utils.timestampedLog('Handle local iOS push notification: ', notificationContent);
}
_onNotificationReceivedBackground(notification) {
let notificationContent = notification.getData();
// get the uuid from the notification
// have we already got a waiting call in call manager? if we do, then its been "answered" and we're waiting for the invite
// we may still never get the invite if theres network issues... so still need a timeout
// no waiting call, so that means its still "ringing" (it may have been cancelled) so set a timer and if we havent recieved
// an invite within 10 seconds then clear it down
let event = notificationContent['event'];
let callUUID = notificationContent['session-id'];
utils.timestampedLog('Handle iOS', event, 'push notification for', callUUID);
logger.debug(notificationContent);
if (notificationContent['event'] === 'incoming_session') {
utils.timestampedLog('Incoming call for push mobile notification for call', callUUID);
this.incomingCallFromPush(callUUID, notificationContent['from_uri']);
if (VoipPushNotification.wakeupByPush) {
utils.timestampedLog('We wake up by a push notification');
VoipPushNotification.wakeupByPush = false;
}
VoipPushNotification.onVoipNotificationCompleted(callUUID);
} else if (notificationContent['event'] === 'incoming_conference_request') {
let callUUID = notificationContent['session-id'];
utils.timestampedLog('Incoming conference for push mobile notification for call', callUUID);
this.incomingConference(callUUID, notificationContent['to_uri'], notificationContent['from_uri']);
VoipPushNotification.onVoipNotificationCompleted(callUUID);
}
/*
if (notificationContent['event'] === 'incoming_session') {
VoipPushNotification.presentLocalNotification({
alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name']
});
}
*/
if (notificationContent['event'] === 'cancel') {
this.cancelIncomingCall(callUUID);
VoipPushNotification.presentLocalNotification({
alertBody:'Call cancelled'
});
}
if (VoipPushNotification.wakeupByPush) {
utils.timestampedLog('We wake up by push notification');
VoipPushNotification.wakeupByPush = false;
}
}
async incomingConference(callUUID, to_uri, from_uri) {
utils.timestampedLog('Handle incoming conference', callUUID, 'when ready');
var n = 0;
let wait_interval = 15;
while (n < wait_interval) {
if (!this.state.connection || this.state.connection.state !== 'ready' || this.state.account === null) {
utils.timestampedLog('Waiting for connection...');
this._notificationCenter.postSystemNotification('Waiting for connection...', {timeout: 1});
await this._sleep(1000);
} else {
utils.timestampedLog('Web socket is ready');
utils.timestampedLog('Using account', this.state.account.id);
// answer here
this._callKeepManager.handleConference(callUUID, to_uri, from_uri);
this.setFocusEvents(true);
return;
}
if (n === wait_interval - 1) {
utils.timestampedLog('Terminating call', callUUID, 'that did not start yet');
this._callKeepManager.endCall(callUUID, 6);
}
n++;
}
}
startConference(targetUri, options={audio: true, video: true}) {
utils.timestampedLog('New outgoing conference to room', targetUri);
this.setState({targetUri: targetUri, isConference: true});
this.getLocalMedia({audio: options.audio, video: options.video}, '/conference');
}
escalateToConference(participants) {
const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`;
utils.timestampedLog('Move current call to conference', uri, 'with participants', participants);
if (this.state.currentCall) {
this.hangupCall(this.state.currentCall._callkeepUUID, 'escalate_to_conference');
this.setState({currentCall: null});
}
if (this.state.inboundCall) {
this.hangupCall(this.state.inboundCall._callkeepUUID, 'escalate_to_conference');
this.setState({inboundCall: null});
}
this.setState({localMedia: null});
this.participantsToInvite = participants;
this.callKeepStartConference(uri);
}
conferenceInviteFromWebSocket(data) {
// comes from web socket
utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room);
//this._notificationCenter.postSystemNotification('Conference invite', {body: `From ${data.originator.displayName || data.originator.uri} for room ${data.room}`, timeout: 15, silent: false});
if (Platform.OS === 'android') {
this.incomingConference(data.id, data.room, data.originator.uri);
}
}
incomingCallFromPush(callUUID, from) {
utils.timestampedLog('Handle incoming push call', callUUID, 'from', from);
if (this.state.account && from === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri === from) {
utils.timestampedLog('Reject call to myself', callUUID);
this._callKeepManager.rejectCall(callUUID);
} else {
this._callKeepManager.incomingCallFromPush(callUUID);
}
}
incomingCallFromUrl(url) {
try {
var url_parts = url.split("/");
const direction = url_parts[2];
const event = url_parts[3];
const callUUID = url_parts[4];
- const from = url_parts[5];
+ const uri = url_parts[5];
const to = url_parts[6];
- utils.timestampedLog('Parsed URL:', direction, event, 'from', from, 'to', to);
- if (direction === 'outgoing' && event === 'conference') {
- this.incomingConference(callUUID, from, to);
- } else if (direction === 'incoming' && event === 'call') {
+ utils.timestampedLog('Parsed URL:', direction, event, 'from', uri, 'to', to);
+ if (direction === 'outgoing' && event === 'conference' && uri && to) {
+ this.incomingConference(callUUID, uri, to);
+ } else if (direction === 'incoming' && event === 'call' && uri) {
if (Platform.OS === 'android') {
this.setState({showIncomingModal: true});
} else {
- this.incomingCallFromPush(callUUID, from);
+ this.incomingCallFromPush(callUUID, uri);
}
- } else if (direction === 'outgoing' && event === 'call') {
+ } else if (direction === 'outgoing' && event === 'call' && uri) {
// from native dialer
- this.callKeepStartCall(to, {audio: true, video: false, callUUID: callUUID});
+ this.callKeepStartCall(uri, {audio: true, video: false, callUUID: callUUID});
} else {
utils.timestampedLog('Unclear URL structure');
}
} catch (err) {
utils.timestampedLog('Error parsing url', url, ":", err);
}
}
incomingCallFromWebSocket(call, mediaTypes) {
// this is called by the websocket invite
// because of limitation in Sofia stack, we cannot have more then two calls at a time
// we can have one outgoing call and one incoming call but not two incoming calls
// we cannot have two incoming calls, second one is automatically rejected by sylkrtc.js
if (call.remoteIdentity.uri === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri) {
utils.timestampedLog('Reject call to myself', call.id);
this._callKeepManager.rejectCall(call.id);
call.terminate();
return;
}
if (this.state.blockedUris && this.state.blockedUris.indexOf(call.remoteIdentity.uri) > -1) {
utils.timestampedLog('Reject call from blocked URI', call.remoteIdentity.uri);
this._callKeepManager.rejectCall(call.id);
call.terminate();
let from = call.remoteIdentity.displayName || call.remoteIdentity.uri;
this._notificationCenter.postSystemNotification('Call rejected', {body: `from ${from}`, timeout: 5000, silent: true});
return;
}
let mediaType = mediaTypes.video ? 'video' : 'audio';
call.mediaTypes = mediaTypes;
utils.timestampedLog('New', mediaType, 'incoming call from', call.remoteIdentity['_displayName'], call.remoteIdentity['_uri']);
call.on('stateChanged', this.callStateChanged);
this.setState({inboundCall: call});
utils.timestampedLog('Start InCall manager:', mediaType);
InCallManager.start({media: mediaType});
this._callKeepManager.incomingCallFromWebSocket(call);
this.setFocusEvents(true);
}
setFocusEvents(enabled) {
// if (this.shouldUseHashRouting) {
// const remote = window.require('electron').remote;
// if (enabled) {
// const currentWindow = remote.getCurrentWindow();
// currentWindow.on('focus', this.hasFocus);
// currentWindow.on('blur', this.hasNoFocus);
// this.setState({haveFocus: currentWindow.isFocused()});
// } else {
// const currentWindow = remote.getCurrentWindow();
// currentWindow.removeListener('focus', this.hasFocus);
// currentWindow.removeListener('blur', this.hasNoFocus);
// }
// }
}
// hasFocus() {
// this.setState({haveFocus: true});
// }
// hasNoFocus() {
// this.setState({haveFocus: false});
// }
missedCall(data) {
utils.timestampedLog('Missed call from ' + data.originator);
if (!this.state.currentCall) {
//utils.timestampedLog('Update snackbar');
let from = data.originator.display_name || data.originator.uri;
this._notificationCenter.postSystemNotification('Missed call', {body: `from ${from}`, timeout: 180, silent: false});
}
this.forceUpdate();
}
startPreview() {
this.getLocalMedia({audio: true, video: true}, '/preview');
}
updateHistoryEntry(callUUID) {
let newHistory = this.state.localHistory;
var historyItem = this.findObjectByKey(newHistory, 'sessionId', callUUID);
if (historyItem) {
let current_datetime = new Date();
let stopTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
historyItem.stopTime = stopTime;
var diff = current_datetime.getTime() - historyItem.startTimeObject.getTime();
historyItem.duration = parseInt(diff/1000);
delete historyItem['startTimeObject'];
if (this._historyConferenceParticipants.has(callUUID)) {
historyItem.participants = this._historyConferenceParticipants.get(callUUID);
} else {
historyItem.participants = [];
}
//console.log('Save history', historyItem);
this.setState({localHistory: newHistory});
storage.set('history', newHistory);
}
}
setFavoriteUri(uri) {
let favoriteUris = this.state.favoriteUris;
let idx = favoriteUris.indexOf(uri);
let ret;
console.log('idx', idx);
if (idx === -1) {
favoriteUris.push(uri);
ret = true;
} else {
let removed = favoriteUris.splice(idx, 1);
ret = false;
}
storage.set('favoriteUris', favoriteUris);
this.setState({favoriteUris: favoriteUris, refreshHistory: !this.state.refreshHistory});
return ret;
}
setBlockedUri(uri) {
let blockedUris = this.state.blockedUris;
console.log('Old blocked Uris:', blockedUris);
let ret;
let idx = blockedUris.indexOf(uri);
console.log('idx', idx);
if (idx === -1) {
blockedUris.push(uri);
ret = true;
} else {
let removed = blockedUris.splice(idx, 1);
console.log('Removed', removed);
ret = false;
}
console.log('New blocked Uris:', blockedUris);
storage.set('blockedUris', blockedUris);
this.setState({blockedUris: blockedUris, refreshHistory: !this.state.refreshHistory});
return ret;
}
saveParticipant(callUUID, room, uri) {
console.log('Save participant', uri, 'for conference', room);
if (this._historyConferenceParticipants.has(callUUID)) {
let old_participants = this._historyConferenceParticipants.get(callUUID);
if (old_participants.indexOf(uri) === -1) {
old_participants.push(uri);
}
} else {
let new_participants = [uri];
this._historyConferenceParticipants.set(callUUID, new_participants);
}
if (!this.myParticipants) {
this.myParticipants = new Object();
}
if (this.myParticipants.hasOwnProperty(room)) {
let old_uris = this.myParticipants[room];
if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
this.myParticipants[room].push(uri);
}
} else {
let new_uris = [];
if (uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
new_uris.push(uri);
}
if (new_uris) {
this.myParticipants[room] = new_uris;
}
}
storage.set('myParticipants', this.myParticipants);
}
saveInvitedParties(callUUID, room, uris) {
if (!this.myInvitedParties) {
this.myInvitedParties = new Object();
}
if (this.myInvitedParties.hasOwnProperty(room)) {
let old_uris = this.myInvitedParties[room];
uris.forEach((uri) => {
if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
this.myInvitedParties[room].push(uri);
}
});
} else {
let new_uris = [];
uris.forEach((uri) => {
if (uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
new_uris.push(uri);
}
});
if (new_uris) {
this.myInvitedParties[room] = new_uris;
}
}
storage.set('myInvitedParties', this.myInvitedParties);
}
deleteHistoryEntry(uri) {
let history = this.state.localHistory;
for (var i = history.length - 1; i >= 0; --i) {
if (history[i].remoteParty === uri) {
history.splice(i,1);
}
}
storage.set('history', history);
this.setState({localHistory: history,
refreshHistory: !this.state.refreshHistory});
}
addHistoryEntry(uri, callUUID, direction='placed') {
if (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE) {
let current_datetime = new Date();
let startTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
let item = {
remoteParty: uri,
direction: direction,
type: 'history',
conference: true,
media: ['audio', 'video'],
displayName: 'Conference ' + uri.split('@')[0],
sessionId: callUUID,
startTime: startTime,
stopTime: startTime,
startTimeObject: current_datetime,
duration: 0,
tags: ['history', 'local']
};
const historyItem = Object.assign({}, item);
console.log('Added history item', historyItem);
let newHistory = this.state.localHistory;
newHistory.push(historyItem);
this.setState({localHistory: newHistory});
storage.set('history', newHistory);
}
}
// checkRoute(nextPath, navigation, match) {
// if (nextPath !== this.prevPath) {
// logger.debug(`Transition from ${this.prevPath} to ${nextPath}`);
//
// // Press back in ready after a login, prevent initial navigation
// // don't deny if there is no registrationState (connection fail)
// if (this.prevPath === '/ready' && nextPath === '/login' && this.state.registrationState !== null) {
// logger.debug('Transition denied redirecting to /logout');
// this.changeRoute('/logout');
// return false;
// // Press back in ready after a call
// } else if ((nextPath === '/call' || nextPath === '/conference') && this.state.localMedia === null && this.state.registrationState === 'registered') {
// return false;
// // Press back from within a call/conference, don't navigate terminate the call and
// // let termination take care of navigating
// } else if (nextPath === '/ready' && this.state.registrationState === 'registered' && this.state.currentCall !== null) {
// this.state.currentCall.terminate();
// return false;
// // Guest call ended, needed to logout and display msg and logout
// } else if (nextPath === '/ready' && (this.state.mode === MODE_GUEST_CALL || this.state.mode === MODE_GUEST_CONFERENCE)) {
// this.changeRoute('/logout');
// this.forceUpdate();
// }
// }
// this.prevPath = nextPath;
// }
render() {
//utils.timestampedLog('Render main app');
let footerBox = ;
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);
}
ready() {
return (
);
}
preview() {
return (
);
}
call() {
return (
+
)
}
callByUri(urlParameters) {
// check if the uri contains a domain
if (urlParameters.targetUri.indexOf('@') === -1) {
const status = {
title : 'Invalid user',
message : `Oops, the domain of the user is not set in '${urlParameters.targetUri}'`,
level : 'danger',
width : 'large'
}
return (
);
}
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(config.defaultDomain) > -1) {
let user = uri.split('@')[0];
_previousParticipants.add(user);
} else {
_previousParticipants.add(uri);
}
});
}
}
}
if (this.myInvitedParties) {
let room = this.state.targetUri.split('@')[0];
if (this.myInvitedParties.hasOwnProperty(room)) {
let uris = this.myInvitedParties[room];
if (uris) {
uris.forEach((uri) => {
if (uri.search(config.defaultDomain) > -1) {
let user = uri.split('@')[0];
_previousParticipants.add(user);
} else {
_previousParticipants.add(uri);
}
});
}
}
}
let previousParticipants = Array.from(_previousParticipants);
return (
)
}
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;
if (this.state.status !== null) {
statusBox = (
);
}
if (this.state.registrationState !== 'registered') {
registerBox = (
);
}
return (
{registerBox}
{statusBox}
);
}
logout() {
this._callKeepManager.setAvailable(false);
if (this.state.registrationState !== null && (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE)) {
this.state.account.unregister();
}
if (this.state.account !== null) {
this.state.connection.removeAccount(this.state.account, (error) => {
if (error) {
logger.debug(error);
}
});
}
storage.set('account', {accountId: this.state.accountId, password: ''});
this.serverHistory = [];
this.setState({account: null,
registrationState: null,
registrationKeepalive: false,
status: null,
history: [],
localHistory: [],
cachedHistory: []
});
this.changeRoute('/login');
return null;
}
main() {
return null;
}
}
export default Sylk;
diff --git a/app/components/Call.js b/app/components/Call.js
index de369cd..7f67fa0 100644
--- a/app/components/Call.js
+++ b/app/components/Call.js
@@ -1,382 +1,395 @@
import React, { Component } from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import assert from 'assert';
import debug from 'react-native-debug';
import autoBind from 'auto-bind';
import uuid from 'react-native-uuid';
import Logger from "../../Logger";
import AudioCallBox from './AudioCallBox';
import LocalMedia from './LocalMedia';
import VideoBox from './VideoBox';
import config from '../config';
import utils from '../utils';
const logger = new Logger("Call");
class Call extends Component {
constructor(props) {
super(props);
autoBind(this);
this.waitCounter = 0;
this.waitInterval = 20;
let audioOnly = false;
if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) {
//logger.debug('Will send audio only');
audioOnly = true;
}
let remoteUri = '';
let remoteDisplayName = '';
let callState = null;
let direction = 'outgoing';
let callUUID;
if (this.props.call !== null) {
// If current call is available on mount we must have incoming
this.props.call.on('stateChanged', this.callStateChanged);
callState = this.props.call.state;
remoteUri = this.props.call.remoteIdentity.uri;
direction = this.props.call.direction;
callUUID = this.props.call.id;
remoteDisplayName = this.props.call.remoteIdentity.displayName;
} else {
remoteUri = this.props.targetUri;
remoteDisplayName = this.props.targetUri;
callUUID = this.props.callUUID;
}
if (this.props.connection) {
this.props.connection.on('stateChanged', this.connectionStateChanged);
}
this.state = {
audioOnly: audioOnly,
remoteUri: remoteUri,
remoteDisplayName: remoteDisplayName,
connection: this.props.connection,
- accountId: this.props.account.id,
+ accountId: this.props.account ? this.props.account.id : null,
callState: callState,
direction: direction,
callUUID: callUUID
}
}
lookupContact() {
let remoteUri = '';
let remoteDisplayName = '';
if (this.props.call !== null) {
remoteUri = this.props.call.remoteIdentity.uri;
remoteDisplayName = this.props.call.remoteIdentity.displayName || this.props.call.remoteIdentity.uri;
//console.log('Incoming call remoteUri', remoteUri);
//console.log('Incoming call remoteDisplayName', remoteDisplayName);
} else {
remoteUri = this.props.targetUri;
remoteDisplayName = this.props.targetUri;
}
if (remoteUri.indexOf('3333@') > -1) {
remoteDisplayName = 'Video Test';
} else if (remoteUri.indexOf('4444@') > -1) {
remoteDisplayName = 'Echo Test';
} else if (this.props.contacts) {
let username = remoteUri.split('@')[0];
let isPhoneNumber = username.match(/^(\+|0)(\d+)$/);
if (isPhoneNumber) {
var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username);
} else {
var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', remoteUri);
}
if (contact_obj) {
remoteDisplayName = contact_obj.displayName;
this.setState({remoteDisplayName: remoteDisplayName});
if (isPhoneNumber) {
remoteUri = username;
}
} else {
if (isPhoneNumber) {
remoteUri = username;
remoteDisplayName = username;
}
}
}
this.setState({remoteDisplayName: remoteDisplayName,
remoteUri: remoteUri,
reconnectingCall: false
});
}
//getDerivedStateFromProps(nextProps, state) {
UNSAFE_componentWillReceiveProps(nextProps) {
// Needed for switching to incoming call while in a call
if (this.props.call != null && this.props.call != nextProps.currentCall) {
if (nextProps.currentCall != null) {
nextProps.currentCall.on('stateChanged', this.callStateChanged);
}
}
this.setState({reconnectingCall: nextProps.reconnectingCall});
}
callStateChanged(oldState, newState, data) {
//console.log('Call: callStateChanged', oldState, '->', newState);
if (newState === 'established') {
// Check the media type again, remote can choose to not accept all offered media types
const currentCall = this.props.call;
const remoteHasStreams = currentCall.getRemoteStreams().length > 0;
const remoteHasNoVideoTracks = currentCall.getRemoteStreams()[0].getVideoTracks().length === 0;
const remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly';
const remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive';
if (remoteHasStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) {
//console.log('Media type changed to audio');
// Stop local video
if (this.props.localMedia.getVideoTracks().length !== 0) {
currentCall.getLocalStreams()[0].getVideoTracks()[0].stop();
}
this.setState({audioOnly: true});
this.props.speakerphoneOff();
} else {
this.forceUpdate();
}
currentCall.removeListener('stateChanged', this.callStateChanged);
// Switch to video earlier. The callOverlay has a handle on
// 'established'. It starts a timer. To prevent a state updating on
// unmounted component we try to switch on 'accept'. This means we get
// to localMedia first.
} else if (newState === 'accepted') {
// Switch if we have audioOnly and local videotracks. This means
// the call object switched and we are transitioning to an
// incoming call.
if (this.state.audioOnly && this.props.localMedia && this.props.localMedia.getVideoTracks().length !== 0) {
//console.log('Media type changed to video on accepted');
this.setState({audioOnly: false});
this.props.speakerphoneOn();
}
}
this.forceUpdate();
}
connectionStateChanged(oldState, newState) {
utils.timestampedLog('Call: connection state changed:', oldState, '->' , newState);
switch (newState) {
case 'closed':
break;
case 'ready':
break;
case 'disconnected':
let callUUID = uuid.v4();
this.setState({callUUID: callUUID});
if (oldState === 'ready' && this.state.direction === 'outgoing') {
utils.timestampedLog('Call: reconnecting the call using new UUID', callUUID);
this.waitInterval = 20;
this.startCallWhenReady();
}
break;
default:
break;
}
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
async startCallWhenReady() {
+ if (!this.props.callUUID || !this.props.targetUri) {
+ return;
+ }
utils.timestampedLog('Call: start call', this.props.callUUID, 'when ready to', this.props.targetUri);
this.waitCounter = 0;
utils.timestampedLog('Call: waiting for establishing call', this.waitInterval, 'seconds');
let diff = 0;
while (this.waitCounter < this.waitInterval) {
if (!this.props.connection || this.props.connection.state !== 'ready' || this.props.account === null) {
utils.timestampedLog('Call: waiting for connection', this.waitInterval - this.waitCounter, 'seconds');
await this._sleep(1000);
} else {
this.waitCounter = 0;
this.call();
return;
}
if (this.waitCounter >= this.waitInterval - 1) {
utils.timestampedLog('Call: terminating call', this.props.callUUID, 'that did not start yet');
this.hangupCall('timeout');
}
this.waitCounter++;
}
}
_sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
call() {
//console.log('Call: creating new call', this.props.callUUID);
assert(this.props.call === null, 'currentCall is not null');
this.lookupContact();
let options = {pcConfig: {iceServers: config.iceServers}, id: this.props.callUUID};
options.localStream = this.props.localMedia;
let call = this.props.account.call(this.props.targetUri, options);
console.log('Call: call initiated', call.id);
call.on('stateChanged', this.callStateChanged);
}
answerCall() {
//console.log('Call: Answer call');
- assert(this.props.call !== null, 'currentCall is null');
-
- this.lookupContact();
-
- let options = {pcConfig: {iceServers: config.iceServers}};
- options.localStream = this.props.localMedia;
- this.props.call.answer(options);
+ if (this.props.call && this.props.call.state === 'incoming') {
+ this.lookupContact();
+ let options = {pcConfig: {iceServers: config.iceServers}};
+ options.localStream = this.props.localMedia;
+ this.props.call.answer(options);
+ }
}
hangupCall(reason) {
let callUUID = this.props.call ? this.props.call._callkeepUUID : this.state.callUUID;
this.waitInterval = 20;
this.props.callUUID || this.props.call._callkeepUUID;
console.log('Call: hangup call', callUUID, 'reason', reason);
if (this.props.call) {
this.props.call.removeListener('stateChanged', this.callStateChanged);
}
if (this.props.connection) {
this.props.connection.removeListener('stateChanged', this.connectionStateChanged);
}
if (this.waitCounter > 0) {
this.waitCounter = this.waitInterval;
}
this.props.hangupCall(callUUID, reason);
}
mediaPlaying() {
- if (this.props.call === null) {
+ if (this.props.call === null && this.props.callUUID) {
this.startCallWhenReady();
} else {
this.answerCall();
}
}
render() {
- //console.log('Call: render', this.state.direction, 'call', this.props.callUUID, 'reconnect=', this.state.reconnectingCall);
+ /*
+ console.log('Call: render', this.state.direction, 'call', this.props.callUUID);
+ if (this.props.call) {
+ console.log('Call state', this.props.call.state);
+ } else {
+ console.log('Call is null');
+ }
+ */
let box = null;
if (this.props.localMedia !== null) {
if (this.state.audioOnly) {
box = (
);
} else {
- if (this.props.call != null && this.props.call.state === 'established') {
+ if (this.props.call != null && (this.props.call.state === 'established' || this.props.call.state === 'terminated')) {
box = (
);
} else {
- if (this.props.call && this.props.call.state && this.props.call.state === 'terminated') {
+ if (this.props.call && this.props.call.state === 'terminated') {
// do not render
} else {
+ console.log('Render local media');
box = (
);
}
}
}
}
return box;
}
}
Call.propTypes = {
targetUri : PropTypes.string.isRequired,
account : PropTypes.object,
hangupCall : PropTypes.func,
connection : PropTypes.object,
call : PropTypes.object,
localMedia : PropTypes.object,
shareScreen : PropTypes.func,
escalateToConference : PropTypes.func,
generatedVideoTrack : PropTypes.bool,
callKeepSendDtmf : PropTypes.func,
callKeepToggleMute : PropTypes.func,
speakerphoneOn : PropTypes.func,
speakerphoneOff : PropTypes.func,
callUUID : PropTypes.string,
contacts : PropTypes.array,
intercomDtmfTone : PropTypes.string,
orientation : PropTypes.string,
isTablet : PropTypes.bool,
reconnectingCall : PropTypes.bool
};
export default Call;
diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js
index 68d9818..47b5544 100644
--- a/app/components/CallOverlay.js
+++ b/app/components/CallOverlay.js
@@ -1,175 +1,176 @@
import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import moment from 'moment';
import momentFormat from 'moment-duration-format';
import autoBind from 'auto-bind';
import { Appbar } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { ActivityIndicator, Colors } from 'react-native-paper';
import styles from '../assets/styles/blink/_AudioCallBox.scss';
function toTitleCase(str) {
return str.replace(
/\w\S*/g,
function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
}
);
}
class CallOverlay extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
callState: null,
+ call: this.props.call,
direction: this.props.call ? this.props.call.direction : 'outgoing'
}
this.duration = null;
this.finalDuration = null;
this.timer = null;
this._isMounted = true;
this.reconnecting = false;
-
- if (this.props.call) {
- this.props.call.on('stateChanged', this.callStateChanged);
- }
}
componentDidMount() {
- if (this.props.call) {
- if (this.props.call.state === 'established') {
+ if (this.state.call) {
+ if (this.state.call.state === 'established') {
this.startTimer();
- } else if (this.props.call.state !== 'terminated') {
- this.props.call.on('stateChanged', this.callStateChanged);
}
+ this.state.call.on('stateChanged', this.callStateChanged);
+ this.setState({callState: this.state.call.state});
}
}
//getDerivedStateFromProps(nextProps, state) {
UNSAFE_componentWillReceiveProps(nextProps) {
- if (this.props.call == null && nextProps.call) {
- if (nextProps.call.state !== 'terminated') {
- nextProps.call.on('stateChanged', this.callStateChanged);
+ if (nextProps.call && nextProps.call !== this.state.call) {
+ nextProps.call.on('stateChanged', this.callStateChanged);
+ if (this.state.call !== null) {
+ this.state.call.removeListener('stateChanged', this.callStateChanged);
}
+ this.setState({call: nextProps.call});
}
}
componentWillUnmount() {
- if (this.props.call) {
- this.props.call.removeListener('stateChanged', this.callStateChanged);
+ if (this.state.call) {
+ this.state.call.removeListener('stateChanged', this.callStateChanged);
}
this._isMounted = false;
clearTimeout(this.timer);
}
callStateChanged(oldState, newState, data) {
- //console.log('Overlay: callStateChanged', newState, '->', newState);
if (newState === 'established' && this._isMounted) {
this.startTimer();
}
if (newState === 'terminated') {
- if (this.props.call) {
- this.props.call.removeListener('stateChanged', this.callStateChanged);
+ if (this.state.call) {
+ this.state.call.removeListener('stateChanged', this.callStateChanged);
}
clearTimeout(this.timer);
this.finalDuration = this.duration;
this.duration = null;
this.timer = null;
}
this.setState({callState: newState});
}
startTimer() {
if (this.timer !== null) {
// already armed
return;
}
// TODO: consider using window.requestAnimationFrame
const startTime = new Date();
this.timer = setInterval(() => {
this.duration = moment.duration(new Date() - startTime).format('hh:mm:ss', {trim: false});
if (this.props.show) {
this.forceUpdate();
}
}, 300);
}
render() {
- //console.log('Render call overlay');
+ if (!this._isMounted) {
+ return null;
+ }
+
let header = null;
let displayName = this.props.remoteUri;
if (this.props.remoteDisplayName && this.props.remoteDisplayName !== this.props.remoteUri) {
displayName = this.props.remoteDisplayName;
}
if (this.props.show) {
let callDetail;
if (this.duration) {
callDetail = {this.duration};
callDetail = 'Duration:' + this.duration;
} else {
- if (!this.props.connection || this.props.connection.state !== 'ready' || !this.props.accountId) {
- if (this.state.callState || this.state.callState === 'terminated' && this.duration) {
+ if (this.finalDuration && (!this.props.connection || this.props.connection.state !== 'ready' || !this.props.accountId)) {
+ if (this.state.callState && this.state.callState === 'terminated') {
callDetail = 'Restoring the conversation...';
this.reconnecting = true;
} else {
callDetail = 'Waiting for connection...';
}
} else {
if (this.state.callState === 'terminated' && this.finalDuration) {
callDetail = 'Call ended after ' + this.finalDuration;
} else {
callDetail = this.state.callState ? toTitleCase(this.state.callState) : 'Connecting...';
}
}
}
if (this.props.remoteUri.search('videoconference') > -1) {
header = (
);
} else {
header = (
);
}
}
return header
}
}
CallOverlay.propTypes = {
show: PropTypes.bool.isRequired,
remoteUri: PropTypes.string.isRequired,
remoteDisplayName: PropTypes.string,
accountId: PropTypes.string,
call: PropTypes.object,
connection: PropTypes.object
};
export default CallOverlay;
diff --git a/app/components/HistoryTileBox.js b/app/components/HistoryTileBox.js
index d515918..a01d18c 100644
--- a/app/components/HistoryTileBox.js
+++ b/app/components/HistoryTileBox.js
@@ -1,479 +1,483 @@
import React, { Component} from 'react';
import autoBind from 'auto-bind';
import PropTypes from 'prop-types';
import { SafeAreaView, ScrollView, View, FlatList, Text } from 'react-native';
import HistoryCard from './HistoryCard';
import utils from '../utils';
import DigestAuthRequest from 'digest-auth-request';
import uuid from 'react-native-uuid';
import styles from '../assets/styles/blink/_HistoryTileBox.scss';
class HistoryTileBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
serverHistory: this.props.serverHistory,
localHistory: this.props.localHistory,
- accountId: this.props.account.id,
+ accountId: this.props.account ? this.props.account.id : '',
password: this.props.password,
targetUri: this.props.targetUri,
favoriteUris: this.props.favoriteUris,
blockedUris: this.props.blockedUris
}
const echoTest = {
remoteParty: '4444@sylk.link',
displayName: 'Echo test',
type: 'contact',
label: 'Call to test microphone',
id: uuid.v4(),
tags: ['test']
};
this.echoTest = Object.assign({}, echoTest);
const videoTest = {
remoteParty: '3333@sylk.link',
displayName: 'Video test',
type: 'contact',
label: 'Call to test video',
id: uuid.v4(),
tags: ['test']
};
this.videoTest = Object.assign({}, videoTest);
}
componentDidMount() {
this.getServerHistory();
}
setTargetUri(uri, contact) {
//console.log('Set target uri uri in history list', uri);
this.props.setTargetUri(uri, contact);
}
deleteHistoryEntry(uri) {
this.props.deleteHistoryEntry(uri);
this.props.setTargetUri(uri);
}
setFavoriteUri(uri) {
return this.props.setFavoriteUri(uri);
this.props.setTargetUri();
}
setBlockedUri(uri) {
return this.props.setBlockedUri(uri);
}
renderItem(item) {
return(
);
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
//getDerivedStateFromProps(nextProps, state) {
UNSAFE_componentWillReceiveProps(props) {
const { refreshHistory } = this.props;
if (props.refreshHistory !== refreshHistory) {
this.getServerHistory();
}
}
getLocalHistory() {
let history = this.state.localHistory;
history.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1)
let known = [];
history = history.filter((elem) => {
if (known.indexOf(elem.remoteParty) <= -1) {
elem.type = 'history';
if (!elem.tags) {
elem.tags = [];
}
if (elem.tags.indexOf('history') === -1) {
elem.tags.push('history');
}
if (elem.tags.indexOf('local') === -1) {
elem.tags.push('local');
}
known.push(elem.remoteParty);
return elem;
}
});
return history;
}
getFavoriteContacts() {
let favoriteContacts = [];
let displayName;
let label;
let conference;
let contacts= this.props.contacts
contacts = contacts.concat(this.videoTest);
contacts = contacts.concat(this.echoTest);
this.state.favoriteUris.forEach((uri) => {
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);
console.log('Found history obj', history_obj);
const startTime = history_obj? history_obj.startTime : null;
const stopTime = history_obj? history_obj.stopTime : null;
const duration = history_obj? history_obj.duration : 0;
const media = history_obj? history_obj.media : 'audio';
tags.push('history');
if (uri.indexOf('@videoconference.') > -1) {
displayName = 'Conference ' + uri.split('@')[0];
uri = uri.split('@')[0] + '@' + this.props.config.defaultConferenceDomain;
conference = true;
media = ['audio', 'video', 'chat'];
}
const item = {
remoteParty: uri,
displayName: displayName,
conference: conference,
media: media,
type: 'contact',
startTime: startTime,
startTime: startTime,
duration: duration,
label: label,
id: uuid.v4(),
tags: tags
};
favoriteContacts.push(item);
});
return favoriteContacts;
}
getBlockedContacts() {
let blockedContacts = [];
let contact_obj;
let displayName;
let label;
let contacts= this.props.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,
displayName: displayName,
conference: false,
type: 'contact',
label: label,
id: uuid.v4(),
tags: ['blocked']
};
blockedContacts.push(item);
});
return blockedContacts;
}
getServerHistory() {
utils.timestampedLog('Requesting call history from server');
let history = [];
let getServerCallHistory = new DigestAuthRequest(
'GET',
`${this.props.config.serverCallHistoryUrl}?action=get_history&realm=${this.state.accountId.split('@')[1]}`,
this.state.accountId.split('@')[0],
this.state.password
);
// Disable logging
getServerCallHistory.loggingOn = false;
getServerCallHistory.request((data) => {
if (data.success !== undefined && data.success === false) {
console.log('Error getting call history from server', data.error_message);
return;
}
if (data.placed) {
data.placed.map(elem => {elem.direction = 'placed'; return elem});
history = history.concat(data.placed);
}
if (data.received) {
data.received.map(elem => {elem.direction = 'received'; return elem});
history = history.concat(data.received);
}
if (history) {
const known = [];
history = history.filter((elem) => {
elem.conference = false;
if (!elem.tags) {
elem.tags = [];
}
if (elem.remoteParty.indexOf('@conference.sip2sip.info') > -1) {
return null;
}
let username = elem.remoteParty.split('@')[0];
let isPhoneNumber = username.match(/^(\+|0)(\d+)$/);
let contact_obj;
if (this.props.contacts) {
if (isPhoneNumber) {
contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username);
} else {
contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', elem.remoteParty);
}
}
if (contact_obj) {
elem.displayName = contact_obj.displayName;
elem.photo = contact_obj.photo;
if (isPhoneNumber) {
elem.remoteParty = username;
}
// TODO update icon here
} else {
elem.photo = null;
}
if (elem.remoteParty.indexOf('@videoconference.') > -1) {
elem.displayName = 'Conference ' + elem.remoteParty.split('@')[0];
elem.remoteParty = elem.remoteParty.split('@')[0] + '@' + this.props.config.defaultConferenceDomain;
elem.conference = true;
elem.media = ['audio', 'video', 'chat'];
}
if (elem.remoteParty === this.state.accountId) {
elem.displayName = this.props.myDisplayName || 'Myself';
}
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 (known.indexOf(elem.remoteParty) <= -1) {
known.push(elem.remoteParty);
return elem;
}
});
this.props.cacheHistory(history);
this.setState({serverHistory: history});
}
}, (errorCode) => {
console.log('Error getting call history from server', errorCode);
});
}
render() {
console.log('Render history');
+
+ if (!this.state.accountId) {
+ return null;
+ }
// TODO: render blocked and favorites also when there is no history
//console.log('Favorite URIs', this.state.favoriteUris);
//console.log('blockedUris URIs', this.state.blockedUris);
let history = [];
let searchExtraItems = [];
let items = [];
if (this.props.filter === 'favorite') {
let favoriteContacts = this.getFavoriteContacts();
items = favoriteContacts.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
} else if (this.props.filter === 'blocked') {
let blockedContacts = this.getBlockedContacts();
items = blockedContacts.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
} else {
history = this.getLocalHistory();
history = history.concat(this.state.serverHistory);
searchExtraItems = this.props.contacts;
searchExtraItems.concat(this.videoTest);
searchExtraItems.concat(this.echoTest);
items = history.filter(historyItem => historyItem.remoteParty.startsWith(this.props.targetUri));
/*
if (!this.props.targetUri && !this.props.filter) {
if (!this.findObjectByKey(items, 'remoteParty', this.echoTest.remoteParty)) {
items.push(this.echoTest);
}
if (!this.findObjectByKey(items, 'remoteParty', this.videoTest.remoteParty)) {
items.push(this.videoTest);
}
}
*/
let matchedContacts = [];
if (this.props.targetUri && this.props.targetUri.length > 2 && !this.props.selectedContact) {
matchedContacts = searchExtraItems.filter(contact => (contact.remoteParty.toLowerCase().search(this.props.targetUri) > -1 || contact.displayName.toLowerCase().search(this.props.targetUri) > -1));
} else if (this.props.selectedContact && this.props.selectedContact.type === 'contact') {
matchedContacts.push(this.props.selectedContact);
}
items = items.concat(matchedContacts);
}
items.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1)
const known = [];
items = items.filter((elem) => {
if (known.indexOf(elem.remoteParty) <= -1) {
known.push(elem.remoteParty);
return elem;
}
});
items.forEach((item) => {
item.showActions = false;
if (!item.tags) {
item.tags = [];
}
if (this.state.favoriteUris.indexOf(item.remoteParty) > -1 && item.tags.indexOf('favorite') === -1) {
item.tags.push('favorite');
}
if (this.state.blockedUris.indexOf(item.remoteParty) > -1 && item.tags.indexOf('blocked') === -1) {
item.tags.push('blocked');
}
let idx = item.tags.indexOf('blocked');
if (this.state.blockedUris.indexOf(item.remoteParty) === -1 && idx > -1) {
item.tags.splice(idx, 1);
}
idx = item.tags.indexOf('favorite');
if (this.state.favoriteUris.indexOf(item.remoteParty) === -1 && idx > -1) {
item.tags.splice(idx, 1);
}
});
let filteredItems = [];
items.forEach((item) => {
if (this.props.filter && item.tags.indexOf(this.props.filter) > -1) {
filteredItems.push(item);
} else if (this.state.blockedUris.indexOf(item.remoteParty) === -1) {
filteredItems.push(item);
}
});
items = filteredItems;
if (items.length === 1) {
items[0].showActions = true;
}
let columns = 1;
if (this.props.isTablet) {
columns = this.props.orientation === 'landscape' ? 3 : 2;
} else {
columns = this.props.orientation === 'landscape' ? 2 : 1;
}
return (
item.id}
key={this.props.orientation}
/>
);
}
}
HistoryTileBox.propTypes = {
account : PropTypes.object.isRequired,
password : PropTypes.string.isRequired,
config : PropTypes.object.isRequired,
targetUri : PropTypes.string,
selectedContact : PropTypes.object,
contacts : PropTypes.array,
orientation : PropTypes.string,
setTargetUri : PropTypes.func,
isTablet : PropTypes.bool,
refreshHistory : PropTypes.bool,
cacheHistory : PropTypes.func,
serverHistory : PropTypes.array,
localHistory : PropTypes.array,
myDisplayName : PropTypes.string,
myPhoneNumber : PropTypes.string,
setFavoriteUri : PropTypes.func,
setBlockedUri : PropTypes.func,
deleteHistoryEntry : PropTypes.func,
favoriteUris : PropTypes.array,
blockedUris : PropTypes.array,
filter : PropTypes.string
};
export default HistoryTileBox;
diff --git a/app/components/LocalMedia.js b/app/components/LocalMedia.js
index 04487ca..1b61e55 100644
--- a/app/components/LocalMedia.js
+++ b/app/components/LocalMedia.js
@@ -1,62 +1,67 @@
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 } 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.props.mediaPlaying();
}
hangupCall(event) {
event.preventDefault();
this.props.hangupCall();
}
render() {
let {height, width} = Dimensions.get('window');
let videoStyle = {
height,
width
};
return (
);
}
}
LocalMedia.propTypes = {
+ call : PropTypes.object,
hangupCall : PropTypes.func,
localMedia : PropTypes.object.isRequired,
remoteUri : PropTypes.string,
remoteDisplayName : PropTypes.string,
mediaPlaying : PropTypes.func.isRequired,
- generatedVideoTrack : PropTypes.bool
+ generatedVideoTrack : PropTypes.bool,
+ connection : PropTypes.object,
+ accountId : PropTypes.string
};
export default LocalMedia;
diff --git a/app/components/NavigationBar.js b/app/components/NavigationBar.js
index 20b72fb..4cecc43 100644
--- a/app/components/NavigationBar.js
+++ b/app/components/NavigationBar.js
@@ -1,151 +1,151 @@
import React, { Component } from 'react';
import { Linking, Image, 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 'material-bread';
import config from '../config';
import AboutModal from './AboutModal';
import CallMeMaybeModal from './CallMeMaybeModal';
import styles from '../assets/styles/blink/_NavigationBar.scss';
const blinkLogo = require('../assets/images/blink-white-big.png');
class NavigationBar extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
showAboutModal: false,
showCallMeMaybeModal: false,
mute: false,
menuVisible: false
}
this.menuRef = React.createRef();
}
handleMenu(event) {
this.callUrl = `${config.publicUrl}/call/${this.props.account.id}`;
switch (event) {
case 'about':
this.toggleAboutModal();
break;
case 'callMeMaybe':
this.toggleCallMeMaybeModal();
break;
case 'logOut':
this.props.logout();
break;
case 'preview':
this.props.preview();
break;
case 'settings':
Linking.openURL(config.serverSettingsUrl);
break;
default:
break;
}
this.setState({menuVisible: false});
}
toggleMute() {
this.setState(prevState => ({mute: !prevState.mute}));
this.props.toggleMute();
}
toggleAboutModal() {
this.setState({showAboutModal: !this.state.showAboutModal});
}
toggleCallMeMaybeModal() {
this.setState({showCallMeMaybeModal: !this.state.showCallMeMaybeModal});
}
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 account_id = '';
statusIcon = 'check-circle';
if (!this.props.connection || this.props.connection.state !== 'ready') {
statusIcon = 'error-outline';
} else if (this.props.registrationState && this.props.registrationState !== 'registered') {
statusIcon = 'priority-high';
}
//
let callUrl = '';
if (this.props.account) {
account_id = this.props.account.id;
callUrl = config.publicUrl + "/call/" + account_id;
}
let subtitle = 'Signed in as ' + account_id;
return (
{this.props.isTablet?
{subtitle}
: null}
{statusIcon ?
: null }
);
}
}
NavigationBar.propTypes = {
notificationCenter : PropTypes.func.isRequired,
- account : PropTypes.object.isRequired,
logout : PropTypes.func.isRequired,
preview : PropTypes.func.isRequired,
+ account : PropTypes.object,
toggleMute : PropTypes.func,
orientation : PropTypes.string,
isTablet : PropTypes.bool
};
export default NavigationBar;
diff --git a/app/components/VideoBox.js b/app/components/VideoBox.js
index a32ec4e..eb6419b 100644
--- a/app/components/VideoBox.js
+++ b/app/components/VideoBox.js
@@ -1,428 +1,431 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import debug from 'react-native-debug';
import autoBind from 'auto-bind';
import { IconButton, ActivityIndicator, Colors } from 'react-native-paper';
import { View, Dimensions, TouchableOpacity, Platform } from 'react-native';
import { RTCView } from 'react-native-webrtc';
import CallOverlay from './CallOverlay';
import EscalateConferenceModal from './EscalateConferenceModal';
import DTMFModal from './DTMFModal';
import config from '../config';
import dtmf from 'react-native-dtmf';
import styles from '../assets/styles/blink/_VideoBox.scss';
const DEBUG = debug('blinkrtc:Video');
debug.enable('*');
class VideoBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.userHangup = false;
this.state = {
callOverlayVisible: true,
audioMuted: false,
videoMuted: false,
localVideoShow: false,
remoteVideoShow: false,
remoteSharesScreen: false,
showEscalateConferenceModal: false,
localStream: null,
remoteStream: null,
showDtmfModal: false,
doorOpened: false
};
this.overlayTimer = null;
this.localVideo = React.createRef();
this.remoteVideo = React.createRef();
}
callStateChanged(oldState, newState, data) {
- DEBUG(`Call state changed ${oldState} -> ${newState}`);
- if (newState === 'established') {
- this.forceUpdate();
- }
+ this.forceUpdate();
}
openDoor() {
const tone = this.props.intercomDtmfTone;
DEBUG('DTMF tone sent to intercom: ' + tone);
this.setState({doorOpened: true});
this.forceUpdate();
dtmf.stopTone(); //don't play a tone at the same time as another
dtmf.playTone(dtmf['DTMF_' + tone], 1000);
if (this.props.call !== null && this.props.call.state === 'established') {
this.props.call.sendDtmf(tone);
/*this.props.notificationCenter.postSystemNotification('Door opened', {timeout: 5});*/
}
}
componentDidMount() {
+ /*
+ console.log('VideoBox: did mount');
+ console.log('Call is', this.props.call);
console.log('localStreams', this.props.call.getLocalStreams());
console.log('remoteStreams', this.props.call.getRemoteStreams());
+ */
this.setState({localStream: this.props.call.getLocalStreams()[0],
localVideoShow: true,
remoteStream: this.props.call.getRemoteStreams()[0],
remoteVideoShow: true});
this.props.call.on('stateChanged', this.callStateChanged);
// sylkrtc.utils.attachMediaStream(, this.localVideo.current, {disableContextMenu: true});
// let promise = this.localVideo.current.play()
// if (promise !== undefined) {
// promise.then(_ => {
// this.setState({localVideoShow: true}); // eslint-disable-line react/no-did-mount-set-state
// // Autoplay started!
// }).catch(error => {
// // Autoplay was prevented.
// // Show a "Play" button so that user can start playback.
// });
// } else {
// this.localVideo.current.addEventListener('playing', () => {
// this.setState({}); // eslint-disable-line react/no-did-mount-set-state
// });
// }
// this.remoteVideo.current.addEventListener('playing', this.handleRemoteVideoPlaying);
// sylkrtc.utils.attachMediaStream(this.props.call.getRemoteStreams()[0], this.remoteVideo.current, {disableContextMenu: true});
}
componentWillUnmount() {
// clearTimeout(this.overlayTimer);
// this.remoteVideo.current.removeEventListener('playing', this.handleRemoteVideoPlaying);
// this.exitFullscreen();
if (this.props.call != null) {
this.props.call.removeListener('stateChanged', this.callStateChanged);
}
}
showDtmfModal() {
this.setState({showDtmfModal: true});
}
hideDtmfModal() {
this.setState({showDtmfModal: false});
}
handleFullscreen(event) {
event.preventDefault();
// this.toggleFullscreen();
}
handleRemoteVideoPlaying() {
this.setState({remoteVideoShow: true});
// this.remoteVideo.current.onresize = (event) => {
// this.handleRemoteResize(event)
// };
// this.armOverlayTimer();
}
handleRemoteResize(event, target) {
//DEBUG("%o", event);
const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180'];
const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
if (resolutions.indexOf(videoResolution) === -1) {
this.setState({remoteSharesScreen: true});
} else {
this.setState({remoteSharesScreen: false});
}
}
muteAudio(event) {
event.preventDefault();
const localStream = this.state.localStream;
if (localStream.getAudioTracks().length > 0) {
const track = localStream.getAudioTracks()[0];
if(this.state.audioMuted) {
DEBUG('Unmute microphone');
track.enabled = true;
this.props.callKeepToggleMute(false);
this.setState({audioMuted: false});
} else {
DEBUG('Mute microphone');
track.enabled = false;
this.props.callKeepToggleMute(true);
this.setState({audioMuted: true});
}
}
}
muteVideo(event) {
event.preventDefault();
const localStream = this.state.localStream;
if (localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
if(this.state.videoMuted) {
DEBUG('Unmute camera');
track.enabled = true;
this.setState({videoMuted: false});
} else {
DEBUG('Mute camera');
track.enabled = false;
this.setState({videoMuted: true});
}
}
}
toggleCamera(event) {
event.preventDefault();
const localStream = this.state.localStream;
if (localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
track._switchCamera();
}
}
hangupCall(event) {
event.preventDefault();
this.props.hangupCall('user_press_hangup');
this.userHangup = true;
}
cancelCall(event) {
event.preventDefault();
this.props.hangupCall('user_cancelled');
}
escalateToConference(participants) {
this.props.escalateToConference(participants);
}
armOverlayTimer() {
clearTimeout(this.overlayTimer);
this.overlayTimer = setTimeout(() => {
this.setState({callOverlayVisible: false});
}, 4000);
}
showCallOverlay() {
if (this.state.remoteVideoShow) {
this.setState({callOverlayVisible: true});
this.armOverlayTimer();
}
}
toggleEscalateConferenceModal() {
this.setState({
callOverlayVisible : false,
showEscalateConferenceModal : !this.state.showEscalateConferenceModal
});
}
render() {
if (this.props.call == null) {
return null;
}
+ //console.log('Render Video Box in state', this.props.call.state);
+
const localVideoClasses = classNames({
'video-thumbnail' : true,
'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack,
'hidden' : !this.state.localVideoShow,
'animated' : true,
'fadeIn' : this.state.localVideoShow || this.state.videoMuted,
'fadeOut' : this.state.videoMuted,
'fit' : this.props.call.sharingScreen
});
const remoteVideoClasses = classNames({
'poster' : !this.state.remoteVideoShow,
'animated' : true,
'fadeIn' : this.state.remoteVideoShow,
'large' : true,
'fit' : this.state.remoteSharesScreen
});
let callButtons;
let watermark;
if (this.state.callOverlayVisible) {
// const screenSharingButtonIcons = classNames({
// 'fa' : true,
// 'fa-clone' : true,
// 'fa-flip-horizontal' : true,
// 'text-warning' : this.props.call.sharingScreen
// });
// const fullScreenButtonIcons = classNames({
// 'fa' : true,
// 'fa-expand' : !this.isFullScreen(),
// 'fa-compress' : this.isFullScreen()
// });
// const commonButtonClasses = classNames({
// 'btn' : true,
// 'btn-round' : true,
// 'btn-default' : true
// });
const buttons = [];
// buttons.push();
// if (this.isFullscreenSupported()) {
// buttons.push();
// }
// buttons.push(
);
// callButtons = (
// //
// //
// );
} else {
// watermark = (
//
//
//
// );
}
//console.log('local media stream in videobox', this.state);
const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone';
const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video';
const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
let buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer;
return (
{/* */}
{/* {watermark} */}
{/* */}
{this.props.orientation !== 'landscape' && !this.userHangup && (!this.props.call || (this.props.call && this.props.call.state !== 'established')) ?
:
null
}
{this.state.remoteVideoShow ?
: null }
{ this.state.localVideoShow ?
: null }
{ this.props.intercomDtmfTone ?
:
}
);
}
}
VideoBox.propTypes = {
call : PropTypes.object,
connection : PropTypes.object,
accountId : PropTypes.string,
remoteUri : PropTypes.string,
remoteDisplayName : PropTypes.string,
localMedia : PropTypes.object,
hangupCall : PropTypes.func,
shareScreen : PropTypes.func,
escalateToConference : PropTypes.func,
generatedVideoTrack : PropTypes.bool,
callKeepSendDtmf : PropTypes.func,
callKeepToggleMute : PropTypes.func,
toggleSpeakerPhone : PropTypes.func,
speakerPhoneEnabled : PropTypes.bool,
intercomDtmfTone : PropTypes.string,
orientation : PropTypes.string,
isTablet : PropTypes.bool
};
export default VideoBox;