diff --git a/app/CallManager.js b/app/CallManager.js index 62b4776..42279ca 100644 --- a/app/CallManager.js +++ b/app/CallManager.js @@ -1,562 +1,566 @@ import events from 'events'; import Logger from '../Logger'; import uuid from 'react-native-uuid'; import { Platform, PermissionsAndroid } 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 } }; */ const options = { 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] } }; export default class CallManager extends events.EventEmitter { - constructor(RNCallKeep, acceptFunc, rejectFunc, hangupFunc, timeoutFunc, conferenceCallFunc, startCallFromCallKeeper, muteFunc) { + constructor(RNCallKeep, acceptFunc, rejectFunc, hangupFunc, timeoutFunc, conferenceCallFunc, startCallFromCallKeeper, muteFunc, getConnectionFunct) { //logger.debug('constructor()'); super(); this.setMaxListeners(Infinity); this._RNCallKeep = RNCallKeep; this._calls = new Map(); this._pushCalls = new Map(); this._conferences = new Map(); this._rejectedCalls = new Map(); this._acceptedCalls = new Map(); this._cancelledCalls = new Map(); this._alertedCalls = new Map(); this._terminatedCalls = new Map(); this.webSocketActions = new Map(); this.pushNotificationsActions = new Map(); this._timeouts = new Map(); this.sylkAcceptCall = acceptFunc; this.sylkRejectCall = rejectFunc; this.sylkHangupCall = hangupFunc; this.timeoutCall = timeoutFunc; + this.getConnection = getConnectionFunct; + this.toggleMute = muteFunc; this.conferenceCall = conferenceCallFunc; this.startCallFromOutside = startCallFromCallKeeper; 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.boundRnStartAction = this._startedCall.bind(this); this.boundRnDisplayIncomingCall = this._displayIncomingCall.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); this._RNCallKeep.addEventListener('didReceiveStartCallAction', this.boundRnStartAction); this._RNCallKeep.addEventListener('didDisplayIncomingCall', this.boundRnDisplayIncomingCall); this._RNCallKeep.setup(options); this._RNCallKeep.addEventListener('checkReachability', () => { this._RNCallKeep.setReachable(); }); } 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; - } - } - } - setAvailable(available) { this.callKeep.setAvailable(available); } heartbeat() { this.callUUIDS.forEach((callUUID) => { //utils.timestampedLog('Callkeep: call active', callUUID); }); } backToForeground() { utils.timestampedLog('Callkeep: bring app to the foreground'); this.callKeep.backToForeground(); } startOutgoingCall(callUUID, targetUri, hasVideo) { utils.timestampedLog('Callkeep: WILL START CALL outgoing', 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: CALL ACTIVE', callUUID); this.callKeep.setCurrentCallActive(callUUID); this.backToForeground(); } endCalls() { utils.timestampedLog('Callkeep: end all calls'); this.callKeep.endAllCalls(); } endCall(callUUID, reason) { if (reason) { utils.timestampedLog('Callkeep: END CALL', callUUID, 'with reason', reason); } else { utils.timestampedLog('Callkeep: END CALL', callUUID); } if (this._rejectedCalls.has(callUUID)) { // return; } if (this._cancelledCalls.has(callUUID)) { //utils.timestampedLog('Callkeep: CALL', callUUID, 'already cancelled'); return; } if (reason === 2) { this._cancelledCalls.set(callUUID, Date.now()); } if (reason) { this.callKeep.reportEndCallWithUUID(callUUID, reason); if (this._timeouts.has(callUUID)) { clearTimeout(this._timeouts.get(callUUID)); this._timeouts.delete(callUUID); } } else { this.callKeep.endCall(callUUID); } } terminateCall(callUUID) { if (this._calls.has(callUUID)) { this._calls.delete(callUUID); } this._terminatedCalls.set(callUUID, Date.now()); } _rnActiveAudioSession() { //utils.timestampedLog('Callkeep: activated audio call'); } _rnDeactiveAudioSession() { //utils.timestampedLog('Callkeep: deactivated audio call'); } _rnAccept(data) { let callUUID = data.callUUID.toLowerCase(); if (!this._rejectedCalls.has(callUUID)) { - utils.timestampedLog('Callkeep: accept callback', callUUID); + //utils.timestampedLog('Callkeep: accept callback', callUUID); this.acceptCall(callUUID); } } _rnEnd(data) { // this is called both when user touches Reject and when the call ends let callUUID = data.callUUID.toLowerCase(); utils.timestampedLog('Callkeep: end callback', callUUID); if (this._terminatedCalls.has(callUUID)) { return; } let call = this._calls.get(callUUID); if (!call) { utils.timestampedLog('Callkeep: add call', callUUID, ' reject to the waitings list'); this.webSocketActions.set(callUUID, 'reject'); return; } if (call.state === 'incoming') { if (!this._acceptedCalls.has(callUUID)) { this.rejectCall(callUUID); } } else { this.sylkHangupCall(callUUID, 'user_press_hangup'); } } acceptCall(callUUID) { - this.setCurrentCallActive(callUUID); - + this.backToForeground(); if (this._acceptedCalls.has(callUUID)) { - utils.timestampedLog('Callkeep: already accepted call', callUUID); - return; + //utils.timestampedLog('Callkeep: already accepted call', callUUID); + utils.timestampedLog('Callkeep: accept call again', callUUID); + //return; + } else { + utils.timestampedLog('Callkeep: accept call', callUUID); } - utils.timestampedLog('Callkeep: accept call', callUUID); - this._acceptedCalls.set(callUUID, Date.now()); if (this._timeouts.has(callUUID)) { clearTimeout(this._timeouts.get(callUUID)); this._timeouts.delete(callUUID); } if (this._conferences.has(callUUID)) { let room = this._conferences.get(callUUID); utils.timestampedLog('Callkeep: accept incoming conference', callUUID); this.endCall(callUUID, 4); this._conferences.delete(callUUID); utils.timestampedLog('Callkeep: will start conference to', room); this.conferenceCall(room); } else if (this._calls.has(callUUID)) { this.sylkAcceptCall(callUUID); } else { utils.timestampedLog('Callkeep: add call', callUUID, 'accept to the waitings list'); // We accepted the call before it arrived on web socket + const connection = this.getConnection(); this.webSocketActions.set(callUUID, 'accept'); - utils.timestampedLog('Callkeep: check over 20 seconds if call', callUUID, 'arrived over web socket'); + utils.timestampedLog('Callkeep: check over 20 seconds if call', callUUID, 'arrived over web socket', connection); + setTimeout(() => { - if (!this._calls.has(callUUID)) { - utils.timestampedLog('Callkeep: call', callUUID, 'did not arrive over web socket'); + const connection = this.getConnection(); + utils.timestampedLog('Callkeep: current calls:', this.callUUIDS); + + if (!this._calls.has(callUUID) && !this._terminatedCalls.has(callUUID)) { + utils.timestampedLog('Callkeep: call', callUUID, 'did not arrive over web socket', connection); this.webSocketActions.delete(callUUID); this.endCall(callUUID, 1); this.sylkHangupCall(callUUID, 'timeout'); + } else { + utils.timestampedLog('Callkeep: call', callUUID, 'did arrive over web socket', connection); } - }, 30000); + }, 20000); } } rejectCall(callUUID) { if (this._rejectedCalls.has(callUUID)) { utils.timestampedLog('Callkeep: already rejected call', callUUID); return; } utils.timestampedLog('Callkeep: reject call', callUUID); this._rejectedCalls.set(callUUID, Date.now()); if (this._timeouts.has(callUUID)) { clearTimeout(this._timeouts.get(callUUID)); this._timeouts.delete(callUUID); } this.callKeep.rejectCall(callUUID); if (this._conferences.has(callUUID)) { utils.timestampedLog('Callkeep: reject conference invite', callUUID); let room = this._conferences.get(callUUID); this._conferences.delete(callUUID); } else if (this._calls.has(callUUID)) { let call = this._calls.get(callUUID); if (call.state === 'incoming') { this.sylkRejectCall(callUUID); } else { this.sylkHangupCall(callUUID, 'user_press_hangup'); } } else { // We rejected the call before it arrived on web socket // from iOS push notifications utils.timestampedLog('Callkeep: add call', callUUID, 'reject to the waitings list'); this.webSocketActions.set(callUUID, 'reject'); utils.timestampedLog('Callkeep: check over 20 seconds if call', callUUID, 'arrived on web socket'); setTimeout(() => { if (!this._calls.has(callUUID)) { utils.timestampedLog('Callkeep: call', callUUID, 'did not arrive on web socket'); this.webSocketActions.delete(callUUID); this.endCall(callUUID, 1); } }, 20000); } this.endCall(callUUID); } setMutedCall(callUUID, mute=false) { //utils.timestampedLog('Callkeep: set call', callUUID, 'muted =', mute); if (this._calls.has(callUUID)) { this.callKeep.setMutedCall(callUUID, mute); let call = this._calls.get(callUUID); const localStream = call.getLocalStreams()[0]; if (mute) { utils.timestampedLog('Callkeep: local stream audio track disabled'); } else { utils.timestampedLog('Callkeep: local stream audio track enabled'); } localStream.getAudioTracks()[0].enabled = !mute; } } _rnMute(data) { utils.timestampedLog('Callkeep: mute ' + data.muted + ' for call', data.callUUID); this.toggleMute(data.callUUID, 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(); }); } addWebsocketCall(call) { + const connection = this.getConnection(); if (this._calls.has(call.id)) { return; } + utils.timestampedLog('Callkeep: added call', call.id, 'for connection', connection); this._calls.set(call.id, call); } incomingCallFromPush(callUUID, from, force=false, skipNativePanel=false) { utils.timestampedLog('Callkeep: handle new incoming push call', callUUID, 'from', from); if (this._pushCalls.has(callUUID)) { utils.timestampedLog('Callkeep: push call already handled', callUUID); return; } this._pushCalls.set(callUUID, true); if (this._rejectedCalls.has(callUUID)) { utils.timestampedLog('Callkeep: call already rejected', callUUID); this.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.UNANSWERED); return; } if (this._acceptedCalls.has(callUUID)) { utils.timestampedLog('Callkeep: call already accepted', callUUID); return; } // if user does not decide anything this will be handled later this._timeouts.set(callUUID, setTimeout(() => { utils.timestampedLog('Callkeep: incoming call', callUUID, 'timeout'); let reason = this.webSocketActions.has(callUUID) ? CK_CONSTANTS.END_CALL_REASONS.FAILED : CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; if (!this._terminatedCalls.has(callUUID) && !this._calls.has(callUUID)) { - utils.timestampedLog('Callkeep: call', callUUID, 'did not arive on web socket'); + const connection = this.getConnection(); + utils.timestampedLog('Callkeep: call', callUUID, 'did not arive on web socket', connection); reason = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (this._calls.has(callUUID)) { utils.timestampedLog('Callkeep: user did not accept or reject', callUUID); } this.endCall(callUUID, reason); this._timeouts.delete(callUUID); }, 45000)); if (Platform.OS === 'ios') { if (this._calls.has(callUUID)) { utils.timestampedLog('Callkeep: call', callUUID, 'already received on web socket'); } } else { if (this._calls.has(callUUID) || force) { // on Android display alert panel only after websocket call arrives // force is required when Android is locked, if we do not bring up the panel, the app will not wake up if (!skipNativePanel || force) { this.showAlertPanel(callUUID, from); } else { utils.timestampedLog('Callkeep: call', callUUID, 'skipped display of native panel'); } } else { utils.timestampedLog('Callkeep: waiting for call', callUUID, 'on web socket'); } } } incomingCallFromWebSocket(call, accept=false, skipNativePanel=false) { this.addWebsocketCall(call); utils.timestampedLog('Callkeep: handle incoming websocket call', call.id); // if the call came via push and was already accepted or rejected if (this.webSocketActions.get(call.id)) { let action = this.webSocketActions.get(call.id); utils.timestampedLog('Callkeep: execute action decided earlier', action); if (action === 'accept') { this.sylkAcceptCall(call.id); } else { this.sylkRejectCall(call.id); } this.webSocketActions.delete(call.id); } else { if (accept) { this.acceptCall(call.id); } else if (!skipNativePanel){ this.showAlertPanelforCall(call); } } // Emit event. this._emitSessionsChange(true); } handleConference(callUUID, room, from_uri) { if (this._conferences.has(callUUID)) { return; } this._conferences.set(callUUID, room); utils.timestampedLog('CallKeep: handle conference', callUUID, 'from', from_uri, 'to room', room); this.showAlertPanel(callUUID, from_uri); this._timeouts.set(callUUID, setTimeout(() => { utils.timestampedLog('Callkeep: conference timeout', callUUID); this.timeoutCall(callUUID, from_uri); this.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.MISSED); this._timeouts.delete(callUUID); }, 45000)); this._emitSessionsChange(true); } showAlertPanelforCall(call, force=false) { const callUUID = call.id; const uri = call.remoteIdentity.uri; const username = uri.split('@')[0]; const isPhoneNumber = username.match(/^(\+|0)(\d+)$/); const from = isPhoneNumber ? username: uri; const hasVideo = call.mediaTypes && call.mediaTypes.video; this.showAlertPanel(callUUID, from, hasVideo); } showAlertPanel(callUUID, uri, hasVideo=false) { if (this._alertedCalls.has(callUUID)) { return; } const username = uri.split('@')[0]; const isPhoneNumber = username.match(/^(\+|0)(\d+)$/); const from = isPhoneNumber ? username: uri; utils.timestampedLog('Callkeep: ALERT PANEL for', callUUID, 'from', from); this._alertedCalls.set(callUUID, Date.now()); if (Platform.OS === 'ios') { this.callKeep.displayIncomingCall(callUUID, from, from, 'email', hasVideo); } else if (Platform.OS === 'android') { this.callKeep.displayIncomingCall(callUUID, from, from); } } _startedCall(data) { utils.timestampedLog("Callkeep: STARTED CALL", data.callUUID); if (!this._calls.has(data.callUUID)) { // call has started from OS native dialer this.startCallFromOutside(data); } } _displayIncomingCall(data) { utils.timestampedLog('Callkeep: Incoming alert panel displayed'); } _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); this._RNCallKeep.removeEventListener('didReceiveStartCallAction', this.boundRnStartAction); this._RNCallKeep.removeEventListener('didDisplayIncomingCall', this.boundRnDisplayIncomingCall); } } diff --git a/app/app.js b/app/app.js index 50ad870..0807939 100644 --- a/app/app.js +++ b/app/app.js @@ -1,2539 +1,2534 @@ import React, { Component, Fragment } from 'react'; import { Alert, View, SafeAreaView, ImageBackground, AppState, Linking, Platform, StyleSheet, Vibration} from 'react-native'; import { DeviceEventEmitter } from 'react-native'; import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper'; import { registerGlobals } from 'react-native-webrtc'; import { Router, Route, Link, Switch } from 'react-router-native'; import history from './history'; import Logger from "../Logger"; import autoBind from 'auto-bind'; import { firebase } from '@react-native-firebase/messaging'; import VoipPushNotification from 'react-native-voip-push-notification'; import uuid from 'react-native-uuid'; import { getUniqueId, getBundleId, isTablet, getPhoneNumber} from 'react-native-device-info'; import RNDrawOverlay from 'react-native-draw-overlay'; import PushNotificationIOS from "@react-native-community/push-notification-ios"; import Contacts from 'react-native-contacts'; import BackgroundTimer from 'react-native-background-timer'; registerGlobals(); import * as sylkrtc from 'react-native-sylkrtc'; import InCallManager from 'react-native-incall-manager'; import RNCallKeep, { CONSTANTS as CK_CONSTANTS } from 'react-native-callkeep'; import RegisterBox from './components/RegisterBox'; import ReadyBox from './components/ReadyBox'; import Call from './components/Call'; import Conference from './components/Conference'; import FooterBox from './components/FooterBox'; import StatusBox from './components/StatusBox'; import IncomingCallModal from './components/IncomingCallModal'; import 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', }, }; const ONE_SECOND_IN_MS = 1000; const VIBRATION_PATTERN = [ 1 * ONE_SECOND_IN_MS, 1 * ONE_SECOND_IN_MS, 4 * ONE_SECOND_IN_MS ]; let bundleId = `${getBundleId()}`; const deviceId = getUniqueId(); const version = '1.0.0'; if (Platform.OS == 'ios') { bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`; // bundleId = `${bundleId}.dev`; } const mainStyle = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 0 } }); // Application modes const MODE_NORMAL = Symbol('mode-normal'); const MODE_PRIVATE = Symbol('mode-private'); const MODE_GUEST_CALL = Symbol('mode-guest-call'); const MODE_GUEST_CONFERENCE = Symbol('mode-guest-conference'); (function() { if ( typeof Object.id == "undefined" ) { var id = 0; Object.id = function(o) { if ( o && typeof o.__uniqueid == "undefined" ) { Object.defineProperty(o, "__uniqueid", { value: ++id, enumerable: false, // This could go either way, depending on your // interpretation of what an "id" is writable: false }); } return o ? o.__uniqueid : null; }; } })(); class Sylk extends Component { constructor() { super(); autoBind(this) this._loaded = false; this._initialSstate = { appState: 'active', accountId: '', password: '', displayName: '', account: null, registrationState: null, registrationKeepalive: false, incomingCall: null, currentCall: null, isConference: false, connection: null, showIncomingModal: false, showScreenSharingModal: false, status: null, targetUri: '', missedTargetUri: '', loading: null, mode: MODE_PRIVATE, localMedia: null, generatedVideoTrack: false, contacts: [], devices: {}, speakerPhoneEnabled: null, orientation : 'portrait', Height_Layout : '', Width_Layout : '', outgoingCallUUID: null, outgoingMedia: null, hardware: '', phoneNumber: '', isTablet: isTablet(), refreshHistory: false, myDisplayName: null, myPhoneNumber: null, localHistory: [], favoriteUris: [], blockedUris: [], initialUrl: null, reconnectingCall: false, muted: false, participantsToInvite: null, myInvitedParties: null, defaultDomain: config.defaultDomain }; this.currentRoute = null; this.pushtoken = null; this.pushkittoken = null; this.intercomDtmfTone = null; this.registrationFailureTimer = null; this.contacts = []; this.startedByPush = false; this.cachedHistory = []; // used for caching server history this.state = Object.assign({}, this._initialSstate); this.runtime = Object(); this.myParticipants = {}; this._historyConferenceParticipants = new Map(); // for saving to local history this._terminatedCalls = new Map(); this.__notificationCenter = null; this.redirectTo = null; this.prevPath = null; this.shouldUseHashRouting = false; this.goToReadyTimer = null; storage.initialize(); - this._callKeepManager = new CallManager(RNCallKeep, this.acceptCall, this.rejectCall, this.hangupCall, this.timeoutCall, this.callKeepStartConference, this.startCallFromCallKeeper, this.toggleMute); + this._callKeepManager = new CallManager(RNCallKeep, + this.acceptCall, + this.rejectCall, + this.hangupCall, + this.timeoutCall, + this.callKeepStartConference, + this.startCallFromCallKeeper, + this.toggleMute, + this.getConnection); if (InCallManager.recordPermission !== 'granted') { InCallManager.requestRecordPermission() .then((requestedRecordPermissionResult) => { console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult); }) .catch((err) => { console.log("InCallManager.requestRecordPermission() catch: ", err); }); } // Load camera/mic preferences storage.get('devices').then((devices) => { if (devices) { this.setState({devices: devices}); } }); storage.get('history').then((history) => { if (history) { console.log('Loaded', history.length, 'local history entries'); this.setState({localHistory: history}); } else { console.log('Loaded 0 local history entries'); } }); storage.get('cachedHistory').then((history) => { if (history) { console.log('Loaded', history.length, 'cached history entries'); this.cachedHistory = history; } }); storage.get('myParticipants').then((myParticipants) => { if (myParticipants) { this.myParticipants = myParticipants; console.log('My participants', this.myParticipants); } }); storage.get('myInvitedParties').then((myInvitedParties) => { if (myInvitedParties) { if (Array.isArray(myInvitedParties)) { myInvitedParties = null; } this.myInvitedParties = myInvitedParties; console.log('My invited parties', this.myInvitedParties); this.setState({myInvitedParties: this.myInvitedParties}); } }); storage.get('favoriteUris').then((favoriteUris) => { if (favoriteUris) { this.setState({favoriteUris: favoriteUris}); } }); storage.get('blockedUris').then((blockedUris) => { if (blockedUris) { this.setState({blockedUris: blockedUris}); console.log('My blocked Uris', blockedUris); } }); } async loadContacts() { Contacts.checkPermission((err, permission) => { if (permission === Contacts.PERMISSION_UNDEFINED) { Contacts.requestPermission((err, requestedContactsPermissionResult) => { if (err) { console.log("Contacts.requestPermission()catch: ", err); } console.log("Contacts.requestPermission() requestPermission: ", requestedContactsPermissionResult); }) } }) Contacts.getAll((err, contacts) => { if (err === 'denied'){ console.log('Access to contacts denied') } else { // contacts returned in Array let contact_cards = []; let name; let photo; let seen_uris = new Map(); var arrayLength = contacts.length; for (var i = 0; i < arrayLength; i++) { photo = null; contact = contacts[i]; if (contact['givenName'] && contact['familyName']) { name = contact['givenName'] + ' ' + contact['familyName']; } else if (contact['givenName']) { name = contact['givenName']; } else if (contact['familyName']) { name = contact['familyName']; } else if (contact['company']) { name = contact['company']; } else { continue; } if (contact.hasThumbnail) { photo = contact.thumbnailPath; } //console.log(name); contact['phoneNumbers'].forEach(function (number, index) { let number_stripped = number['number'].replace(/\s|\-|\(|\)/g, ''); if (number_stripped) { if (!seen_uris.has(number_stripped)) { //console.log(' ----> ', number['label'], number_stripped); var contact_card = {id: uuid.v4(), displayName: name, remoteParty: number_stripped, type: 'contact', photo: photo, label: number['label'], tags: ['contact']}; contact_cards.push(contact_card); seen_uris.set(number_stripped, true); var contact_card = {id: uuid.v4(), displayName: name, remoteParty: number_stripped, type: 'contact', photo: photo, label: number['label'], tags: ['contact'] }; } } }); contact['emailAddresses'].forEach(function (email, index) { let email_stripped = email['email'].replace(/\s|\(|\)/g, ''); if (!seen_uris.has(email_stripped)) { //console.log(name, email['label'], email_stripped); //console.log(' ----> ', email['label'], email_stripped); var contact_card = {id: uuid.v4(), displayName: name, remoteParty: email_stripped, type: 'contact', photo: photo, label: email['label'], tags: ['contact'] }; contact_cards.push(contact_card); seen_uris.set(email_stripped, true); } }); } this.contacts = contact_cards; if (this.state.myPhoneNumber) { var myContact = this.findObjectByKey(contact_cards, 'remoteParty', this.state.myPhoneNumber); if (myContact) { this.setState({myDisplayName: myContact.displayName}); } } } }) } get _notificationCenter() { // getter to lazy-load the NotificationCenter ref if (!this.__notificationCenter) { this.__notificationCenter = this.refs.notificationCenter; } return this.__notificationCenter; } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } _detectOrientation() { if(this.state.Width_Layout > this.state.Height_Layout && this.state.orientation !== 'landscape') { this.setState({orientation: 'landscape'}); } else { this.setState({orientation: 'portrait'}); } } changeRoute(route, reason) { - if (this.currentRoute === route && route !== '/call') { + if (this.currentRoute === route) { return; } if (this.currentRoute !== route) { utils.timestampedLog('Change route:', this.currentRoute, '->', route, reason); } if (route === '/ready') { this.startedByPush = false; this.setState({ isConference: false, outgoingMedia: null, outgoingCallUUID: null, currentCall: null, incomingCall: (reason === 'accept_new_call' || reason === 'user_press_hangup') ? this.state.incomingCall: null, targetUri: '', reconnectingCall: false, localMedia: null, muted: false, participantsToInvite: null }); if (this.currentRoute === '/call' || this.currentRoute === '/conference') { if (reason !== 'user_press_hangup') { this.stopRingback(); InCallManager.stop(); } - //this._callKeepManager.endCalls(); - if (reason !== 'accept_new_call') { this.closeLocalMedia(); } if (this.state.account && reason !== 'accept_new_call' && this._loaded) { setTimeout(() => { this.updateServerHistory() }, 1500); } } if (reason === 'registered') { setTimeout(() => { this.updateServerHistory() }, 1500); } + + if (reason === 'no_more_calls') { + this.updateServerHistory() + } } this.currentRoute = route; history.push(route); + } componentWillUnmount() { console.log('App will unmount now'); AppState.removeEventListener('change', this._handleAppStateChange); this.shutdownActions('exit'); this._loaded = false; } async componentDidMount() { this._loaded = true; console.log('App did mount'); // Start a timer that runs once after X milliseconds BackgroundTimer.runBackgroundTimer(() => { // this will be executed once after 10 seconds // even when app is the the background this.heartbeat(); }, 5000); if (Platform.OS === 'android') { RNDrawOverlay.askForDispalayOverOtherAppsPermission() .then(res => { //utils.timestampedLog("Display over other apps was granted"); // res will be true if permission was granted }) .catch(e => { utils.timestampedLog("Display over other apps was declined"); // permission was declined }) } this.changeRoute('/login'); // prime the ref //logger.debug('NotificationCenter ref: %o', this._notificationCenter); this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this); this._boundOnPushRegistered = this._onPushRegistered.bind(this); this._detectOrientation(); getPhoneNumber().then(phoneNumber => { this.setState({myPhoneNumber: phoneNumber}); this.loadContacts(); }); this.listenforPushNotifications(); } listenforPushNotifications() { if (Object.id(this.runtime) > 1) { return; } utils.timestampedLog('---- Add push notifications listeners'); if (Platform.OS === 'android') { Linking.getInitialURL().then((url) => { if (url) { utils.timestampedLog('Initial external URL: ' + url); this.eventFromUrl(url); } }).catch(err => { logger.error({ err }, 'Error getting external URL'); }); firebase.messaging().getToken() .then(fcmToken => { if (fcmToken) { this._onPushRegistered(fcmToken); } }); Linking.addEventListener('url', this.updateLinkingURL); } else if (Platform.OS === 'ios') { VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered); VoipPushNotification.registerVoipToken(); PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered); //let permissions = await checkIosPermissions(); //if (!permissions.alert) { PushNotificationIOS.requestPermissions(); //} } this.boundProximityDetect = this._proximityDetect.bind(this); DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect); AppState.addEventListener('change', this._handleAppStateChange); if (Platform.OS === 'ios') { this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this); this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this); utils.timestampedLog('Adding iOS push notifications listeners'); VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground); VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground); } else if (Platform.OS === 'android') { utils.timestampedLog('Adding Android push notifications listeners'); firebase .messaging() .requestPermission() .then(() => { // User has authorised }) .catch(error => { // User has rejected permissions }); this.messageListener = firebase .messaging() .onMessage((message: RemoteMessage) => { // this will just wake up the app to receive // the web-socket invite handled by this.incomingCall() let event = message.data.event; const callUUID = message.data['session-id']; const from = message.data['from_uri']; const to = message.data['to_uri']; - utils.timestampedLog('Handle Firebase', event, 'push notification for call', callUUID); + utils.timestampedLog('Handle Firebase', event, 'PUSH notification for call', callUUID); if (event === 'incoming_conference_request') { this.incomingConference(callUUID, to, from); } else if (event === 'incoming_session') { this.incomingCallFromPush(callUUID, from); } else if (event === 'cancel') { this.cancelIncomingCall(callUUID); } }); } } cancelIncomingCall(callUUID) { this.startedByPush = false; let call = this._callKeepManager._calls.get(callUUID); if (call === null || (call && call.state === 'incoming')) { this._callKeepManager.endCall(callUUID, 2); } } _proximityDetect(data) { return; if (data.isNear) { this.speakerphoneOff(); } else { this.speakerphoneOn(); } } - updateLinkingURL = (event) => { - // this handles the use case where the app is running in the background and is activated by the listener... - console.log('Updated Linking url', event.url); - this.eventFromUrl(event.url); - } - startCallWhenReady(targetUri, options) { this.resetGoToReadyTimer(); if (options.video) { this.speakerphoneOn(); } if (options.conference) { this.startConference(targetUri, options); } else { this.startCall(targetUri, options); } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } _onPushkitRegistered(token) { utils.timestampedLog('Set VoIP pushkit token', token); this.pushkittoken = token; } _onPushRegistered(token) { utils.timestampedLog('Set background push token', token); this.pushtoken = token; } _sendPushToken() { if (this.state.account && this.pushtoken) { let token = null; if (Platform.OS === 'ios') { token = `${this.pushkittoken}#${this.pushtoken}`; } else if (Platform.OS === 'android') { token = this.pushtoken; } utils.timestampedLog('Push token', token, 'sent to server'); this.state.account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId); } } _handleAppStateChange = nextAppState => { if (nextAppState === this.state.appState) { return; } - if (this.state.connection) { - //utils.timestampedLog('---- App state changed from', this.state.appState, 'to', nextAppState, 'with connection', Object.id(this.state.connection)); - } else { - //utils.timestampedLog('---- App state changed from', this.state.appState, 'to', nextAppState, 'with no connection'); - } + if (this._callKeepManager.count === 0 && !this.state.outgoingCallUUID) { + if (this.state.connection) { + utils.timestampedLog('---- APP state changed from', this.state.appState, 'to', nextAppState, 'with connection', Object.id(this.state.connection)); + } else { + utils.timestampedLog('---- APP state changed from', this.state.appState, 'to', nextAppState, 'with no connection'); + } + + if (this.startedByPush) { + utils.timestampedLog('Was started by push'); + } else { + utils.timestampedLog('It was not started by push'); + } - if (this._callKeepManager.count === 0) { if (this.state.appState === 'background' && nextAppState === 'active') { this.respawnActions(nextAppState); - } else if (nextAppState === 'background' && this._callKeepManager.count) { + } else if (nextAppState === 'background' && !this.startedByPush) { this.shutdownActions(nextAppState); } } this.setState({appState: nextAppState}); - } respawnActions(state) { - utils.timestampedLog('Respawn actions for', state, 'state'); - this.handleRegistration(this.state.accountId, this.state.password); - } - - shutdownActions(state) { - if (Platform.OS === 'android') { - this.shutdownActionsAndroid(state); - } else { - this.shutdownActionsiOS(state); + if (this.state.accountId) { + utils.timestampedLog('Respawn actions for', state, 'state'); + this.handleRegistration(this.state.accountId, this.state.password); } } - shutdownActionsAndroid(state) { + shutdownActions(state) { + utils.timestampedLog('-- Shutdown actions for', state, 'state', 'in', this.currentRoute); if (this.startedByPush) { return; } + if (this.currentRoute === '/login') { + return; + } + if (this.state.account && this.state.connection && this.state.connection.state === 'active') { utils.timestampedLog('Removing account', this.state.account.id); this.state.connection.removeAccount(this.state.account); - this.setState({account: null}); } if (this.state.connection) { utils.timestampedLog('Closing connection', Object.id(this.state.connection)); this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this.state.connection.close(); - this.setState({connection: null}); - } - } - - shutdownActionsiOS(state) { - utils.timestampedLog('Shutdown actions for', state, 'state'); - - if (this.startedByPush) { - utils.timestampedLog('Shutdown actions cancelled when woke up by push'); - return; - } - - if (this.state.connection) { - utils.timestampedLog('Closing connection', Object.id(this.state.connection)); - this.state.connection.close(); - this.setState({connection: null}); } + this.setState({account: null, connection: null}); } startCallFromCallKeeper(data) { // like from native iOS history //utils.timestampedLog("CallKeep started call from outside the app to", data.handle); // we dont have options in the tmp var, which means this likely came from the native dialer // for now, we only do audio calls from the native dialer. let callUUID = data.callUUID || uuid.v4(); let is_conf = data.handle.search('videoconference.') === -1 ? false: true; if (is_conf) { this.callKeepStartConference(data.handle, {audio: true, video: true, callUUID: callUUID}); } else { this.callKeepStartCall(data.handle, {audio: true, video: false, callUUID: callUUID}); } this._notificationCenter.removeNotification(); } connectionStateChanged(oldState, newState) { if (!this._loaded) { return; } - utils.timestampedLog('Web socket state changed:', oldState, '->' , newState); + if (oldState) { + utils.timestampedLog('Web socket state changed:', oldState, '->' , newState); + } + switch (newState) { case 'closed': this.setState({connection: null, loading: null}); //this._notificationCenter.postSystemNotification('Connection failed', {body: '', timeout: 3000}); this._callKeepManager.setAvailable(false); break; case 'ready': this._notificationCenter.removeNotification(); //this._notificationCenter.postSystemNotification('Connection OK', {body: '', timeout: 1}); this.processRegistration(this.state.accountId, this.state.password, this.state.displayName); this._callKeepManager.setAvailable(true); break; case 'disconnected': this._callKeepManager.setAvailable(false); if (this.state.currentCall) { this.hangupCall(this.state.currentCall.id, 'outgoing_connection_failed'); } if (this.state.incomingCall) { this.hangupCall(this.state.incomingCall.id, 'connection_failed'); } this.setState({ registrationState: 'failed', generatedVideoTrack: false, }); //this._notificationCenter.postSystemNotification('Connection lost', {body: '', timeout: 3000}); break; default: this._callKeepManager.setAvailable(false); if (this.state.registrationKeepalive !== true) { this.setState({loading: 'Connecting...'}); } break; } } notificationCenter() { return this._notificationCenter; } showRegisterFailure(reason) { utils.timestampedLog('Registration error: ' + reason); this.setState({ loading : null, registrationState: 'failed', status : { msg : 'Sign In failed: ' + reason, level : 'danger' } }); } registrationStateChanged(oldState, newState, data) { if (!this._loaded) { return; } - utils.timestampedLog('Registration state changed:', oldState, '->', newState); + if (oldState) { + utils.timestampedLog('Registration state changed:', oldState, '->', newState); + } if (newState === 'failed') { this._callKeepManager.setAvailable(false); let reason = data.reason; if (reason.match(/904|408/)) { // Sofia SIP: WAT reason = 'Wrong account or password'; } this.showRegisterFailure(reason); if (this.startedByPush) { this.changeRoute('/call', 'wake from push'); } if (this.state.registrationKeepalive === true) { if (this.state.connection !== null) { utils.timestampedLog('Retry to register...'); //this.setState({loading: 'Register...'}); this._notificationCenter.postSystemNotification('Registering', {body: 'now', timeout: 10000}); this.state.account.register(); } else { // add a timer to retry register after awhile utils.timestampedLog('Retry to register after a delay...'); setTimeout(this.state.account.register(), 5000); } } } else if (newState === 'registered') { if (this.registrationFailureTimer) { clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } this._callKeepManager.setAvailable(true); this.setState({loading: null, registrationKeepalive: true, registrationState: 'registered', defaultDomain: this.state.account.id.split('@')[1] }); if (this.currentRoute === '/login' && !this.startedByPush) { this.changeRoute('/ready', 'registered'); + } else { + this.updateServerHistory(); } //this._notificationCenter.postSystemNotification('Ready to receive calls', {body: '', timeout: 1}); return; } else { this.setState({status: null, registrationState: newState }); this._callKeepManager.setAvailable(false); } } showInternalAlertPanel() { this.setState({showIncomingModal: true}); Vibration.vibrate(VIBRATION_PATTERN, true); } hideInternalAlertPanel() { Vibration.cancel(); this.setState({showIncomingModal: false}); } heartbeat() { if (this.state.connection) { //console.log('Check calls in', this.state.appState, 'with connection', Object.id(this.state.connection), this.state.connection.state); } else { //console.log('Check calls in', this.state.appState, 'with no connection'); } let callState; if (this.state.currentCall && this.state.incomingCall && this.state.incomingCall === this.state.currentCall) { - utils.timestampedLog('We have an incoming call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); + //utils.timestampedLog('We have an incoming call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); callState = this.state.currentCall.state; } else if (this.state.incomingCall) { - utils.timestampedLog('We have an incoming call:', this.state.incomingCall ? (this.state.incomingCall.id + ' ' + this.state.incomingCall.state): 'None'); + //utils.timestampedLog('We have an incoming call:', this.state.incomingCall ? (this.state.incomingCall.id + ' ' + this.state.incomingCall.state): 'None'); callState = this.state.incomingCall.state; } else if (this.state.currentCall) { - utils.timestampedLog('We have an outgoing call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); + //utils.timestampedLog('We have an outgoing call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); callState = this.state.currentCall.state; + } else if (this.state.outgoingCallUUID) { + //utils.timestampedLog('We have a pending outgoing call:', this.state.outgoingCallUUID); } else { //utils.timestampedLog('We have no calls'); if (this.state.appState === 'background' && this.state.connection && this.state.connection.state === 'ready') { this.shutdownActions(this.state.appState); } } this._callKeepManager.heartbeat(); if (callState === 'established' || callState === 'established') { if (this.state.isConference) { - this.changeRoute('/conference'); + this.changeRoute('/conference', 'correct call state'); } else { - this.changeRoute('/call'); + this.changeRoute('/call', 'correct call state'); } } } stopRingback() { - utils.timestampedLog('Stop ringback'); + //utils.timestampedLog('Stop ringback'); InCallManager.stopRingback(); } resetGoToReadyTimer() { if (this.goToReadyTimer !== null) { clearTimeout(this.goToReadyTimer); this.goToReadyTimer = null; } } callStateChanged(oldState, newState, data) { if (!this._loaded) { return; } // outgoing accepted: null -> progress -> accepted -> established -> terminated // outgoing accepted: null -> progress -> established -> accepted -> terminated (with early media) // incoming accepted: null -> incoming -> accepted -> established -> terminated // 2nd incoming call is automatically rejected by sylkrtc library /* utils.timestampedLog('---currentCall start:', this.state.currentCall); utils.timestampedLog('---incomingCall start:', this.state.incomingCall); */ let call = this._callKeepManager._calls.get(data.id); if (!call) { utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager'); console.log(data); return; } let callUUID = call.id; - utils.timestampedLog('Websocket call', call.direction, callUUID, 'state change:', oldState, '->', newState); + utils.timestampedLog('Call', callUUID, 'state change:', oldState, '->', newState); if (newState === 'established' || newState === 'accepted') { // restore the correct UI state if it has transitioned illegally to /ready state if (call.hasOwnProperty('_participants')) { - this.changeRoute('/conference'); + this.changeRoute('/conference', 'correct call state'); } else { - this.changeRoute('/call'); + this.changeRoute('/call', 'correct call state'); } } let newCurrentCall; let newincomingCall; let direction = call.direction; let hasVideo = false; let mediaType = 'audio'; let tracks; let readyDelay = 4000; if (this.state.incomingCall && this.state.currentCall) { this.startedByPush = false; if (this.state.incomingCall != this.state.currentCall) { - utils.timestampedLog('Call state changed: We have two calls'); + //utils.timestampedLog('Call state changed: We have two calls'); } else { - utils.timestampedLog('Call state changed: we have two calls the same'); + //utils.timestampedLog('Call state changed: we have two calls the same'); } if (newState === 'terminated') { if (this.state.incomingCall == this.state.currentCall) { - utils.timestampedLog('Call state changed:', 'incoming call is the current call'); + //utils.timestampedLog('Call state changed:', 'incoming call is the current call'); newCurrentCall = null; newincomingCall = null; } if (this.state.incomingCall.id === call.id) { if (oldState === 'incoming') { - utils.timestampedLog('Call state changed:', 'incoming call must be cancelled'); + //utils.timestampedLog('Call state changed:', 'incoming call must be cancelled'); this.hideInternalAlertPanel(); } if (oldState === 'established' || oldState === 'accepted') { - utils.timestampedLog('Call state changed:', 'incoming call ended'); + //utils.timestampedLog('Call state changed:', 'incoming call ended'); this.hideInternalAlertPanel(); } // new call must be cancelled newincomingCall = null; newCurrentCall = this.state.currentCall; } if (this.state.currentCall != this.state.incomingCall && this.state.currentCall.id === call.id) { if (oldState === 'established' || newState === 'accepted') { - utils.timestampedLog('Call state changed:', 'outgoing call must be hangup'); + //utils.timestampedLog('Call state changed:', 'outgoing call must be hangup'); // old call must be closed } newCurrentCall = null; newincomingCall = this.state.incomingCall; } } else if (newState === 'accepted') { if (this.state.incomingCall === this.state.currentCall) { newCurrentCall = this.state.incomingCall; newincomingCall = this.state.incomingCall; } else { newCurrentCall = this.state.currentCall; } } else if (newState === 'established') { if (this.state.incomingCall === this.state.currentCall) { - utils.timestampedLog("Incoming call media started"); + //utils.timestampedLog("Incoming call media started"); newCurrentCall = this.state.incomingCall; newincomingCall = this.state.incomingCall; } else { - utils.timestampedLog("Outgoing call media started"); + //utils.timestampedLog("Outgoing call media started"); newCurrentCall = this.state.currentCall; } } else { - utils.timestampedLog('Call state changed:', 'We have two calls in unclear state'); + //utils.timestampedLog('Call state changed:', 'We have two calls in unclear state'); } } else if (this.state.incomingCall) { this.startedByPush = false; - utils.timestampedLog('Call state changed: We have one incoming call'); + this._callKeepManager.backToForeground(); + //utils.timestampedLog('Call state changed: We have one incoming call'); newincomingCall = this.state.incomingCall; newCurrentCall = this.state.incomingCall; if (this.state.incomingCall.id === call.id) { if (newState === 'terminated') { - utils.timestampedLog("Incoming call was cancelled"); + //utils.timestampedLog("Incoming call was cancelled"); this.setState({showIncomingModal: false}); this.hideInternalAlertPanel(); newincomingCall = null; newCurrentCall = null; readyDelay = 10; } else if (newState === 'accepted') { - utils.timestampedLog("Incoming call was accepted"); + //utils.timestampedLog("Incoming call was accepted"); this.hideInternalAlertPanel(); } else if (newState === 'established') { - utils.timestampedLog("Incoming call media started"); + //utils.timestampedLog("Incoming call media started"); this.hideInternalAlertPanel(); } } } else if (this.state.currentCall) { - utils.timestampedLog('Call state changed: We have one current call'); + //utils.timestampedLog('Call state changed: We have one current call'); newCurrentCall = newState === 'terminated' ? null : call; newincomingCall = null; if (newState !== 'terminated') { this.setState({reconnectingCall: false}); } } else { newincomingCall = null; newCurrentCall = null; } /* utils.timestampedLog('---currentCall:', newCurrentCall); utils.timestampedLog('---incomingCall:', newincomingCall); */ switch (newState) { case 'progress': this._callKeepManager.backToForeground(); this.resetGoToReadyTimer(); if (!this.state.isConference){ if (Platform.OS === 'android') { tracks = call.getLocalStreams()[0].getVideoTracks(); hasVideo = (tracks && tracks.length > 0) ? true : false; } - utils.timestampedLog('Play ringback tone'); + //utils.timestampedLog('Play ringback tone'); InCallManager.startRingback('_BUNDLE_'); } break; case 'established': this.resetGoToReadyTimer(); if (direction === 'outgoing') { + this._callKeepManager.setCurrentCallActive(callUUID); this.stopRingback(); } tracks = call.getLocalStreams()[0].getVideoTracks(); mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio'; //utils.timestampedLog('Start InCall manager:', mediaType); InCallManager.start({media: mediaType}); if (mediaType === 'video') { this.speakerphoneOn(); } else { this.speakerphoneOff(); } - this._callKeepManager.setCurrentCallActive(callUUID); - break; case 'accepted': this.resetGoToReadyTimer(); if (direction === 'outgoing') { this.stopRingback(); } break; case 'terminated': this._terminatedCalls.set(callUUID, true); if (this.state.incomingCall && this.state.incomingCall.id === call.id) { newincomingCall = null; } if (this.state.currentCall && this.state.currentCall.id === call.id) { newCurrentCall = null; } let callSuccesfull = false; let reason = data.reason; let play_busy_tone = !this.state.isConference; let CALLKEEP_REASON; //utils.timestampedLog('Call state changed:', 'call', callUUID, 'terminated reason:', reason); if (!reason || reason.match(/200/)) { if (oldState === 'progress' && direction === 'outgoing') { reason = 'Cancelled'; play_busy_tone = false; } else if (oldState === 'incoming') { reason = 'Cancelled'; play_busy_tone = false; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else { reason = 'Hangup'; callSuccesfull = true; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; } } else if (reason.match(/402/)) { reason = 'Payment required'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/403/)) { reason = '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; if (direction === 'outgoing') { play_busy_tone = false; } } else if (reason.match(/487/)) { reason = 'Cancelled'; play_busy_tone = false; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; } else if (reason.match(/488/)) { reason = 'Unacceptable media'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/5\d\d/)) { reason = 'Server failure'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/904/)) { // Sofia SIP: WAT reason = 'Wrong account or password'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else { reason = 'Connection failed'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } if (play_busy_tone) { this.playBusyTone(); } this.stopRingback(); this._callKeepManager.terminateCall(callUUID); this._callKeepManager.endCall(callUUID, CALLKEEP_REASON); if (this.state.currentCall === null) { - utils.timestampedLog('Call state changed:', 'Turn off speakerphone'); + //utils.timestampedLog('Call state changed:', 'Turn off speakerphone'); this.speakerphoneOff(); } if (play_busy_tone && oldState !== 'established' && direction === 'outgoing') { this._notificationCenter.postSystemNotification('Call ended:', {body: reason, timeout: callSuccesfull ? 5 : 10}); } this.updateHistoryEntry(callUUID); if (newState === 'established' || newState === 'accepted') { // restore the correct UI state if it has transitioned illegally to /ready state if (call.hasOwnProperty('_participants')) { - this.changeRoute('/conference'); + this.changeRoute('/conference', 'correct call state'); } else { - this.changeRoute('/call'); + this.changeRoute('/call', 'correct call state'); } } break; default: break; } /* utils.timestampedLog('---currentCall end:', newCurrentCall); utils.timestampedLog('---incomingCall end:', newincomingCall); */ this.setState({ currentCall: newCurrentCall, incomingCall: newincomingCall }); if (this.state.currentCall || this.state.incomingCall) { //console.log('New call state:'); } else { if (!this.state.reconnectingCall) { - utils.timestampedLog('Will go to ready in 4 seconds'); + //utils.timestampedLog('Will go to ready in 4 seconds'); this.goToReadyTimer = setTimeout(() => { - this.changeRoute('/ready', 'no more calls'); + this.changeRoute('/ready', 'no_more_calls'); + }, readyDelay); } } if (this.state.currentCall) { //console.log('Current:', this.state.currentCall.id); } if (this.state.incomingCall) { //console.log('Incoming:', this.state.incomingCall.id); } } handleRegistration(accountId, password, remember=true) { - utils.timestampedLog('Websocket handle registration for', accountId); + if (this.state.account !== null) { + //utils.timestampedLog('We are already registered with', accountId); + return; + } if (this.startedByPush) { - this.changeRoute('/call'); + //this.changeRoute('/call', 'started by push'); } this.setState({ accountId : accountId, password : password, mode : remember ? MODE_NORMAL : MODE_PRIVATE, loading : 'Connecting...' }); if (this.state.connection === null) { const userAgent = 'Sylk Mobile'; if (this.state.phoneNumber) { console.log('Phone number:', this.state.phoneNumber); } let connection = sylkrtc.createConnection({server: config.wsServer, userAgent: {name: userAgent, version: version}}); utils.timestampedLog('Create Websocket connection', Object.id(connection)); connection.on('stateChanged', this.connectionStateChanged); this.setState({connection: connection}); + if (this.startedByPush) { + this._callKeepManager.backToForeground(); + } + } else { - utils.timestampedLog('Websocket connection active, try to register'); - this.processRegistration(accountId, password, ''); + if (this.state.connection.state === 'ready') { + utils.timestampedLog('Websocket handle registration for', accountId); + this.processRegistration(accountId, password, ''); + } } } processRegistration(accountId, password, displayName) { utils.timestampedLog('Process registration for', accountId); + this.updateServerHistory(); if (!this.state.connection) { console.log('Error: Cannot process registration without connection'); return; } if (this.state.account !== null && this.state.connection) { logger.debug('We already have an account, removing it'); this.state.connection.removeAccount(this.state.account, (error) => { this.setState({registrationState: null, registrationKeepalive: false}); } ); } const options = { account: accountId, password: password, displayName: displayName }; this.registrationFailureTimer = setTimeout(this.showRegisterFailure, 10000, 'Register timeout'); if (this.state.connection._accounts.has(options.account)) { return; } const account = this.state.connection.addAccount(options, (error, account) => { if (!error) { account.on('outgoingCall', this.outgoingCall); account.on('conferenceCall', this.outgoingConference); switch (this.state.mode) { case MODE_PRIVATE: case MODE_NORMAL: account.on('registrationStateChanged', this.registrationStateChanged); account.on('incomingCall', this.incomingCallFromWebSocket); account.on('missedCall', this.missedCall); account.on('conferenceInvite', this.conferenceInviteFromWebSocket); this.setState({account: account}); this._sendPushToken(); account.register(); logger.debug(this.state.mode); if (this.state.mode !== MODE_PRIVATE) { storage.set('account', { accountId: this.state.accountId, password: this.state.password }); } else { // Wipe storage if private login //storage.remove('account'); // lets try this out // history.clear().then(() => { // this.setState({history: []}); // }); } break; case MODE_GUEST_CALL: this.setState({account: account, loading: null, registrationState: 'registered'}); logger.debug(`${accountId} (guest) signed in`); // Start the call immediately, this is call started with "Call by URI" this.startGuestCall(this.state.targetUri, {audio: true, video: true}); break; case MODE_GUEST_CONFERENCE: this.setState({account: account, loading: null, registrationState: 'registered'}); logger.debug(`${accountId} (conference guest) signed in`); // Start the call immediately, this is call started with "Conference by URI" this.startGuestConference(this.state.targetUri); break; default: logger.debug(`Unknown mode: ${this.state.mode}`); break; } } else { this.showRegisterFailure(408); } }); - } setDevice(device) { const oldDevices = Object.assign({}, this.state.devices); if (device.kind === 'videoinput') { oldDevices['camera'] = device; } else if (device.kind === 'audioinput') { oldDevices['mic'] = device; } this.setState({devices: oldDevices}); storage.set('devices', oldDevices); sylkrtc.utils.closeMediaStream(this.state.localMedia); this.getLocalMedia(); } getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) { // eslint-disable-line space-infix-ops let callType = mediaConstraints.video ? 'video': 'audio'; utils.timestampedLog('Get local media for', callType); const constraints = Object.assign({}, mediaConstraints); if (constraints.video === true) { if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE)) { constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; // TODO: remove this, workaround so at least safari works when joining a video conference } else if ((nextRoute === '/conference' || this.state.mode === MODE_GUEST_CONFERENCE) && isSafari) { constraints.video = false; } else { // ask for 720p video constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; } } logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints); navigator.mediaDevices.enumerateDevices() .then((devices) => { devices.forEach((device) => { //console.log(device); if ('video' in constraints && 'camera' in this.state.devices) { if (constraints.video && constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) { constraints.video.deviceId = { exact: device.deviceId }; } } if ('mic' in this.state.devices) { if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) { // constraints.audio = { // deviceId: { // exact: device.deviceId // } // }; } } }); }) .catch((error) => { utils.timestampedLog('Error: device enumeration failed:', error); }) .then(() => { return navigator.mediaDevices.getUserMedia(constraints) }) .then((localStream) => { clearTimeout(this.loadScreenTimer); - utils.timestampedLog('Got local media done'); - this.setState({status: null, loading: null, localMedia: localStream}); + utils.timestampedLog('Got local media stream:', localStream); + this.setState({localMedia: localStream}); if (nextRoute !== null) { this.changeRoute(nextRoute); } }) .catch((error) => { utils.timestampedLog('Access to local media failed, trying audio only', error); navigator.mediaDevices.getUserMedia({ audio: true, video: false }) .then((localStream) => { clearTimeout(this.loadScreenTimer); - /* - logger.debug('Audio only media, but video was requested, creating generated video track'); - const generatedVideoTrack = utils.generateVideoTrack(localStream); - localStream.addTrack(generatedVideoTrack); - utils.timestampedLog('Next route', nextRoute); - - this.setState({status: null, loading: null, localMedia: localStream, generatedVideoTrack: true}); - */ - if (nextRoute !== null) { - this.changeRoute(nextRoute); + this.changeRoute(nextRoute, 'local media aquired'); } }) .catch((error) => { utils.timestampedLog('Access to local media failed:', error); clearTimeout(this.loadScreenTimer); this._notificationCenter.postSystemNotification("Can't access camera or microphone", {timeout: 10}); this.setState({ loading: null }); - this.changeRoute('/ready', 'media failure'); + + this.changeRoute('/ready', 'local media failure'); }); }); } + getConnection() { + return this.state.connection ? Object.id(this.state.connection): null; + } + callKeepStartConference(targetUri, options={audio: true, video: true, participants: null}) { if (!targetUri) { return; } this.resetGoToReadyTimer(); let callUUID = options.callUUID || uuid.v4(); + this._callKeepManager.setCurrentCallActive(callUUID); + let participants = options.participants || null; this.addHistoryEntry(targetUri, callUUID); this.setState({outgoingCallUUID: callUUID, outgoingMedia: options, reconnectingCall: false, participantsToInvite: participants }); if (participants) { utils.timestampedLog('CallKeep will start conference', callUUID, 'to', targetUri, 'with', participants); } else { utils.timestampedLog('CallKeep will start conference', callUUID, 'to', targetUri); } - this._callKeepManager.backToForeground(); - this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: callUUID}); } callKeepStartCall(targetUri, options) { this.resetGoToReadyTimer(); let callUUID = options.callUUID || uuid.v4(); this.setState({outgoingCallUUID: callUUID, reconnectingCall: false}); utils.timestampedLog('User will start call', callUUID, 'to', targetUri); this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: callUUID}); } startCall(targetUri, options) { this.setState({targetUri: targetUri, isConference: false}); this.getLocalMedia(Object.assign({audio: true, video: options.video}, options), '/call'); } callKeepAcceptCall(callUUID) { // called from user interaction with Old alert panel // options used to be media to accept audio only but native panels do not have this feature utils.timestampedLog('CallKeep will answer call', callUUID); this._callKeepManager.acceptCall(callUUID); this.hideInternalAlertPanel(); } callKeepRejectCall(callUUID) { // called from user interaction with Old alert panel utils.timestampedLog('CallKeep will reject call', callUUID); this._callKeepManager.rejectCall(callUUID); this.hideInternalAlertPanel(); } acceptCall(callUUID) { - utils.timestampedLog('User accepted new call', callUUID, 'on connection', Object.id(this.state.connection)); + utils.timestampedLog('User accepted call', callUUID, 'on connection', Object.id(this.state.connection)); this.hideInternalAlertPanel(); + this._callKeepManager.setCurrentCallActive(callUUID); this.resetGoToReadyTimer(); if (this.state.currentCall) { this.hangupCall(this.state.currentCall.id, 'accept_new_call'); } this.setState({isConference: false}); let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.mediaTypes.video) ? true : false; this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call'); } rejectCall(callUUID) { // called by Call Keep when user rejects call utils.timestampedLog('User rejected call', callUUID); this.hideInternalAlertPanel(); if (!this.state.currentCall) { this.changeRoute('/ready', 'reject call'); } if (this.state.incomingCall && this.state.incomingCall.id === callUUID) { this.state.incomingCall.terminate(); utils.timestampedLog('Sylkrtc reject call', callUUID); } } timeoutCall(callUUID, uri) { utils.timestampedLog('Timeout answering call', callUUID); this.addHistoryEntry(uri, callUUID, direction='received'); this.forceUpdate(); } closeLocalMedia() { if (this.state.localMedia != null) { sylkrtc.utils.closeMediaStream(this.state.localMedia); - utils.timestampedLog('Close local media'); + //utils.timestampedLog('Close local media'); } } hangupCall(callUUID, reason) { utils.timestampedLog('Hangup call', callUUID, 'reason:', reason); let call = this._callKeepManager._calls.get(callUUID); let direction = null; let targetUri = null; if (call) { let direction = call.direction; targetUri = call.remoteIdentity.uri; call.terminate(); } if (this.busyToneInterval) { clearInterval(this.busyToneInterval); this.busyToneInterval = null; } if (reason === 'outgoing_connection_failed') { this.setState({reconnectingCall: true, outgoingCallUUID: uuid.v4()}); return; } if (reason === 'user_cancelled' || reason === 'timeout' || reason === 'stop_preview' || reason === 'user_press_hangup' || reason === 'accept_new_call' || reason === 'timeout' ) { this.changeRoute('/ready', reason); } else { if (reason !== 'escalate_to_conference') { setTimeout(() => { - utils.timestampedLog('Will go to ready in 4 seconds'); + //utils.timestampedLog('Will go to ready in 4 seconds'); this.changeRoute('/ready', 'remote ended'); }, 4000); } } } playBusyTone() { - utils.timestampedLog('Play busy tone'); + //utils.timestampedLog('Play busy tone'); InCallManager.stop({busytone: '_BUNDLE_'}); } callKeepSendDtmf(digits) { utils.timestampedLog('Send DTMF', digits); if (this.state.currentCall) { this._callKeepManager.sendDTMF(this.state.currentCall.id, digits); } } toggleMute(callUUID, mute) { utils.timestampedLog('Toggle mute for call', callUUID, ':', mute); this._callKeepManager.setMutedCall(callUUID, mute); this.setState({muted: mute}); } toggleSpeakerPhone() { if (this.state.speakerPhoneEnabled === true) { this.speakerphoneOff(); } else { this.speakerphoneOn(); } } speakerphoneOn() { - utils.timestampedLog('Speakerphone On'); + //utils.timestampedLog('Speakerphone On'); this.setState({speakerPhoneEnabled: true}); InCallManager.setForceSpeakerphoneOn(true); } speakerphoneOff() { - utils.timestampedLog('Speakerphone Off'); + //utils.timestampedLog('Speakerphone Off'); this.setState({speakerPhoneEnabled: false}); InCallManager.setForceSpeakerphoneOn(false); } startGuestConference(targetUri) { this.setState({targetUri: targetUri}); this.getLocalMedia({audio: true, video: true}); } outgoingCall(call) { // called by sylrtc.js when an outgoing call starts const localStreams = call.getLocalStreams(); let mediaType = 'audio'; let hasVideo = false; if (localStreams.length > 0) { const localStream = call.getLocalStreams()[0]; mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio'; hasVideo = localStream.getVideoTracks().length > 0 ? true : false; } this._callKeepManager.startOutgoingCall(call.id, call.remoteIdentity.uri, hasVideo); utils.timestampedLog('Outgoing', mediaType, 'call', call.id, 'started to', call.remoteIdentity.uri); this._callKeepManager.addWebsocketCall(call); call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); } outgoingConference(call) { // called by sylrtc.js when an outgoing conference starts const localStreams = call.getLocalStreams(); let mediaType = 'audio'; let hasVideo = false; if (localStreams.length > 0) { const localStream = call.getLocalStreams()[0]; mediaType = localStream.getVideoTracks().length > 0 ? 'video' : 'audio'; hasVideo = localStream.getVideoTracks().length > 0 ? true : false; } utils.timestampedLog('Outgoing', mediaType, 'conference', call.id, 'started to', call.remoteIdentity.uri); this._callKeepManager.addWebsocketCall(call); call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); } _onLocalNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); - utils.timestampedLog('Handle local iOS push notification: ', notificationContent); + utils.timestampedLog('Handle local iOS PUSH notification: ', notificationContent); } _onNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); const event = notificationContent['event']; const callUUID = notificationContent['session-id']; const to = notificationContent['to_uri']; const from = notificationContent['from_uri']; if (event === 'incoming_session') { - utils.timestampedLog('Incoming call push mobile notification for call', callUUID); + utils.timestampedLog('Incoming call PUSH mobile notification for call', callUUID); this.incomingCallFromPush(callUUID, from); - this.setState({targetUri: from}); this.startedByPush = true; } else if (event === 'incoming_conference_request') { - utils.timestampedLog('Incoming conference push mobile notification for call', callUUID); + utils.timestampedLog('Incoming conference PUSH mobile notification for call', callUUID); this.incomingConference(callUUID, to, from); this.startedByPush = true; } else if (event === 'cancel') { - utils.timestampedLog('Cancel push mobile notification for call', callUUID); + utils.timestampedLog('Cancel PUSH mobile notification for call', callUUID); this.cancelIncomingCall(callUUID); VoipPushNotification.presentLocalNotification({alertBody:'Call cancelled'}); } /* if (notificationContent['event'] === 'incoming_session') { VoipPushNotification.presentLocalNotification({ alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name'] }); } */ if (VoipPushNotification.wakeupByPush) { utils.timestampedLog('We wake up by push notification'); VoipPushNotification.wakeupByPush = false; VoipPushNotification.onVoipNotificationCompleted(callUUID); } } - async incomingConference(callUUID, to, from) { + incomingConference(callUUID, to, from) { + this._callKeepManager.handleConference(callUUID, to, from); + } + + async incomingConferenceOld(callUUID, to, from) { utils.timestampedLog('Handle incoming conference', callUUID, 'when ready'); var n = 0; - let wait_interval = 15; + let wait_interval = 20; 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'); // answer here this._callKeepManager.handleConference(callUUID, to, from); return; } if (n === wait_interval - 1) { - utils.timestampedLog('Terminating call', callUUID, 'that did not start yet'); + utils.timestampedLog('Cancelling conference', callUUID,); this.cancelIncomingCall(callUUID); } n++; } } startConference(targetUri, options={audio: true, video: true, participants: []}) { 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('Escalate call to conference', uri, 'with participants', participants); if (this.state.currentCall) { this.hangupCall(this.state.currentCall.id, 'escalate_to_conference'); this.setState({currentCall: null}); } if (this.state.incomingCall) { this.hangupCall(this.state.incomingCall.id, 'escalate_to_conference'); } this.callKeepStartConference(uri, {audio: true, video: true, participants: participants}); } conferenceInviteFromWebSocket(data) { // comes from web socket utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room); this._notificationCenter.postSystemNotification('Expecting conference invite', {body: `from ${data.originator.displayName || data.originator.uri}`, timeout: 5, silent: false}); } + updateLinkingURL = (event) => { + // this handles the use case where the app is running in the background and is activated by the listener... + console.log('Updated Linking url', event.url); + this.eventFromUrl(event.url); + } + eventFromUrl(url) { utils.timestampedLog('Received event from external URL:', url); try { let direction; let event; let callUUID; - let uri; + let from; + let to; var url_parts = url.split("/"); let scheme = url_parts[0]; if (scheme === 'sylk:') { //sylk://outgoing/call/callUUID/to/displayName - from system dialer/history + //sylk://incoming/conference/callUUID/from/to - when Android is asleep //sylk://incoming/call/callUUID/from/to - when Android is asleep //sylk://cancel/call/callUUID/from/to - when Android is asleep direction = url_parts[2]; event = url_parts[3]; callUUID = url_parts[4]; - uri = url_parts[5]; + from = url_parts[5]; + to = url_parts[6]; } else { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link direction = 'outgoing'; event = url_parts[3]; callUUID = uuid.v4(); - uri = url_parts[4]; + from = url_parts[4]; - if (uri.indexOf('@') === -1 && event === 'conference') { - uri = url_parts[4] + '@' + config.defaultConferenceDomain; - } else if (uri.indexOf('@') === -1 && event === 'call') { - uri = url_parts[4] + '@' + this.state.defaultDomain; + if (from.indexOf('@') === -1 && event === 'conference') { + from = url_parts[4] + '@' + config.defaultConferenceDomain; + } else if (from.indexOf('@') === -1 && event === 'call') { + from = url_parts[4] + '@' + this.state.defaultDomain; } } - this.setState({targetUri: uri}); + this.setState({targetUri: from}); this.startedByPush = true; - if (direction === 'outgoing' && event === 'conference' && uri) { - this.callKeepStartConference(uri); + if (direction === 'outgoing' && event === 'conference' && from) { + this.callKeepStartConference(to); + + } else if (direction === 'incoming' && event === 'conference' && from) { + this.incomingConference(callUUID, to, from); - } else if (direction === 'outgoing' && event === 'call' && uri) { - this.callKeepStartCall(uri, {audio: true, video: false, callUUID: callUUID}); + } else if (direction === 'outgoing' && event === 'call' && from) { + this.callKeepStartCall(from, {audio: true, video: false, callUUID: callUUID}); - } else if (direction === 'incoming' && uri) { - this.incomingCallFromPush(callUUID, uri, true); + } else if (direction === 'incoming' && from) { + this.incomingCallFromPush(callUUID, from, true); - } else if (direction === 'cancel' && uri) { + } else if (direction === 'cancel' && callUUID) { this.cancelIncomingCall(callUUID); } else { utils.timestampedLog('Unclear URL structure'); } } catch (err) { utils.timestampedLog('Error parsing URL', url, ":", err); } } autoRejectIncomingCall(callUUID, from) { //utils.timestampedLog('Check auto reject call from', from); if (this.state.blockedUris && this.state.blockedUris.indexOf(from) > -1) { utils.timestampedLog('Reject call', callUUID, 'from blocked URI', from); this._callKeepManager.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Call rejected', {body: `from ${from}`, timeout: 5000, silent: true}); return true; } if (this.state.currentCall && this.state.incomingCall && this.state.currentCall === this.state.incomingCall && this.state.incomingCall.id !== callUUID) { utils.timestampedLog('Reject second incoming call'); this._callKeepManager.rejectCall(callUUID); } if (this.state.account && from === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri === from) { utils.timestampedLog('Reject call to myself', callUUID); this._callKeepManager.rejectCall(callUUID); return true; } if (this._terminatedCalls.has(callUUID)) { utils.timestampedLog('Reject call already terminated', callUUID); this.cancelIncomingCall(callUUID); return true; } if (this.state.currentCall && this.state.isConference) { utils.timestampedLog('Reject call while in a conference', callUUID); this._notificationCenter.postSystemNotification('Missed call from', {body: from, timeout: 5}); this._callKeepManager.rejectCall(callUUID); return true; } if (this.state.currentCall && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri !== from) { utils.timestampedLog('Reject call while outgoing in progress', callUUID); this._callKeepManager.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Missed call from', {body: from, timeout: 5}); return true; } return false; } autoAcceptIncomingCall(callUUID, from) { // TODO: handle ping pong where we call each other back if (this.state.currentCall && this.state.currentCall.direction === 'outgoing' && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri === from) { this.hangupCall(this.state.currentCall.id, 'accept_new_call'); this.setState({currentCall: null}); utils.timestampedLog('Auto accept incoming call from same address I am calling', callUUID); return true; } return false; } incomingCallFromPush(callUUID, from, force) { utils.timestampedLog('Handle incoming push call', callUUID, 'from', from); if (this.autoRejectIncomingCall(callUUID, from)) { return; } //this.showInternalAlertPanel(); if (this.autoAcceptIncomingCall(callUUID, from)) { return; } + this.setState({targetUri: from}); + this.changeRoute('/call'); + let skipNativePanel = false; if (!this._callKeepManager._calls.get(callUUID) || (this.state.currentCall && this.state.currentCall.direction === 'outgoing')) { this._notificationCenter.postSystemNotification('Incoming call', {body: `from ${from}`, timeout: 15, silent: false}); if (Platform.OS === 'android' && this.state.appState === 'foreground') { skipNativePanel = true; } } this._callKeepManager.incomingCallFromPush(callUUID, from, force, skipNativePanel); } incomingCallFromWebSocket(call, mediaTypes) { this._callKeepManager.addWebsocketCall(call); const callUUID = call.id; const from = call.remoteIdentity.uri; utils.timestampedLog('Handle incoming web socket call', callUUID, 'from', from, 'on connection', Object.id(this.state.connection)); // because of limitation in Sofia stack, we cannot have more then two calls at a time // we can have one outgoing call and one incoming call but not two incoming calls // we cannot have two incoming calls, second one is automatically rejected by sylkrtc.js if (this.autoRejectIncomingCall(callUUID, from)) { return; } const autoAccept = this.autoAcceptIncomingCall(callUUID, from); call.mediaTypes = mediaTypes; call.on('stateChanged', this.callStateChanged); this.setState({incomingCall: call}); let skipNativePanel = false; if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') { if (Platform.OS === 'android') { this.showInternalAlertPanel(); skipNativePanel = true; } } this._callKeepManager.incomingCallFromWebSocket(call, autoAccept, skipNativePanel); } 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}); } if (this.route === '/ready') { this.updateServerHistory() } } updateServerHistory() { - if (this.state.connection && this.state.connection.state === 'ready') { - this.setState({refreshHistory: !this.state.refreshHistory}); - } + //utils.timestampedLog('Update server history'); + this.setState({refreshHistory: !this.state.refreshHistory}); } startPreview() { this.getLocalMedia({audio: true, video: true}, '/preview'); } updateHistoryEntry(callUUID) { let newHistory = this.state.localHistory; var historyItem = this.findObjectByKey(newHistory, 'sessionId', callUUID); if (historyItem) { let current_datetime = new Date(); let stopTime = current_datetime.getFullYear() + "-" + utils.appendLeadingZeroes(current_datetime.getMonth() + 1) + "-" + utils.appendLeadingZeroes(current_datetime.getDate()) + " " + utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds()); historyItem.stopTime = stopTime; var diff = current_datetime.getTime() - historyItem.startTimeObject.getTime(); historyItem.duration = parseInt(diff/1000); delete historyItem['startTimeObject']; if (this._historyConferenceParticipants.has(callUUID)) { historyItem.participants = this._historyConferenceParticipants.get(callUUID); } else { historyItem.participants = []; } //console.log('Save history', historyItem); this.setState({localHistory: newHistory}); storage.set('history', newHistory); } } setFavoriteUri(uri) { let favoriteUris = this.state.favoriteUris; let idx = favoriteUris.indexOf(uri); let ret; if (idx === -1) { favoriteUris.push(uri); ret = true; } else { let removed = favoriteUris.splice(idx, 1); ret = false; } storage.set('favoriteUris', favoriteUris); this.setState({favoriteUris: favoriteUris}); return ret; } setBlockedUri(uri) { let blockedUris = this.state.blockedUris; console.log('Old blocked Uris:', blockedUris); let ret; let idx = blockedUris.indexOf(uri); console.log('idx', idx); if (idx === -1) { blockedUris.push(uri); ret = true; } else { let removed = blockedUris.splice(idx, 1); console.log('Removed', removed); ret = false; } console.log('New blocked Uris:', blockedUris); storage.set('blockedUris', blockedUris); this.setState({blockedUris: blockedUris}); return ret; } saveParticipant(callUUID, room, uri) { console.log('Save participant', uri, 'for conference', room); if (this._historyConferenceParticipants.has(callUUID)) { let old_participants = this._historyConferenceParticipants.get(callUUID); if (old_participants.indexOf(uri) === -1) { old_participants.push(uri); } } else { let new_participants = [uri]; this._historyConferenceParticipants.set(callUUID, new_participants); } if (!this.myParticipants) { this.myParticipants = new Object(); } if (this.myParticipants.hasOwnProperty(room)) { let old_uris = this.myParticipants[room]; if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { this.myParticipants[room].push(uri); } } else { let new_uris = []; if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { new_uris.push(uri); } if (new_uris) { this.myParticipants[room] = new_uris; } } storage.set('myParticipants', this.myParticipants); } saveInvitedParties(room, uris) { room = room.split('@')[0]; console.log('Save invited parties', uris, 'for room', room); if (!this.myInvitedParties) { this.myInvitedParties = new Object(); } if (this.myInvitedParties.hasOwnProperty(room)) { let old_uris = this.myInvitedParties[room]; uris.forEach((uri) => { if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { this.myInvitedParties[room].push(uri); } }); } else { let new_uris = []; uris.forEach((uri) => { if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { new_uris.push(uri); } }); if (new_uris) { this.myInvitedParties[room] = new_uris; } } storage.set('myInvitedParties', this.myInvitedParties); this.setState({myInvitedParties: this.myInvitedParties}); } deleteHistoryEntry(uri) { let history = this.state.localHistory; for (var i = history.length - 1; i >= 0; --i) { if (history[i].remoteParty === uri) { history.splice(i,1); } } storage.set('history', history); this.setState({localHistory: history}); } 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: uri.split('@')[0], sessionId: callUUID, startTime: startTime, stopTime: startTime, startTimeObject: current_datetime, duration: 0, tags: ['history', 'local'] }; const historyItem = Object.assign({}, item); - console.log('Added history item', historyItem); let newHistory = this.state.localHistory; newHistory.push(historyItem); this.setState({localHistory: newHistory}); storage.set('history', newHistory); } } - // checkRoute(nextPath, navigation, match) { - // if (nextPath !== this.prevPath) { - // logger.debug(`Transition from ${this.prevPath} to ${nextPath}`); - - // - // // Press back in ready after a login, prevent initial navigation - // // don't deny if there is no registrationState (connection fail) - // if (this.prevPath === '/ready' && nextPath === '/login' && this.state.registrationState !== null) { - // logger.debug('Transition denied redirecting to /logout'); - // this.changeRoute('/logout'); - // return false; - - // // Press back in ready after a call - // } else if ((nextPath === '/call' || nextPath === '/conference') && this.state.localMedia === null && this.state.registrationState === 'registered') { - // return false; - - // // Press back from within a call/conference, don't navigate terminate the call and - // // let termination take care of navigating - // } else if (nextPath === '/ready' && this.state.registrationState === 'registered' && this.state.currentCall !== null) { - // this.state.currentCall.terminate(); - // return false; - - // // Guest call ended, needed to logout and display msg and logout - // } else if (nextPath === '/ready' && (this.state.mode === MODE_GUEST_CALL || this.state.mode === MODE_GUEST_CONFERENCE)) { - // this.changeRoute('/logout'); - // this.forceUpdate(); - // } - // } - // this.prevPath = nextPath; - // } - render() { //utils.timestampedLog('Render main app'); let footerBox = ; let extraStyles = {}; if (this.state.localMedia || this.state.registrationState === 'registered') { footerBox = null; } return ( this.setState({ Width_Layout : event.nativeEvent.layout.width, Height_Layout : event.nativeEvent.layout.height }, ()=> this._detectOrientation())}> ); } notFound(match) { const status = { title : '404', message : 'Oops, the page your looking for can\'t found', level : 'danger', width : 'large' } return ( ); } saveHistoryForLater(history) { //console.log('Cache history for later', history.length) this.cachedHistory = history; storage.set('cachedHistory', history); } ready() { return ( ); } preview() { return ( ); } call() { let call = this.state.currentCall || this.state.incomingCall; return ( ) } conference() { let _previousParticipants = new Set(); /* if (this.myParticipants) { let room = this.state.targetUri.split('@')[0]; if (this.myParticipants.hasOwnProperty(room)) { let uris = this.myParticipants[room]; if (uris) { uris.forEach((uri) => { if (uri.search(this.state.defaultDomain) > -1) { let user = uri.split('@')[0]; _previousParticipants.add(user); } else { _previousParticipants.add(uri); } }); } } } */ if (this.myInvitedParties) { let room = this.state.targetUri.split('@')[0]; if (this.myInvitedParties.hasOwnProperty(room)) { let uris = this.myInvitedParties[room]; if (uris) { uris.forEach((uri) => { if (uri.search(this.state.defaultDomain) > -1) { let user = uri.split('@')[0]; _previousParticipants.add(user); } else { _previousParticipants.add(uri); } }); } } } let previousParticipants = Array.from(_previousParticipants); return ( ) } conferenceByUri(urlParameters) { const targetUri = utils.normalizeUri(urlParameters.targetUri, config.defaultConferenceDomain); const idx = targetUri.indexOf('@'); const uri = {}; const pattern = /^[A-Za-z0-9\-\_]+$/g; uri.user = targetUri.substring(0, idx); // check if the uri.user is valid if (!pattern.test(uri.user)) { const status = { title : 'Invalid conference', message : `Oops, the conference ID is invalid: ${targetUri}`, level : 'danger', width : 'large' } return ( ); } return ( ); } login() { let registerBox; let statusBox; if (this.state.status !== null) { statusBox = ( ); } if (this.state.registrationState !== 'registered') { registerBox = ( ); } return ( {registerBox} {statusBox} ); } logout() { this._callKeepManager.setAvailable(false); if (this.state.registrationState !== null && (this.state.mode === MODE_NORMAL || this.state.mode === MODE_PRIVATE)) { this.state.account.unregister(); } if (this.state.account !== null) { this.state.connection.removeAccount(this.state.account, (error) => { if (error) { logger.debug(error); } }); } storage.set('account', {accountId: this.state.accountId, password: ''}); this.serverHistory = []; this.setState({account: null, registrationState: null, registrationKeepalive: false, status: null, history: [], localHistory: [], cachedHistory: [], defaultDomain: config.defaultDomain }); this.changeRoute('/login'); return null; } main() { return null; } } export default Sylk; diff --git a/app/components/Call.js b/app/components/Call.js index 27c02ff..d6e4e1c 100644 --- a/app/components/Call.js +++ b/app/components/Call.js @@ -1,507 +1,516 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; import assert from 'assert'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import uuid from 'react-native-uuid'; import AudioCallBox from './AudioCallBox'; import LocalMedia from './LocalMedia'; import VideoBox from './VideoBox'; import config from '../config'; import utils from '../utils'; class Call extends Component { constructor(props) { super(props); autoBind(this); this.defaultWaitInterval = 60; // until we can connect or reconnect this.waitCounter = 0; this.waitInterval = this.defaultWaitInterval; let callUUID; let remoteUri = ''; let remoteDisplayName = ''; let callState = null; let direction = null; let callEnded = false; this.mediaIsPlaying = false; this.ended = false; + this.answering = false; if (this.props.call) { // If current call is available on mount we must have incoming this.props.call.on('stateChanged', this.callStateChanged); remoteUri = this.props.call.remoteIdentity.uri; remoteDisplayName = this.props.call.remoteIdentity.displayName || this.props.call.remoteIdentity.uri; direction = this.props.call.direction; callUUID = this.props.call.id; } else { remoteUri = this.props.targetUri; remoteDisplayName = this.props.targetUri; callUUID = this.props.callUUID; direction = this.props.callUUID ? 'outgoing' : null; } if (this.props.connection) { this.props.connection.on('stateChanged', this.connectionStateChanged); } let audioOnly = false; if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) { audioOnly = true; } this.state = { call: this.props.call, targetUri: this.props.targetUri, audioOnly: audioOnly, boo: false, remoteUri: remoteUri, remoteDisplayName: remoteDisplayName, localMedia: this.props.localMedia, connection: this.props.connection, accountId: this.props.account ? this.props.account.id : null, callState: callState, direction: direction, callUUID: callUUID, reconnectingCall: this.props.reconnectingCall } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { // Needed for switching to incoming call while in a call if (this.ended) { return; } this.setState({accountId: nextProps.account ? nextProps.account.id : null}); if (nextProps.call !== null) { if (this.state.call !== nextProps.call) { nextProps.call.on('stateChanged', this.callStateChanged); this.setState({ call: nextProps.call, remoteUri: nextProps.call.remoteIdentity.uri, direction: nextProps.call.direction, callUUID: nextProps.call.id, remoteDisplayName: nextProps.call.remoteIdentity.displayName }); if (nextProps.call.direction === 'incoming') { this.mediaPlaying(); } this.lookupContact(); } } else { if (nextProps.callUUID !== null && this.state.callUUID !== nextProps.callUUID) { this.setState({'callUUID': nextProps.callUUID, 'direction': 'outgoing', 'call': null }); this.startCallWhenReady(nextProps.callUUID); } } if (nextProps.reconnectingCall !== this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.targetUri !== this.state.targetUri && this.state.direction === 'outgoing') { this.setState({targetUri: nextProps.targetUri}); } if (nextProps.localMedia !== null && nextProps.localMedia !== this.state.localMedia) { let audioOnly = false; + if (nextProps.localMedia.getVideoTracks().length === 0) { audioOnly = true; } this.setState({localMedia: nextProps.localMedia, audioOnly: audioOnly}); - setTimeout(() => { - this.mediaPlaying(); - }, 100); + this.mediaPlaying(nextProps.localMedia); } } - mediaPlaying() { + mediaPlaying(localMedia) { if (this.state.direction === 'incoming') { - this.answerCall(); + const media = localMedia ? localMedia : this.state.localMedia; + this.answerCall(media); } else { this.mediaIsPlaying = true; } } - answerCall() { - if (this.state.call && this.state.call.state === 'incoming' && this.state.localMedia) { + answerCall(localMedia) { + const media = localMedia ? localMedia : this.state.localMedia; + if (this.state.call && this.state.call.state === 'incoming' && media) { let options = {pcConfig: {iceServers: config.iceServers}}; - options.localStream = this.state.localMedia; - this.state.call.answer(options); + options.localStream = media; + if (!this.answering) { + this.answering = true; + utils.timestampedLog('Call: answering call...'); + this.state.call.answer(options); + } } else { - console.log('Call: cannot answer call yet'); + if (!media) { + utils.timestampedLog('Call: waiting for local media'); + } + if (!this.state.call) { + utils.timestampedLog('Call: waiting for incoming call data'); + } } } componentDidMount() { this.lookupContact(); if (this.state.direction === 'outgoing' && this.state.callUUID) { this.startCallWhenReady(this.state.callUUID); } } componentWillUnmount() { this.ended = true; if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } if (this.props.connection) { this.props.connection.removeListener('stateChanged', this.connectionStateChanged); } } lookupContact() { let photo = null; let remoteUri = this.state.remoteUri || ''; let remoteDisplayName = this.state.remoteDisplayName || ''; if (!remoteUri) { return; } if (remoteUri.indexOf('3333@') > -1) { remoteDisplayName = 'Video Test'; } else if (remoteUri.indexOf('4444@') > -1) { remoteDisplayName = 'Echo Test'; } else if (this.props.contacts) { let username = remoteUri.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); if (isPhoneNumber) { var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username); } else { var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', remoteUri); } if (contact_obj) { remoteDisplayName = contact_obj.displayName; photo = contact_obj.photo; if (isPhoneNumber) { remoteUri = username; } } else { if (isPhoneNumber) { remoteUri = username; remoteDisplayName = username; } } } this.setState({remoteDisplayName: remoteDisplayName, remoteUri: remoteUri, photo: photo }); } callStateChanged(oldState, newState, data) { //console.log('Call: callStateChanged', oldState, '->', newState); let remoteHasNoVideoTracks; let remoteIsRecvOnly; let remoteIsInactive; let remoteStreams; if (newState === 'established') { this.setState({reconnectingCall: false}); const currentCall = this.state.call; if (currentCall) { remoteStreams = currentCall.getRemoteStreams(); if (remoteStreams) { if (remoteStreams.length > 0) { const remotestream = remoteStreams[0]; remoteHasNoVideoTracks = remotestream.getVideoTracks().length === 0; remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly'; remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive'; } } } if (remoteStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) { //console.log('Media type changed to audio'); // Stop local video if (this.state.localMedia.getVideoTracks().length !== 0) { currentCall.getLocalStreams()[0].getVideoTracks()[0].stop(); } this.setState({audioOnly: true}); } else { this.forceUpdate(); } } else if (newState === 'accepted') { // Switch if we have audioOnly and local videotracks. This means // the call object switched and we are transitioning to an // incoming call. if (this.state.audioOnly && this.state.localMedia && this.state.localMedia.getVideoTracks().length !== 0) { //console.log('Media type changed to video on accepted'); this.setState({audioOnly: false}); } } this.forceUpdate(); } connectionStateChanged(oldState, newState) { switch (newState) { case 'closed': break; case 'ready': break; case 'disconnected': if (oldState === 'ready' && this.state.direction === 'outgoing') { utils.timestampedLog('Call: reconnecting the call...'); this.waitInterval = this.defaultWaitInterval; } break; default: break; } } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } async startCallWhenReady(callUUID) { utils.timestampedLog('Call: start call', callUUID, 'when ready to', this.state.targetUri); this.waitCounter = 0; let diff = 0; while (this.waitCounter < this.waitInterval) { if (this.waitCounter === 1) { utils.timestampedLog('Call: waiting for establishing call', this.waitInterval, 'seconds'); } if (this.userHangup) { this.hangupCall('user_cancelled'); return; } if (this.ended) { return; } if (this.waitCounter >= this.waitInterval - 1) { this.hangupCall('timeout'); } if (!this.props.connection || this.props.connection.state !== 'ready' || this.props.registrationState !== 'registered' || !this.mediaIsPlaying ) { //utils.timestampedLog('Call: waiting for connection', this.waitInterval - this.waitCounter, 'seconds'); if (this.state.call && this.state.call.id === callUUID && this.state.call.state !== 'terminated') { return; } await this._sleep(1000); } else { this.waitCounter = 0; - this.call(); + this.start(); return; } this.waitCounter++; } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } - call() { + start() { utils.timestampedLog('Call: starting call', this.state.callUUID); if (this.state.localMedia === null) { console.log('Call: cannot create new call without local media'); return; } let options = {pcConfig: {iceServers: config.iceServers}, id: this.state.callUUID}; options.localStream = this.state.localMedia; let call = this.props.account.call(this.state.targetUri, options); if (call) { call.on('stateChanged', this.callStateChanged); } } hangupCall(reason) { let callUUID = this.state.call ? this.state.call.id : this.state.callUUID; this.waitInterval = this.defaultWaitInterval; - this.state.callUUID || this.state.call.id; - if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } if (this.props.connection) { this.props.connection.removeListener('stateChanged', this.connectionStateChanged); } if (this.waitCounter > 0) { this.waitCounter = this.waitInterval; } this.props.hangupCall(callUUID, reason); } render() { let box = null; if (this.state.localMedia !== null) { if (this.state.audioOnly) { box = ( ); } else { if (this.state.call !== null && (this.state.call.state === 'established' || (this.state.call.state === 'terminated' && this.state.reconnectingCall))) { box = ( ); } else { if (this.state.call && this.state.call.state === 'terminated' && this.state.reconnectingCall) { //console.log('Skip render local media because we will reconnect'); } else { box = ( ); } } } } else { box = ( ); } return box; } } Call.propTypes = { targetUri : PropTypes.string.isRequired, account : PropTypes.object, hangupCall : PropTypes.func, connection : PropTypes.object, registrationState : PropTypes.string, call : PropTypes.object, localMedia : PropTypes.object, shareScreen : PropTypes.func, escalateToConference : PropTypes.func, generatedVideoTrack : PropTypes.bool, callKeepSendDtmf : PropTypes.func, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, callUUID : PropTypes.string, contacts : PropTypes.array, intercomDtmfTone : PropTypes.string, orientation : PropTypes.string, isTablet : PropTypes.bool, reconnectingCall : PropTypes.bool, muted : PropTypes.bool }; export default Call; diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js index 238715e..66d67d5 100644 --- a/app/components/CallOverlay.js +++ b/app/components/CallOverlay.js @@ -1,190 +1,188 @@ import React from 'react'; import { View, Text } from 'react-native'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import autoBind from 'auto-bind'; import { Appbar } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { ActivityIndicator, Colors } from 'react-native-paper'; - import styles from '../assets/styles/blink/_AudioCallBox.scss'; - function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class CallOverlay extends React.Component { constructor(props) { super(props); autoBind(this); this.state = { call: this.props.call, callState: this.props.call ? this.props.call.state : null, direction: this.props.call ? this.props.call.direction: null, remoteUri: this.props.remoteUri, remoteDisplayName: this.props.remoteDisplayName, photo: this.props.photo } this.duration = null; this.finalDuration = null; this.timer = null; this._isMounted = true; } componentDidMount() { if (this.state.call) { if (this.state.call.state === 'established') { this.startTimer(); } this.state.call.on('stateChanged', this.callStateChanged); this.setState({callState: this.state.call.state}); } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.call !== null && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call}); } this.setState({remoteDisplayName: nextProps.remoteDisplayName, remoteUri: nextProps.remoteUri}); } componentWillUnmount() { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this._isMounted = false; clearTimeout(this.timer); } callStateChanged(oldState, newState, data) { if (newState === 'established' && this._isMounted) { this.startTimer(); } if (newState === 'terminated') { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); this.finalDuration = this.duration; this.duration = null; this.timer = null; } this.setState({callState: newState}); } startTimer() { if (this.timer !== null) { // already armed return; } // TODO: consider using window.requestAnimationFrame const startTime = new Date(); this.duration = moment.duration(new Date() - startTime).format('hh:mm:ss', {trim: false}); this.timer = setInterval(() => { this.duration = moment.duration(new Date() - startTime).format('hh:mm:ss', {trim: false}); if (this.props.show) { this.forceUpdate(); } }, 1000); } render() { let header = null; let displayName = this.state.remoteUri; if (this.state.remoteDisplayName && this.state.remoteDisplayName !== this.state.remoteUri) { displayName = this.state.remoteDisplayName; } if (this.props.show) { let callDetail; if (this.duration) { callDetail = {this.duration}; callDetail = 'Duration:' + this.duration; } else { if (this.finalDuration && (!this.props.connection || this.props.connection.state !== 'ready')) { if (this.state.callState && this.state.callState === 'terminated') { if (this.state.direction === 'outgoing') { callDetail = 'Restoring the conversation...'; } else { - callDetail = 'Connection was lost'; + callDetail = 'Call ended'; } } else { callDetail = 'Waiting for connection...'; } } else { if (this.state.callState === 'terminated') { callDetail = 'Call ended'; if (this.finalDuration) { callDetail = callDetail + ' after ' + this.finalDuration; } } else { callDetail = this.state.callState ? toTitleCase(this.state.callState) : 'Connecting...'; } } } if (this.state.remoteUri && this.state.remoteUri.search('videoconference') > -1) { displayName = this.state.remoteUri.split('@')[0]; header = ( ); } else { header = ( ); } } return header } } CallOverlay.propTypes = { show: PropTypes.bool.isRequired, remoteUri: PropTypes.string, remoteDisplayName: PropTypes.string, photo: PropTypes.object, accountId: PropTypes.string, call: PropTypes.object, connection: PropTypes.object }; export default CallOverlay; diff --git a/app/components/Conference.js b/app/components/Conference.js index f849f2d..0066111 100644 --- a/app/components/Conference.js +++ b/app/components/Conference.js @@ -1,181 +1,244 @@ import React from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; import assert from 'assert'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import ConferenceBox from './ConferenceBox'; import LocalMedia from './LocalMedia'; import config from '../config'; import utils from '../utils'; const DEBUG = debug('blinkrtc:Conference'); debug.enable('*'); + class Conference extends React.Component { constructor(props) { super(props); autoBind(this); this.waitCounter = 0; - this.waitInterval = 180; + this.waitInterval = 90; this.userHangup = false; + this.confCall = null; + + this.state = { + currentCall: this.props.currentCall, + localMedia: this.props.localMedia, + connection: this.props.connection, + account: this.props.account, + callState: this.props.connection ? this.props.connection.state : null, + startedByPush: this.props.startedByPush, + started: false + } + } + + //getDerivedStateFromProps(nextProps, state) { + UNSAFE_componentWillReceiveProps(nextProps) { + //utils.timestampedLog('--Conference got props in connection startedByPush = ', this.state.startedByPush); + if (nextProps.account !== null && nextProps.account !== this.props.account) { + this.setState({account: nextProps.account}); + } + if (nextProps.connection !== null && nextProps.connection !== this.props.accconnectionount) { + this.setState({connection: nextProps.connection, callState: nextProps.connection.state}); + } + + if (nextProps.localMedia !== null && nextProps.localMedia !== this.state.localMedia) { + this.setState({localMedia: nextProps.localMedia}); + } + + if (nextProps.currentCall != this.state.currentCall) { + this.setState({currentCall: nextProps.currentCall}); + } + + this.mediaPlaying(); + } + + canConnect() { + if (this.state.started) { + return false; + } + + if (!this.state.localMedia) { + console.log('Conference: no local media'); + return false; + } + + if (this.state.callState !== 'ready') { + console.log('Conference: connection is not ready'); + return false; + } + + if (this.state.currentCall) { + console.log('Conference: call already in progress'); + return false; + } + + return true; + } + + mediaPlaying() { + if (this.canConnect()) { + this.setState({started: true}); + this.startConferenceWhenReady(); + } } confStateChanged(oldState, newState, data) { - DEBUG(`Conference state changed ${oldState} -> ${newState}`); + utils.timestampedLog('Conference: callStateChanged', oldState, '->', newState); if (newState === 'established') { this.forceUpdate(); } } hangup() { this.props.hangupCall(this.props.callUUID, 'user_press_hangup'); this.userHangup = true; } async startConferenceWhenReady() { - if (!this.props.callUUID || !this.props.targetUri) { - return; - } - utils.timestampedLog('Call: start conference', this.props.callUUID, 'when ready to', this.props.targetUri); + utils.timestampedLog('Conference: start conference', this.props.callUUID, 'when ready to', this.props.targetUri); this.waitCounter = 0; - //utils.timestampedLog('Call: waiting for connecting to the conference', this.waitInterval, 'seconds'); + //utils.timestampedLog('Conference: waiting for connecting to the conference', this.waitInterval, 'seconds'); let diff = 0; while (this.waitCounter < this.waitInterval) { if (this.userHangup) { this.props.hangupCall(this.props.callUUID, 'user_cancelled'); return; } if (this.waitCounter >= this.waitInterval - 1) { - utils.timestampedLog('Call: terminating conference', this.props.callUUID, 'that did not start yet'); + utils.timestampedLog('Conference: cancelling conference', this.props.callUUID); this.props.hangupCall(this.props.callUUID, 'timeout'); } this.waitCounter++; - if (!this.props.connection || - this.props.connection.state !== 'ready' || + if (!this.state.connection || + !this.props.account || + this.state.callState !== 'ready' || this.props.registrationState !== 'registered') { - utils.timestampedLog('Call: waiting for connection', this.waitInterval - this.waitCounter, 'seconds'); + utils.timestampedLog('Conference: waiting for connection', this.waitInterval - this.waitCounter, 'seconds'); +// utils.timestampedLog('Conference: connection', this.state.connection); +// utils.timestampedLog('Conference: account', this.props.account); + await this._sleep(1000); } else { this.waitCounter = 0; this.start(); return; } } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } start() { - if (this.props.currentCall === null) { + if (this.state.currentCall === null && this.confCall === null) { const options = { id: this.props.callUUID, pcConfig: {iceServers: config.iceServers}, - localStream: this.props.localMedia, + localStream: this.state.localMedia, audio: this.props.proposedMedia.audio, video: this.props.proposedMedia.video, offerOptions: { offerToReceiveAudio: false, offerToReceiveVideo: false }, initialParticipants: this.props.participantsToInvite }; - //console.log('Sylkrtc.js will start 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); + utils.timestampedLog('Conference: Sylkrtc.js will start conference call', this.props.callUUID, 'to', this.props.targetUri.toLowerCase()); + this.confCall = this.state.account.joinConference(this.props.targetUri.toLowerCase(), options); + this.confCall.on('stateChanged', this.confStateChanged); } else { - console.log('Cannot start conference, there is already a call in progress'); - } - } - - mediaPlaying() { - if (this.props.currentCall === null) { - this.startConferenceWhenReady(); + //utils.timestampedLog('There is already a conference in progress'); } } render() { + //console.log('Render conference'); let box = null; - if (this.props.localMedia !== null) { - if (this.props.currentCall != null && this.props.currentCall.state === 'established') { + if (this.state.localMedia !== null) { + if (this.state.currentCall != null && this.state.currentCall.state === 'established') { box = ( ); - } else { + } else if (!this.state.startedByPush) { box = ( ); } + + } else { + console.log('Error: render conference has no local media'); } return box; } } Conference.propTypes = { notificationCenter : PropTypes.func.isRequired, account : PropTypes.object.isRequired, connection : PropTypes.object, registrationState : PropTypes.string, 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, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, callUUID : PropTypes.string, proposedMedia : PropTypes.object, isLandscape : PropTypes.bool, isTablet : PropTypes.bool, muted : PropTypes.bool, - defaultDomain : PropTypes.string + defaultDomain : PropTypes.string, + startedByPush : PropTypes.bool }; export default Conference; diff --git a/app/components/ConferenceBox.js b/app/components/ConferenceBox.js index 6dbc5f6..2a2e913 100644 --- a/app/components/ConferenceBox.js +++ b/app/components/ConferenceBox.js @@ -1,814 +1,813 @@ 'use strict'; import React, {Component, Fragment} from 'react'; import { View, Platform, TouchableWithoutFeedback, Dimensions } from 'react-native'; import PropTypes from 'prop-types'; import * as sylkrtc from 'react-native-sylkrtc'; import classNames from 'classnames'; import debug from 'react-native-debug'; import superagent from 'superagent'; import autoBind from 'auto-bind'; import { RTCView } from 'react-native-webrtc'; import { IconButton, Appbar, Portal, Modal, Surface, Paragraph } from 'react-native-paper'; import config from '../config'; import utils from '../utils'; //import AudioPlayer from './AudioPlayer'; import ConferenceDrawer from './ConferenceDrawer'; import ConferenceDrawerLog from './ConferenceDrawerLog'; // import ConferenceDrawerFiles from './ConferenceDrawerFiles'; import ConferenceDrawerParticipant from './ConferenceDrawerParticipant'; import ConferenceDrawerParticipantList from './ConferenceDrawerParticipantList'; import ConferenceDrawerSpeakerSelection from './ConferenceDrawerSpeakerSelection'; import ConferenceDrawerSpeakerSelectionWrapper from './ConferenceDrawerSpeakerSelectionWrapper'; import ConferenceHeader from './ConferenceHeader'; import ConferenceCarousel from './ConferenceCarousel'; import ConferenceParticipant from './ConferenceParticipant'; import ConferenceMatrixParticipant from './ConferenceMatrixParticipant'; import ConferenceParticipantSelf from './ConferenceParticipantSelf'; import InviteParticipantsModal from './InviteParticipantsModal'; import 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: this.props.muted, videoMuted: false, participants: props.call.participants.slice(), showInviteModal: false, showDrawer: false, showFiles: false, shareOverlayVisible: false, showSpeakerSelection: false, activeSpeakers: props.call.activeParticipants.slice(), selfDisplayedLarge: false, eventLog: [], sharedFiles: props.call.sharedFiles.slice(), largeVideoStream: null, previousParticipants: this.props.previousParticipants }; 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 = []; this.selectSpeaker = 1; [ '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.state.participants.forEach((p) => { 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.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(); }) } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.hasOwnProperty('muted')) { this.setState({audioMuted: nextProps.muted}); } } 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; stateFiles = stateFiles.concat(files); this.setState({sharedFiles: stateFiles}); files.forEach((file)=>{ if (file.session !== this.props.call.id) { this.props.notificationCenter().postFileShared(file, this.showFiles); } }) } onVideoSelected(item) { const participants = this.state.participants.slice(); const idx = participants.indexOf(item); participants.splice(idx, 1); participants.unshift(item); if (item.videoPaused) { item.resumeVideo(); } this.setState({ participants: participants }); } changeResolution() { let stream = this.props.call.getLocalStreams()[0]; if (this.state.participants.length < 2) { this.props.call.scaleLocalTrack(stream, 1.5); } else if (this.state.participants.length < 5) { this.props.call.scaleLocalTrack(stream, 2); } else { this.props.call.scaleLocalTrack(stream, 1); } } selectVideo(item) { DEBUG('Switching video to: %o', item); if (item.stream) { this.setState({selfDisplayedLarge: true, largeVideoStream: item.stream}); } } maybeSwitchLargeVideo() { // Switch the large video to another source, maybe. if (this.state.participants.length === 0 && !this.state.selfDisplayedLarge) { // none of the participants are eligible, show ourselves const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); } else if (this.state.selfDisplayedLarge) { this.setState({selfDisplayedLarge: false}); } } handleClipboardButton() { utils.copyToClipboard(this.callUrl); this.props.notificationCenter().postSystemNotification('Join me, maybe?', {body: 'Link copied to the clipboard'}); this.setState({shareOverlayVisible: false}); } handleEmailButton(event) { // if (navigator.userAgent.indexOf('Chrome') > 0) { // let emailWindow = window.open(this.emailLink, '_blank'); // setTimeout(() => { // emailWindow.close(); // }, 500); // } else { // window.open(this.emailLink, '_self'); // } this.setState({shareOverlayVisible: false}); } handleShareOverlayEntered() { this.setState({shareOverlayVisible: true}); } handleShareOverlayExited() { this.setState({shareOverlayVisible: false}); } handleActiveSpeakerSelected(participant, secondVideo=false) { // eslint-disable-line space-infix-ops let newActiveSpeakers = this.state.activeSpeakers.slice(); if (secondVideo) { if (participant.id !== 'none') { if (newActiveSpeakers.length >= 1) { newActiveSpeakers[1] = participant; } else { newActiveSpeakers[0] = participant; } } else { newActiveSpeakers.splice(1,1); } } else { if (participant.id !== 'none') { newActiveSpeakers[0] = participant; } else { newActiveSpeakers.shift(); } } this.props.call.configureRoom(newActiveSpeakers.map((element) => element.publisherId), (error) => { if (error) { // This causes a state update, hence the drawer lists update this.logEvent.error('set speakers failed', [], this.localIdentity); } }); } handleDrop(files) { DEBUG('Dropped file %o', files); this.uploadFiles(files); }; handleFiles(e) { DEBUG('Selected files %o', e.target.files); this.uploadFiles(e.target.files); event.target.value = ''; } toggleSpeakerSelection() { this.setState({showSpeakerSelection: !this.state.showSpeakerSelection}); } startSpeakerSelection(number) { this.selectSpeaker = number; this.toggleSpeakerSelection(); } uploadFiles(files) { for (var key in files) { // is the item a File? if (files.hasOwnProperty(key) && files[key] instanceof File) { let uploadRequest; let complete = false; const filename = files[key].name let progressNotification = this.props.notificationCenter().postFileUploadProgress( filename, (notification) => { if (!complete) { uploadRequest.abort(); this.uploads.splice(this.uploads.indexOf(uploadRequest), 1); } } ); uploadRequest = superagent .post(`${config.fileSharingUrl}/${this.props.remoteUri}/${this.props.call.id}/${filename}`) .send(files[key]) .on('progress', (e) => { this.props.notificationCenter().editFileUploadNotification(e.percent, progressNotification); }) .end((err, response) => { complete = true; this.props.notificationCenter().removeFileUploadNotification(progressNotification); if (err) { this.props.notificationCenter().postFileUploadFailed(filename); } this.uploads.splice(this.uploads.indexOf(uploadRequest), 1); }); this.uploads.push([uploadRequest, progressNotification]); } } } downloadFile(filename) { // const a = document.createElement('a'); // a.href = `${config.fileSharingUrl}/${this.props.remoteUri}/${this.props.call.id}/${filename}`; // a.target = '_blank'; // a.download = filename; // const clickEvent = document.createEvent('MouseEvent'); // clickEvent.initMouseEvent('click', true, true, window, 0, // clickEvent.screenX, clickEvent.screenY, clickEvent.clientX, clickEvent.clientY, // clickEvent.ctrlKey, clickEvent.altKey, clickEvent.shiftKey, clickEvent.metaKey, // 0, null); // a.dispatchEvent(clickEvent); } preventOverlay(event) { // Stop the overlay when we are the thumbnail bar event.stopPropagation(); } muteAudio(event) { event.preventDefault(); this.props.toggleMute(this.props.call.id, !this.state.audioMuted); } 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: !this.state.callOverlayVisible}); // } // this.armOverlayTimer(); // } } toggleInviteModal() { this.setState({showInviteModal: !this.state.showInviteModal}); } toggleDrawer() { this.setState({callOverlayVisible: true, showDrawer: !this.state.showDrawer, showFiles: false, showSpeakerSelection: false}); clearTimeout(this.overlayTimer); } toggleFiles() { this.setState({callOverlayVisible: true, showFiles: !this.state.showFiles, showDrawer: false}); clearTimeout(this.overlayTimer); } showFiles() { this.setState({callOverlayVisible: true, showFiles: true, showDrawer: false}); clearTimeout(this.overlayTimer); } inviteParticipants(uris) { - console.log('Invite participants', uris); this.props.call.inviteParticipants(uris); } render() { if (this.props.call === null) { return (); } let watermark; const largeVideoClasses = classNames({ 'animated' : true, 'fadeIn' : true, 'large' : true, 'mirror' : !this.props.call.sharingScreen && !this.props.generatedVideoTrack, 'fit' : this.props.call.sharingScreen }); let matrixClasses = classNames({ 'matrix' : true }); const containerClasses = classNames({ 'video-container': true, 'conference': true, 'drawer-visible': this.state.showDrawer || this.state.showFiles }); const remoteUri = this.props.remoteUri.split('@')[0]; // const shareOverlay = ( // // // // // Invite other online users of this service, share this link with others or email, so they can easily join this conference. // // // // // // // // // // // // ); const buttons = {}; // const commonButtonTopClasses = classNames({ // 'btn' : true, // 'btn-link' : true // }); // const fullScreenButtonIcons = classNames({ // 'fa' : true, // 'fa-2x' : true, // 'fa-expand' : !this.isFullScreen(), // 'fa-compress' : this.isFullScreen() // }); const topButtons = []; // if (!this.state.showFiles) { // if (this.state.sharedFiles.length !== 0) { // topButtons.push( // // // // ); // } // } if (!this.state.showDrawer) { topButtons.push(); } buttons.top = {right: topButtons}; const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone'; const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video'; const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; const bottomButtons = []; bottomButtons.push( ); if (this.haveVideo) { bottomButtons.push( ); } bottomButtons.push( ); if (this.haveVideo) { bottomButtons.push( ); } bottomButtons.push( ) // bottomButtons.push( // // // // ); bottomButtons.push( ); 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( ); } } const drawerParticipants = []; drawerParticipants.push( ); let videos = []; if (this.state.participants.length === 0) { videos.push( ); } else { const activeSpeakers = this.state.activeSpeakers; const activeSpeakersCount = activeSpeakers.length; if (activeSpeakersCount > 0) { activeSpeakers.forEach((p) => { videos.push( ); }); this.state.participants.forEach((p) => { if (this.state.activeSpeakers.indexOf(p) === -1) { participants.push( {}} pauseVideo={true} display={false} /> ); } drawerParticipants.push( ); }); } else { this.state.participants.forEach((p, idx) => { videos.push( = 4) || (idx >= 2 && this.props.isTablet === false)} isLandscape={this.props.isLandscape} isTablet={this.props.isTablet} useTwoRows={this.state.participants.length > 2} /> ); if (idx >= 4 || idx >= 2 && this.props.isTablet === false) { participants.push( ); } drawerParticipants.push( ); }); } } // let filesDrawerContent = ( // // ); return ( {videos} {participants} {return p.identity.uri})} close={this.toggleInviteModal} room={this.props.remoteUri.split('@')[0]} defaultDomain = {this.props.defaultDomain} notificationCenter = {this.props.notificationCenter} /> {drawerParticipants} ); } } ConferenceBox.propTypes = { notificationCenter : PropTypes.func.isRequired, call : PropTypes.object, connection : PropTypes.object, hangup : PropTypes.func, saveParticipant : PropTypes.func, previousParticipants: PropTypes.array, remoteUri : PropTypes.string, generatedVideoTrack : PropTypes.bool, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, isLandscape : PropTypes.bool, isTablet : PropTypes.bool, muted : PropTypes.bool, defaultDomain : PropTypes.string }; export default ConferenceBox; diff --git a/app/components/ConferenceMatrixParticipant.js b/app/components/ConferenceMatrixParticipant.js index 17d0f6a..8cef86b 100644 --- a/app/components/ConferenceMatrixParticipant.js +++ b/app/components/ConferenceMatrixParticipant.js @@ -1,152 +1,151 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; // const hark = require('hark'); import classNames from 'classnames'; import autoBind from 'auto-bind'; import { Title, Badge } from 'react-native-paper'; import LinearGradient from 'react-native-linear-gradient'; import { RTCView } from 'react-native-webrtc'; import { View } from 'react-native'; import styles from '../assets/styles/blink/_ConferenceMatrixParticipant.scss'; class ConferenceMatrixParticipant extends Component { constructor(props) { super(props); autoBind(this); this.state = { active: false, hasVideo: false, sharesScreen: false, audioMuted: false, stream: null } this.speechEvents = null; this.videoElement = React.createRef(); if (!props.isLocal) { props.participant.on('stateChanged', this.onParticipantStateChanged); } } componentDidMount() { this.maybeAttachStream(); if (!this.props.pauseVideo && this.props.participant.videoPaused) { this.props.participant.resumeVideo(); } // this.videoElement.current.oncontextmenu = (e) => { // // disable right click for video elements // e.preventDefault(); // }; // this.videoElement.current.onresize = (event) => { // this.handleResize(event); // }; } componentWillUnmount() { if (!this.props.isLocal) { this.props.participant.removeListener('stateChanged', this.onParticipantStateChanged); } // if (this.speechEvents !== null) { // this.speechEvents.stop(); // this.speechEvents = null; // } } onParticipantStateChanged(oldState, newState) { if (newState === 'established') { this.maybeAttachStream(); } } handleResize(event) { // console.log(event.srcElement.videoWidth); const resolutions = ['1280x720', '960x540', '640x480', '640x360', '480x270', '320x180']; if (this.state.hasVideo) { const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight; if (resolutions.indexOf(videoResolution) === -1) { this.setState({sharesScreen: true}); } else { this.setState({sharesScreen: false}); } } } maybeAttachStream() { const streams = this.props.participant.streams; - console.log(this.props.participant); if (streams.length > 0) { this.setState({stream: streams[0], hasVideo: streams[0].getVideoTracks().length > 0}); // const options = { // interval: 150, // play: false // }; // this.speechEvents = hark(streams[0], options); // this.speechEvents.on('speaking', () => { // this.setState({active: true}); // }); // this.speechEvents.on('stopped_speaking', () => { // this.setState({active: false}); // }); } } render() { // const classes = classNames({ // 'poster' : !this.state.hasVideo, // 'fit' : this.state.sharesScreen // }); // const remoteVideoClasses = classNames({ // 'remote-video' : true, // 'large' : this.props.large, // 'conference-active' : this.state.active // }); const participantInfo = ( {this.props.participant.identity.displayName || this.props.participant.identity.uri} ); let activeIcon; if (this.props.isLocal) { activeIcon = ( Speaker ); } let style = null; if (this.props.isTablet === true && this.props.useTwoRows) { style = styles.portraitTabletContainer; if (this.props.isLandscape) { style = styles.landscapeTabletContainer; } } return ( {activeIcon} {participantInfo} ); } } ConferenceMatrixParticipant.propTypes = { participant: PropTypes.object.isRequired, large: PropTypes.bool, isLocal: PropTypes.bool, isTablet: PropTypes.bool, isLandscape: PropTypes.bool }; export default ConferenceMatrixParticipant; diff --git a/app/components/HistoryCard.js b/app/components/HistoryCard.js index c110f90..3c14d38 100644 --- a/app/components/HistoryCard.js +++ b/app/components/HistoryCard.js @@ -1,405 +1,406 @@ import React, { Component, Fragment} from 'react'; import { View, SafeAreaView, FlatList } from 'react-native'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import { Card, IconButton, Button, Caption, Title, Subheading, List, Text} from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import uuid from 'react-native-uuid'; import EditConferenceModal from './EditConferenceModal'; import styles from '../assets/styles/blink/_HistoryCard.scss'; import UserIcon from './UserIcon'; function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } const Item = ({ nr, uri, displayName }) => ( {displayName !== uri? {displayName} ({uri}) : {uri} } ); const renderItem = ({ item }) => ( ); class HistoryCard extends Component { constructor(props) { super(props); autoBind(this); this.state = { id: this.props.contact.id, contact: this.props.contact, displayName: this.props.contact.displayName, uri: this.props.contact.remoteParty, invitedParties: this.props.invitedParties, participants: this.props.contact.participants, conference: this.props.contact.conference, type: this.props.contact.type, photo: this.props.contact.photo, label: this.props.contact.label, orientation: this.props.orientation, isTablet: this.props.isTablet, favorite: (this.props.contact.tags.indexOf('favorite') > -1)? true : false, blocked: (this.props.contact.tags.indexOf('blocked') > -1)? true : false, confirmed: false, showEditConferenceModal: false } } UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ id: nextProps.contact.id, contact: nextProps.contact, displayName: nextProps.contact.displayName, uri: nextProps.contact.remoteParty, invitedParties: nextProps.invitedParties, participants: nextProps.contact.participants, conference: nextProps.contact.conference, type: nextProps.contact.type, photo: nextProps.contact.photo, label: nextProps.contact.label, orientation: nextProps.orientation, favorite: (nextProps.contact.tags.indexOf('favorite') > -1)? true : false, blocked: (nextProps.contact.tags.indexOf('blocked') > -1)? true : false, }); } shouldComponentUpdate(nextProps) { //https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b return true; } toggleEditConferenceModal() { this.setState({showEditConferenceModal: !this.state.showEditConferenceModal}); } saveInvitedParties(uris) { this.setState({invitedParties: uris}); this.props.saveInvitedParties(this.state.uri.split('@')[0], uris); } handleParticipant() { } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } setBlockedUri() { let newBlockedState = this.props.setBlockedUri(this.state.uri); this.setState({blocked: newBlockedState}); } editConference() { this.toggleEditConferenceModal(); } deleteHistoryEntry() { this.props.deleteHistoryEntry(this.state.uri); } undo() { this.setState({confirmed: false, action: null}); } setFavoriteUri() { if (this.state.favorite) { if (this.state.confirmed) { let newFavoriteState = this.props.setFavoriteUri(this.state.uri); this.setState({favorite: newFavoriteState, action: null, confirmed: false}); this.props.setTargetUri(this.state.uri); } else { this.setState({confirmed: true}); } } else { let newFavoriteState = this.props.setFavoriteUri(this.state.uri); this.setState({favorite: newFavoriteState}); } } setTargetUri(uri, contact) { if (this.isAnonymous(this.state.uri)) { return; } this.props.setTargetUri(uri, this.state.contact); } isAnonymous(uri) { if (uri.indexOf('@guest.') > -1 || uri.indexOf('@anonymous.') > -1) { return true } return false; } render () { let containerClass = styles.portraitContainer; let cardClass = styles.card; let showActions = this.props.contact.showActions && this.props.contact.tags.indexOf('test') === -1; let uri = this.state.uri; let username = uri.split('@')[0]; let displayName = this.state.displayName; let buttonMode = 'text'; let showBlockButton = !this.state.conference; let showFavoriteButton = true; let showUndoButton = this.state.confirmed ? true : false; let showDeleteButton = (this.props.contact.tags.indexOf('local') > -1 && !this.state.favorite ) ? true: false; let showEditButton = (this.state.conference && this.state.favorite && !this.state.confirmed ) ? true: false; let blockTextbutton = 'Block'; let editTextbutton = 'Edit'; let favoriteTextbutton = 'Favorite'; let undoTextbutton = 'Undo'; let deleteTextbutton = 'Delete'; let participantsData = []; if (this.isAnonymous(uri)) { uri = 'anonymous@anonymous.invalid'; displayName = displayName + ' - from the Web'; let showFavoriteButton = false; } if (this.state.favorite) { favoriteTextbutton = this.state.confirmed ? 'Confirm' : 'Remove'; if (!this.state.blocked) { showBlockButton = false; } } if (uri.indexOf('3333@') > -1) { showBlockButton = false; } if (uri.indexOf('4444@') > -1) { showBlockButton = false; } if (displayName === 'Myself') { showBlockButton = false; } if (this.state.blocked) { blockTextbutton = 'Unblock'; showFavoriteButton = false; } if (this.state.isTablet) { containerClass = (this.state.orientation === 'landscape') ? styles.landscapeTabletContainer : styles.portraitTabletContainer; } else { containerClass = (this.state.orientation === 'landscape') ? styles.landscapeContainer : styles.portraitContainer; } if (showActions) { cardClass = styles.expandedCard; } let color = {}; let title = displayName || username; + let subtitle = uri; let description = this.props.contact.startTime; if (displayName === uri) { title = toTitleCase(username); } if (this.props.contact.tags.indexOf('history') > -1) { let duration = moment.duration(this.props.contact.duration, 'seconds').format('HH:mm:ss', {trim: false}); if (this.props.contact.direction === 'received' && this.props.contact.duration === 0) { color.color = '#a94442'; duration = 'missed'; } else if (this.props.contact.direction === 'placed' && this.props.contact.duration === 0) { duration = 'cancelled'; } if (this.state.conference) { let participants = (this.state.invitedParties && this.state.invitedParties.length > 0) ? this.state.invitedParties: this.state.participants; if (participants && participants.length > 0) { const p_text = participants.length > 1 ? 'participants' : 'participant'; subtitle = 'With ' + participants.length + ' ' + p_text; let i = 1; let contact_obj; let dn; let _item; participants.forEach((participant) => { contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', participant); dn = contact_obj ? contact_obj.displayName : participant; _item = {nr: i, id: uuid.v4(), uri: participant, displayName: dn}; participantsData.push(_item); i = i + 1; }); } else { subtitle = 'With no participants'; } let dn; if (participantsData.length > 4 || participantsData.length === 0) { title = username.length > 10 ? 'Conference' : 'Conference ' + toTitleCase(username); } else if (participantsData.length > 0 || participantsData.length <= 4 ) { let j = 0; title = ''; participantsData.forEach((participant) => { if (participant.displayName === participant.uri) { dn = toTitleCase(participant.uri.split('@')[0]); } else { dn = participant.displayName.split(' ')[0]; } title = title + dn; if (j < participantsData.length - 1) { title = title + ' & '; } j = j + 1; }); } } if (!displayName) { title = uri; if (duration === 'missed') { subtitle = 'Last call missed'; } else if (duration === 'cancelled') { subtitle = 'Last call cancelled'; } else { subtitle = 'Last call duration ' + duration ; } } description = description + ' (' + duration + ')'; return ( {this.setTargetUri(uri, this.props.contact)}} style={[containerClass, cardClass]} > {title} {subtitle} {description} {participantsData && participantsData.length && showActions ? item.id} key={item => item.id} /> : null} {showActions ? {showEditButton? : null} {showDeleteButton? : null} {showBlockButton? : null} {showFavoriteButton?: null} {showUndoButton?: null} : null} ); } else { return ( {this.props.setTargetUri(uri, this.props.contact)}} style={[containerClass, cardClass]} > {title} {uri} {this.state.label} {showActions ? {showBlockButton? : null} {showFavoriteButton?: null} {showUndoButton?: null} : null} ); } } } HistoryCard.propTypes = { id : PropTypes.string, contact : PropTypes.object, setTargetUri : PropTypes.func, setBlockedUri : PropTypes.func, setFavoriteUri : PropTypes.func, saveInvitedParties : PropTypes.func, deleteHistoryEntry : PropTypes.func, orientation : PropTypes.string, isTablet : PropTypes.bool, contacts : PropTypes.array, defaultDomain : PropTypes.string }; export default HistoryCard; diff --git a/bgMessaging.js b/bgMessaging.js index 49cb758..145e73c 100644 --- a/bgMessaging.js +++ b/bgMessaging.js @@ -1,31 +1,31 @@ //@flow import { NativeModules, AppState } from 'react-native'; const { SylkNative } = NativeModules; export default async (remoteMessage) => { console.log('Push notification received', remoteMessage.data.event, 'in state', AppState.currentState); if (AppState.currentState === "background") { let event = remoteMessage.data.event; let callUUID = remoteMessage.data['session-id']; let to = remoteMessage.data['to_uri'] let from = remoteMessage.data['from_uri'] let url; if (event === 'incoming_conference_request') { - url = 'sylk://outgoing/conference/' + callUUID + '/' + from + '/' + to; + url = 'sylk://incoming/conference/' + callUUID + '/' + from + '/' + to; } else if (event === 'incoming_session') { url = 'sylk://incoming/call/' + callUUID + '/' + from + '/' + to; } else if (event === 'cancel') { - url = 'sylk://cancel/call/' + callUUID + '/' + from + '/' + to; + url = 'sylk://cancel/call/' + callUUID; } if (url) { console.log('Wake up from push with URL', url); SylkNative.launchMainActivity(url); } } return Promise.resolve(); }