Page MenuHomePhabricator
Files F7172207

No OneTemporary
Actions

View Options

diff --git a/app/CallManager.js b/app/CallManager.js
index 78bc99b..88cdb0e 100644
--- a/app/CallManager.js
+++ b/app/CallManager.js
@@ -1,344 +1,353 @@
import events from 'events';
import Logger from '../Logger';
import uuid from 'react-native-uuid';
import { Platform } from 'react-native';
import utils from './utils';
const logger = new Logger('CallManager');
import { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep';
// https://github.com/react-native-webrtc/react-native-callkeep
/*
const CONSTANTS = {
END_CALL_REASONS: {
FAILED: 1,
REMOTE_ENDED: 2,
UNANSWERED: 3,
ANSWERED_ELSEWHERE: 4,
DECLINED_ELSEWHERE: 5,
MISSED: 6
}
};
*/
export default class CallManager extends events.EventEmitter {
constructor(RNCallKeep, acceptFunc, rejectFunc, hangupFunc, timeoutFunc, conferenceCallFunc) {
//logger.debug('constructor()');
super();
this.setMaxListeners(Infinity);
this._RNCallKeep = RNCallKeep;
this._calls = new Map();
this._conferences = new Map();
this._rejectedCalls = new Map();
+
this._decideLater = new Map();
this._timeouts = new Map();
this.sylkAcceptCall = acceptFunc;
this.sylkRejectCall = rejectFunc;
this.sylkHangupCall = hangupFunc;
this.timeoutCall = timeoutFunc;
this.conferenceCall = conferenceCallFunc;
this._boundRnAccept = this._rnAccept.bind(this);
this._boundRnEnd = this._rnEnd.bind(this);
this._boundRnMute = this._rnMute.bind(this);
this._boundRnActiveAudioCall = this._rnActiveAudioSession.bind(this);
this._boundRnDeactiveAudioCall = this._rnDeactiveAudioSession.bind(this);
this._boundRnDTMF = this._rnDTMF.bind(this);
this._boundRnProviderReset = this._rnProviderReset.bind(this);
this._RNCallKeep.addEventListener('answerCall', this._boundRnAccept);
this._RNCallKeep.addEventListener('endCall', this._boundRnEnd);
this._RNCallKeep.addEventListener('didPerformSetMutedCallAction', this._boundRnMute);
this._RNCallKeep.addEventListener('didActivateAudioSession', this._boundRnActiveAudioCall);
this._RNCallKeep.addEventListener('didDeactivateAudioSession', this._boundRnDeactiveAudioCall.bind(this));
this._RNCallKeep.addEventListener('didPerformDTMFAction', this._boundRnDTMF);
this._RNCallKeep.addEventListener('didResetProvider', this._boundRnProviderReset);
}
get callKeep() {
return this._RNCallKeep;
}
get count() {
return this._calls.size;
}
get waitingCount() {
return this._timeouts.size;
}
get callUUIDS() {
return Array.from( this._calls.keys() );
}
get calls() {
return [...this._calls.values()];
}
get activeCall() {
for (let call of this.calls) {
if (call.active) {
return call;
}
}
}
backToForeground() {
utils.timestampedLog('Callkeep: bring app to the foreground');
this.callKeep.backToForeground();
}
setMutedCall(callUUID, mute) {
utils.timestampedLog('Callkeep: set muted: ', mute);
this.callKeep.setMutedCall(callUUID, mute);
}
startCall(callUUID, targetUri, targetName, hasVideo) {
utils.timestampedLog('Callkeep: start outgoing call', callUUID);
if (Platform.OS === 'ios') {
this.callKeep.startCall(callUUID, targetUri, targetUri, 'email', hasVideo);
} else if (Platform.OS === 'android') {
this.callKeep.startCall(callUUID, targetUri, targetUri);
}
}
updateDisplay(callUUID, displayName, uri) {
utils.timestampedLog('Callkeep: update display', displayName, uri);
this.callKeep.updateDisplay(callUUID, displayName, uri);
}
sendDTMF(callUUID, digits) {
utils.timestampedLog('Callkeep: send DTMF: ', digits);
this.callKeep.sendDTMF(callUUID, digits);
}
setCurrentCallActive(callUUID) {
utils.timestampedLog('Callkeep: set call active', callUUID);
this.callKeep.setCurrentCallActive(callUUID);
}
rejectCall(callUUID) {
utils.timestampedLog('Callkeep: reject call', callUUID);
this.callKeep.rejectCall(callUUID);
}
+ endCalls() {
+ utils.timestampedLog('Callkeep: end all calls');
+ this.callKeep.endAllCalls();
+ }
+
endCall(callUUID, reason) {
utils.timestampedLog('Callkeep: end call', callUUID, ' with reason', reason);
if (reason) {
this.callKeep.reportEndCallWithUUID(callUUID, reason);
} else {
this.callKeep.endCall(callUUID);
}
this._calls.delete(callUUID);
}
- _rnActiveAudioSession(data) {
+ _rnActiveAudioSession() {
utils.timestampedLog('Callkeep: activated audio call');
- console.log(data);
}
- _rnDeactiveAudioSession(data) {
+ _rnDeactiveAudioSession() {
utils.timestampedLog('Callkeep: deactivated audio call');
- console.log(data);
}
_rnAccept(data) {
let callUUID = data.callUUID.toLowerCase();
utils.timestampedLog('Callkeep: accept callback', callUUID);
if (this._conferences.has(callUUID)) {
let room = this._conferences.get(callUUID);
utils.timestampedLog('Callkeep: accept incoming conference', callUUID);
this.callKeep.endCall(callUUID);
this._conferences.delete(callUUID);
if (this._timeouts.has(callUUID)) {
clearTimeout(this._timeouts.get(callUUID));
this._timeouts.delete(callUUID);
}
utils.timestampedLog('Will start conference to', room);
this.conferenceCall(room);
// start an outgoing conference call
} else if (this._calls.has(callUUID)) {
// if we have audio only we must skip video from get local media
this.sylkAcceptCall();
} else {
// We accepted the call before it arrived on web socket
// from iOS push notifications
+ this.backToForeground();
this._decideLater.set(callUUID, 'accept');
}
}
_rnEnd(data) {
//get the uuid, find the call with that uuid and ccept it
let callUUID = data.callUUID.toLowerCase();
utils.timestampedLog('Callkeep: end callback', callUUID);
if (this._conferences.has(callUUID)) {
utils.timestampedLog('Callkeep: reject conference invite', callUUID);
let room = this._conferences.get(callUUID);
this.callKeep.endCall(callUUID);
this._conferences.delete(callUUID);
if (this._timeouts.has(callUUID)) {
clearTimeout(this._timeouts.get(callUUID));
this._timeouts.delete(callUUID);
}
} else if (this._calls.has(callUUID)) {
utils.timestampedLog('Callkeep: hangup call', callUUID);
let call = this._calls.get(callUUID);
if (call.state === 'incoming') {
this.sylkRejectCall(callUUID);
} else {
this.sylkHangupCall(callUUID);
}
} else {
// We rejected the call before it arrived on web socket
// from iOS push notifications
utils.timestampedLog('Callkeep: add call', callUUID, 'to the waitings list');
this._decideLater.set(callUUID, 'reject');
this._rejectedCalls.set(callUUID, true);
}
}
_rnMute(data) {
utils.timestampedLog('Callkeep: mute ' + data.muted + ' for call', data.callUUID);
//get the uuid, find the call with that uuid and mute/unmute it
if (this._calls.has(data.callUUID.toLowerCase())) {
let call = this._calls.get(data.callUUID.toLowerCase());
const localStream = call.getLocalStreams()[0];
localStream.getAudioTracks()[0].enabled = !data.muted;
}
}
_rnDTMF(data) {
utils.timestampedLog('Callkeep: got dtmf for call', data.callUUID);
if (this._calls.has(data.callUUID.toLowerCase())) {
let call = this._calls.get(data.callUUID.toLowerCase());
utils.timestampedLog('sending webrtc dtmf', data.digits)
call.sendDtmf(data.digits);
}
}
_rnProviderReset() {
utils.timestampedLog('Callkeep: got a provider reset, clearing down all calls');
this._calls.forEach((call) => {
call.terminate();
})
}
handleIncomingPushCall(callUUID, notificationContent) {
// call is received by push notification
+ if (this._calls.has(callUUID)) {
+ utils.timestampedLog('Callkeep: call', callUUID, 'already handled');
+ return;
+ }
+
utils.timestampedLog('Callkeep: handle later incoming call', callUUID);
let reason = this._decideLater.has(callUUID) ? CK_CONSTANTS.END_CALL_REASONS.FAILED : CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
// if user does not decide anything this will be handled later
this._timeouts.set(callUUID, setTimeout(() => {
utils.timestampedLog('Callkeep: end call later', callUUID);
this.callKeep.reportEndCallWithUUID(callUUID, reason);
this._timeouts.delete(callUUID);
}, 45000));
}
handleIncomingWebSocketCall(call) {
call._callkeepUUID = call.id;
this._calls.set(call._callkeepUUID, call);
utils.timestampedLog('Callkeep: start incoming call', call._callkeepUUID);
if (this._timeouts.has(call.id)) {
clearTimeout(this._timeouts.get(call.id));
this._timeouts.delete(call.id);
}
// if the call came via push and was already accepted or rejected
if (this._decideLater.get(call._callkeepUUID)) {
let action = this._decideLater.get(call._callkeepUUID);
utils.timestampedLog('Callkeep: execute action', action);
if (action === 'accept') {
this.sylkAcceptCall(call.id);
} else {
this.sylkRejectCall(call.id);
}
this._decideLater.delete(call._callkeepUUID);
} else if (this._rejectedCalls.has(call._callkeepUUID)) {
this.sylkRejectCall(call.id);
} else {
this.showAlertPanel(call);
}
// Emit event.
this._emitSessionsChange(true);
}
handleOutgoingCall(call, callUUID) {
// this is an outgoing call
call._callkeepUUID = callUUID;
-
this._calls.set(call._callkeepUUID, call);
utils.timestampedLog('Callkeep: start outgoing call', call._callkeepUUID);
// Emit event.
this._emitSessionsChange(true);
}
handleConference(callUUID, room, from_uri) {
if (this._conferences.has(callUUID)) {
return;
}
utils.timestampedLog('CallKeep: handle conference', callUUID, 'to uri', room);
this._conferences.set(callUUID, room);
this.showConferenceAlertPanel(callUUID, from_uri);
// there is no cancel, so we add a timer
this._timeouts.set(callUUID, setTimeout(() => {
utils.timestampedLog('Callkeep: conference timeout', callUUID);
this.timeoutCall(callUUID, from_uri);
this.callKeep.reportEndCallWithUUID(callUUID, CK_CONSTANTS.END_CALL_REASONS.MISSED);
this._timeouts.delete(callUUID);
}, 45000));
this._emitSessionsChange(true);
}
showConferenceAlertPanel(callUUID, uri) {
utils.timestampedLog('Callkeep: show alert panel');
if (Platform.OS === 'ios') {
this.callKeep.displayIncomingCall(callUUID, uri, uri, 'email', true);
} else if (Platform.OS === 'android') {
this.callKeep.displayIncomingCall(callUUID, uri, uri);
}
}
showAlertPanel(call) {
utils.timestampedLog('Callkeep: show alert panel');
if (Platform.OS === 'ios') {
this.callKeep.displayIncomingCall(call._callkeepUUID, call.remoteIdentity.uri, call.remoteIdentity.displayName, 'email', call.mediaTypes.video);
} else if (Platform.OS === 'android') {
this.callKeep.displayIncomingCall(call._callkeepUUID, call.remoteIdentity.uri, call.remoteIdentity.displayName);
}
}
_emitSessionsChange(countChanged) {
this.emit('sessionschange', countChanged);
}
destroy() {
this._RNCallKeep.removeEventListener('acceptCall', this._boundRnAccept);
this._RNCallKeep.removeEventListener('endCall', this._boundRnEnd);
this._RNCallKeep.removeEventListener('didPerformSetMutedCallAction', this._boundRnMute);
this._RNCallKeep.removeEventListener('didActivateAudioSession', this._boundRnActiveAudioCall);
this._RNCallKeep.removeEventListener('didDeactivateAudioSession', this._boundRnDeactiveAudioCall);
this._RNCallKeep.removeEventListener('didPerformDTMFAction', this._boundRnDTMF);
this._RNCallKeep.removeEventListener('didResetProvider', this._boundRnProviderReset);
}
}
diff --git a/app/app.js b/app/app.js
index 7215ab1..167b56c 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,1977 +1,1989 @@
import React, { Component, Fragment } from 'react';
import { View, SafeAreaView, ImageBackground, PermissionsAndroid, AppState, Linking, Platform, StyleSheet} from 'react-native';
import { DeviceEventEmitter } from 'react-native';
import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
import { BreadProvider } from "material-bread";
import { registerGlobals } from 'react-native-webrtc';
import { Router, Route, Link, Switch } from 'react-router-native';
import history from './history';
import Logger from "../Logger";
import autoBind from 'auto-bind';
import { firebase } from '@react-native-firebase/messaging';
import VoipPushNotification from 'react-native-voip-push-notification';
import uuid from 'react-native-uuid';
import { getUniqueId, getBundleId, getManufacturer } 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 DeviceInfo from 'react-native-device-info';
registerGlobals();
import * as sylkrtc from 'sylkrtc';
import InCallManager from 'react-native-incall-manager';
import RNCallKeep, { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep';
import RegisterBox from './components/RegisterBox';
import ReadyBox from './components/ReadyBox';
import Call from './components/Call';
import CallByUriBox from './components/CallByUriBox';
import Conference from './components/Conference';
import ConferenceByUriBox from './components/ConferenceByUriBox';
// import AudioPlayer from './components/AudioPlayer';
// import ErrorPanel from './components/ErrorPanel';
import FooterBox from './components/FooterBox';
import StatusBox from './components/StatusBox';
import IncomingCallModal from './components/IncomingCallModal';
import NotificationCenter from './components/NotificationCenter';
import LoadingScreen from './components/LoadingScreen';
import NavigationBar from './components/NavigationBar';
import Preview from './components/Preview';
import CallManager from "./CallManager";
import utils from './utils';
import config from './config';
import storage from './storage';
import styles from './assets/styles/blink/root.scss';
const backgroundImage = require('./assets/images/dark_linen.png');
const logger = new Logger("App");
function checkIosPermissions() {
return new Promise(resolve => PushNotificationIOS.checkPermissions(resolve));
}
const theme = {
...DefaultTheme,
dark: true,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#337ab7',
// accent: '#f1c40f',
},
};
let bundleId = `${getBundleId()}`;
const deviceId = getUniqueId();
const version = '1.0.0';
if (Platform.OS == 'ios') {
bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`;
// bundleId = `${bundleId}.dev`;
}
const callkeepOptions = {
ios: {
appName: 'Sylk',
maximumCallGroups: 1,
maximumCallsPerCallGroup: 2,
supportsVideo: true,
includesCallsInRecents: true,
imageName: "Image-1"
},
android: {
alertTitle: 'Calling account permission',
alertDescription: 'Please allow Sylk inside All calling accounts',
cancelButton: 'Deny',
okButton: 'Allow',
imageName: 'phone_account_icon',
additionalPermissions: [PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, PermissionsAndroid.PERMISSIONS.READ_CONTACTS]
}
};
const mainStyle = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 0
}
});
RNCallKeep.setup(callkeepOptions);
// Application modes
const MODE_NORMAL = Symbol('mode-normal');
const MODE_PRIVATE = Symbol('mode-private');
const MODE_GUEST_CALL = Symbol('mode-guest-call');
const MODE_GUEST_CONFERENCE = Symbol('mode-guest-conference');
class Sylk extends Component {
constructor() {
super();
autoBind(this)
this._loaded = false;
this._initialSstate = {
accountId: '',
password: '',
displayName: '',
account: null,
registrationState: null,
registrationKeepalive: false,
inboundCall: null,
currentCall: null,
isConference: false,
connection: null,
showIncomingModal: false,
showScreenSharingModal: false,
status: null,
targetUri: '',
missedTargetUri: '',
loading: null,
mode: MODE_PRIVATE,
localMedia: null,
generatedVideoTrack: false,
contacts: [],
devices: {},
speakerPhoneEnabled: null,
orientation : 'portrait',
Height_Layout : '',
Width_Layout : '',
outgoingCallUUID: null,
outgoingMedia: null,
hardware: '',
manufacturer: '',
brand: '',
model: '',
phoneNumber: '',
osVersion: '',
- isTablet: false
+ isTablet: false,
+ refreshHistory: false
};
this.pushtoken = null;
this.pushkittoken = null;
this.state = Object.assign({}, this._initialSstate);
this.localHistory = [];
this.myParticipants = {};
this.myInvitedParties = {};
this.__notificationCenter = null;
this.participantsToInvite = null;
this.redirectTo = null;
this.prevPath = null;
this.shouldUseHashRouting = false;
this.muteIncoming = false;
DeviceInfo.getManufacturer().then(manufacturer => {
this.setState({manufacturer: manufacturer,
model: DeviceInfo.getModel(),
brand: DeviceInfo.getBrand(),
osVersion: Platform.Version,
isTablet: DeviceInfo.isTablet()
});
});
DeviceInfo.getPhoneNumber().then(phoneNumber => {
this.setState({phoneNumber: phoneNumber});
});
storage.initialize();
RNCallKeep.addEventListener('checkReachability', () => {
RNCallKeep.setReachable();
});
this._callKeepManager = new CallManager(RNCallKeep, this.acceptCall, this.rejectCall, this.hangupCall, this.timeoutCall, this.callKeepStartConference);
if (InCallManager.recordPermission !== 'granted') {
InCallManager.requestRecordPermission()
.then((requestedRecordPermissionResult) => {
console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult);
})
.catch((err) => {
console.log("InCallManager.requestRecordPermission() catch: ", err);
});
}
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 = {name: name, uri: number_stripped, type: 'contact', photo: photo, label: number['label']};
contact_cards.push(contact_card);
seen_uris.set(number_stripped, true);
}
}
});
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 = {name: name, uri: email_stripped, type: 'contact', photo: photo, label: email['label']};
contact_cards.push(contact_card);
seen_uris.set(email_stripped, true);
}
});
}
this.contacts = contact_cards;
}
})
// Load camera/mic preferences
storage.get('devices').then((devices) => {
if (devices) {
this.setState({devices: devices});
}
});
storage.get('history').then((history) => {
if (history) {
this.localHistory = history;
}
});
storage.get('myParticipants').then((myParticipants) => {
if (myParticipants) {
this.myParticipants = myParticipants;
console.log('My participants', this.myParticipants);
}
});
storage.get('myInvitedParties').then((myInvitedParties) => {
if (myInvitedParties) {
this.myInvitedParties = myInvitedParties;
console.log('My invited parties', this.myInvitedParties);
}
});
}
get _notificationCenter() {
// getter to lazy-load the NotificationCenter ref
if (!this.__notificationCenter) {
this.__notificationCenter = this.refs.notificationCenter;
}
return this.__notificationCenter;
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
_detectOrientation() {
if(this.state.Width_Layout > this.state.Height_Layout && this.state.orientation !== 'landscape') {
utils.timestampedLog("Orientation is landcape")
this.setState({orientation: 'landscape'});
} else {
utils.timestampedLog("Orientation is portrait")
this.setState({orientation: 'portrait'});
}
}
async componentDidMount() {
this._loaded = true;
try {
await RNDrawOverlay.askForDispalayOverOtherAppsPermission();
await RNCallKeep.hasPhoneAccount();
} catch(err) {
utils.timestampedLog(err);
}
history.push('/login');
// prime the ref
//logger.debug('NotificationCenter ref: %o', this._notificationCenter);
this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this);
this._boundOnPushRegistered = this._onPushRegistered.bind(this);
if (Platform.OS === 'android') {
Linking.getInitialURL().then((url) => {
if (url) {
utils.timestampedLog('Initial url is: ' + url);
try {
var url_parts = url.split("/");
console.log('We will call', url_parts[5], 'when ready');
this.callKeepStartCall(url_parts[5], {audio: true, video: true, callUUID: url_parts[4]});
} catch (err) {
utils.timestampedLog('Error parsing url', url, ":", err);
}
}
}).catch(err => {
logger.error({ err }, 'Error getting initial URL');
});
firebase.messaging().getToken()
.then(fcmToken => {
if (fcmToken) {
this._onPushRegistered(fcmToken);
}
});
} else if (Platform.OS === 'ios') {
VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered);
VoipPushNotification.registerVoipToken();
PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered);
//let permissions = await checkIosPermissions();
//if (!permissions.alert) {
PushNotificationIOS.requestPermissions();
//}
}
this.boundRnStartAction = this._callkeepStartedCall.bind(this);
this.boundRnDisplayIncomingCall = this._callkeepDisplayIncomingCall.bind(this);
this.boundProximityDetect = this._proximityDetect.bind(this);
RNCallKeep.addEventListener('didReceiveStartCallAction', this.boundRnStartAction);
RNCallKeep.addEventListener('didDisplayIncomingCall', this.boundRnDisplayIncomingCall);
DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect);
AppState.addEventListener('change', this._handleAppStateChange);
if (Platform.OS === 'ios') {
this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this);
this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this);
VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground);
VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground);
} else if (Platform.OS === 'android') {
firebase
.messaging()
.requestPermission()
.then(() => {
// User has authorised
})
.catch(error => {
// User has rejected permissions
});
this.messageListener = firebase
.messaging()
.onMessage((message: RemoteMessage) => {
// this will just wake up the app to receive
// the web-socket invite handled by this.incomingCall()
let event = message.data.event;
utils.timestampedLog('Handle Firebase', event, 'push notification for', message.data['session-id']);
if (event === 'incoming_conference_request') {
this.incomingConference(message.data['session-id'], message.data['to_uri'], message.data['from_uri']);
}
});
}
//this._detectOrientation();
}
_proximityDetect(data) {
return;
if (data.isNear) {
this.speakerphoneOff();
} else {
this.speakerphoneOn();
}
}
_callkeepDisplayIncomingCall(data) {
utils.timestampedLog('Incoming alert panel displayed');
}
_callkeepStartedCall(data) {
utils.timestampedLog("_callkeepStartedCall from outside");
console.log(data);
if (!this._tmpCallStartInfo || ! this._tmpCallStartInfo.options) {
utils.timestampedLog("CallKeep started call from outside the app to", data.handle);
// we dont have options in the tmp var, which means this likely came from the native dialer
// for now, we only do audio calls from the native dialer.
let callUUID = data.callUUID || uuid.v4();
let is_conf = data.handle.search('videoconference.') === -1 ? false: true;
if (is_conf) {
this.callKeepStartConference(data.handle, {audio: true, video: true, callUUID: callUUID});
} else {
this.callKeepStartCall(data.handle, {audio: true, video: false, callUUID: callUUID});
}
} else {
utils.timestampedLog("CallKeep started call from the app to", data.handle, this._tmpCallStartInfo);
if (this._tmpCallStartInfo.options && this._tmpCallStartInfo.options.conference) {
this.startConference(data.handle);
} else if (this._tmpCallStartInfo.options) {
this.startCall(data.handle, this._tmpCallStartInfo.options);
}
}
this._notificationCenter.removeNotification();
}
async startCallWhenReady(targetUri, options) {
utils.timestampedLog('Start call when ready to', targetUri);
var n = 0;
let wait_interval = 15;
while (n < wait_interval) {
if (!this.state.connection) {
utils.timestampedLog('Web socket is down');
}
if (!this.state.connection || this.state.connection.state !== 'ready' || this.state.account === null) {
utils.timestampedLog('Waiting for connection...');
this._notificationCenter.postSystemNotification('Waiting for connection...', {timeout: 1});
await this._sleep(1000);
} else {
//this._notificationCenter.postSystemNotification('Server is ready', {timeout: 1});
utils.timestampedLog('Web socket is ready');
utils.timestampedLog('Using account', this.state.account.id);
if (options.conference) {
this.startConference(targetUri, options);
} else {
this.startCall(targetUri, options);
}
return;
}
if (n === wait_interval - 1) {
utils.timestampedLog('Terminating call', options.callUUID, 'that did not start yet');
this._callKeepManager.endCall(callUUID, 6);
this.setState({targetUri: null});
}
n++;
}
this._notificationCenter.postSystemNotification('No internet connection', {body: '', timeout: 3});
}
_sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
_onPushkitRegistered(token) {
utils.timestampedLog('Set VoIP pushkit token', token);
this.pushkittoken = token;
}
_onPushRegistered(token) {
utils.timestampedLog('Set background push token', token);
this.pushtoken = token;
}
_sendPushToken() {
if (this.state.account && this.pushtoken) {
let token = null;
if (Platform.OS === 'ios') {
token = `${this.pushkittoken}#${this.pushtoken}`;
} else if (Platform.OS === 'android') {
token = this.pushtoken;
}
utils.timestampedLog('Push token', token, 'sent to server');
this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId);
}
}
componentWillUnmount() {
RNCallKeep.removeEventListener('didReceiveStartCallAction', this.boundRnStartAction);
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = nextAppState => {
//TODO - stop if we havent been backgrounded because of becoming active from a push notification and then going background again
// if (nextAppState.match(/background/)) {
// logger.debug('app moving to background so we should stop the client sylk client if we dont have an active call');
// if (this._callKeepManager.count === 0) {
// logger.debug('callmanager count is 0 so closing connection');
// this.state.connection.close();
// }
// }
if (nextAppState === 'active') {
if (this._callKeepManager.count === 0 && this.state.connection) {
this.state.connection.reconnect();
}
}
}
connectionStateChanged(oldState, newState) {
utils.timestampedLog('Web socket state changed:', oldState, '->' , newState);
switch (newState) {
case 'closed':
this.setState({connection: null, loading: null});
this._notificationCenter.postSystemNotification('Connection failed', {body: '', timeout: 5000});
break;
case 'ready':
//this._notificationCenter.postSystemNotification('Connected to server', {body: '', timeout: 3});
this.processRegistration(this.state.accountId, this.state.password, this.state.displayName);
break;
case 'disconnected':
if (this.state.localMedia) {
sylkrtc.utils.closeMediaStream(this.state.localMedia);
}
if (this.state.currentCall) {
this.hangupCall(this.state.currentCall._callkeepUUID);
}
if (this.state.inboundCall) {
this.hangupCall(this.state.inboundCall._callkeepUUID);
}
history.push('/ready');
this.setState({
registrationState: 'failed',
currentCall: null,
inboundCall: null,
localMedia: null,
generatedVideoTrack: false,
showIncomingModal: false
});
this._notificationCenter.postSystemNotification('Connection lost', {body: '', timeout: 5000});
break;
default:
if (this.state.registrationKeepalive !== true) {
this.setState({loading: 'Connecting...'});
}
break;
}
}
notificationCenter() {
return this._notificationCenter;
}
registrationStateChanged(oldState, newState, data) {
utils.timestampedLog('Registration state changed:', oldState, '->', newState);
if (newState === 'failed') {
RNCallKeep.setAvailable(false);
let reason = data.reason;
if (reason.match(/904/)) {
// Sofia SIP: WAT
reason = 'Wrong account or password';
} else {
reason = 'Connection failed';
}
logger.debug('Registration error: ' + reason);
this.setState({
loading : null,
registrationState: newState,
status : {
msg : 'Sign In failed: ' + reason,
level : 'danger'
}
});
if (this.state.registrationKeepalive === true) {
if (this.state.connection !== null) {
utils.timestampedLog('Retry to register...');
//this.setState({loading: 'Register...'});
this._notificationCenter.postSystemNotification('Registering', {body: 'now', timeout: 10000});
this.state.account.register();
} else {
// add a timer to retry register after awhile
utils.timestampedLog('Retry to register after a delay...');
setTimeout(this.state.account.register(), 5000);
}
}
} else if (newState === 'registered') {
RNCallKeep.setAvailable(true);
this.setState({loading: null, registrationKeepalive: true, registrationState: 'registered'});
if (!this.state.currentCall) {
history.push('/ready');
}
//this._notificationCenter.postSystemNotification('Ready to receive calls', {body: '', timeout: 1});
return;
} else {
this.setState({status: null, registrationState: newState });
RNCallKeep.setAvailable(false);
}
}
showCalls(prefix) {
if (this.state.currentCall) {
utils.timestampedLog('Current calls', prefix, 'currentCall:', this.state.currentCall ? (this.state.currentCall._callkeepUUID + ' ' + this.state.currentCall.direction): 'None');
}
if (this.state.inboundCall) {
utils.timestampedLog('Current calls', prefix, 'inboundCall:', this.state.inboundCall ? (this.state.inboundCall._callkeepUUID + ' ' + this.state.inboundCall.direction): 'None');
}
if (this._callKeepManager.callUUIDS.length > 0) {
utils.timestampedLog('Current calls', prefix, 'callkeep sessions:', this._callKeepManager.callUUIDS);
}
}
callStateChanged(oldState, newState, data) {
// outgoing accepted: null -> progress -> accepted -> established -> terminated
// incoming accepted: null -> incoming -> accepted -> established -> terminated
// 2nd incoming call is automatically rejected by sylkrtc library
utils.timestampedLog('callStateChanged for', data.id, oldState, '->', newState);
//console.log(data);
//this.showCalls('Begin callStateChanged');
let call = this._callKeepManager._calls.get(data.id);
if (!call) {
utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager');
return;
}
let callUUID = call._callkeepUUID;
utils.timestampedLog('State for', call.direction, 'call', callUUID, ' changed:', oldState, '->', newState);
let newCurrentCall;
let newInboundCall;
if (this.state.inboundCall && this.state.currentCall) {
if (this.state.inboundCall != this.state.currentCall) {
utils.timestampedLog('We have two calls');
}
if (newState === 'terminated') {
if (this.state.inboundCall == this.state.currentCall) {
newCurrentCall = null;
newInboundCall = null;
} else {
if (oldState === 'incoming') {
utils.timestampedLog('Call state changed:', 'We have two calls, new call must be cancelled');
// new call must be cancelled
newInboundCall = null;
newCurrentCall = this.state.currentCall;
} else if (oldState === 'established') {
utils.timestampedLog('Call state changed:', 'Old call must be closed');
// old call must be closed
newCurrentCall = null;
newInboundCall = null;
} else {
utils.timestampedLog('Call state changed:', 'Error: unclear call state')
}
}
} else if (newState === 'accepted') {
if (this.state.inboundCall == this.state.currentCall) {
newCurrentCall = this.state.inboundCall;
newInboundCall = this.state.inboundCall;
} else {
utils.timestampedLog('Call state changed:', 'Error: we have two different calls and unhandled state transition');
}
} else if (newState === 'established') {
if (this.state.inboundCall == this.state.currentCall) {
newCurrentCall = this.state.inboundCall;
newInboundCall = this.state.inboundCall;
} else {
utils.timestampedLog('Call state changed:', 'Error: we have two different calls and unhandled state transition');
}
} else {
utils.timestampedLog('Call state changed:', 'We have two calls and unhandled state');
}
} else if (this.state.inboundCall) {
if (oldState === 'incoming' && newState === 'terminated') {
- utils.timestampedLog("New call must be cancelled");
+ utils.timestampedLog("Incoming call was cancelled");
newInboundCall = null;
newCurrentCall = null;
} else if (oldState === 'incoming' && newState === 'accepted') {
- utils.timestampedLog("New call is accepted");
+ utils.timestampedLog("Incoming call is accepted");
newCurrentCall = this.state.inboundCall;
newInboundCall = this.state.inboundCall;
} else if (oldState === 'established' && newState === 'terminated') {
// old call was hangup to accept a new incoming calls
newCurrentCall = null;
newInboundCall = this.state.inboundCall;
} else {
utils.timestampedLog('Call state changed:', 'we have one inbound call and unhandled state');
}
} else {
newCurrentCall = newState === 'terminated' ? null : this.state.currentCall;
newInboundCall = null;
}
switch (newState) {
case 'progress':
InCallManager.startRingback('_BUNDLE_');
break;
case 'established':
this._callKeepManager.setCurrentCallActive(callUUID);
+ this._callKeepManager.backToForeground();
case 'accepted':
if (this.state.isConference) {
// allow ringtone to play once as connection is too fast
setTimeout(() => {InCallManager.stopRingback();}, 2000);
} else {
InCallManager.stopRingback();
}
- this._callKeepManager.backToForeground();
-
if (this.state.isConference) {
//this._callKeepManager.backToForeground();
this.speakerphoneOn();
} else if (this.state.currentCall && this.state.currentCall.remoteMediaDirections) {
const videoTracks = this.state.currentCall.remoteMediaDirections.video;
if (videoTracks && videoTracks.length > 0) {
utils.timestampedLog('Call state changed:', 'Video call started')
//this._callKeepManager.backToForeground();
this.speakerphoneOn();
}
} else {
this.speakerphoneOff();
}
break;
case 'terminated':
let callSuccesfull = false;
let reason = data.reason;
let play_busy_tone = true;
let CALLKEEP_REASON;
utils.timestampedLog('Call state changed:', 'call', callUUID, 'terminated reason:' + reason);
if (!reason || reason.match(/200/)) {
if (oldState == 'progress') {
reason = 'Cancelled';
play_busy_tone = false;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
} else {
reason = 'Hangup';
callSuccesfull = true;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
}
} else if (reason.match(/403/)) {
reason = 'This domain is not served here';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/404/)) {
reason = 'User not found';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/408/)) {
reason = 'Timeout';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/480/)) {
reason = 'User not online';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED;
} else if (reason.match(/486/) || reason.match(/60[036]/)) {
reason = 'Busy';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED;
} else if (reason.match(/487/)) {
reason = 'Cancelled';
play_busy_tone = false;
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.MISSED;
} else if (reason.match(/488/)) {
reason = 'Unacceptable media';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/5\d\d/)) {
reason = 'Server failure';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else if (reason.match(/904/)) {
// Sofia SIP: WAT
reason = 'Wrong account or password';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
} else {
reason = 'Connection failed';
CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED;
}
if (play_busy_tone) {
InCallManager.stop({busytone: '_BUNDLE_'});
} else {
InCallManager.stop();
}
utils.timestampedLog('Call', callUUID, 'ended:', reason);
this._callKeepManager.endCall(callUUID, CALLKEEP_REASON);
if (this.state.currentCall === null) {
utils.timestampedLog('Call state changed:', 'Turn off speakerphone');
this.speakerphoneOff();
}
if (play_busy_tone && oldState !== 'established') {
this._notificationCenter.postSystemNotification('Call ended:', {body: reason, timeout: callSuccesfull ? 5 : 10});
}
this.setState({
- targetUri : callSuccesfull || config.useServerCallHistory ? '' : this.state.targetUri,
showIncomingModal : false,
isConference : false,
localMedia : null,
generatedVideoTrack : false
});
this.setFocusEvents(false);
if (!newCurrentCall && !newInboundCall) {
this.participantsToInvite = null;
history.push('/ready');
- /*
+
setTimeout(() => {
- this.getServerHistory();
+ this.setState({refreshHistory: !this.state.refreshHistory});
}, 1500);
- */
}
this.updateHistoryEntry(callUUID);
break;
default:
break;
}
this.setState({
- currentCall : newCurrentCall,
- inboundCall : newInboundCall
+ currentCall: newCurrentCall,
+ inboundCall: newInboundCall
});
- //this.showCalls('End callStateChanged');
}
handleCallByUri(displayName, targetUri) {
const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`;
this.setState({
accountId : accountId,
password : '',
displayName : displayName,
//mode : MODE_GUEST_CALL,
targetUri : utils.normalizeUri(targetUri, config.defaultDomain),
loading : 'Connecting...'
});
if (this.state.connection === null) {
let connection = sylkrtc.createConnection({server: config.wsServer});
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
}
}
handleConferenceByUri(displayName, targetUri) {
const accountId = `${utils.generateUniqueId()}@${config.defaultGuestDomain}`;
this.setState({
accountId : accountId,
password : '',
displayName : displayName,
//mode : MODE_GUEST_CONFERENCE,
targetUri : targetUri,
loading : 'Connecting...'
});
if (this.state.connection === null) {
let connection = sylkrtc.createConnection({server: config.wsServer});
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
}
}
handleRegistration(accountId, password, remember) {
this.setState({
accountId : accountId,
password : password,
mode : remember ? MODE_NORMAL : MODE_PRIVATE,
loading : 'Connecting...'
});
if (this.state.connection === null) {
let model = this.state.brand + ' ' + this.state.model;
let userAgent = 'Sylk Mobile ' + model + ' (v' + this.state.osVersion + ')';
console.log('User Agent:', userAgent);
if (this.state.phoneNumber) {
console.log('Phone number:', this.state.phoneNumber);
}
let connection = sylkrtc.createConnection({server: config.wsServer, userAgent: {name: userAgent, version: version}});
connection.on('stateChanged', this.connectionStateChanged);
this.setState({connection: connection});
} else {
utils.timestampedLog('Websocket connection active, try to register');
this.processRegistration(accountId, password, '');
}
}
processRegistration(accountId, password, displayName) {
if (this.state.account !== null) {
logger.debug('We already have an account, removing it');
this.state.connection.removeAccount(this.state.account,
(error) => {
if (error) {
logger.debug(error);
}
this.setState({registrationState: null, registrationKeepalive: false});
}
);
}
const options = {
account: accountId,
password: password,
displayName: displayName
};
const account = this.state.connection.addAccount(options, (error, account) => {
if (!error) {
account.on('outgoingCall', this.outgoingCall);
account.on('conferenceCall', this.outgoingCall);
switch (this.state.mode) {
case MODE_PRIVATE:
case MODE_NORMAL:
account.on('registrationStateChanged', this.registrationStateChanged);
account.on('incomingCall', this.incomingCall);
account.on('missedCall', this.missedCall);
account.on('conferenceInvite', this.conferenceInvite);
this.setState({account: account});
this._sendPushToken();
account.register();
logger.debug(this.state.mode);
if (this.state.mode !== MODE_PRIVATE) {
storage.set('account', {
accountId: this.state.accountId,
password: this.state.password
});
} else {
// Wipe storage if private login
//storage.remove('account'); // lets try this out
// history.clear().then(() => {
// this.setState({history: []});
// });
}
break;
case MODE_GUEST_CALL:
this.setState({account: account, loading: null, registrationState: 'registered'});
logger.debug(`${accountId} (guest) signed in`);
// Start the call immediately, this is call started with "Call by URI"
this.startGuestCall(this.state.targetUri, {audio: true, video: true});
break;
case MODE_GUEST_CONFERENCE:
this.setState({account: account, loading: null, registrationState: 'registered'});
logger.debug(`${accountId} (conference guest) signed in`);
// Start the call immediately, this is call started with "Conference by URI"
this.startGuestConference(this.state.targetUri);
break;
default:
logger.debug(`Unknown mode: ${this.state.mode}`);
break;
}
} else {
logger.debug('Add account error: ' + error.message);
let reason = 'Wrong account or password';
this.setState({
loading : null,
status : {
msg : ' Sign In failed: ' + reason,
level : 'danger'
}
});
}
});
}
setDevice(device) {
const oldDevices = Object.assign({}, this.state.devices);
if (device.kind === 'videoinput') {
oldDevices['camera'] = device;
} else if (device.kind === 'audioinput') {
oldDevices['mic'] = device;
}
this.setState({devices: oldDevices});
storage.set('devices', oldDevices);
sylkrtc.utils.closeMediaStream(this.state.localMedia);
this.getLocalMedia();
}
getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) { // eslint-disable-line space-infix-ops
let callType = mediaConstraints.video ? 'video': 'audio';
utils.timestampedLog('Get local media for', callType, 'call, next route', nextRoute);
const constraints = Object.assign({}, mediaConstraints);
if (constraints.video === true) {
if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE)) {
constraints.video = {
'width': {
'ideal': 1280
},
'height': {
'ideal': 720
}
};
// TODO: remove this, workaround so at least safari works when joining a video conference
} else if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE) && isSafari) {
constraints.video = false;
} else {
// ask for 720p video
constraints.video = {
'width': {
'ideal': 1280
},
'height': {
'ideal': 720
}
};
}
}
logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints);
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
devices.forEach((device) => {
//console.log(device);
if ('video' in constraints && 'camera' in this.state.devices) {
if (constraints.video && constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) {
constraints.video.deviceId = {
exact: device.deviceId
};
}
}
if ('mic' in this.state.devices) {
if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) {
// constraints.audio = {
// deviceId: {
// exact: device.deviceId
// }
// };
}
}
});
})
.catch((error) => {
utils.timestampedLog('Error: device enumeration failed:', error);
})
.then(() => {
return navigator.mediaDevices.getUserMedia(constraints)
})
.then((localStream) => {
clearTimeout(this.loadScreenTimer);
utils.timestampedLog('Got local media done, next route is', nextRoute);
this.setState({status: null, loading: null, localMedia: localStream});
if (nextRoute !== null) {
history.push(nextRoute);
}
})
.catch((error) => {
utils.timestampedLog('Access to local media failed, trying audio only', error);
navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
.then((localStream) => {
clearTimeout(this.loadScreenTimer);
/*
logger.debug('Audio only media, but video was requested, creating generated video track');
const generatedVideoTrack = utils.generateVideoTrack(localStream);
localStream.addTrack(generatedVideoTrack);
utils.timestampedLog('Next route', nextRoute);
this.setState({status: null, loading: null, localMedia: localStream, generatedVideoTrack: true});
*/
if (nextRoute !== null) {
history.push(nextRoute);
}
})
.catch((error) => {
utils.timestampedLog('Access to local media failed:', error);
clearTimeout(this.loadScreenTimer);
this._notificationCenter.postSystemNotification("Can't access camera or microphone", {timeout: 10});
this.setState({
loading: null
});
history.push('/ready');
});
});
}
callKeepStartConference(targetUri, options={audio: true, video: true}) {
utils.timestampedLog('CallKeep will start conference to', targetUri);
//this.showCalls('callKeepStartCall');
//this._callKeepManager.showUnclosedCalls();
this._tmpCallStartInfo = {
uuid: options.callUUID || uuid.v4()
};
this.addHistoryEntry(targetUri, this._tmpCallStartInfo.uuid);
this.setState({outgoingCallUUID: this._tmpCallStartInfo.uuid, outgoingMedia: options});
this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: this._tmpCallStartInfo.uuid});
}
callKeepStartCall(targetUri, options) {
utils.timestampedLog('CallKeep will start call to', targetUri);
//this.showCalls('callKeepStartCall');
//this._callKeepManager.showUnclosedCalls();
this._tmpCallStartInfo = {
uuid: options.callUUID || uuid.v4(),
options,
};
this.setState({outgoingCallUUID: this._tmpCallStartInfo .uuid});
this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: this._tmpCallStartInfo.uuid});
}
startCall(targetUri, options) {
utils.timestampedLog('startCall', targetUri);
this.setState({targetUri: targetUri});
//this.addHistoryEntry(targetUri);
this.getLocalMedia(Object.assign({audio: true, video: true}, options), '/call');
}
startGuestCall(targetUri, options) {
utils.timestampedLog('startGuestCall', targetUri);
this.setState({targetUri: targetUri});
this.getLocalMedia(Object.assign({audio: true, video: true}, this._tmpCallStartInfo.options));
}
callKeepAcceptCall(callUUID) {
// called from user interaction with Old alert panel
utils.timestampedLog('CallKeep answer call', callUUID);
this._callKeepManager.answerIncomingCall(callUUID);
this.acceptCall();
}
callKeepRejectCall(callUUID) {
// called from user interaction with Old alert panel
utils.timestampedLog('CallKeep must reject call', callUUID);
this._callKeepManager.rejectCall(callUUID);
this.rejectCall(callUUID);
}
acceptCall() {
utils.timestampedLog('Alert panel answer call');
this.showCalls('acceptCall')
this.setState({showIncomingModal: false });
this.setFocusEvents(false);
if (this.state.currentCall) {
this.hangupCall(this.state.currentCall._callkeepUUID);
this.setState({currentCall: null});
if (this.state.localMedia != null) {
sylkrtc.utils.closeMediaStream(this.state.localMedia);
utils.timestampedLog('Sylkrtc close local media');
}
}
this.setState({localMedia: null});
let hasVideo = this.state.inboundCall.mediaTypes.video ? true : false;
this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call');
}
rejectCall(callUUID) {
// called by Call Keep when user rejects call
utils.timestampedLog('Alert panel reject call', callUUID);
this.setState({showIncomingModal: false});
if (!this.state.currentCall) {
history.push('/ready');
}
if (this.state.inboundCall && this.state.inboundCall._callkeepUUID === callUUID) {
this.state.inboundCall.terminate();
utils.timestampedLog('Sylkrtc reject call', callUUID);
}
this.forceUpdate();
}
timeoutCall(callUUID, uri) {
utils.timestampedLog('Timeout answering call', callUUID);
this.addHistoryEntry(uri, callUUID, direction='received');
this.forceUpdate();
}
hangupCall(callUUID) {
utils.timestampedLog('User hangup call', callUUID);
//this.showCalls('hangupCall');
let call = this._callKeepManager._calls.get(callUUID);
if (call) {
call.terminate();
} else {
if (this.state.localMedia != null) {
sylkrtc.utils.closeMediaStream(this.state.localMedia);
utils.timestampedLog('Sylkrtc close media');
}
}
+
+ // just terminate all calls to be sure
+ this._callKeepManager.endCalls();
history.push('/ready');
- this.forceUpdate();
}
callKeepSendDtmf(digits) {
utils.timestampedLog('Send DTMF', digits);
if (this.state.currentCall) {
this._callKeepManager.sendDTMF(this.state.currentCall._callkeepUUID, digits);
}
}
callKeepToggleMute(mute) {
utils.timestampedLog('Toggle mute %s', mute);
if (this.state.currentCall) {
this._callKeepManager.setMutedCall(this.state.currentCall._callkeepUUID, mute);
}
}
toggleSpeakerPhone() {
if (this.state.speakerPhoneEnabled === true) {
this.speakerphoneOff();
} else {
this.speakerphoneOn();
}
}
speakerphoneOn() {
utils.timestampedLog('Speakerphone On');
this.setState({speakerPhoneEnabled: true});
InCallManager.setForceSpeakerphoneOn(true);
}
speakerphoneOff() {
utils.timestampedLog('Speakerphone Off');
this.setState({speakerPhoneEnabled: false});
InCallManager.setForceSpeakerphoneOn(false);
}
startGuestConference(targetUri) {
this.setState({targetUri: targetUri});
this.getLocalMedia({audio: true, video: true});
}
toggleMute() {
this.muteIncoming = !this.muteIncoming;
}
outgoingCall(call) {
utils.timestampedLog('New outgoing call to', call.remoteIdentity.uri);
this._callKeepManager.handleOutgoingCall(call, this._tmpCallStartInfo.uuid);
InCallManager.start({media: this._tmpCallStartInfo.options && this._tmpCallStartInfo.options.video ? 'video' : 'audio'});
this._tmpCallStartInfo = {};
call.on('stateChanged', this.callStateChanged);
this.setState({currentCall: call});
//this._callKeepManager.updateDisplay(call._callkeepUUID, call.remoteIdentity.displayName, call.remoteIdentity.uri);
}
_onLocalNotificationReceivedBackground(notification) {
let notificationContent = notification.getData();
utils.timestampedLog('Handle local iOS push notification: ', notificationContent);
}
_onNotificationReceivedBackground(notification) {
let notificationContent = notification.getData();
// get the uuid from the notification
// have we already got a waiting call in call manager? if we do, then its been "answered" and we're waiting for the invite
// we may still never get the invite if theres network issues... so still need a timeout
// no waiting call, so that means its still "ringing" (it may have been cancelled) so set a timer and if we havent recieved
// an invite within 10 seconds then clear it down
let event = notificationContent['event'];
let callUUID = notificationContent['session-id'];
utils.timestampedLog('Handle iOS', event, 'push notification for', callUUID);
logger.debug(notificationContent);
if (notificationContent['event'] === 'incoming_session') {
utils.timestampedLog('Incoming call for push mobile notification for call', callUUID);
- this._callKeepManager.handleIncomingPushCall(callUUID, notificationContent);
+ if (notificationContent['from_uri'] === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri) {
+ utils.timestampedLog('Reject call to myself', callUUID);
+ this._callKeepManager.rejectCall(callUUID);
+ } else {
+ this._callKeepManager.handleIncomingPushCall(callUUID, notificationContent);
+ }
if (VoipPushNotification.wakeupByPush) {
utils.timestampedLog('We wake up by a push notification');
VoipPushNotification.wakeupByPush = false;
}
VoipPushNotification.onVoipNotificationCompleted(callUUID);
} else if (notificationContent['event'] === 'incoming_conference_request') {
let callUUID = notificationContent['session-id'];
utils.timestampedLog('Incoming conference for push mobile notification for call', callUUID);
this.incomingConference(callUUID, notificationContent['to_uri'], notificationContent['from_uri']);
VoipPushNotification.onVoipNotificationCompleted(callUUID);
}
/*
if (notificationContent['event'] === 'incoming_session') {
VoipPushNotification.presentLocalNotification({
alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name']
});
}
*/
if (notificationContent['event'] === 'cancel') {
this._callKeepManager.endCall(callUUID, 6);
VoipPushNotification.presentLocalNotification({
alertBody:'Call cancelled'
});
}
if (VoipPushNotification.wakeupByPush) {
utils.timestampedLog('We wake up by push notification');
VoipPushNotification.wakeupByPush = false;
}
}
incomingConferenceOld(callUUID, to_uri, from_uri) {
utils.timestampedLog('Incoming conference', callUUID);
// this does not work for Android when is in the background
// this does not work for iOS when app is in the foreground
// TODO: for Android we need to handle background notifications
this.setFocusEvents(true);
// when call is accepted this.callKeepStartConference is called
}
async incomingConference(callUUID, to_uri, from_uri) {
utils.timestampedLog('Handle incoming conference', callUUID, 'when ready');
var n = 0;
let wait_interval = 15;
while (n < wait_interval) {
if (!this.state.connection || this.state.connection.state !== 'ready' || this.state.account === null) {
utils.timestampedLog('Waiting for connection...');
this._notificationCenter.postSystemNotification('Waiting for connection...', {timeout: 1});
await this._sleep(1000);
} else {
utils.timestampedLog('Web socket is ready');
utils.timestampedLog('Using account', this.state.account.id);
// answer here
this._callKeepManager.handleConference(callUUID, to_uri, from_uri);
this.setFocusEvents(true);
return;
}
if (n === wait_interval - 1) {
utils.timestampedLog('Terminating call', callUUID, 'that did not start yet');
this._callKeepManager.endCall(callUUID, 6);
}
n++;
}
}
startConference(targetUri, options={audio: true, video: true}) {
utils.timestampedLog('New outgoing conference to room', targetUri);
this.setState({targetUri: targetUri, isConference: true});
this.getLocalMedia({audio: options.audio, video: options.video}, '/conference');
}
escalateToConference(participants) {
const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`;
utils.timestampedLog('Move current call to conference', uri, 'with participants', participants);
if (this.state.currentCall) {
this.hangupCall(this.state.currentCall._callkeepUUID);
this.setState({currentCall: null});
}
if (this.state.inboundCall) {
this.hangupCall(this.state.inboundCall._callkeepUUID);
this.setState({inboundCall: null});
}
this.setState({localMedia: null});
- history.push('/ready');
-
this.participantsToInvite = participants;
this.callKeepStartConference(uri);
}
conferenceInvite(data) {
// comes from web socket
utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room);
//this._notificationCenter.postSystemNotification('Conference invite', {body: `From ${data.originator.displayName || data.originator.uri} for room ${data.room}`, timeout: 15, silent: false});
if (Platform.OS === 'android') {
this.incomingConference(data.id, data.room, data.originator);
}
}
incomingCall(call, mediaTypes) {
// this is called by the websocket invite
// because of limitation in Sofia stack, we cannot have more then two calls at a time
// we can have one outgoing call and one incoming call but not two incoming calls
// we cannot have two incoming calls, second one is automatically rejected by sylkrtc.js
+ if (call.remoteIdentity.uri === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri) {
+ utils.timestampedLog('Reject call to myself', call.id);
+ this._callKeepManager.rejectCall(call.id);
+ call.terminate();
+ return;
+ }
+
let media_type = mediaTypes.video ? 'video' : 'audio';
call.mediaTypes = mediaTypes;
utils.timestampedLog('New', media_type, 'incoming call from', call.remoteIdentity['_displayName'], call.remoteIdentity['_uri']);
call.on('stateChanged', this.callStateChanged);
this.setState({inboundCall: call, showIncomingModal: true});
InCallManager.start({media: media_type});
this._callKeepManager.handleIncomingWebSocketCall(call);
this.setFocusEvents(true);
}
setFocusEvents(enabled) {
// if (this.shouldUseHashRouting) {
// const remote = window.require('electron').remote;
// if (enabled) {
// const currentWindow = remote.getCurrentWindow();
// currentWindow.on('focus', this.hasFocus);
// currentWindow.on('blur', this.hasNoFocus);
// this.setState({haveFocus: currentWindow.isFocused()});
// } else {
// const currentWindow = remote.getCurrentWindow();
// currentWindow.removeListener('focus', this.hasFocus);
// currentWindow.removeListener('blur', this.hasNoFocus);
// }
// }
}
// hasFocus() {
// this.setState({haveFocus: true});
// }
// hasNoFocus() {
// this.setState({haveFocus: false});
// }
missedCall(data) {
utils.timestampedLog('Missed call from ' + data.originator);
if (!this.state.currentCall) {
utils.timestampedLog('Update snackbar');
let from = data.originator.display_name || data.originator.uri;
this._notificationCenter.postSystemNotification('Missed call', {body: `from ${from}`, timeout: 180, silent: false});
}
this.forceUpdate();
}
startPreview() {
this.getLocalMedia({audio: true, video: true}, '/preview');
}
updateHistoryEntry(callUUID) {
var historyItem = this.findObjectByKey(this.localHistory, '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'];
storage.set('history', this.localHistory);
}
}
saveParticipant(callUUID, room, uri) {
//console.log('Save participant', uri, 'for conference', room);
if (!this.myParticipants) {
this.myParticipants = new Object();
}
if (this.myParticipants.hasOwnProperty(room)) {
let old_uris = this.myParticipants[room];
if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
this.myParticipants[room].push(uri);
}
} else {
let new_uris = [];
if (uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
new_uris.push(uri);
}
if (new_uris) {
this.myParticipants[room] = new_uris;
}
}
storage.set('myParticipants', this.myParticipants);
}
saveInvitedParties(callUUID, room, uris) {
if (!this.myInvitedParties) {
this.myInvitedParties = new Object();
}
if (this.myInvitedParties.hasOwnProperty(room)) {
let old_uris = this.myInvitedParties[room];
uris.forEach((uri) => {
if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
this.myInvitedParties[room].push(uri);
}
});
} else {
let new_uris = [];
uris.forEach((uri) => {
if (uri !== this.state.account.id && (uri + '@' + config.defaultDomain) !== this.state.account.id) {
new_uris.push(uri);
}
});
if (new_uris) {
this.myInvitedParties[room] = new_uris;
}
}
storage.set('myInvitedParties', this.myInvitedParties);
}
addHistoryEntry(uri, callUUID, direction='placed') {
if (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE) {
let current_datetime = new Date();
let startTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds());
let item = {
remoteParty: uri,
direction: direction,
type: 'history',
conference: true,
media: ['audio', 'video'],
displayName: 'Conference ' + uri.split('@')[0],
sessionId: callUUID,
startTime: startTime,
stopTime: startTime,
startTimeObject: current_datetime,
duration: 0
};
const historyItem = Object.assign({}, item);
console.log('Added history item', historyItem);
this.localHistory.push(historyItem);
}
}
// checkRoute(nextPath, navigation, match) {
// if (nextPath !== this.prevPath) {
// logger.debug(`Transition from ${this.prevPath} to ${nextPath}`);
//
// // Press back in ready after a login, prevent initial navigation
// // don't deny if there is no registrationState (connection fail)
// if (this.prevPath === '/ready' && nextPath === '/login' && this.state.registrationState !== null) {
// logger.debug('Transition denied redirecting to /logout');
// history.push('/logout');
// return false;
// // Press back in ready after a call
// } else if ((nextPath === '/call' || nextPath === '/conference') && this.state.localMedia === null && this.state.registrationState === 'registered') {
// return false;
// // Press back from within a call/conference, don't navigate terminate the call and
// // let termination take care of navigating
// } else if (nextPath === '/ready' && this.state.registrationState === 'registered' && this.state.currentCall !== null) {
// this.state.currentCall.terminate();
// return false;
// // Guest call ended, needed to logout and display msg and logout
// } else if (nextPath === '/ready' && (this.state.mode === MODE_GUEST_CALL || this.state.mode === MODE_GUEST_CONFERENCE)) {
// history.push('/logout');
// this.forceUpdate();
// }
// }
// this.prevPath = nextPath;
// }
render() {
//utils.timestampedLog('Render main app');
let footerBox = <View style={styles.footer}><FooterBox /></View>;
let extraStyles = {};
if (this.state.localMedia || this.state.registrationState === 'registered') {
footerBox = null;
}
return (
<BreadProvider>
<PaperProvider theme={theme}>
<Router history={history} ref="router">
<ImageBackground source={backgroundImage} style={{width: '100%', height: '100%'}}>
<View style={mainStyle.MainContainer} onLayout={(event) => this.setState({
Width_Layout : event.nativeEvent.layout.width,
Height_Layout : event.nativeEvent.layout.height
}, ()=> this._detectOrientation())}>
<SafeAreaView style={[styles.root, extraStyles]}>
<LoadingScreen
text={this.state.loading}
show={this.state.loading !== null}
orientation={this.state.orientation}
isTablet={this.state.isTablet}
/>
{/*
{<IncomingCallModal
call={this.state.inboundCall}
onAccept={this.callKeepAcceptCall}
onReject={this.callKeepRejectCall}
show={this.state.showIncomingModal}
/>}
*/}
{/* <Locations hash={this.shouldUseHashRouting} onBeforeNavigation={this.checkRoute}> */}
<Switch>
<Route exact path="/" component={this.main} />
<Route exact path="/login" component={this.login} />
<Route exact path="/logout" component={this.logout} />
<Route exact path="/ready" component={this.ready} />
<Route exact path="/call" component={this.call} />
<Route path="/call/:targetUri" component={this.callByUri} />
{/* <Location path="/call/:targetUri" urlPatternOptions={{segmentValueCharset: 'a-zA-Z0-9-_ \.@'}} handler={this.callByUri} /> */}
<Route exact path="/conference" component={this.conference} />
<Route path="/conference/:targetUri" component={this.conferenceByUri} />
{/* <Location path="/conference/:targetUri" urlPatternOptions={{segmentValueCharset: 'a-zA-Z0-9-_~ %\.@'}} handler={this.conferenceByUri} /> */}
<Route exact path="/preview" component={this.preview} />
<Route component={this.notFound} />
</Switch>
<NotificationCenter ref="notificationCenter" />
</SafeAreaView>
</View>
</ImageBackground>
</Router>
</PaperProvider>
</BreadProvider>
);
}
notFound(match) {
const status = {
title : '404',
message : 'Oops, the page your looking for can\'t found',
level : 'danger',
width : 'large'
}
return (
<StatusBox
{...status}
/>
);
}
ready() {
//utils.timestampedLog('Ready screen');
if (!this.state.account) {
return null;
}
return (
<Fragment>
<NavigationBar
notificationCenter = {this.notificationCenter}
account = {this.state.account}
logout = {this.logout}
preview = {this.startPreview}
toggleMute = {this.toggleMute}
connection = {this.state.connection}
registration = {this.state.registrationState}
/>
<ReadyBox
account = {this.state.account}
password = {this.state.password}
config = {config}
startCall = {this.callKeepStartCall}
startConference = {this.callKeepStartConference}
missedTargetUri = {this.state.missedTargetUri}
orientation = {this.state.orientation}
contacts = {this.contacts}
isTablet = {this.state.isTablet}
+ refreshHistory = {this.state.refreshHistory}
/>
</Fragment>
);
}
preview() {
return (
<Fragment>
<Preview
localMedia = {this.state.localMedia}
hangupCall = {this.hangupCall}
setDevice = {this.setDevice}
selectedDevices = {this.state.devices}
/>
</Fragment>
);
}
call() {
+ let currentCall = this.state.currentCall || this.state.inboundCall;
+
return (
<Call
- localMedia = {this.state.localMedia}
account = {this.state.account}
targetUri = {this.state.targetUri}
- currentCall = {this.state.currentCall || this.state.inboundCall}
+ currentCall = {currentCall}
+ localMedia = {this.state.localMedia}
escalateToConference = {this.escalateToConference}
hangupCall = {this.hangupCall}
// shareScreen = {this.switchScreensharing}
generatedVideoTrack = {this.state.generatedVideoTrack}
callKeepSendDtmf = {this.callKeepSendDtmf}
callKeepToggleMute = {this.callKeepToggleMute}
callKeepStartCall = {this.callKeepStartCall}
toggleSpeakerPhone = {this.toggleSpeakerPhone}
speakerPhoneEnabled = {this.state.speakerPhoneEnabled}
speakerphoneOn = {this.speakerphoneOn}
speakerphoneOff = {this.speakerphoneOff}
callUUID = {this.state.outgoingCallUUID}
contacts = {this.contacts}
/>
)
}
callByUri(urlParameters) {
// check if the uri contains a domain
if (urlParameters.targetUri.indexOf('@') === -1) {
const status = {
title : 'Invalid user',
message : `Oops, the domain of the user is not set in '${urlParameters.targetUri}'`,
level : 'danger',
width : 'large'
}
return (
<StatusBox {...status} />
);
}
return (
<CallByUriBox
handleCallByUri = {this.handleCallByUri}
notificationCenter = {this.notificationCenter}
targetUri = {urlParameters.targetUri}
localMedia = {this.state.localMedia}
account = {this.state.account}
currentCall = {this.state.currentCall}
hangupCall = {this.hangupCall}
// shareScreen = {this.switchScreensharing}
generatedVideoTrack = {this.state.generatedVideoTrack}
/>
);
}
conference() {
let _previousParticipants = new Set();
if (this.myParticipants) {
let room = this.state.targetUri.split('@')[0];
if (this.myParticipants.hasOwnProperty(room)) {
let uris = this.myParticipants[room];
if (uris) {
uris.forEach((uri) => {
if (uri.search(config.defaultDomain) > -1) {
let user = uri.split('@')[0];
_previousParticipants.add(user);
} else {
_previousParticipants.add(uri);
}
});
}
}
}
if (this.myInvitedParties) {
let room = this.state.targetUri.split('@')[0];
if (this.myInvitedParties.hasOwnProperty(room)) {
let uris = this.myInvitedParties[room];
if (uris) {
uris.forEach((uri) => {
if (uri.search(config.defaultDomain) > -1) {
let user = uri.split('@')[0];
_previousParticipants.add(user);
} else {
_previousParticipants.add(uri);
}
});
}
}
}
let previousParticipants = Array.from(_previousParticipants);
return (
<Conference
notificationCenter = {this.notificationCenter}
localMedia = {this.state.localMedia}
account = {this.state.account}
targetUri = {this.state.targetUri}
currentCall = {this.state.currentCall}
saveParticipant = {this.saveParticipant}
saveInvitedParties = {this.saveInvitedParties}
previousParticipants = {previousParticipants}
participantsToInvite = {this.participantsToInvite}
hangupCall = {this.hangupCall}
shareScreen = {this.switchScreensharing}
generatedVideoTrack = {this.state.generatedVideoTrack}
toggleSpeakerPhone = {this.toggleSpeakerPhone}
speakerPhoneEnabled = {this.state.speakerPhoneEnabled}
callUUID = {this.state.outgoingCallUUID}
proposedMedia = {this.state.outgoingMedia}
/>
)
}
conferenceByUri(urlParameters) {
const targetUri = utils.normalizeUri(urlParameters.targetUri, config.defaultConferenceDomain);
const idx = targetUri.indexOf('@');
const uri = {};
const pattern = /^[A-Za-z0-9\-\_]+$/g;
uri.user = targetUri.substring(0, idx);
// check if the uri.user is valid
if (!pattern.test(uri.user)) {
const status = {
title : 'Invalid conference',
message : `Oops, the conference ID is invalid: ${targetUri}`,
level : 'danger',
width : 'large'
}
return (
<StatusBox
{...status}
/>
);
}
return (
<ConferenceByUriBox
notificationCenter = {this.notificationCenter}
handler = {this.handleConferenceByUri}
targetUri = {targetUri}
localMedia = {this.state.localMedia}
account = {this.state.account}
currentCall = {this.state.currentCall}
hangupCall = {this.hangupCall}
shareScreen = {this.switchScreensharing}
generatedVideoTrack = {this.state.generatedVideoTrack}
/>
);
}
login() {
let registerBox;
let statusBox;
if (this.state.status !== null) {
statusBox = (
<StatusBox
message={this.state.status.msg}
level={this.state.status.level}
/>
);
}
if (this.state.registrationState !== 'registered') {
registerBox = (
<RegisterBox
registrationInProgress = {this.state.registrationState !== null && this.state.registrationState !== 'failed'}
handleRegistration = {this.handleRegistration}
autoLogin={true}
orientation = {this.state.orientation}
isTablet = {this.state.isTablet}
phoneNumber= {this.state.phoneNumber}
/>
);
}
return (
<Fragment>
{registerBox}
{statusBox}
</Fragment>
);
}
logout() {
RNCallKeep.setAvailable(false);
if (this.state.registrationState !== null && (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE)) {
this.state.account.unregister();
}
if (this.state.account !== null) {
this.state.connection.removeAccount(this.state.account, (error) => {
if (error) {
logger.debug(error);
}
});
}
storage.set('account', {accountId: this.state.accountId, password: ''});
this.serverHistory = [];
this.setState({account: null,
registrationState: null,
registrationKeepalive: false,
status: null,
history: []
});
history.push('/login');
return null;
}
main() {
return null;
}
}
export default Sylk;
diff --git a/app/components/AudioCallBox.js b/app/components/AudioCallBox.js
index 6f61dc2..9495277 100644
--- a/app/components/AudioCallBox.js
+++ b/app/components/AudioCallBox.js
@@ -1,231 +1,231 @@
import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import { IconButton, Dialog, Text } from 'react-native-paper';
import PropTypes from 'prop-types';
import autoBind from 'auto-bind';
import Logger from "../../Logger";
import CallOverlay from './CallOverlay';
import DTMFModal from './DTMFModal';
import EscalateConferenceModal from './EscalateConferenceModal';
import UserIcon from './UserIcon';
import utils from '../utils';
import styles from '../assets/styles/blink/_AudioCallBox.scss';
const logger = new Logger("AudioCallBox");
class AudioCallBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
active : false,
audioMuted : false,
showDtmfModal : false,
showEscalateConferenceModal : false
};
// this.speechEvents = null;
this.remoteAudio = React.createRef();
}
componentDidMount() {
// This component is used both for as 'local media' and as the in-call component.
// Thus, if the call is not null it means we are beyond the 'local media' phase
// so don't call the mediaPlaying prop.
if (this.props.call != null) {
switch (this.props.call.state) {
case 'established':
this.attachStream(this.props.call);
break;
case 'incoming':
this.props.mediaPlaying();
// fall through
default:
this.props.call.on('stateChanged', this.callStateChanged);
break;
}
} else {
this.props.mediaPlaying();
}
}
componentWillReceiveProps(nextProps) {
if (this.props.call == null && nextProps.call) {
if (nextProps.call.state === 'established') {
this.attachStream(nextProps.call);
} else {
nextProps.call.on('stateChanged', this.callStateChanged);
}
}
}
componentWillUnmount() {
clearTimeout(this.callTimer);
// if (this.speechEvents !== null) {
// this.speechEvents.stop();
// this.speechEvents = null;
// }
}
callStateChanged(oldState, newState, data) {
if (newState === 'established') {
this.attachStream(this.props.call);
}
}
attachStream(call) {
this.setState({stream: call.getRemoteStreams()[0]}); //we dont use it anywhere though as audio gets automatically piped
// const options = {
// interval: 225,
// play: false
// };
// this.speechEvents = hark(remoteStream, options);
// this.speechEvents.on('speaking', () => {
// this.setState({active: true});
// });
// this.speechEvents.on('stopped_speaking', () => {
// this.setState({active: false});
// });
}
escalateToConference(participants) {
this.props.escalateToConference(participants);
}
hangupCall(event) {
event.preventDefault();
this.props.hangupCall();
}
muteAudio(event) {
event.preventDefault();
//const localStream = this.props.call.getLocalStreams()[0];
if(this.state.audioMuted) {
logger.debug('Unmute microphone');
this.props.callKeepToggleMute(false);
//localStream.getAudioTracks()[0].enabled = true;
this.setState({audioMuted: false});
} else {
logger.debug('Mute microphone');
//localStream.getAudioTracks()[0].enabled = false;
this.props.callKeepToggleMute(true);
this.setState({audioMuted: true});
}
}
showDtmfModal() {
this.setState({showDtmfModal: true});
}
hideDtmfModal() {
this.setState({showDtmfModal: false});
}
toggleEscalateConferenceModal() {
this.setState({
showEscalateConferenceModal: !this.state.showEscalateConferenceModal
});
}
render() {
let remoteIdentity;
if (this.props.call !== null) {
remoteIdentity = this.props.call.remoteIdentity;
} else {
remoteIdentity = {uri: this.props.remoteUri};
}
const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
let displayName = (this.props.remoteDisplayName && this.props.remoteUri !== this.props.remoteDisplayName) ? this.props.remoteDisplayName: this.props.remoteUri;
return (
<View style={styles.container}>
<CallOverlay style={styles.callStatus}
show={true}
remoteUri={this.props.remoteUri}
remoteDisplayName={this.props.remoteDisplayName}
call={this.props.call}
/>
<View style={styles.userIconContainer}>
<UserIcon identity={remoteIdentity} large={true} active={this.state.active} />
</View>
<Dialog.Title style={styles.displayName}>{displayName}</Dialog.Title>
{ (this.props.remoteDisplayName && this.props.remoteUri !== this.props.remoteDisplayName) ?
<Text style={styles.uri}>{this.props.remoteUri}</Text>
: null }
<View style={styles.buttonContainer}>
<IconButton
size={34}
style={buttonClass}
icon="account-plus"
onPress={this.toggleEscalateConferenceModal}
/>
<IconButton
size={34}
style={buttonClass}
icon={this.state.audioMuted ? 'microphone-off' : 'microphone'}
onPress={this.muteAudio}
/>
<IconButton
size={34}
style={buttonClass}
icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
onPress={this.props.toggleSpeakerPhone}
/>
<IconButton
size={34}
style={buttonClass}
icon="dialpad"
onPress={this.showDtmfModal}
disabled={!(this.props.call && this.props.call.state === 'established')}
/>
<IconButton
size={34}
style={[buttonClass, styles.hangupButton]}
icon="phone-hangup"
onPress={this.hangupCall}
/>
</View>
<DTMFModal
show={this.state.showDtmfModal}
hide={this.hideDtmfModal}
call={this.props.call}
callKeepSendDtmf={this.props.callKeepSendDtmf}
/>
<EscalateConferenceModal
show={this.state.showEscalateConferenceModal}
call={this.props.call}
close={this.toggleEscalateConferenceModal}
escalateToConference={this.escalateToConference}
/>
</View>
);
}
}
AudioCallBox.propTypes = {
+ remoteUri : PropTypes.string.isRequired,
call : PropTypes.object,
+ remoteDisplayName : PropTypes.string,
escalateToConference : PropTypes.func,
hangupCall : PropTypes.func,
mediaPlaying : PropTypes.func,
- remoteUri : PropTypes.string,
- remoteDisplayName : PropTypes.string,
callKeepSendDtmf : PropTypes.func,
callKeepToggleMute : PropTypes.func,
toggleSpeakerPhone : PropTypes.func,
speakerPhoneEnabled : PropTypes.bool
};
export default AudioCallBox;
diff --git a/app/components/Call.js b/app/components/Call.js
index 593b39e..350d053 100644
--- a/app/components/Call.js
+++ b/app/components/Call.js
@@ -1,227 +1,226 @@
import React, { Component } from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import assert from 'assert';
import debug from 'react-native-debug';
import autoBind from 'auto-bind';
import Logger from "../../Logger";
import AudioCallBox from './AudioCallBox';
import LocalMedia from './LocalMedia';
import VideoBox from './VideoBox';
import config from '../config';
const logger = new Logger("Call");
class Call extends Component {
constructor(props) {
super(props);
autoBind(this);
if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) {
//logger.debug('Will send audio only');
this.state = {audioOnly: true};
} else {
this.state = {audioOnly: false};
}
// If current call is available on mount we must have incoming
if (this.props.currentCall != null) {
this.props.currentCall.on('stateChanged', this.callStateChanged);
}
}
componentWillReceiveProps(nextProps) {
// Needed for switching to incoming call while in a call
if (this.props.currentCall != null && this.props.currentCall != nextProps.currentCall) {
if (nextProps.currentCall != null) {
nextProps.currentCall.on('stateChanged', this.callStateChanged);
} else {
this.props.currentCall.removeListener('stateChanged', this.callStateChanged);
}
}
}
callStateChanged(oldState, newState, data) {
// console.log('Call: callStateChanged', newState, '->', newState);
if (newState === 'established') {
// Check the media type again, remote can choose to not accept all offered media types
const currentCall = this.props.currentCall;
const remoteHasStreams = currentCall.getRemoteStreams().length > 0;
const remoteHasNoVideoTracks = currentCall.getRemoteStreams()[0].getVideoTracks().length === 0;
const remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly';
const remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive';
if (remoteHasStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) {
console.log('Media type changed to audio');
// Stop local video
if (this.props.localMedia.getVideoTracks().length !== 0) {
currentCall.getLocalStreams()[0].getVideoTracks()[0].stop();
}
this.setState({audioOnly: true});
this.props.speakerphoneOff();
} else {
this.forceUpdate();
}
currentCall.removeListener('stateChanged', this.callStateChanged);
// Switch to video earlier. The callOverlay has a handle on
// 'established'. It starts a timer. To prevent a state updating on
// unmounted component we try to switch on 'accept'. This means we get
// to localMedia first.
} else if (newState === 'accepted') {
// Switch if we have audioOnly and local videotracks. This means
// the call object switched and we are transitioning to an
// incoming call.
if (this.state.audioOnly && this.props.localMedia && this.props.localMedia.getVideoTracks().length !== 0) {
console.log('Media type changed to video on accepted');
this.setState({audioOnly: false});
this.props.speakerphoneOn();
}
}
this.forceUpdate();
}
findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
call() {
assert(this.props.currentCall === null, 'currentCall is not null');
- //console.log('Call: starting call', this.props.callUUID, 'to', this.props.targetUri);
let options = {pcConfig: {iceServers: config.iceServers}, id: this.props.callUUID};
options.localStream = this.props.localMedia;
let call = this.props.account.call(this.props.targetUri, options);
call.on('stateChanged', this.callStateChanged);
}
answerCall() {
- console.log('Call: answer call');
assert(this.props.currentCall !== null, 'currentCall is null');
let options = {pcConfig: {iceServers: config.iceServers}};
options.localStream = this.props.localMedia;
this.props.currentCall.answer(options);
}
hangupCall() {
- console.log('Call: hangup call');
let callUUID = this.props.currentCall._callkeepUUID;
+ this.props.currentCall.removeListener('stateChanged', this.callStateChanged);
this.props.hangupCall(callUUID);
}
mediaPlaying() {
if (this.props.currentCall === null) {
this.call();
} else {
this.answerCall();
}
}
render() {
//console.log('Call: render call to', this.props.targetUri);
let box = null;
let remoteUri = this.props.targetUri;
- let remoteDisplayName;
+ let remoteDisplayName = remoteUri;
if (this.props.currentCall !== null && this.props.currentCall.state == 'established') {
remoteUri = this.props.currentCall.remoteIdentity.uri;
remoteDisplayName = this.props.currentCall.remoteIdentity.displayName || this.props.currentCall.remoteIdentity.uri;
} else {
remoteUri = this.props.targetUri;
remoteDisplayName = this.props.targetUri;
}
if (remoteUri.indexOf('3333@') > -1) {
remoteDisplayName = 'Video Test';
} else if (remoteUri.indexOf('4444@') > -1) {
remoteDisplayName = 'Echo Test';
} else {
- var contact_obj = this.findObjectByKey(this.props.contacts, 'uri', remoteUri);
- if (contact_obj) {
- remoteDisplayName = contact_obj.displayName;
+ if (this.props.contacts) {
+ var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', remoteUri);
+ if (contact_obj) {
+ remoteDisplayName = contact_obj.displayName;
+ }
}
}
if (this.props.localMedia !== null) {
- //console.log('Will render audio box');
if (this.state.audioOnly) {
box = (
<AudioCallBox
remoteUri = {remoteUri}
remoteDisplayName = {remoteDisplayName}
hangupCall = {this.hangupCall}
call = {this.props.currentCall}
mediaPlaying = {this.mediaPlaying}
escalateToConference = {this.props.escalateToConference}
callKeepSendDtmf = {this.props.callKeepSendDtmf}
callKeepToggleMute = {this.props.callKeepToggleMute}
speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
/>
);
} else {
if (this.props.currentCall != null && this.props.currentCall.state === 'established') {
box = (
<VideoBox
call = {this.props.currentCall}
remoteUri = {remoteUri}
remoteDisplayName = {remoteDisplayName}
localMedia = {this.props.localMedia}
shareScreen = {this.props.shareScreen}
hangupCall = {this.hangupCall}
escalateToConference = {this.props.escalateToConference}
generatedVideoTrack = {this.props.generatedVideoTrack}
callKeepSendDtmf = {this.props.callKeepSendDtmf}
callKeepToggleMute = {this.props.callKeepToggleMute}
speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
/>
);
} else {
//console.log('Will render local media');
if (this.props.currentCall && this.props.currentCall.state && this.props.currentCall.state === 'terminated') {
// do not render
} else {
box = (
<LocalMedia
remoteUri = {remoteUri}
remoteDisplayName = {remoteDisplayName}
localMedia = {this.props.localMedia}
mediaPlaying = {this.mediaPlaying}
hangupCall = {this.hangupCall}
generatedVideoTrack = {this.props.generatedVideoTrack}
/>
);
}
}
}
}
return box;
}
}
Call.propTypes = {
+ targetUri : PropTypes.string.isRequired,
account : PropTypes.object.isRequired,
hangupCall : PropTypes.func.isRequired,
- shareScreen : PropTypes.func,
+ localMedia : PropTypes.object.isRequired,
currentCall : PropTypes.object,
+ shareScreen : PropTypes.func,
escalateToConference : PropTypes.func,
- localMedia : PropTypes.object,
- targetUri : PropTypes.string,
generatedVideoTrack : PropTypes.bool,
callKeepSendDtmf : PropTypes.func,
callKeepToggleMute : PropTypes.func,
speakerphoneOn : PropTypes.func,
speakerphoneOff : PropTypes.func,
callUUID : PropTypes.string,
- contacts : PropTypes.object
+ contacts : PropTypes.array
};
export default Call;
diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js
index d5dbc16..b7112ba 100644
--- a/app/components/CallOverlay.js
+++ b/app/components/CallOverlay.js
@@ -1,121 +1,121 @@
import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import moment from 'moment';
import momentFormat from 'moment-duration-format';
import autoBind from 'auto-bind';
import { Appbar } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
class CallOverlay extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.duration = null;
this.timer = null;
this._isMounted = true;
}
componentDidMount() {
if (this.props.call) {
if (this.props.call.state === 'established') {
this.startTimer();
} else if (this.props.call.state !== 'terminated') {
this.props.call.on('stateChanged', this.callStateChanged);
}
}
}
componentWillReceiveProps(nextProps) {
if (this.props.call == null && nextProps.call) {
if (nextProps.call.state === 'established') {
this.startTimer();
} else if (nextProps.call.state !== 'terminated') {
nextProps.call.on('stateChanged', this.callStateChanged);
}
}
}
componentWillUnmount() {
this._isMounted = false;
clearTimeout(this.timer);
}
callStateChanged(oldState, newState, data) {
// Prevent starting timer when we are unmounted
if (newState === 'established' && this._isMounted) {
this.startTimer();
this.props.call.removeListener('stateChanged', this.callStateChanged);
}
}
startTimer() {
if (this.timer !== null) {
// already armed
return;
}
// TODO: consider using window.requestAnimationFrame
const startTime = new Date();
this.timer = setInterval(() => {
this.duration = moment.duration(new Date() - startTime).format('hh:mm:ss', {trim: false});
if (this.props.show) {
this.forceUpdate();
}
}, 300);
}
render() {
let header = null;
let displayName = this.props.remoteUri;
if (this.props.remoteDisplayName && this.props.remoteDisplayName !== this.props.remoteUri) {
displayName = this.props.remoteDisplayName;
}
if (this.props.show) {
let callDetail;
if (this.duration !== null) {
callDetail = <View><Icon name="clock"/><Text>{this.duration}</Text></View>;
callDetail = 'Duration:' + this.duration;
} else {
callDetail = 'Connecting...'
}
if (this.props.remoteUri.search('videoconference') > -1) {
header = (
<Appbar.Header style={{backgroundColor: 'black'}}>
<Appbar.Content
title={`Conference: ${displayName}`} subtitle={callDetail}
/>
</Appbar.Header>
);
} else {
header = (
<Appbar.Header style={{backgroundColor: 'black'}}>
<Appbar.Content
title={`Call with ${displayName}`} subtitle={callDetail}
/>
</Appbar.Header>
);
}
}
return header
}
}
CallOverlay.propTypes = {
show: PropTypes.bool.isRequired,
remoteUri: PropTypes.string.isRequired,
- remoteDisplayName: PropTypes.string.isRequired,
+ remoteDisplayName: PropTypes.string,
call: PropTypes.object
};
export default CallOverlay;
diff --git a/app/components/Conference.js b/app/components/Conference.js
index 4e14ce8..7c5d892 100644
--- a/app/components/Conference.js
+++ b/app/components/Conference.js
@@ -1,118 +1,119 @@
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';
const DEBUG = debug('blinkrtc:Conference');
debug.enable('*');
class Conference extends React.Component {
constructor(props) {
super(props);
autoBind(this);
}
confStateChanged(oldState, newState, data) {
DEBUG(`Conference state changed ${oldState} -> ${newState}`);
if (newState === 'established') {
this.forceUpdate();
}
}
start() {
console.log('Starting conference call', this.props.proposedMedia);
if (this.props.currentCall === null) {
const options = {
id: this.props.callUUID,
pcConfig: {iceServers: config.iceServers},
localStream: this.props.localMedia,
audio: this.props.proposedMedia.audio,
video: this.props.proposedMedia.video,
offerOptions: {
offerToReceiveAudio: false,
offerToReceiveVideo: false
},
initialParticipants: this.props.participantsToInvite
};
console.log('Starting conference call', this.props.callUUID, 'to', this.props.targetUri.toLowerCase(), options);
const confCall = this.props.account.joinConference(this.props.targetUri.toLowerCase(), options);
confCall.on('stateChanged', this.confStateChanged);
} else {
console.log('Cannot start conference, there is already a call in progress');
}
}
hangup() {
this.props.hangupCall(this.props.callUUID);
}
mediaPlaying() {
if (this.props.currentCall === null) {
this.start();
} else {
DEBUG('CALL ALREADY STARTED');
}
}
render() {
let box = null;
if (this.props.localMedia !== null) {
if (this.props.currentCall != null && this.props.currentCall.state === 'established') {
box = (
<ConferenceBox
notificationCenter = {this.props.notificationCenter}
call = {this.props.currentCall}
hangup = {this.hangup}
saveParticipant = {this.props.saveParticipant}
saveInvitedParties = {this.props.saveInvitedParties}
previousParticipants = {this.props.previousParticipants}
remoteUri = {this.props.targetUri}
shareScreen = {this.props.shareScreen}
generatedVideoTrack = {this.props.generatedVideoTrack}
speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
/>
);
} else {
box = (
<LocalMedia
remoteUri = {this.props.targetUri}
+ remoteDisplayName = {this.props.targetUri}
localMedia = {this.props.localMedia}
mediaPlaying = {this.mediaPlaying}
hangupCall = {this.hangup}
generatedVideoTrack = {this.props.generatedVideoTrack}
/>
);
}
}
return box;
}
}
Conference.propTypes = {
notificationCenter : PropTypes.func.isRequired,
account : PropTypes.object.isRequired,
hangupCall : PropTypes.func.isRequired,
saveParticipant : PropTypes.func,
saveInvitedParties : PropTypes.func,
previousParticipants : PropTypes.array,
currentCall : PropTypes.object,
localMedia : PropTypes.object,
targetUri : PropTypes.string,
participantsToInvite : PropTypes.array,
generatedVideoTrack : PropTypes.bool,
callUUID : PropTypes.string,
proposedMedia : PropTypes.object
};
export default Conference;
diff --git a/app/components/ConferenceBox.js b/app/components/ConferenceBox.js
index 8101e1b..81a3ef5 100644
--- a/app/components/ConferenceBox.js
+++ b/app/components/ConferenceBox.js
@@ -1,732 +1,732 @@
'use strict';
import React, {Component, Fragment} from 'react';
import { View, Platform } from 'react-native';
import PropTypes from 'prop-types';
import * as sylkrtc from '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 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 ConferenceHeader from './ConferenceHeader';
import ConferenceCarousel from './ConferenceCarousel';
import ConferenceParticipant from './ConferenceParticipant';
import ConferenceMatrixParticipant from './ConferenceMatrixParticipant';
import ConferenceParticipantSelf from './ConferenceParticipantSelf';
import InviteParticipantsModal from './InviteParticipantsModal';
import styles from '../assets/styles/blink/_ConferenceBox.scss';
const DEBUG = debug('blinkrtc:ConferenceBox');
debug.enable('*');
class ConferenceBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
callOverlayVisible: true,
audioMuted: false,
videoMuted: false,
participants: props.call.participants.slice(),
showInviteModal: false,
showDrawer: false,
showFiles: false,
shareOverlayVisible: false,
activeSpeakers: props.call.activeParticipants.slice(),
selfDisplayedLarge: false,
eventLog: [],
sharedFiles: props.call.sharedFiles.slice(),
largeVideoStream: null
};
const friendlyName = this.props.remoteUri.split('@')[0];
//if (window.location.origin.startsWith('file://')) {
this.callUrl = `${config.publicUrl}/conference/${friendlyName}`;
//} else {
// this.callUrl = `${window.location.origin}/conference/${friendlyName}`;
//}
const emailMessage = `You can join me in the conference using a Web browser at ${this.callUrl} ` +
'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 = [];
[
'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});
}
);
});
}
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.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.changeResolution();
}
if (this.props.call.getLocalStreams()[0].getVideoTracks().length !== 0) {
this.haveVideo = true;
}
}
componentWillUnmount() {
clearTimeout(this.overlayTimer);
this.uploads.forEach((upload) => {
this.props.notificationCenter().removeNotification(upload[1]);
upload[0].abort();
})
}
onParticipantJoined(p) {
DEBUG(`Participant joined: ${p.identity}`);
if (p.identity._uri.search('guest.') === -1) {
// used for history item
this.props.saveParticipant(this.props.call.id, this.props.remoteUri.split('@')[0], p.identity._uri);
}
// this.refs.audioPlayerParticipantJoined.play();
p.on('stateChanged', this.onParticipantStateChanged);
p.attach();
this.setState({
participants: this.state.participants.concat([p])
});
// this.changeResolution();
}
onParticipantLeft(p) {
DEBUG(`Participant left: ${p.identity}`);
// this.refs.audioPlayerParticipantLeft.play();
const participants = this.state.participants.slice();
const idx = participants.indexOf(p);
if (idx !== -1) {
participants.splice(idx, 1);
this.setState({
participants: participants
});
}
p.detach(true);
// this.changeResolution();
}
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.slice();
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);
}
})
}
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);
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 = '';
}
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();
const localStream = this.props.call.getLocalStreams()[0];
if (localStream.getAudioTracks().length > 0) {
const track = localStream.getAudioTracks()[0];
if(this.state.audioMuted) {
DEBUG('Unmute microphone');
track.enabled = true;
this.setState({audioMuted: false});
} else {
DEBUG('Mute microphone');
track.enabled = false;
this.setState({audioMuted: true});
}
}
}
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();
const localStream = this.props.call.getLocalStreams()[0];
if (localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
if (this.state.videoMuted) {
DEBUG('Unmute camera');
track.enabled = true;
this.setState({videoMuted: false});
} else {
DEBUG('Mute camera');
track.enabled = false;
this.setState({videoMuted: true});
}
}
}
hangup(event) {
event.preventDefault();
for (let participant of this.state.participants) {
participant.detach();
}
this.props.hangup();
}
armOverlayTimer() {
clearTimeout(this.overlayTimer);
this.overlayTimer = setTimeout(() => {
this.setState({callOverlayVisible: false});
}, 4000);
}
showOverlay() {
// if (!this.state.shareOverlayVisible && !this.state.showDrawer && !this.state.showFiles) {
// if (!this.state.callOverlayVisible) {
// this.setState({callOverlayVisible: true});
// }
// this.armOverlayTimer();
// }
}
toggleInviteModal() {
this.setState({showInviteModal: !this.state.showInviteModal});
}
toggleDrawer() {
this.setState({callOverlayVisible: true, showDrawer: !this.state.showDrawer, showFiles: 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) {
console.log('Invite participants', uris);
this.props.saveInvitedParties(this.props.call.id, this.props.remoteUri.split('@')[0], uris);
this.props.call.inviteParticipants(uris);
}
render() {
if (this.props.call === null) {
return (<View></View>);
}
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 = (
// <Portal>
// <Modal>
// <Surface>
// <Paragraph>
// Invite other online users of this service, share <strong><a href={this.callUrl} target="_blank" rel="noopener noreferrer">this link</a></strong> with others or email, so they can easily join this conference.
// </Paragraph>
// <View className="text-center">
// <View className="btn-group">
// <IconButton
// size={30}
// onPress={this.toggleInviteModal}
// icon="account-plus"
// />
// <IconButton className="btn btn-primary" onPress={this.handleClipboardButton} icon="copy" />
// <IconButton className="btn btn-primary" onPress={this.handleEmailButton} alt="Send email" icon="email" />
// </View>
// </View>
// </Surface>
// </Modal>
// </Portal>
// );
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(
// <Badge badgeContent={this.state.sharedFiles.length} color="primary" classes={{badge: this.props.classes.badge}}>
// <button key="fbButton" type="button" title="Open Drawer" className={commonButtonTopClasses} onPress={this.toggleFiles}> <i className="fa fa-files-o fa-2x"></i> </button>
// </Badge>
// );
// }
// }
if (!this.state.showDrawer) {
topButtons.push(<Appbar.Action key="sbButton" title="Open Drawer" onPress={this.toggleDrawer} icon="menu" />);
}
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 = [];
bottomButtons.push(
<IconButton
size={30}
style={buttonClass}
title="Share link to this conference"
icon="account-plus"
onPress={this.toggleInviteModal}
/>
);
if (this.haveVideo) {
bottomButtons.push(
<IconButton
size={30}
style={buttonClass}
title="Mute/unmute video"
onPress={this.muteVideo}
icon={muteVideoButtonIcons}
/>
);
}
bottomButtons.push(
<IconButton
size={30}
style={buttonClass}
title="Mute/unmute audio"
onPress={this.muteAudio}
icon={muteButtonIcons}
/>
);
if (this.haveVideo) {
bottomButtons.push(
<IconButton
size={30}
style={buttonClass}
title="Toggle camera"
onPress={this.toggleCamera}
icon='video-switch'
/>
);
}
bottomButtons.push(
<IconButton
size={30}
style={buttonClass}
icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
onPress={this.props.toggleSpeakerPhone}
/>
)
// bottomButtons.push(
// <View key="shareFiles">
// <IconButton size={30} style={buttonClass} title="Share files" component="span" disableRipple={true} icon="upload"/>
// </View>
// );
bottomButtons.push(
<IconButton
size={30}
style={[buttonClass, styles.hangupButton]}
title="Leave conference"
onPress={this.hangup}
icon="phone-hangup"
/>
);
buttons.bottom = bottomButtons;
const participants = [];
if (this.state.participants.length > 0) {
if (this.state.activeSpeakers.findIndex((element) => {return element.id === this.props.call.id}) === -1) {
participants.push(
<ConferenceParticipantSelf
key="myself2"
stream={this.props.call.getLocalStreams()[0]}
identity={this.props.call.localIdentity}
audioMuted={this.state.audioMuted}
generatedVideoTrack={this.props.generatedVideoTrack}
/>
);
}
}
const drawerParticipants = [];
drawerParticipants.push(
<ConferenceDrawerParticipant
key="myself1"
participant={{identity: this.props.call.localIdentity}}
isLocal={true}
/>
);
let videos = [];
if (this.state.participants.length === 0) {
videos.push(
<RTCView objectFit="cover" style={styles.wholePageVideo} ref="largeVideo" poster="assets/images/transparent-1px.png" streamURL={this.state.largeVideoStream ? this.state.largeVideoStream.toURL() : null} />
);
} else {
const activeSpeakers = this.state.activeSpeakers;
const activeSpeakersCount = activeSpeakers.length;
if (activeSpeakersCount > 0) {
activeSpeakers.forEach((p) => {
videos.push(
<ConferenceMatrixParticipant
key={p.id}
participant={p}
large={activeSpeakers.length <= 1}
isLocal={p.id === this.props.call.id}
/>
);
});
this.state.participants.forEach((p) => {
if (this.state.activeSpeakers.indexOf(p) === -1) {
participants.push(
<ConferenceParticipant
key={p.id}
participant={p}
selected={this.onVideoSelected}
/>
);
}
drawerParticipants.push(
<ConferenceDrawerParticipant
key={p.id}
participant={p}
/>
);
});
} else {
this.state.participants.forEach((p) => {
videos.push(
<ConferenceMatrixParticipant
key = {p.id}
participant = {p}
large = {this.state.participants.length <= 1}
/>
);
drawerParticipants.push(
<ConferenceDrawerParticipant
key={p.id}
participant={p}
/>
);
});
}
}
// let filesDrawerContent = (
// <ConferenceDrawerFiles
// sharedFiles={this.state.sharedFiles}
// downloadFile={this.downloadFile}
// />
// );
return (
<View style={styles.container}>
<ConferenceHeader
show={true}
remoteUri={remoteUri}
participants={this.state.participants}
buttons={buttons}
/>
<View style={styles.conferenceContainer}>
<View style={styles.videosContainer}>
{videos}
</View>
<View style={styles.carouselContainer}>
<ConferenceCarousel align={'right'}>
{participants}
</ConferenceCarousel>
</View>
</View>
<InviteParticipantsModal
show={this.state.showInviteModal}
inviteParticipants={this.inviteParticipants}
previousParticipants={this.props.previousParticipants}
close={this.toggleInviteModal}
room={this.props.remoteUri.split('@')[0]}
/>
<ConferenceDrawer
show={this.state.showDrawer}
close={this.toggleDrawer}
>
<ConferenceDrawerSpeakerSelection
participants={this.state.participants.concat([{id: this.props.call.id, publisherId: this.props.call.id, identity: this.props.call.localIdentity}])}
selected={this.handleActiveSpeakerSelected}
activeSpeakers={this.state.activeSpeakers}
/>
<ConferenceDrawerParticipantList>
{drawerParticipants}
</ConferenceDrawerParticipantList>
<ConferenceDrawerLog log={this.state.eventLog} />
</ConferenceDrawer>
</View>
);
}
}
ConferenceBox.propTypes = {
notificationCenter : PropTypes.func.isRequired,
call : PropTypes.object,
hangup : PropTypes.func,
saveParticipant : PropTypes.func,
saveInvitedParties : PropTypes.func,
- previousParticipants: PropTypes.object,
+ previousParticipants: PropTypes.array,
remoteUri : PropTypes.string,
generatedVideoTrack : PropTypes.bool,
toggleSpeakerPhone : PropTypes.func,
speakerPhoneEnabled : PropTypes.bool
};
export default ConferenceBox;
diff --git a/app/components/ReadyBox.js b/app/components/ReadyBox.js
index 5371116..635da75 100644
--- a/app/components/ReadyBox.js
+++ b/app/components/ReadyBox.js
@@ -1,253 +1,251 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
// import VizSensor = require('react-visibility-sensor').default;
import autoBind from 'auto-bind';
import { View, Platform} from 'react-native';
import { IconButton, Title } from 'react-native-paper';
import ConferenceModal from './ConferenceModal';
import HistoryTileBox from './HistoryTileBox';
import FooterBox from './FooterBox';
import URIInput from './URIInput';
import config from '../config';
import utils from '../utils';
import styles from '../assets/styles/blink/_ReadyBox.scss';
class ReadyBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
targetUri: this.props.missedTargetUri,
contacts: this.props.contacts,
selectedContact: null,
showConferenceModal: false,
sticky: false
};
- console.log('Loaded ready box', this.state.targetUri);
}
getTargetUri() {
const defaultDomain = this.props.account.id.substring(this.props.account.id.indexOf('@') + 1);
return utils.normalizeUri(this.state.targetUri, defaultDomain);
}
async componentDidMount() {
//console.log('Ready now');
if (this.state.targetUri) {
console.log('We must call', this.state.targetUri);
}
}
handleTargetChange(value, contact) {
let new_value = value;
if (contact) {
if (this.state.targetUri === contact.uri) {
new_value = '';
}
}
if (this.state.targetUri === value) {
new_value = '';
}
this.setState({targetUri: new_value,
selectedContact: contact});
}
handleTargetSelect() {
if (this.props.connection === null) {
this.props._notificationCenter.postSystemNotification("Server unreachable", {timeout: 2});
return;
}
// the user pressed enter, start a video call by default
if (this.state.targetUri.endsWith(`@${config.defaultConferenceDomain}`)) {
this.props.startConference(this.state.targetUri, {audio: true, video: true});
} else {
this.props.startCall(this.getTargetUri(), {audio: true, video: true});
}
}
showConferenceModal(event) {
event.preventDefault();
if (this.state.targetUri.length !== 0) {
const uri = `${this.state.targetUri.split('@')[0].replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`;
this.handleConferenceCall(uri.toLowerCase());
} else {
this.setState({showConferenceModal: true});
}
}
handleAudioCall(event) {
if (this.props.connection === null) {
this.props._notificationCenter.postSystemNotification("Server unreachable", {timeout: 2});
return;
}
event.preventDefault();
if (this.state.targetUri.endsWith(`@${config.defaultConferenceDomain}`)) {
this.props.startConference(this.state.targetUri, {audio: true, video: false});
} else {
this.props.startCall(this.getTargetUri(), {audio: true, video: false});
}
}
handleVideoCall(event) {
if (this.props.connection === null) {
this.props._notificationCenter.postSystemNotification("Server unreachable", {timeout: 2});
return;
}
event.preventDefault();
if (this.state.targetUri.endsWith(`@${config.defaultConferenceDomain}`)) {
this.props.startConference(this.state.targetUri, {audio: true, video: false});
} else {
this.props.startCall(this.getTargetUri(), {audio: true, video: true});
}
}
handleConferenceCall(targetUri, options={audio: true, video: true}) {
if (targetUri) {
if (!options.video) {
console.log('ReadyBox: Handle audio only conference call to',targetUri);
} else {
console.log('ReadyBox: Handle video conference call to',targetUri);
}
this.props.startConference(targetUri, options);
}
this.setState({showConferenceModal: false});
}
render() {
//utils.timestampedLog('Render ready');
const defaultDomain = `${config.defaultDomain}`;
let uriClass = styles.portraitUriInputBox;
let uriGroupClass = styles.portraitUriButtonGroup;
let titleClass = styles.portraitTitle;
const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
if (this.props.isTablet) {
titleClass = this.props.orientation === 'landscape' ? styles.landscapeTabletTitle : styles.portraitTabletTitle;
} else {
titleClass = this.props.orientation === 'landscape' ? styles.landscapeTitle : styles.portraitTitle;
}
if (this.props.isTablet) {
uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriButtonGroup : styles.portraitTabletUriButtonGroup;
} else {
uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeUriButtonGroup : styles.portraitUriButtonGroup;
}
if (this.props.isTablet) {
uriClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriInputBox : styles.portraitTabletUriInputBox;
} else {
uriClass = this.props.orientation === 'landscape' ? styles.landscapeUriInputBox : styles.portraitUriInputBox;
}
const historyClass = this.props.orientation === 'landscape' ? styles.landscapeHistory : styles.portraitHistory;
// Join URIs from local and server history for input
/*
let history = this.props.history.concat(
this.props.serverHistory.map(e => e.remoteParty)
);
history = [...new Set(history)];
*/
//console.log('history from server is', this.props.serverHistory);
const placehoder = 'Enter a SIP address like alice@' + defaultDomain;
// let historyItems = this.props.serverHistory.filter(historyItem => historyItem.remoteParty.startsWith(this.state.targetUri))
return (
<Fragment>
<View style={styles.wholeContainer}>
<View >
<Title style={titleClass}>Enter address or phone number</Title>
<View style={uriGroupClass}>
<View style={uriClass}>
<URIInput
defaultValue={this.state.targetUri}
onChange={this.handleTargetChange}
onSelect={this.handleTargetSelect}
placeholder={placehoder}
autoFocus={false}
/>
</View>
<View style={styles.buttonGroup}>
<IconButton
style={buttonClass}
size={34}
disabled={this.state.targetUri.length === 0}
onPress={this.handleAudioCall}
icon="phone"
/>
<IconButton
style={buttonClass}
size={34}
disabled={this.state.targetUri.length === 0}
onPress={this.handleVideoCall}
icon="video"
/>
<IconButton
style={styles.conferenceButton}
size={34}
onPress={this.showConferenceModal}
icon="account-group"
/>
</View>
</View>
</View>
<View style={historyClass}>
<HistoryTileBox
contacts={this.state.contacts}
targetUri={this.state.targetUri}
orientation={this.props.orientation}
setTargetUri={this.handleTargetChange}
selectedContact={this.state.selectedContact}
- startVideoCall={this.handleVideoCall}
- startAudioCall={this.handleAudioCall}
isTablet={this.props.isTablet}
account={this.props.account}
password={this.props.password}
config={this.props.config}
+ refreshHistory={this.props.refreshHistory}
/>
</View>
<View style={styles.footer}>
<FooterBox />
</View>
</View>
<ConferenceModal
show={this.state.showConferenceModal}
targetUri={this.state.targetUri}
handleConferenceCall={this.handleConferenceCall}
/>
</Fragment>
);
}
}
ReadyBox.propTypes = {
account : PropTypes.object.isRequired,
password : PropTypes.string.isRequired,
config : PropTypes.object.isRequired,
startCall : PropTypes.func.isRequired,
startConference : PropTypes.func.isRequired,
missedTargetUri : PropTypes.string,
orientation : PropTypes.string,
contacts : PropTypes.array,
isTablet : PropTypes.bool,
- refreshHistory : PropTypes.func
+ refreshHistory : PropTypes.bool
};
export default ReadyBox;
diff --git a/app/components/URIInput.js b/app/components/URIInput.js
index 2b841d9..c51d00d 100644
--- a/app/components/URIInput.js
+++ b/app/components/URIInput.js
@@ -1,129 +1,128 @@
import React from 'react';
import PropTypes from 'prop-types';
import { TextInput } from 'react-native-paper';
import autoBind from 'auto-bind';
class URIInput extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
selecting: false
};
this.uriInput = React.createRef();
this.clicked = false;
this.autoComplete;
}
componentDidMount() {
// this.autoComplete = autocomplete('#uri-input', { hint: false }, [
// {
// source: (query, cb) => {
// let data = this.props.data.filter((item) => {
// return item.startsWith(query);
// });
// cb(data);
// },
// displayKey: String,
// templates: {
// suggestion: (suggestion) => {
// return suggestion;
// }
// }
// }
// ]).on('autocomplete:selected', (event, suggestion, dataset) => {
// this.setValue(suggestion);
// });
if (this.props.autoFocus) {
this.uriInput.current.focus();
}
}
componentDidUpdate(prevProps) {
if (prevProps.defaultValue !== this.props.defaultValue && this.props.autoFocus) {
this.uriInput.current.focus();
}
}
setValue(value) {
this.props.onChange(value);
}
onInputChange(value) {
this.setValue(value);
}
onInputClick(event) {
if (!this.clicked) {
this.uriInput.current.select();
this.clicked = true;
}
}
onInputKeyDown(event) {
switch (event.which) {
case 13:
// ENTER
if (this.state.selecting) {
this.setState({selecting: false});
} else {
this.props.onSelect(event.target.value);
}
break;
case 27:
// ESC
this.setState({selecting: false});
break;
case 38:
case 40:
// UP / DOWN ARROW
this.setState({selecting: true});
break;
default:
break;
}
}
onInputBlur(event) {
// focus was lost, reset selecting state
if (this.state.selecting) {
this.setState({selecting: false});
}
this.clicked = false;
}
render() {
return (
<TextInput
mode="flat"
label="Address"
ref={this.uriInput}
onChangeText={this.onInputChange}
onKeyDown={this.onInputKeyDown}
onBlur={this.onInputBlur}
onPress={this.onInputClick}
value={this.props.defaultValue}
autoCapitalize="none"
autoCorrect={false}
required
autoFocus={this.props.autoFocus}
placeholder={this.props.placeholder}
/>
);
}
}
URIInput.propTypes = {
defaultValue: PropTypes.string.isRequired,
- data: PropTypes.array.isRequired,
autoFocus: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
placeholder : PropTypes.string
};
export default URIInput;
diff --git a/app/components/VideoBox.js b/app/components/VideoBox.js
index 3d3f552..75f0d41 100644
--- a/app/components/VideoBox.js
+++ b/app/components/VideoBox.js
@@ -1,405 +1,405 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import debug from 'react-native-debug';
import autoBind from 'auto-bind';
import { IconButton } from 'react-native-paper';
import { View, Dimensions, TouchableOpacity, Platform } from 'react-native';
import { RTCView } from 'react-native-webrtc';
import CallOverlay from './CallOverlay';
import EscalateConferenceModal from './EscalateConferenceModal';
import DTMFModal from './DTMFModal';
import config from '../config';
import dtmf from 'react-native-dtmf';
import styles from '../assets/styles/blink/_VideoBox.scss';
const DEBUG = debug('blinkrtc:Video');
debug.enable('*');
class VideoBox extends Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
callOverlayVisible: true,
audioMuted: false,
videoMuted: false,
localVideoShow: false,
remoteVideoShow: false,
remoteSharesScreen: false,
showEscalateConferenceModal: false,
localStream: null,
remoteStream: null,
showDtmfModal: false,
doorOpened: false
};
this.overlayTimer = null;
this.localVideo = React.createRef();
this.remoteVideo = React.createRef();
}
callStateChanged(oldState, newState, data) {
DEBUG(`Call state changed ${oldState} -> ${newState}`);
if (newState === 'established') {
this.forceUpdate();
}
}
openDoor() {
const tone = config.intercomDtmfTone;
DEBUG('DTMF tone sent to intercom: ' + tone);
this.setState({doorOpened: true});
this.forceUpdate();
dtmf.stopTone(); //don't play a tone at the same time as another
dtmf.playTone(dtmf['DTMF_' + tone], 1000);
if (this.props.call !== null && this.props.call.state === 'established') {
this.props.call.sendDtmf(tone);
/*this.props.notificationCenter.postSystemNotification('Door opened', {timeout: 5});*/
}
}
componentDidMount() {
console.log('localStreams', this.props.call.getLocalStreams());
console.log('remoteStreams', this.props.call.getRemoteStreams());
this.setState({localStream: this.props.call.getLocalStreams()[0], localVideoShow: true, remoteStream: this.props.call.getRemoteStreams()[0], remoteVideoShow: true});
this.props.call.on('stateChanged', this.callStateChanged);
// sylkrtc.utils.attachMediaStream(, this.localVideo.current, {disableContextMenu: true});
// let promise = this.localVideo.current.play()
// if (promise !== undefined) {
// promise.then(_ => {
// this.setState({localVideoShow: true}); // eslint-disable-line react/no-did-mount-set-state
// // Autoplay started!
// }).catch(error => {
// // Autoplay was prevented.
// // Show a "Play" button so that user can start playback.
// });
// } else {
// this.localVideo.current.addEventListener('playing', () => {
// this.setState({}); // eslint-disable-line react/no-did-mount-set-state
// });
// }
// this.remoteVideo.current.addEventListener('playing', this.handleRemoteVideoPlaying);
// sylkrtc.utils.attachMediaStream(this.props.call.getRemoteStreams()[0], this.remoteVideo.current, {disableContextMenu: true});
}
componentWillUnmount() {
// clearTimeout(this.overlayTimer);
// this.remoteVideo.current.removeEventListener('playing', this.handleRemoteVideoPlaying);
// this.exitFullscreen();
}
showDtmfModal() {
this.setState({showDtmfModal: true});
}
hideDtmfModal() {
this.setState({showDtmfModal: false});
}
handleFullscreen(event) {
event.preventDefault();
// this.toggleFullscreen();
}
handleRemoteVideoPlaying() {
this.setState({remoteVideoShow: true});
// this.remoteVideo.current.onresize = (event) => {
// this.handleRemoteResize(event)
// };
// this.armOverlayTimer();
}
handleRemoteResize(event, target) {
//DEBUG("%o", event);
const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180'];
const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
if (resolutions.indexOf(videoResolution) === -1) {
this.setState({remoteSharesScreen: true});
} else {
this.setState({remoteSharesScreen: false});
}
}
muteAudio(event) {
event.preventDefault();
const localStream = this.state.localStream;
if (localStream.getAudioTracks().length > 0) {
//const track = localStream.getAudioTracks()[0];
if(this.state.audioMuted) {
DEBUG('Unmute microphone');
//track.enabled = true;
this.props.callKeepToggleMute(false);
this.setState({audioMuted: false});
} else {
DEBUG('Mute microphone');
// track.enabled = false;
this.props.callKeepToggleMute(true);
this.setState({audioMuted: true});
}
}
}
muteVideo(event) {
event.preventDefault();
const localStream = this.state.localStream;
if (localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
if(this.state.videoMuted) {
DEBUG('Unmute camera');
track.enabled = true;
this.setState({videoMuted: false});
} else {
DEBUG('Mute camera');
track.enabled = false;
this.setState({videoMuted: true});
}
}
}
toggleCamera(event) {
event.preventDefault();
const localStream = this.state.localStream;
if (localStream.getVideoTracks().length > 0) {
const track = localStream.getVideoTracks()[0];
track._switchCamera();
}
}
hangupCall(event) {
event.preventDefault();
this.props.hangupCall();
}
escalateToConference(participants) {
this.props.escalateToConference(participants);
}
armOverlayTimer() {
clearTimeout(this.overlayTimer);
this.overlayTimer = setTimeout(() => {
this.setState({callOverlayVisible: false});
}, 4000);
}
showCallOverlay() {
if (this.state.remoteVideoShow) {
this.setState({callOverlayVisible: true});
this.armOverlayTimer();
}
}
toggleEscalateConferenceModal() {
this.setState({
callOverlayVisible : false,
showEscalateConferenceModal : !this.state.showEscalateConferenceModal
});
}
render() {
if (this.props.call == null) {
return null;
}
const localVideoClasses = classNames({
'video-thumbnail' : true,
'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack,
'hidden' : !this.state.localVideoShow,
'animated' : true,
'fadeIn' : this.state.localVideoShow || this.state.videoMuted,
'fadeOut' : this.state.videoMuted,
'fit' : this.props.call.sharingScreen
});
const remoteVideoClasses = classNames({
'poster' : !this.state.remoteVideoShow,
'animated' : true,
'fadeIn' : this.state.remoteVideoShow,
'large' : true,
'fit' : this.state.remoteSharesScreen
});
let callButtons;
let watermark;
if (this.state.callOverlayVisible) {
// const screenSharingButtonIcons = classNames({
// 'fa' : true,
// 'fa-clone' : true,
// 'fa-flip-horizontal' : true,
// 'text-warning' : this.props.call.sharingScreen
// });
// const fullScreenButtonIcons = classNames({
// 'fa' : true,
// 'fa-expand' : !this.isFullScreen(),
// 'fa-compress' : this.isFullScreen()
// });
// const commonButtonClasses = classNames({
// 'btn' : true,
// 'btn-round' : true,
// 'btn-default' : true
// });
const buttons = [];
// buttons.push(<Button key="shareScreen" type="button" title="Share screen" className={commonButtonClasses} onPress={this.props.shareScreen}><i className={screenSharingButtonIcons}></i></button>);
// if (this.isFullscreenSupported()) {
// buttons.push(<button key="fsButton" type="button" className={commonButtonClasses} onPress={this.handleFullscreen}> <i className={fullScreenButtonIcons}></i> </button>);
// }
// buttons.push(<br key="break" />);
// callButtons = (
// // <CSSTransition
// // key="buttons"
// // classNames="videobuttons"
// // timeout={{ enter: 300, exit: 300}}
// // >
// // </CSSTransition>
// );
} else {
// watermark = (
// <CSSTransition
// key="watermark"
// classNames="watermark"
// timeout={{enter: 600, exit: 300}}
// >
// <View className="watermark"></View>
// </CSSTransition>
// );
}
- console.log('local media stream in videobox', this.state);
+ //console.log('local media stream in videobox', this.state);
const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone';
const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video';
const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
return (
<View style={styles.container}>
{/*onMouseMove={this.showCallOverlay}*/}
<CallOverlay
show = {true}
remoteUri={this.props.remoteUri}
remoteDisplayName={this.props.remoteDisplayName}
call = {this.props.call}
/>
{/* <TransitionGroup> */}
{/* {watermark} */}
{/* </TransitionGroup> */}
{this.state.remoteVideoShow ?
<View style={[styles.container, styles.remoteVideoContainer]}>
<RTCView objectFit='cover' style={[styles.video, styles.remoteVideo]} poster="assets/images/transparent-1px.png" ref={this.remoteVideo} streamURL={this.state.remoteStream ? this.state.remoteStream.toURL() : null} />
</View>
: null }
{ this.state.localVideoShow ?
<TouchableOpacity style={[styles.container, styles.localVideoContainer]} onPress={this.toggleCamera}>
<View style={[styles.container, styles.localVideoContainer]}>
<RTCView objectFit='cover' style={[styles.video, styles.localVideo]} ref={this.localVideo}
streamURL={this.state.localStream ? this.state.localStream.toURL() : null} mirror={true} />
</View>
</TouchableOpacity>
: null }
{ config.intercomDtmfTone ?
<View style={styles.buttonContainer}>
<IconButton
size={50}
style={buttonClass}
icon={this.state.doorOpened ? "door-open": "door" }
onPress={this.openDoor}
disabled={!(this.props.call && this.props.call.state === 'established')}
/>
<IconButton
size={34}
style={[buttonClass]}
icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
onPress={this.props.toggleSpeakerPhone}
/>
<IconButton
size={50}
style={[styles.button, styles.hangupButton]}
onPress={this.hangupCall}
icon="phone-hangup"
/>
</View>
:
<View style={styles.buttonContainer}>
<IconButton
size={34}
style={buttonClass}
onPress={this.toggleEscalateConferenceModal}
icon="account-plus"
/>
<IconButton
size={34}
style={buttonClass}
onPress={this.muteAudio}
icon={muteButtonIcons}
/>
<IconButton
size={34}
style={buttonClass}
onPress={this.muteVideo}
icon={muteVideoButtonIcons}
/>
<IconButton
size={34}
style={[buttonClass]}
icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
onPress={this.props.toggleSpeakerPhone}
/>
<IconButton
size={34}
style={[buttonClass, styles.hangupButton]}
onPress={this.hangupCall}
icon="phone-hangup"
/>
</View>
}
<DTMFModal
show={this.state.showDtmfModal}
hide={this.hideDtmfModal}
call={this.props.call}
callKeepSendDtmf={this.props.callKeepSendDtmf}
/>
<EscalateConferenceModal
show={this.state.showEscalateConferenceModal}
call={this.props.call}
close={this.toggleEscalateConferenceModal}
escalateToConference={this.escalateToConference}
/>
</View>
);
}
}
VideoBox.propTypes = {
call : PropTypes.object,
remoteUri : PropTypes.string,
remoteDisplayName : PropTypes.string,
localMedia : PropTypes.object,
hangupCall : PropTypes.func,
shareScreen : PropTypes.func,
escalateToConference : PropTypes.func,
generatedVideoTrack : PropTypes.bool,
callKeepSendDtmf : PropTypes.func,
callKeepToggleMute : PropTypes.func,
toggleSpeakerPhone : PropTypes.func,
speakerPhoneEnabled : PropTypes.bool
};
export default VideoBox;

File Metadata

Mime Type
text/x-diff
Expires
Tue, Nov 26, 7:46 AM (1 d, 22 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
3414540
Default Alt Text
(179 KB)

Event Timeline