diff --git a/app/app.js b/app/app.js
index 10db121..70b4335 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,3009 +1,3124 @@
import React, { Component, Fragment } from 'react';
import { Alert, View, SafeAreaView, ImageBackground, AppState, Linking, Platform, StyleSheet, Vibration, PermissionsAndroid} from 'react-native';
import { DeviceEventEmitter, BackHandler } from 'react-native';
import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
import { registerGlobals } from 'react-native-webrtc';
import { Router, Route, Link, Switch } from 'react-router-native';
import history from './history';
import Logger from "../Logger";
import autoBind from 'auto-bind';
import { firebase } from '@react-native-firebase/messaging';
import VoipPushNotification from 'react-native-voip-push-notification';
import uuid from 'react-native-uuid';
import { getUniqueId, getBundleId, isTablet, getPhoneNumber} from 'react-native-device-info';
import RNDrawOverlay from 'react-native-draw-overlay';
import PushNotificationIOS from "@react-native-community/push-notification-ios";
import Contacts from 'react-native-contacts';
import BackgroundTimer from 'react-native-background-timer';
import DeepLinking from 'react-native-deep-linking';
registerGlobals();
import * as sylkrtc from 'react-native-sylkrtc';
import InCallManager from 'react-native-incall-manager';
import RNCallKeep, { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep';
import RegisterBox from './components/RegisterBox';
import ReadyBox from './components/ReadyBox';
import Call from './components/Call';
import Conference from './components/Conference';
import FooterBox from './components/FooterBox';
import StatusBox from './components/StatusBox';
import IncomingCallModal from './components/IncomingCallModal';
import LogsModal from './components/LogsModal';
import NotificationCenter from './components/NotificationCenter';
import LoadingScreen from './components/LoadingScreen';
import NavigationBar from './components/NavigationBar';
import Preview from './components/Preview';
import CallManager from './CallManager';
import utils from './utils';
import config from './config';
import storage from './storage';
const RNFS = require('react-native-fs');
const logfile = RNFS.DocumentDirectoryPath + '/logs.txt';
import styles from './assets/styles/blink/root.scss';
const backgroundImage = require('./assets/images/dark_linen.png');
const logger = new Logger("App");
function checkIosPermissions() {
return new Promise(resolve => PushNotificationIOS.checkPermissions(resolve));
}
const theme = {
...DefaultTheme,
dark: true,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#337ab7',
// accent: '#f1c40f',
},
};
const URL_SCHEMES = [
'sylk://',
];
const ONE_SECOND_IN_MS = 1000;
const VIBRATION_PATTERN = [
1 * ONE_SECOND_IN_MS,
1 * ONE_SECOND_IN_MS,
4 * ONE_SECOND_IN_MS
];
let bundleId = `${getBundleId()}`;
const deviceId = getUniqueId();
const version = '1.0.0';
const MAX_LOG_LINES = 300;
if (Platform.OS == 'ios') {
bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`;
//bundleId = 'com.agprojects.sylk-ios.dev';
}
const mainStyle = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 0
}
});
(function() {
if ( typeof Object.id == "undefined" ) {
var id = 0;
Object.id = function(o) {
if ( o && typeof o.__uniqueid == "undefined" ) {
Object.defineProperty(o, "__uniqueid", {
value: ++id,
enumerable: false,
// This could go either way, depending on your
// interpretation of what an "id" is
writable: false
});
}
return o ? o.__uniqueid : null;
};
}
})();
const requestCameraPermission = async () => {
if (Platform.OS !== 'android') {
return;
}
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "Sylk camera permission",
message:
"Sylk needs access to your camera " +
"so you can have video chat.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
//console.log("You can use the camera");
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
{
title: "Sylk microphone permission",
message:
"Sylk needs access to your microphone " +
"so you can have audio calls.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
//console.log("You can use the microphone");
} else {
console.log("Microphone permission denied");
}
} catch (err) {
console.warn(err);
}
};
class Sylk extends Component {
constructor() {
super();
autoBind(this)
this._loaded = false;
this._initialState = {
appState: null,
autoLogin: true,
inFocus: false,
accountId: '',
password: '',
displayName: '',
account: null,
registrationState: null,
registrationKeepalive: false,
incomingCall: null,
currentCall: null,
connection: null,
showIncomingModal: false,
showScreenSharingModal: false,
status: null,
targetUri: '',
missedTargetUri: '',
loading: null,
localMedia: null,
generatedVideoTrack: false,
contacts: [],
devices: {},
speakerPhoneEnabled: null,
orientation : 'portrait',
Height_Layout : '',
Width_Layout : '',
outgoingCallUUID: null,
incomingCallUUID: null,
hardware: '',
phoneNumber: '',
isTablet: isTablet(),
refreshHistory: false,
refreshFavorites: false,
myPhoneNumber: null,
localHistory: [],
favoriteUris: [],
blockedUris: [],
initialUrl: null,
reconnectingCall: false,
muted: false,
participantsToInvite: [],
myInvitedParties: {},
myDisplayNames: {},
defaultDomain: config.defaultDomain,
declineReason: null,
showLogsModal: false,
logs: '',
proximityEnabled: true
};
utils.timestampedLog('Init app');
this.outgoingMedia = null;
this.participantsToInvite = [];
this.tokenSent = false;
this.mustLogout = false;
this.currentRoute = null;
this.pushtoken = null;
this.pushkittoken = null;
this.intercomDtmfTone = null;
this.registrationFailureTimer = null;
this.contacts = [];
this.startedByPush = false;
this.heartbeats = 0;
this.cachedHistory = []; // used for caching server history
this.state = Object.assign({}, this._initialState);
this.myParticipants = {};
this._historyConferenceParticipants = new Map(); // for saving to local history
this._terminatedCalls = new Map();
this.__notificationCenter = null;
this.redirectTo = null;
this.prevPath = null;
this.shouldUseHashRouting = false;
this.goToReadyTimer = null;
storage.initialize();
this.callKeeper = new CallManager(RNCallKeep,
this.acceptCall,
this.rejectCall,
this.hangupCall,
this.timeoutCall,
this.callKeepStartConference,
this.startCallFromCallKeeper,
this.toggleMute,
this.getConnection,
this.addConferenceHistoryEntry,
this.changeRoute,
this.respawnConnection,
this.isUnmounted
);
if (InCallManager.recordPermission !== 'granted') {
InCallManager.requestRecordPermission()
.then((requestedRecordPermissionResult) => {
//console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult);
})
.catch((err) => {
//console.log("InCallManager.requestRecordPermission() catch: ", err);
});
}
requestCameraPermission();
// Load camera/mic preferences
storage.get('devices').then((devices) => {
if (devices) {
this.setState({devices: devices});
}
});
storage.get('history').then((history) => {
if (history) {
//console.log('Loaded', history.length, 'local history entries');
this.setState({localHistory: history});
} else {
//console.log('Loaded 0 local history entries');
}
});
storage.get('cachedHistory').then((history) => {
if (history) {
//console.log('Loaded', history.length, 'cached history entries');
this.cachedHistory = history;
}
});
storage.get('myParticipants').then((myParticipants) => {
if (myParticipants) {
this.myParticipants = myParticipants;
//console.log('My participants', this.myParticipants);
}
});
storage.get('myInvitedParties').then((myInvitedParties) => {
if (myInvitedParties) {
if (Array.isArray(myInvitedParties)) {
myInvitedParties = {};
}
this.myInvitedParties = myInvitedParties;
//console.log('My invited parties', this.myInvitedParties);
this.setState({myInvitedParties: this.myInvitedParties});
}
});
storage.get('displayName').then((displayName) => {
//console.log('My display name is', displayName);
this.setState({displayName: displayName});
});
storage.get('proximityEnabled').then((proximityEnabled) => {
this.setState({proximityEnabled: proximityEnabled});
});
if (this.state.proximityEnabled) {
utils.timestampedLog('Proximity sensor enabled');
} else {
utils.timestampedLog('Proximity sensor disabled');
}
storage.get('myDisplayNames').then((myDisplayNames) => {
this.setState({myDisplayNames: myDisplayNames});
});
storage.get('favoriteUris').then((favoriteUris) => {
if (favoriteUris) {
this.setState({favoriteUris: favoriteUris});
}
});
storage.get('blockedUris').then((blockedUris) => {
if (blockedUris) {
this.setState({blockedUris: blockedUris});
//console.log('My blocked Uris', blockedUris);
}
});
for (let scheme of URL_SCHEMES) {
DeepLinking.addScheme(scheme);
}
}
async loadContacts() {
Contacts.checkPermission((err, permission) => {
if (permission === Contacts.PERMISSION_UNDEFINED) {
Contacts.requestPermission((err, requestedContactsPermissionResult) => {
if (err) {
console.log("Contacts.requestPermission()catch: ", err);
}
console.log("Contacts.requestPermission() requestPermission: ", requestedContactsPermissionResult);
})
}
})
Contacts.getAll((err, contacts) => {
if (err === 'denied'){
console.log('Access to contacts denied')
} else {
// contacts returned in Array
let contact_cards = [];
let name;
let photo;
let seen_uris = new Map();
var arrayLength = contacts.length;
for (var i = 0; i < arrayLength; i++) {
photo = null;
contact = contacts[i];
if (contact['givenName'] && contact['familyName']) {
name = contact['givenName'] + ' ' + contact['familyName'];
} else if (contact['givenName']) {
name = contact['givenName'];
} else if (contact['familyName']) {
name = contact['familyName'];
} else if (contact['company']) {
name = contact['company'];
} else {
continue;
}
if (contact.hasThumbnail) {
photo = contact.thumbnailPath;
}
//console.log(name);
contact['phoneNumbers'].forEach(function (number, index) {
let number_stripped = number['number'].replace(/\s|\-|\(|\)/g, '');
if (number_stripped) {
if (!seen_uris.has(number_stripped)) {
//console.log(' ----> ', number['label'], number_stripped);
var contact_card = {id: uuid.v4(), displayName:
name, remoteParty: number_stripped,
type: 'contact',
photo: photo,
label: number['label'],
tags: ['contact']};
contact_cards.push(contact_card);
seen_uris.set(number_stripped, true);
var contact_card = {id: uuid.v4(),
displayName: name,
remoteParty: number_stripped,
type: 'contact',
photo: photo,
label: number['label'],
tags: ['contact']
};
}
}
});
contact['emailAddresses'].forEach(function (email, index) {
let email_stripped = email['email'].replace(/\s|\(|\)/g, '');
if (!seen_uris.has(email_stripped)) {
//console.log(name, email['label'], email_stripped);
//console.log(' ----> ', email['label'], email_stripped);
var contact_card = {id: uuid.v4(),
displayName: name,
remoteParty: email_stripped,
type: 'contact',
photo: photo,
label: email['label'],
tags: ['contact']
};
contact_cards.push(contact_card);
seen_uris.set(email_stripped, true);
}
});
}
this.contacts = contact_cards;
}
})
}
get _notificationCenter() {
// getter to lazy-load the NotificationCenter ref
if (!this.__notificationCenter) {
this.__notificationCenter = this.refs.notificationCenter;
}
return this.__notificationCenter;
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
_detectOrientation() {
if(this.state.Width_Layout > this.state.Height_Layout && this.state.orientation !== 'landscape') {
this.setState({orientation: 'landscape'});
} else {
this.setState({orientation: 'portrait'});
}
}
changeRoute(route, reason) {
if (this.currentRoute === route) {
return;
}
if (this.currentRoute !== route) {
utils.timestampedLog('Change route:', this.currentRoute, '->', route, reason);
}
if (route === '/ready') {
Vibration.cancel();
if (reason === 'conference_really_ended' && this.callKeeper.countCalls) {
utils.timestampedLog('Change route cancelled because we still have calls');
return;
}
this.startedByPush = false;
this.setState({
outgoingCallUUID: null,
currentCall: null,
incomingCall: (reason === 'accept_new_call' || reason === 'user_hangup_call') ? this.state.incomingCall: null,
targetUri: '',
reconnectingCall: false,
muted: false
});
if (this.currentRoute === '/call' || this.currentRoute === '/conference') {
if (reason !== 'user_hangup_call') {
this.stopRingback();
InCallManager.stop();
}
this.closeLocalMedia();
if (reason === 'accept_new_call') {
if (this.state.incomingCall) {
// then answer the new call if any
let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.mediaTypes.video) ? true : false;
this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call');
}
} else if (reason === 'escalate_to_conference') {
const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`;
const options = {audio: this.outgoingMedia ? this.outgoingMedia.audio: true,
video: this.outgoingMedia ? this.outgoingMedia.video: true,
participants: this.participantsToInvite}
this.callKeepStartConference(uri.toLowerCase(), options);
} else {
if (this.state.account && this._loaded) {
setTimeout(() => {
this.updateServerHistory()
}, 1500);
}
}
}
if (reason === 'registered') {
setTimeout(() => {
this.updateServerHistory()
}, 1500);
}
if (reason === 'no_more_calls') {
this.updateServerHistory()
}
}
this.currentRoute = route;
history.push(route);
}
componentWillUnmount() {
utils.timestampedLog('App will unmount');
AppState.removeEventListener('change', this._handleAppStateChange);
this.callKeeper.destroy();
this.closeConnection();
this._loaded = false;
}
get unmounted() {
return !this._loaded;
}
isUnmounted() {
return this.unmounted;
}
backPressed() {
console.log('Back button pressed');
if (this.currentRoute === '/call' || this.currentRoute === '/conference') {
let call = this.state.currentCall || this.state.incomingCall;
if (call && call.id) {
this.hangupCall(call.id, 'user_hangup_call');
}
}
return true;
}
async componentDidMount() {
utils.timestampedLog('App did mount');
this._loaded = true;
BackHandler.addEventListener('hardwareBackPress', this.backPressed);
// Start a timer that runs once after X milliseconds
BackgroundTimer.runBackgroundTimer(() => {
// this will be executed once after 10 seconds
// even when app is the the background
this.heartbeat();
}, 5000);
try {
await RNCallKeep.supportConnectionService ();
//utils.timestampedLog('Connection service is enabled');
} catch(err) {
utils.timestampedLog(err);
}
try {
await RNCallKeep.hasPhoneAccount();
//utils.timestampedLog('Phone account is enabled');
} catch(err) {
utils.timestampedLog(err);
}
if (Platform.OS === 'android') {
RNDrawOverlay.askForDispalayOverOtherAppsPermission()
.then(res => {
//utils.timestampedLog("Display over other apps was granted");
// res will be true if permission was granted
})
.catch(e => {
utils.timestampedLog("Display over other apps was declined");
// permission was declined
})
}
// prime the ref
//logger.debug('NotificationCenter ref: %o', this._notificationCenter);
this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this);
this._boundOnPushRegistered = this._onPushRegistered.bind(this);
this._detectOrientation();
getPhoneNumber().then(phoneNumber => {
this.setState({myPhoneNumber: phoneNumber});
this.loadContacts();
});
this.listenforPushNotifications();
}
listenforPushNotifications() {
if (this.state.appState === null) {
this.setState({appState: 'active'});
} else {
return;
}
if (Platform.OS === 'android') {
Linking.getInitialURL().then((url) => {
if (url) {
utils.timestampedLog('Initial external URL: ' + url);
this.eventFromUrl(url);
this.changeRoute('/login', 'start up');
} else {
this.changeRoute('/login', 'start up');
}
}).catch(err => {
logger.error({ err }, 'Error getting external URL');
});
firebase.messaging().getToken()
.then(fcmToken => {
if (fcmToken) {
this._onPushRegistered(fcmToken);
}
});
Linking.addEventListener('url', this.updateLinkingURL);
} else if (Platform.OS === 'ios') {
this.changeRoute('/login', 'start up');
VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered);
VoipPushNotification.registerVoipToken();
PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered);
//let permissions = await checkIosPermissions();
//if (!permissions.alert) {
PushNotificationIOS.requestPermissions();
//}
}
this.boundProximityDetect = this._proximityDetect.bind(this);
DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect);
AppState.addEventListener('change', this._handleAppStateChange);
if (Platform.OS === 'ios') {
this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this);
this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this);
VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground);
VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground);
} else if (Platform.OS === 'android') {
AppState.addEventListener('focus', this._handleAndroidFocus);
AppState.addEventListener('blur', this._handleAndroidBlur);
firebase
.messaging()
.requestPermission()
.then(() => {
// User has authorised
})
.catch(error => {
// User has rejected permissions
});
this.messageListener = firebase
.messaging()
.onMessage((message: RemoteMessage) => {
// this will just wake up the app to receive
// the web-socket invite handled by this.incomingCall()
let event = message.data.event;
const callUUID = message.data['session-id'];
const from = message.data['from_uri'];
const to = message.data['to_uri'];
const displayName = message.data['from_display_name'];
const outgoingMedia = {audio: true, video: message.data['media-type'] === 'video'};
const mediaType = message.data['media-type'] || 'audio';
if (this.unmounted) {
return;
}
if (event === 'incoming_conference_request') {
utils.timestampedLog('Push notification: incoming conference', callUUID);
this.incomingConference(callUUID, to, from, displayName, outgoingMedia);
} else if (event === 'incoming_session') {
utils.timestampedLog('Push notification: incoming call', callUUID);
this.incomingCallFromPush(callUUID, from, displayName, mediaType);
} else if (event === 'cancel') {
this.cancelIncomingCall(callUUID);
}
});
}
}
cancelIncomingCall(callUUID) {
if (this.unmounted) {
return;
}
if (this.callKeeper._acceptedCalls.has(callUUID)) {
return;
}
utils.timestampedLog('Push notification: cancel call', callUUID);
let call = this.callKeeper._calls.get(callUUID);
if (!call) {
if (!this.callKeeper._cancelledCalls.has(callUUID)) {
utils.timestampedLog('Cancel incoming call that did not arrive on web socket', callUUID);
this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED);
this.startedByPush = false;
if (this.startedByPush) {
this.changeRoute('/ready', 'incoming_call_cancelled');
}
}
return;
}
if (call.state === 'incoming') {
utils.timestampedLog('Cancel incoming call that was not yet accepted', callUUID);
this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED);
if (this.startedByPush) {
this.changeRoute('/ready', 'incoming_call_cancelled');
}
}
}
_proximityDetect(data) {
//utils.timestampedLog('Proximity changed, isNear is', data.isNear);
if (!this.state.proximityEnabled) {
return;
}
if (data.isNear) {
this.speakerphoneOff();
} else {
this.speakerphoneOn();
}
}
startCallWhenReady(targetUri, options) {
this.resetGoToReadyTimer();
if (options.conference) {
this.startConference(targetUri, options);
} else {
this.startCall(targetUri, options);
}
}
_sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
_onPushkitRegistered(token) {
this.pushkittoken = token;
}
_onPushRegistered(token) {
this.pushtoken = token;
}
_sendPushToken() {
if ((this.state.account && this.pushtoken && !this.tokenSent)) {
let token = null;
if (Platform.OS === 'ios') {
token = `${this.pushkittoken}#${this.pushtoken}`;
} else if (Platform.OS === 'android') {
token = this.pushtoken;
}
utils.timestampedLog('Push token sent to server');
this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId);
this.tokenSent = true;
}
}
_handleAndroidFocus = nextFocus => {
//utils.timestampedLog('----- APP in focus');
this.setState({inFocus: true});
this.respawnConnection();
}
_handleAndroidBlur = nextBlur => {
//utils.timestampedLog('----- APP out of focus');
this.setState({inFocus: false});
}
_handleAppStateChange = nextAppState => {
//utils.timestampedLog('----- APP state changed', this.state.appState, '->', nextAppState);
if (nextAppState === this.state.appState) {
return;
}
if (this.callKeeper.countCalls === 0 && !this.state.outgoingCallUUID) {
/*
utils.timestampedLog('----- APP state changed', this.state.appState, '->', nextAppState);
if (this.callKeeper.countCalls) {
utils.timestampedLog('- APP state changed, we have', this.callKeeper.countCalls, 'calls');
}
if (this.callKeeper.countPushCalls) {
utils.timestampedLog('- APP state changed, we have', this.callKeeper.countPushCalls, 'push calls');
}
if (this.startedByPush) {
utils.timestampedLog('- APP state changed, started by push in', nextAppState, 'state');
}
if (this.state.connection) {
utils.timestampedLog('- APP state changed from', this.state.appState, 'to', nextAppState, 'with connection', Object.id(this.state.connection));
} else {
utils.timestampedLog('- APP state changed from', this.state.appState, 'to', nextAppState);
}
*/
}
if (this.state.appState === 'background' && nextAppState === 'active') {
this.respawnConnection(nextAppState);
}
this.setState({appState: nextAppState});
}
respawnConnection(state) {
if (!this.state.connection) {
utils.timestampedLog('Web socket does not exist');
} else if (!this.state.connection.state) {
utils.timestampedLog('Web socket is waiting for connection...');
} else {
/*
if (this.state.connection.state !== 'ready' && this.state.connection.state !== 'connecting') {
utils.timestampedLog('Web socket', Object.id(this.state.connection), 'reconnecting because', this.state.connection.state);
this.state.connection.reconnect();
utils.timestampedLog('Web socket', Object.id(this.state.connection), 'new state is', this.state.connection.state);
}
*/
}
if (this.state.account) {
if (!this.state.connection) {
utils.timestampedLog('Active account without connection removed');
this.setState({account: null});
}
} else {
utils.timestampedLog('No active account');
}
if (this.state.accountId && (!this.state.connection || !this.state.account)) {
this.handleRegistration(this.state.accountId, this.state.password);
}
}
closeConnection(reason='unmount') {
if (!this.state.connection) {
return;
}
if (!this.state.account && this.state.connection) {
this.state.connection.removeListener('stateChanged', this.connectionStateChanged);
this.state.connection.close();
utils.timestampedLog('Web socket', Object.id(this.state.connection), 'will close');
this.setState({connection: null, account: null});
} else if (this.state.connection && this.state.account) {
this.state.connection.removeListener('stateChanged', this.connectionStateChanged);
this.state.account.removeListener('outgoingCall', this.outgoingCall);
this.state.account.removeListener('conferenceCall', this.outgoingConference);
this.state.account.removeListener('incomingCall', this.incomingCallFromWebSocket);
this.state.account.removeListener('missedCall', this.missedCall);
this.state.account.removeListener('conferenceInvite', this.conferenceInviteFromWebSocket);
this.state.connection.removeAccount(this.state.account,
(error) => {
if (error) {
utils.timestampedLog('Failed to remove account:', error);
} else {
//utils.timestampedLog('Account removed');
}
if (this.state.connection) {
utils.timestampedLog('Web socket', Object.id(this.state.connection), 'will close');
this.state.connection.close();
}
this.setState({connection: null, account: null});
}
);
} else {
this.setState({connection: null, account: null});
}
}
startCallFromCallKeeper(data) {
utils.timestampedLog('Starting call from OS...');
let callUUID = data.callUUID || uuid.v4();
let is_conf = data.handle.search('videoconference.') === -1 ? false: true;
this.backToForeground();
if (is_conf) {
this.callKeepStartConference(data.handle, {audio: true, video: data.video || true, callUUID: callUUID});
} else {
this.callKeepStartCall(data.handle, {audio: true, video: data.video, callUUID: callUUID});
}
this._notificationCenter.removeNotification();
}
connectionStateChanged(oldState, newState) {
if (this.unmounted) {
return;
}
const connection = this.getConnection();
if (oldState) {
utils.timestampedLog('Web socket', connection, 'state changed:', oldState, '->' , newState);
}
switch (newState) {
case 'closed':
if (this.state.connection) {
utils.timestampedLog('Web socket was terminated');
this.state.connection.removeListener('stateChanged', this.connectionStateChanged);
this._notificationCenter.postSystemNotification('Connection lost');
}
//this.setState({connection: null, account: null});
this.setState({account: null});
break;
case 'ready':
this._notificationCenter.removeNotification();
this.processRegistration(this.state.accountId, this.state.password);
this.callKeeper.setAvailable(true);
break;
case 'disconnected':
if (this.registrationFailureTimer) {
clearTimeout(this.registrationFailureTimer);
this.registrationFailureTimer = null;
}
if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') {
this.hangupCall(this.state.currentCall.id, 'outgoing_connection_failed');
}
if (this.state.incomingCall) {
this.hangupCall(this.state.incomingCall.id, 'connection_failed');
}
this.setState({
registrationState: 'failed',
generatedVideoTrack: false,
});
break;
default:
if (this.state.registrationKeepalive !== true) {
this.setState({loading: 'Connecting...'});
}
break;
}
}
notificationCenter() {
return this._notificationCenter;
}
showRegisterFailure(reason) {
const connection = this.getConnection();
utils.timestampedLog('Registration error: ' + reason, 'on web socket', connection);
this.setState({
loading : null,
registrationState: 'failed',
status : {
msg : 'Sign In failed: ' + reason,
level : 'danger'
}
});
if (this.startedByPush) {
// TODO: hangup incoming call
}
}
registrationStateChanged(oldState, newState, data) {
if (this.unmounted) {
return;
}
const connection = this.getConnection();
if (oldState) {
utils.timestampedLog('Registration state changed:', oldState, '->', newState, 'on web socket', connection);
}
if (!this.state.account) {
utils.timestampedLog('Account disabled');
return;
}
if (newState === 'failed') {
let reason = data.reason;
if (reason === 904) {
// Sofia SIP: WAT
reason = 'Wrong account or password';
} else if (reason === 408) {
reason = 'Timeout';
}
this.showRegisterFailure(reason);
if (this.state.registrationKeepalive === true) {
if (this.state.connection !== null && this.state.connection.state === 'ready') {
utils.timestampedLog('Retry to register...');
this.state.account.register();
}
} else {
// add a timer to retry register after awhile
if (reason >= 500 || reason === 408) {
utils.timestampedLog('Retry to register after 5 seconds delay...');
setTimeout(this.state.account.register(), 5000);
} else {
if (this.registrationFailureTimer) {
utils.timestampedLog('Cancel registration timer');
clearTimeout(this.registrationFailureTimer);
this.registrationFailureTimer = null;
}
}
}
} else if (newState === 'registered') {
if (this.registrationFailureTimer) {
clearTimeout(this.registrationFailureTimer);
this.registrationFailureTimer = null;
}
this.setState({loading: null,
registrationKeepalive: true,
registrationState: 'registered',
defaultDomain: this.state.account ? this.state.account.id.split('@')[1]: null
});
//if (this.currentRoute === '/login' && (!this.startedByPush || Platform.OS === 'ios')) {
// TODO if the call does not arrive, we never get back to ready
if (this.currentRoute === '/login') {
this.changeRoute('/ready', 'registered');
}
return;
} else {
this.setState({status: null, registrationState: newState });
}
if (this.mustLogout) {
this.logout();
}
}
showInternalAlertPanel() {
this.setState({showIncomingModal: true});
//Vibration.vibrate(VIBRATION_PATTERN, true);
setTimeout(() => {
Vibration.cancel();
}, 30000);
}
hideInternalAlertPanel() {
Vibration.cancel();
this.setState({showIncomingModal: false});
}
heartbeat() {
if (this.unmounted) {
return;
}
this.heartbeats = this.heartbeats + 1;
if (this.heartbeats % 40 == 0) {
this.trimLogs();
}
if (this.state.connection) {
//console.log('Check calls in', this.state.appState, 'with connection', Object.id(this.state.connection), this.state.connection.state);
} else {
//console.log('Check calls in', this.state.appState, 'with no connection');
}
let callState;
if (this.state.currentCall && this.state.incomingCall && this.state.incomingCall === this.state.currentCall) {
//utils.timestampedLog('We have an incoming call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None');
callState = this.state.currentCall.state;
} else if (this.state.incomingCall) {
//utils.timestampedLog('We have an incoming call:', this.state.incomingCall ? (this.state.incomingCall.id + ' ' + this.state.incomingCall.state): 'None');
callState = this.state.incomingCall.state;
} else if (this.state.currentCall) {
//utils.timestampedLog('We have an outgoing call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None');
callState = this.state.currentCall.state;
} else if (this.state.outgoingCallUUID) {
//utils.timestampedLog('We have a pending outgoing call:', this.state.outgoingCallUUID);
} else {
//utils.timestampedLog('We have no calls');
if (this.state.appState === 'background' && this.state.connection && this.state.connection.state === 'ready') {
//this.closeConnection('background with no calls');
}
}
this.callKeeper.heartbeat();
}
stopRingback() {
//utils.timestampedLog('Stop ringback');
InCallManager.stopRingback();
}
resetGoToReadyTimer() {
if (this.goToReadyTimer !== null) {
clearTimeout(this.goToReadyTimer);
this.goToReadyTimer = null;
}
}
goToReadyNowAndCancelTimer() {
if (this.goToReadyTimer !== null) {
clearTimeout(this.goToReadyTimer);
this.goToReadyTimer = null;
this.changeRoute('/ready', 'cancel_timer_incoming_call');
}
}
isConference(call) {
const _call = call || this.state.currentCall;
if (_call && _call.hasOwnProperty('_participants')) {
return true;
}
return false;
}
callStateChanged(oldState, newState, data) {
if (this.unmounted) {
return;
}
// outgoing accepted: null -> progress -> accepted -> established -> terminated
// outgoing accepted: null -> progress -> established -> accepted -> terminated (with early media)
// incoming accepted: null -> incoming -> accepted -> established -> terminated
// 2nd incoming call is automatically rejected by sylkrtc library
/*
utils.timestampedLog('---currentCall start:', this.state.currentCall);
utils.timestampedLog('---incomingCall start:', this.state.incomingCall);
*/
let call = this.callKeeper._calls.get(data.id);
if (!call) {
utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager');
return;
}
let callUUID = call.id;
const connection = this.getConnection();
utils.timestampedLog('Sylkrtc call', callUUID, 'state change:', oldState, '->', newState, 'on web socket', connection);
/*
if (newState === 'established' || newState === 'accepted') {
// restore the correct UI state if it has transitioned illegally to /ready state
if (call.hasOwnProperty('_participants')) {
this.changeRoute('/conference', 'correct call state');
} else {
this.changeRoute('/call', 'correct call state');
}
}
*/
let newCurrentCall;
let newincomingCall;
let direction = call.direction;
let hasVideo = false;
let mediaType = 'audio';
let tracks;
let readyDelay = 5000;
if (this.state.incomingCall && this.state.currentCall) {
if (newState === 'terminated') {
if (this.state.incomingCall == this.state.currentCall) {
newCurrentCall = null;
newincomingCall = null;
}
if (this.state.incomingCall.id === call.id) {
if (oldState === 'incoming') {
//utils.timestampedLog('Call state changed:', 'incoming call must be cancelled');
this.hideInternalAlertPanel();
}
if (oldState === 'established' || oldState === 'accepted') {
//utils.timestampedLog('Call state changed:', 'incoming call ended');
this.hideInternalAlertPanel();
}
// new call must be cancelled
newincomingCall = null;
newCurrentCall = this.state.currentCall;
}
if (this.state.currentCall != this.state.incomingCall && this.state.currentCall.id === call.id) {
if (oldState === 'established' || newState === 'accepted') {
//utils.timestampedLog('Call state changed:', 'outgoing call must be hangup');
// old call must be closed
}
newCurrentCall = null;
newincomingCall = this.state.incomingCall;
}
} else if (newState === 'accepted') {
if (this.state.incomingCall === this.state.currentCall) {
newCurrentCall = this.state.incomingCall;
newincomingCall = this.state.incomingCall;
} else {
newCurrentCall = this.state.currentCall;
}
this.backToForeground();
} else if (newState === 'established') {
if (this.state.incomingCall === this.state.currentCall) {
//utils.timestampedLog("Incoming call media started");
newCurrentCall = this.state.incomingCall;
newincomingCall = this.state.incomingCall;
} else {
//utils.timestampedLog("Outgoing call media started");
newCurrentCall = this.state.currentCall;
}
} else {
//utils.timestampedLog('Call state changed:', 'We have two calls in unclear state');
}
} else if (this.state.incomingCall) {
//this.backToForeground();
//utils.timestampedLog('Call state changed: We have one incoming call');
newincomingCall = this.state.incomingCall;
newCurrentCall = this.state.incomingCall;
if (this.state.incomingCall.id === call.id) {
if (newState === 'terminated') {
this.startedByPush = false;
//utils.timestampedLog("Incoming call was cancelled");
this.setState({showIncomingModal: false});
this.hideInternalAlertPanel();
newincomingCall = null;
newCurrentCall = null;
readyDelay = 10;
} else if (newState === 'accepted') {
//utils.timestampedLog("Incoming call was accepted");
this.hideInternalAlertPanel();
this.backToForeground();
} else if (newState === 'established') {
//utils.timestampedLog("Incoming call media started");
this.hideInternalAlertPanel();
}
}
} else if (this.state.currentCall) {
//utils.timestampedLog('Call state changed: We have one current call');
newCurrentCall = newState === 'terminated' ? null : call;
newincomingCall = null;
if (newState !== 'terminated') {
this.setState({reconnectingCall: false});
}
} else {
newincomingCall = null;
newCurrentCall = null;
}
/*
utils.timestampedLog('---currentCall:', newCurrentCall);
utils.timestampedLog('---incomingCall:', newincomingCall);
*/
switch (newState) {
case 'progress':
this.callKeeper.setCurrentCallActive(callUUID);
this.backToForeground();
this.resetGoToReadyTimer();
tracks = call.getLocalStreams()[0].getVideoTracks();
mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio';
if (mediaType === 'video') {
this.speakerphoneOn();
} else {
this.speakerphoneOff();
}
if (!this.isConference(call)){
InCallManager.startRingback('_BUNDLE_');
}
break;
case 'established':
this.callKeeper.setCurrentCallActive(callUUID);
this.backToForeground();
this.resetGoToReadyTimer();
tracks = call.getLocalStreams()[0].getVideoTracks();
mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio';
InCallManager.start({media: mediaType});
if (direction === 'outgoing') {
this.stopRingback();
if (this.state.speakerPhoneEnabled) {
this.speakerphoneOn();
} else {
this.speakerphoneOff();
}
} else {
if (mediaType === 'video') {
this.speakerphoneOn();
} else {
this.speakerphoneOff();
}
}
break;
case 'accepted':
this.callKeeper.setCurrentCallActive(callUUID);
this.backToForeground();
this.resetGoToReadyTimer();
if (direction === 'outgoing') {
this.stopRingback();
}
break;
case 'terminated':
this._terminatedCalls.set(callUUID, true);
utils.timestampedLog(callUUID, direction, 'terminated with reason', data.reason);
if (this.state.incomingCall && this.state.incomingCall.id === call.id) {
newincomingCall = null;
}
if (this.state.currentCall && this.state.currentCall.id === call.id) {
newCurrentCall = null;
}
let callSuccesfull = false;
let reason = data.reason;
let play_busy_tone = !this.isConference(call);
let CALLKEEP_REASON;
if (!reason || reason.match(/200/)) {
if (oldState === 'progress' && direction === 'outgoing') {
reason = 'Cancelled';
play_busy_tone = false;
} else if (oldState === 'incoming') {
reason = 'Cancelled';
play_busy_tone = false;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
} else {
reason = 'Hangup';
callSuccesfull = true;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
}
} else if (reason.match(/402/)) {
reason = 'Payment required';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/403/)) {
//reason = 'Forbidden';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/404/)) {
reason = 'User not found';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/408/)) {
reason = 'Timeout';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/480/)) {
reason = 'Is not online';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
} else if (reason.match(/486/)) {
reason = 'Is busy';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
if (direction === 'outgoing') {
play_busy_tone = false;
}
} else if (reason.match(/603/)) {
reason = 'Cannot answer now';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
if (direction === 'outgoing') {
play_busy_tone = false;
}
} else if (reason.match(/487/)) {
reason = 'Cancelled';
play_busy_tone = false;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
} else if (reason.match(/488/)) {
reason = 'Unacceptable media';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/5\d\d/)) {
reason = 'Server failure';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/904/)) {
// Sofia SIP: WAT
reason = 'Wrong account or password';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else {
reason = 'Connection failed';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
}
if (play_busy_tone) {
this.playBusyTone();
}
if (direction === 'outgoing') {
this.setState({declineReason: reason});
}
this.stopRingback();
this.callKeeper.endCall(callUUID, CALLKEEP_REASON);
if (play_busy_tone && oldState !== 'established' && direction === 'outgoing') {
this._notificationCenter.postSystemNotification('Call ended:', {body: reason});
}
this.updateHistoryEntry(callUUID);
break;
default:
break;
}
/*
utils.timestampedLog('---currentCall end:', newCurrentCall);
utils.timestampedLog('---incomingCall end:', newincomingCall);
*/
this.setState({
currentCall: newCurrentCall,
incomingCall: newincomingCall
});
if (!this.state.currentCall && !this.state.incomingCall) {
this.speakerphoneOn();
if (!this.state.reconnectingCall) {
if (this.state.inFocus) {
if (this.currentRoute !== '/ready') {
utils.timestampedLog('Will go to ready in', readyDelay/1000, 'seconds (terminated)', callUUID);
this.goToReadyTimer = setTimeout(() => {
this.changeRoute('/ready', 'no_more_calls');
}, readyDelay);
}
} else {
if (this.currentRoute !== '/conference') {
this.changeRoute('/ready', 'no_more_calls');
}
}
}
}
if (this.state.currentCall) {
//console.log('Current:', this.state.currentCall.id);
}
if (this.state.incomingCall) {
//console.log('Incoming:', this.state.incomingCall.id);
}
}
handleRegistration(accountId, password, remember=true) {
if (this.state.account !== null && this.state.registrationState === 'registered' ) {
return;
}
this.setState({
accountId : accountId,
password : password,
loading : 'Connecting...'
});
if (this.state.connection === null) {
utils.timestampedLog('Web socket handle registration for', accountId);
const userAgent = 'Sylk Mobile';
if (this.state.phoneNumber) {
console.log('Phone number:', this.state.phoneNumber);
}
let connection = sylkrtc.createConnection({server: config.wsServer});
utils.timestampedLog('Web socket', Object.id(connection), 'was opened');
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
} else {
if (this.state.connection.state === 'ready' && this.state.registrationState !== 'registered') {
utils.timestampedLog('Web socket', Object.id(this.state.connection), 'handle registration for', accountId);
this.processRegistration(accountId, password);
}
}
}
processRegistration(accountId, password, displayName) {
if (!displayName) {
displayName = this.state.displayName;
}
if (!this.state.connection) {
return;
}
this.updateServerHistory();
utils.timestampedLog('Process registration for', accountId, '(', displayName, ')');
if (this.state.account && this.state.connection) {
this.state.connection.removeAccount(this.state.account,
(error) => {
this.setState({registrationState: null, registrationKeepalive: false});
}
);
}
const options = {
account: accountId,
password: password,
displayName: displayName || ''
};
if (this.state.connection._accounts.has(options.account)) {
return;
}
//utils.timestampedLog('Add register 10 sec timer');
this.registrationFailureTimer = setTimeout(() => {
this.showRegisterFailure('Register timeout');
this.processRegistration(accountId, password);
}, 10000);
const account = this.state.connection.addAccount(options, (error, account) => {
if (!error) {
account.on('outgoingCall', this.outgoingCall);
account.on('conferenceCall', this.outgoingConference);
account.on('registrationStateChanged', this.registrationStateChanged);
account.on('incomingCall', this.incomingCallFromWebSocket);
account.on('missedCall', this.missedCall);
account.on('conferenceInvite', this.conferenceInviteFromWebSocket);
//utils.timestampedLog('Web socket account', account.id, 'is ready, registering...');
this.setState({account: account});
this._sendPushToken();
account.register();
storage.set('account', {
accountId: this.state.accountId,
password: this.state.password
});
} else {
this.showRegisterFailure(408);
}
});
}
setDevice(device) {
const oldDevices = Object.assign({}, this.state.devices);
if (device.kind === 'videoinput') {
oldDevices['camera'] = device;
} else if (device.kind === 'audioinput') {
oldDevices['mic'] = device;
}
this.setState({devices: oldDevices});
storage.set('devices', oldDevices);
sylkrtc.utils.closeMediaStream(this.state.localMedia);
this.getLocalMedia();
}
getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) { // eslint-disable-line space-infix-ops
let callType = mediaConstraints.video ? 'video': 'audio';
utils.timestampedLog('Get local media for', callType, 'call');
const constraints = Object.assign({}, mediaConstraints);
if (constraints.video === true) {
if ((nextRoute === '/conference')) {
constraints.video = {
'width': {
'ideal': 640
},
'height': {
'ideal': 480
}
};
// TODO: remove this, workaround so at least safari works when joining a video conference
} else if (nextRoute === '/conference' && isSafari) {
constraints.video = false;
} else {
// ask for 720p video
constraints.video = {
'width': {
'ideal': 640
},
'height': {
'ideal': 480
}
};
}
}
logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints);
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
devices.forEach((device) => {
//console.log(device);
if ('video' in constraints && 'camera' in this.state.devices) {
if (constraints.video && constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) {
constraints.video.deviceId = {
exact: device.deviceId
};
}
}
if ('mic' in this.state.devices) {
if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) {
// constraints.audio = {
// deviceId: {
// exact: device.deviceId
// }
// };
}
}
});
})
.catch((error) => {
utils.timestampedLog('Error: device enumeration failed:', error);
})
.then(() => {
return navigator.mediaDevices.getUserMedia(constraints)
})
.then((localStream) => {
clearTimeout(this.loadScreenTimer);
//utils.timestampedLog('Local media acquired');
this.setState({localMedia: localStream});
if (nextRoute !== null) {
this.changeRoute(nextRoute);
}
})
.catch((error) => {
utils.timestampedLog('Access to local media failed, trying audio only', error);
navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
.then((localStream) => {
clearTimeout(this.loadScreenTimer);
if (nextRoute !== null) {
this.changeRoute(nextRoute, 'local media aquired');
}
})
.catch((error) => {
utils.timestampedLog('Access to local media failed:', error);
clearTimeout(this.loadScreenTimer);
this._notificationCenter.postSystemNotification("Can't access camera or microphone");
this.setState({
loading: null
});
this.changeRoute('/ready', 'local media failure');
});
});
}
getConnection() {
return this.state.connection ? Object.id(this.state.connection): null;
}
callKeepStartConference(targetUri, options={audio: true, video: true, participants: []}) {
if (!targetUri) {
return;
}
this.resetGoToReadyTimer();
let callUUID = options.callUUID || uuid.v4();
let participants = options.participants || null;
this.addConferenceHistoryEntry(targetUri, callUUID);
let participantsToInvite = [];
if (participants) {
participants.forEach((participant_uri) => {
if (participant_uri === this.state.accountId) {
return;
}
participantsToInvite.push(participant_uri);
});
}
this.outgoingMedia = options;
this.setState({outgoingCallUUID: callUUID,
reconnectingCall: false,
participantsToInvite: participantsToInvite
});
const media = options.video ? 'video' : 'audio';
if (participantsToInvite) {
utils.timestampedLog('Will start', media, 'conference', callUUID, 'to', targetUri, 'with', participantsToInvite);
} else {
utils.timestampedLog('Will start', media, 'conference', callUUID, 'to', targetUri);
}
this.respawnConnection();
this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: callUUID});
}
callKeepStartCall(targetUri, options) {
this.resetGoToReadyTimer();
let callUUID = options.callUUID || uuid.v4();
this.setState({outgoingCallUUID: callUUID, reconnectingCall: false});
utils.timestampedLog('User will start call', callUUID, 'to', targetUri);
this.respawnConnection();
this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: callUUID});
}
startCall(targetUri, options) {
this.setState({targetUri: targetUri});
this.getLocalMedia(Object.assign({audio: true, video: options.video}, options), '/call');
}
timeoutCall(callUUID, uri) {
utils.timestampedLog('Timeout answering call', callUUID);
this.addConferenceHistoryEntry(uri, callUUID, direction='received');
this.forceUpdate();
}
closeLocalMedia() {
if (this.state.localMedia != null) {
utils.timestampedLog('Close local media');
sylkrtc.utils.closeMediaStream(this.state.localMedia);
this.setState({localMedia: null});
}
}
callKeepAcceptCall(callUUID) {
// called from user interaction with Old alert panel
// options used to be media to accept audio only but native panels do not have this feature
utils.timestampedLog('CallKeep will answer call', callUUID);
this.callKeeper.acceptCall(callUUID);
this.hideInternalAlertPanel();
}
callKeepRejectCall(callUUID) {
// called from user interaction with Old alert panel
utils.timestampedLog('CallKeep will reject call', callUUID);
this.callKeeper.rejectCall(callUUID);
this.hideInternalAlertPanel();
}
acceptCall(callUUID) {
utils.timestampedLog('User accepted call', callUUID);
this.hideInternalAlertPanel();
this.resetGoToReadyTimer();
if (this.state.currentCall) {
utils.timestampedLog('Will hangup current call first');
this.hangupCall(this.state.currentCall.id, 'accept_new_call');
// call will continue after transition to /ready
} else {
utils.timestampedLog('Will get local media now');
let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.mediaTypes.video) ? true : false;
this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call');
}
}
rejectCall(callUUID) {
// called by Call Keep when user rejects call
utils.timestampedLog('User rejected call', callUUID);
this.hideInternalAlertPanel();
if (!this.state.currentCall) {
this.changeRoute('/ready', 'rejected');
}
if (this.state.incomingCall && this.state.incomingCall.id === callUUID) {
utils.timestampedLog('Sylkrtc terminate call', callUUID, 'in', this.state.incomingCall.state, 'state');
this.state.incomingCall.terminate();
}
}
hangupCall(callUUID, reason) {
utils.timestampedLog('Call', callUUID, 'hangup with reason:', reason);
let call = this.callKeeper._calls.get(callUUID);
let direction = null;
let targetUri = null;
if (call) {
let direction = call.direction;
utils.timestampedLog('Sylkrtc terminate call', callUUID, 'in', call.state, 'state');
call.terminate();
}
if (this.busyToneInterval) {
clearInterval(this.busyToneInterval);
this.busyToneInterval = null;
}
if (reason === 'outgoing_connection_failed') {
this.setState({reconnectingCall: true, outgoingCallUUID: uuid.v4()});
return;
}
if (reason === 'user_cancel_call' ||
reason === 'user_hangup_call' ||
reason === 'answer_failed' ||
reason === 'callkeep_hangup_call' ||
reason === 'accept_new_call' ||
reason === 'stop_preview' ||
reason === 'escalate_to_conference' ||
reason === 'user_hangup_conference_confirmed' ||
reason === 'timeout'
) {
this.changeRoute('/ready', reason);
} else if (reason === 'user_hangup_conference') {
utils.timestampedLog('Save conference maybe?');
setTimeout(() => {
this.changeRoute('/ready', 'conference_really_ended');
}, 15000);
} else if (reason === 'user_cancelled_conference') {
utils.timestampedLog('Save conference maybe?');
setTimeout(() => {
this.changeRoute('/ready', 'conference_really_ended');
}, 15000);
} else {
utils.timestampedLog('Will go to ready in 4 seconds (hangup)');
setTimeout(() => {
this.changeRoute('/ready', reason);
}, 4000);
}
}
playBusyTone() {
//utils.timestampedLog('Play busy tone');
InCallManager.stop({busytone: '_BUNDLE_'});
}
callKeepSendDtmf(digits) {
utils.timestampedLog('Send DTMF', digits);
if (this.state.currentCall) {
this.callKeeper.sendDTMF(this.state.currentCall.id, digits);
}
}
toggleProximity() {
storage.set('proximityEnabled', !this.state.proximityEnabled);
if (!this.state.proximityEnabled) {
utils.timestampedLog('Proximity sensor enabled');
} else {
utils.timestampedLog('Proximity sensor disabled');
}
this.setState({proximityEnabled: !this.state.proximityEnabled});
}
toggleMute(callUUID, mute) {
utils.timestampedLog('Toggle mute for call', callUUID, ':', mute);
this.callKeeper.setMutedCall(callUUID, mute);
this.setState({muted: mute});
}
toggleSpeakerPhone() {
if (this.state.speakerPhoneEnabled === true) {
this.speakerphoneOff();
} else {
this.speakerphoneOn();
}
}
speakerphoneOn() {
utils.timestampedLog('Speakerphone On');
this.setState({speakerPhoneEnabled: true});
InCallManager.setForceSpeakerphoneOn(true);
}
speakerphoneOff() {
utils.timestampedLog('Speakerphone Off');
this.setState({speakerPhoneEnabled: false});
InCallManager.setForceSpeakerphoneOn(false);
}
startGuestConference(targetUri) {
this.setState({targetUri: targetUri});
this.getLocalMedia({audio: true, video: true});
}
outgoingCall(call) {
// called by sylkrtc.js when an outgoing call starts
const localStreams = call.getLocalStreams();
let mediaType = 'audio';
let hasVideo = false;
if (localStreams.length > 0) {
const localStream = call.getLocalStreams()[0];
mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio';
hasVideo = localStream.getVideoTracks().length > 0 ? true : false;
}
this.callKeeper.startOutgoingCall(call.id, call.remoteIdentity.uri, hasVideo);
utils.timestampedLog('Outgoing', mediaType, 'call', call.id, 'started to', call.remoteIdentity.uri);
this.callKeeper.addWebsocketCall(call);
call.on('stateChanged', this.callStateChanged);
this.setState({currentCall: call});
}
outgoingConference(call) {
// called by sylrtc.js when an outgoing conference starts
const localStreams = call.getLocalStreams();
let mediaType = 'audio';
let hasVideo = false;
if (localStreams.length > 0) {
const localStream = call.getLocalStreams()[0];
mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio';
hasVideo = localStream.getVideoTracks().length > 0 ? true : false;
}
utils.timestampedLog('Outgoing', mediaType, 'conference', call.id, 'started to', call.remoteIdentity.uri);
this.callKeeper.addWebsocketCall(call);
call.on('stateChanged', this.callStateChanged);
this.setState({currentCall: call});
}
_onLocalNotificationReceivedBackground(notification) {
let notificationContent = notification.getData();
utils.timestampedLog('Handle local iOS PUSH notification: ', notificationContent);
}
_onNotificationReceivedBackground(notification) {
let notificationContent = notification.getData();
const event = notificationContent['event'];
const callUUID = notificationContent['session-id'];
const to = notificationContent['to_uri'];
const from = notificationContent['from_uri'];
const displayName = notificationContent['from_display_name'];
const outgoingMedia = {audio: true, video: notificationContent['media-type'] === 'video'};
const mediaType = notificationContent['media-type'] || 'audio';
/*
* Local Notification Payload
*
* - `alertBody` : The message displayed in the notification alert.
* - `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view";
* - `soundName` : The sound played when the notification is fired (optional).
* - `category` : The category of this notification, required for actionable notifications (optional).
* - `userInfo` : An optional object containing additional notification data.
*/
if (event === 'incoming_session') {
utils.timestampedLog('Push notification: incoming call', callUUID);
this.startedByPush = true;
this.incomingCallFromPush(callUUID, from, displayName, mediaType);
} else if (event === 'incoming_conference_request') {
utils.timestampedLog('Push notification: incoming conference', callUUID);
this.startedByPush = true;
this.incomingConference(callUUID, to, from, displayName, outgoingMedia);
} else if (event === 'cancel') {
utils.timestampedLog('Push notification: cancel call', callUUID);
VoipPushNotification.presentLocalNotification({alertBody:'Call cancelled'});
this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED);
}
/*
if (notificationContent['event'] === 'incoming_session') {
VoipPushNotification.presentLocalNotification({
alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name']
});
}
*/
if (VoipPushNotification.wakeupByPush) {
utils.timestampedLog('We wake up by push notification');
VoipPushNotification.wakeupByPush = false;
VoipPushNotification.onVoipNotificationCompleted(callUUID);
}
}
backToForeground() {
if (this.state.appState !== 'active') {
this.callKeeper.backToForeground();
}
if (this.state.accountId) {
this.handleRegistration(this.state.accountId, this.state.password);
}
}
incomingConference(callUUID, to, from, displayName, outgoingMedia={audio: true, video: true}) {
if (this.unmounted) {
return;
}
const mediaType = outgoingMedia.video ? 'video' : 'audio';
utils.timestampedLog('Incoming', mediaType, 'conference invite from', from, displayName, 'to room', to);
if (this.state.account && from === this.state.account.id) {
utils.timestampedLog('Reject conference call from myself', callUUID);
this.callKeeper.rejectCall(callUUID);
return;
}
if (this.autoRejectIncomingCall(callUUID, from, to)) {
return;
}
this.setState({incomingCallUUID: callUUID});
this.callKeeper.handleConference(callUUID, to, from, displayName, mediaType, outgoingMedia);
}
startConference(targetUri, options={audio: true, video: true, participants: []}) {
utils.timestampedLog('New outgoing conference to room', targetUri);
this.setState({targetUri: targetUri});
this.getLocalMedia({audio: options.audio, video: options.video}, '/conference');
}
escalateToConference(participants) {
let outgoingMedia = {audio: true, video: true};
let mediaType = 'video';
let call;
if (this.state.currentCall) {
call = this.state.currentCall;
} else if (this.state.incomingCall) {
call = this.state.currentCall;
} else {
console.log('No call to escalate');
return
}
const localStreams = call.getLocalStreams();
if (localStreams.length > 0) {
const localStream = call.getLocalStreams()[0];
if (localStream.getVideoTracks().length == 0) {
outgoingMedia.video = false;
mediaType = 'audio';
}
}
this.outgoingMedia = outgoingMedia;
this.participantsToInvite = participants;
console.log('Escalate', mediaType, 'call', call.id, 'to conference with', participants.toString());
this.hangupCall(call.id, 'escalate_to_conference');
}
conferenceInviteFromWebSocket(data) {
// comes from web socket
utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room);
if (this.isConference()) {
return;
}
//this._notificationCenter.postSystemNotification('Expecting conference invite', {body: `from ${data.originator.displayName || data.originator.uri}`});
}
updateLinkingURL = (event) => {
// this handles the use case where the app is running in the background and is activated by the listener...
//console.log('Updated Linking url', event.url);
this.eventFromUrl(event.url);
DeepLinking.evaluateUrl(event.url);
}
eventFromUrl(url) {
url = decodeURI(url);
try {
let direction;
let event;
let callUUID;
let from;
let to;
let displayName;
var url_parts = url.split("/");
let scheme = url_parts[0];
//console.log(url_parts);
if (scheme === 'sylk:') {
//sylk://conference/incoming/callUUID/from/to/media - when Android is asleep
//sylk://call/outgoing/callUUID/to/displayName - from system dialer/history
//sylk://call/incoming/callUUID/from/to/displayName - when Android is asleep
//sylk://call/cancel//callUUID - when Android is asleep
event = url_parts[2];
direction = url_parts[3];
callUUID = url_parts[4];
from = url_parts[5];
to = url_parts[6];
displayName = url_parts[7];
mediaType = url_parts[8] || 'audio';
if (event !== 'cancel' && from && from.search('@videoconference.') > -1) {
event = 'conference';
to = from;
}
this.setState({targetUri: from});
} else if (scheme === 'https:') {
// https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link
// https://webrtc.sipthor.net/call/alice@example.com from external web link
direction = 'outgoing';
event = url_parts[3];
to = url_parts[4];
callUUID = uuid.v4();
if (to.indexOf('@') === -1 && event === 'conference') {
to = url_parts[4] + '@' + config.defaultConferenceDomain;
} else if (to.indexOf('@') === -1 && event === 'call') {
to = url_parts[4] + '@' + this.state.defaultDomain;
}
this.setState({targetUri: to});
}
if (event === 'conference') {
utils.timestampedLog('Conference from external URL:', url);
this.startedByPush = true;
if (direction === 'outgoing' && to) {
utils.timestampedLog('Outgoing conference to', to);
this.backToForeground();
this.callKeepStartConference(to, {audio: true, video: true, callUUID: callUUID});
} else if (direction === 'incoming' && from) {
utils.timestampedLog('Incoming conference from', from);
// allow app to wake up
this.backToForeground();
const media = {audio: true, video: mediaType === 'video'}
this.incomingConference(callUUID, to, from, displayName, media);
}
} else if (event === 'call') {
this.startedByPush = true;
if (direction === 'outgoing') {
utils.timestampedLog('Call from external URL:', url);
utils.timestampedLog('Outgoing call to', from);
this.backToForeground();
this.callKeepStartCall(from, {audio: true, video: false, callUUID: callUUID});
} else if (direction === 'incoming') {
utils.timestampedLog('Call from external URL:', url);
utils.timestampedLog('Incoming call from', from);
this.backToForeground();
this.incomingCallFromPush(callUUID, from, displayName, mediaType, true);
} else if (direction === 'cancel') {
this.cancelIncomingCall(callUUID);
}
} else {
utils.timestampedLog('Error: Invalid external URL event', event);
}
} catch (err) {
utils.timestampedLog('Error parsing URL', url, ":", err);
}
}
autoRejectIncomingCall(callUUID, from, to) {
//utils.timestampedLog('Check auto reject call from', from);
if (this.state.blockedUris && this.state.blockedUris.indexOf(from) > -1) {
utils.timestampedLog('Reject call', callUUID, 'from blocked URI', from);
this.callKeeper.rejectCall(callUUID);
this._notificationCenter.postSystemNotification('Call rejected', {body: `from ${from}`});
return true;
}
const fromDomain = '@' + from.split('@')[1]
if (this.state.blockedUris && this.state.blockedUris.indexOf(fromDomain) > -1) {
utils.timestampedLog('Reject call', callUUID, 'from blocked domain', fromDomain);
this.callKeeper.rejectCall(callUUID);
this._notificationCenter.postSystemNotification('Call rejected', {body: `from domain ${fromDomain}`});
return true;
}
if (this.state.currentCall && this.state.incomingCall && this.state.currentCall === this.state.incomingCall && this.state.incomingCall.id !== callUUID) {
utils.timestampedLog('Reject second incoming call');
this.callKeeper.rejectCall(callUUID);
}
if (this.state.account && from === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri === from) {
utils.timestampedLog('Reject call to myself', callUUID);
this.callKeeper.rejectCall(callUUID);
return true;
}
if (this._terminatedCalls.has(callUUID)) {
utils.timestampedLog('Reject call already terminated', callUUID);
this.cancelIncomingCall(callUUID);
return true;
}
if (this.isConference()) {
utils.timestampedLog('Reject call while in a conference', callUUID);
if (to !== this.state.targetUri) {
this._notificationCenter.postSystemNotification('Missed call from', {body: from});
}
this.callKeeper.rejectCall(callUUID);
return true;
}
if (this.state.currentCall && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri !== from) {
utils.timestampedLog('Reject call while outgoing in progress', callUUID);
this.callKeeper.rejectCall(callUUID);
this._notificationCenter.postSystemNotification('Missed call from', {body: from});
return true;
}
return false;
}
autoAcceptIncomingCall(callUUID, from) {
// TODO: handle ping pong where we call each other back
if (this.state.currentCall &&
this.state.currentCall.direction === 'outgoing' &&
this.state.currentCall.state === 'progress' &&
this.state.currentCall.remoteIdentity.uri === from) {
this.hangupCall(this.state.currentCall.id, 'accept_new_call');
this.setState({currentCall: null});
utils.timestampedLog('Auto accept incoming call from same address I am calling', callUUID);
return true;
}
return false;
}
incomingCallFromPush(callUUID, from, displayName, mediaType, force) {
//utils.timestampedLog('Handle incoming PUSH call', callUUID, 'from', from, '(', displayName, ')');
if (this.unmounted) {
return;
}
if (this.autoRejectIncomingCall(callUUID, from)) {
return;
}
//this.showInternalAlertPanel();
if (this.autoAcceptIncomingCall(callUUID, from)) {
return;
}
this.goToReadyNowAndCancelTimer();
this.setState({targetUri: from});
let skipNativePanel = false;
if (!this.callKeeper._calls.get(callUUID) || (this.state.currentCall && this.state.currentCall.direction === 'outgoing')) {
//this._notificationCenter.postSystemNotification('Incoming call', {body: `from ${from}`});
if (Platform.OS === 'android' && this.state.appState === 'foreground') {
skipNativePanel = true;
}
}
this.callKeeper.incomingCallFromPush(callUUID, from, displayName, mediaType, force, skipNativePanel);
}
incomingCallFromWebSocket(call, mediaTypes) {
if (this.unmounted) {
return;
}
this.callKeeper.addWebsocketCall(call);
const callUUID = call.id;
const from = call.remoteIdentity.uri;
//utils.timestampedLog('Handle incoming web socket call', callUUID, 'from', from, 'on connection', Object.id(this.state.connection));
// because of limitation in Sofia stack, we cannot have more then two calls at a time
// we can have one outgoing call and one incoming call but not two incoming calls
// we cannot have two incoming calls, second one is automatically rejected by sylkrtc.js
if (this.autoRejectIncomingCall(callUUID, from)) {
return;
}
const autoAccept = this.autoAcceptIncomingCall(callUUID, from);
this.goToReadyNowAndCancelTimer();
call.mediaTypes = mediaTypes;
call.on('stateChanged', this.callStateChanged);
this.setState({incomingCall: call});
let skipNativePanel = false;
if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') {
if (Platform.OS === 'android') {
this.showInternalAlertPanel();
skipNativePanel = true;
}
}
this.callKeeper.incomingCallFromWebSocket(call, autoAccept, skipNativePanel);
}
missedCall(data) {
utils.timestampedLog('Missed call from ' + data.originator.uri, '(', data.originator.displayName, ')');
if (!this.state.currentCall) {
let from = data.originator.displayName || data.originator.uri;
this._notificationCenter.postSystemNotification('Missed call', {body: `from ${from}`});
if (Platform.OS === 'ios') {
VoipPushNotification.presentLocalNotification({alertBody:'Missed call from ' + from});
}
}
this.updateServerHistory()
}
updateServerHistory() {
if (this.currentRoute === '/ready') {
this.setState({refreshHistory: !this.state.refreshHistory});
}
}
startPreview() {
this.getLocalMedia({audio: true, video: true}, '/preview');
}
updateHistoryEntry(callUUID) {
let newHistory = this.state.localHistory;
var historyItem = this.findObjectByKey(newHistory, 'sessionId', callUUID);
if (historyItem) {
let current_datetime = new Date();
let stopTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
historyItem.stopTime = stopTime;
var diff = current_datetime.getTime() - historyItem.startTimeObject.getTime();
historyItem.duration = parseInt(diff/1000);
delete historyItem['startTimeObject'];
if (this._historyConferenceParticipants.has(callUUID)) {
historyItem.participants = this._historyConferenceParticipants.get(callUUID);
} else {
historyItem.participants = [];
}
this.setState({localHistory: newHistory});
storage.set('history', newHistory);
}
}
setFavoriteUri(uri) {
let favoriteUris = this.state.favoriteUris;
let idx = favoriteUris.indexOf(uri);
let ret;
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,
refreshFavorites: !this.state.refreshFavorites});
return ret;
}
setBlockedUri(uri) {
let blockedUris = this.state.blockedUris;
console.log('Old blocked Uris:', blockedUris);
let ret;
let idx = blockedUris.indexOf(uri);
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});
return ret;
}
saveParticipant(callUUID, room, uri) {
if (this._historyConferenceParticipants.has(callUUID)) {
let old_participants = this._historyConferenceParticipants.get(callUUID);
if (old_participants.indexOf(uri) === -1) {
old_participants.push(uri);
}
} else {
let new_participants = [uri];
this._historyConferenceParticipants.set(callUUID, new_participants);
}
if (!this.myParticipants) {
this.myParticipants = new Object();
}
if (this.myParticipants.hasOwnProperty(room)) {
let old_uris = this.myParticipants[room];
if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) {
this.myParticipants[room].push(uri);
}
} else {
let new_uris = [];
if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) {
new_uris.push(uri);
}
if (new_uris) {
this.myParticipants[room] = new_uris;
}
}
storage.set('myParticipants', this.myParticipants);
}
saveDisplayName(uri, displayName) {
displayName = displayName.trim();
let myDisplayNames;
if (!this.state.myDisplayNames) {
myDisplayNames = new Object();
} else {
myDisplayNames = this.state.myDisplayNames;
}
myDisplayNames[uri] = displayName;
storage.set('myDisplayNames', myDisplayNames);
this.setState({myDisplayNames: myDisplayNames});
if (displayName && uri === this.state.accountId) {
storage.set('displayName', displayName);
this.setState({displayName: displayName});
if (this.state.account && displayName !== this.state.account.displayName) {
this.processRegistration(this.state.accountId, this.state.password, displayName);
}
}
}
saveInvitedParties(room, uris) {
room = room.split('@')[0];
//console.log('Save invited parties', uris, 'for room', room);
if (!this.myInvitedParties) {
this.myInvitedParties = new Object();
}
if (this.myInvitedParties.hasOwnProperty(room)) {
let old_uris = this.myInvitedParties[room];
uris.forEach((uri) => {
if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) {
this.myInvitedParties[room].push(uri);
}
});
} else {
let new_uris = [];
uris.forEach((uri) => {
if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) {
new_uris.push(uri);
}
});
if (new_uris) {
this.myInvitedParties[room] = new_uris;
}
}
storage.set('myInvitedParties', this.myInvitedParties);
this.setState({myInvitedParties: this.myInvitedParties});
}
deleteHistoryEntry(uri) {
let history = this.state.localHistory;
for (var i = history.length - 1; i >= 0; --i) {
if (history[i].remoteParty === uri) {
history.splice(i,1);
}
}
storage.set('history', history);
this.setState({localHistory: history});
}
addConferenceHistoryEntry(uri, callUUID, direction='placed', participants=[]) {
let current_datetime = new Date();
let startTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
let item = {
remoteParty: uri,
direction: direction,
type: 'history',
conference: true,
participants: participants,
media: ['audio', 'video'],
displayName: uri.split('@')[0],
sessionId: callUUID,
startTime: startTime,
stopTime: startTime,
startTimeObject: current_datetime,
duration: 0,
tags: ['history', 'local']
};
const historyItem = Object.assign({}, item);
let newHistory = this.state.localHistory;
newHistory.push(historyItem);
this.setState({localHistory: newHistory});
storage.set('history', newHistory);
}
render() {
let footerBox = ;
let extraStyles = {};
if (this.state.localMedia || this.state.registrationState === 'registered') {
footerBox = null;
}
return (
this.setState({
Width_Layout : event.nativeEvent.layout.width,
Height_Layout : event.nativeEvent.layout.height
}, ()=> this._detectOrientation())}>
);
}
notFound(match) {
const status = {
title : '404',
message : 'Oops, the page your looking for can\'t found',
level : 'danger',
width : 'large'
}
return (
);
}
saveHistoryForLater(history) {
//console.log('Cache history for later', history.length)
this.cachedHistory = history;
storage.set('cachedHistory', history);
}
hideLogsModal() {
this.setState({showLogsModal: false});
}
purgeLogs() {
RNFS.unlink(logfile)
.then(() => {
utils.timestampedLog('Log file initialized');
this.showLogs();
})
// `unlink` will throw an error, if the item to unlink does not exist
.catch((err) => {
console.log(err.message);
});
}
showLogs() {
this.setState({showLogsModal: true});
RNFS.readFile(logfile, 'utf8').then((content) => {
console.log('Read', content.length, 'bytes from', logfile);
const lastlines = content.split('\n').slice(-MAX_LOG_LINES).join('\n');
this.setState({logs: lastlines});
});
}
trimLogs() {
RNFS.readFile(logfile, 'utf8').then((content) => {
const lines = content.split('\n');
//console.log('Read', lines.length, 'lines and', content.length, 'bytes from', logfile);
if (lines.length > (MAX_LOG_LINES + 50) || content.length > 100000) {
const text = lines.slice(-MAX_LOG_LINES).join('\n');
RNFS.writeFile(logfile, text + '\r\n', 'utf8')
.then((success) => {
//console.log('Trimmed logs to', MAX_LOG_LINES, 'lines and', text.length, 'bytes');
})
.catch((err) => {
console.log(err.message);
});
}
});
}
ready() {
return (
);
}
preview() {
return (
);
}
call() {
let call = this.state.currentCall || this.state.incomingCall;
return (
)
}
conference() {
let _previousParticipants = new Set();
/*
if (this.myParticipants) {
let room = this.state.targetUri.split('@')[0];
if (this.myParticipants.hasOwnProperty(room)) {
let uris = this.myParticipants[room];
if (uris) {
uris.forEach((uri) => {
if (uri.search(this.state.defaultDomain) > -1) {
let user = uri.split('@')[0];
_previousParticipants.add(user);
} else {
_previousParticipants.add(uri);
}
});
}
}
}
*/
if (this.myInvitedParties) {
let room = this.state.targetUri.split('@')[0];
if (this.myInvitedParties.hasOwnProperty(room)) {
let uris = this.myInvitedParties[room];
if (uris) {
uris.forEach((uri) => {
_previousParticipants.add(uri);
});
}
}
}
let previousParticipants = Array.from(_previousParticipants);
return (
)
}
+ matchContact(contact, filter='', matchDisplayName=true) {
+ if (contact.remoteParty.toLowerCase().startsWith(filter.toLowerCase())) {
+ return true;
+ }
+
+ if (matchDisplayName && contact.displayName && contact.displayName.toLowerCase().indexOf(filter.toLowerCase()) > -1) {
+ return true;
+ }
+
+ return false;
+ }
+
+ lookupContacts(text, addressbook=true, favorites=true, localHistory=true, serverHistory=true) {
+ let contacts = [];
+
+ if (addressbook) {
+ const addressbook_contacts = this.contacts.filter(contact => this.matchContact(contact, text));
+ addressbook_contacts.forEach((c) => {
+ const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false));
+ if (existing_contacts.length === 0) {
+ contacts.push(c);
+ }
+ });
+ }
+
+ if (favorites) {
+ const favorite_contacts = this.favoritesContacts.filter(contact => this.matchContact(contact, text));
+ favorite_contacts.forEach((c) => {
+ const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false));
+ if (existing_contacts.length === 0) {
+ contacts.push(c);
+ }
+ });
+ }
+
+ if (localHistory) {
+ const local_history_contacts = this.state.localHistory.filter(contact => this.matchContact(contact, text));
+ local_history_contacts.forEach((c) => {
+ const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false));
+ if (c.remoteParty.toLowerCase().indexOf('@guest.')) {
+ }
+ if (c.remoteParty.toLowerCase().indexOf('@conference.')) {
+ }
+ if (c.remoteParty.toLowerCase().indexOf('@videoconference.')) {
+ }
+ if (existing_contacts.length === 0) {
+ contacts.push(c);
+ }
+ });
+ }
+
+ if (serverHistory) {
+ const server_history_contacts = this.cachedHistory.filter(contact => this.matchContact(contact, text));
+ server_history_contacts.forEach((c) => {
+ const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.remoteParty.toLowerCase(), false));
+ if (c.remoteParty.toLowerCase().indexOf('@guest.')) {
+ }
+ if (c.remoteParty.toLowerCase().indexOf('@conference.')) {
+ }
+ if (existing_contacts.length === 0) {
+ contacts.push(c);
+ }
+ });
+ }
+
+ return contacts;
+ }
+
+ get favoritesContacts() {
+ let favoriteContacts = [];
+ let displayName = '';
+ let conference = false;
+
+ this.state.favoriteUris.forEach((uri) => {
+
+ if (!uri) {
+ return;
+ }
+
+ uri = uri.toLowerCase();
+
+ displayName = '';
+
+ if (this.state.myDisplayNames && this.state.myDisplayNames.hasOwnProperty(uri)) {
+ displayName = this.state.myDisplayNames[uri];
+ }
+
+ conference = false;
+
+ let tags = ['favorite'];
+
+ if (uri.indexOf('@videoconference.') > -1) {
+ displayName = uri.split('@')[0];
+ const room = uri.split('@')[0];
+ uri = room + '@' + config.defaultConferenceDomain;
+ conference = true;
+ tags.push('conference');
+ }
+
+ const item = {
+ remoteParty: uri,
+ displayName: displayName,
+ conference: conference,
+ type: 'contact',
+ id: uuid.v4(),
+ tags: tags
+ };
+
+ favoriteContacts.push(item);
+ });
+
+ return favoriteContacts;
+ }
+
+
conferenceByUri(urlParameters) {
const targetUri = utils.normalizeUri(urlParameters.targetUri, config.defaultConferenceDomain);
const idx = targetUri.indexOf('@');
const uri = {};
const pattern = /^[A-Za-z0-9\-\_]+$/g;
uri.user = targetUri.substring(0, idx);
// check if the uri.user is valid
if (!pattern.test(uri.user)) {
const status = {
title : 'Invalid conference',
message : `Oops, the conference ID is invalid: ${targetUri}`,
level : 'danger',
width : 'large'
}
return (
);
}
return (
);
}
login() {
let registerBox;
let statusBox;
this.mustLogout = false;
if (this.state.status !== null) {
statusBox = (
);
}
if (this.state.registrationState !== 'registered') {
registerBox = (
);
}
return (
{registerBox}
{statusBox}
);
}
logout() {
this.callKeeper.setAvailable(false);
if (!this.mustLogout && this.state.registrationState !== null && this.state.connection && this.state.connection.state === 'ready') {
// remove token from server
this.mustLogout = true;
this.state.account.setDeviceToken('None', Platform.OS, deviceId, true, bundleId);
this.state.account.register();
return;
} else if (this.mustLogout && this.state.connection && this.state.account) {
this.state.account.unregister();
}
this.tokenSent = false;
if (this.state.connection && this.state.account) {
this.state.connection.removeAccount(this.state.account, (error) => {
if (error) {
logger.debug(error);
}
});
}
storage.set('account', {accountId: this.state.accountId,
password: this.state.password});
this.serverHistory = [];
this.setState({account: null,
registrationState: null,
registrationKeepalive: false,
status: null,
autoLogin: false,
history: [],
localHistory: [],
cachedHistory: [],
defaultDomain: config.defaultDomain
});
this.changeRoute('/login');
return null;
}
main() {
return null;
}
}
export default Sylk;
diff --git a/app/assets/styles/blink/_ConferenceBox.scss b/app/assets/styles/blink/_ConferenceBox.scss
index 0bd7c1a..dac32fa 100644
--- a/app/assets/styles/blink/_ConferenceBox.scss
+++ b/app/assets/styles/blink/_ConferenceBox.scss
@@ -1,70 +1,107 @@
.container {
flex: 1;
}
-.audioContainer {
- margin-top: 120px;
- margin-left: 10px;
-}
-
-.button {
- background-color: white;
- margin: 8px;
+.conferenceContainerLandscape {
+ flex-direction: row;
+ align-content: flex-end;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
}
-.iosButton {
- background-color: white;
- margin: 8px;
- padding-top: 4px;
+.chatContainerLandscape {
+ flex: 1;
+ margin-top: 120px;
+ margin-right: 10px;
+ margin-left: 5px;
+ border: 0.4px;
+ border-color: grey;
+ border-radius: 5px;
}
-.androidButton {
- background-color: white;
- margin: 8px;
+.audioContainerLandscape {
+ align-content: flex-start;
+ margin-top: 120px;
+ margin-left: 10px;
+ margin-right: 25px;
+ width: 40%;
}
-
.conferenceContainer {
+ flex-direction: column;
+ align-content: flex-end;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
- align-content: flex-end;
+}
+
+.audioContainer {
+ margin-top: 120px;
+ margin-left: 10px;
+ height: 35%;
+}
+
+.chatContainer {
+ flex: 1;
+ margin-top: 10px;
+ border: 0.4px;
+ border-color: grey;
+ border-radius: 5px;
}
.videosContainer {
flex: 1;
flex-wrap: wrap;
}
+.carouselContainer {
+ position: absolute;
+ bottom: 10;
+ left: 10;
+ right: 10;
+}
+
.landscapeVideosContainer {
flex-direction: row;
}
+.button {
+ background-color: white;
+ margin: 8px;
+}
+
+.iosButton {
+ background-color: white;
+ margin: 8px;
+ padding-top: 4px;
+}
+
+.androidButton {
+ background-color: white;
+ margin: 8px;
+}
+
.hangupButton {
background-color: rgba(#a94442, .8);
}
.wholePageVideo {
width: 100%;
height: 100%;
}
.buttonContainer {
flex-direction: row;
margin: 0 auto;
}
-.carouselContainer {
- position: absolute;
- bottom: 10;
- left: 10;
- right: 10;
-}
-
.landscapeDrawer {
align-items: flex-end;
justify-content: space-between;
flex-direction: row;
}
diff --git a/app/assets/styles/blink/_ConferenceModal.scss b/app/assets/styles/blink/_ConferenceModal.scss
index f3cff03..db8117b 100644
--- a/app/assets/styles/blink/_ConferenceModal.scss
+++ b/app/assets/styles/blink/_ConferenceModal.scss
@@ -1,37 +1,99 @@
.container {
- padding: 5px;
- margin: 0px;
+ flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
+.inviteTitle {
+ padding: 3px;
+ font-size: 24px;
+ text-align: left;
+}
+
.title {
padding: 3px;
font-size: 24px;
text-align: center;
}
+.roomContainer {
+ margin-top: 60px;
+ margin-bottom: 10px;
+ zIndex: -1;
+}
+
.room {
- padding: 5px;
- font-size: 18px;
- width: 100%;
+ font-size: 20px;
}
-.participants {
- padding: 5px;
+.roomUrl {
font-size: 14px;
text-align: center;
- width: 100%;
+}
+
+.roomUrlContainer {
+}
+
+.roomDescription {
+ font-size: 14px;
+ text-align: center;
+}
+
+.roomDescriptionContainer {
+ margin: 20px;
}
.buttonRow {
flex-direction: row;
+ justify-content: center;
+ margin-top: 30px;
+ padding-bottom: 10px;
+ zIndex: -1;
+}
+
+.buttonRowInvite {
+ flex-direction: row;
+ justify-content: center;
+ margin-top: 100px;
+ padding-bottom: 10px;
+}
+
+.shareText {
+ margin-top: 10px;
+ padding: 3px;
+ font-size: 16px;
+ text-align: center;
+}
+
+.iconContainer {
+ margin-top: 10px;
+ margin-bottom: 30px;
+ flex-direction: row;
+ justify-content: center;
}
.button {
margin: 10px;
width: 130;
}
+.autocompleteContainer {
+ margin: 10px;
+ flex: 1;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ zIndex: 1;
+}
+
+.autocompleteSearchBoxTextItem {
+ font-size: 16px;
+ margin: 3px;
+}
+.autocompleteSelectedTextStyle {
+ font-size: 18;
+ text-align: center;
+}
diff --git a/app/assets/styles/blink/_InviteParticipantsModal.scss b/app/assets/styles/blink/_InviteParticipantsModal.scss
index 132e9cb..8b13789 100644
--- a/app/assets/styles/blink/_InviteParticipantsModal.scss
+++ b/app/assets/styles/blink/_InviteParticipantsModal.scss
@@ -1,41 +1 @@
-.container {
- padding: 15px;
- margin: 00px;
-}
-
-.title {
- padding: 3px;
- font-size: 24px;
- text-align: center;
-}
-
-.shareText {
- padding: 3px;
- font-size: 16px;
- text-align: center;
-}
-
-.participants {
- padding: 0px;
- font-size: 14px;
- text-align: center;
- width: 100%;
-}
-
-.button {
- margin: 10px;
- width: 140;
-}
-
-.buttonRow {
- flex-direction: row;
- justify-content: center;
- padding-bottom: 10px;
-}
-
-.iconContainer {
- padding-top: 5px;
- flex-direction: row;
- justify-content: center;
-}
diff --git a/app/components/Conference.js b/app/components/Conference.js
index a4fc531..886b7a6 100644
--- a/app/components/Conference.js
+++ b/app/components/Conference.js
@@ -1,417 +1,417 @@
import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import assert from 'assert';
import debug from 'react-native-debug';
import autoBind from 'auto-bind';
import ConferenceBox from './ConferenceBox';
import LocalMedia from './LocalMedia';
import config from '../config';
import utils from '../utils';
const DEBUG = debug('blinkrtc:Conference');
debug.enable('*');
class Conference extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.defaultWaitInterval = 90; // until we can connect or reconnect
this.waitCounter = 0;
this.waitInterval = this.defaultWaitInterval;
this.userHangup = false;
this.ended = false;
this.started = false;
this.participants = [];
this.state = {
currentCall: null,
callState: null,
targetUri: this.props.targetUri,
callUUID: this.props.callUUID,
localMedia: this.props.localMedia,
connection: this.props.connection,
account: this.props.account,
registrationState: this.props.registrationState,
startedByPush: this.props.startedByPush,
reconnectingCall: this.props.reconnectingCall,
myInvitedParties: this.props.myInvitedParties,
isFavorite: this.props.favoriteUris.indexOf(this.props.targetUri) > -1
}
if (this.props.connection) {
this.props.connection.on('stateChanged', this.connectionStateChanged);
}
if (this.props.participantsToInvite) {
this.props.participantsToInvite.forEach((p) => {
if (this.participants.indexOf(p) === -1) {
this.participants.push(p);
}
});
}
}
componentWillUnmount() {
this.ended = true;
if (this.state.currentCall) {
this.state.currentCall.removeListener('stateChanged', this.callStateChanged);
}
if (this.state.connection) {
this.state.connection.removeListener('stateChanged', this.connectionStateChanged);
}
}
callStateChanged(oldState, newState, data) {
//utils.timestampedLog('Conference: callStateChanged', oldState, '->', newState);
if (newState === 'established') {
this.setState({reconnectingCall: false});
}
this.setState({callState: newState});
}
connectionStateChanged(oldState, newState) {
switch (newState) {
case 'disconnected':
if (oldState === 'ready') {
utils.timestampedLog('Conference: connection failed, reconnecting the call...');
this.waitInterval = this.defaultWaitInterval;
}
break;
default:
break;
}
}
//getDerivedStateFromProps(nextProps, state) {
UNSAFE_componentWillReceiveProps(nextProps) {
//console.log('Conference got props');
if (nextProps.account !== null && nextProps.account !== this.props.account) {
this.setState({account: nextProps.account});
}
this.setState({registrationState: nextProps.registrationState});
if (nextProps.connection !== null && nextProps.connection !== this.state.connection) {
this.setState({connection: nextProps.connection});
nextProps.connection.on('stateChanged', this.connectionStateChanged);
}
if (nextProps.reconnectingCall !== this.state.reconnectingCall) {
this.setState({reconnectingCall: nextProps.reconnectingCall});
}
if (nextProps.localMedia !== null && nextProps.localMedia !== this.state.localMedia) {
this.setState({localMedia: nextProps.localMedia});
}
if (nextProps.callUUID !== null && this.state.callUUID !== nextProps.callUUID) {
this.setState({callUUID: nextProps.callUUID,
reconnectingCall: true,
currentCall: null});
this.startCallWhenReady();
}
this.setState({myInvitedParties: nextProps.myInvitedParties,
isFavorite: nextProps.favoriteUris.indexOf(this.props.targetUri) > -1
});
}
mediaPlaying() {
this.startCallWhenReady();
}
canConnect() {
if (!this.state.localMedia) {
console.log('Conference: no local media');
return false;
}
if (!this.state.connection) {
console.log('Conference: no connection yet');
return false;
}
if (this.state.connection.state !== 'ready') {
console.log('Conference: connection is not ready');
return false;
}
if (!this.state.account) {
console.log('Conference: no account yet');
return false;
}
if (this.state.registrationState !== 'registered') {
console.log('Conference: account not ready yet');
return false;
}
if (this.state.currentCall) {
console.log('Conference: call already in progress');
return false;
}
return true;
}
async startCallWhenReady() {
utils.timestampedLog('Conference: start conference', this.state.callUUID, 'when ready to', this.props.targetUri);
this.waitCounter = 0;
//utils.timestampedLog('Conference: waiting for connecting to the conference', this.waitInterval, 'seconds');
let diff = 0;
while (this.waitCounter < this.waitInterval) {
if (this.userHangup) {
this.props.hangupCall(this.state.callUUID, 'user_cancelled_conference');
return;
}
if (this.state.currentCall) {
return;
}
if (this.waitCounter >= this.waitInterval - 1) {
utils.timestampedLog('Conference: cancelling conference', this.state.callUUID);
this.props.hangupCall(this.state.callUUID, 'timeout');
}
if (!this.canConnect()) {
console.log('Retrying for', (this.waitInterval - this.waitCounter), 'seconds');
await this._sleep(1000);
} else {
this.waitCounter = 0;
this.start();
return;
}
this.waitCounter++;
}
}
_sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
start() {
const options = {
id: this.state.callUUID,
pcConfig: {iceServers: config.iceServers},
localStream: this.state.localMedia,
audio: this.props.proposedMedia.audio,
video: this.props.proposedMedia.video,
offerOptions: {
offerToReceiveAudio: false,
offerToReceiveVideo: false
},
initialParticipants: this.props.participantsToInvite
};
utils.timestampedLog('Conference: Sylkrtc.js will start conference call', this.state.callUUID, 'to', this.props.targetUri.toLowerCase());
if (this.props.participantsToInvite) {
utils.timestampedLog('Initial participants', this.props.participantsToInvite);
}
confCall = this.state.account.joinConference(this.props.targetUri.toLowerCase(), options);
if (confCall) {
confCall.on('stateChanged', this.callStateChanged);
this.setState({currentCall: confCall});
}
}
saveParticipant(callUUID, room, uri) {
console.log('Save saveParticipant', uri);
if (this.participants.indexOf(uri) === -1) {
this.participants.push(uri);
}
this.props.saveParticipant(callUUID, room, uri);
}
showSaveDialog() {
if (!this.userHangup) {
return false;
}
if (this.state.reconnectingCall) {
console.log('No save dialog because call is reconnecting')
return false;
}
if (this.participants.length === 0) {
console.log('No show dialog because there are no participants')
return false;
}
if (this.state.isFavorite) {
let room = this.state.targetUri.split('@')[0];
let must_display = false;
if (this.props.myInvitedParties.hasOwnProperty(room)) {
let old_participants = this.state.myInvitedParties[room];
this.participants.forEach((p) => {
if (old_participants.indexOf(p) === -1) {
console.log(p, 'is not in', old_participants);
must_display = true;
}
});
}
if (must_display) {
console.log('Show save dialog because we have new participants');
return true;
} else {
console.log('No save dialog because is already favorite with same participants')
return false;
}
} else {
console.log('Show save dialog because room', this.state.targetUri, 'is not in favorites');
return true;
}
return true;
}
saveConference() {
if (!this.state.isFavorite) {
this.props.setFavoriteUri(this.props.targetUri);
}
let room = this.state.targetUri.split('@')[0];
if (this.props.myInvitedParties.hasOwnProperty(room)) {
let participants = this.state.myInvitedParties[room];
this.participants.forEach((p) => {
if (participants.indexOf(p) === -1) {
participants.push(p);
}
});
this.props.saveInvitedParties(this.props.targetUri, participants);
} else {
this.props.saveInvitedParties(this.props.targetUri, this.participants);
}
this.props.hangupCall(this.state.callUUID, 'user_hangup_conference_confirmed');
}
hangup(reason='user_hangup_conference') {
this.userHangup = true;
if (!this.showSaveDialog()) {
reason = 'user_hangup_conference_confirmed';
}
this.props.hangupCall(this.state.callUUID, reason);
if (this.waitCounter > 0) {
this.waitCounter = this.waitInterval;
}
}
render() {
let box = null;
if (this.state.localMedia !== null) {
let media = 'audio'
if (this.props.proposedMedia && this.props.proposedMedia.video === true) {
media = 'video';
}
if (this.state.currentCall != null && (this.state.callState === 'established')) {
box = (
);
} else {
box = (
);
}
} else {
console.log('Waiting for local media');
}
return box;
}
}
Conference.propTypes = {
notificationCenter : PropTypes.func,
account : PropTypes.object,
connection : PropTypes.object,
registrationState : PropTypes.string,
hangupCall : PropTypes.func,
saveParticipant : PropTypes.func,
saveInvitedParties : PropTypes.func,
previousParticipants : PropTypes.array,
currentCall : PropTypes.object,
localMedia : PropTypes.object,
targetUri : PropTypes.string,
participantsToInvite : PropTypes.array,
generatedVideoTrack : PropTypes.bool,
toggleMute : PropTypes.func,
toggleSpeakerPhone : PropTypes.func,
callUUID : PropTypes.string,
proposedMedia : PropTypes.object,
isLandscape : PropTypes.bool,
isTablet : PropTypes.bool,
muted : PropTypes.bool,
defaultDomain : PropTypes.string,
startedByPush : PropTypes.bool,
inFocus : PropTypes.bool,
setFavoriteUri : PropTypes.func,
saveInvitedParties : PropTypes.func,
reconnectingCall : PropTypes.bool,
- contacts : PropTypes.array,
favoriteUris : PropTypes.array,
- myDisplayNames : PropTypes.object
+ myDisplayNames : PropTypes.object,
+ lookupContacts : PropTypes.func
};
export default Conference;
diff --git a/app/components/ConferenceBox.js b/app/components/ConferenceBox.js
index 782492e..3aa19c9 100644
--- a/app/components/ConferenceBox.js
+++ b/app/components/ConferenceBox.js
@@ -1,1520 +1,1689 @@
'use strict';
-import React, {Component, Fragment} from 'react';
+import React, {useState, Component, Fragment} from 'react';
import { View, Platform, TouchableWithoutFeedback, Dimensions, SafeAreaView, ScrollView, FlatList } from 'react-native';
import PropTypes from 'prop-types';
import * as sylkrtc from 'react-native-sylkrtc';
import classNames from 'classnames';
import debug from 'react-native-debug';
import superagent from 'superagent';
import autoBind from 'auto-bind';
import { RTCView } from 'react-native-webrtc';
import { IconButton, Appbar, Portal, Modal, Surface, Paragraph } from 'react-native-paper';
-
+import uuid from 'react-native-uuid';
import config from '../config';
import utils from '../utils';
//import AudioPlayer from './AudioPlayer';
import ConferenceDrawer from './ConferenceDrawer';
import ConferenceDrawerLog from './ConferenceDrawerLog';
// import ConferenceDrawerFiles from './ConferenceDrawerFiles';
import ConferenceDrawerParticipant from './ConferenceDrawerParticipant';
import ConferenceDrawerParticipantList from './ConferenceDrawerParticipantList';
import ConferenceDrawerSpeakerSelection from './ConferenceDrawerSpeakerSelection';
import ConferenceDrawerSpeakerSelectionWrapper from './ConferenceDrawerSpeakerSelectionWrapper';
import ConferenceHeader from './ConferenceHeader';
import ConferenceCarousel from './ConferenceCarousel';
import ConferenceParticipant from './ConferenceParticipant';
import ConferenceMatrixParticipant from './ConferenceMatrixParticipant';
import ConferenceParticipantSelf from './ConferenceParticipantSelf';
import InviteParticipantsModal from './InviteParticipantsModal';
import ConferenceAudioParticipantList from './ConferenceAudioParticipantList';
import ConferenceAudioParticipant from './ConferenceAudioParticipant';
+import { GiftedChat } from 'react-native-gifted-chat'
import styles from '../assets/styles/blink/_ConferenceBox.scss';
const DEBUG = debug('blinkrtc:ConferenceBox');
debug.enable('*');
function toTitleCase(str) {
return str.replace(
/\w\S*/g,
function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
}
);
}
class ConferenceBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.audioBytesReceived = new Map();
this.audioBandwidth = new Map();
this.bandwidthDownload = 0;
this.bandwidthUpload = 0;
this.videoBytesReceived = new Map();
this.videoBandwidth = new Map();
this.audioPacketLoss = new Map();
this.videoPacketLoss = new Map();
this.packetLoss = new Map();
this.latency = new Map();
this.mediaLost = new Map();
+ let messages = [];
+
this.sampleInterval = 5;
+ if (this.props.call) {
+ let giftedChatMessage;
+ this.props.call.messages.reverse().forEach((sylkMessage) => {
+ giftedChatMessage = this.sylkMessage2giftedChatMessage(sylkMessage);
+ messages.push(giftedChatMessage);
+ });
+ }
+
this.state = {
callOverlayVisible: true,
call: this.props.call,
ended: false,
audioMuted: this.props.muted,
videoMuted: !this.props.inFocus,
videoMutedbyUser: false,
participants: props.call.participants.slice(),
showInviteModal: false,
showDrawer: false,
showFiles: false,
shareOverlayVisible: false,
showSpeakerSelection: false,
activeSpeakers: props.call.activeParticipants.slice(),
selfDisplayedLarge: false,
eventLog: [],
sharedFiles: props.call.sharedFiles.slice(),
largeVideoStream: null,
previousParticipants: this.props.previousParticipants,
inFocus: this.props.inFocus,
reconnectingCall: this.props.reconnectingCall,
- terminated: this.props.terminated
+ terminated: this.props.terminated,
+ messages: messages,
+ chatView: false
};
const friendlyName = this.props.remoteUri.split('@')[0];
//if (window.location.origin.startsWith('file://')) {
- this.callUrl = `${config.publicUrl}/conference/${friendlyName}`;
+ this.conferenceUrl = `${config.publicUrl}/conference/${friendlyName}`;
//} else {
- // this.callUrl = `${window.location.origin}/conference/${friendlyName}`;
+ // this.conferenceUrl = `${window.location.origin}/conference/${friendlyName}`;
//}
- const emailMessage = `You can join me in the conference using a Web browser at ${this.callUrl} ` +
+ const emailMessage = `You can join me in the conference using a Web browser at ${this.conferenceUrl} ` +
'or by using the freely available Sylk WebRTC client app at http://sylkserver.com';
const subject = 'Join me, maybe?';
this.emailLink = `mailto:?subject=${encodeURI(subject)}&body=${encodeURI(emailMessage)}`;
this.overlayTimer = null;
this.logEvent = {};
this.haveVideo = false;
this.uploads = [];
this.selectSpeaker = 1;
this.foundContacts = new Map();
if (this.props.call) {
this.lookupContact(this.props.call.localIdentity._uri, this.props.call.localIdentity._displayName);
}
[
'error',
'warning',
'info',
'debug'
].forEach((level) => {
this.logEvent[level] = (
(action, messages, originator) => {
const log = this.state.eventLog.slice();
log.unshift({originator, originator, level: level, action: action, messages: messages});
this.setState({eventLog: log});
}
);
});
this.invitedParticipants = new Map();
props.initialParticipants.forEach((uri) => {
this.invitedParticipants.set(uri, {timestamp: Date.now(), status: 'Invited'})
this.lookupContact(uri);
});
this.participantsTimer = setInterval(() => {
this.updateParticipantsStatus();
}, this.sampleInterval * 1000);
}
getInfo() {
let info;
if (this.bandwidthDownload > 0 && this.bandwidthUpload > 0) {
info = '⇣' + this.bandwidthDownload + ' ⇡' + this.bandwidthUpload;
} else if (this.bandwidthDownload > 0) {
info = '⇣' + this.bandwidthDownload ;
} else if (this.bandwidthUpload > 0) {
info = '⇡' + this.bandwidthUpload;
}
if (info) {
return info + ' Mbit/s';
}
return info;
}
updateParticipantsStatus() {
let participants_uris = [];
this.state.participants.forEach((p) => {
participants_uris.push(p.identity._uri);
});
this.getConnectionStats();
const invitedParties = Array.from(this.invitedParticipants.keys());
//console.log('Invited participants', invitedParties);
//console.log('Current participants', participants_uris);
let p;
let interval;
invitedParties.forEach((_uri) => {
if (participants_uris.indexOf(_uri) > 0) {
this.invitedParticipants.delete(_uri);
}
p = this.invitedParticipants.get(_uri);
if (!p) {
return;
}
interval = Math.floor((Date.now() - p.timestamp) / 1000);
- //console.log(_uri, 'was invited', interval, 'seconds ago');
- if (interval >= 180) {
+ if (interval >= 60) {
this.invitedParticipants.delete(_uri);
this.forceUpdate();
}
if (p.status.indexOf('Invited') > -1 && interval > 5) {
p.status = 'Wait .';
}
if (p.status.indexOf('.') > -1) {
if (interval > 45) {
p.status = 'No answer';
+ this.postChatSystemMessage(_uri + ' did not answer');
} else {
p.status = p.status + '.';
}
}
});
this.forceUpdate();
}
+ postChatSystemMessage(text, timestamp=true) {
+ if (timestamp) {
+ var now = new Date();
+ var hours = now.getHours();
+ var mins = now.getMinutes();
+ var secs = now.getSeconds();
+ var ampm = hours >= 12 ? 'PM' : 'AM';
+ hours = hours % 12;
+ mins = mins < 10 ? '0' + mins : mins;
+ secs = secs < 10 ? '0' + secs : secs;
+ text = text + ' at ' + hours + ":" + mins + ':' + secs + ' ' + ampm;
+ }
+
+ const giftedChatMessage = {
+ _id: uuid.v4(),
+ createdAt: now,
+ text: text,
+ system: true,
+ };
+ this.setState({messages: GiftedChat.append(this.state.messages, [giftedChatMessage])});
+ }
+
componentDidMount() {
for (let p of this.state.participants) {
p.on('stateChanged', this.onParticipantStateChanged);
p.attach();
}
this.props.call.on('participantJoined', this.onParticipantJoined);
this.props.call.on('participantLeft', this.onParticipantLeft);
this.props.call.on('roomConfigured', this.onConfigureRoom);
this.props.call.on('fileSharing', this.onFileSharing);
+ this.props.call.on('composingIndication', this.composingIndicationReceived);
+ this.props.call.on('message', this.messageReceived);
if (this.state.participants.length > 1) {
this.armOverlayTimer();
}
// attach to ourselves first if there are no other participants
if (this.state.participants.length === 0) {
setTimeout(() => {
const item = {
stream: this.props.call.getLocalStreams()[0],
identity: this.props.call.localIdentity
};
this.selectVideo(item);
});
} else {
this.state.participants.forEach((p) => {
if (p.identity._uri.search('guest.') === -1 && p.identity._uri !== this.props.call.localIdentity._uri) {
// used for history item
this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], p.identity._uri);
this.lookupContact(p.identity._uri, p.identity._displayName);
}
});
// this.changeResolution();
}
if (this.props.call.getLocalStreams()[0].getVideoTracks().length !== 0) {
this.haveVideo = true;
}
if (this.state.videoMuted) {
this._muteVideo();
}
+
+ let msg = "Others can join the conference using a web browser at " + this.conferenceUrl;
+ this.postChatSystemMessage(msg, false);
}
componentWillUnmount() {
clearTimeout(this.overlayTimer);
clearTimeout(this.participantsTimer);
this.uploads.forEach((upload) => {
this.props.notificationCenter().removeNotification(upload[1]);
upload[0].abort();
})
}
//getDerivedStateFromProps(nextProps, state) {
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.hasOwnProperty('muted')) {
this.setState({audioMuted: nextProps.muted});
}
if (nextProps.call !== null && nextProps.call !== this.state.call) {
this.setState({call: nextProps.call});
}
if (nextProps.inFocus !== this.state.inFocus) {
if (nextProps.inFocus) {
if (!this.state.videoMutedbyUser) {
this._resumeVideo();
}
} else {
this._muteVideo();
}
this.setState({inFocus: nextProps.inFocus});
}
if (nextProps.reconnectingCall !== this.state.reconnectingCall) {
this.setState({reconnectingCall: nextProps.reconnectingCall});
}
this.setState({terminated: nextProps.terminated});
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
+ sylkMessage2giftedChatMessage(sylkMessage) {
+ /*
+ export interface IMessage {
+ _id: string | number
+ text: string
+ createdAt: Date | number
+ user: User
+ image?: string
+ video?: string
+ audio?: string
+ system?: boolean
+ sent?: boolean
+ received?: boolean
+ pending?: boolean
+ quickReplies?: QuickReplies
+ }
+ */
+
+ let system = false;
+ if (sylkMessage.content.indexOf('Welcome!') > -1) {
+ system = true;
+ }
+
+ return {
+ _id: sylkMessage.id,
+ text: sylkMessage.content,
+ createdAt: sylkMessage.timestamp,
+ received: true,
+ system: system,
+ user: {
+ _id: sylkMessage.sender.uri,
+ name: sylkMessage.sender.toString()
+ }
+ }
+ }
+
+ composingIndicationReceived(data) {
+ utils.timestampedLog('isComposing received');
+ }
+
+ messageReceived(sylkMessage) {
+ const giftedChatMessage = this.sylkMessage2giftedChatMessage(sylkMessage);
+ this.setState({messages: GiftedChat.append(this.state.messages, [giftedChatMessage])});
+ }
+
+ onSendMessage(messages) {
+ if (!this.props.call) {
+ return;
+ }
+ messages.forEach((message) => {
+ this.props.call.sendMessage(message.text, 'text/plain')
+ });
+ this.setState({messages: GiftedChat.append(this.state.messages, messages)});
+ }
+
lookupContact(uri, displayName) {
let photo;
let username = uri.split('@')[0];
if (this.props.myDisplayNames.hasOwnProperty(uri)) {
displayName = this.props.myDisplayNames[uri];
} else if (this.props.contacts) {
let username = uri.split('@')[0];
let isPhoneNumber = username.match(/^(\+|0)(\d+)$/);
if (isPhoneNumber) {
var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username);
} else {
var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', uri);
}
if (contact_obj) {
displayName = contact_obj.displayName;
photo = contact_obj.photo;
if (isPhoneNumber) {
uri = username;
}
} else {
if (isPhoneNumber) {
uri = username;
displayName = toTitleCase(username);
}
}
}
const c = {photo: photo, displayName: displayName || toTitleCase(username)};
this.foundContacts.set(uri, c)
}
getConnectionStats() {
let audioPackets = 0;
let videoPackets = 0;
let delay = 0;
let audioPacketsLost = 0;
let videoPacketsLost = 0;
let audioPacketLoss = 0;
let videoPacketLoss = 0;
let totalPackets = 0;
let totalPacketsLost = 0;
let totalPacketLoss = 0;
let totalAudioBandwidth = 0;
let totalVideoBandwidth = 0;
let totalSpeed = 0;
let bandwidthUpload = 0;
let mediaType;
if (this.state.participants.length === 0) {
this.bandwidthDownload = 0;
this.videoBandwidth.set('total', 0);
this.audioBandwidth.set('total', 0);
}
let participants = this.state.participants.concat(this.props.call);
participants.forEach((p) => {
if (!p._pc) {
return;
}
let identity;
if (p.identity) {
identity = p.identity.uri;
} else {
identity = 'myself';
}
p._pc.getStats(null).then(stats => {
audioPackets = 0;
videoPackets = 0;
audioPacketsLost = 0;
videoPacketsLost = 0;
audioPacketLoss = 0;
videoPacketLoss = 0;
stats.forEach(report => {
if (report.type === "ssrc") {
report.values.forEach(object => { if (object.mediaType) {
mediaType = object.mediaType;
}
});
report.values.forEach(object => {
if (object.bytesReceived && identity !== 'myself') {
const bytesReceived = Math.floor(object.bytesReceived);
if (mediaType === 'audio') {
if (this.audioBytesReceived.has(p.id)) {
const lastBytes = this.audioBytesReceived.get(p.id);
const diff = bytesReceived - lastBytes;
const speed = Math.floor(diff / this.sampleInterval * 8 / 1000);
totalAudioBandwidth = totalAudioBandwidth + speed;
totalSpeed = totalSpeed + speed;
//console.log(identity, 'audio bandwidth', speed, 'kbit/s from', identity);
this.audioBandwidth.set(p.id, speed);
}
this.audioBytesReceived.set(p.id, bytesReceived);
} else if (mediaType === 'video') {
if (this.videoBytesReceived.has(p.id)) {
const lastBytes = this.videoBytesReceived.get(p.id);
const diff = bytesReceived - lastBytes;
const speed = Math.floor(diff / this.sampleInterval * 8 / 1000);
totalVideoBandwidth = totalVideoBandwidth + speed;
totalSpeed = totalSpeed + speed;
//console.log(identity, 'video bandwidth', speed, 'kbit/s from', identity);
this.videoBandwidth.set(p.id, speed);
}
this.videoBytesReceived.set(p.id, bytesReceived);
}
} else if (object.bytesSent && identity === 'myself') {
const bytesSent = Math.floor(object.bytesSent);
if (mediaType === 'audio') {
if (this.audioBytesReceived.has(p.id)) {
const lastBytes = this.audioBytesReceived.get(p.id);
const diff = bytesSent - lastBytes;
const speed = Math.floor(diff / this.sampleInterval * 8 / 1000);
bandwidthUpload = bandwidthUpload + speed;
//console.log(identity, 'audio bandwidth', speed, 'kbit/s from', identity);
this.audioBandwidth.set(p.id, speed);
}
this.audioBytesReceived.set(p.id, bytesSent);
} else if (mediaType === 'video') {
if (this.videoBytesReceived.has(p.id)) {
const lastBytes = this.videoBytesReceived.get(p.id);
const diff = bytesSent - lastBytes;
const speed = Math.floor(diff / this.sampleInterval * 8 / 1000);
bandwidthUpload = bandwidthUpload + speed;
//console.log(identity, 'video bandwidth', speed, 'kbit/s from', identity);
this.videoBandwidth.set(p.id, speed);
}
this.videoBytesReceived.set(p.id, bytesSent);
}
} else if (object.totalAudioEnergy) {
//console.log('Total audio energy', object.totalAudioEnergy, 'from', identity);
} else if (object.audioOutputLevel) {
//console.log('Output level', object.audioOutputLevel, 'from', identity);
this.mediaLost.set(p.id, Math.floor(object.audioOutputLevel) < 5 ? true : false);
} else if (object.audioInputLevel) {
//console.log('Input level', object.audioInputLevel, 'from', identity);
this.mediaLost.set(p.id, Math.floor(object.audioInputLevel) < 5 ? true : false);
} else if (object.packetsLost) {
totalPackets = totalPackets + Math.floor(object.packetsLost);
totalPacketsLost = totalPacketsLost + Math.floor(object.packetsLost);
if (mediaType === 'audio') {
audioPackets = audioPackets + Math.floor(object.packetsLost);
audioPacketsLost = audioPacketsLost + Math.floor(object.packetsLost);
} else if (mediaType === 'video') {
videoPackets = videoPackets + Math.floor(object.packetsLost);
videoPacketsLost = videoPacketsLost + Math.floor(object.packetsLost);
}
if (object.packetsLost > 0) {
//console.log(identity, mediaType, 'packetsLost', object.packetsLost);
}
} else if (object.packetsReceived && identity !== 'myself') {
totalPackets = totalPackets + Math.floor(object.packetsReceived);
if (mediaType === 'audio') {
audioPackets = audioPackets + Math.floor(object.packetsReceived);
} else if (mediaType === 'video') {
videoPackets = videoPackets + Math.floor(object.packetsReceived);
}
//console.log(identity, mediaType, 'packetsReceived', object.packetsReceived);
} else if (object.packetsSent && identity === 'myself') {
totalPackets = totalPackets + Math.floor(object.packetsSent);
if (mediaType === 'audio') {
audioPackets = audioPackets + Math.floor(object.packetsSent);
} else if (mediaType === 'video') {
videoPackets = videoPackets + Math.floor(object.packetsSent);
}
//console.log(identity, mediaType, 'packetsSent', object.packetsSent);
} else if (object.googCurrentDelayMs && identity !== 'myself') {
delay = object.googCurrentDelayMs;
//console.log('mediaType', mediaType, 'identity', identity, 'delay', delay);
this.latency.set(p.id, Math.ceil(delay));
//console.log(object);
}
if (identity === 'myself') {
//console.log(object);
}
});
if (videoPackets > 0) {
videoPacketLoss = Math.floor(videoPacketsLost / videoPackets * 100);
} else {
videoPacketLoss = 100;
}
if (audioPackets > 0) {
audioPacketLoss = Math.floor(audioPacketsLost / audioPackets * 100);
} else {
audioPacketLoss = 100;
}
if (totalPackets > 0) {
totalPacketLoss = Math.floor(totalPacketsLost / totalPackets * 100);
} else {
totalPacketLoss = 100;
}
this.audioPacketLoss.set(p.id, audioPacketLoss);
this.videoPacketLoss.set(p.id, videoPacketLoss);
this.packetLoss.set(p.id, totalPacketLoss);
}});
//console.log(identity, p.id, 'audio loss', audioPacketLoss, '%, video loss', videoPacketLoss, '%, total loss', totalPacketLoss, '%');
const bandwidthDownload = totalVideoBandwidth + totalAudioBandwidth;
this.bandwidthDownload = Math.ceil(bandwidthDownload / 1000 * 100) / 100;
this.bandwidthUpload = Math.ceil(bandwidthUpload / 1000 * 100) / 100;
this.videoBandwidth.set('total', totalVideoBandwidth);
this.audioBandwidth.set('total', totalAudioBandwidth);
//console.log('audio bandwidth', totalAudioBandwidth);
//console.log('video bandwidth', totalVideoBandwidth);
//console.log('total bandwidth', this.bandwidthDownload);
//console.log('this.latency', this.latency);
});
});
};
onParticipantJoined(p) {
- //console.log(p.identity.uri, 'joined the conference');
- if (p.identity._uri.search('guest.') === -1 && p.identity._uri !== this.props.call.localIdentity._uri) {
- // used for history item
- this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], p.identity._uri);
+ console.log('----joined the conference');
+
+ if (p.identity._uri.search('guest.') === -1) {
+ if (p.identity._uri !== this.props.call.localIdentity._uri) {
+ // used for history item
+ this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], p.identity._uri);
+ }
+ const dn = p.identity._uri + ' joined';
+ this.postChatSystemMessage(dn);
+ } else {
+ this.postChatSystemMessage('An anonymous guest joined');
}
this.lookupContact(p.identity._uri, p.identity._displayName);
if (this.invitedParticipants.has(p.identity._uri)) {
this.invitedParticipants.delete(p.identity._uri);
}
// this.refs.audioPlayerParticipantJoined.play();
p.on('stateChanged', this.onParticipantStateChanged);
p.attach();
this.setState({
participants: this.state.participants.concat([p])
});
// this.changeResolution();
if (this.state.participants.length > 1) {
this.armOverlayTimer();
} else {
this.setState({callOverlayVisible: true});
}
}
onParticipantLeft(p) {
//console.log(p.identity.uri, 'left the conference');
const participants = this.state.participants.slice();
this.audioBandwidth.delete(p.id);
this.videoBandwidth.delete(p.id);
this.latency.delete(p.id);
this.audioBytesReceived.delete(p.id);
this.videoBytesReceived.delete(p.id);
this.audioPacketLoss.delete(p.id);
this.videoPacketLoss.delete(p.id);
this.packetLoss.delete(p.id);
this.mediaLost.delete(p.id);
const idx = participants.indexOf(p);
if (idx !== -1) {
participants.splice(idx, 1);
this.setState({
participants: participants
});
}
p.detach(true);
// this.changeResolution();
if (this.state.participants.length > 1) {
this.armOverlayTimer();
} else {
this.setState({callOverlayVisible: true});
}
+
+ this.postChatSystemMessage(p.identity.uri + ' left');
}
onParticipantStateChanged(oldState, newState) {
if (newState === 'established' || newState === null) {
this.maybeSwitchLargeVideo();
}
}
onConfigureRoom(config) {
const newState = {};
newState.activeSpeakers = config.activeParticipants;
this.setState(newState);
if (config.activeParticipants.length === 0) {
this.logEvent.info('set speakers to', ['Nobody'], config.originator);
} else {
const speakers = config.activeParticipants.map((p) => {return p.identity.displayName || p.identity.uri});
this.logEvent.info('set speakers to', speakers, config.originator);
}
this.maybeSwitchLargeVideo();
}
onFileSharing(files) {
let stateFiles = this.state.sharedFiles;
stateFiles = stateFiles.concat(files);
this.setState({sharedFiles: stateFiles});
files.forEach((file)=>{
if (file.session !== this.props.call.id) {
this.props.notificationCenter().postFileShared(file, this.showFiles);
}
})
}
onVideoSelected(item) {
const participants = this.state.participants.slice();
const idx = participants.indexOf(item);
participants.splice(idx, 1);
participants.unshift(item);
if (item.videoPaused) {
item.resumeVideo();
}
this.setState({
participants: participants
});
}
changeResolution() {
let stream = this.props.call.getLocalStreams()[0];
if (this.state.participants.length < 2) {
this.props.call.scaleLocalTrack(stream, 1.5);
} else if (this.state.participants.length < 5) {
this.props.call.scaleLocalTrack(stream, 2);
} else {
this.props.call.scaleLocalTrack(stream, 1);
}
}
selectVideo(item) {
DEBUG('Switching video to: %o', item);
if (item.stream) {
this.setState({selfDisplayedLarge: true, largeVideoStream: item.stream});
}
}
maybeSwitchLargeVideo() {
// Switch the large video to another source, maybe.
if (this.state.participants.length === 0 && !this.state.selfDisplayedLarge) {
// none of the participants are eligible, show ourselves
const item = {
stream: this.props.call.getLocalStreams()[0],
identity: this.props.call.localIdentity
};
this.selectVideo(item);
} else if (this.state.selfDisplayedLarge) {
this.setState({selfDisplayedLarge: false});
}
}
handleClipboardButton() {
- utils.copyToClipboard(this.callUrl);
+ utils.copyToClipboard(this.conferenceUrl);
this.props.notificationCenter().postSystemNotification('Join me, maybe?', {body: 'Link copied to the clipboard'});
this.setState({shareOverlayVisible: false});
}
handleEmailButton(event) {
// if (navigator.userAgent.indexOf('Chrome') > 0) {
// let emailWindow = window.open(this.emailLink, '_blank');
// setTimeout(() => {
// emailWindow.close();
// }, 500);
// } else {
// window.open(this.emailLink, '_self');
// }
this.setState({shareOverlayVisible: false});
}
handleShareOverlayEntered() {
this.setState({shareOverlayVisible: true});
}
handleShareOverlayExited() {
this.setState({shareOverlayVisible: false});
}
handleActiveSpeakerSelected(participant, secondVideo=false) { // eslint-disable-line space-infix-ops
let newActiveSpeakers = this.state.activeSpeakers.slice();
if (secondVideo) {
if (participant.id !== 'none') {
if (newActiveSpeakers.length >= 1) {
newActiveSpeakers[1] = participant;
} else {
newActiveSpeakers[0] = participant;
}
} else {
newActiveSpeakers.splice(1,1);
}
} else {
if (participant.id !== 'none') {
newActiveSpeakers[0] = participant;
} else {
newActiveSpeakers.shift();
}
}
this.props.call.configureRoom(newActiveSpeakers.map((element) => element.publisherId), (error) => {
if (error) {
// This causes a state update, hence the drawer lists update
this.logEvent.error('set speakers failed', [], this.localIdentity);
}
});
}
handleDrop(files) {
DEBUG('Dropped file %o', files);
this.uploadFiles(files);
};
handleFiles(e) {
DEBUG('Selected files %o', e.target.files);
this.uploadFiles(e.target.files);
event.target.value = '';
}
toggleSpeakerSelection() {
this.setState({showSpeakerSelection: !this.state.showSpeakerSelection});
}
startSpeakerSelection(number) {
this.selectSpeaker = number;
this.toggleSpeakerSelection();
}
uploadFiles(files) {
for (var key in files) {
// is the item a File?
if (files.hasOwnProperty(key) && files[key] instanceof File) {
let uploadRequest;
let complete = false;
const filename = files[key].name
let progressNotification = this.props.notificationCenter().postFileUploadProgress(
filename,
(notification) => {
if (!complete) {
uploadRequest.abort();
this.uploads.splice(this.uploads.indexOf(uploadRequest), 1);
}
}
);
uploadRequest = superagent
.post(`${config.fileSharingUrl}/${this.props.remoteUri}/${this.props.call.id}/${filename}`)
.send(files[key])
.on('progress', (e) => {
this.props.notificationCenter().editFileUploadNotification(e.percent, progressNotification);
})
.end((err, response) => {
complete = true;
this.props.notificationCenter().removeFileUploadNotification(progressNotification);
if (err) {
this.props.notificationCenter().postFileUploadFailed(filename);
}
this.uploads.splice(this.uploads.indexOf(uploadRequest), 1);
});
this.uploads.push([uploadRequest, progressNotification]);
}
}
}
downloadFile(filename) {
// const a = document.createElement('a');
// a.href = `${config.fileSharingUrl}/${this.props.remoteUri}/${this.props.call.id}/${filename}`;
// a.target = '_blank';
// a.download = filename;
// const clickEvent = document.createEvent('MouseEvent');
// clickEvent.initMouseEvent('click', true, true, window, 0,
// clickEvent.screenX, clickEvent.screenY, clickEvent.clientX, clickEvent.clientY,
// clickEvent.ctrlKey, clickEvent.altKey, clickEvent.shiftKey, clickEvent.metaKey,
// 0, null);
// a.dispatchEvent(clickEvent);
}
preventOverlay(event) {
// Stop the overlay when we are the thumbnail bar
event.stopPropagation();
}
muteAudio(event) {
event.preventDefault();
+ if (this.state.audioMuted) {
+ this.postChatSystemMessage('Audio un-muted');
+ } else {
+ this.postChatSystemMessage('Audio muted');
+ }
+
this.props.toggleMute(this.props.call.id, !this.state.audioMuted);
}
+ toggleChat(event) {
+ event.preventDefault();
+ this.setState({chatView: !this.state.chatView});
+ }
+
toggleCamera(event) {
event.preventDefault();
const localStream = this.props.call.getLocalStreams()[0];
if (localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
track._switchCamera();
}
}
muteVideo(event) {
event.preventDefault();
if (this.state.videoMuted) {
this._resumeVideo();
this.setState({videoMutedbyUser: false});
} else {
this.setState({videoMutedbyUser: true});
this._muteVideo();
}
}
_muteVideo() {
const localStream = this.props.call.getLocalStreams()[0];
if (localStream && localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
if (!this.state.videoMuted) {
console.log('Mute camera');
track.enabled = false;
this.setState({videoMuted: true});
}
}
}
_resumeVideo() {
const localStream = this.props.call.getLocalStreams()[0];
if (localStream && localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
if (this.state.videoMuted) {
console.log('Resume camera');
track.enabled = true;
this.setState({videoMuted: false});
}
}
}
hangup(event) {
event.preventDefault();
for (let participant of this.state.participants) {
participant.detach();
}
this.props.hangup('user_hangup_conference');
}
armOverlayTimer() {
if (this.props.audioOnly) {
return;
}
clearTimeout(this.overlayTimer);
this.overlayTimer = setTimeout(() => {
this.setState({callOverlayVisible: false});
}, 4000);
}
showOverlay() {
if (this.props.audioOnly) {
return;
}
// if (!this.state.shareOverlayVisible && !this.state.showDrawer && !this.state.showFiles) {
// if (!this.state.callOverlayVisible) {
this.setState({callOverlayVisible: !this.state.callOverlayVisible});
// }
// this.armOverlayTimer();
// }
}
toggleInviteModal() {
this.setState({showInviteModal: !this.state.showInviteModal});
}
toggleDrawer() {
this.setState({callOverlayVisible: true, showDrawer: !this.state.showDrawer, showFiles: false, showSpeakerSelection: false});
clearTimeout(this.overlayTimer);
}
toggleFiles() {
this.setState({callOverlayVisible: true, showFiles: !this.state.showFiles, showDrawer: false});
clearTimeout(this.overlayTimer);
}
showFiles() {
this.setState({callOverlayVisible: true, showFiles: true, showDrawer: false});
clearTimeout(this.overlayTimer);
}
inviteParticipants(uris) {
this.props.call.inviteParticipants(uris);
uris.forEach((uri) => {
uri = uri.replace(/ /g, '');
if (this.props.call.localIdentity._uri === uri) {
return;
}
+
+ this.postChatSystemMessage(uri + ' invited');
this.invitedParticipants.set(uri, {timestamp: Date.now(), status: 'Invited'})
this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], uri);
this.lookupContact(uri);
});
this.forceUpdate()
}
render() {
//console.log('Conference box this.state.reconnectingCall', this.state.reconnectingCall);
let participantsCount = this.state.participants.length + 1;
if (this.props.call === null) {
return ();
}
let watermark;
const largeVideoClasses = classNames({
'animated' : true,
'fadeIn' : true,
'large' : true,
'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack,
'fit' : this.props.call.sharingScreen
});
let matrixClasses = classNames({
'matrix' : true
});
const containerClasses = classNames({
'video-container': true,
'conference': true,
'drawer-visible': this.state.showDrawer || this.state.showFiles
});
const remoteUri = this.props.remoteUri.split('@')[0];
// const shareOverlay = (
//
//
//
//
- // Invite other online users of this service, share this link with others or email, so they can easily join this conference.
+ // Invite other online users of this service, share this link with others or email, so they can easily join this conference.
//
//
//
//
//
//
//
//
//
//
//
// );
const buttons = {};
// const commonButtonTopClasses = classNames({
// 'btn' : true,
// 'btn-link' : true
// });
// const fullScreenButtonIcons = classNames({
// 'fa' : true,
// 'fa-2x' : true,
// 'fa-expand' : !this.isFullScreen(),
// 'fa-compress' : this.isFullScreen()
// });
const topButtons = [];
// if (!this.state.showFiles) {
// if (this.state.sharedFiles.length !== 0) {
// topButtons.push(
//
//
//
// );
// }
// }
if (!this.state.showDrawer) {
topButtons.push();
}
buttons.top = {right: topButtons};
const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone';
const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video';
const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
- const bottomButtons = [];
+ const floatingButtons = [];
if (!this.state.reconnectingCall) {
- bottomButtons.push(
+ floatingButtons.push(
);
}
if (this.haveVideo) {
- bottomButtons.push(
+ floatingButtons.push(
);
}
- bottomButtons.push(
+ floatingButtons.push(
);
if (this.haveVideo) {
- bottomButtons.push(
+ floatingButtons.push(
+ );
+ floatingButtons.push(
+
);
}
if (!this.state.reconnectingCall) {
- bottomButtons.push(
+ floatingButtons.push(
)
- // bottomButtons.push(
+ // floatingButtons.push(
//
- //
+ //
//
// );
}
- bottomButtons.push(
+ floatingButtons.push(
);
- buttons.bottom = bottomButtons;
+ buttons.bottom = floatingButtons;
const audioParticipants = [];
let _contact;
let _identity;
let participants_uris = [];
if (this.props.audioOnly) {
_contact = this.foundContacts.get(this.props.call.localIdentity._uri);
_identity = {uri: this.props.call.localIdentity._uri,
displayName: _contact.displayName,
photo: _contact.photo
};
participants_uris.push(this.props.call.localIdentity._uri);
audioParticipants.push(
);
this.state.participants.forEach((p) => {
_contact = this.foundContacts.get(p.identity._uri);
_identity = {uri: p.identity._uri.indexOf('@guest') > -1 ? 'From the web': p.identity._uri,
displayName: (_contact && _contact.displayName != p.identity._displayName) ? _contact.displayName : p.identity._displayName,
photo: _contact ? _contact.photo: null
};
participants_uris.push(p.identity._uri);
let status;
if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) {
status = 'Muted';
} else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) {
if (this.packetLoss.get(p.id) === 100) {
status = 'No media';
participantsCount = participantsCount - 1;
} else {
status = this.packetLoss.get(p.id) + '% loss';
}
} else if (this.latency.has(p.id) && this.latency.get(p.id) > 150) {
status = this.latency.get(p.id) + ' ms delay';
}
audioParticipants.push(
);
});
const invitedParties = Array.from(this.invitedParticipants.keys());
let alreadyInvitedParticipants = []
let p;
invitedParties.forEach((_uri) => {
if (participants_uris.indexOf(_uri) > 0) {
return;
}
p = this.invitedParticipants.get(_uri);
_contact = this.foundContacts.get(_uri);
_identity = {uri: _uri,
displayName: (_contact && _contact.displayName ) ? _contact.displayName : _uri,
photo: _contact ? _contact.photo: null
};
if (p.status != 'No answer') {
alreadyInvitedParticipants.push(_uri)
}
audioParticipants.push(
);
});
+
+ const conferenceContainer = this.props.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer;
+ const audioContainer = this.props.isLandscape ? styles.audioContainerLandscape : styles.audioContainer;
+ const chatContainer = this.props.isLandscape ? styles.chatContainerLandscape : styles.chatContainer;
+
return (
-
-
+
+
-
-
-
- {audioParticipants}
-
+
+
+ {audioParticipants}
+
+
+
+
+
+
+
{return p.identity.uri})}
close={this.toggleInviteModal}
room={this.props.remoteUri.split('@')[0]}
defaultDomain = {this.props.defaultDomain}
accountId = {this.props.call.localIdentity._uri}
notificationCenter = {this.props.notificationCenter}
+ lookupContacts = {this.props.lookupContacts}
/>
{drawerParticipants}
);
}
const participants = [];
const drawerParticipants = [];
if (this.state.participants.length > 0) {
if (this.state.activeSpeakers.findIndex((element) => {return element.id === this.props.call.id}) === -1) {
participants.push(
);
}
}
drawerParticipants.push(
);
let videos = [];
let status = '';
if (this.state.participants.length === 0) {
videos.push(
);
} else {
const activeSpeakers = this.state.activeSpeakers;
const activeSpeakersCount = activeSpeakers.length;
if (activeSpeakersCount > 0) {
activeSpeakers.forEach((p) => {
status = '';
if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) {
status = 'Muted';
} else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) {
if (this.packetLoss.get(p.id) === 100) {
status = 'No media';
return;
} else {
status = this.packetLoss.get(p.id) + '% loss';
}
} else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) {
status = this.latency.get(p.id) + ' ms delay';
}
if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) {
status = 'Muted';
} else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) {
if (this.packetLoss.get(p.id) === 100) {
status = 'No media';
return;
} else {
status = this.packetLoss.get(p.id) + '% loss';
}
}
videos.push(
);
});
this.state.participants.forEach((p) => {
status = '';
if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) {
status = 'Muted';
} else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) {
if (this.packetLoss.get(p.id) === 100) {
status = 'No media';
participantsCount = participantsCount - 1;
return;
} else {
status = this.packetLoss.get(p.id) + '% loss';
}
} else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) {
status = this.latency.get(p.id) + ' ms delay';
}
if (this.state.activeSpeakers.indexOf(p) === -1) {
participants.push(
{}}
pauseVideo={true}
display={false}
status={status}
/>
);
}
drawerParticipants.push(
);
});
} else {
this.state.participants.forEach((p, idx) => {
status = '';
if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) {
status = 'Muted';
} else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) {
if (this.packetLoss.get(p.id) === 100) {
status = 'No media';
participantsCount = participantsCount - 1;
return;
} else {
status = this.packetLoss.get(p.id) + '% loss';
}
} else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) {
status = this.latency.get(p.id) + ' ms';
}
videos.push(
= 4) || (idx >= 2 && this.props.isTablet === false)}
isLandscape={this.props.isLandscape}
isTablet={this.props.isTablet}
useTwoRows={this.state.participants.length > 2}
status={status}
/>
);
if (idx >= 4 || idx >= 2 && this.props.isTablet === false) {
participants.push(
);
}
drawerParticipants.push(
);
});
}
}
// let filesDrawerContent = (
//
// );
const currentParticipants = this.state.participants.map((p) => {return p.identity.uri})
const alreadyInvitedParticipants = this.invitedParticipants ? Array.from(this.invitedParticipants.keys()) : [];
+ const conferenceContainer = this.props.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer;
+ const audioContainer = this.props.isLandscape ? styles.audioContainerLandscape : styles.audioContainer;
+ const chatContainer = this.props.isLandscape ? styles.chatContainerLandscape : styles.chatContainer;
+
return (
-
+
+
{videos}
+
{participants}
+
+ {this.state.chatView ?
+
+
+
+ : null}
+
{drawerParticipants}
);
}
}
ConferenceBox.propTypes = {
notificationCenter : PropTypes.func.isRequired,
call : PropTypes.object,
connection : PropTypes.object,
hangup : PropTypes.func,
saveParticipant : PropTypes.func,
previousParticipants: PropTypes.array,
remoteUri : PropTypes.string,
generatedVideoTrack : PropTypes.bool,
toggleMute : PropTypes.func,
toggleSpeakerPhone : PropTypes.func,
speakerPhoneEnabled : PropTypes.bool,
isLandscape : PropTypes.bool,
isTablet : PropTypes.bool,
muted : PropTypes.bool,
defaultDomain : PropTypes.string,
inFocus : PropTypes.bool,
reconnectingCall : PropTypes.bool,
audioOnly : PropTypes.bool,
- contacts : PropTypes.array,
initialParticipants : PropTypes.array,
terminated : PropTypes.bool,
- myDisplayNames : PropTypes.object
+ myDisplayNames : PropTypes.object,
+ lookupContacts : PropTypes.func
+
};
export default ConferenceBox;
diff --git a/app/components/ConferenceModal.js b/app/components/ConferenceModal.js
index 139a4c3..21d39c7 100644
--- a/app/components/ConferenceModal.js
+++ b/app/components/ConferenceModal.js
@@ -1,196 +1,326 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
+import Autocomplete from 'react-native-autocomplete-input';
-import { Portal, Dialog, Button, Text, TextInput, Surface, Chip } from 'react-native-paper';
+import { Portal, Dialog, Button, Text, TextInput, Surface } from 'react-native-paper';
import KeyboardAwareDialog from './KeyBoardAwareDialog';
-
const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
import config from '../config';
import styles from '../assets/styles/blink/_ConferenceModal.scss';
class ConferenceModal extends Component {
constructor(props) {
super(props);
+ let targetUri = props.targetUri ? props.targetUri.split('@')[0] : '';
+
this.state = {
- targetUri: props.targetUri ? props.targetUri.split('@')[0] : '',
+ targetUri: targetUri,
myInvitedParties: props.myInvitedParties,
selectedContact: props.selectedContact,
- participants: null
+ participants: '',
+ filteredContacts: [],
+ searching: false,
+ roomUrl: config.publicUrl + '/conference/' + targetUri
};
this.handleConferenceTargetChange = this.handleConferenceTargetChange.bind(this);
this.onHide = this.onHide.bind(this);
this.joinAudio = this.joinAudio.bind(this);
this.joinVideo = this.joinVideo.bind(this);
}
componentDidMount() {
this.handleConferenceTargetChange(this.state.targetUri);
}
//getDerivedStateFromProps(nextProps, state) {
UNSAFE_componentWillReceiveProps(nextProps) {
let uri = '';
if (nextProps.targetUri) {
uri = nextProps.targetUri.split('@')[0];
}
this.setState({targetUri: uri,
myInvitedParties: nextProps.myInvitedParties,
selectedContact: nextProps.selectedContact,
participants: nextProps.participants
});
+
this.handleConferenceTargetChange(uri);
}
handleConferenceTargetChange(value) {
let targetUri = value;
let participants = [];
let sanitizedParticipants = [];
let username;
let domain;
if (targetUri) {
let uri = `${targetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`;
uri = uri.split('@')[0];
if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(uri)) {
participants = this.state.myInvitedParties[uri];
} else if (this.state.selectedContact && this.state.selectedContact.participants) {
participants = this.state.selectedContact.participants;
}
participants.forEach((item) => {
item = item.trim().toLowerCase();
if (item === this.props.accountId) {
return;
}
if (item.indexOf('@') === -1) {
sanitizedParticipants.push(item);
} else {
const domain = item.split('@')[1];
if (domain === this.props.defaultDomain) {
sanitizedParticipants.push(item.split('@')[0]);
} else {
sanitizedParticipants.push(item);
}
}
});
- }
- if (targetUri) {
- this.setState({targetUri: targetUri});
}
- this.setState({participants: sanitizedParticipants.toString().replace(/,/g, ", ")});
+ this.setState({targetUri: targetUri,
+ searching: false,
+ roomUrl: targetUri ? config.publicUrl + '/conference/' + targetUri: '',
+ participants: sanitizedParticipants.toString().replace(/,/g, ", ")
+ });
}
joinAudio(event) {
event.preventDefault();
+ if (!this.state.targetUri) {
+ return;
+ }
const uri = `${this.state.targetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`;
const participants = [];
if (this.state.participants) {
this.state.participants.split(',').forEach((item) => {
item = item.trim().toLowerCase().replace(' ', '');
if (item.indexOf('@') === -1) {
item = `${item}@${this.props.defaultDomain}`;
}
participants.push(item);
});
}
this.props.handleConferenceCall(uri.toLowerCase(), {audio: true, video: false, participants: participants});
}
joinVideo(event) {
event.preventDefault();
const uri = `${this.state.targetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`;
const participants = [];
if (this.state.participants) {
this.state.participants.split(',').forEach((item) => {
item = item.trim().toLowerCase().replace(' ', '');
if (item.indexOf('@') === -1) {
item = `${item}@${this.props.defaultDomain}`;
}
participants.push(item);
});
}
this.props.handleConferenceCall(uri.toLowerCase(), {audio: true, video: true, participants: participants});
}
onHide() {
this.props.handleConferenceCall(null);
}
+ isValidUri(uri) {
+ if (uri === this.props.accountId) {
+ return false;
+ }
+
+ let username = uri.split('@')[0];
+ let domain = uri.split('@')[1];
+
+ if (username.match(/^(\+?)([\-|\d]+)$/) && !domain) {
+ return false;
+ }
+
+ if (domain) {
+ if (domain.indexOf('yahoo') > -1) {
+ return false;
+ }
+
+ if (domain.indexOf('icloud') > -1) {
+ return false;
+ }
+
+ if (domain.indexOf('gmail') > -1) {
+ return false;
+ }
+ }
+
+ return true;
+ }
+
+ searchContacts(text) {
+ const search_text = text;
+ let filteredContacts = [];
+ let searching = false;
+
+ if (!text.startsWith(this.state.participants)) {
+ this.setState({participants: text,
+ filteredContacts: [],
+ searching: false});
+ return;
+ }
+
+ if (text.indexOf(',') > -1) {
+ const text_els = text.split(',');
+ text = text_els[text_els.length - 1].trim()
+ }
+
+ if (text.length > 1) {
+ filteredContacts = this.props.lookupContacts(text);
+ let already_added = this.state.participants.replace(/\s+,\s+/g, ",").split(',');
+ filteredContacts = filteredContacts.filter(x => !already_added.includes(x.remoteParty) && this.isValidUri(x.remoteParty));
+
+ if (filteredContacts.length > 0) {
+ searching = true;
+ }
+ }
+
+ this.setState({filteredContacts: filteredContacts.slice(0, 6),
+ participants: search_text,
+ searching: searching
+ });
+ }
+
+ isPhoneNumber(uri) {
+ let username = uri.split('@')[0];
+ let domain = uri.split('@')[1];
+ if (username.match(/^(\+|0)(\d+)$/) && !domain) {
+ return true;
+ }
+
+ return false;
+ }
+
+ updateParticipants(contact) {
+ let participants = this.state.participants.replace(/\s+,\s+/g, ",");
+ let els = participants.split(',');
+ if (els.length === 1) {
+ participants = contact.remoteParty;
+ } else {
+ els.pop(-1);
+ els.push(contact.remoteParty);
+ participants = els.toString(',');
+ }
+
+ this.setState({participants: participants.replace(/,/g, ", "),
+ filteredContacts: [],
+ searching: false});
+ }
+
+ //https://reactnativecode.com/react-native-autocomplete-text-input/
+
+ /*
+
+
+ {this.state.roomUrl}
+
+
+
+ */
+
render() {
const validUri = this.state.targetUri.length > 0 && this.state.targetUri.indexOf('@') === -1;
return (
-
+
-
+
Join Conference
+
+ Invite people
+
+ i.toString()}
+ onChangeText={(text) => this.searchContacts(text)}
+ placeholder="Enter Sylk accounts separated by ,"
+ renderItem={({item}) => (
+ {this.updateParticipants(item);}}>
+
+ {item.displayName ? item.displayName + ' ('+ item.remoteParty + ')' : item.remoteParty}
+
+
+ )}
+ />
+
+
{this.handleConferenceTargetChange(text);}}
name="uri"
required
defaultValue={this.state.targetUri}
/>
- {this.setState({participants: value});}}
- value={this.state.participants}
- placeholder="Enter accounts separated by ,"
- clearButtonMode="always"
- />
+
+
+
+
+ Others can join
+ later using a Web browser
+
+
+
+
);
}
}
ConferenceModal.propTypes = {
show: PropTypes.bool.isRequired,
handleConferenceCall: PropTypes.func.isRequired,
myInvitedParties: PropTypes.object,
accountId: PropTypes.string,
selectedContact: PropTypes.object,
targetUri: PropTypes.string.isRequired,
- defaultDomain: PropTypes.string
+ defaultDomain: PropTypes.string,
+ lookupContacts: PropTypes.func
};
export default ConferenceModal;
diff --git a/app/components/InviteParticipantsModal.js b/app/components/InviteParticipantsModal.js
index 95200e6..a8e497d 100644
--- a/app/components/InviteParticipantsModal.js
+++ b/app/components/InviteParticipantsModal.js
@@ -1,198 +1,286 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import autoBind from 'auto-bind';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
import { Dialog, Portal, Text, Button, Surface, TextInput, IconButton} from 'react-native-paper';
import KeyboardAwareDialog from './KeyBoardAwareDialog';
import { openComposer } from 'react-native-email-link';
import Share from 'react-native-share';
+import Autocomplete from 'react-native-autocomplete-input';
const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
import config from '../config';
-import styles from '../assets/styles/blink/_InviteParticipantsModal.scss';
import utils from '../utils';
+import styles from '../assets/styles/blink/_ConferenceModal.scss';
class InviteParticipantsModal extends Component {
constructor(props) {
super(props);
autoBind(this);
const sanitizedParticipants = [];
let participants = [];
- if (this.props.previousParticipants && this.props.currentParticipants && this.props.alreadyInvitedParticipants) {
- participants = this.props.previousParticipants.filter(x => !this.props.currentParticipants.includes(x));
- participants = participants.filter(x => !this.props.alreadyInvitedParticipants.includes(x) && x !== this.props.accountId);
- }
+ participants = this.props.previousParticipants.filter(x => !this.props.currentParticipants.includes(x));
+ participants = participants.filter(x => !this.props.alreadyInvitedParticipants.includes(x) && x !== this.props.accountId);
participants.forEach((item) => {
item = item.trim().toLowerCase();
if (item.indexOf('@') === -1) {
sanitizedParticipants.push(item);
} else {
const domain = item.split('@')[1];
if (domain === this.props.defaultDomain) {
sanitizedParticipants.push(item.split('@')[0]);
} else {
sanitizedParticipants.push(item);
}
}
});
this.state = {
participants: sanitizedParticipants.toString().replace(/,/g, ", "),
previousParticipants: this.props.previousParticipants,
currentParticipants: this.props.currentParticipants,
- roomUrl: config.publicUrl + '/conference/' + this.props.room
+ roomUrl: config.publicUrl + '/conference/' + this.props.room,
+ filteredContacts: [],
+ searching: false
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.hasOwnProperty('muted')) {
this.setState({audioMuted: nextProps.muted});
}
let difference = nextProps.previousParticipants.filter(x => !nextProps.currentParticipants.includes(x));
difference = difference.filter(x => !nextProps.alreadyInvitedParticipants.includes(x) && x !== this.props.accountId);
this.setState({
- participants: difference.toString(),
alreadyInvitedParticipants: nextProps.alreadyInvitedParticipants,
previousParticipants: nextProps.previousParticipants,
- currentParticipants: nextProps.currentParticipants
+ currentParticipants: nextProps.currentParticipants,
+ roomUrl: config.publicUrl + '/conference/' + nextProps.room
});
}
handleClipboardButton(event) {
utils.copyToClipboard(this.state.roomUrl);
this.props.notificationCenter().postSystemNotification('Join conference', {body: 'Conference address copied to clipboard'});
this.props.close();
}
handleEmailButton(event) {
const emailMessage = 'You can join the conference using a Web browser at ' + this.state.roomUrl +
' or by using Sylk client app from https://sylkserver.com';
const subject = 'Join conference, maybe?';
openComposer({
subject,
body: emailMessage
})
this.props.close();
}
handleShareButton(event) {
const subject = 'Join conference, maybe?';
const message = 'You can join the conference using a Web browser at ' + this.state.roomUrl +
' or by using Sylk client app from https://sylkserver.com';
let options= {
subject: subject,
message: message
}
Share.open(options)
.then((res) => {
this.props.close();
})
.catch((err) => {
this.props.close();
});
}
invite(event) {
event.preventDefault();
const uris = [];
if (this.state.participants) {
this.state.participants.split(',').forEach((item) => {
item = item.trim();
if (item.indexOf('@') === -1) {
item = `${item}@${this.props.defaultDomain}`;
}
uris.push(item);
});
}
+
if (uris) {
this.props.inviteParticipants(uris);
- this.setState({participants: null});
+ this.setState({participants: ''});
}
+
this.props.close();
}
- onInputChange(value) {
- this.setState({participants: value});
+ isValidUri(uri) {
+ if (uri === this.props.accountId) {
+ return false;
+ }
+
+ let username = uri.split('@')[0];
+ let domain = uri.split('@')[1];
+
+ if (username.match(/^(\+?)([\-|\d]+)$/) && !domain) {
+ return false;
+ }
+
+ if (domain) {
+ if (domain.indexOf('yahoo') > -1) {
+ return false;
+ }
+
+ if (domain.indexOf('icloud') > -1) {
+ return false;
+ }
+
+ if (domain.indexOf('gmail') > -1) {
+ return false;
+ }
+ }
+
+ return true;
+ }
+
+ searchContacts(text) {
+ const search_text = text;
+ let filteredContacts = [];
+ let searching = false;
+
+ if (!text.startsWith(this.state.participants)) {
+ this.setState({participants: text,
+ filteredContacts: [],
+ searching: false});
+ return;
+ }
+
+ if (text.indexOf(',') > -1) {
+ const text_els = text.split(',');
+ text = text_els[text_els.length - 1].trim()
+ }
+
+ if (text.length > 1) {
+ filteredContacts = this.props.lookupContacts(text);
+ let already_added = this.state.participants.replace(/\s+,\s+/g, ",").split(',');
+ filteredContacts = filteredContacts.filter(x => !already_added.includes(x.remoteParty) && this.isValidUri(x.remoteParty));
+
+ if (filteredContacts.length > 0) {
+ searching = true;
+ }
+ }
+
+ this.setState({filteredContacts: filteredContacts.slice(0, 6),
+ participants: search_text,
+ searching: searching
+ });
+ }
+
+ updateParticipants(contact) {
+ let participants = this.state.participants.replace(/\s+,\s+/g, ",");
+ let els = participants.split(',');
+ if (els.length === 1) {
+ participants = contact.remoteParty;
+ } else {
+ els.pop(-1);
+ els.push(contact.remoteParty);
+ participants = els.toString(',');
+ }
+
+ this.setState({participants: participants.replace(/,/g, ", "),
+ filteredContacts: [],
+ searching: false});
}
render() {
return (
-
+
-
- Invite to conference
-
+ Invite people
+
+
+ i.toString()}
+ onChangeText={(text) => this.searchContacts(text)}
+ placeholder="Enter Sylk accounts separated by ,"
+ renderItem={({item}) => (
+ {this.updateParticipants(item);}}>
+
+ {item.displayName ? item.displayName + ' ('+ item.remoteParty + ')' : item.remoteParty}
+
+
+ )}
/>
-
+
+
Or share the conference link:
);
}
}
InviteParticipantsModal.propTypes = {
notificationCenter : PropTypes.func.isRequired,
show: PropTypes.bool.isRequired,
close: PropTypes.func.isRequired,
inviteParticipants: PropTypes.func,
currentParticipants: PropTypes.array,
previousParticipants: PropTypes.array,
alreadyInvitedParticipants: PropTypes.array,
room: PropTypes.string,
defaultDomain: PropTypes.string,
- accountId: PropTypes.string
+ accountId: PropTypes.string,
+ lookupContacts: PropTypes.func
};
export default InviteParticipantsModal;
diff --git a/app/components/ReadyBox.js b/app/components/ReadyBox.js
index 77ef691..cc18106 100644
--- a/app/components/ReadyBox.js
+++ b/app/components/ReadyBox.js
@@ -1,365 +1,367 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import autoBind from 'auto-bind';
import { View, Platform} from 'react-native';
import { IconButton, Title, Button } from 'react-native-paper';
import ConferenceModal from './ConferenceModal';
import HistoryTileBox from './HistoryTileBox';
import FooterBox from './FooterBox';
import URIInput from './URIInput';
import config from '../config';
import utils from '../utils';
import styles from '../assets/styles/blink/_ReadyBox.scss';
class ReadyBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
targetUri: '',
contacts: this.props.contacts,
selectedContact: null,
showConferenceModal: false,
sticky: false,
favoriteUris: this.props.favoriteUris,
blockedUris: this.props.blockedUris,
historyFilter: null,
missedCalls: false,
participants: null,
myInvitedParties: this.props.myInvitedParties
};
this.ended = false;
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.ended) {
return;
}
this.setState({myInvitedParties: nextProps.myInvitedParties});
}
getTargetUri(uri) {
return utils.normalizeUri(uri, this.props.defaultDomain);
}
async componentDidMount() {
this.ended = false;
}
componentWillUnmount() {
this.ended = true;
}
setMissedCalls(flag) {
if (this.ended) {
return;
}
this.setState({missedCalls: flag});
}
filterHistory(filter) {
if (this.ended) {
return;
}
this.setState({'historyFilter': filter});
this.handleTargetChange('');
}
handleTargetChange(value, contact) {
let new_value = value;
if (contact) {
if (this.state.targetUri === contact.uri) {
new_value = '';
}
}
if (this.state.targetUri === value) {
new_value = '';
}
if (new_value === '') {
contact = null;
}
this.setState({targetUri: new_value, selectedContact: contact});
}
handleTargetSelect() {
if (this.props.connection === null) {
this.props._notificationCenter.postSystemNotification("Server unreachable");
return;
}
// the user pressed enter, start a video call by default
let uri = this.state.targetUri.toLowerCase();
if (uri.endsWith(`@${config.defaultConferenceDomain}`)) {
let participants;
if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(uri)) {
participants = this.state.myInvitedParties[uri];
}
this.props.startConference(uri, {audio: true, video: true, participants: this.state.participants});
} else {
this.props.startCall(this.getTargetUri(uri), {audio: true, video: true});
}
}
showConferenceModal(event) {
event.preventDefault();
this.setState({showConferenceModal: true});
return;
}
handleAudioCall(event) {
event.preventDefault();
let uri = this.state.targetUri.toLowerCase();
var uri_parts = uri.split("/");
if (uri_parts.length === 5 && uri_parts[0] === 'https:') {
// https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link
// https://webrtc.sipthor.net/call/alice@example.com from external web link
let event = uri_parts[3];
uri = uri_parts[4];
if (event === 'conference') {
uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain;
}
}
if (uri.endsWith(`@${config.defaultConferenceDomain}`)) {
this.props.startConference(uri, {audio: true, video: false});
} else {
this.props.startCall(this.getTargetUri(uri), {audio: true, video: false});
}
}
handleVideoCall(event) {
event.preventDefault();
let uri = this.state.targetUri.toLowerCase();
var uri_parts = uri.split("/");
if (uri_parts.length === 5 && uri_parts[0] === 'https:') {
// https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link
// https://webrtc.sipthor.net/call/alice@example.com from external web link
let event = uri_parts[3];
uri = uri_parts[4];
if (event === 'conference') {
uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain;
}
}
if (uri.endsWith(`@${config.defaultConferenceDomain}`)) {
this.props.startConference(uri, {audio: true, video: true});
} else {
this.props.startCall(this.getTargetUri(uri), {audio: true, video: true});
}
}
handleConferenceCall(targetUri, options={audio: true, video: true, participants: []}) {
this.props.startConference(targetUri, {audio: options.audio, video: options.video, participants: options.participants});
this.setState({showConferenceModal: false});
}
conferenceButtonActive() {
if (this.state.targetUri.indexOf('@guest.') > -1) {
return false;
}
if (this.state.targetUri.indexOf('@') > -1 &&
this.state.targetUri.indexOf(config.defaultConferenceDomain) === -1) {
return false;
}
let uri = this.state.targetUri.toLowerCase();
var uri_parts = uri.split("/");
if (uri_parts.length === 5 && uri_parts[0] === 'https:') {
// https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link
// https://webrtc.sipthor.net/call/alice@example.com from external web link
let event = uri_parts[3];
if (event === 'call') {
return false;
}
}
if (this.state.targetUri.match(/^(\+)(\d+)$/)) {
return false;
}
return true;
}
render() {
let uriClass = styles.portraitUriInputBox;
let uriGroupClass = styles.portraitUriButtonGroup;
let titleClass = styles.portraitTitle;
let uri = this.state.targetUri.toLowerCase();
var uri_parts = uri.split("/");
if (uri_parts.length === 5 && uri_parts[0] === 'https:') {
// https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link
// https://webrtc.sipthor.net/call/alice@example.com from external web link
let event = uri_parts[3];
uri = uri_parts[4];
if (event === 'conference') {
uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain;
}
}
const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
if (this.props.isTablet) {
titleClass = this.props.orientation === 'landscape' ? styles.landscapeTabletTitle : styles.portraitTabletTitle;
} else {
titleClass = this.props.orientation === 'landscape' ? styles.landscapeTitle : styles.portraitTitle;
}
if (this.props.isTablet) {
uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriButtonGroup : styles.portraitTabletUriButtonGroup;
} else {
uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeUriButtonGroup : styles.portraitUriButtonGroup;
}
if (this.props.isTablet) {
uriClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriInputBox : styles.portraitTabletUriInputBox;
} else {
uriClass = this.props.orientation === 'landscape' ? styles.landscapeUriInputBox : styles.portraitUriInputBox;
}
const historyClass = this.props.orientation === 'landscape' ? styles.landscapeHistory : styles.portraitHistory;
return (
-1 || this.state.targetUri.indexOf('@guest') > -1}
onPress={this.handleAudioCall}
icon="phone"
/>
-1 || this.state.targetUri.indexOf('@guest') > -1}
onPress={this.handleVideoCall}
icon="video"
/>
{((this.state.favoriteUris.length > 0 || this.state.blockedUris.length > 0 ) ||
(this.state.favoriteUris.length === 0 && this.state.historyFilter === 'favorite') ||
(this.state.blockedUris.length === 0 && this.state.historyFilter === 'blocked') ||
(this.state.historyFilter === 'missed')
) ?
{this.state.historyFilter !== null ? : null}
{(this.state.favoriteUris.length > 0 && this.state.historyFilter !== 'favorite')? : null}
{(this.state.blockedUris.length > 0 && this.state.historyFilter !== 'blocked')? : null}
{(this.state.missedCalls && this.state.historyFilter !== 'missed')? : null}
: null}
{this.props.isTablet && 0?
: null}
);
}
}
ReadyBox.propTypes = {
account : PropTypes.object,
password : PropTypes.string.isRequired,
config : PropTypes.object.isRequired,
startCall : PropTypes.func.isRequired,
startConference : PropTypes.func.isRequired,
contacts : PropTypes.array,
orientation : PropTypes.string,
isTablet : PropTypes.bool,
refreshHistory : PropTypes.bool,
refreshFavorites: PropTypes.bool,
cacheHistory : PropTypes.func,
serverHistory : PropTypes.array,
localHistory : PropTypes.array,
myDisplayName : PropTypes.string,
myPhoneNumber : PropTypes.string,
deleteHistoryEntry: PropTypes.func,
setFavoriteUri : PropTypes.func,
myInvitedParties: PropTypes.object,
setBlockedUri : PropTypes.func,
favoriteUris : PropTypes.array,
blockedUris : PropTypes.array,
defaultDomain : PropTypes.string,
- saveDisplayName : PropTypes.func
+ saveDisplayName : PropTypes.func,
+ lookupContacts : PropTypes.func
};
export default ReadyBox;