diff --git a/app/app.js b/app/app.js index c7a6d27..a7a5477 100644 --- a/app/app.js +++ b/app/app.js @@ -1,7990 +1,8114 @@ // copyright AG Projects 2020-2021 import React, { Component, Fragment } from 'react'; import { Alert, View, SafeAreaView, ImageBackground, AppState, Linking, Platform, StyleSheet, Vibration, PermissionsAndroid} from 'react-native'; import { DeviceEventEmitter, BackHandler } from 'react-native'; import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper'; import { registerGlobals } from 'react-native-webrtc'; import { Router, Route, Link, Switch } from 'react-router-native'; import history from './history'; import Logger from "../Logger"; import autoBind from 'auto-bind'; import { firebase } from '@react-native-firebase/messaging'; import VoipPushNotification from 'react-native-voip-push-notification'; import uuid from 'react-native-uuid'; import { getUniqueId, getBundleId, isTablet, getPhoneNumber} from 'react-native-device-info'; import RNDrawOverlay from 'react-native-draw-overlay'; import PushNotificationIOS from "@react-native-community/push-notification-ios"; import PushNotification , {Importance} from "react-native-push-notification"; import Contacts from 'react-native-contacts'; import BackgroundTimer from 'react-native-background-timer'; import DeepLinking from 'react-native-deep-linking'; import base64 from 'react-native-base64'; import SoundPlayer from 'react-native-sound-player'; import RNSimpleCrypto from "react-native-simple-crypto"; import OpenPGP from "react-native-fast-openpgp"; import ShortcutBadge from 'react-native-shortcut-badge'; import { getAppstoreAppMetadata } from "react-native-appstore-version-checker"; //import ReceiveSharingIntent from 'react-native-receive-sharing-intent'; import {Keyboard} from 'react-native'; +import DeviceInfo from 'react-native-device-info'; 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 ImportPrivateKeyModal from './components/ImportPrivateKeyModal'; import IncomingCallModal from './components/IncomingCallModal'; import LogsModal from './components/LogsModal'; import NotificationCenter from './components/NotificationCenter'; import LoadingScreen from './components/LoadingScreen'; import NavigationBar from './components/NavigationBar'; import Preview from './components/Preview'; import CallManager from './CallManager'; import SQLite from 'react-native-sqlite-storage'; //SQLite.DEBUG(true); SQLite.enablePromise(true); import xtype from 'xtypejs'; import xss from 'xss'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import momenttz from 'moment-timezone'; import utils from './utils'; import config from './config'; import storage from './storage'; var randomString = require('random-string'); const RNFS = require('react-native-fs'); const logfile = RNFS.DocumentDirectoryPath + '/logs.txt'; import styles from './assets/styles/blink/root.scss'; const backgroundImage = require('./assets/images/dark_linen.png'); const logger = new Logger("App"); function checkIosPermissions() { return new Promise(resolve => PushNotificationIOS.checkPermissions(resolve)); } const KeyOptions = { cipher: "aes256", compression: "zlib", hash: "sha512", RSABits: 4096, compressionLevel: 5 } const theme = { ...DefaultTheme, dark: true, roundness: 2, colors: { ...DefaultTheme.colors, primary: '#337ab7', // accent: '#f1c40f', }, }; const URL_SCHEMES = [ 'sylk://', ]; const ONE_SECOND_IN_MS = 1000; const VIBRATION_PATTERN = [ 1 * ONE_SECOND_IN_MS, 1 * ONE_SECOND_IN_MS, 4 * ONE_SECOND_IN_MS ]; let bundleId = `${getBundleId()}`; const deviceId = getUniqueId(); const version = '1.0.0'; const MAX_LOG_LINES = 300; if (Platform.OS == 'ios') { bundleId = `${bundleId}.${__DEV__ ? 'dev' : 'prod'}`; //bundleId = 'com.agprojects.sylk-ios.dev'; } const mainStyle = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 0 } }); function _parseSQLDate(key, value) { return new Date(value); } (function() { if ( typeof Object.id == "undefined" ) { var id = 0; Object.id = function(o) { if ( o && typeof o.__uniqueid == "undefined" ) { Object.defineProperty(o, "__uniqueid", { value: ++id, enumerable: false, // This could go either way, depending on your // interpretation of what an "id" is writable: false }); } return o ? o.__uniqueid : null; }; } })(); -const requestCameraPermission = async () => { - if (Platform.OS !== 'android') { - return; - } - - try { - const granted = await PermissionsAndroid.request( - PermissionsAndroid.PERMISSIONS.CAMERA, - { - title: "Sylk camera permission", - message: - "Sylk needs access to your camera " + - "so you can have video chat.", - buttonNeutral: "Ask Me Later", - buttonNegative: "Cancel", - buttonPositive: "OK" - } - ); - if (granted === PermissionsAndroid.RESULTS.GRANTED) { - //console.log("You can use the camera"); - } else { - console.log("Camera permission denied"); - } - } catch (err) { - console.warn(err); - } - - try { - const granted = await PermissionsAndroid.request( - PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, - { - title: "Sylk microphone permission", - message: - "Sylk needs access to your microphone " + - "so you can have audio calls.", - buttonNeutral: "Ask Me Later", - buttonNegative: "Cancel", - buttonPositive: "OK" - } - ); - if (granted === PermissionsAndroid.RESULTS.GRANTED) { - //console.log("You can use the microphone"); - } else { - console.log("Microphone permission denied"); - } - } catch (err) { - console.warn(err); - } -}; - - - class Sylk extends Component { constructor() { super(); autoBind(this) this._loaded = false; let isFocus = Platform.OS === 'ios'; this._initialState = { appState: null, autoLogin: true, inFocus: isFocus, accountId: '', password: '', displayName: '', + fontScale: 1, email: '', organization: '', account: null, lastSyncId: null, accountVerified: false, registrationState: null, registrationKeepalive: false, incomingCall: null, currentCall: null, connection: null, showIncomingModal: false, showScreenSharingModal: false, status: null, targetUri: '', missedTargetUri: '', loading: null, syncConversations: false, localMedia: null, generatedVideoTrack: false, contacts: [], devices: {}, speakerPhoneEnabled: null, orientation : 'portrait', Height_Layout : '', Width_Layout : '', outgoingCallUUID: null, incomingCallUUID: null, hardware: '', phoneNumber: '', isTablet: isTablet(), refreshHistory: false, refreshFavorites: false, myPhoneNumber: null, favoriteUris: [], blockedUris: [], missedCalls: [], initialUrl: null, reconnectingCall: false, muted: false, participantsToInvite: [], myInvitedParties: {}, myContacts: {}, defaultDomain: config.defaultDomain, + fileSharingUrl: config.fileSharingUrl, declineReason: null, showLogsModal: false, logs: '', proximityEnabled: true, messages: {}, selectedContact: null, callsState: {}, keys: null, showImportPrivateKeyModal: false, privateKey: null, privateKeyImportStatus: '', privateKeyImportSuccess: false, inviteContacts: false, shareToContacts: false, shareContent: [], selectedContacts: [], pinned: false, callContact: null, messageLimit: 100, messageZoomFactor: 1, messageStart: 0, contactsLoaded: false, replicateContacts: {}, updateContactUris: {}, blockedContacts: {}, decryptingMessages: {}, purgeMessages: [], showCallMeMaybeModal: false, enrollment: false, contacts: [], isTyping: false, avatarPhotos: {}, avatarEmails: {}, showConferenceModal: false, keyDifferentOnServer: false, serverPublicKey: null, generatingKey: false, appStoreVersion: null, firstSyncDone: false, showExportPrivateKeyModal: false, serverQueriedForPublicKey: false, navigationItems: {today: false, yesterday: false, conference: false} }; utils.timestampedLog('Init app'); this.pendingNewSQLMessages = []; this.newSyncMessagesCount = 0; this.syncStartTimestamp = null; this.syncRequested = false; this.mustSendPublicKey = false; this.syncTimer = null; this.lastSyncedMessageId = null; this.outgoingMedia = null; this.participantsToInvite = []; this.tokenSent = false; this.mustLogout = false; this.currentRoute = null; this.pushtoken = null; this.pushkittoken = null; this.intercomDtmfTone = null; this.registrationFailureTimer = null; this.startedByPush = false; this.heartbeats = 0; this.sql_contacts_keys = []; this._onFinishedPlayingSubscription = null this._onFinishedLoadingSubscription = null this._onFinishedLoadingFileSubscription = null this._onFinishedLoadingURLSubscription = null this.sync_pending_items = []; this.signup = {}; this.last_signup = null; this.state = Object.assign({}, this._initialState); this.myParticipants = {}; this.mySyncJournal = {}; 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; this.msg_sound_played_ts = null; this.initialChatContact = null; this.serverPublicKey = null; storage.initialize(); this.callKeeper = new CallManager(RNCallKeep, this.acceptCall, this.rejectCall, this.hangupCall, this.timeoutCall, this.callKeepStartConference, this.startCallFromCallKeeper, this.toggleMute, this.getConnection, this.addHistoryEntry, this.changeRoute, this.respawnConnection, this.isUnmounted ); if (InCallManager.recordPermission !== 'granted') { InCallManager.requestRecordPermission() .then((requestedRecordPermissionResult) => { //console.log("InCallManager.requestRecordPermission() requestedRecordPermissionResult: ", requestedRecordPermissionResult); }) .catch((err) => { //console.log("InCallManager.requestRecordPermission() catch: ", err); }); } - requestCameraPermission(); - // Load camera/mic preferences storage.get('devices').then((devices) => { if (devices) { this.setState({devices: devices}); } }); storage.get('account').then((account) => { if (account) { this.setState({accountVerified: account.verified}); } }); storage.get('keys').then((keys) => { if (keys) { const public_key = keys.public.replace(/\r/g,''); const private_key = keys.private.replace(/\r/g, '').trim(); keys.public = public_key; keys.private = private_key; this.setState({keys: keys}); console.log("Loaded PGP public key"); } }).catch((err) => { console.log("PGP keys loading error:", err); }); storage.get('myParticipants').then((myParticipants) => { if (myParticipants) { this.myParticipants = myParticipants; //console.log('My participants', this.myParticipants); } }); storage.get('signup').then((signup) => { if (signup) { this.signup = signup; } }); storage.get('last_signup').then((last_signup) => { if (last_signup) { this.last_signup = last_signup; } }); storage.get('mySyncJournal').then((mySyncJournal) => { if (mySyncJournal) { this.mySyncJournal = mySyncJournal; } }); + DeviceInfo.getFontScale().then((fontScale) => { + this.setState({fontScale: fontScale}); + }); + storage.get('lastSyncedMessageId').then((lastSyncedMessageId) => { if (lastSyncedMessageId) { this.lastSyncedMessageId = lastSyncedMessageId; } }); storage.get('proximityEnabled').then((proximityEnabled) => { this.setState({proximityEnabled: proximityEnabled}); }); if (this.state.proximityEnabled) { utils.timestampedLog('Proximity sensor enabled'); } else { utils.timestampedLog('Proximity sensor disabled'); } this.loadPeople(); for (let scheme of URL_SCHEMES) { DeepLinking.addScheme(scheme); } - this.sqlTableVersions = {'messages': 5, + this.sqlTableVersions = {'messages': 6, 'contacts': 7, 'keys': 2} this.updateTableQueries = {'messages': {1: [], 2: [{query: 'delete from messages', params: []}], 3: [{query: 'alter table messages add column unix_timestamp INTEGER default 0', params: []}], 4: [{query: 'alter table messages add column account TEXT', params: []}], 5: [{query: 'update messages set account = from_uri where direction = ?' , params: ['outgoing']}, {query: 'update messages set account = to_uri where direction = ?', params: ['incoming']}], + 6: [{query: 'alter table messages add column sender TEXT' , params: []}] }, 'contacts': {2: [{query: 'alter table contacts add column participants TEXT', params: []}], 3: [{query: 'alter table contacts add column direction TEXT', params: []}, {query: 'alter table contacts add column last_call_media TEXT', params: []}, {query: 'alter table contacts add column last_call_duration INTEGER default 0', params: []}, {query: 'alter table contacts add column last_call_id TEXT', params: []}, {query: 'alter table contacts add column conference INTEGER default 0', params: []}], 4: [{query: 'CREATE TABLE contacts2 as SELECT uri, account, name, organization, tags, participants, public_key, timestamp, direction, last_message, last_message_id, unread_messages, last_call_media, last_call_duration, last_call_id, conference from contacts', params: []}, {query: 'CREATE TABLE contacts3 (uri TEXT, account TEXT, name TEXT, organization TEXT, tags TEXT, participants TEXT, public_key TEXT, timestamp INTEGER, direction TEXT, last_message TEXT, last_message_id TEXT, unread_messages TEXT, last_call_media TEXT, last_call_duration INTEGER default 0, last_call_id TEXT, conference INTEGER default 0, PRIMARY KEY (account, uri))', params: []}, {query: 'drop table contacts', params: []}, {query: 'drop table contacts2', params: []}, {query: 'ALTER TABLE contacts3 RENAME TO contacts', params: []} ], 5: [{query: 'alter table contacts add column email TEXT', params: []}], 6: [{query: 'alter table contacts add column photo BLOB', params: []}], 7: [{query: 'alter table contacts add column email TEXT', params: []}] }, 'keys': {2: [{query: 'alter table keys add column last_sync_id TEXT', params: []}]} }; this.db = null; this.initSQL(); - } + } + + async requestStoragePermission() { + if (Platform.OS !== 'android') { + return; + } + + console.log('Request storage permission'); + + try { + const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE; + await PermissionsAndroid.request(permission); + Promise.resolve(); + } catch (error) { + Promise.reject(error); + } + } + + async requestCameraPermission() { + if (Platform.OS !== 'android') { + return; + } + //console.log('Request camera permission'); + + try { + const granted = await PermissionsAndroid.request( + PermissionsAndroid.PERMISSIONS.CAMERA, + { + title: "Sylk camera permission", + message: + "Sylk needs access to your camera " + + "so you can have video chat.", + buttonNeutral: "Ask Me Later", + buttonNegative: "Cancel", + buttonPositive: "OK" + } + ); + if (granted === PermissionsAndroid.RESULTS.GRANTED) { + //console.log("You can use the camera"); + } else { + console.log("Camera permission denied"); + } + } catch (err) { + console.warn(err); + } + } + + async requestMicPermission() { + if (Platform.OS !== 'android') { + return; + } + //console.log('Request mic permission'); + + try { + const granted = await PermissionsAndroid.request( + PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, + { + title: "Sylk microphone permission", + message: + "Sylk needs access to your microphone " + + "so you can have audio calls.", + buttonNeutral: "Ask Me Later", + buttonNegative: "Cancel", + buttonPositive: "OK" + } + ); + if (granted === PermissionsAndroid.RESULTS.GRANTED) { + //console.log("You can now use the microphone"); + } else { + console.log("Microphone permission denied"); + } + } catch (err) { + console.warn(err); + } + }; + async saveMyKey(keys) { this.setState({keys: {private: keys.private, public: keys.public}}); let myContacts = this.state.myContacts; if (this.state.account) { this.state.account.syncConversations(); var uri = uuid.v4() + '@' + this.state.defaultDomain; console.log('Send 1st public to', uri); this.sendPublicKey(uri); let accountId = this.state.account.id; if (accountId in myContacts) { } else { myContacts[accountId] = this.newContact(accountId); } myContacts[accountId].publicKey = keys.public; this.saveSylkContact(accountId, myContacts[accountId], 'PGP key generated'); } else { console.log('Send 1st public key later'); this.mustSendPublicKey = true; } let current_datetime = new Date(); const unixTime = Math.floor(current_datetime / 1000); let params = [this.state.accountId, keys.private, keys.public, unixTime]; await this.ExecuteQuery("INSERT INTO keys (account, private_key, public_key, timestamp) VALUES (?, ?, ?, ?)", params).then((result) => { console.log('SQL inserted private key'); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') > -1) { this.updateKeySql(keys); } else { console.log('Save keys SQL error:', error); } }); } async saveLastSyncId(id, force=false) { if (!force) { if (!this.state.keys || !this.state.keys.private) { console.log('Skip saving last sync id until we have a private key'); return } if (!this.state.firstSyncDone) { console.log('Skip saving last sync id until first sync is done'); return } } let params = [id, this.state.accountId]; await this.ExecuteQuery("update keys set last_sync_id = ? where account = ?", params).then((result) => { console.log('SQL saved last sync id', id); this.setState({lastSyncId: id}); }).catch((error) => { console.log('Save last sync id SQL error:', error); }); } async updateKeySql(keys) { let current_datetime = new Date(); const unixTime = Math.floor(current_datetime / 1000); let params = [keys.private, keys.public, unixTime, this.state.accountId]; await this.ExecuteQuery("update keys set private_key = ?, public_key = ?, timestamp = ? where account = ?", params).then((result) => { console.log('SQL updated private key'); }).catch((error) => { console.log('SQL error:', error); }); } loadMyKeys() { console.log('Loading PGP keys...'); let keys = {}; let lastSyncId; this.ExecuteQuery("SELECT * FROM keys where account = ?",[this.state.accountId]).then((results) => { let rows = results.rows; if (rows.length === 1) { var item = rows.item(0); keys.public = item.public_key; if (this.serverPublicKey === item.public_key) { this.setState({showImportPrivateKeyModal: false}); } keys.private = item.private_key; console.log('Loaded PGP private key for account', this.state.accountId); if (!item.last_sync_id && this.lastSyncedMessageId) { this.setState({keys: keys}); this.saveLastSyncId(this.lastSyncedMessageId); console.log('Migrated last sync id to SQL database'); storage.remove('lastSyncedMessageId'); lastSyncId = this.lastSyncedMessageId; } else { if (item.last_sync_id) { console.log('Loaded last sync id', item.last_sync_id); } this.setState({keys: keys, lastSyncId: item.last_sync_id}); lastSyncId = item.last_sync_id; } if (this.state.registrationState ==='registered' && !this.syncRequested) { this.syncRequested = true; console.log('Request sync messages from server', lastSyncId); this.state.account.syncConversations(lastSyncId); } } else { if (this.state.account) { this.generateKeysIfNecessary(this.state.account); } else { console.log('Wait for account become active...'); } } }); this.setState({contactsLoaded: true}); } async generateKeys() { const Options = { comment: 'Sylk key', email: this.state.accountId, name: this.state.displayName || this.state.accountId, keyOptions: KeyOptions } console.log('Generating key pair with options', Options); this.setState({loading: 'Generating private key...', generatingKey: true}); await OpenPGP.generate(Options).then((keys) => { const public_key = keys.publicKey.replace(/\r/g, '').trim(); const private_key = keys.privateKey.replace(/\r/g, '').trim(); keys.public = public_key; keys.private = private_key; console.log("PGP keypair generated"); this.setState({loading: null, generatingKey: false}); this.setState({showImportPrivateKeyModal: false}); this.saveMyKey(keys); this.showCallMeModal(); }).catch((error) => { console.log("PGP keys generation error:", error); }); } resetStorage() { return; console.log('Reset storage'); this.ExecuteQuery('delete from contacts'); this.ExecuteQuery('delete from messages'); this.saveLastSyncId(null); } loadSylkContacts() { console.log('Loading contacts...') let myContacts = {}; let blockedUris = []; let favoriteUris = []; let missedCalls = []; let myInvitedParties = {}; let localTime; let email; let contact; let timestamp; if (this.state.accountId in this.signup) { email = this.signup[this.state.accountId]; this.setState({email: email}); } if (!this.last_signup) { storage.set('last_signup', this.state.accountId); if (this.state.accountId in this.signup) { } else { this.signup[this.state.accountId] = ''; storage.set('signup', this.signup); } } this.setState({defaultDomain: this.state.accountId.split('@')[1]}); this.ExecuteQuery("SELECT * FROM contacts where account = ? order by timestamp desc",[this.state.accountId]).then((results) => { let rows = results.rows; let idx; let formatted_date; let updated; //console.log(rows.length, 'SQL rows'); if (rows.length > 0) { for (let i = 0; i < rows.length; i++) { var item = rows.item(i); updated = null; if (!item.uri) { continue; } contact = this.newContact(item.uri, item.name, {src: 'init'}); if (!contact) { continue; } this.sql_contacts_keys.push(item.uri); timestamp = new Date(item.timestamp * 1000); if (timestamp > new Date()) { timestamp = new Date(); updated = 'timestamp'; } myContacts[item.uri] = contact; myContacts[item.uri].organization = item.organization; myContacts[item.uri].email = item.email; myContacts[item.uri].photo = item.photo; myContacts[item.uri].publicKey = item.public_key; myContacts[item.uri].direction = item.direction; myContacts[item.uri].tags = item.tags ? item.tags.split(',') : []; myContacts[item.uri].participants = item.participants ? item.participants.split(',') : []; myContacts[item.uri].unread = item.unread_messages ? item.unread_messages.split(',') : []; myContacts[item.uri].lastMessageId = item.last_message_id === '' ? null : item.last_message_id; myContacts[item.uri].lastMessage = item.last_message === '' ? null : item.last_message; myContacts[item.uri].timestamp = timestamp; myContacts[item.uri].lastCallId = item.last_call_id; myContacts[item.uri].lastCallMedia = item.last_call_media ? item.last_call_media.split(',') : []; myContacts[item.uri].lastCallDuration = item.last_call_duration; let ab_contacts = this.lookupContacts(item.uri); if (ab_contacts.length > 0) { if (!myContacts[item.uri].name || myContacts[item.uri].name === '') { console.log('Update display name', myContacts[item.uri].name, 'of', item.uri, 'to', ab_contacts[0].name); myContacts[item.uri].name = ab_contacts[0].name; updated = 'name'; } myContacts[item.uri].label = ab_contacts[0].label; if (myContacts[item.uri].tags.indexOf('contact') === -1) { myContacts[item.uri].tags.push('contact'); updated = 'tags'; } } if (!myContacts[item.uri].photo) { var name_idx = myContacts[item.uri].name.trim().toLowerCase(); if (name_idx in this.state.avatarPhotos) { myContacts[item.uri].photo = this.state.avatarPhotos[name_idx]; updated = 'photo'; } } if (!myContacts[item.uri].email) { var name_idx = myContacts[item.uri].name.trim().toLowerCase(); if (name_idx in this.state.avatarEmails) { myContacts[item.uri].email = this.state.avatarEmails[name_idx]; updated = 'email'; } } if (myContacts[item.uri].tags.indexOf('missed') > -1) { missedCalls.push(item.last_call_id); if (myContacts[item.uri].unread.indexOf(item.last_call_id) === -1) { myContacts[item.uri].unread.push(item.last_call_id); } } else { idx = myContacts[item.uri].unread.indexOf(item.last_call_id); if (idx > -1) { myContacts[item.uri].unread.splice(idx, 1); } } if (item.uri === this.state.accountId) { this.setState({displayName: item.name, organization: item.organization}); if (email && !item.email) { item.email = email; } else { this.setState({email: item.email}); } } formatted_date = myContacts[item.uri].timestamp.getFullYear() + "-" + utils.appendLeadingZeroes(myContacts[item.uri].timestamp.getMonth() + 1) + "-" + utils.appendLeadingZeroes(myContacts[item.uri].timestamp.getDate()) + " " + utils.appendLeadingZeroes(myContacts[item.uri].timestamp.getHours()) + ":" + utils.appendLeadingZeroes(myContacts[item.uri].timestamp.getMinutes()) + ":" + utils.appendLeadingZeroes(myContacts[item.uri].timestamp.getSeconds()); //console.log('Loaded contact', formatted_date, item.uri, item.name); if(item.participants) { myInvitedParties[item.uri.split('@')[0]] = myContacts[item.uri].participants; } if (myContacts[item.uri].tags.indexOf('blocked') > -1) { blockedUris.push(item.uri); } if (myContacts[item.uri].tags.indexOf('favorite') > -1) { favoriteUris.push(item.uri); } if (updated) { this.saveSylkContact(item.uri, myContacts[item.uri], 'update contact at init because of ' + updated); } console.log('Load contact', item.uri, '-', item.name); } storage.get('cachedHistory').then((history) => { if (history) { //this.cachedHistory = history; history.forEach((item) => { //console.log(item); if (item.remoteParty in myContacts) { } else { myContacts[item.remoteParty] = this.newContact(item.remoteParty); } if (item.timezone && item.timezone !== undefined) { localTime = momenttz.tz(item.startTime, item.timezone).toDate(); if (localTime > myContacts[item.remoteParty].timestamp) { myContacts[item.remoteParty].timestamp = localTime; } } myContacts[item.remoteParty].name = item.displayName; myContacts[item.remoteParty].direction = item.direction === 'received' ? 'incoming' : 'outgoing'; myContacts[item.remoteParty].lastCallId = item.sessionId; myContacts[item.remoteParty].lastCallDuration = item.duration; myContacts[item.remoteParty].lastCallMedia = item.media; myContacts[item.remoteParty].conference = item.conference; myContacts[item.remoteParty].tags.push('history'); this.saveSylkContact(item.remoteParty, this.state.myContacts[item.remoteParty], 'init'); }); console.log('Migrated', history.length, 'server history entries'); storage.remove('cachedHistory'); } }); storage.get('history').then((history) => { if (history) { console.log('Loaded', history.length, 'local history entries'); history.forEach((item) => { if (item.remoteParty in myContacts) { } else { myContacts[item.remoteParty] = this.newContact(item.remoteParty); } if (item.timezone && item.timezone !== undefined) { localTime = momenttz.tz(item.startTime, item.timezone).toDate(); if (localTime > myContacts[item.remoteParty].timestamp) { myContacts[item.remoteParty].timestamp = localTime; } } myContacts[item.remoteParty].name = item.displayName; myContacts[item.remoteParty].direction = item.direction === 'received' ? 'incoming' : 'outgoing'; myContacts[item.remoteParty].lastCallId = item.sessionId; myContacts[item.remoteParty].lastCallDuration = item.duration; myContacts[item.remoteParty].lastCallMedia = item.media; myContacts[item.remoteParty].conference = item.conference; myContacts[item.remoteParty].tags.push('history'); this.saveSylkContact(item.remoteParty, this.state.myContacts[item.remoteParty], 'init'); }); console.log('Migrated', history.length, 'local history entries'); storage.remove('history'); } }); this.updateTotalUread(myContacts); console.log('Loaded', rows.length, 'contacts for account', this.state.accountId); this.setState({myContacts: myContacts, missedCalls: missedCalls, favoriteUris: favoriteUris, myInvitedParties: myInvitedParties, blockedUris: blockedUris}); } else { if (Object.keys(this.state.myContacts).length > 0) { Object.keys(this.state.myContacts).forEach((key) => { this.saveSylkContact(key, this.state.myContacts[key], 'init'); }); storage.set('contactStorage', 'sql'); storage.remove('myContacts'); } } this.refreshNavigationItems(); setTimeout(() => { if (this.initialChatContact) { console.log('Starting chat with', this.initialChatContact); if (this.initialChatContact in this.state.myContacts) { this.selectContact(this.state.myContacts[this.initialChatContact]); } this.initialChatContact = null; } }, 100); setTimeout(() => { this.getMessages(); }, 500); this.loadMyKeys(); }); } addTestContacts() { let myContacts = this.state.myContacts; let test_numbers = [ {uri: '4444@sylk.link', name: 'Test microphone'}, {uri: '3333@sylk.link', name: 'Test video'} ]; test_numbers.forEach((item) => { if (Object.keys(myContacts).indexOf(item.uri) === -1) { myContacts[item.uri] = this.newContact(item.uri, item.name, {src: 'init'}); myContacts[item.uri].tags.push('test'); this.saveSylkContact(item.uri, myContacts[item.uri], 'init uri'); } else { if (myContacts[item.uri].tags.indexOf('test') === -1) { myContacts[item.uri].tags.push('test'); this.saveSylkContact(item.uri, myContacts[item.uri], 'init tags'); } if (!myContacts[item.uri].name) { myContacts[item.uri].name = item.name; - this.saveSylkContact(item.uri, myContacts[item.uri], 'init ma,e'); + this.saveSylkContact(item.uri, myContacts[item.uri], 'init name'); } } }); } loadPeople() { let myContacts = {}; let blockedUris = []; let favoriteUris = []; let displayName = null; storage.get('contactStorage').then((contactStorage) => { if (contactStorage !== 'sql') { storage.get('myContacts').then((myContacts) => { let myContactsObjects = {}; if (myContacts) { Object.keys(myContacts).forEach((key) => { if (!Array.isArray(myContacts[key]['unread'])) { myContacts[key]['unread'] = []; } if(typeof(myContacts[key]) == 'string') { console.log('Convert display name object'); myContactsObjects[key] = {'name': myContacts[key]} } else { myContactsObjects[key] = myContacts[key]; } }); myContacts = myContactsObjects; } else { myContacts = {}; } this.setState({myContacts: myContacts}); storage.get('favoriteUris').then((favoriteUris) => { favoriteUris = favoriteUris.filter(item => item !== null); //console.log('My favorites:', favoriteUris); this.setState({favoriteUris: favoriteUris}); storage.remove('favoriteUris'); }).catch((error) => { //console.log('get favoriteUris error:', error); let uris = Object.keys(myContacts); uris.forEach((uri) => { if (myContacts[uri].favorite) { favoriteUris.push(uri); } }); this.setState({favoriteUris: favoriteUris}); }); storage.get('blockedUris').then((blockedUris) => { blockedUris = blockedUris.filter(item => item !== null); this.setState({blockedUris: blockedUris}); storage.remove('blockedUris'); }).catch((error) => { //console.log('get blockedUris error:', error); let uris = Object.keys(myContacts); uris.forEach((uri) => { if (myContacts[uri].blocked) { blockedUris.push(uri); } }); this.setState({blockedUris: blockedUris}); }); }).catch((error) => { console.log('get myContacts error:', error); }); } }); } async initSQL() { const database_name = "sylk.db"; const database_version = "1.0"; const database_displayname = "Sylk Database"; const database_size = 200000; await SQLite.openDatabase(database_name, database_version, database_displayname, database_size).then((DB) => { this.db = DB; console.log('SQL database', database_name, 'opened'); this.resetStorage(); //this.dropTables(); this.createTables(); }).catch((error) => { console.log('SQL database error:', error); }); } dropTables() { console.log('Drop SQL tables...') this.ExecuteQuery("DROP TABLE if exists 'chat_uris';"); this.ExecuteQuery("DROP TABLE if exists 'recipients';"); this.ExecuteQuery("DROP TABLE 'messages';"); this.ExecuteQuery("DROP TABLE 'versions';"); } createTables() { //console.log('Create SQL tables...') let create_versions_table = "CREATE TABLE IF NOT EXISTS 'versions' ( \ 'id' INTEGER PRIMARY KEY AUTOINCREMENT, \ 'table' TEXT UNIQUE, \ 'version' INTEGER NOT NULL );\ "; this.ExecuteQuery(create_versions_table).then((success) => { //console.log('SQL version table created'); }).catch((error) => { console.log(create_versions_table); console.log('SQL version table creation error:', error); }); let create_table_messages = "CREATE TABLE IF NOT EXISTS 'messages' ( \ 'msg_id' TEXT, \ 'timestamp' TEXT, \ 'account' TEXT, \ 'unix_timestamp' INTEGER default 0, \ + 'sender' TEXT, \ 'content' BLOB, \ 'content_type' TEXT, \ 'from_uri' TEXT, \ 'to_uri' TEXT, \ 'sent' INTEGER, \ 'sent_timestamp' TEXT, \ 'received' INTEGER, \ 'received_timestamp' TEXT, \ 'expire_interval' INTEGER, \ 'deleted' INTEGER, \ 'pinned' INTEGER, \ 'pending' INTEGER, \ 'system' INTEGER, \ 'url' TEXT, \ 'encrypted' INTEGER default 0, \ 'direction' TEXT, \ PRIMARY KEY (account, msg_id)) \ "; this.ExecuteQuery(create_table_messages).then((success) => { //console.log('SQL messages table OK'); }).catch((error) => { console.log(create_table_messages); console.log('SQL messages table creation error:', error); }); let create_table_contacts = "CREATE TABLE IF NOT EXISTS 'contacts' ( \ 'uri' TEXT, \ 'account' TEXT, \ 'name' TEXT, \ 'organization' TEXT, \ 'tags' TEXT, \ 'photo' BLOB, \ 'email' TEXT, \ 'participants' TEXT, \ 'public_key' TEXT, \ 'timestamp' INTEGER, \ 'direction' TEXT, \ 'last_message' TEXT, \ 'last_message_id' TEXT, \ 'unread_messages' TEXT, \ 'last_call_media' TEXT, \ 'last_call_duration' INTEGER default 0, \ 'last_call_id' TEXT, \ 'conference' INTEGER default 0, \ PRIMARY KEY (account, uri)) \ "; this.ExecuteQuery(create_table_contacts).then((success) => { //console.log('SQL contacts table OK'); }).catch((error) => { console.log(create_table_contacts); console.log('SQL messages table creation error:', error); }); let create_table_keys = "CREATE TABLE IF NOT EXISTS 'keys' ( \ 'account' TEXT PRIMARY KEY, \ 'private_key' TEXT, \ 'checksum' TEXT, \ 'public_key' TEXT, \ 'last_sync_id' TEXT, \ 'timestamp' INTEGER ) \ "; this.ExecuteQuery(create_table_keys).then((success) => { //console.log('SQL keys table OK'); }).catch((error) => { console.log(create_table_keys); console.log('SQL keys table creation error:', error); }); this.upgradeSQLTables(); } upgradeSQLTables() { //console.log('Upgrade SQL tables') let query; let update_queries; let update_sub_queries; let version_numbers; /* this.ExecuteQuery("ALTER TABLE 'messages' add column received_timestamp TEXT after received"); this.ExecuteQuery("ALTER TABLE 'messages' add column sent_timestamp TEXT after sent"); */ //query = "update versions set version = \"4\" where \"table\" = 'messages'"; // this.ExecuteQuery(query); query = "SELECT * FROM versions"; let currentVersions = {}; this.ExecuteQuery(query,[]).then((results) => { let rows = results.rows; for (let i = 0; i < rows.length; i++) { var item = rows.item(i); currentVersions[item.table] = item.version; //console.log('Table', item.table, 'version', item.version); } for (const [key, value] of Object.entries(this.sqlTableVersions)) { if (currentVersions[key] == null) { query = "INSERT INTO versions ('table', 'version') values ('" + key + "', '" + this.sqlTableVersions[key] + "')"; //console.log(query); this.ExecuteQuery(query); } else { //console.log('Table', key, 'has version', value); if (this.sqlTableVersions[key] > currentVersions[key]) { console.log('Table', key, 'must have version', value, 'and it has', currentVersions[key]); update_queries = this.updateTableQueries[key]; version_numbers = Object.keys(update_queries); version_numbers.sort(function(a, b){return a-b}); version_numbers.forEach((version) => { if (version <= currentVersions[key]) { return; } update_sub_queries = update_queries[version]; update_sub_queries.forEach((query_objects) => { console.log('Run query for table', key, 'version', version, ':', query_objects.query); this.ExecuteQuery(query_objects.query, query_objects.params); }); }); query = "update versions set version = " + this.sqlTableVersions[key] + " where \"table\" = '" + key + "';"; //console.log(query); this.ExecuteQuery(query); } else { //console.log('No upgrade required for table', key); } } } }).catch((error) => { console.log('SQL error:', error); }); } /* * Execute sql queries * * @param sql * @param params * * @returns {resolve} results */ ExecuteQuery = (sql, params = []) => new Promise((resolve, reject) => { //console.log('-- Execute SQL query:', sql, params); this.db.transaction((trans) => { trans.executeSql(sql, params, (trans, results) => { resolve(results); }, (error) => { reject(error); }); }); }); async loadDeviceContacts() { 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 avatarPhotos = {}; let avatarEmails = {}; 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; } else { photo = null; } //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(), name: name.trim(), uri: number_stripped, type: 'contact', photo: photo, label: number['label'], tags: ['contact']}; if (photo) { var name_idx = name.trim().toLowerCase(); avatarPhotos[name_idx] = photo; } contact_cards.push(contact_card); //console.log('Added AB contact', name, number_stripped); seen_uris.set(number_stripped, true); } } }); contact['emailAddresses'].forEach(function (email, index) { let email_stripped = email['email'].replace(/\s|\(|\)/g, ''); if (!seen_uris.has(email_stripped)) { //console.log(name, email['label'], email_stripped); var contact_card = {id: uuid.v4(), name: name.trim(), uri: email_stripped, type: 'contact', photo: photo, label: email['label'], tags: ['contact'] }; var name_idx = name.trim().toLowerCase(); if (photo) { avatarPhotos[name_idx] = photo; } if (name_idx in avatarEmails) { } else { avatarEmails[name_idx] = email_stripped; } contact_cards.push(contact_card); seen_uris.set(email_stripped, true); } }); } this.setState({contacts: contact_cards, avatarPhotos: avatarPhotos, avatarEmails: avatarEmails}); console.log('Loaded', contact_cards.length, 'addressbook entries'); } }) } 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) { utils.timestampedLog('Change route', route, 'with reason:', reason); + let messages = this.state.messages; + if (this.currentRoute === route) { - if (route === '/ready' && this.state.selectedContact) { - this.setState({ + if (route === '/ready') { + if (this.state.selectedContact) { + if (this.state.callContact) { + if (this.state.callContact.uri !== this.state.selectedContact.uri && this.state.selectedContact.uri in messages) { + delete messages[this.state.selectedContact.uri]; + } + } else { + if (this.state.selectedContact.uri in messages) { + delete messages[this.state.selectedContact.uri]; + } + } + this.setState({ + messages: messages, selectedContact: null, - targetUri: '', + targetUri: '' + }); + } else { + this.setState({ messages: {}, messageZoomFactor: 1 }); + } } return; } else { - if (route === '/ready' && this.state.selectedContact) { + if (route === '/ready' && this.state.selectedContact && Object.keys(this.state.messages).indexOf(this.state.selectedContact.uri) === -1) { + console.log('get messages in changeRoute'); this.getMessages(this.state.selectedContact.uri); } } if (this.currentRoute !== route) { utils.timestampedLog('Change route:', this.currentRoute, '->', route, reason); } if (route === '/conference') { this.backToForeground(); this.setState({inviteContacts: false}); } if (route === '/call') { this.backToForeground(); } if (route === '/ready' && reason !== 'back to home') { Vibration.cancel(); if (reason === 'conference_really_ended' && this.callKeeper.countCalls) { utils.timestampedLog('Change route cancelled because we still have calls'); return; } this.startedByPush = false; if (this.state.currentCall && reason === 'outgoing_connection_failed' && this.state.currentCall.direction === 'outgoing') { - console.log('Connection failed this.state.currentCall', this.state.currentCall); let target_uri = this.state.currentCall.remoteIdentity.uri.toLowerCase(); let options = {audio: true, video: true, participants: []} let streams = this.state.currentCall.getLocalStreams(); if (streams.length > 0) { let tracks = streams[0].getVideoTracks(); let mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio'; if (mediaType === 'audio') { options.video = false; } } this.setState({reconnectingCall: true}); console.log('Reconnecting call to', target_uri, 'with options', options); setTimeout(() => { if (target_uri.indexOf('@videoconference') > -1) { this.callKeepStartConference(target_uri, options); } else { this.callKeepStartCall(target_uri, options); } }, 5000); this.setState({ outgoingCallUUID: null, currentCall: null, selectedContacts: [], reconnectingCall: true, muted: false }); } else { + if (this.state.callContact && this.state.callContact.uri in messages) { + delete messages[this.state.callContact.uri]; + } + this.setState({ outgoingCallUUID: null, currentCall: null, callContact: null, + messages: {}, selectedContact: null, inviteContacts: false, shareToContacts: false, selectedContacts: [], incomingCall: (reason === 'accept_new_call' || reason === 'user_hangup_call') ? this.state.incomingCall: null, reconnectingCall: false, muted: false }); } if (this.currentRoute === '/call' || this.currentRoute === '/conference') { if (reason !== 'user_hangup_call') { this.stopRingback(); InCallManager.stop(); } this.closeLocalMedia(); if (reason === 'accept_new_call') { if (this.state.incomingCall) { // then answer the new call if any let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.mediaTypes.video) ? true : false; this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call'); } } else if (reason === 'escalate_to_conference') { const uri = `${utils.generateSillyName()}@${config.defaultConferenceDomain}`; const options = {audio: this.outgoingMedia ? this.outgoingMedia.audio: true, video: this.outgoingMedia ? this.outgoingMedia.video: true, participants: this.participantsToInvite} this.callKeepStartConference(uri.toLowerCase(), options); } else { if (this.state.account && this._loaded) { setTimeout(() => { this.updateServerHistory() }, 1500); } } } if (reason === 'registered') { setTimeout(() => { this.updateServerHistory() }, 1500); } if (reason === 'no_more_calls') { this.updateServerHistory() } if (reason === 'start_up') { storage.get('account').then((account) => { if (account) { this.handleRegistration(account.accountId, account.password); } else { this.changeRoute('/login', 'start up'); } }); this.fetchSharedItems(); } } this.currentRoute = route; history.push(route); } componentWillUnmount() { utils.timestampedLog('App will unmount'); AppState.removeEventListener('change', this._handleAppStateChange); this._onFinishedPlayingSubscription.remove(); this._onFinishedLoadingSubscription.remove(); this._onFinishedLoadingURLSubscription.remove(); this._onFinishedLoadingFileSubscription.remove(); this.callKeeper.destroy(); this.closeConnection(); this._loaded = false; } get unmounted() { return !this._loaded; } isUnmounted() { return this.unmounted; } backPressed() { console.log('Back button pressed in route', this.currentRoute); if (this.currentRoute === '/ready' && this.state.selectedContact) { this.goBackToHome(); } if (this.currentRoute === '/call' || this.currentRoute === '/conference') { let call = this.state.currentCall || this.state.incomingCall; if (call && call.id) { this.hangupCall(call.id, 'user_hangup_call'); } } return true; } async componentDidMount() { utils.timestampedLog('App did mount'); + //this.requestStoragePermission(); BackHandler.addEventListener('hardwareBackPress', this.backPressed); // Start a timer that runs once after X milliseconds BackgroundTimer.runBackgroundTimer(() => { // this will be executed once after 10 seconds // even when app is the the background this.heartbeat(); }, 5000); try { await RNCallKeep.supportConnectionService (); //utils.timestampedLog('Connection service is enabled'); } catch(err) { utils.timestampedLog(err); } try { await RNCallKeep.hasPhoneAccount(); //utils.timestampedLog('Phone account is enabled'); } catch(err) { utils.timestampedLog(err); } if (Platform.OS === 'android') { RNDrawOverlay.askForDispalayOverOtherAppsPermission() .then(res => { //utils.timestampedLog("Display over other apps was granted"); // res will be true if permission was granted }) .catch(e => { utils.timestampedLog("Display over other apps was declined"); // permission was declined }) } // prime the ref //logger.debug('NotificationCenter ref: %o', this._notificationCenter); this._boundOnPushkitRegistered = this._onPushkitRegistered.bind(this); this._boundOnPushRegistered = this._onPushRegistered.bind(this); this._detectOrientation(); getPhoneNumber().then(phoneNumber => { this.setState({myPhoneNumber: phoneNumber}); this.loadDeviceContacts(); }); this.listenforPushNotifications(); this.listenforSoundNotifications(); this._loaded = true; this.checkVersion(); } checkVersion() { let appId = Platform.OS === 'android' ? "com.agprojects.sylk" : "1489960733"; if (Platform.OS === 'android') { // TODO fix me return; } getAppstoreAppMetadata("1489960733") //put any apps id here .then(appVersion => { console.log("Sylk app version on appstore", appVersion.version, "published on", appVersion.currentVersionReleaseDate); this.setState({appStoreVersion: appVersion}); }) .catch(err => { console.log("Error fetching app store version occurred", err); }); } listenforSoundNotifications() { // Subscribe to event(s) you want when component mounted this._onFinishedPlayingSubscription = SoundPlayer.addEventListener('FinishedPlaying', ({ success }) => { //console.log('finished playing', success) }) this._onFinishedLoadingSubscription = SoundPlayer.addEventListener('FinishedLoading', ({ success }) => { //console.log('finished loading', success) }) this._onFinishedLoadingFileSubscription = SoundPlayer.addEventListener('FinishedLoadingFile', ({ success, name, type }) => { //console.log('finished loading file', success, name, type) }) this._onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', ({ success, url }) => { //console.log('finished loading url', success, url) }) } registerAndroidNotifications(parent) { // Must be outside of any component LifeCycle (such as `componentDidMount`). //console.log('registerAndroidNotifications'); PushNotification.configure({ // (optional) Called when Token is generated (iOS and Android) onRegister: function (token) { //console.log("TOKEN:", token); }, // (required) Called when a remote is received or opened, or local notification is opened onNotification: function (notification) { parent.handleAndroidNotification(notification); // process the notification // (required) Called when a remote is received or opened, or local notification is opened notification.finish(PushNotificationIOS.FetchResult.NoData); }, // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android) onAction: function (notification) { console.log("ACTION:", notification.action); console.log("NOTIFICATION:", notification); // process the action }, // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS) onRegistrationError: function(err) { console.error(err.message, err); }, }); PushNotification.createChannel( { channelId: "sylk-messages", // (required) channelName: "My Sylk stream", // (required) channelDescription: "A channel to receive Sylk Message", // (optional) default: undefined. playSound: false, // (optional) default: true importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance vibrate: true, // (optional) default: true. Creates the default vibration pattern if true. }, (created) => null // (optional) callback returns whether the channel was created, false means it already existed. ); PushNotification.createChannel( { channelId: "sylk-messages-sound", // (required) channelName: "My Sylk stream", // (required) channelDescription: "A channel to receive Sylk Message", // (optional) default: undefined. playSound: true, // (optional) default: true soundName: "default", // (optional) See `soundName` parameter of `localNotification` function importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance vibrate: true, // (optional) default: true. Creates the default vibration pattern if true. }, (created) => null // (optional) callback returns whether the channel was created, false means it already existed. ); //console.log('Available Sylk channels:'); PushNotification.getChannels(function (channel_ids) { //console.log(channel_ids); // ['channel_id_1'] }); } handleAndroidNotification(notification) { // when user touches the system notification and app launches... console.log("Handle Android push notification:", notification); let uri = notification.data.from_uri; if (!uri) { return; } if (uri in this.state.myContacts) { if (!this.state.selectedContact) { this.selectContact(this.state.myContacts[uri]); } this.initialChatContact = null; } else { this.initialChatContact = uri; } } handleiOSNotification(notification) { // when user touches the system notification and app launches... console.log("Handle iOS push notification:", notification); } sendLocalAndroidNotification(uri, content) { //https://www.npmjs.com/package/react-native-push-notification PushNotification.localNotification({ /* Android Only Properties */ channelId: "sylk-messages", // (required) channelId, if the channel doesn't exist, notification will not trigger. showWhen: true, // (optional) default: true autoCancel: true, // (optional) default: true largeIcon: "ic_launcher", // (optional) default: "ic_launcher". Use "" for no large icon. largeIconUrl: "https://icanblink.com/apple-touch-icon-180x180.png", // (optional) default: undefined smallIcon: "", // (optional) default: "ic_notification" with fallback for "ic_launcher". Use "" for default small icon. bigText: content, // (optional) default: "message" prop subText: "New message", // (optional) default: none //bigPictureUrl: "https://www.example.tld/picture.jpg", // (optional) default: undefined bigLargeIcon: "ic_launcher", // (optional) default: undefined bigLargeIconUrl: "https://www.example.tld/bigicon.jpg", // (optional) default: undefined color: "red", // (optional) default: system default vibrate: true, // (optional) default: true vibration: 100, // vibration length in milliseconds, ignored if vibrate=false, default: 1000 priority: "high", // (optional) set notification priority, default: high ignoreInForeground: true, // (optional) if true, the notification will not be visible when the app is in the foreground (useful for parity with how iOS notifications appear). should be used in combine with `com.dieam.reactnativepushnotification.notification_foreground` setting onlyAlertOnce: true, // (optional) alert will open only once with sound and notify, default: false invokeApp: true, // (optional) This enable click on actions to bring back the application to foreground or stay in background, default: true /* iOS and Android properties */ id: 0, // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID title: uri, // (optional) message: content, // (required) //picture: "https://www.example.tld/picture.jpg", // (optional) Display an picture with the notification, alias of `bigPictureUrl` for Android. default: undefined userInfo: {}, // (optional) default: {} (using null throws a JSON value '' error) playSound: false, // (optional) default: true soundName: "default", // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played) number: 10, // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero) repeatType: "day", // (optional) Repeating interval. Check 'Repeating Notifications' section for more info. }); } listenforPushNotifications() { if (this.state.appState === null) { this.setState({appState: 'active'}); } else { return; } if (Platform.OS === 'android') { Linking.getInitialURL().then((url) => { if (url) { utils.timestampedLog('Initial external URL: ' + url); this.eventFromUrl(url); } if (this.state.accountVerified) { this.changeRoute('/ready', 'start_up'); } else { this.changeRoute('/login', 'start_up'); } }).catch(err => { logger.error({ err }, 'Error getting external URL'); }); firebase.messaging().getToken() .then(fcmToken => { if (fcmToken) { this._onPushRegistered(fcmToken); } }); Linking.addEventListener('url', this.updateLinkingURL); } else if (Platform.OS === 'ios') { if (this.state.accountVerified) { this.changeRoute('/ready', 'start_up'); } else { this.changeRoute('/login', 'start_up'); } VoipPushNotification.addEventListener('register', this._boundOnPushkitRegistered); VoipPushNotification.registerVoipToken(); PushNotificationIOS.addEventListener('register', this._boundOnPushRegistered); PushNotificationIOS.addEventListener('localNotification', this.onLocalNotification); PushNotificationIOS.addEventListener('notification', this.onRemoteNotification); //let permissions = await checkIosPermissions(); //if (!permissions.alert) { PushNotificationIOS.requestPermissions(); //} } this.boundProximityDetect = this._proximityDetect.bind(this); DeviceEventEmitter.addListener('Proximity', this.boundProximityDetect); AppState.addEventListener('change', this._handleAppStateChange); if (Platform.OS === 'ios') { this._boundOnNotificationReceivedBackground = this._onNotificationReceivedBackground.bind(this); this._boundOnLocalNotificationReceivedBackground = this._onLocalNotificationReceivedBackground.bind(this); VoipPushNotification.addEventListener('notification', this._boundOnNotificationReceivedBackground); VoipPushNotification.addEventListener('localNotification', this._boundOnLocalNotificationReceivedBackground); } else if (Platform.OS === 'android') { this.registerAndroidNotifications(this); AppState.addEventListener('focus', this._handleAndroidFocus); AppState.addEventListener('blur', this._handleAndroidBlur); firebase .messaging() .requestPermission() .then(() => { // User has authorised }) .catch(error => { // User has rejected permissions }); this.messageListener = firebase .messaging() .onMessage((message: RemoteMessage) => { // this will just wake up the app to receive // the web-socket invite handled by this.incomingCall() let event = message.data.event; const callUUID = message.data['session-id']; const from = message.data['from_uri']; const to = message.data['to_uri']; const displayName = message.data['from_display_name']; const outgoingMedia = {audio: true, video: message.data['media-type'] === 'video'}; const mediaType = message.data['media-type'] || 'audio'; if (this.unmounted) { return; } if (event === 'incoming_conference_request') { utils.timestampedLog('Push notification: incoming conference', callUUID); if (!from || !to) { return; } this.incomingConference(callUUID, to, from, displayName, outgoingMedia); } else if (event === 'incoming_session') { utils.timestampedLog('Push notification: incoming call', callUUID); if (!from) { return; } this.incomingCallFromPush(callUUID, from, displayName, mediaType); } else if (event === 'cancel') { this.cancelIncomingCall(callUUID); } else if (event === 'message') { if (!from) { return; } console.log('Push notification: new messages on Sylk server from', from); } }); } } notifyIncomingMessageWhileInACall(from) { if (!this.state.selectedContact) { return; } if (this.state.selectedContact.uri !== from) { this._notificationCenter.postSystemNotification('New message from ' + from); this.vibrate(); return; } if (this.state.currentCall && this.state.currentCall.remoteIdentity.uri === from) { this.vibrate(); if (this.currentRoute !== '/ready') { this.goBackToHomeFromCall(); } return; } } sendLocalNotificationWithSound (){ console.log('sendLocalNotificationWithSound'); //PushNotificationIOS.addNotificationRequest({ PushNotificationIOS.presentLocalNotification({ id: 'notificationWithSound', title: 'Sample Title', subtitle: 'Sample Subtitle', body: 'Sample local notification with custom sound', sound: 'customSound.wav', badge: 1, }); }; sendNotification (title, subtitle, body) { DeviceEventEmitter.emit('remoteNotificationReceived', { remote: true, aps: { alert: {title: title, subtitle: subtitle, body: body}, sound: 'default', category: 'REACT_NATIVE', 'content-available': 1, 'mutable-content': 1, }, }); }; sendSilentNotification () { DeviceEventEmitter.emit('remoteNotificationReceived', { remote: true, aps: { category: 'REACT_NATIVE', 'content-available': 1, }, }); }; onRemoteNotification(notification) { const title = notification.getAlert().title; const subtitle = notification.getAlert().subtitle; const body = notification.getAlert().body; const message = notification.getMessage(); const content_available = notification.getContentAvailable(); const category = notification.getCategory(); const badge = notification.getBadgeCount(); const sound = notification.getSound(); const isClicked = notification.getData().userInteraction === 1; console.log('Got remote notification', title, subtitle, body); this.sendLocalNotification(title + ' ' + subtitle, body); }; sendLocalNotification (title, body) { PushNotificationIOS.presentLocalNotification({ alertTitle: title, alertBody: body }); }; onLocalNotification(notification) { //console.log('Got local notification', notification); this.updateTotalUread(); }; cancelIncomingCall(callUUID) { if (this.unmounted) { return; } if (this.callKeeper._acceptedCalls.has(callUUID)) { return; } utils.timestampedLog('Push notification: cancel call', callUUID); let call = this.callKeeper._calls.get(callUUID); if (!call) { if (!this.callKeeper._cancelledCalls.has(callUUID)) { utils.timestampedLog('Cancel incoming call that did not arrive on web socket', callUUID); this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED); this.startedByPush = false; if (this.startedByPush) { this.changeRoute('/ready', 'incoming_call_cancelled'); } } return; } if (call.state === 'incoming') { utils.timestampedLog('Cancel incoming call that was not yet accepted', callUUID); this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED); if (this.startedByPush) { this.changeRoute('/ready', 'incoming_call_cancelled'); } } } _proximityDetect(data) { //utils.timestampedLog('Proximity changed, isNear is', data.isNear); if (!this.state.proximityEnabled) { return; } if (data.isNear) { this.speakerphoneOff(); } else { this.speakerphoneOn(); } } startCallWhenReady(targetUri, options) { this.resetGoToReadyTimer(); if (options.conference) { this.startConference(targetUri, options); } else { this.startCall(targetUri, options); } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } _onPushkitRegistered(token) { this.pushkittoken = token; } _onPushRegistered(token) { this.pushtoken = token; } _sendPushToken(account) { if ((this.pushtoken && !this.tokenSent)) { let token = null; //console.log('_sendPushToken this.pushtoken', this.pushtoken); if (Platform.OS === 'ios') { token = `${this.pushkittoken}-${this.pushtoken}`; } else if (Platform.OS === 'android') { token = this.pushtoken; } utils.timestampedLog('Push token for app', bundleId, 'sent:', token); account.setDeviceToken(token, Platform.OS, deviceId, true, bundleId); this.tokenSent = true; } } _handleAndroidFocus = nextFocus => { //utils.timestampedLog('----- APP in focus'); if (Platform.OS === 'ios') { PushNotificationIOS.cancelLocalNotifications(); } else { PushNotification.cancelAllLocalNotifications(); } this.setState({inFocus: true}); this.refreshNavigationItems(); this.fetchSharedItems(); this.respawnConnection(); } fetchSharedItems() { return; console.log('fetchSharedItems...'); ReceiveSharingIntent.getReceivedFiles(files => { // files returns as JSON Array example //[{ filePath: null, text: null, weblink: null, mimeType: null, contentUri: null, fileName: null, extension: null }] console.log(files); if (files.length > 0) { console.log('Will share to contacts', files); this.setState({shareToContacts: true, shareContent: files}); let item = files[0]; let what = 'Share text with contacts'; if (item.weblink) { what = 'Share web link with contacts'; } if (item.filePath) { what = 'Share file with contacts'; } this._notificationCenter.postSystemNotification(what); } else { console.log('Nothing to share'); } }, (error) =>{ console.log(error); }, 'ShareMedia' // share url protocol (must be unique to your app, suggest using your apple bundle id) ); } refreshNavigationItems() { var todayStart = new Date(); todayStart.setHours(0,0,0,0); var yesterdayStart = new Date(); yesterdayStart.setDate(yesterdayStart.getDate() - 2); yesterdayStart.setHours(0,0,0,0); let today = false; let yesterday = false; let conference = false; let navigationItems = this.state.navigationItems; Object.keys(this.state.myContacts).forEach((key) => { if (this.state.myContacts[key].tags.indexOf('conference') > -1 || this.state.myContacts[key].conference) { conference = true; } if (this.state.myContacts[key].timestamp > todayStart) { today = true; } if (this.state.myContacts[key].timestamp > yesterdayStart && this.state.myContacts[key].timestamp < todayStart) { yesterday = true; } }); navigationItems = {today: today, yesterday: yesterday, conference: conference}; this.setState({navigationItems: navigationItems}); } _handleAndroidBlur = nextBlur => { //utils.timestampedLog('----- APP out of focus'); this.setState({inFocus: false}); } _handleAppStateChange = nextAppState => { //utils.timestampedLog('----- APP state changed', this.state.appState, '->', nextAppState); if (nextAppState === this.state.appState) { return; } if (this.callKeeper.countCalls === 0 && !this.state.outgoingCallUUID) { /* utils.timestampedLog('----- APP state changed', this.state.appState, '->', nextAppState); if (this.callKeeper.countCalls) { utils.timestampedLog('- APP state changed, we have', this.callKeeper.countCalls, 'calls'); } if (this.callKeeper.countPushCalls) { utils.timestampedLog('- APP state changed, we have', this.callKeeper.countPushCalls, 'push calls'); } if (this.startedByPush) { utils.timestampedLog('- APP state changed, started by push in', nextAppState, 'state'); } if (this.state.connection) { utils.timestampedLog('- APP state changed from', this.state.appState, 'to', nextAppState, 'with connection', Object.id(this.state.connection)); } else { utils.timestampedLog('- APP state changed from', this.state.appState, 'to', nextAppState); } */ } if (this.state.appState === 'background' && nextAppState === 'active') { this.respawnConnection(nextAppState); } this.setState({appState: nextAppState}); } respawnConnection(state) { if (!this.state.connection) { utils.timestampedLog('Web socket does not exist'); } else if (!this.state.connection.state) { utils.timestampedLog('Web socket is waiting for connection...'); } else { /* if (this.state.connection.state !== 'ready' && this.state.connection.state !== 'connecting') { utils.timestampedLog('Web socket', Object.id(this.state.connection), 'reconnecting because', this.state.connection.state); this.state.connection.reconnect(); utils.timestampedLog('Web socket', Object.id(this.state.connection), 'new state is', this.state.connection.state); } */ } if (this.state.account) { if (!this.state.connection) { utils.timestampedLog('Active account without connection removed'); this.setState({account: null}); } } else { utils.timestampedLog('No active account'); } if (this.state.accountId && (!this.state.connection || !this.state.account)) { this.handleRegistration(this.state.accountId, this.state.password); } } closeConnection(reason='unmount') { if (!this.state.connection) { return; } if (!this.state.account && this.state.connection) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this.state.connection.close(); utils.timestampedLog('Web socket', Object.id(this.state.connection), 'will close'); this.setState({connection: null, account: null}); } else if (this.state.connection && this.state.account) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this.state.account.removeListener('outgoingCall', this.outgoingCall); this.state.account.removeListener('conferenceCall', this.outgoingConference); this.state.account.removeListener('incomingCall', this.incomingCallFromWebSocket); this.state.account.removeListener('missedCall', this.missedCall); this.state.account.removeListener('conferenceInvite', this.conferenceInviteFromWebSocket); this.state.connection.removeAccount(this.state.account, (error) => { if (error) { utils.timestampedLog('Failed to remove account:', error); } else { //utils.timestampedLog('Account removed'); } if (this.state.connection) { utils.timestampedLog('Web socket', Object.id(this.state.connection), 'will close'); this.state.connection.close(); } this.setState({connection: null, account: null}); } ); } else { this.setState({connection: null, account: null}); } } startCallFromCallKeeper(data) { utils.timestampedLog('Starting call from OS...'); let callUUID = data.callUUID || uuid.v4(); let is_conf = data.handle.search('videoconference.') === -1 ? false: true; this.backToForeground(); if (is_conf) { this.callKeepStartConference(data.handle, {audio: true, video: data.video || true, callUUID: callUUID}); } else { this.callKeepStartCall(data.handle, {audio: true, video: data.video, callUUID: callUUID}); } this._notificationCenter.removeNotification(); } selectContact(contact) { if (contact !== this.state.selectedContact) { this.setState({pinned: false}); } this.setState({selectedContact: contact}); } connectionStateChanged(oldState, newState) { if (this.unmounted) { return; } const connection = this.getConnection(); if (oldState) { utils.timestampedLog('Web socket', connection, 'state changed:', oldState, '->' , newState); } switch (newState) { case 'closed': this.syncRequested = false; if (this.state.connection) { utils.timestampedLog('Web socket was terminated'); this.state.connection.removeListener('stateChanged', this.connectionStateChanged); this._notificationCenter.postSystemNotification('Connection lost'); } //this.setState({connection: null, account: null}); this.setState({account: null}); break; case 'ready': this._notificationCenter.removeNotification(); if (this.state.autoLogin) { this.processRegistration(this.state.accountId, this.state.password); this.callKeeper.setAvailable(true); } break; case 'disconnected': this.syncRequested = false; if (this.registrationFailureTimer) { clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') { this.hangupCall(this.state.currentCall.id, 'outgoing_connection_failed'); } if (this.state.incomingCall) { this.hangupCall(this.state.incomingCall.id, 'connection_failed'); } this.setState({ registrationState: 'failed', generatedVideoTrack: false, }); if (this.currentRoute === '/login') { this.changeRoute('/ready', 'websocket disconnected'); } break; default: if (this.state.registrationKeepalive !== true) { this.setState({loading: 'Connecting...'}); } break; } } notificationCenter() { return this._notificationCenter; } showRegisterFailure(reason) { const connection = this.getConnection(); utils.timestampedLog('Registration error: ' + reason, 'on web socket', connection); this.setState({ loading : null, registrationState: 'failed', status : { msg : 'Sign In failed: ' + reason, level : 'danger' } }); if (this.startedByPush) { // TODO: hangup incoming call } if (this.currentRoute === '/login' && this.state.accountVerified) { this.changeRoute('/ready', 'register failure'); } } registrationStateChanged(oldState, newState, data) { if (this.unmounted) { return; } const connection = this.getConnection(); if (oldState) { utils.timestampedLog('Registration state changed:', oldState, '->', newState, 'on web socket', connection); } if (!this.state.account) { utils.timestampedLog('Account', this.state.accountId, 'is disabled'); return; } if (newState === 'failed') { let reason = data.reason; if (reason.indexOf('904') > -1) { // Sofia SIP: WAT reason = 'Wrong account or password'; } else if (reason === 408) { reason = 'Timeout'; } this.showRegisterFailure(reason); if (this.state.registrationKeepalive === true) { if (this.state.connection !== null && this.state.connection.state === 'ready') { utils.timestampedLog('Retry to register...'); this.state.account.register(); } } else { // add a timer to retry register after awhile if (reason >= 500 || reason === 408) { utils.timestampedLog('Retry to register after 5 seconds delay...'); setTimeout(this.state.account.register(), 5000); } else { if (this.registrationFailureTimer) { utils.timestampedLog('Cancel registration timer'); clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } } } if (this.currentRoute === '/login' && this.state.accountVerified) { this.changeRoute('/ready', 'register failed'); } } else if (newState === 'registered') { if (this.registrationFailureTimer) { clearTimeout(this.registrationFailureTimer); this.registrationFailureTimer = null; } if (!this.state.accountVerified) { this.loadSylkContacts(); } /* setTimeout(() => { this.updateServerHistory() }, 1000); */ if (this.state.enrollment) { let myContacts = this.state.myContacts; myContacts[this.state.account.id] = this.newContact(this.state.account.id, this.state.displayName); this.saveSylkContact(this.state.account.id, myContacts[this.state.account.id], 'enrollment'); } if (this.mustSendPublicKey) { var uri = uuid.v4() + '@' + this.state.defaultDomain; console.log('Send 1st public to', uri); this.sendPublicKey(uri); this.mustSendPublicKey = false; } storage.set('account', { accountId: this.state.account.id, password: this.state.password, verified: true }); this.setState({loading: null, accountVerified: true, enrollment: false, autoLogin: true, registrationKeepalive: true, registrationState: 'registered' }); if (this.state.keys && !this.syncRequested) { this.syncRequested = true; console.log('Request sync messages from server', this.state.lastSyncId); this.state.account.syncConversations(this.state.lastSyncId); } this.replayJournal(); //if (this.currentRoute === '/login' && (!this.startedByPush || Platform.OS === 'ios')) { // TODO if the call does not arrive, we never get back to ready if (this.currentRoute === '/login') { this.changeRoute('/ready', 'registered'); } return; } else { this.setState({status: null, registrationState: newState }); } if (this.mustLogout) { this.logout(); } } showInternalAlertPanel() { this.setState({showIncomingModal: true}); //Vibration.vibrate(VIBRATION_PATTERN, true); setTimeout(() => { Vibration.cancel(); }, 30000); } vibrate() { Vibration.vibrate(VIBRATION_PATTERN, true); setTimeout(() => { Vibration.cancel(); }, 1000); } hideInternalAlertPanel() { Vibration.cancel(); this.setState({showIncomingModal: false}); } heartbeat() { if (this.unmounted) { return; } this.heartbeats = this.heartbeats + 1; if (this.heartbeats % 40 == 0) { this.trimLogs(); } if (this.state.connection) { //console.log('Check calls in', this.state.appState, 'with connection', Object.id(this.state.connection), this.state.connection.state); } else { //console.log('Check calls in', this.state.appState, 'with no connection'); } let callState; if (this.state.currentCall && this.state.incomingCall && this.state.incomingCall === this.state.currentCall) { //utils.timestampedLog('We have an incoming call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); callState = this.state.currentCall.state; } else if (this.state.incomingCall) { //utils.timestampedLog('We have an incoming call:', this.state.incomingCall ? (this.state.incomingCall.id + ' ' + this.state.incomingCall.state): 'None'); callState = this.state.incomingCall.state; } else if (this.state.currentCall) { //utils.timestampedLog('We have an outgoing call:', this.state.currentCall ? (this.state.currentCall.id + ' ' + this.state.currentCall.state): 'None'); callState = this.state.currentCall.state; } else if (this.state.outgoingCallUUID) { //utils.timestampedLog('We have a pending outgoing call:', this.state.outgoingCallUUID); } else { //utils.timestampedLog('We have no calls'); if (this.state.appState === 'background' && this.state.connection && this.state.connection.state === 'ready') { //this.closeConnection('background with no calls'); } } this.callKeeper.heartbeat(); } stopRingback() { //utils.timestampedLog('Stop ringback'); InCallManager.stopRingback(); } resetGoToReadyTimer() { if (this.goToReadyTimer !== null) { clearTimeout(this.goToReadyTimer); this.goToReadyTimer = null; } } goToReadyNowAndCancelTimer() { if (this.goToReadyTimer !== null) { clearTimeout(this.goToReadyTimer); this.goToReadyTimer = null; this.changeRoute('/ready', 'cancel_timer_incoming_call'); } } isConference(call) { const _call = call || this.state.currentCall; if (_call && _call.hasOwnProperty('_participants')) { return true; } return false; } callStateChanged(oldState, newState, data) { if (this.unmounted) { return; } // outgoing accepted: null -> progress -> accepted -> established -> terminated // outgoing accepted: null -> progress -> established -> accepted -> terminated (with early media) // incoming accepted: null -> incoming -> accepted -> established -> terminated // 2nd incoming call is automatically rejected by sylkrtc library /* utils.timestampedLog('---currentCall start:', this.state.currentCall); utils.timestampedLog('---incomingCall start:', this.state.incomingCall); */ let call = this.callKeeper._calls.get(data.id); if (!call) { utils.timestampedLog("callStateChanged error: call", data.id, 'not found in callkeep manager'); return; } let callUUID = call.id; const connection = this.getConnection(); utils.timestampedLog('Sylkrtc call', callUUID, 'state change:', oldState, '->', newState, 'on web socket', connection); /* if (newState === 'established' || newState === 'accepted') { // restore the correct UI state if it has transitioned illegally to /ready state if (call.hasOwnProperty('_participants')) { this.changeRoute('/conference', 'correct call state'); } else { this.changeRoute('/call', 'correct call state'); } } */ let newCurrentCall; let newincomingCall; let direction = call.direction; let hasVideo = false; let mediaType = 'audio'; let tracks; let readyDelay = 5000; if (this.state.incomingCall && this.state.currentCall) { if (newState === 'terminated') { if (this.state.incomingCall == this.state.currentCall) { newCurrentCall = null; newincomingCall = null; } if (this.state.incomingCall.id === call.id) { if (oldState === 'incoming') { //utils.timestampedLog('Call state changed:', 'incoming call must be cancelled'); this.hideInternalAlertPanel(); } if (oldState === 'established' || oldState === 'accepted') { //utils.timestampedLog('Call state changed:', 'incoming call ended'); this.hideInternalAlertPanel(); } // new call must be cancelled newincomingCall = null; newCurrentCall = this.state.currentCall; } if (this.state.currentCall != this.state.incomingCall && this.state.currentCall.id === call.id) { if (oldState === 'established' || newState === 'accepted') { //utils.timestampedLog('Call state changed:', 'outgoing call must be hangup'); // old call must be closed } newCurrentCall = null; newincomingCall = this.state.incomingCall; } } else if (newState === 'accepted') { if (this.state.incomingCall === this.state.currentCall) { newCurrentCall = this.state.incomingCall; newincomingCall = this.state.incomingCall; } else { newCurrentCall = this.state.currentCall; } this.backToForeground(); } else if (newState === 'established') { if (this.state.incomingCall === this.state.currentCall) { //utils.timestampedLog("Incoming call media started"); newCurrentCall = this.state.incomingCall; newincomingCall = this.state.incomingCall; } else { //utils.timestampedLog("Outgoing call media started"); newCurrentCall = this.state.currentCall; } } else { //utils.timestampedLog('Call state changed:', 'We have two calls in unclear state'); } } else if (this.state.incomingCall) { //this.backToForeground(); //utils.timestampedLog('Call state changed: We have one incoming call'); newincomingCall = this.state.incomingCall; newCurrentCall = this.state.incomingCall; if (this.state.incomingCall.id === call.id) { if (newState === 'terminated') { this.startedByPush = false; //utils.timestampedLog("Incoming call was cancelled"); this.setState({showIncomingModal: false}); this.hideInternalAlertPanel(); newincomingCall = null; newCurrentCall = null; readyDelay = 10; } else if (newState === 'accepted') { //utils.timestampedLog("Incoming call was accepted"); this.hideInternalAlertPanel(); this.backToForeground(); } else if (newState === 'established') { //utils.timestampedLog("Incoming call media started"); this.hideInternalAlertPanel(); } } } else if (this.state.currentCall) { //utils.timestampedLog('Call state changed: We have one current call'); newCurrentCall = newState === 'terminated' ? null : call; newincomingCall = null; if (newState !== 'terminated') { this.setState({reconnectingCall: false}); } } else { newincomingCall = null; newCurrentCall = null; } /* utils.timestampedLog('---currentCall:', newCurrentCall); utils.timestampedLog('---incomingCall:', newincomingCall); */ let callsState; switch (newState) { case 'progress': this.callKeeper.setCurrentCallActive(callUUID); this.backToForeground(); this.resetGoToReadyTimer(); tracks = call.getLocalStreams()[0].getVideoTracks(); mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio'; if (mediaType === 'video') { this.speakerphoneOn(); } else { this.speakerphoneOff(); } if (!this.isConference(call)){ InCallManager.startRingback('_BUNDLE_'); } break; case 'established': callsState = this.state.callsState; callsState[callUUID] = {startTime: new Date()}; this.setState({callsState: callsState}); this.callKeeper.setCurrentCallActive(callUUID); this.backToForeground(); this.resetGoToReadyTimer(); tracks = call.getLocalStreams()[0].getVideoTracks(); mediaType = (tracks && tracks.length > 0) ? 'video' : 'audio'; InCallManager.start({media: mediaType}); if (direction === 'outgoing') { this.stopRingback(); if (this.state.speakerPhoneEnabled) { this.speakerphoneOn(); } else { this.speakerphoneOff(); } } else { if (mediaType === 'video') { this.speakerphoneOn(); } else { this.speakerphoneOff(); } } break; case 'accepted': callsState = this.state.callsState; callsState[callUUID] = {startTime: new Date()}; this.setState({callsState: callsState}); this.callKeeper.setCurrentCallActive(callUUID); this.backToForeground(); this.resetGoToReadyTimer(); if (direction === 'outgoing') { this.stopRingback(); } break; case 'terminated': let startTime; if (callUUID in this.state.callsState) { callsState = this.state.callsState; startTime = callsState[callUUID].startTime; delete callsState[callUUID]; this.setState({callsState: callsState}); } this._terminatedCalls.set(callUUID, true); utils.timestampedLog(callUUID, direction, 'terminated with reason', data.reason); if (this.state.incomingCall && this.state.incomingCall.id === call.id) { newincomingCall = null; } if (this.state.currentCall && this.state.currentCall.id === call.id) { newCurrentCall = null; } let callSuccesfull = false; let reason = data.reason; let play_busy_tone = !this.isConference(call); let CALLKEEP_REASON; let missed = false; let cancelled = false; let server_failure = false; if (!reason || reason.match(/200/)) { if (oldState === 'progress' && direction === 'outgoing') { reason = 'Cancelled'; cancelled = true; play_busy_tone = false; } else if (oldState === 'incoming') { reason = 'Cancelled'; missed = true; play_busy_tone = false; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else { reason = 'Hangup'; callSuccesfull = true; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; } } else if (reason.match(/402/)) { reason = 'Payment required'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/403/)) { //reason = 'Forbidden'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/404/)) { reason = 'User not found'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/408/)) { reason = 'Timeout'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; } else if (reason.match(/480/)) { reason = 'Is not online'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.UNANSWERED; } else if (reason.match(/486/)) { reason = 'Is busy'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; if (direction === 'outgoing') { play_busy_tone = false; } } else if (reason.match(/603/)) { reason = 'Cannot answer now'; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED; if (direction === 'outgoing') { play_busy_tone = false; } } else if (reason.match(/487/)) { reason = 'Cancelled'; play_busy_tone = false; cancelled = true; 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: ' + reason; CALLKEEP_REASON = CK_CONSTANTS.END_CALL_REASONS.FAILED; server_failure = true; } 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; server_failure = true; } if (play_busy_tone) { this.playBusyTone(); } if (direction === 'outgoing') { this.setState({declineReason: reason}); } this.stopRingback(); let msg; let current_datetime = new Date(); let formatted_date = utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds()); let diff = 0; if (startTime) { let duration = moment.duration(new Date() - startTime); diff = Math.floor((new Date() - startTime) / 1000); if (duration > 3600) { duration = duration.format('hh:mm:ss', {trim: false}); } else { duration = duration.format('mm:ss', {trim: false}); } msg = formatted_date + " - " + direction +" " + mediaType + " call ended after " + duration; this.saveSystemMessage(call.remoteIdentity.uri.toLowerCase(), msg, direction, missed); } else { msg = formatted_date + " - " + direction +" " + mediaType + " call ended (" + reason + ")"; if (!server_failure) { this.saveSystemMessage(call.remoteIdentity.uri.toLowerCase(), msg, direction, missed); if (reason.indexOf('PSTN calls forbidden') > -1) { setTimeout(() => { this.renderPurchasePSTNCredit(call.remoteIdentity.uri.toLowerCase()); }, 2000); } } } this.updateHistoryEntry(call.remoteIdentity.uri.toLowerCase(), callUUID, diff); this.callKeeper.endCall(callUUID, CALLKEEP_REASON); if (play_busy_tone && oldState !== 'established' && direction === 'outgoing') { this._notificationCenter.postSystemNotification('Call ended:', {body: reason}); } break; default: break; } /* utils.timestampedLog('---currentCall end:', newCurrentCall); utils.timestampedLog('---incomingCall end:', newincomingCall); */ this.setState({ currentCall: newCurrentCall, incomingCall: newincomingCall }); if (!this.state.currentCall && !this.state.incomingCall) { this.speakerphoneOn(); if (!this.state.reconnectingCall) { if (this.state.inFocus) { if (this.currentRoute !== '/ready') { utils.timestampedLog('Will go to ready in', readyDelay/1000, 'seconds (terminated)', callUUID); this.goToReadyTimer = setTimeout(() => { this.changeRoute('/ready', 'no_more_calls'); }, readyDelay); } } else { if (this.currentRoute !== '/conference') { this.changeRoute('/ready', 'no_more_calls'); } } } } if (this.state.currentCall) { //console.log('Current:', this.state.currentCall.id); } if (this.state.incomingCall) { //console.log('Incoming:', this.state.incomingCall.id); } } + finishInviteToConference() { + this.setState({inviteContacts: false, selectedContacts: []}); + } + goBackToCall() { let call = this.state.currentCall || this.state.incomingCall; - if (call) { if (call.hasOwnProperty('_participants')) { this.changeRoute('/conference', 'back to call'); } else { this.changeRoute('/call', 'back to call'); } } else { console.log('No call to go back to'); } } - finishInviteToConference() { - this.setState({inviteContacts: false, selectedContacts: []}); + goBackToHome() { + this.changeRoute('/ready', 'back to home'); } - goBackToHome() { + goBackToHomeFromCall() { this.changeRoute('/ready', 'back to home'); + if (this.state.callContact) { + this.setState({selectedContact: this.state.callContact}); + if (Object.keys(this.state.messages).indexOf(this.state.callContact.uri) === -1) { + this.getMessages(this.state.callContact.uri); + } + } } - goBackToHomeFromCall() { + goBackToHomeFromConference() { this.changeRoute('/ready', 'back to home'); if (this.state.callContact) { this.setState({selectedContact: this.state.callContact}); - this.getMessages(this.state.callContact.uri); + if (Object.keys(this.state.messages).indexOf(this.state.callContact.uri) === -1) { + this.getMessages(this.state.callContact.uri); + } } } inviteToConference() { console.log('Invite contacts to conference...'); this.goBackToHome(); setTimeout(() => { this.setState({inviteContacts: true, selectedContacts: []}); }, 100); } handleEnrollment(account) { console.log('Enrollment for new account', account); this.signup[account.id] = account.email; storage.set('signup', this.signup); storage.set('last_signup', account.id); this.setState({displayName: account.displayName, enrollment: true, email: account.email}); this.handleRegistration(account.id, account.password); } handleRegistration(accountId, password) { //console.log('handleRegistration', accountId); if (this.state.account !== null && this.state.registrationState === 'registered' ) { return; } this.setState({ accountId : accountId, password : password, loading : 'Connecting...' }); if (this.state.accountVerified) { this.loadSylkContacts(); } if (this.state.connection === null) { utils.timestampedLog('Web socket handle registration for', accountId); const userAgent = 'Sylk Mobile'; let connection = sylkrtc.createConnection({server: config.wsServer}); utils.timestampedLog('Web socket', Object.id(connection), 'was opened'); connection.on('stateChanged', this.connectionStateChanged); connection.on('publicKey', this.publicKeyReceived); this.setState({connection: connection}); } else { if (this.state.connection.state === 'ready' && this.state.registrationState !== 'registered') { utils.timestampedLog('Web socket', Object.id(this.state.connection), 'handle registration for', accountId); this.processRegistration(accountId, password); } else if (this.state.connection.state !== 'ready') { if (this._notificationCenter) { this._notificationCenter.postSystemNotification('Waiting for Internet connection'); } if (this.currentRoute === '/login' && this.state.accountVerified) { this.changeRoute('/ready', 'start_up'); } } } } processRegistration(accountId, password, displayName) { if (!displayName) { displayName = this.state.displayName; } if (!this.state.connection) { return; } utils.timestampedLog('Process registration for', accountId, '(', displayName, ')'); if (this.state.account && this.state.connection) { this.state.connection.removeAccount(this.state.account, (error) => { this.setState({registrationState: null, registrationKeepalive: false}); } ); } const options = { account: accountId, password: password, displayName: displayName || '' }; if (this.state.connection._accounts.has(options.account)) { return; } if (this.state.accountVerified) { this.registrationFailureTimer = setTimeout(() => { this.showRegisterFailure('Register timeout'); this.processRegistration(accountId, password); }, 10000); } const account = this.state.connection.addAccount(options, (error, account) => { if (!error) { account.on('outgoingCall', this.outgoingCall); account.on('conferenceCall', this.outgoingConference); account.on('registrationStateChanged', this.registrationStateChanged); account.on('incomingCall', this.incomingCallFromWebSocket); account.on('incomingMessage', this.incomingMessage); account.on('syncConversations', this.syncConversations); account.on('readConversation', this.readConversation); account.on('removeConversation', this.removeConversation); account.on('removeMessage', this.removeMessage); account.on('outgoingMessage', this.outgoingMessage); account.on('messageStateChanged', this.messageStateChanged); account.on('missedCall', this.missedCall); account.on('conferenceInvite', this.conferenceInviteFromWebSocket); //utils.timestampedLog('Web socket account', account.id, 'is ready, registering...'); this._sendPushToken(account); this.setState({account: account}); this.generateKeysIfNecessary(account); account.register(); storage.set('account', { accountId: this.state.accountId, password: this.state.password }); } else { this.showRegisterFailure(408); } }); } generateKeysIfNecessary(account) { console.log('Check if PGP key exists on server....') if (this.serverQueriedForPublicKey) { if (this.state.contactsLoaded) { if (!this.serverPublicKey) { console.log('We have no PGP keys here or on server'); this.generateKeys(); } else if (!this.state.keys || !this.state.keys.private){ console.log('Public PGP key exists on server but we have none'); this.setState({showImportPrivateKeyModal: true, keyDifferentOnServer: true}); } } else { console.log('Wait for PGP keys until contacts are loaded'); } } else { account.checkIfKeyExists((key) => { this.serverPublicKey = key; this.serverQueriedForPublicKey = true; if (key) { if (this.state.keys) { if (this.state.keys && this.state.keys.public !== key) { console.log('Public PGP key exists on server but is different than ours'); this.setState({showImportPrivateKeyModal: true, keyDifferentOnServer: true}) } else { console.log('Public PGP key exists on server and we have it'); } } else { if (!this.state.contactsLoaded) { console.log('Wait for PGP keys until contacts are loaded'); } else { this.showImportPrivateKeyModal(); } } } else { console.log('Public PGP key does not exist on server'); if (this.state.contactsLoaded) { this.generateKeys(); } else { console.log('Wait for PGP keys until contacts are loaded'); } } }); } } setDevice(device) { const oldDevices = Object.assign({}, this.state.devices); if (device.kind === 'videoinput') { oldDevices['camera'] = device; } else if (device.kind === 'audioinput') { oldDevices['mic'] = device; } this.setState({devices: oldDevices}); storage.set('devices', oldDevices); sylkrtc.utils.closeMediaStream(this.state.localMedia); this.getLocalMedia(); } getLocalMedia(mediaConstraints={audio: true, video: true}, nextRoute=null) { // eslint-disable-line space-infix-ops let callType = mediaConstraints.video ? 'video': 'audio'; utils.timestampedLog('Get local media for', callType, 'call'); const constraints = Object.assign({}, mediaConstraints); if (constraints.video === true) { if ((nextRoute === '/conference')) { constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; // TODO: remove this, workaround so at least safari works when joining a video conference } else if (nextRoute === '/conference' && isSafari) { constraints.video = false; } else { // ask for 720p video constraints.video = { 'width': { 'ideal': 640 }, 'height': { 'ideal': 480 } }; } } logger.debug('getLocalMedia(), (modified) mediaConstraints=%o', constraints); navigator.mediaDevices.enumerateDevices() .then((devices) => { devices.forEach((device) => { //console.log(device); if ('video' in constraints && 'camera' in this.state.devices) { if (constraints.video && constraints.video !== false && (device.deviceId === this.state.devices.camera.deviceId || device.label === this.state.devices.camera.label)) { constraints.video.deviceId = { exact: device.deviceId }; } } if ('mic' in this.state.devices) { if (device.deviceId === this.state.devices.mic.deviceId || device.label === this.state.devices.mic.Label) { // constraints.audio = { // deviceId: { // exact: device.deviceId // } // }; } } }); }) .catch((error) => { utils.timestampedLog('Error: device enumeration failed:', error); }) .then(() => { return navigator.mediaDevices.getUserMedia(constraints) }) .then((localStream) => { clearTimeout(this.loadScreenTimer); //utils.timestampedLog('Local media acquired'); this.setState({localMedia: localStream}); if (nextRoute !== null) { this.changeRoute(nextRoute); } }) .catch((error) => { utils.timestampedLog('Access to local media failed, trying audio only', error); navigator.mediaDevices.getUserMedia({ audio: true, video: false }) .then((localStream) => { clearTimeout(this.loadScreenTimer); if (nextRoute !== null) { this.changeRoute(nextRoute, 'local media aquired'); } }) .catch((error) => { utils.timestampedLog('Access to local media failed:', error); clearTimeout(this.loadScreenTimer); this._notificationCenter.postSystemNotification("Can't access camera or microphone"); this.setState({ loading: null }); this.changeRoute('/ready', 'local media failure'); }); }); } getConnection() { return this.state.connection ? Object.id(this.state.connection): null; } showConferenceModal() { Keyboard.dismiss(); this.setState({showConferenceModal: true}); } hideConferenceModal() { this.setState({showConferenceModal: false}); } callKeepStartConference(targetUri, options={audio: true, video: true, participants: []}) { if (!targetUri) { return; } this.resetGoToReadyTimer(); + this.requestMicPermission(); + if (options.video) { + this.requestCameraPermission(); + } + let callUUID = options.callUUID || uuid.v4(); let participants = options.participants || null; this.addHistoryEntry(targetUri, callUUID); let participantsToInvite = []; if (participants) { participants.forEach((participant_uri) => { if (participant_uri === this.state.accountId) { return; } participantsToInvite.push(participant_uri); }); } this.outgoingMedia = options; this.setState({outgoingCallUUID: callUUID, reconnectingCall: false, callContact: this.state.selectedContact, participantsToInvite: participantsToInvite }); const media = options.video ? 'video' : 'audio'; if (participantsToInvite) { utils.timestampedLog('Will start', media, 'conference', callUUID, 'to', targetUri, 'with', participantsToInvite); } else { utils.timestampedLog('Will start', media, 'conference', callUUID, 'to', targetUri); } this.respawnConnection(); this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, conference: true, callUUID: callUUID}); } updateSelection(uri) { //console.log('updateSelection', uri); let selectedContacts = this.state.selectedContacts; //console.log('selectedContacts', selectedContacts); let idx = selectedContacts.indexOf(uri); if (idx === -1) { selectedContacts.push(uri); } else { selectedContacts.splice(idx, 1); } this.setState({selectedContacts: selectedContacts}); } callKeepStartCall(targetUri, options) { this.resetGoToReadyTimer(); targetUri = targetUri.trim().toLowerCase(); if (targetUri.indexOf('@') === -1) { targetUri = targetUri + '@' + this.state.defaultDomain; } + this.requestMicPermission(); + if (options.video) { + this.requestCameraPermission(); + } + let callUUID = options.callUUID || uuid.v4(); this.setState({outgoingCallUUID: callUUID, reconnectingCall: false}); utils.timestampedLog('User will start call', callUUID, 'to', targetUri); this.respawnConnection(); this.startCallWhenReady(targetUri, {audio: options.audio, video: options.video, callUUID: callUUID}); setTimeout(() => { if (this.state.currentCall && this.state.currentCall.id === callUUID && this.state.currentCall.state === 'progress') { this.hangupCall(callUUID, 'cancelled_call'); } }, 60000); } startCall(targetUri, options) { this.setState({targetUri: targetUri, callContact: this.state.selectedContact}); this.getLocalMedia(Object.assign({audio: true, video: options.video}, options), '/call'); } timeoutCall(callUUID, uri) { utils.timestampedLog('Timeout answering call', callUUID); this.addHistoryEntry(uri, callUUID, direction='incoming'); this.forceUpdate(); } closeLocalMedia() { if (this.state.localMedia != null) { utils.timestampedLog('Close local media'); sylkrtc.utils.closeMediaStream(this.state.localMedia); this.setState({localMedia: null}); } } callKeepAcceptCall(callUUID) { // called from user interaction with Old alert panel // options used to be media to accept audio only but native panels do not have this feature utils.timestampedLog('CallKeep will answer call', callUUID); this.callKeeper.acceptCall(callUUID); this.hideInternalAlertPanel(); } callKeepRejectCall(callUUID) { // called from user interaction with Old alert panel utils.timestampedLog('CallKeep will reject call', callUUID); this.callKeeper.rejectCall(callUUID); this.hideInternalAlertPanel(); } acceptCall(callUUID) { utils.timestampedLog('User accepted call', callUUID); this.hideInternalAlertPanel(); this.resetGoToReadyTimer(); if (this.state.currentCall) { utils.timestampedLog('Will hangup current call first'); this.hangupCall(this.state.currentCall.id, 'accept_new_call'); // call will continue after transition to /ready } else { utils.timestampedLog('Will get local media now'); let hasVideo = (this.state.incomingCall && this.state.incomingCall.mediaTypes && this.state.incomingCall.mediaTypes.video) ? true : false; this.getLocalMedia(Object.assign({audio: true, video: hasVideo}), '/call'); } } rejectCall(callUUID) { // called by Call Keep when user rejects call utils.timestampedLog('User rejected call', callUUID); this.hideInternalAlertPanel(); if (!this.state.currentCall) { this.changeRoute('/ready', 'rejected'); } if (this.state.incomingCall && this.state.incomingCall.id === callUUID) { utils.timestampedLog('Sylkrtc terminate call', callUUID, 'in', this.state.incomingCall.state, 'state'); this.state.incomingCall.terminate(); } } hangupCall(callUUID, reason) { utils.timestampedLog('Call', callUUID, 'hangup with reason:', reason); let call = this.callKeeper._calls.get(callUUID); let direction = null; let targetUri = null; if (call) { let direction = call.direction; utils.timestampedLog('Sylkrtc terminate call', callUUID, 'in', call.state, 'state'); call.terminate(); } if (this.busyToneInterval) { clearInterval(this.busyToneInterval); this.busyToneInterval = null; } if (reason === 'user_cancel_call' || reason === 'user_hangup_call' || reason === 'answer_failed' || reason === 'callkeep_hangup_call' || reason === 'accept_new_call' || reason === 'stop_preview' || reason === 'escalate_to_conference' || reason === 'user_hangup_conference_confirmed' || reason === 'timeout' || reason === 'outgoing_connection_failed' ) { this.setState({inviteContacts: false}); this.changeRoute('/ready', reason); } else if (reason === 'user_hangup_conference') { utils.timestampedLog('Save conference maybe?'); setTimeout(() => { this.changeRoute('/ready', 'conference_really_ended'); }, 15000); } else if (reason === 'user_cancelled_conference') { utils.timestampedLog('Save conference maybe?'); setTimeout(() => { this.changeRoute('/ready', 'conference_really_ended'); }, 15000); } else { utils.timestampedLog('Will go to ready in 6 seconds (hangup)'); setTimeout(() => { this.changeRoute('/ready', reason); }, 6000); } } playBusyTone() { //utils.timestampedLog('Play busy tone'); InCallManager.stop({busytone: '_BUNDLE_'}); } callKeepSendDtmf(digits) { utils.timestampedLog('Send DTMF', digits); if (this.state.currentCall) { this.callKeeper.sendDTMF(this.state.currentCall.id, digits); } } toggleProximity() { storage.set('proximityEnabled', !this.state.proximityEnabled); if (!this.state.proximityEnabled) { utils.timestampedLog('Proximity sensor enabled'); } else { utils.timestampedLog('Proximity sensor disabled'); } this.setState({proximityEnabled: !this.state.proximityEnabled}); } toggleMute(callUUID, muted) { if (this.state.muted != muted) { utils.timestampedLog('Toggle mute for call', callUUID, ':', muted); this.callKeeper.setMutedCall(callUUID, muted); this.setState({muted: muted}); } } async hideImportPrivateKeyModal() { this.setState({privateKey: null, privateKeyImportStatus: '', privateKeyImportSuccess: false, showImportPrivateKeyModal: false}); + + if (!this.state.keys && Object.keys(this.state.myContacts).length === 0) { + this.addTestContacts(); + } } async showImportPrivateKeyModal() { this.setState({showImportPrivateKeyModal: true}); } async hideExportPrivateKeyModal() { this.setState({privateKey: null, showExportPrivateKeyModal: false}); } async showExportPrivateKeyModal() { this.setState({showExportPrivateKeyModal: true}); } togglePinned() { console.log('togglePinned', this.state.selectedContact); if (this.state.selectedContact) { this.getMessages(this.state.selectedContact.uri, !this.state.pinned); this.setState({pinned: !this.state.pinned}); } } toggleSpeakerPhone() { if (this.state.speakerPhoneEnabled === true) { this.speakerphoneOff(); } else { this.speakerphoneOn(); } } toggleCallMeMaybeModal() { this.setState({showCallMeMaybeModal: !this.state.showCallMeMaybeModal}); } speakerphoneOn() { utils.timestampedLog('Speakerphone On'); this.setState({speakerPhoneEnabled: true}); InCallManager.setForceSpeakerphoneOn(true); } speakerphoneOff() { utils.timestampedLog('Speakerphone Off'); this.setState({speakerPhoneEnabled: false}); InCallManager.setForceSpeakerphoneOn(false); } startGuestConference(targetUri) { this.setState({targetUri: targetUri}); this.getLocalMedia({audio: true, video: true}); } outgoingCall(call) { // called by sylkrtc.js when an outgoing call starts call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); this.callKeeper.startOutgoingCall(call); } outgoingConference(call) { // called by sylrtc.js when an outgoing conference starts call.on('stateChanged', this.callStateChanged); this.setState({currentCall: call}); this.callKeeper.startOutgoingCall(call); } _onLocalNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); utils.timestampedLog('Handle local iOS PUSH notification: ', notificationContent); } _onNotificationReceivedBackground(notification) { let notificationContent = notification.getData(); const event = notificationContent['event']; const callUUID = notificationContent['session-id']; const to = notificationContent['to_uri']; const from = notificationContent['from_uri']; const displayName = notificationContent['from_display_name']; const outgoingMedia = {audio: true, video: notificationContent['media-type'] === 'video'}; const mediaType = notificationContent['media-type'] || 'audio'; /* * Local Notification Payload * * - `alertBody` : The message displayed in the notification alert. * - `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; * - `soundName` : The sound played when the notification is fired (optional). * - `category` : The category of this notification, required for actionable notifications (optional). * - `userInfo` : An optional object containing additional notification data. */ if (event === 'incoming_session') { utils.timestampedLog('Push notification: incoming call', callUUID); this.startedByPush = true; this.incomingCallFromPush(callUUID, from, displayName, mediaType); } else if (event === 'incoming_conference_request') { utils.timestampedLog('Push notification: incoming conference', callUUID); this.startedByPush = true; this.incomingConference(callUUID, to, from, displayName, outgoingMedia); } else if (event === 'cancel') { utils.timestampedLog('Push notification: cancel call', callUUID); VoipPushNotification.presentLocalNotification({alertBody:'Call cancelled'}); this.callKeeper.endCall(callUUID, CK_CONSTANTS.END_CALL_REASONS.REMOTE_ENDED); } else if (event === 'message') { utils.timestampedLog('Push for messages received'); VoipPushNotification.presentLocalNotification({alertBody:'Messages received'}); } /* if (notificationContent['event'] === 'incoming_session') { VoipPushNotification.presentLocalNotification({ alertBody:'Incoming ' + notificationContent['media-type'] + ' call from ' + notificationContent['from_display_name'] }); } */ if (VoipPushNotification.wakeupByPush) { utils.timestampedLog('We wake up by push notification'); VoipPushNotification.wakeupByPush = false; VoipPushNotification.onVoipNotificationCompleted(callUUID); } } backToForeground() { if (this.state.appState !== 'active') { this.callKeeper.backToForeground(); } if (this.state.accountId) { this.handleRegistration(this.state.accountId, this.state.password); } PushNotification.popInitialNotification((notification) => { if (notification) { console.log('Initial push notification', notification); } }); } incomingConference(callUUID, to, from, displayName, outgoingMedia={audio: true, video: true}) { if (this.unmounted) { return; } const mediaType = outgoingMedia.video ? 'video' : 'audio'; utils.timestampedLog('Incoming', mediaType, 'conference invite from', from, displayName, 'to room', to); if (this.state.account && from === this.state.account.id) { utils.timestampedLog('Reject conference call from myself', callUUID); this.callKeeper.rejectCall(callUUID); return; } if (this.autoRejectIncomingCall(callUUID, from, to)) { return; } this.setState({incomingCallUUID: callUUID}); this.callKeeper.handleConference(callUUID, to, from, displayName, mediaType, outgoingMedia); } startConference(targetUri, options={audio: true, video: true, participants: []}) { utils.timestampedLog('New outgoing conference to room', targetUri); this.setState({targetUri: targetUri}); this.getLocalMedia({audio: options.audio, video: options.video}, '/conference'); } escalateToConference(participants) { let outgoingMedia = {audio: true, video: true}; let mediaType = 'video'; let call; if (this.state.currentCall) { call = this.state.currentCall; } else if (this.state.incomingCall) { call = this.state.currentCall; } else { console.log('No call to escalate'); return } const localStreams = call.getLocalStreams(); if (localStreams.length > 0) { const localStream = call.getLocalStreams()[0]; if (localStream.getVideoTracks().length == 0) { outgoingMedia.video = false; mediaType = 'audio'; } } this.outgoingMedia = outgoingMedia; this.participantsToInvite = participants; console.log('Escalate', mediaType, 'call', call.id, 'to conference with', participants.toString()); this.hangupCall(call.id, 'escalate_to_conference'); } conferenceInviteFromWebSocket(data) { // comes from web socket utils.timestampedLog('Conference invite from websocket', data.id, 'from', data.originator, 'for room', data.room); if (this.isConference()) { return; } //this._notificationCenter.postSystemNotification('Expecting conference invite', {body: `from ${data.originator.displayName || data.originator.uri}`}); } updateLinkingURL = (event) => { // this handles the use case where the app is running in the background and is activated by the listener... //console.log('Updated Linking url', event.url); this.eventFromUrl(event.url); DeepLinking.evaluateUrl(event.url); } eventFromUrl(url) { url = decodeURI(url); try { let direction; let event; let callUUID; let from; let to; let displayName; var url_parts = url.split("/"); let scheme = url_parts[0]; //console.log(url_parts); if (scheme === 'sylk:') { //sylk://conference/incoming/callUUID/from/to/media - when Android is asleep //sylk://call/outgoing/callUUID/to/displayName - from system dialer/history //sylk://call/incoming/callUUID/from/to/displayName - when Android is asleep //sylk://call/cancel//callUUID - when Android is asleep event = url_parts[2]; direction = url_parts[3]; callUUID = url_parts[4]; from = url_parts[5]; to = url_parts[6]; displayName = url_parts[7]; mediaType = url_parts[8] || 'audio'; if (event !== 'cancel' && from && from.search('@videoconference.') > -1) { event = 'conference'; to = from; } this.setState({targetUri: from}); } else if (scheme === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link direction = 'outgoing'; event = url_parts[3]; to = url_parts[4]; callUUID = uuid.v4(); if (to.indexOf('@') === -1 && event === 'conference') { to = url_parts[4] + '@' + config.defaultConferenceDomain; } else if (to.indexOf('@') === -1 && event === 'call') { to = url_parts[4] + '@' + this.state.defaultDomain; } this.setState({targetUri: to}); } if (event === 'conference') { utils.timestampedLog('Conference from external URL:', url); this.startedByPush = true; if (direction === 'outgoing' && to) { utils.timestampedLog('Outgoing conference to', to); this.backToForeground(); this.callKeepStartConference(to, {audio: true, video: true, callUUID: callUUID}); } else if (direction === 'incoming' && from) { utils.timestampedLog('Incoming conference from', from); // allow app to wake up this.backToForeground(); const media = {audio: true, video: mediaType === 'video'} this.incomingConference(callUUID, to, from, displayName, media); } } else if (event === 'call') { this.startedByPush = true; if (direction === 'outgoing') { utils.timestampedLog('Call from external URL:', url); utils.timestampedLog('Outgoing call to', from); this.backToForeground(); this.callKeepStartCall(from, {audio: true, video: false, callUUID: callUUID}); } else if (direction === 'incoming') { utils.timestampedLog('Call from external URL:', url); utils.timestampedLog('Incoming call from', from); this.backToForeground(); this.incomingCallFromPush(callUUID, from, displayName, mediaType, true); } else if (direction === 'cancel') { this.cancelIncomingCall(callUUID); } } else { utils.timestampedLog('Error: Invalid external URL event', event); } } catch (err) { utils.timestampedLog('Error parsing URL', url, ":", err); } } autoRejectIncomingCall(callUUID, from, to) { //utils.timestampedLog('Check auto reject call from', from); if (this.state.blockedUris && this.state.blockedUris.indexOf(from) > -1) { utils.timestampedLog('Reject call', callUUID, 'from blocked URI', from); this.callKeeper.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Call rejected', {body: `from ${from}`}); return true; } const fromDomain = '@' + from.split('@')[1] if (this.state.blockedUris && this.state.blockedUris.indexOf(fromDomain) > -1) { utils.timestampedLog('Reject call', callUUID, 'from blocked domain', fromDomain); this.callKeeper.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Call rejected', {body: `from domain ${fromDomain}`}); return true; } if (this.state.currentCall && this.state.incomingCall && this.state.currentCall === this.state.incomingCall && this.state.incomingCall.id !== callUUID) { utils.timestampedLog('Reject second incoming call'); this.callKeeper.rejectCall(callUUID); } if (this.state.account && from === this.state.account.id && this.state.currentCall && this.state.currentCall.remoteIdentity.uri === from) { utils.timestampedLog('Reject call to myself', callUUID); this.callKeeper.rejectCall(callUUID); return true; } if (this._terminatedCalls.has(callUUID)) { utils.timestampedLog('Reject call already terminated', callUUID); this.cancelIncomingCall(callUUID); return true; } if (this.isConference()) { utils.timestampedLog('Reject call while in a conference', callUUID); if (to !== this.state.targetUri) { this._notificationCenter.postSystemNotification('Missed call from', {body: from}); } this.callKeeper.rejectCall(callUUID); return true; } if (this.state.currentCall && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri !== from) { utils.timestampedLog('Reject call while outgoing in progress', callUUID); this.callKeeper.rejectCall(callUUID); this._notificationCenter.postSystemNotification('Missed call from', {body: from}); return true; } return false; } autoAcceptIncomingCall(callUUID, from) { // TODO: handle ping pong where we call each other back if (this.state.currentCall && this.state.currentCall.direction === 'outgoing' && this.state.currentCall.state === 'progress' && this.state.currentCall.remoteIdentity.uri === from) { this.hangupCall(this.state.currentCall.id, 'accept_new_call'); this.setState({currentCall: null}); utils.timestampedLog('Auto accept incoming call from same address I am calling', callUUID); return true; } return false; } incomingCallFromPush(callUUID, from, displayName, mediaType, force) { //utils.timestampedLog('Handle incoming PUSH call', callUUID, 'from', from, '(', displayName, ')'); if (this.unmounted) { return; } if (this.autoRejectIncomingCall(callUUID, from)) { return; } //this.showInternalAlertPanel(); if (this.autoAcceptIncomingCall(callUUID, from)) { return; } this.goToReadyNowAndCancelTimer(); this.setState({targetUri: from}); let skipNativePanel = false; if (!this.callKeeper._calls.get(callUUID) || (this.state.currentCall && this.state.currentCall.direction === 'outgoing')) { //this._notificationCenter.postSystemNotification('Incoming call', {body: `from ${from}`}); if (Platform.OS === 'android' && this.state.appState === 'foreground') { skipNativePanel = true; } } this.callKeeper.incomingCallFromPush(callUUID, from, displayName, mediaType, force, skipNativePanel); } incomingCallFromWebSocket(call, mediaTypes) { if (this.unmounted) { return; } this.callKeeper.addWebsocketCall(call); const callUUID = call.id; const from = call.remoteIdentity.uri; //utils.timestampedLog('Handle incoming web socket call', callUUID, 'from', from, 'on connection', Object.id(this.state.connection)); // because of limitation in Sofia stack, we cannot have more then two calls at a time // we can have one outgoing call and one incoming call but not two incoming calls // we cannot have two incoming calls, second one is automatically rejected by sylkrtc.js if (this.autoRejectIncomingCall(callUUID, from)) { return; } + this.requestMicPermission(); + if (mediaTypes.video) { + this.requestCameraPermission(); + } + const autoAccept = this.autoAcceptIncomingCall(callUUID, from); this.goToReadyNowAndCancelTimer(); call.mediaTypes = mediaTypes; call.on('stateChanged', this.callStateChanged); this.setState({incomingCall: call}); let skipNativePanel = false; if (this.state.currentCall && this.state.currentCall.direction === 'outgoing') { if (Platform.OS === 'android') { this.showInternalAlertPanel(); skipNativePanel = true; } } this.callKeeper.incomingCallFromWebSocket(call, autoAccept, skipNativePanel); } missedCall(data) { utils.timestampedLog('Missed call from ' + data.originator.uri, '(', data.originator.displayName, ')'); /* let msg; let current_datetime = new Date(); let formatted_date = utils.appendLeadingZeroes(current_datetime.getHours()) + ":" + utils.appendLeadingZeroes(current_datetime.getMinutes()) + ":" + utils.appendLeadingZeroes(current_datetime.getSeconds()); msg = formatted_date + " - missed call"; this.saveSystemMessage(data.originator.uri.toLowerCase(), msg, 'incoming', true); */ if (!this.state.currentCall) { let from = data.originator.displayName || data.originator.uri; this._notificationCenter.postSystemNotification('Missed call', {body: `from ${from}`}); if (Platform.OS === 'ios') { VoipPushNotification.presentLocalNotification({alertBody:'Missed call from ' + from}); } } this.updateServerHistory() } updateServerHistory() { this.contactsCount(); if (!this.state.contactsLoaded) { return; } if (!this.state.firstSyncDone) { return; } + DeviceInfo.getFontScale().then((fontScale) => { + this.setState({fontScale: fontScale}); + }); + if (this.currentRoute === '/ready') { this.setState({refreshHistory: !this.state.refreshHistory}); } } startPreview() { this.getLocalMedia({audio: true, video: true}, '/preview'); } sendPublicKey(uri) { if (!uri) { console.log('Missing uri, cannot send public key'); } if (uri === this.state.accountId) { return; } // Send outgoing messages if (this.state.account && this.state.keys && this.state.keys.public) { console.log('Sending public key to', uri); this.state.account.sendMessage(uri, this.state.keys.public, 'text/pgp-public-key'); } else { console.log('No public key available'); } } async saveOutgoingRawMessage(id, from_uri, to_uri, content, contentType) { let timestamp = new Date(); + timestamp.setMilliseconds(0); let params; let unix_timestamp = Math.floor(timestamp / 1000); params = [this.state.accountId, id, JSON.stringify(timestamp), unix_timestamp, content, contentType, from_uri, to_uri, "outgoing", "1"]; await this.ExecuteQuery("INSERT INTO messages (account, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, pending) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { //console.log('SQL insert message OK'); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') === -1) { console.log('SQL error:', error); } }); } showCallMeModal() { this.setState({showCallMeMaybeModal: true}); setTimeout(() => { this.hideCallMeModal(); }, 25000); } hideCallMeModal() { this.setState({showCallMeMaybeModal: false}); } async saveSylkContact(uri, contact, origin=null) { if (!contact) { contact = this.newContact(uri); } else { contact = this.sanitizeContact(uri, contact, 'saveSylkContact'); } if (!contact) { return; } console.log('Save Sylk Contact', uri, 'with name', contact.name, 'by', origin); if (this.sql_contacts_keys.indexOf(uri) > -1) { this.updateSylkContact(uri, contact, origin); return; } let conference = contact.conference ? 1: 0; let tags = contact.tags.toString(); let media = contact.lastCallMedia.toString(); let participants = contact.participants.toString(); let unread_messages = contact.unread.toString(); let unixTime = Math.floor(contact.timestamp / 1000); let params = [this.state.accountId, contact.email, contact.photo, unixTime, uri, contact.name || '', contact.organization || '', unread_messages || '', tags || '', participants || '', contact.publicKey || '', contact.direction, media, conference, contact.lastCallId, contact.lastCallDuration]; await this.ExecuteQuery("INSERT INTO contacts (account, email, photo, timestamp, uri, name, organization, unread_messages, tags, participants, public_key, direction, last_call_media, conference, last_call_id, last_call_duration) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { if (result.rowsAffected === 1) { console.log('SQL inserted contact', contact.uri, 'by', origin); } this.sql_contacts_keys.push(uri); let myContacts = this.state.myContacts; if (uri !== this.state.accountId) { myContacts[uri] = contact; let favorite = myContacts[uri].tags.indexOf('favorite') > -1 ? true: false; let blocked = myContacts[uri].tags.indexOf('blocked') > -1 ? true: false; this.updateFavorite(uri, favorite); this.updateBlocked(uri, blocked); this.setState({myContacts: myContacts}); } else { this.setState({email: contact.email, displayName: contact.name}) if (myContacts[uri].tags.indexOf('chat') > -1 || myContacts[uri].tags.indexOf('history') > -1) { myContacts[uri] = contact; this.setState({myContacts: myContacts}); } } }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') > -1) { //console.log('SQL insert contact failed, try update', uri); this.updateSylkContact(uri, contact, origin); } else { //console.log('SQL insert contact', uri, 'error:', error); //console.log('Existing keys during insert:', this.sql_contacts_keys); } }); } async updateSylkContact(uri, contact, origin=null) { //console.log('updateSylkContact', contact); let unixTime = Math.floor(contact.timestamp / 1000); let unread_messages = contact.unread.toString(); let media = contact.lastCallMedia.toString(); let tags = contact.tags.toString(); let conference = contact.conference ? 1: 0; let participants = contact.participants.toString(); let params = [contact.photo, contact.email, contact.lastMessage, contact.lastMessageId, unixTime, contact.name || '', contact.organization || '', unread_messages || '', contact.publicKey || '', tags, participants, contact.direction, media, conference, contact.lastCallId, contact.lastCallDuration, contact.uri, this.state.accountId]; await this.ExecuteQuery("UPDATE contacts set photo = ?, email = ?, last_message = ?, last_message_id = ?, timestamp = ?, name = ?, organization = ?, unread_messages = ?, public_key = ?, tags = ? , participants = ?, direction = ?, last_call_media = ?, conference = ?, last_call_id = ?, last_call_duration = ? where uri = ? and account = ?", params).then((result) => { if (result.rowsAffected === 1) { console.log('SQL updated contact', contact.uri, 'by', origin); } let myContacts = this.state.myContacts; if (uri !== this.state.accountId) { myContacts[uri] = contact; let favorite = myContacts[uri].tags.indexOf('favorite') > -1 ? true: false; let blocked = myContacts[uri].tags.indexOf('blocked') > -1 ? true: false; this.updateFavorite(uri, favorite); this.updateBlocked(uri, blocked); this.setState({myContacts: myContacts}); } else { this.setState({email: contact.email, displayName: contact.name}) if (myContacts[uri].tags.indexOf('chat') > -1 || myContacts[uri].tags.indexOf('history') > -1) { myContacts[uri] = contact; this.setState({myContacts: myContacts}); } } }).catch((error) => { console.log('SQL update contact', uri, 'error:', error); }); } async deleteSylkContact(uri) { if (uri === this.state.accountId) { await this.ExecuteQuery("UPDATE contacts set direction = null, last_message = null, last_message_id = null, unread_messages = '' where account = ? and uri = ?", [uri, uri]).then((result) => { console.log('SQL update my own contact'); let myContacts = this.state.myContacts; if (uri in myContacts) { delete myContacts[uri]; this.setState({myContacts: myContacts}); } }).catch((error) => { console.log('Delete update mysql SQL error:', error); }); } else { await this.ExecuteQuery("DELETE from contacts where uri = ? and account = ?", [uri, this.state.accountId]).then((result) => { console.log('SQL deleted contact', uri); let myInvitedParties = this.state.myInvitedParties; if (uri in myInvitedParties) { delete myInvitedParties[uri]; this.setState({myInvitedParties: myInvitedParties}); } let idx = this.sql_contacts_keys.indexOf(uri); if (idx > -1) { this.sql_contacts_keys.splice(idx, 1); } //console.log('new keys after delete', this.sql_contacts_keys); let myContacts = this.state.myContacts; if (uri in myContacts) { delete myContacts[uri]; this.setState({myContacts: myContacts}); } }).catch((error) => { console.log('Delete contact SQL error:', error); }); } } async replicatePrivateKey(password) { if (!this.state.account) { console.log('No account'); return; } if (!this.state.keys || !this.state.keys.private) { return; } password = password.trim(); const public_key = this.state.keys.public.replace(/\r/g, '').trim(); await OpenPGP.encryptSymmetric(this.state.keys.private, password, KeyOptions).then((encryptedBuffer) => { utils.timestampedLog('Sending encrypted private key'); encryptedBuffer = public_key + "\n" + encryptedBuffer; this.state.account.sendMessage(this.state.account.id, encryptedBuffer, 'text/pgp-private-key'); }).catch((error) => { console.log('Error encrypting private key:', error); }); } processRemotePrivateKey(keyPair) { let regexp; let match; let public_key; regexp = /(-----BEGIN PGP PUBLIC KEY BLOCK-----[^]*-----END PGP PUBLIC KEY BLOCK-----)/ig; match = keyPair.match(regexp); if (match && match.length === 1) { public_key = match[0]; } if (public_key && this.state.keys && this.state.keys.public === public_key) { console.log('Private key is the same'); return; } this.setState({showImportPrivateKeyModal: true, privateKey: keyPair}); } async savePrivateKey(password) { utils.timestampedLog('Save encrypted private key'); password = password.trim(); let regexp; let match; let keyPair; let public_key; let encrypted_key; regexp = /(-----BEGIN PGP PUBLIC KEY BLOCK-----[^]*-----END PGP PUBLIC KEY BLOCK-----)/ig; match = this.state.privateKey.match(regexp); if (match && match.length === 1) { public_key = match[0]; } if (public_key) { if (this.state.keys && this.state.keys.public === public_key) { this.setState({privateKeyImportStatus: 'Private key is the same', privateKeyImportSuccess: true}); return; } regexp = /(-----BEGIN PGP MESSAGE-----[^]*-----END PGP MESSAGE-----)/ig; match = this.state.privateKey.match(regexp); if (match && match.length === 1) { encrypted_key = match[0]; } if (encrypted_key) { await OpenPGP.decryptSymmetric(encrypted_key, password).then((privateKey) => { utils.timestampedLog('Decrypted PGP private pair'); this.setState({keyDifferentOnServer: false}) keyPair = public_key + "\n" + privateKey; this.processPrivateKey(keyPair); }).catch((error) => { this.setState({privateKeyImportStatus: 'No key received'}); console.log('Error decrypting PGP private key:', error); return }); } else { this.setState({privateKeyImportStatus: 'No encrypted key found'}); console.log('Error parsing PGP private key:', error); return } } else { await OpenPGP.decryptSymmetric(this.state.privateKey, password).then((keyPair) => { utils.timestampedLog('Decrypted PGP private pair'); this.setState({keyDifferentOnServer: false}) this.processPrivateKey(keyPair); }).catch((error) => { this.setState({privateKeyImportStatus: 'No key received'}); console.log('Error decrypting PGP private key:', error); return }); } } async processPrivateKey(keyPair) { utils.timestampedLog('Process key'); keyPair = keyPair.replace(/\r/g, '').trim(); let public_key; let private_key; let status; let keys = this.state.keys || {}; let regexp; let match; regexp = /(-----BEGIN PGP PUBLIC KEY BLOCK-----[^]*-----END PGP PUBLIC KEY BLOCK-----)/ig; match = keyPair.match(regexp); if (match && match.length === 1) { public_key = match[0]; } regexp = /(-----BEGIN PGP PRIVATE KEY BLOCK-----[^]*-----END PGP PRIVATE KEY BLOCK-----)/ig; match = keyPair.match(regexp); if (match && match.length === 1) { private_key = match[0]; } if (public_key && private_key) { if (keys.private !== private_key && keys.public !== public_key) { let new_keys = {private: private_key, public: public_key} this.saveMyKey(new_keys); status = 'Private key copied successfully'; if (this.state.account) { this.state.account.sendMessage(this.state.accountId, 'Private key imported on another device', 'text/pgp-public-key-imported'); } if (this.state.account) { this.state.account.syncConversations(); } } else { status = 'Private key is the same'; console.log(status); } this.setState({privateKeyImportStatus: status, privateKeyImportSuccess: true}); } else { this.setState({privateKeyImportStatus: 'Incorrect password!', privateKeyImportSuccess: false}); } } async savePublicKey(uri, key) { if (uri === this.state.accountId) { return; } if (!key) { console.log('Missing key'); return; } key = key.replace(/\r/g, '').trim(); if (!key.startsWith("-----BEGIN PGP PUBLIC KEY BLOCK-----")) { console.log('Cannot find the start of PGP public key'); return; } if (!key.endsWith("-----END PGP PUBLIC KEY BLOCK-----")) { console.log('Cannot find the end of PGP public key'); return; } let myContacts = this.state.myContacts; if (uri in myContacts) { // } else { myContacts[uri] = {}; } if (myContacts[uri].publicKey === key) { console.log('Public key of', uri, 'did not change'); return; } utils.timestampedLog('Public key of', uri, 'saved'); this.saveSystemMessage(uri, 'Public key received', 'incoming'); myContacts[uri].publicKey = key; this.saveSylkContact(uri, myContacts[uri], 'savePublicKey'); this.sendPublicKey(uri); } async savePublicKeySync(uri, key) { console.log('Sync public key from', uri); if (!key) { console.log('Missing key'); return; } key = key.replace(/\r/g, '').trim(); if (!key.startsWith("-----BEGIN PGP PUBLIC KEY BLOCK-----")) { console.log('Cannot find the start of PGP public key'); return; } if (!key.endsWith("-----END PGP PUBLIC KEY BLOCK-----")) { console.log('Cannot find the end of PGP public key'); return; } let myContacts = this.state.myContacts; if (uri in myContacts) { // } else { myContacts[uri] = {}; } if (myContacts[uri].publicKey === key) { console.log('Public key of', uri, 'did not change'); return; } console.log('Public key of', uri, 'saved'); myContacts[uri].publicKey = key; this.saveSylkContact(uri, myContacts[uri], 'savePublicKeySync'); } _sendMessage(uri, text, id, contentType, timestamp) { // Send outgoing messages if (this.state.account) { //console.log('Send', contentType, 'message', id, 'to', uri); let message = this.state.account.sendMessage(uri, text, contentType, {id: id, timestamp: timestamp}, (error) => { if (error) { console.log('Message', id, 'sending error:', error); this.outgoingMessageStateChanged(id, 'failed'); let status = error.toString(); if (status.indexOf('DNS lookup error') > -1) { status = 'Domain not found'; } this.renderSystemMessage(uri, status, 'incoming'); } }); //console.log(message); //message.on('stateChanged', (oldState, newState) => {this.outgoingMessageStateChanged(message.id, oldState, newState)}) } } textToGiftedMessage(text) { return { _id: uuid.v4(), text: text, createdAt: new Date(), received: false, direction: 'outgoing', user: {} }; } async sendMessage(uri, message) { message.sent = false; message.received = false; message.pending = true; message.direction = 'outgoing'; let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) === -1) { renderMessages[uri] = []; } let public_keys; if (uri in this.state.myContacts && this.state.myContacts[uri].publicKey && this.state.keys) { public_keys = this.state.keys.public + "\n" + this.state.myContacts[uri].publicKey; } if (!message.contentType) { message.contentType = 'text/plain'; } if (message.contentType !== 'text/pgp-public-key' && public_keys && this.state.keys) { await OpenPGP.encrypt(message.text, public_keys).then((encryptedMessage) => { this._sendMessage(uri, encryptedMessage, message._id, message.contentType, message.createdAt); this.saveOutgoingMessage(uri, message, 1); }).catch((error) => { this.saveOutgoingMessage(uri, message, 2); console.log('Failed to encrypt message:', error); this.outgoingMessageStateChanged(message._id, 'failed'); }); } else { console.log('Outgoing non-encrypted message to', uri); this.saveOutgoingMessage(uri, message); this._sendMessage(uri, message.text, message._id, message.contentType, message.createdAt); } renderMessages[uri].push(message); if (this.state.selectedContact) { let selectedContact = this.state.selectedContact; selectedContact.lastMessage = message.text.substring(0, 100); selectedContact.timestamp = message.createdAt; selectedContact.direction = 'outgoing'; selectedContact.lastCallDuration = null; this.setState({selectedContact: selectedContact, messages: renderMessages}); } else { this.setState({messages: renderMessages}); } } async reSendMessage(message, uri) { await this.deleteMessage(message._id, uri).then((result) => { message._id = uuid.v4(); this.sendMessage(uri, message); }).catch((error) => { console.log('Failed to delete old messages'); }); } async saveOutgoingMessage(uri, message, encrypted=0) { this.saveOutgoingChatUri(uri, message.text); //console.log('saveOutgoingMessage', message.text); - let unix_timestamp = Math.floor(message.createdAt / 1000); - let params = [this.state.accountId, message._id, JSON.stringify(message.createdAt), unix_timestamp, message.text, "text/plain", this.state.accountId, uri, "outgoing", "1", encrypted]; + let ts = message.createdAt; + ts.setMilliseconds(0); + + let unix_timestamp = Math.floor(ts / 1000); + let params = [this.state.accountId, message._id, JSON.stringify(ts), unix_timestamp, message.text, "text/plain", this.state.accountId, uri, "outgoing", "1", encrypted]; await this.ExecuteQuery("INSERT INTO messages (account, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, pending, encrypted) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { //console.log('SQL insert message OK'); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') === -1) { console.log('SQL error:', error); } }); } - async saveConferenceMessage(uri, message) { - if (uri.indexOf('@') === -1) { - uri = uri + '@videoconference.' + this.state.defaultDomain; - } + async saveConferenceMessage(room, message) { + //console.log('Save conference message', message); + + let ts = message.createdAt; + ts.setMilliseconds(0); + + let unix_timestamp = Math.floor(ts / 1000); + let url = message.url; + let contentType = "text/plain"; + let from_uri = message.direction === 'incoming' || message.received ? room : this.state.accountId; + let to_uri = message.direction === 'incoming' || message.received ? this.state.accountId : room; + let system = message.system ? '1' : null; + + let sender = !system ? message.user._id : null; - let unix_timestamp = Math.floor(message.createdAt / 1000); - let params = [this.state.accountId, message._id, JSON.stringify(message.createdAt), unix_timestamp, message.text, "text/plain", this.state.accountId, uri, "outgoing", (message.pending ? 1: 0), message.sent ? 1: 0, message.received ? 1: 0]; - await this.ExecuteQuery("INSERT INTO messages (account, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, pending, sent, received) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { + //console.log('Save conference message', message.direction, 'from', from_uri, 'to =', to_uri, 'sender', sender, 'system', system); + + let params = [this.state.accountId, system, sender, url, message._id, JSON.stringify(ts), unix_timestamp, message.text, contentType, from_uri, to_uri, message.direction, (message.pending ? 1: 0), message.sent ? 1: 0, message.received ? 1: 0]; + await this.ExecuteQuery("INSERT INTO messages (account, system, sender, url, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, pending, sent, received) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { console.log('SQL insert message OK'); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') === -1) { console.log('SQL error:', error); } }); } async outgoingMessageStateChanged(id, state) { let query; // mark message status // state can be failed or accepted utils.timestampedLog('Outgoing message', id, 'is', state); if (state === 'accepted') { query = "UPDATE messages set pending = 0 where msg_id = '" + id + "'"; } else if (state === 'failed') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } //console.log(query); if (query) { await this.ExecuteQuery(query).then((results) => { this.updateRenderMessage(id, state); // console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } } async messageStateChanged(id, state, data) { // valid API states: pending -> accepted -> delivered -> displayed, // error, failed or forbidden // valid UI render states: pending, read, received let reason = data.reason; let code = data.code; let failed = state === 'failed'; if (failed && code) { if (code > 500 || code === 408) { utils.timestampedLog('Message', id, 'failed on server:', reason, code); return; } } utils.timestampedLog('Message', id, 'is', state); let query; if (state == 'accepted') { query = "UPDATE messages set pending = 0 where msg_id = '" + id + "'"; } else if (state == 'delivered') { query = "UPDATE messages set pending = 0, sent = 1 where msg_id = '" + id + "'"; } else if (state == 'displayed') { query = "UPDATE messages set received = 1, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'received') { query = "UPDATE messages set sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (failed) { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'error') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'forbidden') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } //console.log(query); await this.ExecuteQuery(query).then((results) => { this.updateRenderMessage(id, state, reason, code); // console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } messageStateChangedSync(obj) { // valid API states: pending -> accepted -> delivered -> displayed, // error, failed or forbidden // valid UI render states: pending, read, received let id = obj.messageId; let state = obj.state; //console.log('Sync message', id, 'state', state); let query; if (state == 'accepted') { query = "UPDATE messages set pending = 0 where msg_id = '" + id + "'"; } else if (state == 'delivered') { query = "UPDATE messages set pending = 0, sent = 1 where msg_id = '" + id + "'"; } else if (state == 'displayed') { query = "UPDATE messages set received = 1, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'received') { query = "UPDATE messages set sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'failed') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'error') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } else if (state == 'forbidden') { query = "UPDATE messages set received = 0, sent = 1, pending = 0 where msg_id = '" + id + "'"; } //console.log(query); this.ExecuteQuery(query).then((results) => { //console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async deleteMessage(id, uri, local=true) { utils.timestampedLog('Message', id, 'is deleted'); let query; // TODO send request to server query = "DELETE from messages where msg_id = '" + id + "'"; //console.log(query); if (local) { this.addJournal(id, 'removeMessage', {uri: uri}); } await this.ExecuteQuery(query).then((results) => { this.deleteRenderMessage(id, uri); // console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async deleteMessageSync(id, uri) { //console.log('Sync message', id, 'is deleted'); let query; query = "DELETE from messages where msg_id = '" + id + "'"; this.ExecuteQuery(query).then((results) => { this.deleteRenderMessageSync(id, uri); // console.log('SQL update OK'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async expireMessage(id, duration=300) { utils.timestampedLog('Expire message', id, 'in', duration, 'seconds after read'); // TODO expire message } async deleteRenderMessage(id, uri) { let changes = false; let renderedMessages = this.state.messages; let newRenderedMessages = []; let myContacts = this.state.myContacts; let existingMessages = []; if (uri in this.state.messages) { existingMessages = renderedMessages[uri]; existingMessages.forEach((m) => { if (m._id !== id) { newRenderedMessages.push(m); } else { changes = true; } }); } if (changes) { renderedMessages[uri] = newRenderedMessages; if (uri in myContacts) { myContacts[uri].totalMessages = myContacts[uri].totalMessages - 1; if (existingMessages.length > 0 && existingMessages[0].id === id) { myContacts[uri].lastMessage = null; myContacts[uri].lastMessageId = null; } } this.setState({messages: renderedMessages, myContacts: myContacts}); } } async deleteRenderMessageSync(id, uri) { let changes = false; let renderedMessages = this.state.messages; let newRenderedMessages = []; let existingMessages = []; if (uri in this.state.messages) { existingMessages = renderedMessages[uri]; existingMessages.forEach((m) => { if (m._id !== id) { newRenderedMessages.push(m); } else { changes = true; } }); } if (changes) { renderedMessages[uri] = newRenderedMessages; this.setState({messages: renderedMessages}); } let idx = 'remove' + id; this.remove_sync_pending_item(idx); } async sendPendingMessage(uri, text, id, contentType, timestamp) { utils.timestampedLog('Outgoing pending message', id); if (uri in this.state.myContacts && this.state.myContacts[uri].publicKey && this.state.keys.public) { let public_keys = this.state.myContacts[uri].publicKey + "\n" + this.state.keys.public; await OpenPGP.encrypt(text, public_keys).then((encryptedMessage) => { //console.log('Outgoing encrypted message to', uri); this._sendMessage(uri, encryptedMessage, id, contentType, timestamp); }).catch((error) => { console.log('Failed to encrypt message:', error); this.outgoingMessageStateChanged(id, 'failed'); //this.saveSystemMessage(uri, 'Failed to encrypt message', 'outgoing'); }); } else { //console.log('Outgoing non-encrypted message to', uri); this._sendMessage(uri, text, id, contentType, timestamp); } } async sendPendingMessages() { if (this.mustLogout) { return; } let content; await this.ExecuteQuery("SELECT * from messages where pending = 1 and content_type like 'text/%' and from_uri = ?", [this.state.accountId]).then((results) => { let rows = results.rows; for (let i = 0; i < rows.length; i++) { if (this.mustLogout) { return; } var item = rows.item(i); content = item.content; let timestamp = new Date(item.unix_timestamp * 1000); this.sendPendingMessage(item.to_uri, content, item.msg_id, item.content_type, timestamp); } }).catch((error) => { console.log('SQL error:', error); }); await this.ExecuteQuery("SELECT * FROM messages where direction = 'incoming' and system is null and received = 0 and from_uri = ?", [this.state.accountId]).then((results) => { //console.log('SQL get messages OK'); let rows = results.rows; let imdn_msg; for (let i = 0; i < rows.length; i++) { if (this.mustLogout) { return; } var item = rows.item(i); let timestamp = JSON.parse(item.timestamp, _parseSQLDate); imdn_msg = {id: item.msg_id, timestamp: timestamp, from_uri: item.from_uri} if (this.sendDispositionNotification(imdn_msg, 'delivered')) { query = "UPDATE messages set received = 1 where msg_id = " + item.msg_id; //console.log(query); this.ExecuteQuery(query).then((results) => { }).catch((error) => { console.log('SQL error:', error); }); } } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async updateRenderMessage(id, state, reason=null, code=null) { let query; let uri; let changes = false; //console.log('updateRenderMessage', id, state); query = "SELECT * from messages where msg_id = '" + id + "';"; //console.log(query); await this.ExecuteQuery(query,[]).then((results) => { let rows = results.rows; if (rows.length === 1) { var item = rows.item(0); //console.log(item); uri = item.direction === 'outgoing' ? item.to_uri : item.from_uri; console.log('Message uri', uri, 'new state', state); if (uri in this.state.messages) { let renderedMessages = this.state.messages; renderedMessages[uri].forEach((m) => { if (m._id === id) { if (state === 'accepted') { m.pending = false; changes = true; } if (state === 'delivered') { m.sent = true; m.pending = false; changes = true; } if (state === 'displayed') { m.received = true; m.sent = true; m.pending = false; changes = true; } if (state === 'failed') { m.received = false; m.sent = false; m.pending = false; m.failed = true; changes = true; } if (state === 'pinned') { m.pinned = true; changes = true; } if (state === 'unpinned') { m.pinned = false; changes = true; } } }); if (changes) { this.setState({messages: renderedMessages}); if (state === 'failed') { reason = 'Message delivery failed: ' + reason; if (code) { reason = reason + '('+ code + ')'; } this.renderSystemMessage(uri, reason, 'incoming'); } } } } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async saveOutgoingChatUri(uri, content='') { console.log('saveOutgoingChatUri', uri); let query; let myContacts = this.state.myContacts; if (uri in myContacts) { // } else { myContacts[uri] = this.newContact(uri); } this.lookupPublicKey(myContacts[uri]); myContacts[uri].unread = []; if (myContacts[uri].totalMessages) { myContacts[uri].totalMessages = myContacts[uri].totalMessages + 1; } if (content.indexOf('-----BEGIN PGP MESSAGE-----') === -1) { myContacts[uri].lastMessage = content.substring(0, 100); } if (myContacts[uri].tags.indexOf('chat') === -1) { myContacts[uri].tags.push('chat'); } myContacts[uri].lastMessageId = null; myContacts[uri].lastCallDuration = null; myContacts[uri].timestamp = new Date(); myContacts[uri].direction = 'outgoing'; this.setState({myContacts: myContacts}); this.saveSylkContact(uri, myContacts[uri], 'saveOutgoingChatUri'); } pinMessage(id) { let query; query = "UPDATE messages set pinned = 1 where msg_id ='" + id + "'"; //console.log(query); this.ExecuteQuery(query).then((results) => { console.log('Message', id, 'pinned'); this.updateRenderMessage(id, 'pinned') this.addJournal(id, 'pinMessage'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } unpinMessage(id) { let query; query = "UPDATE messages set pinned = 0 where msg_id ='" + id + "'"; //console.log(query); this.ExecuteQuery(query).then((results) => { this.updateRenderMessage(id, 'unpinned') this.addJournal(id, 'unPinMessage'); console.log('Message', id, 'unpinned'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } async addJournal(id, action, data={}) { //console.log('Add journal entry:', action, id); this.mySyncJournal[uuid.v4()] = {id: id, action: action, data: data}; this.replayJournal(); } async replayJournal() { if (!this.state.account) { utils.timestampedLog('Sync journal later when going online...'); return; } if (this.mustLogout) { return; } let op; let executed_ops = []; Object.keys(this.mySyncJournal).forEach((key) => { if (this.mustLogout) { return; } executed_ops.push(key); op = this.mySyncJournal[key]; utils.timestampedLog('Sync journal', op.action, op.id); if (op.action === 'removeConversation') { this.state.account.removeConversation(op.id, (error) => { // TODO: add period and delete remote flags if (!error) { //utils.timestampedLog(op.action, op.id, 'journal operation was completed'); executed_ops.push(key); } else { utils.timestampedLog(op.action, op.id, 'journal operation failed:', error); } }); } else if (op.action === 'readConversation') { this.state.account.markConversationRead(op.id, (error) => { if (!error) { //utils.timestampedLog(op.action, op.id, 'journal operation completed'); executed_ops.push(key); } else { utils.timestampedLog(op.action, op.id, 'journal operation failed:', error); } }); } else if (op.action === 'removeMessage') { this.state.account.removeMessage({id: op.id, receiver: op.data.uri}, (error) => { if (!error) { //utils.timestampedLog(op.action, op.id, 'journal operation completed'); executed_ops.push(key); } else { utils.timestampedLog(op.action, op.id, 'journal operation failed:', error); } }); } }); executed_ops.forEach((key) => { delete this.mySyncJournal[key]; }); storage.set('mySyncJournal', this.mySyncJournal); this.sendPendingMessages(); } async confirmRead(uri){ if (uri.indexOf('@') === -1) { return; } if (uri in this.state.decryptingMessages) { return; } //console.log('Confirm read messages for', uri); let displayed = []; await this.ExecuteQuery("SELECT * FROM messages where from_uri = '" + uri + "' and received = 1 and system is NULL and to_uri = ?", [this.state.accountId]).then((results) => { let rows = results.rows; if (rows.length > 0) { //console.log('We must confirm read of', rows.length, 'messages'); } for (let i = 0; i < rows.length; i++) { var item = rows.item(i); if (this.sendDispositionNotification(item)) { displayed.push(item.msg_id); } } if (displayed.length > 0) { let sql_ids = ''; let i = 1; displayed.forEach((msg_id) => { sql_ids = sql_ids + "'" + msg_id + "'"; if (i < displayed.length) { sql_ids = sql_ids + ', '; } i = i + 1; }); let query = "UPDATE messages set received = 2 where msg_id in (" + sql_ids + ")"; //console.log(query); this.ExecuteQuery(query).then((results) => { //console.log('Sent disposition saved for', displayed.length, 'messages'); }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } }).catch((error) => { console.log('SQL error:', error); }); this.resetUnreadCount(uri); } async resetUnreadCount(uri) { //console.log('--- resetUnreadCount', uri); let myContacts = this.state.myContacts; let missedCalls = this.state.missedCalls; let idx; let changes = false; if (uri in myContacts) { } else { return; } if (myContacts[uri].unread.length > 0) { myContacts[uri].unread = []; myContacts[uri].unread.forEach((id) => { idx = missedCalls.indexOf(id); if (idx > -1) { missedCalls.splice(idx, 1); } }); changes = true; } if (myContacts[uri].lastCallId) { idx = missedCalls.indexOf(myContacts[uri].lastCallId); if (idx > -1) { missedCalls.splice(idx, 1); } } idx = myContacts[uri].tags.indexOf('missed'); if (idx > -1) { myContacts[uri].tags.splice(idx, 1); changes = true; } this.updateTotalUread(myContacts); if (changes) { this.saveSylkContact(uri, myContacts[uri], 'resetUnreadCount'); this.addJournal(uri, 'readConversation'); } this.setState({missedCalls: missedCalls}); } async sendDispositionNotification(message, state='displayed') { if (!this.state.account) { return false; } let query; let result = {}; let id = message.msg_id || message.id; this.state.account.sendDispositionNotification(message.from_uri, id, message.timestamp, state,(error) => { if (!error) { utils.timestampedLog('Message', id, 'was', state, 'now'); return true; } else { utils.timestampedLog(state, 'notification for message', id, 'send failed:', error); return false; } }); return false; } loadEarlierMessages() { if (!this.state.selectedContact) { return; } let myContacts = this.state.myContacts; let uri = this.state.selectedContact.uri; let limit = this.state.messageLimit * this.state.messageZoomFactor; if (myContacts[uri].totalMessages < limit) { //console.log('No more messages for', uri); return; } let messageZoomFactor = this.state.messageZoomFactor; messageZoomFactor = messageZoomFactor + 1; this.setState({messageZoomFactor: messageZoomFactor}); setTimeout(() => { this.getMessages(this.state.selectedContact.uri); }, 10); } sql2GiftedChat(item, content) { let image; let timestamp = new Date(item.unix_timestamp * 1000); let failed = (item.pending === 0 && item.received === 0 && item.sent === 1) ? true: false; let msg; + let text; + + let from_uri = item.sender ? item.sender : item.from_uri; + + if (item.url) { + if (item.url.toLowerCase().endsWith('.png')) { + image = item.url; + } else if (item.url.toLowerCase().endsWith('.jpg')) { + image = item.url; + } else if (item.url.toLowerCase().endsWith('.gif')) { + image = item.url; + } + } else { + text = content; + } msg = { _id: item.msg_id, - text: content, image: image, + url: item.url, + text: text, encrypted: item.encrypted, createdAt: timestamp, sent: ((item.sent === 1 || item.received === 1) && !failed) ? true : false, direction: item.direction, received: item.received === 1 ? true : false, pending: (item.pending === 1 && item.sent !== 1) ? true : false, system: item.system === 1 ? true : false, failed: failed, pinned: (item.pinned === 1) ? true: false, - user: item.direction == 'incoming' ? {_id: item.from_uri, name: item.from_name} : {} + user: item.direction == 'incoming' ? {_id: from_uri, name: from_uri} : {} } + //console.log('sql2GiftedChat', item.msg_id, item.direction, 'from', from_uri, 'to', item.to_uri, text, 'system', item.system); + //console.log('sql2GiftedChat', msg); + return msg; } async decryptMessage(message, updateContact=false) { // encrypted // 0 not encrypted // 1 encrypted content // 2 decrypted content // 3 failed to decrypt if (!this.state.keys.private) { return; } let id = message.msg_id; let decryptingMessages = this.state.decryptingMessages; let msg; let pending_messages = []; let idx; await OpenPGP.decrypt(message.content, this.state.keys.private).then((content) => { //console.log('Message', id, message.content_type, 'to', message.to_uri, 'was decrypted'); let messages = this.state.messages; let uri = message.direction === 'incoming' ? message.from_uri : message.to_uri; if (uri in decryptingMessages) { pending_messages = decryptingMessages[uri]; idx = pending_messages.indexOf(id); if (pending_messages.length > 10) { let status = 'Decrypting ' + pending_messages.length + ' messages with'; this._notificationCenter.postSystemNotification(status, {body: uri}); } else if (pending_messages.length === 10) { let status = 'All messages decrypted'; this._notificationCenter.postSystemNotification(status); } if (idx > -1) { pending_messages.splice(idx, 1); decryptingMessages[uri] = pending_messages; this.setState({decryptingMessages: decryptingMessages}); } } if (updateContact) { let myContacts = this.state.myContacts; console.log('Update contact after decryption', uri); if (message.timestamp > myContacts[uri].timestamp) { myContacts[uri].lastMessage = content.substring(0, 100); myContacts[uri].lastMessageId = message.id; myContacts[uri].timestamp = message.timestamp; this.saveSylkContact(uri, myContacts[uri], 'decryptMessage'); this.setState({myContacts: myContacts}); } } if (uri in messages) { let render_messages = messages[uri]; if (message.content_type === 'text/html') { content = utils.html2text(content); } else if (message.content_type === 'text/plain') { content = content; } else if (message.content_type.indexOf('image/') > -1) { image = `data:${message.content_type};base64,${btoa(content)}` } msg = this.sql2GiftedChat(message, content); render_messages.push(msg); messages[uri] = render_messages; if (pending_messages.length === 0) { this.confirmRead(uri); this.setState({message: messages}); } } let params = [content, id]; this.ExecuteQuery("update messages set encrypted = 2, content = ? where msg_id = ?", params).then((result) => { //console.log('SQL updated message decrypted', id); }).catch((error) => { console.log('SQL message update error:', error); }); }).catch((error) => { let params = [id]; //console.log('Failed to decrypt message:', error); this.ExecuteQuery("update messages set encrypted = 3 where msg_id = ?", params).then((result) => { //console.log('SQL updated message decrypted', id, 'rows affected', result.rowsAffected); }).catch((error) => { console.log('SQL message update error:', error); }); }); } lookupPublicKey(contact) { if (!contact.publicKey && !contact.conference && this.state.connection) { this.state.connection.lookupPublicKey(contact.uri); } } async contactsCount() { let query = "SELECT count(*) as rows FROM contacts where account = ?"; let rows; let total; await this.ExecuteQuery(query, [this.state.accountId]).then((results) => { rows = results.rows; total = rows.item(0).rows; console.log(total, 'total contacts'); }).catch((error) => { console.log('SQL error:', error); }); } - async getMessages(uri, pinned=false) { if (this.state.syncConversations) { return; } let messages = this.state.messages; let myContacts = this.state.myContacts; let msg; let query; let rows = 0; let total = 0; let last_messages = []; let orig_uri; if (!uri) { query = "SELECT count(*) as rows FROM messages where (from_uri = ? and direction = 'outgoing') or (to_uri = ? and direction = 'incoming')"; await this.ExecuteQuery(query, [this.state.accountId, this.state.accountId]).then((results) => { rows = results.rows; total = rows.item(0).rows; console.log(total, 'total messages'); }).catch((error) => { console.log('SQL error:', error); }); return; } orig_uri = uri; if (Object.keys(myContacts).indexOf(uri) === -1) { this.setState({messages: {}}); return; } if (utils.isPhoneNumber(uri) && uri.indexOf('@') === -1) { uri = uri + '@' + this.state.defaultDomain; } else { this.resetUnreadCount(orig_uri); this.lookupPublicKey(myContacts[orig_uri]); } console.log('Get messages with', uri, 'with zoom factor', this.state.messageZoomFactor); let limit = this.state.messageLimit * this.state.messageZoomFactor; query = "SELECT count(*) as rows FROM messages where ((from_uri = ? and to_uri = ?) or (from_uri = ? and to_uri = ?))"; if (pinned) { query = query + ' and pinned = 1'; } await this.ExecuteQuery(query, [this.state.accountId, uri, uri, this.state.accountId]).then((results) => { rows = results.rows; total = rows.item(0).rows; - console.log(total, 'messages with', uri, 'from database'); + //console.log(total, 'messages with', uri, 'from database'); }).catch((error) => { console.log('SQL error:', error); }); myContacts[orig_uri].totalMessages = total; query = "SELECT * FROM messages where ((from_uri = ? and to_uri = ?) or (from_uri = ? and to_uri = ?)) "; if (pinned) { query = query + ' and pinned = 1'; } query = query + ' order by unix_timestamp desc limit ?, ?'; await this.ExecuteQuery(query, [this.state.accountId, uri, uri, this.state.accountId, this.state.messageStart, limit]).then((results) => { - console.log('SQL get messages OK', results.rows.length); + //console.log('SQL get messages OK', results.rows.length); let rows = results.rows; messages[orig_uri] = []; let content; let ts; let last_message; let last_message_id; let last_direction; let messages_to_decrypt = []; let decryptingMessages = {}; let msg; let enc; for (let i = 0; i < rows.length; i++) { var item = rows.item(i); if (!item.content || !item.msg_id) { //console.log('Remove broken message', item); this.ExecuteQuery('delete from messages where msg_id = ?', [item.msg_id]); myContacts[orig_uri].totalMessages = myContacts[orig_uri].totalMessages - 1; continue; } content = item.content; if (!content) { content = 'Broken message'; } last_direction = item.direction; let timestamp; last_message = null; last_message_id = null; let unix_timestamp; if (item.unix_timestamp === 0) { timestamp = JSON.parse(item.timestamp, _parseSQLDate); unix_timestamp = Math.floor(timestamp / 1000); item.unix_timestamp = unix_timestamp; this.ExecuteQuery('update messages set unix_timestamp = ? where msg_id = ?', [unix_timestamp, item.msg_id]); } else { timestamp = new Date(item.unix_timestamp * 1000); } const is_encrypted = content.indexOf('-----BEGIN PGP MESSAGE-----') > -1 && content.indexOf('-----END PGP MESSAGE-----') > -1; if (is_encrypted) { myContacts[orig_uri].totalMessages = myContacts[orig_uri].totalMessages - 1; if (item.encrypted === null) { item.encrypted = 1; } enc = parseInt(item.encrypted); if (enc && enc !== 3 ) { if (uri in decryptingMessages) { } else { decryptingMessages[orig_uri] = []; } decryptingMessages[orig_uri].push(item.msg_id); messages_to_decrypt.push(item); } } else { if (item.content_type === 'text/html') { content = utils.html2text(content); } else if (item.content_type === 'text/plain') { content = content; } else if (item.content_type.indexOf('image/') > -1) { image = `data:${item.content_type};base64,${btoa(content)}` } else if (item.content_type === 'application/sylk-contact-update') { myContacts[orig_uri].totalMessages = myContacts[orig_uri].totalMessages - 1; console.log('Remove update contact message', item.id); this.ExecuteQuery('delete from messages where msg_id = ?', [item.msg_id]); continue; } else { console.log('Unknown message', item.msg_id, 'type', item.content_type); myContacts[orig_uri].totalMessages = myContacts[orig_uri].totalMessages - 1; continue; } msg = this.sql2GiftedChat(item, content); messages[orig_uri].push(msg); } } console.log('Got', messages[orig_uri].length, 'out of', total, 'messages for', uri); last_messages = messages[orig_uri]; last_messages.reverse(); if (last_messages.length > 0) { last_messages.forEach((last_item) => { if (!last_item.image && !last_item.system) { last_message = last_item.text.substring(0, 100); last_message_id = last_item.id; } else { return; } }); } if (orig_uri in myContacts) { if (last_message && last_message != myContacts[orig_uri].lastMessage) { myContacts[orig_uri].lastMessage = last_message; myContacts[orig_uri].lastMessageId = last_message_id; this.saveSylkContact(uri, myContacts[orig_uri], 'getMessages'); this.setState({myContacts: myContacts}); } } this.setState({messages: messages, decryptingMessages: decryptingMessages}); let i = 1; messages_to_decrypt.forEach((item) => { var updateContact = messages_to_decrypt.length === i; //console.log('To decrypt', messages_to_decrypt.length, 'updateContact =', updateContact); this.decryptMessage(item, updateContact); i = i + 1; }); }).catch((error) => { console.log('SQL error:', error); }); } async deleteMessages(uri, local=true) { console.log('Delete messages for', uri); let myContacts = this.state.myContacts; let query; let params; let wipe = false; let orig_uri = uri; if (uri) { if (uri.indexOf('@') === -1 && utils.isPhoneNumber(uri)) { uri = uri + '@' + this.state.defaultDomain; } else { if (local) { this.addJournal(orig_uri, 'removeConversation'); } } } if (uri) { query = "DELETE FROM messages where (from_uri = ? and to_uri = ? and direction = 'incoming') or (from_uri = ? and to_uri = ? and direction = 'outgoing')"; params = [uri, this.state.accountId, this.state.accountId, uri]; } else { wipe = true; console.log('--- Wiping device --- '); query = "DELETE FROM messages where (to_uri = ? and direction = 'incoming') or (from_uri = ? and direction = 'outgoing')"; params = [this.state.accountId, this.state.accountId]; uri = this.state.accountId; + this.setState({messages: {}, myContacts: {}}); this.saveLastSyncId(null); } await this.ExecuteQuery(query, params).then((result) => { console.log('SQL deleted', result.rowsAffected, 'messages'); if (result.rowsAffected) { this._notificationCenter.postSystemNotification(result.rowsAffected + ' messages removed'); } if (wipe) { this.ExecuteQuery('delete from contacts where account = ?', [this.state.accountId]); setTimeout(() => { this.logout(); }, 3000); } else { this.removeContact(orig_uri); } }).catch((error) => { console.log('SQL query:', query); console.log('SQL error:', error); }); } playIncomingSound() { let must_play_sound = true; if (this.msg_sound_played_ts) { let diff = (Date.now() - this.msg_sound_played_ts)/ 1000; if (diff < 10) { must_play_sound = false; } } this.msg_sound_played_ts = Date.now(); if (must_play_sound) { try { if (Platform.OS === 'ios') { SoundPlayer.setSpeaker(true); } SoundPlayer.playSoundFile('message_received', 'wav'); } catch (e) { console.log('Cannot play message_received.wav', e); } } } async removeMessage(message, uri=null) { if (uri === null) { uri = message.sender.uri; } await this.deleteMessage(message.id, uri, false).then((result) => { console.log('Message', message.id, 'to', uri, 'is removed'); }).catch((error) => { //console.log('Failed to remove message', message.id, 'to', uri); return; }); let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) === -1) { return; } let existingMessages = renderMessages[uri]; let newMessages = []; existingMessages.forEach((msg) => { if (msg.id === message.id) { return; } newMessages.push(msg); }); let myContacts = this.state.myContacts; if (uri in myContacts) { if (myContacts[uri].totalMessages) { myContacts[uri].totalMessages = myContacts[uri].totalMessages - 1; } let idx = myContacts[uri].unread.indexOf(message.id); if (idx > -1) { myContacts[uri].unread.splice(idx, 1); } if (myContacts[uri].lastMessageId === message.id) { myContacts[uri].lastMessage = null; myContacts[uri].lastMessageId = null; } } renderMessages[uri] = newMessages; this.setState({messages: renderMessages, myContacts: myContacts}); } async removeConversation(obj) { let uri = obj; //console.log('removeConversation', uri); let renderMessages = this.state.messages; await this.deleteMessages(uri, false).then((result) => { utils.timestampedLog('Conversation with', uri, 'was removed'); }).catch((error) => { console.log('Failed to delete conversation with', uri); }); } removeConversationSync(obj) { let uri = obj.content; //console.log('Sync remove conversation with', uri, 'before', obj.timestamp); let query; let unix_timestamp = Math.floor(obj.timestamp / 1000); query = "DELETE FROM messages where (from_uri = ? and to_uri = ?) or (from_uri = ? and to_uri = ?) and (unix_timestamp < ? or unix_timestamp = 0)"; this.ExecuteQuery(query, [this.state.accountId, uri, uri, this.state.accountId, unix_timestamp]).then((result) => { if (result.rowsAffected > 0) { console.log('SQL deleted', result.rowsAffected, 'messages with', uri, 'before', obj.timestamp); } }).catch((error) => { console.log('SQL delete conversation sync error:', error); }); let myContacts = this.state.myContacts; if (uri in myContacts && myContacts[uri].timestamp < obj.timestamp) { this.deleteSylkContact(uri); } } async readConversation(obj) { let uri = obj; this.resetUnreadCount(uri) } removeContact(uri) { let myContacts = this.state.myContacts; this.deleteSylkContact(uri); if (this.state.selectedContact && this.state.selectedContact.uri === uri) { this.setState({selectedContact: null}); } let renderMessages = this.state.messages; if (uri in renderMessages) { delete renderMessages[uri]; this.setState({messages: renderMessages}); } } add_sync_pending_item(item) { if (this.sync_pending_items.indexOf(item) > -1) { return; } this.sync_pending_items.push(item); if (this.sync_pending_items.length == 1) { //console.log('Sync started ---'); this.setState({syncConversations: true}); if (this.syncTimer === null) { this.syncTimer = setTimeout(() => { this.resetSyncTimer(); }, 1000 * 60); } } } resetSyncTimer() { if (this.sync_pending_items.length > 0) { this.sync_pending_items = []; console.log('Sync ended by timer ---'); //console.log('Pending tasks:', this.sync_pending_items); this.afterSyncTasks(); } } remove_sync_pending_item(item) { //console.log('remove_sync_pending_item', this.sync_pending_items.length); let idx = this.sync_pending_items.indexOf(item); if (idx > -1) { this.sync_pending_items.splice(idx, 1); } if (this.sync_pending_items.length == 0 && this.state.syncConversations) { if (this.syncTimer !== null) { clearTimeout(this.syncTimer); this.syncTimer = null; } this.afterSyncTasks(); } else { if (this.sync_pending_items.length > 10 && this.sync_pending_items.length % 10 == 0) { //console.log(this.sync_pending_items.length, 'sync items remaining'); } else if (this.sync_pending_items.length > 0 && this.sync_pending_items.length < 10) { //console.log(this.sync_pending_items.length, 'sync items remaining'); } } } async insertPendingMessages() { let query = "INSERT INTO messages (account, encrypted, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, pending, sent, received) VALUES " if (this.pendingNewSQLMessages.length > 0) { //console.log('Inserting', this.pendingNewSQLMessages.length, 'new messages'); } let pendingNewSQLMessages = this.pendingNewSQLMessages; this.pendingNewSQLMessages = []; let all_values = []; let n = 0; let i = 1; if (pendingNewSQLMessages.length > 0) { pendingNewSQLMessages.forEach((values) => { Array.prototype.push.apply(all_values, values); query = query + "("; n = 0; while (n < values.length ) { query = query + "?" if (n < values.length - 1) { query = query + ","; } n = n + 1; } query = query + ")"; if (pendingNewSQLMessages.length > i) { query = query + ", "; } i = i + 1; }); this.ExecuteQuery(query, all_values).then((result) => { //console.log('SQL inserted', pendingNewSQLMessages.length, 'messages'); this.newSyncMessagesCount = this.newSyncMessagesCount + pendingNewSQLMessages.length; }).catch((error) => { console.log('SQL error inserting bulk messages:', error.message); console.log('query:', query); pendingNewSQLMessages.forEach((values) => { this.ExecuteQuery(query, values).then((result) => { this.newSyncMessagesCount = this.newSyncMessagesCount + 1; }).catch((error) => { if (error.message.indexOf('SQLITE_CONSTRAINT_PRIMARYKEY') > -1) { console.log('Duplicate message id', values[2]); } else { console.log('SQL error inserting message', values[2], error.message); } }); }); }); - } else { - console.log('No messages to insert'); } } async afterSyncTasks() { this.insertPendingMessages(); if (this.newSyncMessagesCount) { console.log('Synced', this.newSyncMessagesCount, 'messages from server'); this.newSyncMessagesCount = 0; } this.setState({syncConversations: false}); this.sync_pending_items = []; let myContacts = this.state.myContacts; let updateContactUris = this.state.updateContactUris; let replicateContacts = this.state.replicateContacts; let deletedContacts = this.state.deletedContacts; //console.log('updateContactUris:', Object.keys(updateContactUris).toString()); //console.log('replicateContacts:', Object.keys(replicateContacts).toString()); //console.log('deletedContacts:', Object.keys(deletedContacts).toString()); let uris = Object.keys(replicateContacts).concat(Object.keys(updateContactUris)); uris = [... new Set(uris)]; //console.log('Update contacts:', uris.toString()); // sync changed myContacts with SQL database let created; let old_tags; uris.forEach((uri) => { if (uri in myContacts) { created = false; } else { if (uri in deletedContacts) { return } myContacts[uri] = this.newContact(uri); created = true; } if (uri in replicateContacts) { myContacts[uri].name = replicateContacts[uri].name; myContacts[uri].email = replicateContacts[uri].email; myContacts[uri].organization = replicateContacts[uri].organization; old_tags = myContacts[uri].tags; myContacts[uri].tags = replicateContacts[uri].tags; myContacts[uri].participants = replicateContacts[uri].participants; if (myContacts[uri].timestamp > replicateContacts[uri].timestamp) { if (old_tags.indexOf('missed') > -1 && replicateContacts[uri].tags.indexOf('missed') === -1) { myContacts[uri].tags.push('missed'); } } if (old_tags.indexOf('chat') > -1 && replicateContacts[uri].tags.indexOf('chat') === -1) { myContacts[uri].tags.push('chat'); } if (old_tags.indexOf('history') > -1 && replicateContacts[uri].tags.indexOf('history') === -1) { myContacts[uri].tags.push('history'); } if (replicateContacts[uri].timestamp > myContacts[uri].timestamp || created) { myContacts[uri].timestamp = replicateContacts[uri].timestamp; if (uri === this.state.accountId) { let name = replicateContacts[uri].name || ''; let organization = replicateContacts[uri].organization || ''; this.setState({displayName: name, organization: organization, email: myContacts[uri].email}); } } } if (uri in updateContactUris && updateContactUris[uri] > myContacts[uri].timestamp) { myContacts[uri].timestamp = updateContactUris[uri]; } this.saveSylkContact(uri, myContacts[uri], 'syncEnd'); }); let purgeMessages = this.state.purgeMessages; purgeMessages.forEach((id) => { this.deleteMessage(id, this.state.accountId); }); Object.keys(deletedContacts).forEach((uri) => { this.removeConversationSync(deletedContacts[uri]) }); this.setState({purgeMessages:[], syncConversations: false, firstSyncDone: true, updateContactUris: {}, replicateContacts: {}, deletedContacts: {}}); if (this.syncStartTimestamp) { let diff = (Date.now() - this.syncStartTimestamp)/ 1000; this.syncStartTimestamp = null; console.log('Sync ended after', diff, 'seconds'); if (diff > 3) { this._notificationCenter.postSystemNotification('Messages in sync with server'); } } setTimeout(() => { this.addTestContacts(); this.refreshNavigationItems(); }, 2000); } async syncConversations(messages) { if (this.sync_pending_items.length > 0) { console.log('Sync already in progress'); return; } if (this.mustLogout || this.currentRoute === '/logout') { return; } if (this.currentRoute === '/login') { return; } this.syncStartTimestamp = new Date(); let myContacts = this.state.myContacts; let renderMessages = this.state.messages; if (messages.length > 0) { console.log('Sync', messages.length, 'events from server'); this._notificationCenter.postSystemNotification('Syncing messages with the server'); this.add_sync_pending_item('sync_in_progress'); } else { this.setState({firstSyncDone: true}); console.log('Sync ended'); setTimeout(() => { + this.addTestContacts(); + this.refreshNavigationItems(); this.updateServerHistory() - }, 1000); + }, 500); } let i = 0; let idx; let uri; let last_id; let content; let contact; let existingMessages; let formatted_date; let newMessages = []; let lastMessages = {}; let updateContactUris = {}; let deletedContacts = {}; let last_timestamp; let stats = {state: 0, remove: 0, incoming: 0, outgoing: 0, delete: 0, read: 0} let purgeMessages = this.state.purgeMessages; messages.forEach((message) => { if (this.mustLogout) { return; } last_timestamp = message.timestamp; i = i + 1; uri = null; if (message.contentType === 'application/sylk-message-remove') { uri = message.content.contact; } else if (message.contentType === 'application/sylk-conversation-remove') { uri = message.content; } else if (message.contentType === 'application/sylk-conversation-read' ) { uri = message.content; } else if (message.contentType === 'message/imdn') { } else { if (message.sender.uri === this.state.account.id) { uri = message.receiver; } else { uri = message.sender.uri; } } if (uri) { //console.log('Process journal', i, 'of', messages.length, message.contentType, uri, message.timestamp); } let d = new Date(2019); if (message.timestamp < d) { console.log('Skip broken journal with broken date', message.id); purgeMessages.push(message.id); return; } if (!message.content) { console.log('Skip broken journal with empty body', message.id); purgeMessages.push(message.id); return; } if (message.contentType !== 'application/sylk-conversation-remove' && message.contentType !== 'application/sylk-message-remove' && uri && Object.keys(myContacts).indexOf(uri) === -1) { - if (uri.indexOf('@') > -1 && !this.isEmailAddress(uri)) { + if (uri.indexOf('@') > -1 && !utils.isEmailAddress(uri)) { return; } console.log('Will add a new contact', uri); myContacts[uri] = this.newContact(uri); myContacts[uri].timestamp = message.timestamp; //this.setState({myContacts: myContacts}); } //console.log('Sync', message.timestamp, message.contentType, uri); if (message.contentType === 'application/sylk-message-remove') { idx = 'remove' + message.id; this.add_sync_pending_item(idx); this.deleteMessageSync(message.id, uri); if (uri in renderMessages) { existingMessages = renderMessages[uri]; newMessages = []; existingMessages.forEach((msg) => { if (msg.id === message.id) { return; } newMessages.push(msg); }); renderMessages[uri] = newMessages; } if (uri in myContacts) { let idx = myContacts[uri].unread.indexOf(message.id); if (idx > -1) { myContacts[uri].unread.splice(idx, 1); } if (myContacts[uri].lastMessageId === message.id) { myContacts[uri].lastMessage = null; myContacts[uri].lastMessageId = null; } } if (uri in lastMessages && lastMessages[uri] === message.id) { delete lastMessages[uri]; } stats.delete = stats.delete + 1; } else if (message.contentType === 'application/sylk-conversation-remove') { if (uri in myContacts && message.timestamp > myContacts[uri].timestamp) { delete myContacts[uri]; } if (uri in updateContactUris) { delete updateContactUris[uri]; } if (uri in lastMessages) { delete lastMessages[uri]; } if (uri in renderMessages) { delete renderMessages[uri]; } deletedContacts[uri] = message; stats.remove = stats.remove + 1; } else if (message.contentType === 'application/sylk-conversation-read') { updateContactUris[uri] = last_timestamp; myContacts[uri].unread = []; stats.read = stats.read + 1; } else if (message.contentType === 'message/imdn') { this.messageStateChangedSync({messageId: message.id, state: message.state}); stats.state = stats.state + 1; } else { this.add_sync_pending_item(message.id); if (message.sender.uri === this.state.account.id) { if (message.contentType !== 'application/sylk-contact-update') { if (myContacts[uri].tags.indexOf('blocked') > -1) { return; } myContacts[uri].lastMessageId = message.id; myContacts[uri].lastMessage = null; // need to be loaded later after decryption myContacts[uri].lastCallDuration = null; myContacts[uri].direction = 'outgoing'; if (myContacts[uri].tags.indexOf('chat') === -1 && (message.contentType === 'text/plain' || message.contentType === 'text/html')) { myContacts[uri].tags.push('chat'); } lastMessages[uri] = message.id; if (message.timestamp > myContacts[uri].timestamp) { updateContactUris[uri] = message.timestamp; myContacts[uri].timestamp = message.timestamp; } } stats.outgoing = stats.outgoing + 1; this.outgoingMessageSync(message); } else { if (myContacts[uri].tags.indexOf('blocked') > -1) { return; } if (message.timestamp > myContacts[uri].timestamp) { updateContactUris[uri] = message.timestamp; myContacts[uri].timestamp = message.timestamp; } myContacts[uri].lastMessageId = message.id; myContacts[uri].lastMessage = null; // need to be loaded later after decryption myContacts[uri].lastCallDuration = null; myContacts[uri].direction = 'incoming'; if (myContacts[uri].tags.indexOf('chat') === -1 && (message.contentType === 'text/plain' || message.contentType === 'text/html')) { myContacts[uri].tags.push('chat'); } lastMessages[uri] = message.id; if (message.dispositionNotification.indexOf('display') > -1) { myContacts[uri].unread.push(message.id); } stats.incoming = stats.incoming + 1; this.incomingMessageSync(message); } } last_id = message.id; }); this.updateTotalUread(myContacts); /* if (messages.length > 0) { Object.keys(stats).forEach((key) => { console.log('Sync', stats[key], key); }); } */ this.setState({messages: renderMessages, updateContactUris: updateContactUris, deletedContacts: deletedContacts, purgeMessages: purgeMessages }); this.remove_sync_pending_item('sync_in_progress'); Object.keys(lastMessages).forEach((uri) => { //console.log('Update last message for', uri); // TODO update lastMessage content for each contact }); if (last_id) { this.saveLastSyncId(last_id, true); } } async publicKeyReceived(message) { if (message.publicKey) { this.savePublicKey(message.uri, message.publicKey.trim()); } else { console.log('No public key available on server for', message.uri); if (message.uri === this.state.accountId) { var uri = uuid.v4() + '@' + this.state.defaultDomain; //console.log('Send 1st public to', uri); this.sendPublicKey(uri); } } } async incomingMessage(message) { console.log('Message', message.id, message.contentType, 'was received'); // Handle incoming messages this.saveLastSyncId(message.id); if (message.content.indexOf('?OTRv3') > -1) { return; } if (message.contentType === 'application/sylk-contact-update') { return; } if (message.contentType === 'text/pgp-public-key') { this.savePublicKey(message.sender.uri, message.content); return; } if (message.contentType === 'text/pgp-private-key' && message.sender.uri === this.state.account.id) { console.log('Received PGP private key from another device'); this.processRemotePrivateKey(message.content); return; } const is_encrypted = message.content.indexOf('-----BEGIN PGP MESSAGE-----') > -1 && message.content.indexOf('-----END PGP MESSAGE-----') > -1; if (is_encrypted) { if (!this.state.keys || !this.state.keys.private) { console.log('Missing private key, cannot decrypt message'); this.saveSystemMessage(message.sender.uri, 'Cannot decrypt: no private key', 'incoming'); } else { await OpenPGP.decrypt(message.content, this.state.keys.private).then((decryptedBody) => { //console.log('Incoming message', message.id, 'decrypted'); this.handleIncomingMessage(message, decryptedBody); }).catch((error) => { //console.log('Failed to decrypt message:', error); this.sendPublicKey(message.sender.uri); //this.saveSystemMessage(message.sender.uri, 'Cannot decrypt: wrong public key', 'incoming'); }); } } else { //console.log('Incoming message is not encrypted'); this.handleIncomingMessage(message); } } handleIncomingMessage(message, decryptedBody=null) { let content = decryptedBody || message.content; //this.sendLocalAndroidNotification(message.sender.uri, content); this.saveIncomingMessage(message, decryptedBody); let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(message.sender.uri) === -1) { renderMessages[message.sender.uri] = []; } renderMessages[message.sender.uri].push(utils.sylkToRenderMessage(message, decryptedBody, 'incoming')); if (this.state.selectedContact) { let selectedContact = this.state.selectedContact; selectedContact.lastMessage = content.substring(0, 100); selectedContact.timestamp = message.timestamp; selectedContact.direction = 'incoming'; selectedContact.lastCallDuration = null; this.setState({selectedContact: selectedContact, messages: renderMessages}); } else { this.setState({messages: renderMessages}); } this.notifyIncomingMessageWhileInACall(message.sender.uri); } async incomingMessageSync(message) { //console.log('Sync incoming message', message); // Handle incoming messages if (message.content.indexOf('?OTRv3') > -1) { this.remove_sync_pending_item(message.id); return; } if (message.contentType === 'text/pgp-public-key') { this.remove_sync_pending_item(message.id); this.savePublicKeySync(message.sender.uri, message.content); return; } if (message.contentType === 'text/pgp-public-key-imported') { return; } if (message.contentType === 'text/pgp-private-key') { this.remove_sync_pending_item(message.id); return; } const is_encrypted = message.content.indexOf('-----BEGIN PGP MESSAGE-----') > -1 && message.content.indexOf('-----END PGP MESSAGE-----') > -1; let content = message.content; if (is_encrypted) { this.saveIncomingMessageSync(message, null, true); } else { //console.log('Incoming message', message.id, 'not encrypted from', message.sender.uri); this.saveIncomingMessageSync(message); } this.remove_sync_pending_item(message.id); } async outgoingMessage(message) { console.log('Outgoing message', message.id, 'to', message.receiver); this.saveLastSyncId(message.id); if (message.content.indexOf('?OTRv3') > -1) { return; } if (message.contentType === 'text/pgp-public-key') { return; } if (message.contentType === 'text/pgp-public-key-imported') { this.hideExportPrivateKeyModal(); this.hideImportPrivateKeyModal(); return; } if (message.contentType === 'message/imdn') { return; } if (message.contentType === 'text/pgp-private-key' && message.sender.uri === this.state.account.id) { console.log('Received my own PGP private key'); this.processRemotePrivateKey(message.content); return; } const is_encrypted = message.content.indexOf('-----BEGIN PGP MESSAGE-----') > -1 && message.content.indexOf('-----END PGP MESSAGE-----') > -1; let content = message.content; if (is_encrypted) { await OpenPGP.decrypt(message.content, this.state.keys.private).then((decryptedBody) => { //console.log('Outgoing message', message.id, 'decrypted to', message.receiver, message.contentType); content = decryptedBody; if (message.contentType === 'application/sylk-contact-update') { this.handleReplicateContact(content); } else { this.saveOutgoingMessageSql(message, content, 1); let myContacts = this.state.myContacts; let uri = message.receiver; if (uri in myContacts) { // } else { myContacts[uri] = this.newContact(uri); } if (message.timestamp > myContacts[uri].timestamp) { myContacts[uri].timestamp = message.timestamp; } if (message.contentType === 'text/html') { content = utils.html2text(content); } else if (message.contentType.indexOf('image/') > -1) { content = 'Image'; } if (content && content.indexOf('-----BEGIN PGP MESSAGE-----') === -1) { myContacts[uri].lastMessage = content.substring(0, 100); myContacts[uri].lastMessageId = message.id; if (this.state.selectedContact) { let selectedContact = this.state.selectedContact; selectedContact.lastMessage = myContacts[uri].lastMessage; selectedContact.timestamp = message.timestamp; selectedContact.direction = 'outgoing'; selectedContact.lastCallDuration = null; this.setState({selectedContact: selectedContact}); } let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) > -1) { renderMessages[uri].push(utils.sylkToRenderMessage(message, content, 'outgoing')); this.setState({renderMessages: renderMessages}); } } this.setState({myContacts: myContacts}); this.saveSylkContact(uri, myContacts[uri], 'outgoingMessage'); } }).catch((error) => { console.log('Failed to decrypt my own message in outgoingMessage:', error); return; }); } else { if (message.contentType === 'application/sylk-contact-update') { this.handleReplicateContact(content); } else { this.saveOutgoingMessageSql(message); let myContacts = this.state.myContacts; let uri = message.receiver; if (uri in myContacts) { // } else { myContacts[uri] = this.newContact(uri); } if (message.timestamp > myContacts[uri].timestamp) { myContacts[uri].timestamp = message.timestamp; } if (message.contentType === 'text/html') { content = utils.html2text(content); } else if (message.contentType.indexOf('image/') > -1) { content = 'Image'; } if (content && content.indexOf('-----BEGIN PGP MESSAGE-----') === -1) { myContacts[uri].lastMessage = content.substring(0, 100); } let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) > -1) { renderMessages[uri].push(utils.sylkToRenderMessage(message, content, 'outgoing')); this.setState({renderMessages: renderMessages}); } this.saveSylkContact(uri, myContacts[uri], 'outgoingMessage'); } } } async outgoingMessageSync(message) { //console.log('Sync outgoing message', message.id, 'to', message.receiver); if (message.content.indexOf('?OTRv3') > -1) { this.remove_sync_pending_item(message.id); return; } if (message.contentType === 'text/pgp-public-key') { this.remove_sync_pending_item(message.id); return; } if (message.contentType === 'message/imdn') { this.remove_sync_pending_item(message.id); return; } if (message.contentType === 'text/pgp-private-key') { this.remove_sync_pending_item(message.id); return; } const is_encrypted = message.content.indexOf('-----BEGIN PGP MESSAGE-----') > -1 && message.content.indexOf('-----END PGP MESSAGE-----') > -1; let content = message.content; if (is_encrypted) { if (message.contentType === 'application/sylk-contact-update') { await OpenPGP.decrypt(message.content, this.state.keys.private).then((decryptedBody) => { //console.log('Sync outgoing message', message.id, message.contentType, 'decrypted to', message.receiver); this.handleReplicateContactSync(decryptedBody, message.id, message.timestamp); this.remove_sync_pending_item(message.id); }).catch((error) => { console.log('Failed to decrypt my own message in sync:', error); this.remove_sync_pending_item(message.id); return; }); } else { this.saveOutgoingMessageSqlBatch(message, null, true); this.remove_sync_pending_item(message.id); } } else { if (message.contentType === 'application/sylk-contact-update') { this.handleReplicateContactSync(content, message.id, message.timestamp); this.remove_sync_pending_item(message.id); } else { this.saveOutgoingMessageSqlBatch(message); } } } saveOutgoingMessageSql(message, decryptedBody=null, is_encrypted=false) { let pending = 0; let sent = 0; let received = null; let failed = 0; let encrypted = 0; let content = decryptedBody || message.content; if (decryptedBody !== null) { encrypted = 2; } else if (is_encrypted) { encrypted = 1; } if (message.state == 'pending') { pending = 1; } else if (message.state == 'delivered') { sent = 1; } else if (message.state == 'displayed') { received = 1; sent = 1; } else if (message.state == 'failed') { sent = 1; received = 0; failed = 1; } else if (message.state == 'error') { sent = 1; received = 0; failed = 1; } else if (message.state == 'forbidden') { sent = 1; received = 0; } - let unix_timestamp = Math.floor(message.timestamp / 1000); - let params = [this.state.accountId, encrypted, message.id, JSON.stringify(message.timestamp), unix_timestamp, content, message.contentType, message.sender.uri, message.receiver, "outgoing", pending, sent, received]; + let ts = message.timestamp; + ts.setMilliseconds(0); + + let unix_timestamp = Math.floor(ts / 1000); + let params = [this.state.accountId, encrypted, message.id, JSON.stringify(ts), unix_timestamp, content, message.contentType, message.sender.uri, message.receiver, "outgoing", pending, sent, received]; this.ExecuteQuery("INSERT INTO messages (account, encrypted, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, pending, sent, received) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { //console.log('SQL inserted outgoing', message.contentType, 'message to', message.receiver, 'encrypted =', encrypted); this.remove_sync_pending_item(message.id); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') === -1) { console.log('SQL error:', error); } this.remove_sync_pending_item(message.id); }); } async saveOutgoingMessageSqlBatch(message, decryptedBody=null, is_encrypted=false) { let pending = 0; let sent = 0; let received = null; let failed = 0; let encrypted = 0; let content = decryptedBody || message.content; if (decryptedBody !== null) { encrypted = 2; } else if (is_encrypted) { encrypted = 1; } if (message.state == 'pending') { pending = 1; } else if (message.state == 'delivered') { sent = 1; } else if (message.state == 'displayed') { received = 1; sent = 1; } else if (message.state == 'failed') { sent = 1; received = 0; failed = 1; } else if (message.state == 'error') { sent = 1; received = 0; failed = 1; } else if (message.state == 'forbidden') { sent = 1; received = 0; } let unix_timestamp = Math.floor(message.timestamp / 1000); let params = [this.state.accountId, encrypted, message.id, JSON.stringify(message.timestamp), unix_timestamp, content, message.contentType, message.sender.uri, message.receiver, "outgoing", pending, sent, received]; this.pendingNewSQLMessages.push(params); if (this.pendingNewSQLMessages.length > 34) { this.insertPendingMessages(); } this.remove_sync_pending_item(message.id); } async saveSystemMessage(uri, content, direction, missed=false) { let timestamp = new Date(); + timestamp.setMilliseconds(0); let unix_timestamp = Math.floor(timestamp / 1000); let id = uuid.v4(); let params = [this.state.accountId, id, JSON.stringify(timestamp), unix_timestamp, content, 'text/plain', direction === 'incoming' ? uri : this.state.account.id, direction === 'outgoing' ? uri : this.state.account.id, 0, 1, direction]; await this.ExecuteQuery("INSERT INTO messages (account, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, pending, system, direction) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { this.renderSystemMessage(uri, content, direction, timestamp); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') === -1) { console.log('SQL error:', error); } }); } async renderPurchasePSTNCredit(uri) { let url = 'https://mdns.sipthor.net/sip_settings.phtml?account='+ this.state.accountId + '&tab=credit'; let myContacts = this.state.myContacts; if (Object.keys(myContacts).indexOf(uri) === -1 && utils.isPhoneNumber(uri) && uri.indexOf('@') > -1) { uri = uri.split('@')[0]; } let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) > - 1) { let msg; msg = { _id: uuid.v4(), text: 'To call phone numbers, you must purchase credit at ' + url, createdAt: new Date(), direction: 'incoming', sent: true, pending: false, failed: false, user: {_id: uri, name: uri} } renderMessages[uri].push(msg); this.setState({renderMessages: renderMessages}); } } async renderSystemMessage(uri, content, direction, timestamp) { let myContacts = this.state.myContacts; if (Object.keys(myContacts).indexOf(uri) === -1 && utils.isPhoneNumber(uri) && uri.indexOf('@') > -1) { uri = uri.split('@')[0]; } let renderMessages = this.state.messages; if (Object.keys(renderMessages).indexOf(uri) > - 1) { let msg; msg = { _id: uuid.v4(), text: content, createdAt: timestamp, direction: direction, sent: true, pending: false, system: true, failed: false, user: direction == 'incoming' ? {_id: uri, name: uri} : {} } renderMessages[uri].push(msg); this.setState({renderMessages: renderMessages}); } } async saveIncomingMessage(message, decryptedBody=null) { let myContacts = this.state.myContacts; let uri = message.sender.uri; if (uri in myContacts) { // } else { myContacts[uri] = this.newContact(uri); } if (myContacts[uri].tags.indexOf('blocked') > -1) { return; } var content = decryptedBody || message.content; let received = 1; let unix_timestamp = Math.floor(message.timestamp / 1000); let params = [this.state.accountId, message.id, JSON.stringify(message.timestamp), unix_timestamp, content, message.contentType, message.sender.uri, this.state.account.id, "incoming", received]; await this.ExecuteQuery("INSERT INTO messages (account, msg_id, timestamp, unix_timestamp, content, content_type, from_uri, to_uri, direction, received) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", params).then((result) => { if (myContacts[uri].name === null || myContacts[uri].name === '' && message.sender.displayName) { myContacts[uri].name = message.sender.displayName; } if (message.timestamp > myContacts[uri].timestamp) { myContacts[uri].timestamp = message.timestamp; } myContacts[uri].unread.push(message.id); myContacts[uri].direction = 'incoming'; myContacts[uri].lastCallDuration = null; if (myContacts[uri].tags.indexOf('chat') === -1) { myContacts[uri].tags.push('chat'); } if (myContacts[uri].totalMessages) { myContacts[uri].totalMessages = myContacts[uri].totalMessages + 1; } if (message.contentType === 'text/html') { content = utils.html2text(content); } else if (message.contentType.indexOf('image/') > -1) { content = 'Image'; } if (content && content.indexOf('-----BEGIN PGP MESSAGE-----') === -1) { myContacts[uri].lastMessage = content.substring(0, 100); myContacts[uri].lastMessageId = message.id; this.setState({myContacts: myContacts}); } this.updateTotalUread(myContacts); this.saveSylkContact(uri, myContacts[uri], 'saveIncomingMessage'); }).catch((error) => { if (error.message.indexOf('UNIQUE constraint failed') === -1) { console.log('SQL error:', error); } }); } saveIncomingMessageSync(message, decryptedBody=null, is_encrypted=false) { var content = decryptedBody || message.content; let encrypted = 0; if (decryptedBody !== null) { encrypted = 2; } else if (is_encrypted) { encrypted = 1; } let received = 0; let imdn_msg; //console.log('saveIncomingMessageSync', message); if (message.dispositionNotification.indexOf('display') === -1) { //console.log('Incoming message', message.id, 'was already read'); received = 2; } else { if (message.dispositionNotification.indexOf('positive-delivery') > -1) { imdn_msg = {id: message.id, timestamp: message.timestamp, from_uri: message.sender.uri} if (this.sendDispositionNotification(imdn_msg, 'delivered')) { received = 1; } } else { received = 1; } } let pending let sent; let unix_timestamp = Math.floor(message.timestamp / 1000); let params = [this.state.accountId, encrypted, message.id, JSON.stringify(message.timestamp), unix_timestamp, content, message.contentType, message.sender.uri, this.state.account.id, "incoming", pending, sent, received]; this.pendingNewSQLMessages.push(params); this.remove_sync_pending_item(message.id); if (this.pendingNewSQLMessages.length > 34) { this.insertPendingMessages() } } saveParticipant(callUUID, room, uri) { if (this._historyConferenceParticipants.has(callUUID)) { let old_participants = this._historyConferenceParticipants.get(callUUID); if (old_participants.indexOf(uri) === -1) { old_participants.push(uri); } } else { let new_participants = [uri]; this._historyConferenceParticipants.set(callUUID, new_participants); } if (!this.myParticipants) { this.myParticipants = new Object(); } if (this.myParticipants.hasOwnProperty(room)) { let old_uris = this.myParticipants[room]; if (old_uris.indexOf(uri) === -1 && uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { this.myParticipants[room].push(uri); } } else { let new_uris = []; if (uri !== this.state.account.id && (uri + '@' + this.state.defaultDomain) !== this.state.account.id) { new_uris.push(uri); } if (new_uris) { this.myParticipants[room] = new_uris; } } storage.set('myParticipants', this.myParticipants); } deleteContact(uri) { uri = uri.trim().toLowerCase(); if (uri.indexOf('@') === -1) { uri = uri + '@' + this.state.defaultDomain; } let myContacts = this.state.myContacts; if (uri in myContacts) { this.deleteMessages(uri); } } deletePublicKey(uri) { uri = uri.trim().toLowerCase(); if (uri.indexOf('@') === -1) { uri = uri + '@' + this.state.defaultDomain; } let myContacts = this.state.myContacts; if (uri in myContacts) { myContacts[uri].publicKey = null; console.log('Public key of', uri, 'deleted'); this.saveSylkContact(uri, myContacts[uri], 'deletePublicKey'); } } newContact(uri, name=null, data={}) { //console.log('Create new contact', uri, data); let current_datetime = new Date(); uri = uri.trim().toLowerCase(); let contact = { id: uuid.v4(), uri: uri, name: name || data.name || '', organization: data.organization || '', unread: [], tags: [], lastCallMedia: [], participants: [], timestamp: current_datetime } contact = this.sanitizeContact(uri, contact, 'newContact'); return contact; } newSyntheticContact(uri, name=null, data={}) { //console.log('Create new contact', uri, data); let current_datetime = new Date(); uri = uri.trim().toLowerCase(); let contact = { id: uuid.v4(), uri: uri, name: name || data.name || '', organization: data.organization || '', unread: [], tags: ['synthetic'], lastCallMedia: [], participants: [], timestamp: current_datetime } return contact; } updateTotalUread(myContacts=null) { let total_unread = 0; myContacts = myContacts || this.state.myContacts; Object.keys(myContacts).forEach((uri) => { total_unread = total_unread + myContacts[uri].unread.length; }); //console.log('Total unread messages', total_unread) if (Platform.OS === 'ios') { PushNotification.setApplicationIconBadgeNumber(total_unread); } else { ShortcutBadge.setCount(total_unread); } } saveContact(uri, displayName='', organization='', email='') { displayName = displayName.trim(); uri = uri.trim().toLowerCase(); let contact; if (uri.indexOf('@') === -1 && !utils.isPhoneNumber(uri)) { uri = uri + '@' + this.state.defaultDomain; } let myContacts = this.state.myContacts; if (uri in myContacts) { contact = myContacts[uri]; } else { contact = this.newContact(uri); if (!contact) { return; } } contact.organization = organization; contact.name = displayName; contact.uri = uri; contact.email = email; contact.timestamp = new Date(); contact = this.sanitizeContact(uri, contact); if (!contact) { this._notificationCenter.postSystemNotification('Invalid contact ' + uri); return; } if (!contact.photo) { var name_idx = contact.name.trim().toLowerCase(); if (name_idx in this.state.avatarPhotos) { contact.photo = this.state.avatarPhotos[name_idx]; } } this.replicateContact(contact); this.saveSylkContact(uri, contact, 'saveContact'); let selectedContact = this.state.selectedContact; if (selectedContact && selectedContact.uri === uri) { selectedContact.displayName = displayName; selectedContact.organization = organization; this.setState({selectedContact: selectedContact}); } if (uri === this.state.accountId) { this.setState({displayName: displayName, email: email}); this.signup[this.state.accountId] = email; storage.set('signup', this.signup); if (this.state.account && displayName !== this.state.account.displayName) { this.processRegistration(this.state.accountId, this.state.password, displayName); } } } async replicateContact(contact) { //console.log('Replicate contact', contact); if (!this.state.keys) { console.log('Cannot replicate contact without aprivate key'); return; } let id = uuid.v4(); let content; let contentType = 'application/sylk-contact-update'; let new_contact = {} new_contact.uri = contact.uri; new_contact.name = contact.name; new_contact.email = contact.email; new_contact.organization = contact.organization; new_contact.timestamp = Math.floor(contact.timestamp / 1000); new_contact.tags = contact.tags; new_contact.participants = contact.participants; content = JSON.stringify(new_contact); //this.saveOutgoingRawMessage(id, this.state.accountId, this.state.accountId, content, contentType); await OpenPGP.encrypt(content, this.state.keys.public).then((encryptedMessage) => { this._sendMessage(this.state.accountId, encryptedMessage, id, contentType, contact.timestamp); }).catch((error) => { console.log('Failed to encrypt contact:', error); }); } handleReplicateContact(json_contact) { let contact; contact = JSON.parse(json_contact); if (contact.uri === null) { return; } if (contact.uri === this.state.accountId) { this.setState({displayName: contact.name, organization: contact.organization, email: contact.email}); this.signup[this.state.accountId] = contact.email; storage.set('signup', this.signup); } let uri = contact.uri; let myContacts = this.state.myContacts; if (uri in myContacts) { contact = myContacts[uri]; // } else { contact = this.newContact(uri, contact.name); if (!contact) { return; } } contact.uri = uri; contact.name = contact.name; contact.email = contact.email; contact.organization = contact.organization; contact.timestamp = new Date(contact.timestamp * 1000); contact.tags = contact.tags; contact.participants = contact.participants; this.saveSylkContact(uri, contact, 'handleReplicateContact'); } async handleReplicateContactSync(json_contact, id, msg_timestamp) { let purgeMessages = this.state.purgeMessages; let contact; contact = JSON.parse(json_contact); let timestamp = msg_timestamp; let uri = contact.uri; if (contact.uri === this.state.accountId) { this.setState({displayName: contact.name, organization: contact.organization, email: contact.email}); this.signup[this.state.accountId] = contact.email; storage.set('signup', this.signup); } if (contact.timestamp) { timestamp = new Date(contact.timestamp * 1000); } let replicateContacts = this.state.replicateContacts; if (uri in replicateContacts) { if (timestamp < replicateContacts[uri].timestamp) { //purgeMessages.push(id); //this.setState({purgeMessages: purgeMessages}); console.log('Sync replicate contact skipped because is too old', timestamp, uri, 'with name', contact.name); return; } // } else { let new_contact = this.newContact(uri, contact.name); if (!new_contact) { this.remove_sync_pending_item(id); purgeMessages.push(id); this.setState({purgeMessages: purgeMessages}); return; } replicateContacts[uri] = new_contact; } console.log('Sync replicate contact', uri, 'with name', contact.name); replicateContacts[uri].uri = uri; replicateContacts[uri].name = contact.name; replicateContacts[uri].email = contact.email; replicateContacts[uri].timestamp = timestamp; replicateContacts[uri].organization = contact.organization; replicateContacts[uri].tags = contact.tags; replicateContacts[uri].participants = contact.participants; //console.log('Adding replicated contact', replicateContacts[uri]); this.setState({replicateContacts: replicateContacts}); this.remove_sync_pending_item(id); } sanitizeContact(uri, contact) { //console.log('sanitizeContact', uri, contact); let idx; if (!uri || uri === '') { return null; } uri = uri.trim().toLowerCase(); if (!utils.isPhoneNumber(uri) && !utils.isEmailAddress(uri)) { console.log('sanitizeContact failed for uri:', uri); return null; } contact.uri = uri; if (!contact.conference) { contact.conference = false; } if (!contact.tags) { contact.tags = []; } contact.tags = [... new Set(contact.tags)]; if (contact.direction === 'received'){ contact.direction = 'incoming'; } else if (contact.direction === 'placed') { contact.direction = 'outgoing'; } if (xtype(contact.timestamp) !== 'date') { contact.timestamp = new Date(); } if (!contact.participants) { contact.participants = []; } contact.participants = [... new Set(contact.participants)]; if (!contact.unread) { contact.unread = []; } contact.unread = [... new Set(contact.unread)]; if (!contact.lastCallMedia) { contact.lastCallMedia = []; } contact.lastCallMedia = [... new Set(contact.lastCallMedia)]; return contact; } updateFavorite(uri, favorite) { if (favorite === null) { return; } let favoriteUris = this.state.favoriteUris; let idx; idx = favoriteUris.indexOf(uri); if (favorite && idx === -1) { favoriteUris.push(uri); this.setState({favoriteUris: favoriteUris, refreshFavorites: !this.state.refreshFavorites}); } else if (!favorite && idx > -1) { favoriteUris.splice(idx, 1); this.setState({favoriteUris: favoriteUris, refreshFavorites: !this.state.refreshFavorites}); } else { return; } } toggleFavorite(uri) { //console.log('toggleFavorite', uri); let favoriteUris = this.state.favoriteUris; let myContacts = this.state.myContacts; let selectedContact; let favorite; if (uri in myContacts) { } else { myContacts[uri] = this.newContact(uri); } idx = myContacts[uri].tags.indexOf('favorite'); if (idx > -1) { myContacts[uri].tags.splice(idx, 1); favorite = false; } else { myContacts[uri].tags.push('favorite'); favorite = true; } myContacts[uri].timestamp = new Date(); this.saveSylkContact(uri, myContacts[uri], 'toggleFavorite'); let idx = favoriteUris.indexOf(uri); if (idx === -1 && favorite) { favoriteUris.push(uri); console.log(uri, 'is favorite'); } else if (idx > -1 && !favorite) { favoriteUris.splice(idx, 1); console.log(uri, 'is not favorite'); } this.replicateContact(myContacts[uri]); this.setState({favoriteUris: favoriteUris}); } toggleBlocked(uri) { let blockedUris = this.state.blockedUris; let myContacts = this.state.myContacts; if (uri in myContacts) { } else { myContacts[uri] = this.newContact(uri); } let blocked; idx = myContacts[uri].tags.indexOf('blocked'); if (idx > -1) { myContacts[uri].tags.splice(idx, 1); blocked = false; } else { myContacts[uri].tags.push('blocked'); blocked = true; } myContacts[uri].timestamp = new Date(); this.saveSylkContact(uri, myContacts[uri], 'toggleBlocked'); let idx = blockedUris.indexOf(uri); if (idx === -1 && blocked) { blockedUris.push(uri); } else if (idx > -1 && !blocked) { blockedUris.splice(idx, 1); } this.replicateContact(myContacts[uri]); this.setState({blockedUris: blockedUris, selectedContact: null}); } updateBlocked(uri, blocked) { if (blocked === null) { return; } let blockedUris = this.state.blockedUris; let idx; idx = blockedUris.indexOf(uri); if (blocked && idx === -1) { blockedUris.push(uri); this.setState({blockedUris: blockedUris}); } else if (!blocked && idx > -1) { blockedUris.splice(idx, 1); this.setState({blockedUris: blockedUris}); } else { return; } } appendInvitedParties(room, uris) { //console.log('Save invited parties', uris, 'for room', room); let myInvitedParties = this.state.myInvitedParties; let current_uris = myInvitedParties.hasOwnProperty(room) ? myInvitedParties[room] : []; uris.forEach((uri) => { let idx = current_uris.indexOf(uri); if (idx === -1) { if (uri.indexOf('@') === -1) { uri = uri + '@' + this.state.defaultDomain; } if (uri !== this.state.account.id) { current_uris.push(uri); //console.log('Added', uri, 'to room', room); } } }); this.saveConference(room, uris); } shareContent() { if (this.state.shareContent.length === 0) { return; } if (this.state.selectedContacts.length === 0) { this._notificationCenter.postSystemNotification('Sharing canceled'); } let item = this.state.shareContent[0]; let content = ''; if (item.subject) { content = content + '\n\n' + item.subject; } if (item.text) { content = content + '\n\n' + item.text; } if (item.weblink) { content = content + '\n\n' + item.weblink; } content = content.trim(); this.state.selectedContacts.forEach((uri) => { let msg = this.textToGiftedMessage(content); console.log('Share external item with', uri); this.sendMessage(uri, msg); }); ReceiveSharingIntent.clearReceivedFiles(); this.setState({shareContent: [], selectedContacts: [], shareToContacts: false}); } saveConference(room, participants, displayName=null) { let uri = room; console.log('Save conference', room, 'with display name', displayName, 'and participants', participants); - if (room.indexOf('@') === -1) { - room = room + '@videoconference.' + this.state.defaultDomain; - } - let myContacts = this.state.myContacts; if (uri in myContacts) { } else { myContacts[uri] = this.newContact(uri); } myContacts[uri].timestamp = new Date(); - if (displayName) { - myContacts[uri].name = displayName; - let new_participants = []; - participants.forEach((uri) => { - if (uri.indexOf('@') === -1) { - uri = uri + '@' + this.state.defaultDomain; - } - if (uri !== this.state.account.id) { - new_participants.push(uri); - //console.log('Added', uri, 'to room', room); - } - }); - myContacts[uri].participants = new_participants; - } + myContacts[uri].name = displayName; + + let new_participants = []; + participants.forEach((uri) => { + if (uri.indexOf('@') === -1) { + uri = uri + '@' + this.state.defaultDomain; + } + if (uri !== this.state.account.id) { + new_participants.push(uri); + console.log('Added', uri, 'to room', room); + } + }); + myContacts[uri].participants = new_participants; this.replicateContact(myContacts[uri]); this.saveSylkContact(uri, myContacts[uri], 'saveConference'); } addHistoryEntry(uri, callUUID, direction='outgoing', participants=[]) { let myContacts = this.state.myContacts; console.log('addHistoryEntry', uri); if (uri.indexOf('@') === -1) { uri = uri + '@videoconference.' + this.state.defaultDomain; } if (uri in myContacts) { } else { myContacts[uri] = this.newContact(uri); } myContacts[uri].conference = true; myContacts[uri].timestamp = new Date(); myContacts[uri].lastCallId = callUUID; myContacts[uri].direction = direction; this.saveSylkContact(uri, myContacts[uri], 'addHistoryEntry'); } updateHistoryEntry(uri, callUUID, duration) { if (uri.indexOf('@') === -1) { uri = uri + '@videoconference.' + this.state.defaultDomain; } //console.log('updateHistoryEntry', uri, callUUID, duration); let myContacts = this.state.myContacts; if (uri in myContacts && myContacts[uri].lastCallId === callUUID) { myContacts[uri].timestamp = new Date(); myContacts[uri].lastCallDuration = duration; myContacts[uri].lastCallId = callUUID; this.replicateContact(myContacts[uri]) this.saveSylkContact(uri, myContacts[uri], 'updateHistoryEntry'); } } render() { let footerBox = ; let extraStyles = {}; if (this.state.localMedia || this.state.registrationState === 'registered') { footerBox = null; } let loadingLabel = this.state.loading; if (this.state.syncConversations) { loadingLabel = 'Sync conversations'; } else if (this.state.reconnectingCall) { loadingLabel = 'Reconnecting call...'; } else if (this.mustLogout) { loadingLabel = 'Logging out...'; } 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 ( ); } saveHistory(history) { let myContacts = this.state.myContacts; let missedCalls = this.state.missedCalls; let localTime; let tags = []; let uri; let i = 0; let idx; let contact; history.forEach((item) => { uri = item.uri; if (this.state.blockedUris.indexOf(uri) > -1) { return; } if (uri in myContacts) { } else { contact = this.newContact(uri); if (!contact) { return; } myContacts[uri] = contact; myContacts[uri].timestamp = item.timestamp; myContacts[uri].name = item.name; } if (item.timestamp > myContacts[uri].timestamp) { } else { if (myContacts[uri].lastCallId === item.sessionId) { return; } } if (item.timestamp && item.timestamp > myContacts[uri].timestamp) { myContacts[uri].timestamp = item.timestamp; } tags = myContacts[uri].tags; if (item.tags.indexOf('missed') > - 1) { tags.push('missed'); myContacts[uri].unread.push(item.sessionId); if (missedCalls.indexOf(item.sessionId) === -1) { missedCalls.push(item.sessionId); } } else { idx = tags.indexOf('missed'); if (idx > -1) { tags.splice(idx, 1); } } tags.push('history'); if (item.displayName && !myContacts[uri].name) { myContacts[uri].name = item.displayName; } myContacts[uri].direction = item.direction; myContacts[uri].lastCallId = item.sessionId; myContacts[uri].lastCallDuration = item.duration; myContacts[uri].lastCallMedia = item.media; myContacts[uri].conference = item.conference; myContacts[uri].tags = tags; i = i + 1; this.updateTotalUread(myContacts); this.saveSylkContact(uri, this.state.myContacts[uri], 'saveHistory'); }); if (i > 0) { console.log('Saved new', i, 'history items'); } else { //console.log('Server history is already in sync'); } this.setState({missedCalls: missedCalls}); } hideLogsModal() { this.setState({showLogsModal: false}); } purgeLogs() { RNFS.unlink(logfile) .then(() => { utils.timestampedLog('Log file initialized'); this.showLogs(); }) // `unlink` will throw an error, if the item to unlink does not exist .catch((err) => { console.log(err.message); }); } showLogs() { this.setState({showLogsModal: true}); RNFS.readFile(logfile, 'utf8').then((content) => { console.log('Read', content.length, 'bytes from', logfile); const lastlines = content.split('\n').slice(-MAX_LOG_LINES).join('\n'); this.setState({logs: lastlines}); }); } trimLogs() { RNFS.readFile(logfile, 'utf8').then((content) => { const lines = content.split('\n'); //console.log('Read', lines.length, 'lines and', content.length, 'bytes from', logfile); if (lines.length > (MAX_LOG_LINES + 50) || content.length > 100000) { const text = lines.slice(-MAX_LOG_LINES).join('\n'); RNFS.writeFile(logfile, text + '\r\n', 'utf8') .then((success) => { //console.log('Trimmed logs to', MAX_LOG_LINES, 'lines and', text.length, 'bytes'); }) .catch((err) => { console.log(err.message); }); } }); } ready() { let publicKey; let call = this.state.currentCall || this.state.incomingCall; if (this.state.selectedContact) { const uri = this.state.selectedContact.uri; if (uri in this.state.myContacts && this.state.myContacts[uri].publicKey) { publicKey = this.state.myContacts[uri].publicKey; } } else { publicKey = this.state.keys ? this.state.keys.public: null; } return ( ); } preview() { return ( ); } call() { let call = this.state.currentCall || this.state.incomingCall; let callState; if (call && call.id in this.state.callsState) { callState = this.state.callsState[call.id]; } if (this.state.targetUri in this.state.myContacts && !this.state.callContact) { let callContact = this.state.myContacts[this.state.targetUri]; this.setState({callContact: callContact}); } return ( ) } conference() { let _previousParticipants = new Set(); let call = this.state.currentCall || this.state.incomingCall; let callState; if (call && call.id in this.state.callsState) { callState = this.state.callsState[call.id]; } /* 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.state.myInvitedParties) { if (this.state.myInvitedParties.hasOwnProperty(this.state.targetUri)) { let uris = this.state.myInvitedParties[this.state.targetUri]; if (uris) { uris.forEach((uri) => { _previousParticipants.add(uri); }); } } } let previousParticipants = Array.from(_previousParticipants); return ( ) } matchContact(contact, filter='', matchDisplayName=true) { if (contact.uri.toLowerCase().startsWith(filter.toLowerCase())) { return true; } if (matchDisplayName && contact.name && contact.name.toLowerCase().indexOf(filter.toLowerCase()) > -1) { return true; } return false; } lookupContacts(text) { let contacts = []; const addressbook_contacts = this.state.contacts.filter(contact => this.matchContact(contact, text)); addressbook_contacts.forEach((c) => { const existing_contacts = contacts.filter(contact => this.matchContact(contact, c.uri.toLowerCase(), false)); if (existing_contacts.length === 0) { contacts.push(c); } }); return contacts; } conferenceByUri(urlParameters) { const targetUri = utils.normalizeUri(urlParameters.targetUri, config.defaultConferenceDomain); const idx = targetUri.indexOf('@'); const uri = {}; const pattern = /^[A-Za-z0-9\-\_]+$/g; uri.user = targetUri.substring(0, idx); // check if the uri.user is valid if (!pattern.test(uri.user)) { const status = { title : 'Invalid conference', message : `Oops, the conference ID is invalid: ${targetUri}`, level : 'danger', width : 'large' } return ( ); } return ( ); } login() { let registerBox; let statusBox; this.mustLogout = false; if (this.state.status !== null) { statusBox = ( ); } if (this.state.registrationState !== 'registered') { registerBox = ( ); } return ( {registerBox} {statusBox} ); } logout() { this.syncRequested = false; this.serverPublicKey = null; this.serverQueriedForPublicKey = false; this.callKeeper.setAvailable(false); this.sql_contacts_keys = []; if (!this.mustLogout && this.state.registrationState !== null && this.state.connection && this.state.connection.state === 'ready') { // remove token from server this.mustLogout = true; //console.log('Remove push token'); this.state.account.setDeviceToken('None', Platform.OS, deviceId, true, bundleId); //console.log('Unregister'); this.state.account.register(); return; } else if (this.mustLogout && this.state.connection && this.state.account) { //console.log('Unregister'); this.state.account.unregister(); } this.tokenSent = false; if (this.state.connection && this.state.account) { //console.log('Remove account'); this.state.connection.removeAccount(this.state.account, (error) => { if (error) { logger.debug(error); } }); } storage.set('account', {accountId: this.state.accountId, password: this.state.password, verified: false }); this.setState({account: null, displayName: '', email: '', contactsLoaded: false, registrationState: null, registrationKeepalive: false, status: null, keys: null, lastSyncId: null, accountVerified: false, autoLogin: false, myContacts: {}, defaultDomain: config.defaultDomain, purgeMessages: [], updateContactUris: {}, replicateContacts: {}, deletedContacts: {} }); this.mustLogout = false; this.changeRoute('/login', 'user logout'); return null; } main() { return null; } } export default Sylk; diff --git a/app/assets/styles/blink/_AboutModal.scss b/app/assets/styles/blink/_AboutModal.scss index 6a2b54d..2f95fc0 100644 --- a/app/assets/styles/blink/_AboutModal.scss +++ b/app/assets/styles/blink/_AboutModal.scss @@ -1,30 +1,36 @@ .title { padding: 5px; - font-size: 36px; + font-size: 24px; text-align: center; } .body { padding: 10px; - font-size: 16px; + font-size: 14px; text-align: center; } .link { padding: 10px; - font-size: 16px; + font-size: 12px; text-align: center; color: blue; } +.love { + padding: 8px; + font-size: 12px; + text-align: center; +} + .version { padding: 10px; - font-size: 16px; + font-size: 14px; text-align: center; } .container { padding: 20px; margin: 0px; padding-bottom: 40px; } diff --git a/app/assets/styles/blink/_AudioCallBox.scss b/app/assets/styles/blink/_AudioCallBox.scss index 84ea60b..a6a3508 100644 --- a/app/assets/styles/blink/_AudioCallBox.scss +++ b/app/assets/styles/blink/_AudioCallBox.scss @@ -1,113 +1,125 @@ .container { flex: 1; } .userIconContainer { padding-top: 20px; margin: 0 auto; } .statsContainer { padding-top: 0px; margin: 0 auto; width: 50%; } .tabletUserIconContainer { padding-top: 60px; margin: 0 auto; } .appbarContainer { background-color: rgba(34,34,34,.7); z-index: 1; } .portraitButtonContainer { justify-self: flex-end; flex-direction: row; margin: 0 auto; margin-top:auto; - bottom: 20; margin-bottom: 50px; + padding-left: 20px; + padding-right: 20px; } .tabletPortraitButtonContainer { justify-self: flex-end; flex-direction: row; margin: 0 auto; margin-top:auto; bottom: 60; margin-bottom: 40px; } .landscapeButtonContainer { justify-self: flex-end; flex-direction: row; margin: 0 auto; margin-top:auto; bottom: 10; margin-bottom: 0px; } .tabletLandscapeButtonContainer { justify-self: flex-end; flex-direction: row; margin: 0 auto; margin-top:auto; bottom: 60; margin-bottom: 0px; } .activity { margin-top: 30px; } -.button { - background-color: white; - margin: 10px; - padding-top: 5px; - padding-left: 0px; +.buttonContainer { + justifyContent: center; + alignItems: center; + flex: 1; + border: 0px; } -.iosButton { - background-color: rgba(#F9F9F9, .7); - margin: 10px; - padding-top: 5px; +.roundshape { + height: 48; //any of height + width: 48; //any of width + justifyContent: center; + borderRadius: 24px; } -.androidButton { - background-color: rgba(#F9F9F9, .7); - margin: 10px; - padding-top: 1px; +.whiteButton { + background-color: white; } -.iosChatButton { - background-color: rgba(#6DAA63, .9); - margin: 10px; - padding-top: 5px; +.disabledWhiteButton { + background-color: rgba(#395936, .9); } -.androidChatButton { +.greenButton { background-color: rgba(#6DAA63, .9); +} + +.disabledGreenButton { + background-color: rgba(#395936, .9); +} + +.hangupButton { + background-color: rgba(#a94442, .8); +} + + +.button { + background-color: white; margin: 10px; - padding-top: 1px; + padding-top: 5px; + padding-left: 0px; } .hangupButton { background-color: rgba(#a94442, .8); } .displayName { padding-top: 10px; font-size: 30px; text-align: center; color: white; } .uri { padding: 0px; font-size: 18px; text-align: center; color: white; } diff --git a/app/assets/styles/blink/_CallMeMaybeModal.scss b/app/assets/styles/blink/_CallMeMaybeModal.scss index 1df5f06..8f20629 100644 --- a/app/assets/styles/blink/_CallMeMaybeModal.scss +++ b/app/assets/styles/blink/_CallMeMaybeModal.scss @@ -1,28 +1,28 @@ .title { padding: 0px; - font-size: 30px; + font-size: 24px; text-align: center; } .body { padding: 5px; - font-size: 16px; + font-size: 14px; text-align: center; } .address { padding: 5px; - font-size: 16px; + font-size: 14px; text-align: center; color: blue; } .container { padding: 10px; margin: 00px; } .iconContainer { flex-direction: row; justify-content: center; } diff --git a/app/assets/styles/blink/_ConferenceAudioParticipant.scss b/app/assets/styles/blink/_ConferenceAudioParticipant.scss index 0921a32..6a9c175 100644 --- a/app/assets/styles/blink/_ConferenceAudioParticipant.scss +++ b/app/assets/styles/blink/_ConferenceAudioParticipant.scss @@ -1,48 +1,40 @@ -.title { - font-size: 22px; - padding-left: 10px; - padding-bottom: 10px; - color: white; -} - .displayName { - padding-top: 5px; - font-size: 22px; + font-size: 18px; color: white; } .uri { font-size: 14px; color: white; } .right { - padding-top: 38px; + padding-top: 32px; font-size: 12px; color: white; } .rightOrange { - padding-top: 38px; + padding-top: 32px; font-size: 12px; color: orange; } .rightGreen { - padding-top: 38px; + padding-top: 32px; font-size: 12px; color: yellow; } .card { - height: 80px; + height: 60px; } .userIconContainer { padding-top: 8px; padding-right: 5px; margin: 0 auto; } diff --git a/app/assets/styles/blink/_ConferenceBox.scss b/app/assets/styles/blink/_ConferenceBox.scss index 18434ba..2b52665 100644 --- a/app/assets/styles/blink/_ConferenceBox.scss +++ b/app/assets/styles/blink/_ConferenceBox.scss @@ -1,127 +1,153 @@ .container { flex: 1; } +.roundshape { + height: 48; //any of height + width: 48; //any of width + justifyContent: center; + borderRadius: 24px; +} + +.whiteButton { + background-color: white; +} + +.disabledWhiteButton { + background-color: rgba(#395936, .9); +} + +.greenButton { + background-color: rgba(#6DAA63, .9); +} + +.disabledGreenButton { + background-color: rgba(#395936, .9); +} + +.hangupButton { + background-color: rgba(#a94442, .8); +} + +.buttonsContainer { + flex-direction: row; + justify-content: center; + margin-top: 60px; + height: 55; + border: 0px; +} + .conferenceContainerLandscape { flex-direction: row; align-content: flex-end; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .chatContainerLandscape { margin-top: 100px; margin-right: 10px; margin-left: 5px; width: 300px; border-color: grey; border-radius: 5px; } .audioContainerLandscape { align-content: flex-start; - margin-top: 110px; - margin-left: 10px; - margin-right: 10px; + margin-top: 55px; + margin-left: 0px; + margin-right: 5px; width: 40%; + border: 0px; } .chatContainerLandscapeAudio { - margin-top: 110px; - margin-right: 10px; + margin-top: 60px; + margin-right: 0px; margin-left: 5px; border-color: grey; border-radius: 5px; - width: 57%; + width: 59%; + border: 0px; +} + +.audioContainerPortrait { + flex: 3; + border: 0.5px; +} + +.chatContainerPortraitAudio { + flex: 6; + border: 0px; + border-radius: 5px; } .conferenceContainer { flex-direction: column; - align-content: flex-end; + align-content: flex-start; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } -.audioContainer { - flex: 1; - margin-top: 120px; - margin-left: 10px; -} - -.chatContainerPortraitAudio { - margin-top: 10px; - margin-left: 10px; - border: 0px; - height: 30%; - border-color: grey; - border-radius: 5px; -} - .chatContainer { - margin-top: 10px; - border: 0px; - border-color: grey; + margin-top: 110px; } .videosContainer { flex: 1; flex-wrap: wrap; border-radius: 5px; } .carouselContainer { position: absolute; bottom: 10; left: 10; right: 10; } .landscapeVideosContainer { flex-direction: row; } .button { background-color: white; margin: 8px; } .iosButton { background-color: white; margin: 8px; padding-top: 4px; } .androidButton { background-color: white; margin: 8px; } .hangupButton { background-color: rgba(#a94442, .8); } .wholePageVideo { width: 100%; height: 100%; } -.buttonContainer { - flex-direction: row; - margin: 0 auto; -} - .landscapeDrawer { align-items: flex-end; justify-content: space-between; flex-direction: row; } .portraitDrawer { width: 300px; } diff --git a/app/assets/styles/blink/_ConferenceHeader.scss b/app/assets/styles/blink/_ConferenceHeader.scss index 6a11032..8bea2f0 100644 --- a/app/assets/styles/blink/_ConferenceHeader.scss +++ b/app/assets/styles/blink/_ConferenceHeader.scss @@ -1,13 +1,14 @@ .container { position: absolute; top : 0; left: 0; right: 0; z-index: 1; } -.buttonContainer { +.buttonsContainer { flex: 1; flex-direction: row; + padding-top: 5px; margin: 0 auto; } diff --git a/app/assets/styles/blink/_ConferenceModal.scss b/app/assets/styles/blink/_ConferenceModal.scss index 1ef6c55..e9cb07c 100644 --- a/app/assets/styles/blink/_ConferenceModal.scss +++ b/app/assets/styles/blink/_ConferenceModal.scss @@ -1,95 +1,92 @@ .container { flex: 1; flex-direction: column; justify-content: center; align-items: center; } .inviteTitle { - padding: 3px; font-size: 24px; text-align: left; } .title { - padding: 3px; font-size: 24px; text-align: center; } .roomContainer { margin-top: 20px; margin-bottom: 10px; zIndex: -1; } .room { - font-size: 20px; + font-size: 16px; } .roomUrl { font-size: 14px; text-align: center; } .roomUrlContainer { } .roomDescription { font-size: 14px; text-align: center; } .chipsContainer { margin-top: 20px; margin-bottom: 20px; } .chipTextStyle { color: black; } .chips { } .chip { border: 0.25px; background-color: white; } .roomDescriptionContainer { margin: 10px; } .buttonRow { flex-direction: row; justify-content: center; margin-bottom: 20px; zIndex: -1; } .buttonRowInvite { flex-direction: row; justify-content: center; padding-bottom: 10px; } .shareText { margin-top: 10px; padding: 3px; font-size: 16px; text-align: center; } .iconContainer { margin-top: 10px; margin-bottom: 30px; flex-direction: row; justify-content: center; } .button { margin: 10px; - border: 0.4px; } diff --git a/app/assets/styles/blink/_ContactCard.scss b/app/assets/styles/blink/_ContactCard.scss index 65d67c4..9bbe2c5 100644 --- a/app/assets/styles/blink/_ContactCard.scss +++ b/app/assets/styles/blink/_ContactCard.scss @@ -1,110 +1,116 @@ .containerPortrait { } .containerLandscape { } .cardPortraitContainer { margin-top: 1px; } .cardLandscapeContainer { flex: 1; margin-left: 1px; margin-top: 1px; border-radius: 2px; } .cardLandscapeTabletContainer { flex: 1; border: 1px; border-radius: 2px; } .cardPortraitTabletContainer { flex: 1; border: 1px; border-radius: 2px; } .rowContent { - margin-top: 5px; flex: 1; flex-direction: row; justify-content: space-between; } .cardContent { flex: 1; flex-direction: row; } .title { font-size: 18px; - margin: 0px; + margin-bottom: 0px; + flex: 1; } .subtitle { - font-size:16px; - margin-top: -2px; + font-size:14px; + margin-top: 0px; + margin-bottom: -6px; flex: 1; - margin-right: 40px; } .description { font-size:12px; - margin-bottom: 5px; + margin-bottom: 0px; + flex: 1; } .avatarContent { - margin-top: 7px; + margin-top: 5px; } .gravatar { width: 60px; height: 60px; border-width: 2px; border-color: white; border-radius: 50px; } .mainContent { margin-left: 10px; } .rightContent { - margin-top: 15px; - margin-right: 20px; + margin-top: 10px; + margin-left: 60px; + margin-right: 10px; align-items: flex-end; border: 0px; } .badgeTextStyle { font-size: 12px; } .badgeContainer { position: absolute; bottom: 10; right: 0; size: 30; } +.selectedContact { + margin-top: 5px; +} + .participants { margin-top: 10px; } .participant { font-size: 14px; } .buttonContainer { margin: 0 auto; margin-top:auto; } .button { border-radius: 2px; padding-left: 30px; padding-right: 30px; } diff --git a/app/assets/styles/blink/_DeleteHistoryModal.scss b/app/assets/styles/blink/_DeleteHistoryModal.scss index 2c32e9f..35d1220 100644 --- a/app/assets/styles/blink/_DeleteHistoryModal.scss +++ b/app/assets/styles/blink/_DeleteHistoryModal.scss @@ -1,53 +1,53 @@ .container { padding: 10px; margin: 00px; } .title { - padding: 5px; + padding: 0px; font-size: 24px; text-align: center; } .body { padding: 10px; font-size: 16px; text-align: center; } .avatar { } .button { margin: 10px; } .buttonRow { flex-direction: row; justify-content: center; } .checkBoxGroupRow { flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px; } .checkBoxRow { border: 0.5px; flex-direction: row; justify-content: center; align-items: center; margin-bottom: 10px; } .checkButton { margin: 10px; width: 70px; } .titleContainer { flex-direction: row; } diff --git a/app/assets/styles/blink/_EnrollmentModal.scss b/app/assets/styles/blink/_EnrollmentModal.scss index 441520e..9a1c5d0 100644 --- a/app/assets/styles/blink/_EnrollmentModal.scss +++ b/app/assets/styles/blink/_EnrollmentModal.scss @@ -1,49 +1,57 @@ .container { } .landscape { height: 200px; margin-top: 10px; margin-bottom: 10px; } .landscapeTablet { height: 200px; margin-bottom: 10px; margin-top: 10px; } .portrait { height: 300px; margin-bottom: 10px; margin-top: 10px; } .portraitTablet { height: 400px; margin-bottom: 10px; margin-top: 10px; } .title { margin-top: 0px; color: black; margin: 0 auto; font-size: 16; } .row { font-size: 14; } .snackbar { } +.status { + margin-top: 10px; + margin-bottom: 10px; + text-align: center; + font-size: 14px; + color: orange; +} + .button { margin-top: 0px; border-radius: 1px; border: 0px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } diff --git a/app/assets/styles/blink/_MessageInfoModal.scss b/app/assets/styles/blink/_MessageInfoModal.scss index 45d1caf..0bdb264 100644 --- a/app/assets/styles/blink/_MessageInfoModal.scss +++ b/app/assets/styles/blink/_MessageInfoModal.scss @@ -1,17 +1,17 @@ .container { - padding: 10px; + padding: 00px; margin: 00px; } .title { padding: 5px; font-size: 24px; text-align: center; } .body { padding: 10px; font-size: 18px; text-align: center; } diff --git a/app/assets/styles/blink/_NavigationBar.scss b/app/assets/styles/blink/_NavigationBar.scss index e567b72..b9c98a6 100644 --- a/app/assets/styles/blink/_NavigationBar.scss +++ b/app/assets/styles/blink/_NavigationBar.scss @@ -1,36 +1,36 @@ .titleContainer { } .subtitle { color: white; font-size: 12; margin-right: 10px; } .tabletSubtitle { color: white; font-size: 16; margin-right: 10px; } .title { - font-size: 20; + font-size: 18; } .menuItem { font-size: 12; } .tabletTitle { font-size: 24; } .logo { margin-left: 10px; height: 35px; width: 35px; } .menuContentStyle { font-size: 10; } diff --git a/app/assets/styles/blink/_ReadyBox.scss b/app/assets/styles/blink/_ReadyBox.scss index 44b7ff9..e0eef70 100644 --- a/app/assets/styles/blink/_ReadyBox.scss +++ b/app/assets/styles/blink/_ReadyBox.scss @@ -1,179 +1,191 @@ @import './variables'; .container { flex: 1; flex-direction: column; justify-content: center; } .historyLandscapeContainer { margin-top: 0px; width: 100%; flex: 9; } .historyPortraitContainer { width: 100%; flex: 9; } .landscapeTitle { color: white; font-size: 20px; width: 90%; margin-left: 5%; } .portraitTitle { color: white; font-size: 20px; width: 90%; margin-top: 10px; margin-left: 5%; } .landscapeTabletTitle { margin-top: 20px; color: white; font-size: 24px; width: 100%; margin-left: 3px; } .portraitTabletTitle { margin-top: 20px; color: white; font-size: 20px; width: 100%; margin-left: 10px; } .portraitUriButtonGroup { flex-direction: column; width: 100%; margin-left: 0%; } .landscapeUriButtonGroup { flex-direction: row; width: 100%; margin-left: 2px; justify-content: space-between; } .portraitTabletUriButtonGroup { flex-direction: column; - width: 100%; - margin-left: 0%; + margin-left: 20%; + margin-right: 20%; + margin-top: 10px; + margin-bottom: 10px; justify-content: space-between; } .landscapeTabletUriButtonGroup { flex-direction: row; width: 100%; margin-left: 0%; justify-content: space-between; } .portraitUriInputBox { align: left; width: 100%; } .landscapeUriInputBox { align: left; flex: 1; + padding: 0px; + margin-top: 3px; + margin-right: 5px; +} + +.landscapeTabletUriInputBox { + align: left; padding-top: 10px; - margin-left: 2px; - margin-right: 8px; + padding-bottom: 10px; + width: 66%; + margin-left: 1px; +} + +.landscapeButtonGroup { + flex: 1; + flex-direction: row; + justify-content: center; + padding-top: 3px; + padding-bottom: 5px; } .portraitTabletUriInputBox { align: left; padding-top: 10px; width: 100%; } -.landscapeTabletUriInputBox { +.uriInputBox { align: left; padding-top: 10px; - width: 66%; - margin-left: 3px; + width: 100%; } .buttonGroup { flex-direction: row; - padding-top: 5px; justify-content: center; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; } -.landscapeButtonGroup { + +.buttonContainer { + justifyContent: center; + alignItems: center; flex: 1; - flex-direction: row; - justify-content: flex-end; + border: 0px; } -.uriInputBox { - align: left; - padding-top: 10px; - width: 100%; +.roundshape { + height: 48; //any of height + width: 48; //any of width + justifyContent: center; + borderRadius: 24px; } -.button { +.greenButton { background-color: rgba(#6DAA63, .9); - margin: 10px; - padding-top: 2px; - padding-left: 1px; } -.iosButton { - background-color: rgba(#6DAA63, .9); - margin: 10px; - padding-top: 4px; - padding-left: 1px; +.disabledGreenButton { + background-color: rgba(#395936, .9); } -.androidButton { - background-color: rgba(#6DAA63, .9); - margin: 10px; - padding-top: 1px; - padding-left: 1px; +.blueButton { + background-color: rgba(#4572a6, 1); } -.conferenceButton { - background-color: rgba(#4572a6, 1); - margin: 10px; +.disabledBlueButton { + background-color: rgba(#2E4C6F, 1); } .footer { flex: 1; justify-content: flex-end; padding-bottom: 0px; } .backButton { justifyContent: center; alignItems: center; background-color: red; color: white; - margin: 10px; - border-radius: 10px; + border-radius: 5px; border: 1px; } .navigationContainer { border: 0.5px; } .navigationButtonGroup { justify-content: center; } .navigationButton { } .navigationButtonSelected { background-color: rgba(#6DAA63, .9); } diff --git a/app/assets/styles/blink/_VideoBox.scss b/app/assets/styles/blink/_VideoBox.scss index 960abaf..5333fd4 100644 --- a/app/assets/styles/blink/_VideoBox.scss +++ b/app/assets/styles/blink/_VideoBox.scss @@ -1,92 +1,126 @@ .container { flex: 1; } .remoteVideoContainer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .reconnectContainer { margin-top: 150px; } .localVideoContainer { justify-content: flex-end; } .video { width: 100%; height: 100%; object-fit: cover; } .localVideo { position: absolute; height: 80px; width: 100px; object-fit: cover; background-color: white; top: 10; left: 10; border-radius: 10px; } .portraitButtonContainer { + justify-self: flex-end; flex-direction: row; margin: 0 auto; - margin-bottom: 40px; + margin-top:auto; + margin-bottom: 50px; + padding-left: 20px; + padding-right: 20px; } .landscapeButtonContainer { flex-direction: row; margin: 0 auto; margin-bottom: 0px; } .tabletPortraitButtonContainer { flex-direction: row; margin: 0 auto; margin-bottom: 40px; bottom: 60; } .tabletLandscapeButtonContainer { flex-direction: row; margin: 0 auto; margin-bottom: 0px; bottom: 60; } .buttonContainer { position: absolute; left: 0; bottom: 0; right: 0; } +.buttonContainer { + justifyContent: center; + alignItems: center; + flex: 1; + border: 0px; +} + +.roundshape { + height: 48; //any of height + width: 48; //any of width + justifyContent: center; + borderRadius: 24px; +} + +.whiteButton { + background-color: white; +} + +.disabledWhiteButton { + background-color: rgba(#395936, .9); +} + +.greenButton { + background-color: rgba(#6DAA63, .9); +} + +.disabledGreenButton { + background-color: rgba(#395936, .9); +} + .button { background-color: rgba(#F9F9F9, .7); margin: 10px; padding-top: 5px; } .iosButton { background-color: rgba(#F9F9F9, .7); margin: 10px; padding-top: 5px; } .androidButton { background-color: rgba(#F9F9F9, .7); margin: 10px; padding-top: 1px; } .hangupButton { background-color: rgba(#a94442, .5); } diff --git a/app/components/AboutModal.js b/app/components/AboutModal.js index 76f1f8b..1073c31 100644 --- a/app/components/AboutModal.js +++ b/app/components/AboutModal.js @@ -1,41 +1,42 @@ import React from 'react'; import { Text, Linking } from 'react-native'; import PropTypes from 'prop-types'; import { Dialog, Portal, Surface, Title } from 'react-native-paper'; import KeyboardAwareDialog from './KeyBoardAwareDialog'; const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog; import styles from '../assets/styles/blink/_AboutModal.scss'; function handleLink(event) { Linking.openURL('https://ag-projects.com'); } const AboutModal = (props) => { return ( About Sylk Sylk is part of Sylk Suite, a set of real-time communications applications using IETF SIP protocol and WebRTC specifications - Installed version {props.currentVersion} + Version {props.currentVersion} { props.appStoreVersion && props.appStoreVersion.version > props.currentVersion ? There is a newer version in the App Store {props.appStoreVersion.version} : null } handleLink()} style={styles.link}>Copyright © AG Projects + For family, friends and customers, with love. ); } AboutModal.propTypes = { show: PropTypes.bool.isRequired, close: PropTypes.func.isRequired, currentVersion: PropTypes.string, appStoreVersion: PropTypes.object }; export default AboutModal; diff --git a/app/components/AudioCallBox.js b/app/components/AudioCallBox.js index 8b89427..24a6a30 100644 --- a/app/components/AudioCallBox.js +++ b/app/components/AudioCallBox.js @@ -1,396 +1,425 @@ import React, { Component } from 'react'; -import { View, Platform, TouchableWithoutFeedback } from 'react-native'; +import { View, Platform, TouchableWithoutFeedback, TouchableHighlight } from 'react-native'; import { IconButton, Dialog, Text, ActivityIndicator, Colors } from 'react-native-paper'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import EscalateConferenceModal from './EscalateConferenceModal'; import CallOverlay from './CallOverlay'; import DTMFModal from './DTMFModal'; import UserIcon from './UserIcon'; import styles from '../assets/styles/blink/_AudioCallBox.scss'; import utils from '../utils'; import TrafficStats from './BarChart'; function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class AudioCallBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { remoteUri : this.props.remoteUri, remoteDisplayName : this.props.remoteDisplayName, photo : this.props.photo, active : false, audioMuted : this.props.muted, showDtmfModal : false, showEscalateConferenceModal : false, call : this.props.call, reconnectingCall : this.props.reconnectingCall, info : this.props.info, packetLossQueue : [], audioBandwidthQueue : [], latencyQueue : [], declineReason : this.props.declineReason, callContact : this.props.callContact, selectedContact : this.props.selectedContact }; this.remoteAudio = React.createRef(); this.userHangup = false; } componentDidMount() { // This component is used both for as 'local media' and as the in-call component. // Thus, if the call is not null it means we are beyond the 'local media' phase // so don't call the mediaPlaying prop. if (this.state.call != null) { switch (this.state.call.state) { case 'established': this.attachStream(this.state.call); break; case 'incoming': this.props.mediaPlaying(); // fall through default: this.state.call.on('stateChanged', this.callStateChanged); break; } } } componentWillUnmount() { if (this.state.call != null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.call !== null && nextProps.call !== this.state.call) { if (nextProps.call.state === 'established') { this.attachStream(nextProps.call); this.setState({reconnectingCall: false}); } nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call}); } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.hasOwnProperty('muted')) { this.setState({audioMuted: nextProps.muted}); } if (nextProps.hasOwnProperty('info')) { this.setState({info: nextProps.info}); } if (nextProps.hasOwnProperty('packetLossQueue')) { this.setState({packetLossQueue: nextProps.packetLossQueue}); } if (nextProps.hasOwnProperty('audioBandwidthQueue')) { this.setState({audioBandwidthQueue: nextProps.audioBandwidthQueue}); } if (nextProps.hasOwnProperty('latencyQueue')) { this.setState({latencyQueue: nextProps.latencyQueue}); } this.setState({remoteUri: nextProps.remoteUri, remoteDisplayName: nextProps.remoteDisplayName, photo: nextProps.photo ? nextProps.photo : this.state.photo, declineReason: nextProps.declineReason, callContact: nextProps.callContact, selectedContact: nextProps.selectedContact }); } componentWillUnmount() { if (this.state.call != null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.callTimer); } callStateChanged(oldState, newState, data) { if (newState === 'established') { this.attachStream(this.state.call); this.setState({reconnectingCall: false}); } } attachStream(call) { this.setState({stream: call.getRemoteStreams()[0]}); //we dont use it anywhere though as audio gets automatically piped } escalateToConference(participants) { this.props.escalateToConference(participants); } hangupCall(event) { event.preventDefault(); this.props.hangupCall('user_hangup_call'); this.userHangup = true; } cancelCall(event) { event.preventDefault(); this.props.hangupCall('user_cancel_call'); } muteAudio(event) { event.preventDefault(); this.props.toggleMute(this.props.call.id, !this.state.audioMuted); } showDtmfModal() { this.setState({showDtmfModal: true}); } hideDtmfModal() { this.setState({showDtmfModal: false}); } toggleEscalateConferenceModal() { this.setState({ showEscalateConferenceModal: !this.state.showEscalateConferenceModal }); } handleDoubleTap() { const now = Date.now(); const DOUBLE_PRESS_DELAY = 300; if (this.lastTap && now - this.lastTap < DOUBLE_PRESS_DELAY) { this.props.showLogs(); } else { this.lastTap = now; } } render() { let buttonContainerClass; let userIconContainerClass; let remoteIdentity = {uri: this.state.remoteUri || '', name: this.state.remoteDisplayName || '', photo: this.state.photo }; const username = this.state.remoteUri.split('@')[0]; const isPhoneNumber = username.match(/^(\+|0)(\d+)$/); let displayName = this.state.remoteUri ? toTitleCase(this.state.remoteUri.split('@')[0]) : ''; if (this.state.remoteDisplayName && this.state.remoteUri !== this.state.remoteDisplayName) { displayName = this.state.remoteDisplayName; } if (this.props.isTablet) { buttonContainerClass = this.props.orientation === 'landscape' ? styles.tabletLandscapeButtonContainer : styles.tabletPortraitButtonContainer; userIconContainerClass = styles.tabletUserIconContainer; } else { buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer; userIconContainerClass = styles.userIconContainer; } const buttonSize = this.props.isTablet ? 40 : 34; - const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; - const chatButtonClass = (Platform.OS === 'ios') ? styles.iosChatButton : styles.androidChatButton; let disablePlus = false; if (this.state.callContact) { if (this.state.callContact.tags.indexOf('test') > -1 || this.state.callContact.tags.indexOf('conference') > -1) { disablePlus = true; } } - //console.log('Call to remoteIdentity', remoteIdentity); - return ( + {displayName} {this.state.remoteUri} {this.props.orientation !== 'landscape' && this.state.reconnectingCall ? : null } {this.state.call && ((this.state.call.state === 'accepted' || this.state.call.state === 'established') && !this.state.reconnectingCall) ? {!disablePlus ? + + + + : null} {!disablePlus ? + + + + : null} - - + + + + + + + + + + {isPhoneNumber ? - + + + + + : null } - + + + + + : - - + + + + + + + + + + } ); } } AudioCallBox.propTypes = { remoteUri : PropTypes.string, remoteDisplayName : PropTypes.string, photo : PropTypes.string, call : PropTypes.object, connection : PropTypes.object, accountId : PropTypes.string, escalateToConference : PropTypes.func, info : PropTypes.string, hangupCall : PropTypes.func, mediaPlaying : PropTypes.func, callKeepSendDtmf : PropTypes.func, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, orientation : PropTypes.string, isTablet : PropTypes.bool, reconnectingCall : PropTypes.bool, muted : PropTypes.bool, packetLossQueue : PropTypes.array, videoBandwidthQueue : PropTypes.array, audioBandwidthQueue : PropTypes.array, latencyQueue : PropTypes.array, declineReason : PropTypes.string, showLogs : PropTypes.func, goBackFunc : PropTypes.func, callState : PropTypes.object, messages : PropTypes.object, sendMessage : PropTypes.func, reSendMessage : PropTypes.func, confirmRead : PropTypes.func, deleteMessage : PropTypes.func, expireMessage : PropTypes.func, getMessages : PropTypes.func, pinMessage : PropTypes.func, unpinMessage : PropTypes.func, callContact : PropTypes.object, selectedContact : PropTypes.object }; export default AudioCallBox; diff --git a/app/components/Conference.js b/app/components/Conference.js index eec5dca..a46543e 100644 --- a/app/components/Conference.js +++ b/app/components/Conference.js @@ -1,458 +1,460 @@ import React from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; import assert from 'assert'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import ConferenceBox from './ConferenceBox'; import LocalMedia from './LocalMedia'; import config from '../config'; import utils from '../utils'; const DEBUG = debug('blinkrtc:Conference'); debug.enable('*'); class Conference extends React.Component { constructor(props) { super(props); autoBind(this); this.defaultWaitInterval = 90; // until we can connect or reconnect this.waitCounter = 0; this.waitInterval = this.defaultWaitInterval; this.userHangup = false; this.ended = false; this.started = false; this.participants = []; this.state = { currentCall: this.props.currentCall, callState: this.props.currentCall ? this.props.currentCall.state : null, callUUID: this.props.callUUID, localMedia: this.props.localMedia, connection: this.props.connection, account: this.props.account, registrationState: this.props.registrationState, startedByPush: this.props.startedByPush, reconnectingCall: this.props.reconnectingCall, myInvitedParties: this.props.myInvitedParties, isFavorite: this.props.favoriteUris.indexOf(this.props.targetUri) > -1, selectedContacts: this.props.selectedContacts, - room: this.props.targetUri.toLowerCase() + room: this.props.targetUri.toLowerCase(), + messages: this.props.messages } if (this.props.connection) { this.props.connection.on('stateChanged', this.connectionStateChanged); } if (this.props.participantsToInvite) { this.props.participantsToInvite.forEach((p) => { if (this.participants.indexOf(p) === -1) { this.participants.push(p); } }); } } componentDidMount() { if (this.state.currentCall) { this.state.currentCall.on('stateChanged', this.callStateChanged); } } componentWillUnmount() { this.ended = true; if (this.state.currentCall) { this.state.currentCall.removeListener('stateChanged', this.callStateChanged); } if (this.state.connection) { this.state.connection.removeListener('stateChanged', this.connectionStateChanged); } } callStateChanged(oldState, newState, data) { //utils.timestampedLog('Conference: callStateChanged', oldState, '->', newState); if (newState === 'established') { this.setState({reconnectingCall: false}); } this.setState({callState: newState}); } connectionStateChanged(oldState, newState) { switch (newState) { case 'disconnected': if (oldState === 'ready') { utils.timestampedLog('Conference: connection failed, reconnecting the call...'); this.waitInterval = this.defaultWaitInterval; } break; default: break; } } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.account !== null && nextProps.account !== this.props.account) { this.setState({account: nextProps.account}); } if (nextProps.currentCall) { this.setState({room: nextProps.currentCall.remoteIdentity.uri.toLowerCase()}); } this.setState({registrationState: nextProps.registrationState}); if (nextProps.connection !== null && nextProps.connection !== this.state.connection) { this.setState({connection: nextProps.connection}); nextProps.connection.on('stateChanged', this.connectionStateChanged); } if (nextProps.reconnectingCall !== this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.localMedia !== null && nextProps.localMedia !== this.state.localMedia) { this.setState({localMedia: nextProps.localMedia}); } if (nextProps.callUUID !== null && this.state.callUUID !== nextProps.callUUID) { this.setState({callUUID: nextProps.callUUID, reconnectingCall: true, currentCall: null}); this.startCallWhenReady(); } this.setState({myInvitedParties: nextProps.myInvitedParties, isFavorite: nextProps.favoriteUris.indexOf(this.state.room) > -1, - selectedContacts: nextProps.selectedContacts + selectedContacts: nextProps.selectedContacts, + messages: nextProps.messages }); } mediaPlaying() { this.startCallWhenReady(); } canConnect() { if (!this.state.localMedia) { console.log('Conference: no local media'); return false; } if (!this.state.connection) { console.log('Conference: no connection yet'); return false; } if (this.state.connection.state !== 'ready') { console.log('Conference: connection is not ready'); return false; } if (!this.state.account) { console.log('Conference: no account yet'); return false; } if (this.state.registrationState !== 'registered') { console.log('Conference: account not ready yet'); return false; } if (this.state.currentCall) { console.log('Conference: call already in progress'); return false; } return true; } async startCallWhenReady() { utils.timestampedLog('Conference: start conference', this.state.callUUID, 'when ready to', this.state.room); this.waitCounter = 0; //utils.timestampedLog('Conference: waiting for connecting to the conference', this.waitInterval, 'seconds'); let diff = 0; while (this.waitCounter < this.waitInterval) { if (this.userHangup) { this.props.hangupCall(this.state.callUUID, 'user_cancelled_conference'); return; } if (this.state.currentCall) { return; } if (this.waitCounter >= this.waitInterval - 1) { utils.timestampedLog('Conference: cancelling conference', this.state.callUUID); this.props.hangupCall(this.state.callUUID, 'timeout'); } if (!this.canConnect()) { console.log('Retrying for', (this.waitInterval - this.waitCounter), 'seconds'); await this._sleep(1000); } else { this.waitCounter = 0; this.start(); return; } this.waitCounter++; } } _sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } start() { if (this.state.currentCall) { console.log('Conference: call already in progress'); } const options = { id: this.state.callUUID, pcConfig: {iceServers: config.iceServers}, localStream: this.state.localMedia, audio: this.props.proposedMedia.audio, video: this.props.proposedMedia.video, offerOptions: { offerToReceiveAudio: false, offerToReceiveVideo: false }, initialParticipants: this.props.participantsToInvite }; utils.timestampedLog('Conference: Sylkrtc.js will start conference call', this.state.callUUID, 'to', this.state.room.toLowerCase()); if (this.props.participantsToInvite) { utils.timestampedLog('Initial participants', this.props.participantsToInvite); } let confCall = this.state.account.joinConference(this.state.room.toLowerCase(), options); if (confCall) { confCall.on('stateChanged', this.callStateChanged); this.setState({currentCall: confCall}); } } saveParticipant(callUUID, room, uri) { console.log('Save saveParticipant', uri); if (this.participants.indexOf(uri) === -1) { this.participants.push(uri); } this.props.saveParticipant(callUUID, room, uri); } - saveMessage(room, messages) { - this.props.saveMessage(room, messages); + saveMessage(room, message) { + this.props.saveMessage(room, message); } showSaveDialog() { if (!this.userHangup) { return false; } if (this.state.reconnectingCall) { console.log('No save dialog because call is reconnecting') return false; } if (this.participants.length === 0) { console.log('No show dialog because there are no participants') return false; } if (this.state.isFavorite) { let must_display = false; if (this.props.myInvitedParties.hasOwnProperty(this.state.room)) { let old_participants = this.state.myInvitedParties[this.state.room]; this.participants.forEach((p) => { if (old_participants.indexOf(p) === -1) { console.log(p, 'is not in', old_participants); must_display = true; } }); } if (must_display) { console.log('Show save dialog because we have new participants'); return true; } else { console.log('No save dialog because is already favorite with same participants') return false; } } else { console.log('Show save dialog because room', this.state.targetUri, 'is not in favorites'); return true; } return true; } saveConference() { if (!this.state.isFavorite) { this.props.toggleFavorite(this.state.room); } if (this.props.myInvitedParties.hasOwnProperty(this.state.room)) { let participants = this.state.myInvitedParties[this.state.room]; this.participants.forEach((p) => { if (participants.indexOf(p) === -1) { participants.push(p); } }); this.props.saveConference(this.state.room, participants); } else { this.props.saveConference(this.state.room, this.participants); } this.props.hangupCall(this.state.callUUID, 'user_hangup_conference_confirmed'); } hangup(reason='user_hangup_conference') { this.userHangup = true; if (!this.showSaveDialog()) { reason = 'user_hangup_conference_confirmed'; } this.props.hangupCall(this.state.callUUID, reason); if (this.waitCounter > 0) { this.waitCounter = this.waitInterval; } } render() { let box = null; let messages = []; if (this.state.localMedia !== null) { let media = 'audio' if (this.props.proposedMedia && this.props.proposedMedia.video === true) { media = 'video'; } - - if (this.props.myMessages && this.props.myMessages.hasOwnProperty(this.state.room)) { - messages = this.props.myMessages[this.state.room]; - } - if (this.state.currentCall != null && (this.state.callState === 'established')) { box = ( ); } else { box = ( ); } } else { console.log('Waiting for local media'); } return box; } } Conference.propTypes = { notificationCenter : PropTypes.func, account : PropTypes.object, connection : PropTypes.object, registrationState : PropTypes.string, hangupCall : PropTypes.func, saveParticipant : PropTypes.func, saveMessage : PropTypes.func, - myMessages : PropTypes.object, saveConference : PropTypes.func, previousParticipants : PropTypes.array, currentCall : PropTypes.object, localMedia : PropTypes.object, targetUri : PropTypes.string, participantsToInvite : PropTypes.array, generatedVideoTrack : PropTypes.bool, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, callUUID : PropTypes.string, proposedMedia : PropTypes.object, isLandscape : PropTypes.bool, isTablet : PropTypes.bool, muted : PropTypes.bool, defaultDomain : PropTypes.string, startedByPush : PropTypes.bool, inFocus : PropTypes.bool, toggleFavorite : PropTypes.func, saveConference : PropTypes.func, reconnectingCall : PropTypes.bool, favoriteUris : PropTypes.array, myContacts : PropTypes.object, lookupContacts : PropTypes.func, goBackFunc : PropTypes.func, inviteToConferenceFunc : PropTypes.func, selectedContacts : PropTypes.array, callContact : PropTypes.object, callState : PropTypes.object, - finishInvite : PropTypes.func + finishInvite : PropTypes.func, + messages : PropTypes.object, + getMessages : PropTypes.func, + fileSharingUrl : PropTypes.string }; export default Conference; diff --git a/app/components/ConferenceAudioParticipant.js b/app/components/ConferenceAudioParticipant.js index c6f2d6e..7a97106 100644 --- a/app/components/ConferenceAudioParticipant.js +++ b/app/components/ConferenceAudioParticipant.js @@ -1,94 +1,94 @@ import React, {Component, Fragment} from 'react'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import { View } from 'react-native'; import { RTCView } from 'react-native-webrtc'; import UserIcon from './UserIcon'; import { List, Text } from 'react-native-paper'; import styles from '../assets/styles/blink/_ConferenceAudioParticipant.scss'; class ConferenceAudioParticipant extends Component { constructor(props) { super(props); autoBind(this); this.state = { stream: null } if (!props.isLocal && props.participant) { props.participant.on('stateChanged', this.onParticipantStateChanged); } } componentDidMount() { this.maybeAttachStream(); } componentWillUnmount() { if (!this.props.isLocal && this.props.participant) { this.props.participant.removeListener('stateChanged', this.onParticipantStateChanged); } } onParticipantStateChanged(oldState, newState) { if (newState === 'established') { this.maybeAttachStream(); } } maybeAttachStream() { if (!this.props.participant) { return; } const streams = this.props.participant.streams; if (streams.length > 0) { if (!this.props.participant.videoPaused) { this.props.participant.pauseVideo(); } this.setState({stream: streams[0]}); } } render() { const tag = this.props.isLocal ? 'Myself' : this.props.status; let identity = this.props.identity; let rightStyle = styles.right ; if (tag === 'Muted') { rightStyle = styles.rightOrange; } else if (tag && tag.indexOf('kbit') > -1) { rightStyle = styles.rightGreen; } return ( } + left={props => } right={props => {tag} } /> ); } } ConferenceAudioParticipant.propTypes = { identity: PropTypes.object.isRequired, participant: PropTypes.object, isLocal: PropTypes.bool, supportsVideo: PropTypes.bool, status: PropTypes.string }; export default ConferenceAudioParticipant; diff --git a/app/components/ConferenceBox.js b/app/components/ConferenceBox.js index 1f38242..4b8016e 100644 --- a/app/components/ConferenceBox.js +++ b/app/components/ConferenceBox.js @@ -1,1723 +1,1979 @@ 'use strict'; import React, {useState, Component, Fragment} from 'react'; -import { View, Platform, TouchableWithoutFeedback, Dimensions, SafeAreaView, ScrollView, FlatList } from 'react-native'; +import { View, Platform, TouchableWithoutFeedback, Dimensions, SafeAreaView, ScrollView, FlatList, TouchableHighlight, Keyboard } from 'react-native'; import PropTypes from 'prop-types'; import * as sylkrtc from 'react-native-sylkrtc'; import classNames from 'classnames'; import debug from 'react-native-debug'; import superagent from 'superagent'; import autoBind from 'auto-bind'; import { RTCView } from 'react-native-webrtc'; import { IconButton, Appbar, Portal, Modal, Surface, Paragraph } from 'react-native-paper'; import uuid from 'react-native-uuid'; import config from '../config'; import utils from '../utils'; //import AudioPlayer from './AudioPlayer'; import ConferenceDrawer from './ConferenceDrawer'; import ConferenceDrawerLog from './ConferenceDrawerLog'; // import ConferenceDrawerFiles from './ConferenceDrawerFiles'; import ConferenceDrawerParticipant from './ConferenceDrawerParticipant'; import ConferenceDrawerParticipantList from './ConferenceDrawerParticipantList'; import ConferenceDrawerSpeakerSelection from './ConferenceDrawerSpeakerSelection'; import ConferenceDrawerSpeakerSelectionWrapper from './ConferenceDrawerSpeakerSelectionWrapper'; import ConferenceHeader from './ConferenceHeader'; import ConferenceCarousel from './ConferenceCarousel'; import ConferenceParticipant from './ConferenceParticipant'; import ConferenceMatrixParticipant from './ConferenceMatrixParticipant'; import ConferenceParticipantSelf from './ConferenceParticipantSelf'; import InviteParticipantsModal from './InviteParticipantsModal'; import ConferenceAudioParticipantList from './ConferenceAudioParticipantList'; import ConferenceAudioParticipant from './ConferenceAudioParticipant'; import { GiftedChat } from 'react-native-gifted-chat' import xss from 'xss'; +import CustomChatActions from './ChatActions'; + import styles from '../assets/styles/blink/_ConferenceBox.scss'; const DEBUG = debug('blinkrtc:ConferenceBox'); debug.enable('*'); function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } class ConferenceBox extends Component { constructor(props) { super(props); autoBind(this); this.audioBytesReceived = new Map(); this.audioBandwidth = new Map(); this.bandwidthDownload = 0; this.bandwidthUpload = 0; this.videoBytesReceived = new Map(); this.videoBandwidth = new Map(); this.audioPacketLoss = new Map(); this.videoPacketLoss = new Map(); this.packetLoss = new Map(); this.latency = new Map(); this.mediaLost = new Map(); this.sampleInterval = 5; this.seenMessages = new Map(); - let messages = []; - props.messages.reverse().forEach((m) => { - if (!this.seenMessages.has(m._id)) { - messages.push(m); - this.seenMessages.set(m.id, true); - } - }); + let renderMessages = []; - messages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); + if (this.props.remoteUri in this.props.messages) { + renderMessages = this.props.messages[this.props.remoteUri]; + } if (this.props.call) { let giftedChatMessage; - this.props.call.messages.reverse().forEach((sylkMessage) => { - giftedChatMessage = utils.sylkToRenderMessage(sylkMessage); - messages.push(giftedChatMessage); + let direction; + this.props.call.messages.forEach((sylkMessage) => { + if (sylkMessage.sender.uri.indexOf('@conference.') && sylkMessage.content.indexOf('Welcome!') > -1) { + return; + } + + if (sylkMessage.type === 'status') { + return; + } + + if (!this.seenMessages.has(sylkMessage._id)) { + this.seenMessages.set(sylkMessage._id, true); + + const existingMessages = renderMessages.filter(msg => this.messageExists(msg, sylkMessage)); + if (existingMessages.length > 0) { + return; + } + + direction = sylkMessage.state === 'received' ? 'incoming': 'outgoing'; + + if (direction === 'incoming' && sylkMessage.sender.uri === this.props.account.id) { + direction = 'outgoing'; + } + + giftedChatMessage = utils.sylkToRenderMessage(sylkMessage, null, direction); + + renderMessages.push(giftedChatMessage); + this.props.saveMessage(this.props.remoteUri, giftedChatMessage); + } }); } + const videoEnabled = this.props.call && this.props.call.getLocalStreams()[0].getVideoTracks().length > 0; + this.state = { callOverlayVisible: true, remoteUri: this.props.remoteUri, call: this.props.call, + accountId: this.props.call ? this.props.call.account.id : null, + renderMessages: GiftedChat.append(renderMessages, []), ended: false, + keyboardVisible: false, + videoEnabled: videoEnabled, audioMuted: this.props.muted, videoMuted: !this.props.inFocus, videoMutedbyUser: false, + messages: this.props.messages, participants: props.call.participants.slice(), showInviteModal: false, showDrawer: false, showFiles: false, shareOverlayVisible: false, showSpeakerSelection: false, activeSpeakers: props.call.activeParticipants.slice(), selfDisplayedLarge: false, eventLog: [], sharedFiles: props.call.sharedFiles.slice(), largeVideoStream: null, previousParticipants: this.props.previousParticipants, inFocus: this.props.inFocus, reconnectingCall: this.props.reconnectingCall, terminated: this.props.terminated, - messages: messages, - chatView: false, + chatView: !videoEnabled, + audioView: !videoEnabled, + isLandscape: this.props.isLandscape, selectedContacts: this.props.selectedContacts }; const friendlyName = this.state.remoteUri.split('@')[0]; //if (window.location.origin.startsWith('file://')) { this.conferenceUrl = `${config.publicUrl}/conference/${friendlyName}`; //} else { // this.conferenceUrl = `${window.location.origin}/conference/${friendlyName}`; //} const emailMessage = `You can join me in the conference using a Web browser at ${this.conferenceUrl} ` + 'or by using the freely available Sylk WebRTC client app at http://sylkserver.com'; const subject = 'Join me, maybe?'; this.emailLink = `mailto:?subject=${encodeURI(subject)}&body=${encodeURI(emailMessage)}`; this.overlayTimer = null; this.logEvent = {}; - this.haveVideo = false; this.uploads = []; this.selectSpeaker = 1; this.foundContacts = new Map(); if (this.props.call) { this.lookupContact(this.props.call.localIdentity._uri, this.props.call.localIdentity._displayName); } [ 'error', 'warning', 'info', 'debug' ].forEach((level) => { this.logEvent[level] = ( (action, messages, originator) => { const log = this.state.eventLog.slice(); log.unshift({originator, originator, level: level, action: action, messages: messages}); this.setState({eventLog: log}); } ); }); this.invitedParticipants = new Map(); // TODO preserve this list between route changes props.initialParticipants.forEach((uri) => { this.invitedParticipants.set(uri, {timestamp: Date.now(), status: 'Invited'}) this.lookupContact(uri); }); this.participantsTimer = setInterval(() => { this.updateParticipantsStatus(); }, this.sampleInterval * 1000); + setTimeout(() => { + this.listSharedFiles(); + }, 1000); + } + + messageExists(giftedChatMessage, sylkMessage) { + if (sylkMessage._id === giftedChatMessage._id) { + return true; + } + + let gs_timestamp = giftedChatMessage.createdAt; + let sylk_timestamp = sylkMessage.timestamp; + + gs_timestamp.setMilliseconds(0); + sylk_timestamp.setMilliseconds(0); + + if (gs_timestamp.toString() === sylk_timestamp.toString() && giftedChatMessage.text === sylkMessage.content) { + return true; + } + + return false; + } + + //getDerivedStateFromProps(nextProps, state) { + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.hasOwnProperty('muted')) { + this.setState({audioMuted: nextProps.muted}); + } + + if (nextProps.call !== null && nextProps.call !== this.state.call) { + this.setState({call: nextProps.call}); + } + + if (nextProps.inFocus !== this.state.inFocus) { + if (nextProps.inFocus) { + if (!this.state.videoMutedbyUser) { + this._resumeVideo(); + } + } else { + this._muteVideo(); + } + this.setState({inFocus: nextProps.inFocus}); + } + + if (nextProps.reconnectingCall !== this.state.reconnectingCall) { + this.setState({reconnectingCall: nextProps.reconnectingCall}); + } + + if (nextProps.remoteUri in nextProps.messages) { + let renderMessages = nextProps.messages[nextProps.remoteUri]; + let direction; + + if (nextProps.call) { + let giftedChatMessage; + nextProps.call.messages.forEach((sylkMessage) => { + if (sylkMessage.type === 'status') { + return; + } + + if (sylkMessage.sender.uri.indexOf('@conference.') && sylkMessage.content.indexOf('Welcome!') > -1) { + return; + } + + if (!this.seenMessages.has(sylkMessage._id)) { + this.seenMessages.set(sylkMessage._id, true); + + const existingMessages = renderMessages.filter(msg => this.messageExists(msg, sylkMessage)); + if (existingMessages.length > 0) { + return; + } + + direction = sylkMessage.state === 'received' ? 'incoming': 'outgoing'; + + if (direction === 'incoming' && sylkMessage.sender.uri === this.props.account.id) { + direction = 'outgoing'; + } + + giftedChatMessage = utils.sylkToRenderMessage(sylkMessage, null, direction); + + renderMessages.push(giftedChatMessage); + this.props.saveMessage(this.props.remoteUri, giftedChatMessage); + } + }); + } + this.setState({renderMessages: GiftedChat.append(renderMessages, [])}); + } + + this.setState({terminated: nextProps.terminated, + remoteUri: nextProps.remoteUri, + isLandscape: nextProps.isLandscape, + messages: nextProps.messages, + accountId: !this.state.accountId && nextProps.call ? this.props.call.account.id : this.state.accountId, + selectedContacts: nextProps.selectedContacts}); } getInfo() { let info; if (this.bandwidthDownload > 0 && this.bandwidthUpload > 0) { info = '⇣' + this.bandwidthDownload + ' ⇡' + this.bandwidthUpload; } else if (this.bandwidthDownload > 0) { info = '⇣' + this.bandwidthDownload ; } else if (this.bandwidthUpload > 0) { info = '⇡' + this.bandwidthUpload; } if (info) { return info + ' Mbit/s'; } return info; } + renderCustomActions = props => + ( + + ) + + onSendFromUser() { + console.log('On send from user...'); + } + + onSendWithFile(selectedFile) { + + let fileData = { + name: selectedFile.name, + type: selectedFile.type, + size: selectedFile.size, + uri: selectedFile.uri + }; + + console.log('Sending file', fileData); + //this.props.sendMessage(uri, message); + } + updateParticipantsStatus() { let participants_uris = []; this.state.participants.forEach((p) => { participants_uris.push(p.identity._uri); }); this.getConnectionStats(); const invitedParties = Array.from(this.invitedParticipants.keys()); //console.log('Invited participants', invitedParties); //console.log('Current participants', participants_uris); let p; let interval; invitedParties.forEach((_uri) => { if (participants_uris.indexOf(_uri) > 0) { this.invitedParticipants.delete(_uri); } p = this.invitedParticipants.get(_uri); if (!p) { return; } interval = Math.floor((Date.now() - p.timestamp) / 1000); if (interval >= 60) { this.invitedParticipants.delete(_uri); this.forceUpdate(); } if (p.status.indexOf('Invited') > -1 && interval > 5) { p.status = 'Wait .'; } if (p.status.indexOf('.') > -1) { if (interval > 45) { p.status = 'No answer'; this.postChatSystemMessage(_uri + ' did not answer'); } else { p.status = p.status + '.'; } } }); this.forceUpdate(); } postChatSystemMessage(text, timestamp=true) { if (timestamp) { var now = new Date(); var hours = now.getHours(); var mins = now.getMinutes(); var secs = now.getSeconds(); var ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; mins = mins < 10 ? '0' + mins : mins; secs = secs < 10 ? '0' + secs : secs; text = text + ' at ' + hours + ":" + mins + ':' + secs + ' ' + ampm; } const giftedChatMessage = { _id: uuid.v4(), createdAt: now, text: text, system: true, }; - this.setState({messages: GiftedChat.append(this.state.messages, [giftedChatMessage])}); + + this.props.saveMessage(this.state.remoteUri, giftedChatMessage); + this.setState({renderMessages: GiftedChat.append(this.state.renderMessages, [giftedChatMessage])}); } componentDidMount() { for (let p of this.state.participants) { p.on('stateChanged', this.onParticipantStateChanged); p.attach(); } + this.keyboardDidShowListener = Keyboard.addListener( + 'keyboardDidShow', + this._keyboardDidShow + ); + this.keyboardDidHideListener = Keyboard.addListener( + 'keyboardDidHide', + this._keyboardDidHide + ); + this.props.call.on('participantJoined', this.onParticipantJoined); this.props.call.on('participantLeft', this.onParticipantLeft); this.props.call.on('roomConfigured', this.onConfigureRoom); this.props.call.on('fileSharing', this.onFileSharing); this.props.call.on('composingIndication', this.composingIndicationReceived); this.props.call.on('message', this.messageReceived); - if (this.state.participants.length > 1) { - this.armOverlayTimer(); - } + this.armOverlayTimer(); // attach to ourselves first if there are no other participants if (this.state.participants.length === 0) { setTimeout(() => { const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); }); } else { this.state.participants.forEach((p) => { if (p.identity._uri.search('guest.') === -1 && p.identity._uri !== this.props.call.localIdentity._uri) { // used for history item this.props.saveParticipant(this.props.call.id, this.state.remoteUri, p.identity._uri); this.lookupContact(p.identity._uri, p.identity._displayName); } }); // this.changeResolution(); } - if (this.props.call.getLocalStreams()[0].getVideoTracks().length !== 0) { - this.haveVideo = true; - } - if (this.state.videoMuted) { this._muteVideo(); } //let msg = "Others can join the conference using a web browser at " + this.conferenceUrl; //this.postChatSystemMessage(msg, false); if (this.state.selectedContacts) { this.inviteParticipants(this.state.selectedContacts); } } componentWillUnmount() { clearTimeout(this.overlayTimer); clearTimeout(this.participantsTimer); this.uploads.forEach((upload) => { this.props.notificationCenter().removeNotification(upload[1]); upload[0].abort(); }) + this.keyboardDidShowListener.remove(); + this.keyboardDidHideListener.remove(); } - //getDerivedStateFromProps(nextProps, state) { - UNSAFE_componentWillReceiveProps(nextProps) { - if (nextProps.hasOwnProperty('muted')) { - this.setState({audioMuted: nextProps.muted}); - } - - if (nextProps.call !== null && nextProps.call !== this.state.call) { - this.setState({call: nextProps.call}); - } - - if (nextProps.inFocus !== this.state.inFocus) { - if (nextProps.inFocus) { - if (!this.state.videoMutedbyUser) { - this._resumeVideo(); - } - } else { - this._muteVideo(); - } - this.setState({inFocus: nextProps.inFocus}); - } - - if (nextProps.reconnectingCall !== this.state.reconnectingCall) { - this.setState({reconnectingCall: nextProps.reconnectingCall}); - } + _keyboardDidShow() { + this.setState({keyboardVisible: true}); + } - this.setState({terminated: nextProps.terminated, - remoteUri: nextProps.remoteUri, - selectedContacts: nextProps.selectedContacts}); + _keyboardDidHide() { + this.setState({keyboardVisible: false}); } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } composingIndicationReceived(data) { utils.timestampedLog('isComposing received'); } messageReceived(sylkMessage) { - if (sylkMessage.content.indexOf('has joined the room') > -1) { + //console.log('Conference got message', sylkMessage); + + if (sylkMessage.sender.uri.indexOf('@conference.') && sylkMessage.content.indexOf('Welcome!') > -1) { return; } - if (sylkMessage.content.indexOf('has left the room after') > -1) { + const existingMessages = this.state.renderMessages.filter(msg => this.messageExists(msg, sylkMessage)); + if (existingMessages.length > 0) { return; } + if (sylkMessage.direction === 'incoming' && sylkMessage.sender.uri === this.state.accountId) { + sylkMessage.direction = 'outgoing'; + } + const giftedChatMessage = utils.sylkToRenderMessage(sylkMessage); - this.setState({messages: GiftedChat.append(this.state.messages, [giftedChatMessage])}); + if (sylkMessage.type === 'status') { + return; + } + + this.setState({renderMessages: GiftedChat.append(this.state.renderMessages, [giftedChatMessage])}); this.props.saveMessage(this.state.remoteUri, giftedChatMessage); } onSendMessage(messages) { if (!this.props.call) { return; } + + console.log('onSendMessage', messages); messages.forEach((message) => { this.props.call.sendMessage(message.text, 'text/plain') + message.direction = 'outgoing'; this.props.saveMessage(this.state.remoteUri, message); - }); - this.setState({messages: GiftedChat.append(this.state.messages, messages)}); + this.setState({renderMessages: GiftedChat.append(this.state.renderMessages, messages)}); } lookupContact(uri, displayName) { let photo; let username = uri.split('@')[0]; if (this.props.myContacts.hasOwnProperty(uri) && this.props.myContacts[uri].name) { displayName = this.props.myContacts[uri].name; } else if (this.props.contacts) { let username = uri.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); if (isPhoneNumber) { var contact_obj = this.findObjectByKey(this.props.contacts, 'uri', username); } else { var contact_obj = this.findObjectByKey(this.props.contacts, 'uri', uri); } if (contact_obj) { displayName = contact_obj.displayName; photo = contact_obj.photo; if (isPhoneNumber) { uri = username; } } else { if (isPhoneNumber) { uri = username; displayName = toTitleCase(username); } } } const c = {photo: photo, displayName: displayName || toTitleCase(username)}; this.foundContacts.set(uri, c) } getConnectionStats() { let audioPackets = 0; let videoPackets = 0; let delay = 0; let audioPacketsLost = 0; let videoPacketsLost = 0; let audioPacketLoss = 0; let videoPacketLoss = 0; let totalPackets = 0; let totalPacketsLost = 0; let totalPacketLoss = 0; let totalAudioBandwidth = 0; let totalVideoBandwidth = 0; let totalSpeed = 0; let bandwidthUpload = 0; let mediaType; if (this.state.participants.length === 0) { this.bandwidthDownload = 0; this.videoBandwidth.set('total', 0); this.audioBandwidth.set('total', 0); } let participants = this.state.participants.concat(this.props.call); participants.forEach((p) => { if (!p._pc) { return; } let identity; if (p.identity) { identity = p.identity.uri; } else { identity = 'myself'; } p._pc.getStats(null).then(stats => { audioPackets = 0; videoPackets = 0; audioPacketsLost = 0; videoPacketsLost = 0; audioPacketLoss = 0; videoPacketLoss = 0; stats.forEach(report => { if (report.type === "ssrc") { report.values.forEach(object => { if (object.mediaType) { mediaType = object.mediaType; } }); report.values.forEach(object => { if (object.bytesReceived && identity !== 'myself') { const bytesReceived = Math.floor(object.bytesReceived); if (mediaType === 'audio') { if (this.audioBytesReceived.has(p.id)) { const lastBytes = this.audioBytesReceived.get(p.id); const diff = bytesReceived - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); totalAudioBandwidth = totalAudioBandwidth + speed; totalSpeed = totalSpeed + speed; //console.log(identity, 'audio bandwidth', speed, 'kbit/s from', identity); this.audioBandwidth.set(p.id, speed); } this.audioBytesReceived.set(p.id, bytesReceived); } else if (mediaType === 'video') { if (this.videoBytesReceived.has(p.id)) { const lastBytes = this.videoBytesReceived.get(p.id); const diff = bytesReceived - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); totalVideoBandwidth = totalVideoBandwidth + speed; totalSpeed = totalSpeed + speed; //console.log(identity, 'video bandwidth', speed, 'kbit/s from', identity); this.videoBandwidth.set(p.id, speed); } this.videoBytesReceived.set(p.id, bytesReceived); } } else if (object.bytesSent && identity === 'myself') { const bytesSent = Math.floor(object.bytesSent); if (mediaType === 'audio') { if (this.audioBytesReceived.has(p.id)) { const lastBytes = this.audioBytesReceived.get(p.id); const diff = bytesSent - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); bandwidthUpload = bandwidthUpload + speed; //console.log(identity, 'audio bandwidth', speed, 'kbit/s from', identity); this.audioBandwidth.set(p.id, speed); } this.audioBytesReceived.set(p.id, bytesSent); } else if (mediaType === 'video') { if (this.videoBytesReceived.has(p.id)) { const lastBytes = this.videoBytesReceived.get(p.id); const diff = bytesSent - lastBytes; const speed = Math.floor(diff / this.sampleInterval * 8 / 1000); bandwidthUpload = bandwidthUpload + speed; //console.log(identity, 'video bandwidth', speed, 'kbit/s from', identity); this.videoBandwidth.set(p.id, speed); } this.videoBytesReceived.set(p.id, bytesSent); } } else if (object.totalAudioEnergy) { //console.log('Total audio energy', object.totalAudioEnergy, 'from', identity); } else if (object.audioOutputLevel) { //console.log('Output level', object.audioOutputLevel, 'from', identity); this.mediaLost.set(p.id, Math.floor(object.audioOutputLevel) < 5 ? true : false); } else if (object.audioInputLevel) { //console.log('Input level', object.audioInputLevel, 'from', identity); this.mediaLost.set(p.id, Math.floor(object.audioInputLevel) < 5 ? true : false); } else if (object.packetsLost) { totalPackets = totalPackets + Math.floor(object.packetsLost); totalPacketsLost = totalPacketsLost + Math.floor(object.packetsLost); if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsLost); audioPacketsLost = audioPacketsLost + Math.floor(object.packetsLost); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsLost); videoPacketsLost = videoPacketsLost + Math.floor(object.packetsLost); } if (object.packetsLost > 0) { //console.log(identity, mediaType, 'packetsLost', object.packetsLost); } } else if (object.packetsReceived && identity !== 'myself') { totalPackets = totalPackets + Math.floor(object.packetsReceived); if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsReceived); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsReceived); } //console.log(identity, mediaType, 'packetsReceived', object.packetsReceived); } else if (object.packetsSent && identity === 'myself') { totalPackets = totalPackets + Math.floor(object.packetsSent); if (mediaType === 'audio') { audioPackets = audioPackets + Math.floor(object.packetsSent); } else if (mediaType === 'video') { videoPackets = videoPackets + Math.floor(object.packetsSent); } //console.log(identity, mediaType, 'packetsSent', object.packetsSent); } else if (object.googCurrentDelayMs && identity !== 'myself') { delay = object.googCurrentDelayMs; //console.log('mediaType', mediaType, 'identity', identity, 'delay', delay); this.latency.set(p.id, Math.ceil(delay)); //console.log(object); } if (identity === 'myself') { //console.log(object); } }); if (videoPackets > 0) { videoPacketLoss = Math.floor(videoPacketsLost / videoPackets * 100); } else { videoPacketLoss = 100; } if (audioPackets > 0) { audioPacketLoss = Math.floor(audioPacketsLost / audioPackets * 100); } else { audioPacketLoss = 100; } if (totalPackets > 0) { totalPacketLoss = Math.floor(totalPacketsLost / totalPackets * 100); } else { totalPacketLoss = 100; } this.audioPacketLoss.set(p.id, audioPacketLoss); this.videoPacketLoss.set(p.id, videoPacketLoss); this.packetLoss.set(p.id, totalPacketLoss); }}); //console.log(identity, p.id, 'audio loss', audioPacketLoss, '%, video loss', videoPacketLoss, '%, total loss', totalPacketLoss, '%'); const bandwidthDownload = totalVideoBandwidth + totalAudioBandwidth; this.bandwidthDownload = Math.ceil(bandwidthDownload / 1000 * 100) / 100; this.bandwidthUpload = Math.ceil(bandwidthUpload / 1000 * 100) / 100; this.videoBandwidth.set('total', totalVideoBandwidth); this.audioBandwidth.set('total', totalAudioBandwidth); //console.log('audio bandwidth', totalAudioBandwidth); //console.log('video bandwidth', totalVideoBandwidth); //console.log('total bandwidth', this.bandwidthDownload); //console.log('this.latency', this.latency); }); }); }; + onParticipantJoined(p) { + console.log(p.identity.uri, 'joined the conference'); if (p.identity._uri.search('guest.') === -1) { if (p.identity._uri !== this.props.call.localIdentity._uri) { // used for history item this.props.saveParticipant(this.props.call.id, this.state.remoteUri, p.identity._uri); } const dn = p.identity._uri + ' joined'; this.postChatSystemMessage(dn); } else { this.postChatSystemMessage('An anonymous guest joined'); } this.lookupContact(p.identity._uri, p.identity._displayName); if (this.invitedParticipants.has(p.identity._uri)) { this.invitedParticipants.delete(p.identity._uri); } // this.refs.audioPlayerParticipantJoined.play(); p.on('stateChanged', this.onParticipantStateChanged); p.attach(); this.setState({ participants: this.state.participants.concat([p]) }); // this.changeResolution(); - if (this.state.participants.length > 1) { - this.armOverlayTimer(); - } else { - this.setState({callOverlayVisible: true}); - } + this.armOverlayTimer(); } onParticipantLeft(p) { - //console.log(p.identity.uri, 'left the conference'); + console.log(p.identity.uri, 'left the conference'); const participants = this.state.participants.slice(); this.audioBandwidth.delete(p.id); this.videoBandwidth.delete(p.id); this.latency.delete(p.id); this.audioBytesReceived.delete(p.id); this.videoBytesReceived.delete(p.id); this.audioPacketLoss.delete(p.id); this.videoPacketLoss.delete(p.id); this.packetLoss.delete(p.id); this.mediaLost.delete(p.id); const idx = participants.indexOf(p); if (idx !== -1) { participants.splice(idx, 1); this.setState({ participants: participants }); } p.detach(true); // this.changeResolution(); - if (this.state.participants.length > 1) { - this.armOverlayTimer(); - } else { - this.setState({callOverlayVisible: true}); - } + this.armOverlayTimer(); this.postChatSystemMessage(p.identity.uri + ' left'); } onParticipantStateChanged(oldState, newState) { if (newState === 'established' || newState === null) { this.maybeSwitchLargeVideo(); } } onConfigureRoom(config) { const newState = {}; newState.activeSpeakers = config.activeParticipants; this.setState(newState); if (config.activeParticipants.length === 0) { this.logEvent.info('set speakers to', ['Nobody'], config.originator); } else { const speakers = config.activeParticipants.map((p) => {return p.identity.displayName || p.identity.uri}); this.logEvent.info('set speakers to', speakers, config.originator); } this.maybeSwitchLargeVideo(); } onFileSharing(files) { let stateFiles = this.state.sharedFiles; stateFiles = stateFiles.concat(files); this.setState({sharedFiles: stateFiles}); - files.forEach((file)=>{ + this.listSharedFiles(); + } + + listSharedFiles() { + let sharedFiles = this.state.sharedFiles; + let url; + let i = 0; + let new_messages = []; + let image; + this.state.sharedFiles.forEach((file)=>{ if (file.session !== this.props.call.id) { - this.props.notificationCenter().postFileShared(file, this.showFiles); + //console.log(file); + image = null; + if (!file.msg_id) { + url = this.props.fileSharingUrl + '/' + this.state.remoteUri + '/' + file.session + '/' + file.filename; + file.msg_id = file.session; + sharedFiles[i] = file; + + const direction = file.uploader.uri === this.props.account.id ? 'outgoing' : 'incoming'; + const txt = url; + + if (file.filename.toLowerCase().endsWith('.png')) { + image = url; + } else if (file.filename.toLowerCase().endsWith('.jpg')) { + image = url; + } else if (file.filename.toLowerCase().endsWith('.gif')) { + image = url; + } + + const giftedChatMessage = { + _id: file.msg_id, + createdAt: new Date(), + text: txt, + url: url, + image: url, + received: direction === 'incoming', + user: direction === 'incoming' ? {_id: file.uploader.uri, name: file.uploader.displayName} : {} + }; + new_messages.push(giftedChatMessage); + this.props.saveMessage(this.state.remoteUri, giftedChatMessage); + } + //console.log('file', file.msg_id, url); + //this.props.notificationCenter().postFileShared(file, this.showFiles); } - }) + i = i + 1; + }); + + this.setState({sharedFiles: sharedFiles}); + if (new_messages.length > 0) { + console.log('new_messages', new_messages); + console.log('this.state.messages.length', this.state.messages.length); + this.setState({renderMessages: GiftedChat.append(this.state.renderMessages, new_messages)}); + } + } onVideoSelected(item) { const participants = this.state.participants.slice(); const idx = participants.indexOf(item); participants.splice(idx, 1); participants.unshift(item); if (item.videoPaused) { item.resumeVideo(); } this.setState({ participants: participants }); } changeResolution() { let stream = this.props.call.getLocalStreams()[0]; if (this.state.participants.length < 2) { this.props.call.scaleLocalTrack(stream, 1.5); } else if (this.state.participants.length < 5) { this.props.call.scaleLocalTrack(stream, 2); } else { this.props.call.scaleLocalTrack(stream, 1); } } selectVideo(item) { DEBUG('Switching video to: %o', item); if (item.stream) { this.setState({selfDisplayedLarge: true, largeVideoStream: item.stream}); } } maybeSwitchLargeVideo() { // Switch the large video to another source, maybe. if (this.state.participants.length === 0 && !this.state.selfDisplayedLarge) { // none of the participants are eligible, show ourselves const item = { stream: this.props.call.getLocalStreams()[0], identity: this.props.call.localIdentity }; this.selectVideo(item); } else if (this.state.selfDisplayedLarge) { this.setState({selfDisplayedLarge: false}); } } handleClipboardButton() { utils.copyToClipboard(this.conferenceUrl); this.props.notificationCenter().postSystemNotification('Join me, maybe?', {body: 'Link copied to the clipboard'}); this.setState({shareOverlayVisible: false}); } handleEmailButton(event) { // if (navigator.userAgent.indexOf('Chrome') > 0) { // let emailWindow = window.open(this.emailLink, '_blank'); // setTimeout(() => { // emailWindow.close(); // }, 500); // } else { // window.open(this.emailLink, '_self'); // } this.setState({shareOverlayVisible: false}); } handleShareOverlayEntered() { this.setState({shareOverlayVisible: true}); } handleShareOverlayExited() { this.setState({shareOverlayVisible: false}); } handleActiveSpeakerSelected(participant, secondVideo=false) { // eslint-disable-line space-infix-ops let newActiveSpeakers = this.state.activeSpeakers.slice(); if (secondVideo) { if (participant.id !== 'none') { if (newActiveSpeakers.length >= 1) { newActiveSpeakers[1] = participant; } else { newActiveSpeakers[0] = participant; } } else { newActiveSpeakers.splice(1,1); } } else { if (participant.id !== 'none') { newActiveSpeakers[0] = participant; } else { newActiveSpeakers.shift(); } } this.toggleDrawer(); 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.state.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.state.remoteUri}/${this.props.call.id}/${filename}`; - // a.target = '_blank'; - // a.download = filename; - // const clickEvent = document.createEvent('MouseEvent'); - // clickEvent.initMouseEvent('click', true, true, window, 0, - // clickEvent.screenX, clickEvent.screenY, clickEvent.clientX, clickEvent.clientY, - // clickEvent.ctrlKey, clickEvent.altKey, clickEvent.shiftKey, clickEvent.metaKey, - // 0, null); - // a.dispatchEvent(clickEvent); - } - preventOverlay(event) { // Stop the overlay when we are the thumbnail bar event.stopPropagation(); } muteAudio(event) { event.preventDefault(); if (this.state.audioMuted) { - this.postChatSystemMessage('Audio un-muted'); + //this.postChatSystemMessage('Audio un-muted'); this.props.toggleMute(this.props.call.id, false); } else { - this.postChatSystemMessage('Audio muted'); + //this.postChatSystemMessage('Audio muted'); this.props.toggleMute(this.props.call.id, true); } } toggleChat(event) { event.preventDefault(); - this.setState({chatView: !this.state.chatView}); + if (this.state.videoEnabled) { + this.props.goBackFunc(); + } else { + if (this.state.chatView && !this.state.audioView) { + this.setState({audioView: !this.state.audioView}); + } + + this.setState({chatView: !this.state.chatView}); + } + } + + toggleAudioParticipants(event) { + event.preventDefault(); + if (this.state.audioView && !this.state.chatView) { + this.setState({chatView: !this.state.chatView}); + } + this.setState({audioView: !this.state.audioView}); } toggleCamera(event) { event.preventDefault(); const localStream = this.props.call.getLocalStreams()[0]; if (localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; track._switchCamera(); } } muteVideo(event) { event.preventDefault(); if (this.state.videoMuted) { this._resumeVideo(); this.setState({videoMutedbyUser: false}); } else { this.setState({videoMutedbyUser: true}); this._muteVideo(); } } _muteVideo() { const localStream = this.props.call.getLocalStreams()[0]; if (localStream && localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if (!this.state.videoMuted) { console.log('Mute camera'); track.enabled = false; this.setState({videoMuted: true}); } } } _resumeVideo() { const localStream = this.props.call.getLocalStreams()[0]; if (localStream && localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if (this.state.videoMuted) { console.log('Resume camera'); track.enabled = true; this.setState({videoMuted: false}); } } } hangup(event) { event.preventDefault(); for (let participant of this.state.participants) { participant.detach(); } this.props.hangup('user_hangup_conference'); } armOverlayTimer() { if (this.props.audioOnly) { return; } + this.setState({callOverlayVisible: true}); - clearTimeout(this.overlayTimer); - this.overlayTimer = setTimeout(() => { - this.setState({callOverlayVisible: false}); - }, 4000); + if (this.state.participants.length > 0) { + clearTimeout(this.overlayTimer); + this.overlayTimer = setTimeout(() => { + this.setState({callOverlayVisible: false}); + }, 5000); + } } showOverlay() { if (this.props.audioOnly) { return; } // if (!this.state.shareOverlayVisible && !this.state.showDrawer && !this.state.showFiles) { // if (!this.state.callOverlayVisible) { this.setState({callOverlayVisible: !this.state.callOverlayVisible}); // } // this.armOverlayTimer(); // } } toggleInviteModal() { this.setState({showInviteModal: !this.state.showInviteModal}); } toggleDrawer() { this.setState({callOverlayVisible: true, showDrawer: !this.state.showDrawer, showFiles: false, showSpeakerSelection: false}); clearTimeout(this.overlayTimer); } toggleFiles() { this.setState({callOverlayVisible: true, showFiles: !this.state.showFiles, showDrawer: false}); clearTimeout(this.overlayTimer); } showFiles() { this.setState({callOverlayVisible: true, showFiles: true, showDrawer: false}); clearTimeout(this.overlayTimer); } inviteParticipants(uris) { this.props.call.inviteParticipants(uris); uris.forEach((uri) => { uri = uri.replace(/ /g, ''); if (this.props.call.localIdentity._uri === uri) { return; } this.postChatSystemMessage(uri + ' invited'); this.invitedParticipants.set(uri, {timestamp: Date.now(), status: 'Invited'}) this.props.saveParticipant(this.props.call.id, this.state.remoteUri, uri); this.lookupContact(uri); }); this.props.finishInvite(); this.forceUpdate() } render() { if (this.props.call === null) { return (); } + //console.log('---- Conference box', this.props.callContact); 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.state.remoteUri.split('@')[0]; - console.log('Render conference', remoteUri); - - // 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( - // - // - // - // ); - // } - // } - - 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; // populate speaker selection list only with participants that have video let speakerSelectionParticipants = []; this.state.participants.forEach((p) => { if (p.streams && p.streams.length > 0) { if (p.streams[0].getVideoTracks().length > 0) { let track = p.streams[0].getVideoTracks()[0]; speakerSelectionParticipants.push(p); } } }); //console.log('Number of possible speakers with video enabled', speakerSelectionParticipants.length); let myself = {id: this.props.call.id, publisherId: this.props.call.id, identity: this.props.call.localIdentity}; let unselectItem = {id: 'none', publisherId: null, identity: {uri: 'none', displayName: 'No speaker'}}; - if (!this.state.showDrawer && speakerSelectionParticipants.length > 0) { - topButtons.push(); - } - speakerSelectionParticipants.push(myself); speakerSelectionParticipants.push(unselectItem); + //console.log('----speakerSelectionParticipants', speakerSelectionParticipants); const floatingButtons = []; - if (this.haveVideo) { + if (!this.state.showDrawer && speakerSelectionParticipants.length > 2 && this.state.videoEnabled) { floatingButtons.push( + + + + + + ); + } + + if (!this.state.isTablet && !this.state.isLandscape) { + floatingButtons.push( + + + + + + ); + } + + if (!this.state.videoEnabled && !this.state.isLandscape) { + floatingButtons.push( + + + + + + ); + } + + if (this.state.videoEnabled) { + floatingButtons.push( + + + + ); } floatingButtons.push( + + + + ); - if (this.haveVideo) { + if (this.state.videoEnabled) { floatingButtons.push( + + + + ); - floatingButtons.push( - - ); + } if (!this.state.reconnectingCall) { floatingButtons.push( + + + + ) - // floatingButtons.push( - // - // - // - // ); } floatingButtons.push( + + + + + ); + + floatingButtons.push( + + + + + + ); + + if (this.props.isLandscape) { + buttons.additional = floatingButtons; + } else { + buttons.additional = []; + } + + buttons.additional.push( + + + + + + ); + + buttons.additional.push( + + + + + ); - buttons.bottom = floatingButtons; const audioParticipants = []; let _contact; let _identity; let participants_uris = []; if (this.props.audioOnly) { _contact = this.foundContacts.get(this.props.call.localIdentity._uri); _identity = {uri: this.props.call.localIdentity._uri, displayName: _contact.displayName, photo: _contact.photo }; participants_uris.push(this.props.call.localIdentity._uri); audioParticipants.push( ); this.state.participants.forEach((p) => { _contact = this.foundContacts.get(p.identity._uri); _identity = {uri: p.identity._uri.indexOf('@guest') > -1 ? 'From the web': p.identity._uri, displayName: (_contact && _contact.displayName != p.identity._displayName) ? _contact.displayName : p.identity._displayName, photo: _contact ? _contact.photo: null }; participants_uris.push(p.identity._uri); let status; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 150) { - status = this.latency.get(p.id) + ' ms delay'; + status = this.latency.get(p.id) + ' ms'; } audioParticipants.push( ); }); const invitedParties = Array.from(this.invitedParticipants.keys()); let alreadyInvitedParticipants = [] let p; invitedParties.forEach((_uri) => { if (participants_uris.indexOf(_uri) > 0) { return; } p = this.invitedParticipants.get(_uri); _contact = this.foundContacts.get(_uri); _identity = {uri: _uri, displayName: (_contact && _contact.displayName ) ? _contact.displayName : _uri, photo: _contact ? _contact.photo: null }; if (p.status != 'No answer') { alreadyInvitedParticipants.push(_uri) } audioParticipants.push( ); }); - const conferenceContainer = this.props.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer; - const audioContainer = this.props.isLandscape ? styles.audioContainerLandscape : styles.audioContainer; - let chatContainer = this.props.isLandscape ? styles.chatContainerLandscape : styles.chatContainer; + const conferenceContainer = this.state.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer; + const audioContainer = this.state.isLandscape ? styles.audioContainerLandscape : styles.audioContainerPortrait; + let chatContainer = this.state.isLandscape ? styles.chatContainerLandscape : styles.chatContainer; if (this.props.audioOnly) { - chatContainer = this.props.isLandscape ? styles.chatContainerLandscapeAudio : styles.chatContainerPortraitAudio; + chatContainer = this.state.isLandscape ? styles.chatContainerLandscapeAudio : styles.chatContainerPortraitAudio; } + let renderMessages = this.state.renderMessages; + renderMessages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); + return ( + {!this.state.keyboardVisible && !this.props.isLandscape ? + + {floatingButtons} + + : null} + {!this.state.keyboardVisible && (this.state.audioView || this.state.isLandscape) ? {audioParticipants} - - - - - + : null} + + {this.state.chatView || this.state.isLandscape ? + + + + : null} {return p.identity.uri})} close={this.toggleInviteModal} room={this.state.remoteUri} defaultDomain = {this.props.defaultDomain} accountId = {this.props.call.localIdentity._uri} notificationCenter = {this.props.notificationCenter} lookupContacts = {this.props.lookupContacts} /> - - + + {drawerParticipants} ); } const participants = []; const drawerParticipants = []; if (this.state.participants.length > 0) { if (this.state.activeSpeakers.findIndex((element) => {return element.id === this.props.call.id}) === -1) { participants.push( ); } } drawerParticipants.push( ); let videos = []; let status = ''; if (this.state.participants.length === 0) { videos.push( ); } else { const activeSpeakers = this.state.activeSpeakers; const activeSpeakersCount = activeSpeakers.length; if (activeSpeakersCount > 0) { activeSpeakers.forEach((p) => { status = ''; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) { - status = this.latency.get(p.id) + ' ms delay'; + status = this.latency.get(p.id) + ' ms'; } if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } videos.push( ); }); this.state.participants.forEach((p) => { status = ''; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) { status = this.latency.get(p.id) + ' ms delay'; } if (this.state.activeSpeakers.indexOf(p) === -1) { participants.push( {}} pauseVideo={true} display={false} status={status} /> ); } drawerParticipants.push( ); }); } else { let vtrack; this.state.participants.forEach((p, idx) => { status = ''; if (this.mediaLost.has(p.id) && this.mediaLost.get(p.id)) { status = 'Muted'; } else if (this.packetLoss.has(p.id) && this.packetLoss.get(p.id) > 3) { if (this.packetLoss.get(p.id) === 100) { status = 'No media'; return; } else { status = this.packetLoss.get(p.id) + '% loss'; } } else if (this.latency.has(p.id) && this.latency.get(p.id) > 100) { status = this.latency.get(p.id) + ' ms'; } if (p.streams && p.streams.length > 0) { if (p.streams[0].getVideoTracks().length > 0) { vtrack = p.streams[0].getVideoTracks()[0]; if (vtrack.muted) { //console.log('Skip muted video of', p.identity.uri); return; } } } // console.log('Added video of', p.identity.uri); videos.push( = 4) || (idx >= 2 && this.props.isTablet === false)} - isLandscape={this.props.isLandscape} + isLandscape={this.state.isLandscape} isTablet={this.props.isTablet} useTwoRows={this.state.participants.length > 2} status={status} /> ); if (idx >= 4 || idx >= 2 && this.props.isTablet === false) { participants.push( ); } drawerParticipants.push( ); }); } } - // let filesDrawerContent = ( - // - // ); - - console.log('We have', videos.length, 'video blocks'); - const currentParticipants = this.state.participants.map((p) => {return p.identity.uri}) const alreadyInvitedParticipants = this.invitedParticipants ? Array.from(this.invitedParticipants.keys()) : []; - const conferenceContainer = this.props.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer; - const audioContainer = this.props.isLandscape ? styles.audioContainerLandscape : styles.audioContainer; - const chatContainer = this.props.isLandscape ? styles.chatContainerLandscape : styles.chatContainer; + const conferenceContainer = this.state.isLandscape ? styles.conferenceContainerLandscape : styles.conferenceContainer; + const chatContainer = this.state.isLandscape ? styles.chatContainerLandscape : styles.chatContainer; + + if (!this.state.isLandscape && this.state.callOverlayVisible) { + buttons.bottom = floatingButtons; + } return ( - + + {this.state.callOverlayVisible ? + : null} + {this.state.chatView || false? : null} - + {videos} {participants} - - - - + + {drawerParticipants} ); } } ConferenceBox.propTypes = { notificationCenter : PropTypes.func.isRequired, call : PropTypes.object, connection : PropTypes.object, hangup : PropTypes.func, saveParticipant : PropTypes.func, saveMessage : PropTypes.func, messages : PropTypes.array, previousParticipants: PropTypes.array, remoteUri : PropTypes.string, generatedVideoTrack : PropTypes.bool, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, isLandscape : PropTypes.bool, isTablet : PropTypes.bool, muted : PropTypes.bool, defaultDomain : PropTypes.string, inFocus : PropTypes.bool, reconnectingCall : PropTypes.bool, audioOnly : PropTypes.bool, initialParticipants : PropTypes.array, terminated : PropTypes.bool, myContacts : PropTypes.object, lookupContacts : PropTypes.func, goBackFunc : PropTypes.func, inviteToConferenceFunc: PropTypes.func, selectedContacts : PropTypes.array, callState : PropTypes.object, callContact : PropTypes.object, - finishInvite : PropTypes.func + finishInvite : PropTypes.func, + account : PropTypes.object, + messages : PropTypes.object, + fileSharingUrl : PropTypes.string }; export default ConferenceBox; diff --git a/app/components/ConferenceHeader.js b/app/components/ConferenceHeader.js index ae61e0e..52c3b6b 100644 --- a/app/components/ConferenceHeader.js +++ b/app/components/ConferenceHeader.js @@ -1,254 +1,246 @@ import React, { useState, useEffect, useRef, Fragment, Component } from 'react'; import { View } from 'react-native'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import moment from 'moment'; import momentFormat from 'moment-duration-format'; import { Text, Appbar, Menu } from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import styles from '../assets/styles/blink/_ConferenceHeader.scss'; class ConferenceHeader extends React.Component { constructor(props) { super(props); autoBind(this); this.state = { call: this.props.call, displayName: this.props.callContact ? this.props.callContact.name : this.props.remoteUri, callState: this.props.call ? this.props.call.state : null, participants: this.props.participants, startTime: this.props.callState ? this.props.callState.startTime : null, reconnectingCall: this.props.reconnectingCall, info: this.props.info, remoteUri: this.props.remoteUri, menuVisible: true } this.duration = null; this.timer = null; this._isMounted = false; this.menuRef = React.createRef(); } componentDidMount() { this._isMounted = true; if (!this.state.call) { return; } if (this.state.call.state === 'established') { this.startTimer(); } this.state.call.on('stateChanged', this.callStateChanged); this.setState({callState: this.state.call.state}); } startTimer() { if (this.timer !== null) { // already armed return; } // TODO: consider using window.requestAnimationFrame const startTime = this.state.startTime || new Date(); this.timer = setInterval(() => { const duration = moment.duration(new Date() - startTime); if (this.duration > 3600) { this.duration = duration.format('hh:mm:ss', {trim: false}); } else { this.duration = duration.format('mm:ss', {trim: false}); } if (this.props.show) { this.forceUpdate(); } }, 1000); } componentWillUnmount() { this._isMounted = false; if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (!this._isMounted) { return; } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } if (nextProps.call !== null && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call}); } this.setState({info: nextProps.info, remoteUri: nextProps.remoteUri, displayName: nextProps.callContact ? nextProps.callContact.name : nextProps.remoteUri, startTime: nextProps.callState ? nextProps.callState.startTime : null, participants: nextProps.participants}); } callStateChanged(oldState, newState, data) { if (newState === 'established' && this._isMounted && !this.props.terminated) { this.startTimer(); } if (newState === 'terminated') { if (this.state.call) { this.state.call.removeListener('stateChanged', this.callStateChanged); } clearTimeout(this.timer); this.duration = null; this.timer = null; } if (!this._isMounted) { return; } this.setState({callState: newState}); } goBack() { - console.log('Go back to home from conference'); this.props.goBackFunc(); } handleMenu(event) { console.log('handle conference Menu', event); switch (event) { case 'back': this.goBack(); break; case 'invite': this.props.inviteToConferenceFunc(); break; case 'share': this.props.toggleInviteModal(); break; default: break; } this.setState({menuVisible: false}); } render() { + //console.log('render conf header lanscape =', this.props.isLandscape); + let videoHeader; let callButtons; if (this.props.terminated) { clearTimeout(this.timer); this.duration = null; this.timer = null; } - if (this.props.show) { - const room = this.state.remoteUri.split('@')[0]; - let displayName = this.state.displayName || 'Conference: ' + room; - let callDetail; - - if (this.state.reconnectingCall) { - callDetail = 'Reconnecting call...'; - } else if (this.state.terminated) { - callDetail = 'Conference ended'; - } else if (this.duration) { - callDetail = (this.props.isTablet ? 'Duration: ' : '') + this.duration; - if (this.state.participants > 0) { - callDetail = callDetail + ' - ' + this.state.participants + ' participant' + (this.state.participants > 1 ? 's' : ''); - } else { - callDetail = callDetail + ' and nobody joined yet'; - } - } - - if (this.state.info) { - callDetail = callDetail + ' - ' + this.state.info; + const room = this.state.remoteUri.split('@')[0]; + let displayName = (this.state.displayName && this.state.displayName !== this.state.remoteUri) ? this.state.displayName : room; + let callDetail; + + if (this.state.reconnectingCall) { + callDetail = 'Reconnecting call...'; + } else if (this.state.terminated) { + callDetail = 'Conference ended'; + } else if (this.duration) { + callDetail = (this.props.isTablet ? 'Duration: ' : '') + this.duration; + if (this.state.participants > 0) { + callDetail = callDetail + ' - ' + this.state.participants + ' participant' + (this.state.participants > 1 ? 's' : ''); + } else { + callDetail = callDetail + ' and nobody joined yet'; } + } - videoHeader = ( - - {this.goBack()}} /> - - {this.props.audioOnly ? null : this.props.buttons.top.right} - - this.setState({menuVisible: !this.state.menuVisible})} - anchor={ - this.setState({menuVisible: !this.state.menuVisible})} - /> - } - > - this.handleMenu('back')} title="Go back..."/> - this.handleMenu('invite')} icon="account-plus" title="Invite contacts"/> - this.handleMenu('share')} icon="share-variant" title="Share link..." /> - - - - ); - - callButtons = ( - - {this.props.buttons.bottom} - - ); + if (this.state.info) { + callDetail = callDetail + ' - ' + this.state.info; } return ( - - {videoHeader} - {callButtons} - + + + {this.goBack()}} /> + + {this.props.buttons.additional} + + + {this.props.buttons.bottom} + ); } } +/* + + this.setState({menuVisible: !this.state.menuVisible})} + anchor={ + this.setState({menuVisible: !this.state.menuVisible})} + /> + } + > + this.handleMenu('back')} title="Go back..."/> + this.handleMenu('invite')} icon="account-plus" title="Invite contacts"/> + this.handleMenu('share')} icon="share-variant" title="Share link..." /> + +*/ ConferenceHeader.propTypes = { show: PropTypes.bool.isRequired, remoteUri: PropTypes.string.isRequired, call: PropTypes.object, isTablet: PropTypes.bool, + isLandscape: PropTypes.bool, participants: PropTypes.number, buttons: PropTypes.object.isRequired, reconnectingCall: PropTypes.bool, audioOnly: PropTypes.bool, terminated: PropTypes.bool, info: PropTypes.string, callContact: PropTypes.object, goBackFunc: PropTypes.func, toggleInviteModal: PropTypes.func, inviteToConferenceFunc: PropTypes.func, callState: PropTypes.object }; export default ConferenceHeader; diff --git a/app/components/ConferenceModal.js b/app/components/ConferenceModal.js index 343a66f..aad9d71 100644 --- a/app/components/ConferenceModal.js +++ b/app/components/ConferenceModal.js @@ -1,311 +1,320 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { View, TouchableOpacity, FlatList } from 'react-native'; import Autocomplete from 'react-native-autocomplete-input'; import { Portal, Dialog, Button, Text, TextInput, Surface, Chip} from 'react-native-paper'; import KeyboardAwareDialog from './KeyBoardAwareDialog'; const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog; import config from '../config'; import styles from '../assets/styles/blink/_ConferenceModal.scss'; class ConferenceModal extends Component { constructor(props) { super(props); let targetUri = props.targetUri ? props.targetUri.split('@')[0] : ''; this.state = { targetUri: targetUri, myInvitedParties: props.myInvitedParties, selectedContact: props.selectedContact, participants: [], filteredContacts: [], searching: false, roomUrl: config.publicUrl + '/conference/' + targetUri }; this.handleConferenceTargetChange = this.handleConferenceTargetChange.bind(this); this.onHide = this.onHide.bind(this); this.joinAudio = this.joinAudio.bind(this); this.joinVideo = this.joinVideo.bind(this); } componentDidMount() { this.handleConferenceTargetChange(this.state.targetUri); } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { let uri = ''; if (nextProps.targetUri) { uri = nextProps.targetUri.split('@')[0]; } this.setState({targetUri: uri, myInvitedParties: nextProps.myInvitedParties, selectedContact: nextProps.selectedContact, participants: nextProps.participants }); this.handleConferenceTargetChange(uri); } handleConferenceTargetChange(value) { let targetUri = value; let participants = []; let sanitizedParticipants = []; let username; let domain; if (targetUri) { let uri = `${targetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`; uri = uri.split('@')[0]; if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(uri)) { participants = this.state.myInvitedParties[uri]; } else if (this.state.selectedContact && this.state.selectedContact.participants) { participants = this.state.selectedContact.participants; } participants.forEach((item) => { item = item.trim().toLowerCase(); if (item.length === 0) { return; } const username = item.split('@')[0]; if (username.length === 0) { return; } const domain = item.split('@')[1]; if (item === this.props.accountId) { return; } if (item.indexOf('@') === -1) { sanitizedParticipants.push(item); } else { if (domain === this.props.defaultDomain) { sanitizedParticipants.push(username); } else { sanitizedParticipants.push(item); } } }); } this.setState({targetUri: targetUri, searching: false, roomUrl: targetUri ? config.publicUrl + '/conference/' + targetUri: '', participants: sanitizedParticipants }); } joinAudio(event) { event.preventDefault(); if (!this.state.targetUri) { return; } const uri = `${this.state.targetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`; const participants = []; if (this.state.participants) { this.state.participants.forEach((item) => { item = item.trim().toLowerCase().replace(' ', ''); if (item.length > 1) { if (item.indexOf('@') === -1) { item = `${item}@${this.props.defaultDomain}`; } participants.push(item); } }); } this.props.handleConferenceCall(uri.toLowerCase(), {audio: true, video: false, participants: participants}); } joinVideo(event) { event.preventDefault(); const uri = `${this.state.targetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`; const participants = []; if (this.state.participants) { this.state.participants.forEach((item) => { item = item.trim().toLowerCase().replace(' ', ''); if (item.indexOf('@') === -1) { item = `${item}@${this.props.defaultDomain}`; } participants.push(item); }); } this.props.handleConferenceCall(uri.toLowerCase(), {audio: true, video: true, participants: participants}); } onHide() { this.props.handleConferenceCall(null); } isValidUri(uri) { if (uri === this.props.accountId) { return false; } let username = uri.split('@')[0]; let domain = uri.split('@')[1]; if (username.match(/^(\+?)([\-|\d]+)$/) && !domain) { return false; } if (domain) { if (domain.indexOf('yahoo') > -1) { return false; } if (domain.indexOf('icloud') > -1) { return false; } if (domain.indexOf('gmail') > -1) { return false; } } return true; } removeParticipant(uri) { let participants = this.state.participants; let idx = participants.indexOf(uri); if (idx > -1) { - console.log('Remove', uri, 'from', participants); + //console.log('Remove', uri, 'from', participants); participants.splice(idx, 1); this.setState({participants: participants}); } } isPhoneNumber(uri) { let username = uri.split('@')[0]; let domain = uri.split('@')[1]; if (username.match(/^(\+|0)(\d+)$/) && !domain) { return true; } return false; } updateParticipants(contact) { let participants = this.state.participants; let els = participants; if (els.length === 1) { participants = contact.uri; } else { els.pop(-1); els.push(contact.uri); participants = els.toString(','); } this.setState({participants: participants.replace(/,/g, ", "), filteredContacts: [], searching: false}); } render() { const validUri = this.state.targetUri.length > 0 && this.state.targetUri.indexOf('@') === -1; let data = []; if (this.state.participants) { this.state.participants.forEach((p) => { data.push({key: p.trim()}); }); } return ( Join conference + {!this.state.selectedContact ? {this.handleConferenceTargetChange(text);}} name="uri" required defaultValue={this.state.targetUri} /> + : + + {this.state.targetUri} + + } + {this.state.participants.length > 0 ? Invited participants: this.removeParticipant(item.key)}> {item.key} } /> : null} Others can be invited once the conference starts - - ); } } ConferenceModal.propTypes = { show: PropTypes.bool.isRequired, handleConferenceCall: PropTypes.func.isRequired, myInvitedParties: PropTypes.object, accountId: PropTypes.string, selectedContact: PropTypes.object, targetUri: PropTypes.string.isRequired, defaultDomain: PropTypes.string, lookupContacts: PropTypes.func }; export default ConferenceModal; diff --git a/app/components/ContactCard.js b/app/components/ContactCard.js index 88aa5f6..8504ac4 100644 --- a/app/components/ContactCard.js +++ b/app/components/ContactCard.js @@ -1,405 +1,417 @@ import React, { Component, Fragment} from 'react'; import { View, SafeAreaView, FlatList } from 'react-native'; import { Badge } from 'react-native-elements' 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, Menu} from 'react-native-paper'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import uuid from 'react-native-uuid'; import styles from '../assets/styles/blink/_ContactCard.scss'; import UserIcon from './UserIcon'; import { GiftedChat } from 'react-native-gifted-chat' import {Gravatar, GravatarApi} from 'react-native-gravatar'; import utils from '../utils'; function toTitleCase(str) { return str.replace( /\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } ); } const Item = ({ nr, uri, name }) => ( {name !== uri? {name} ({uri}) : {uri} } ); const renderItem = ({ item }) => ( ); function isIp(ipaddress) { if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) { return (true) } return (false) } class ContactCard extends Component { constructor(props) { super(props); autoBind(this); this.state = { id: this.props.contact.id, contact: this.props.contact, invitedParties: this.props.invitedParties, orientation: this.props.orientation, isTablet: this.props.isTablet, isLandscape: this.props.isLandscape, favorite: (this.props.contact.tags.indexOf('favorite') > -1)? true : false, blocked: (this.props.contact.tags.indexOf('blocked') > -1)? true : false, confirmRemoveFavorite: false, confirmPurgeChat: false, messages: this.props.messages, unread: this.props.unread, chat: this.props.chat, - pinned: this.props.pinned + pinned: this.props.pinned, + fontScale: this.props.fontScale } this.menuRef = React.createRef(); } UNSAFE_componentWillReceiveProps(nextProps) { this.setState({ id: nextProps.contact.id, contact: nextProps.contact, invitedParties: nextProps.invitedParties, isLandscape: nextProps.isLandscape, orientation: nextProps.orientation, favorite: (nextProps.contact.tags.indexOf('favorite') > -1)? true : false, blocked: (nextProps.contact.tags.indexOf('blocked') > -1)? true : false, chat: nextProps.chat, pinned: nextProps.pinned, messages: nextProps.messages, - unread: nextProps.unread + unread: nextProps.unread, + fontScale: nextProps.fontScale }); } shouldComponentUpdate(nextProps) { //https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b return true; } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } toggleBlocked() { this.props.toggleBlocked(this.state.contact.uri); } setBlockedDomain() { let newBlockedState = this.props.toggleBlocked('@' + this.state.contact.uri.split('@')[1]); this.setState({blocked: newBlockedState}); } undo() { this.setState({confirmRemoveFavorite: false, confirmDeleteChat: false, action: null}); } onSendMessage(messages) { messages.forEach((message) => { // TODO send messages using account API }); this.setState({messages: GiftedChat.append(this.state.messages, messages)}); } setTargetUri(uri, contact) { this.props.setTargetUri(uri, this.state.contact); } renderChatComposer () { return null; } render () { let showActions = this.state.contact.showActions && this.state.contact.tags.indexOf('test') === -1 && this.state.contact.tags !== ["synthetic"]; let tags = this.state.contact ? this.state.contact.tags : []; let uri = this.state.contact.uri; let username = uri.split('@')[0]; let domain = uri.split('@')[1]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); let name = this.state.contact.name; if (this.state.contact.organization) { name = name + ' - ' + this.state.contact.organization; } - //console.log('Render Contact', this.state.contact); + //console.log('Render Contact', this.state.contact.uri, this.state.fontScale); let showBlockButton = !this.state.contact.conference && !this.state.chat; let showBlockDomainButton = false; let blockTextbutton = 'Block'; let blockDomainTextbutton = 'Block domain'; + let contact_ts = ''; let participantsData = []; if (this.state.favorite) { if (!this.state.blocked) { showBlockButton = false; } } if (tags.indexOf('test') > -1) { showBlockButton = false; } if (name === 'Myself') { showBlockButton = false; } if (this.state.blocked) { blockTextbutton = 'Unblock'; } let color = {}; let title = name || username; let subtitle = uri; let description = 'No calls or messages'; + var todayStart = new Date(); + todayStart.setHours(0,0,0,0); + if (this.state.contact.timestamp) { description = moment(this.state.contact.timestamp).format('MMM D HH:mm'); + if (this.state.contact.timestamp > todayStart) { + contact_ts = moment(this.state.contact.timestamp).format('HH:mm'); + } else { + contact_ts = moment(this.state.contact.timestamp).format('DD-MM'); + } } if (name === uri) { title = toTitleCase(username); } if (isPhoneNumber && isIp(domain)) { title = 'Tel ' + username; subtitle = 'From @' + domain; showBlockDomainButton = true; } if (utils.isAnonymous(uri)) { //uri = 'anonymous@anonymous.invalid'; if (uri.indexOf('@guest.') > -1) { subtitle = 'From the Web'; } else { name = 'Anonymous'; } showBlockDomainButton = true; if (!this.state.blocked) { showBlockButton = false; } blockDomainTextbutton = 'Block Web callers'; } if (!username || username.length === 0) { if (isIp(domain)) { title = 'IP domain'; } else if (domain.indexOf('guest.') > -1) { title = 'Calls from the Web'; } else { title = 'Domain'; } } let cardContainerClass = styles.portraitContainer; if (this.state.isTablet) { cardContainerClass = (this.state.orientation === 'landscape') ? styles.cardLandscapeTabletContainer : styles.cardPortraitTabletContainer; } else { cardContainerClass = (this.state.orientation === 'landscape') ? styles.cardLandscapeContainer : styles.cardPortraitContainer; } - let cardHeight = 85; + let cardHeight = this.state.fontScale <= 1 ? 75 : 70; let duration; if (this.state.contact.tags.indexOf('history') > -1) { duration = moment.duration(this.state.contact.lastCallDuration, 'seconds').format('HH:mm:ss', {trim: false}); if (this.state.contact.direction === 'incoming' && this.state.contact.lastCallDuration === 0) { duration = 'missed'; } else if (this.state.contact.direction === 'outgoing' && this.state.contact.lastCallDuration === 0) { duration = 'cancelled'; } } if (this.state.contact.conference) { let participants = this.state.contact.participants; if (this.state.invitedParties && this.state.invitedParties.length > 0 ) { participants = this.state.invitedParties; } 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, 'uri', participant); dn = contact_obj ? contact_obj.name : participant; _item = {nr: i, id: uuid.v4(), uri: participant, name: dn}; participantsData.push(_item); i = i + 1; }); } else { subtitle = 'With no participants'; } } if (!name) { title = uri; } if (duration === 'missed') { subtitle = 'Last call missed'; } else if (duration === 'cancelled') { subtitle = 'Last call cancelled'; } else { if (duration) { subtitle = 'Last call ' + duration ; } } if (title.indexOf('@videoconference') > -1) { title = name || username; } if (duration && duration !== "00:00:00") { let media = 'Audio call'; if (this.state.contact.lastCallMedia.indexOf('video') > -1) { media = 'Video call'; } description = description + ' (' + media + ' ' + duration + ')'; } const container = this.state.isLandscape ? styles.containerLandscape : styles.containerPortrait; const chatContainer = this.state.isLandscape ? styles.chatLandscapeContainer : styles.chatPortraitContainer; - let showSubtitle = (showActions || this.state.isTablet || !description); let label = this.state.contact.label ? (" (" +this.state.contact.label + ")" ) : ''; if (this.state.contact.lastMessage) { subtitle = this.state.contact.lastMessage.split("\n")[0]; //description = description + ': ' + this.state.contact.lastMessage; } else { subtitle = subtitle + label; } let unread = (this.state.contact && this.state.contact.unread) ? this.state.contact.unread.length : 0; return ( {this.setTargetUri(uri, this.state.contact)}} > { this.state.contact.photo || ! this.state.contact.email ? : } {title} {subtitle} - + {this.state.fontScale <= 1 ? {this.state.contact.direction ? : null} {description} - + : null} {participantsData && participantsData.length && showActions && false? item.id} key={item => item.id} /> : null} + {contact_ts} { this.state.contact.selected ? - + : null } {unread ? - + : null } {showActions && false ? {showBlockButton? : null} {showBlockDomainButton? : null} : null} ); } } ContactCard.propTypes = { id : PropTypes.string, contact : PropTypes.object, setTargetUri : PropTypes.func, chat : PropTypes.bool, orientation : PropTypes.string, isTablet : PropTypes.bool, isLandscape : PropTypes.bool, contacts : PropTypes.array, defaultDomain : PropTypes.string, accountId : PropTypes.string, favoriteUris : PropTypes.array, messages : PropTypes.array, pinned : PropTypes.bool, unread : PropTypes.array, toggleBlocked : PropTypes.func, - sendPublicKey : PropTypes.func + sendPublicKey : PropTypes.func, + fontScale : PropTypes.integer }; export default ContactCard; diff --git a/app/components/ContactsListBox.js b/app/components/ContactsListBox.js index e1f8001..2f243ff 100644 --- a/app/components/ContactsListBox.js +++ b/app/components/ContactsListBox.js @@ -1,935 +1,952 @@ import React, { Component} from 'react'; import autoBind from 'auto-bind'; import PropTypes from 'prop-types'; import { Clipboard, SafeAreaView, View, FlatList, Text } from 'react-native'; import ContactCard from './ContactCard'; import utils from '../utils'; import DigestAuthRequest from 'digest-auth-request'; import uuid from 'react-native-uuid'; import { GiftedChat, IMessage, Bubble } from 'react-native-gifted-chat' import MessageInfoModal from './MessageInfoModal'; import ShareMessageModal from './ShareMessageModal'; import CustomChatActions from './ChatActions'; import moment from 'moment'; import momenttz from 'moment-timezone'; import styles from '../assets/styles/blink/_ContactsListBox.scss'; class ContactsListBox extends Component { constructor(props) { super(props); autoBind(this); this.chatListRef = React.createRef(); + let renderMessages = []; + if (this.props.selectedContact) { + let uri = this.props.selectedContact.uri; + if (uri in this.props.messages) { + renderMessages = this.props.messages[uri]; + renderMessages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); + } + } + this.state = { accountId: this.props.account ? this.props.account.id : null, password: this.props.password, targetUri: this.props.selectedContact ? this.props.selectedContact.uri : this.props.targetUri, favoriteUris: this.props.favoriteUris, blockedUris: this.props.blockedUris, isRefreshing: false, isLandscape: this.props.isLandscape, contacts: this.props.contacts, myInvitedParties: this.props.myInvitedParties, refreshHistory: this.props.refreshHistory, selectedContact: this.props.selectedContact, myContacts: this.props.myContacts, messages: this.props.messages, - renderMessages: [], + renderMessages: GiftedChat.append(renderMessages, []), chat: this.props.chat, pinned: false, showMessageModal: false, message: null, showShareMessageModal: false, inviteContacts: this.props.inviteContacts, shareToContacts: this.props.shareToContacts, selectedContacts: this.props.selectedContacts, pinned: this.props.pinned, filter: this.props.filter, periodFilter: this.props.periodFilter, scrollToBottom: true, messageZoomFactor: this.props.messageZoomFactor, isTyping: false, - isLoadingEarlier: false + isLoadingEarlier: false, + fontScale: this.props.fontScale, + call: this.props.call } this.ended = false; } componentDidMount() { this.ended = false; } componentWillUnmount() { this.ended = true; } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { - if (this.ended) { return; } if (nextProps.myInvitedParties !== this.state.myInvitedParties) { this.setState({myInvitedParties: nextProps.myInvitedParties}); } if (nextProps.contacts !== this.state.contacts) { this.setState({contacts: nextProps.contacts}); } if (nextProps.favoriteUris !== this.state.favoriteUris) { this.setState({favoriteUris: nextProps.favoriteUris}); } if (nextProps.blockedUris !== this.state.blockedUris) { this.setState({blockedUris: nextProps.blockedUris}); } if (nextProps.account !== null && nextProps.account !== this.props.account) { this.setState({accountId: nextProps.account.id}); } if (nextProps.refreshHistory !== this.state.refreshHistory) { this.setState({refreshHistory: nextProps.refreshHistory}); this.getServerHistory(); } if (nextProps.messageZoomFactor !== this.state.messageZoomFactor) { this.setState({scrollToBottom: false, messageZoomFactor: nextProps.messageZoomFactor}); } if (nextProps.selectedContact !== this.state.selectedContact) { this.setState({selectedContact: nextProps.selectedContact}); if (nextProps.selectedContact) { this.setState({scrollToBottom: true}); - this.getMessages(nextProps.selectedContact); + if (Object.keys(this.state.messages).indexOf(nextProps.selectedContact.uri) === -1) { + this.props.getMessages(nextProps.selectedContact.uri); + } } }; if (nextProps.myContacts !== this.state.myContacts) { this.setState({myContacts: nextProps.myContacts}); }; - if (this.state.messages) { + if (nextProps.selectedContact) { let renderMessages = []; - if (this.state.selectedContact) { - let uri = this.state.selectedContact.uri; - - if (nextProps.messages && nextProps.messages.hasOwnProperty(uri)) { - renderMessages = nextProps.messages[uri]; - if (this.state.renderMessages.length !== renderMessages.length) { - this.setState({isLoadingEarlier: false}); - this.props.confirmRead(uri); - if (this.state.renderMessages.length > 0 && renderMessages.length > 0) { - let last_message_ts = this.state.renderMessages[0].createdAt; - if (renderMessages[0].createdAt > last_message_ts) { - this.setState({scrollToBottom: true}); - } + let uri = nextProps.selectedContact.uri; + + if (uri in nextProps.messages) { + renderMessages = nextProps.messages[uri]; + if (this.state.renderMessages.length !== renderMessages.length) { + this.setState({isLoadingEarlier: false}); + this.props.confirmRead(uri); + if (this.state.renderMessages.length > 0 && renderMessages.length > 0) { + let last_message_ts = this.state.renderMessages[0].createdAt; + if (renderMessages[0].createdAt > last_message_ts) { + this.setState({scrollToBottom: true}); } } } + } - if (renderMessages !== this.state.renderMessages) { - renderMessages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); - this.setState({renderMessages: GiftedChat.append(renderMessages, [])}); - if (!this.state.scrollToBottom && renderMessages.length > 0) { - //console.log('Scroll to first message'); - //this.scrollToMessage(0); - } + if (renderMessages !== this.state.renderMessages) { + renderMessages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); + this.setState({renderMessages: GiftedChat.append(renderMessages, [])}); + if (!this.state.scrollToBottom && renderMessages.length > 0) { + //console.log('Scroll to first message'); + //this.scrollToMessage(0); } - } - } else { - this.setState({renderMessages: []}); } this.setState({isLandscape: nextProps.isLandscape, chat: nextProps.chat, + fontScale: nextProps.fontScale, filter: nextProps.filter, + call: nextProps.call, password: nextProps.password, showMessageModal: nextProps.showMessageModal, - message: nextProps.message, + messages: nextProps.messages, inviteContacts: nextProps.inviteContacts, shareToContacts: nextProps.shareToContacts, selectedContacts: nextProps.selectedContacts, pinned: nextProps.pinned, isTyping: nextProps.isTyping, periodFilter: nextProps.periodFilter, targetUri: nextProps.selectedContact ? nextProps.selectedContact.uri : nextProps.targetUri }); if (nextProps.isTyping) { setTimeout(() => { this.setState({isTyping: false}); }, 3000); } } renderCustomActions = props => ( ) onSendFromUser() { console.log('On send from user...'); } - getMessages(contact) { - if (!contact) { - return; - } - this.props.getMessages(contact.uri); - } - setTargetUri(uri, contact) { //console.log('Set target uri uri in history list', uri); this.props.setTargetUri(uri, contact); } setFavoriteUri(uri) { return this.props.setFavoriteUri(uri); } setBlockedUri(uri) { return this.props.setBlockedUri(uri); } renderItem(object) { let item = object.item || object; let invitedParties = []; let uri = item.uri; let myDisplayName; let username = uri.split('@')[0]; if (this.state.myContacts && this.state.myContacts.hasOwnProperty(uri)) { myDisplayName = this.state.myContacts[uri].name; } if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(username)) { invitedParties = this.state.myInvitedParties[username]; } if (myDisplayName) { if (item.name === item.uri || item.name !== myDisplayName) { item.name = myDisplayName; } } return( ); } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } closeMessageModal() { this.setState({showMessageModal: false, message: null}); } loadEarlierMessages() { //console.log('Load earlier messages...'); this.setState({scrollToBottom: false, isLoadingEarlier: true}); this.props.loadEarlierMessages(); } onSendWithFile(selectedFile) { let uri; if (!this.state.selectedContact) { if (this.state.targetUri && this.state.chat) { let contacts = this.searchedContact(this.state.targetUri); if (contacts.length !== 1) { return; } uri = contacts[0].uri; } else { return; } } else { uri = this.state.selectedContact.uri; } let fileData = { name: selectedFile.name, type: selectedFile.type, size: selectedFile.size, uri: selectedFile.uri }; console.log('Sending file', fileData); //this.props.sendMessage(uri, message); } onSendMessage(messages) { let uri; if (!this.state.selectedContact) { if (this.state.targetUri && this.state.chat) { let contacts = this.searchedContact(this.state.targetUri); if (contacts.length !== 1) { return; } uri = contacts[0].uri; } else { return; } } else { uri = this.state.selectedContact.uri; } messages.forEach((message) => { /* sent: true, // Mark the message as received, using two tick received: true, // Mark the message as pending with a clock loader pending: true, */ this.props.sendMessage(uri, message); }); let renderMessages = this.state.renderMessages; renderMessages.sort((a, b) => (a.createdAt < b.createdAt) ? 1 : -1); Array.prototype.push.apply(messages, renderMessages); this.setState({renderMessages: GiftedChat.append(messages, [])}); } searchedContact(uri, contact=null) { if (uri.indexOf(' ') > -1) { return []; } const item = this.props.newContactFunc(uri.toLowerCase(), null, {src: 'search_contact'}); if (!item) { return []; } if (contact) { item.name = contact.name; item.photo = contact.photo; } return [item]; } getServerHistory() { if (!this.state.accountId) { return; } if (this.ended || !this.state.accountId || this.state.isRefreshing) { return; } console.log('Get server history...'); this.setState({isRefreshing: true}); let history = []; let localTime; let getServerCallHistory = new DigestAuthRequest( 'GET', `${this.props.config.serverCallHistoryUrl}?action=get_history&realm=${this.state.accountId.split('@')[1]}`, this.state.accountId.split('@')[0], this.state.password ); // Disable logging getServerCallHistory.loggingOn = false; getServerCallHistory.request((data) => { if (data.success !== undefined && data.success === false) { console.log('Error getting call history from server', data.error_message); return; } if (data.received) { data.received.map(elem => {elem.direction = 'incoming'; return elem}); history = history.concat(data.received); } if (data.placed) { data.placed.map(elem => {elem.direction = 'outgoing'; return elem}); history = history.concat(data.placed); } history.sort((a, b) => (a.startTime < b.startTime) ? 1 : -1) if (history) { const known = []; history = history.filter((elem) => { elem.conference = false; elem.id = uuid.v4(); if (!elem.tags) { elem.tags = []; } if (elem.remoteParty.indexOf('@conference.') > -1) { return null; } if (known.indexOf(elem.uri) > -1) { return null; } known.push(elem.uri); elem.uri = elem.remoteParty.toLowerCase(); let username = elem.uri.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); let contact_obj; if (elem.displayName) { elem.name = elem.displayName; } else { elem.name = elem.uri; } if (this.state.contacts) { if (isPhoneNumber) { contact_obj = this.findObjectByKey(this.state.contacts, 'uri', username); } else { contact_obj = this.findObjectByKey(this.state.contacts, 'uri', elem.uri); } if (contact_obj) { elem.name = contact_obj.name; elem.photo = contact_obj.photo; elem.label = contact_obj.label; if (isPhoneNumber) { elem.uri = username; } // TODO update icon here } else { elem.photo = null; } } if (elem.uri.indexOf('@guest.') > -1) { elem.uri = elem.name.toLowerCase().replace(/ /g, '') + '@' + elem.uri.split('@')[1]; } if (elem.remoteParty.indexOf('@videoconference.') > -1) { elem.conference = true; elem.media = ['audio', 'video', 'chat']; } if (elem.uri === this.state.accountId) { elem.name = this.props.myDisplayName || 'Myself'; } if (!elem.media || !Array.isArray(elem.media)) { elem.media = ['audio']; } if (elem.timezone !== undefined) { localTime = momenttz.tz(elem.startTime, elem.timezone).toDate(); elem.startTime = localTime; elem.timestamp = localTime; localTime = momenttz.tz(elem.stopTime, elem.timezone).toDate(); elem.stopTime = localTime; } if (elem.direction === 'incoming' && elem.duration === 0) { elem.tags.push('missed'); } return elem; }); this.props.saveHistory(history); if (this.ended) { return; } this.setState({isRefreshing: false}); } }, (errorCode) => { console.log('Error getting call history from server', errorCode); }); this.setState({isRefreshing: false}); } matchContact(contact, filter='', tags=[]) { if (!contact) { return false; } if (tags.indexOf('conference') > -1 && contact.conference) { return true; } if (tags.length > 0 && !tags.some(item => contact.tags.includes(item))) { return false; } if (contact.name && contact.name.toLowerCase().indexOf(filter.toLowerCase()) > -1) { return true; } if (contact.uri.toLowerCase().startsWith(filter.toLowerCase())) { return true; } if (!this.state.selectedContact && contact.conference && contact.metadata && filter.length > 2 && contact.metadata.indexOf(filter) > -1) { return true; } return false; } noChatInputToolbar () { return null; } onLongMessagePress(context, currentMessage) { if (currentMessage && currentMessage.text) { let options = [] options.push('Copy'); options.push('Delete'); const showResend = currentMessage.failed; if (this.state.targetUri.indexOf('@videoconference') === -1) { if (currentMessage.direction === 'outgoing') { if (showResend) { options.push('Resend') } } } if (currentMessage.pinned) { options.push('Unpin'); } else { options.push('Pin'); } options.push('Info'); options.push('Share'); options.push('Cancel'); let l = options.length - 1; context.actionSheet().showActionSheetWithOptions({options, l}, (buttonIndex) => { let action = options[buttonIndex]; if (action === 'Copy') { Clipboard.setString(currentMessage.text); } else if (action === 'Delete') { this.props.deleteMessage(currentMessage._id, this.state.targetUri); } else if (action === 'Pin') { this.props.pinMessage(currentMessage._id); } else if (action === 'Unpin') { this.props.unpinMessage(currentMessage._id); } else if (action === 'Info') { this.setState({message: currentMessage, showMessageModal: true}); } else if (action === 'Share') { this.setState({message: currentMessage, showShareMessageModal: true}); } else if (action === 'Resend') { this.props.reSendMessage(currentMessage, this.state.targetUri); } }); } }; shouldUpdateMessage(props, nextProps) { return true; } toggleShareMessageModal() { this.setState({showShareMessageModal: !this.state.showShareMessageModal}); } renderMessageBubble (props) { let rightColor = '#0084ff'; let leftColor = '#f0f0f0'; if (props.currentMessage.failed) { rightColor = 'red'; } else { if (props.currentMessage.pinned) { rightColor = '#2ecc71'; leftColor = '#2ecc71'; } } return ( ) } scrollToMessage(id) { //console.log('scrollToMessage', id); //https://github.com/FaridSafi/react-native-gifted-chat/issues/938 this.chatListRef.current?._messageContainerRef?.current?.scrollToIndex({ animated: true, index: id }); } get showChat() { if (this.props.selectedContact && this.props.selectedContact.tags && this.props.selectedContact.tags.indexOf('blocked') > -1) { return false; } let username = this.state.targetUri ? this.state.targetUri.split('@')[0] : null; let isPhoneNumber = username ? username.match(/^(\+|0)(\d+)$/) : false; if (isPhoneNumber) { return false; } if (this.props.selectedContact) { return true; } return false; } render() { let searchExtraItems = []; let items = []; let matchedContacts = []; let messages = this.state.renderMessages; let contacts = []; Object.keys(this.state.myContacts).forEach((uri) => { contacts.push(this.state.myContacts[uri]); }); - //console.log('--- Render contacts with selected contact', this.state.selectedContact ? this.state.selectedContact.uri: null); + //console.log('--- Render contacts with call', this.state.call); //console.log('--- Render contacts with filter', this.state.filter, 's c', this.state.selectedContact, this.state.inviteContacts); let chatInputClass; - if (this.state.selectedContact && this.state.selectedContact.uri.indexOf('@videoconference') > -1) { - chatInputClass = this.noChatInputToolbar; + if (this.state.selectedContact) { + if (this.state.selectedContact.uri.indexOf('@videoconference') > -1) { + if (this.state.call) { + if (this.state.call.remoteIdentity.uri !== this.state.selectedContact.uri) { + chatInputClass = this.noChatInputToolbar; + } + } else { + chatInputClass = this.noChatInputToolbar; + } + } } else if (!this.state.chat) { chatInputClass = this.noChatInputToolbar; } if (!this.state.selectedContact && this.state.filter) { items = contacts.filter(contact => this.matchContact(contact, this.state.targetUri, [this.state.filter])); } else { items = contacts.filter(contact => this.matchContact(contact, this.state.targetUri)); searchExtraItems = searchExtraItems.concat(this.state.contacts); if (this.state.targetUri && this.state.targetUri.length > 2 && !this.state.selectedContact && !this.state.inviteContacts) { matchedContacts = searchExtraItems.filter(contact => this.matchContact(contact, this.state.targetUri)); } else if (this.state.selectedContact && this.state.selectedContact.type === 'contact') { matchedContacts.push(this.state.selectedContact); } else if (this.state.selectedContact) { items = [this.state.selectedContact]; } items = items.concat(matchedContacts); } if (this.state.targetUri) { items = items.concat(this.searchedContact(this.state.targetUri, this.state.selectedContact)); } if (this.state.filter && this.state.targetUri) { items = contacts.filter(contact => this.matchContact(contact, this.state.targetUri)); } const known = []; items = items.filter((elem) => { if (this.state.shareToContacts && elem.tags.indexOf('test') > -1) { return; } if (this.state.inviteContacts && elem.tags.indexOf('conference') > -1 ) { return; } if (this.state.shareToContacts && elem.tags.indexOf('chat') === -1) { return; } + if (this.state.shareToContacts && elem.uri === this.state.accountId) { + return; + } + if (this.state.accountId === elem.uri && elem.tags.length === 0) { return; } if (this.state.shareToContacts && elem.uri.indexOf('@') === -1) { return; } if (known.indexOf(elem.uri) <= -1) { known.push(elem.uri); return elem; } }); items.forEach((item) => { item.showActions = false; if (item.uri.indexOf('@videoconference.') === -1) { item.conference = false; } else { item.conference = true; } if (this.state.selectedContacts && this.state.selectedContacts.indexOf(item.uri) > -1) { item.selected = true; } else { item.selected = false; } }); let filteredItems = []; items.reverse(); var todayStart = new Date(); todayStart.setHours(0,0,0,0); var yesterdayStart = new Date(); yesterdayStart.setDate(todayStart.getDate() - 2); yesterdayStart.setHours(0,0,0,0); items.forEach((item) => { const fromDomain = '@' + item.uri.split('@')[1]; if (this.state.periodFilter === 'today') { if(item.timestamp < todayStart) { return; } } if (this.state.periodFilter === 'yesterday') { if(item.timestamp < yesterdayStart || item.timestamp > todayStart) { return; } } if (this.state.inviteContacts && item.uri.indexOf('@videoconference.') > -1) { return; } if (item.uri === this.state.accountId && !item.direction) { return; } if (this.state.filter && item.tags.indexOf(this.state.filter) > -1) { filteredItems.push(item); } else if (this.state.blockedUris.indexOf(item.uri) === -1 && this.state.blockedUris.indexOf(fromDomain) === -1) { filteredItems.push(item); } //console.log(item.timestamp, item.type, item.uri); }); items = filteredItems; items.sort((a, b) => (a.timestamp < b.timestamp) ? 1 : -1) if (items.length === 1) { //console.log(items[0]); items[0].showActions = true; } let columns = 1; if (this.props.isTablet) { columns = this.props.orientation === 'landscape' ? 3 : 2; } else { columns = this.props.orientation === 'landscape' ? 2 : 1; } const chatContainer = this.props.orientation === 'landscape' ? styles.chatLandscapeContainer : styles.chatPortraitContainer; const container = this.props.orientation === 'landscape' ? styles.landscapeContainer : styles.portraitContainer; const contactsContainer = this.props.orientation === 'landscape' ? styles.contactsLandscapeContainer : styles.contactsPortraitContainer; const borderClass = (messages.length > 0 && !this.state.chat) ? styles.chatBorder : null; if (items.length === 1) { if (items[0].tags.toString() === 'synthetic') { messages = []; } } let pinned_messages = [] if (this.state.pinned) { messages.forEach((m) => { if (m.pinned) { pinned_messages.push(m); } }); messages = pinned_messages; if (pinned_messages.length === 0) { let msg = { _id: uuid.v4(), text: 'No pinned messages found. Touch individual messages to pin them.', system: true } pinned_messages.push(msg); } } let showLoadEarlier = (this.state.myContacts && this.state.selectedContact && this.state.selectedContact.uri in this.state.myContacts && this.state.myContacts[this.state.selectedContact.uri].totalMessages && this.state.myContacts[this.state.selectedContact.uri].totalMessages > messages.length) ? true: false; return ( {items.length === 1 ? (this.renderItem(items[0])) : item.id} key={this.props.orientation} loadEarlier /> } - {this.showChat && ! this.state.inviteContacts? + {this.showChat && !this.state.inviteContacts? : (items.length === 1) ? { return null }} renderBubble={this.renderBubble} onSend={this.onSendMessage} onLongPress={this.onLongMessagePress} shouldUpdateMessage={this.shouldUpdateMessage} onPress={this.onLongMessagePress} scrollToBottom={this.state.scrollToBottom} inverted={true} timeTextStyle={{ left: { color: 'red' }, right: { color: 'yellow' } }} infiniteScroll loadEarlier={showLoadEarlier} onLoadEarlier={this.loadEarlierMessages} /> : null } ); } } ContactsListBox.propTypes = { account : PropTypes.object, password : PropTypes.string.isRequired, config : PropTypes.object.isRequired, targetUri : PropTypes.string, selectedContact : PropTypes.object, contacts : PropTypes.array, chat : PropTypes.bool, orientation : PropTypes.string, setTargetUri : PropTypes.func, isTablet : PropTypes.bool, isLandscape : PropTypes.bool, refreshHistory : PropTypes.bool, saveHistory : PropTypes.func, myDisplayName : PropTypes.string, myPhoneNumber : PropTypes.string, setFavoriteUri : PropTypes.func, saveConference: PropTypes.func, myInvitedParties: PropTypes.object, setBlockedUri : PropTypes.func, favoriteUris : PropTypes.array, blockedUris : PropTypes.array, filter : PropTypes.string, periodFilter : PropTypes.string, defaultDomain : PropTypes.string, saveContact : PropTypes.func, myContacts : PropTypes.object, messages : PropTypes.object, getMessages : PropTypes.func, confirmRead : PropTypes.func, sendMessage : PropTypes.func, reSendMessage : PropTypes.func, deleteMessage : PropTypes.func, pinMessage : PropTypes.func, unpinMessage : PropTypes.func, deleteMessages : PropTypes.func, sendPublicKey : PropTypes.func, inviteContacts : PropTypes.bool, shareToContacts : PropTypes.bool, selectedContacts: PropTypes.array, toggleBlocked : PropTypes.func, togglePinned : PropTypes.func, loadEarlierMessages: PropTypes.func, newContactFunc : PropTypes.func, messageZoomFactor: PropTypes.string, - isTyping: PropTypes.bool + isTyping : PropTypes.bool, + fontScale : PropTypes.integer, + call : PropTypes.object }; export default ContactsListBox; diff --git a/app/components/DeleteHistoryModal.js b/app/components/DeleteHistoryModal.js index 1345662..341ce6a 100644 --- a/app/components/DeleteHistoryModal.js +++ b/app/components/DeleteHistoryModal.js @@ -1,198 +1,198 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import { View } from 'react-native'; import UserIcon from './UserIcon'; import { Chip, Dialog, Portal, Text, Button, Surface, TextInput, Paragraph, RadioButton, Checkbox } from 'react-native-paper'; import KeyboardAwareDialog from './KeyBoardAwareDialog'; const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog; import styles from '../assets/styles/blink/_DeleteHistoryModal.scss'; class DeleteHistoryModal extends Component { constructor(props) { super(props); autoBind(this); this.state = { displayName: this.props.displayName, show: this.props.show, uri: this.props.uri, period: "0", remoteDelete: false, confirm: false, hasMessages: this.props.hasMessages } } UNSAFE_componentWillReceiveProps(nextProps) { this.setState({show: nextProps.show, displayName: nextProps.displayName, uri: nextProps.uri, confirm: nextProps.confirm, hasMessages: nextProps.hasMessages }); } deleteMessages(event) { event.preventDefault(); if (this.state.confirm) { this.setState({confirm: false}); this.props.deleteMessages(this.state.uri, true, this.state.period, this.state.remoteDelete); this.props.close(); } else { this.setState({confirm: true}); } } setPeriod(value) { this.setState({period: value}); } toggleRemoteDelete() { this.setState({remoteDelete: !this.state.remoteDelete}) } render() { let identity = {uri: this.state.uri, displayName: this.state.displayName}; let canDeleteRemote = this.state.uri && this.state.uri.indexOf('@videoconference') === -1; canDeleteRemote = false; let canDeleteByTime = false; let deleteLabel = this.state.confirm ? 'Confirm': 'Delete'; if (this.state.hasMessages || !this.state.uri) { return ( { this.state.uri ? : null} - {this.state.uri ? 'Delete messages' : 'Wiped device'} + {this.state.uri ? 'Delete messages' : 'Wipe device'} { this.state.uri ? Confirm deletion of all messages with {this.state.uri}. Messages will not be removed from remote party. : You can delete all messages from this device. {"\n"}{"\n"} Messages can still be retrieved from the server. } { canDeleteByTime ? this.setPeriod(newValue)} value={this.state.period}> Last hour Last day All : null} {canDeleteRemote ? Delete from recipient too {this.toggleRemoteDelete()}} /> : null} ); } else { return ( { this.state.uri ? : null} Delete contact Confirm deletion of contact {this.state.uri} ); } } } DeleteHistoryModal.propTypes = { show : PropTypes.bool, close : PropTypes.func.isRequired, uri : PropTypes.string, displayName : PropTypes.string, deleteMessages : PropTypes.func, hasMessages : PropTypes.bool }; export default DeleteHistoryModal; diff --git a/app/components/EnrollmentModal.js b/app/components/EnrollmentModal.js index bee99d5..6b17a62 100644 --- a/app/components/EnrollmentModal.js +++ b/app/components/EnrollmentModal.js @@ -1,289 +1,302 @@ import React, { Component } from 'react'; import { View, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'; import PropTypes from 'prop-types'; import superagent from 'superagent'; import autoBind from 'auto-bind'; import { Dialog, Portal, Button, TextInput, Text, Title, Surface, HelperText, Snackbar } from 'react-native-paper'; import KeyboardAwareDialog from './KeyBoardAwareDialog'; import LoadingScreen from './LoadingScreen'; const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog; import styles from '../assets/styles/blink/_EnrollmentModal.scss'; import config from '../config'; class EnrollmentModal extends Component { constructor(props) { super(props); autoBind(this); // save the initial state so we can restore it later this.initialState = { displayName: '', username: '', password: '', password2: '', email: '', enrolling: false, error: '', - errorVisible: false + errorVisible: false, + status: '' }; this.state = Object.assign({}, this.initialState); } handleFormFieldChange(value, name) { if (name === 'username') { value = value.replace(/[^\w|\.\-]/g, '').trim().toLowerCase(); } this.setState({ [name]: value }); + } get validInput() { let valid_input = !this.state.enrolling; let error; valid_input = valid_input && this.state.displayName.length > 2; if (!valid_input && !error) { error = 'Invalid display name'; } valid_input = valid_input && this.state.username.length > 3; if (!valid_input && !error) { error = 'Invalid username'; } valid_input = valid_input && this.state.password !== ''; if (!valid_input && !error) { error = 'Invalid password'; } valid_input = valid_input && this.state.password === this.state.password2; if (!valid_input && !error) { error = 'Passwords not equal'; } valid_input = valid_input && this.state.email.indexOf('@') > -1; if (!valid_input && !error) { error = 'Email not valid'; } if (!valid_input) { //console.log(error); } return valid_input; } enroll(event) { event.preventDefault(); this.setState({enrolling: true, error:''}); superagent.post(config.enrollmentUrl) .send(superagent.serialize['application/x-www-form-urlencoded']({username: this.state.username, password: this.state.password, email: this.state.email, phoneNumber: this.props.phoneNumber, display_name: this.state.displayName})) //eslint-disable-line camelcase .end((error, res) => { this.setState({enrolling: false}); if (error) { this.setState({error: error.toString(), errorVisible: true}); return; } let data; try { data = JSON.parse(res.text); } catch (e) { this.setState({error: 'Could not decode response data', errorVisible: true}); return; } if (data.success) { this.props.handleEnrollment({id: data.sip_address, password: this.state.password, displayName: this.state.displayName, email: this.state.email}); this.setState(this.initialState); } else if (data.error === 'user_exists') { this.setState({error: 'Username is taken. Choose another one!', errorVisible: true}); } else { this.setState({error: data.error_message, errorVisible: true}); } }); } onHide() { this.props.handleEnrollment(null); this.setState(this.initialState); } render() { let buttonText = 'Sign Up'; let buttonIcon = null; let loadingText = 'Enrolling...'; let containerClass; if (this.state.enrolling) { buttonIcon = "cog"; } if (this.props.isTablet) { containerClass = this.props.orientation === 'landscape' ? styles.landscapeTablet : styles.portraitTablet; } else { containerClass = this.props.orientation === 'landscape' ? styles.landscape : styles.portrait; } let email_reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/; let validEmail = email_reg.test(this.state.email); let validUsername = this.state.username.length > 3; + let status = ''; + if (!this.state.displayName) { + status = 'Enter display name'; + } else if (!validEmail) { + status = 'Enter email address'; + } else if (!this.state.username) { + status = 'Enter username'; + } else if (!this.state.password) { + status = 'Enter password'; + } else if (this.state.password && this.state.password !== this.state.password2) { + status = 'Password not confirmed'; + } + return ( Sign Up { this.scrollView = ref; }} style={containerClass}> {this.handleFormFieldChange(text, 'displayName');}} required value={this.state.displayName} disabled={this.state.enrolling} returnKeyType="next" onSubmitEditing={() => this.emailInput ? this.emailInput.focus() : null} /> { this.state.displayName.length > 2 || true ? {this.handleFormFieldChange(text, 'email');}} required value={this.state.email} disabled={this.state.enrolling} returnKeyType="go" ref={ref => { this.emailInput = ref; }} onSubmitEditing={() => this.usernameInput && validEmail ? this.usernameInput.focus() : null} /> : null } { validEmail || true? {this.handleFormFieldChange(text, 'username');}} required value={this.state.username} disabled={this.state.enrolling} returnKeyType="next" ref={ref => { this.usernameInput = ref; }} onSubmitEditing={() => validUsername && this.passwordInput ? this.passwordInput.focus(): null} /> : null} { validUsername ? {this.handleFormFieldChange(text, 'password');}} required value={this.state.password} disabled={this.state.enrolling} returnKeyType="next" ref={ref => { this.passwordInput = ref; }} onSubmitEditing={() => this.state.password.length > 4 && this.password2Input ? this.password2Input.focus(): null} /> : null} { validUsername ? {this.handleFormFieldChange(text, 'password2');}} onSubmitEditing={() => this.scrollView.scrollToEnd()} required value={this.state.password2} disabled={this.state.enrolling} returnKeyType="next" ref={ref => { this.password2Input = ref; }} /> : null} {this.validInput ? : - + {status} } + this.setState({ errorVisible: false })} > {this.state.error} ); } } EnrollmentModal.propTypes = { handleEnrollment: PropTypes.func.isRequired, show: PropTypes.bool.isRequired, phoneNumber : PropTypes.string, orientation : PropTypes.string, isTablet : PropTypes.bool }; export default EnrollmentModal; diff --git a/app/components/MessageInfoModal.js b/app/components/MessageInfoModal.js index bcc1093..178e81b 100644 --- a/app/components/MessageInfoModal.js +++ b/app/components/MessageInfoModal.js @@ -1,78 +1,93 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import autoBind from 'auto-bind'; import { View } from 'react-native'; import { Chip, Dialog, Portal, Text, Button, Surface, TextInput, Paragraph, DataTable } from 'react-native-paper'; import KeyboardAwareDialog from './KeyBoardAwareDialog'; const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog; import styles from '../assets/styles/blink/_MessageInfoModal.scss'; class MessageInfoModal extends Component { constructor(props) { super(props); autoBind(this); this.state = { show: this.props.show, message: this.props.message } } UNSAFE_componentWillReceiveProps(nextProps) { this.setState({message: nextProps.message, show: nextProps.show}); } render() { if (!this.state.message) { return (null); } let status = this.state.message.direction === 'outgoing' ? 'Message is on the way' : 'Message was received'; - let encryption = 'Message was not encrypted'; + let encryption = 'Not encrypted'; if (this.state.message.encrypted == 2) { - encryption = 'Message was encrypted'; + encryption = 'Encrypted'; } if (this.state.message.failed) { status = 'Message could not be delivered'; } else if (this.state.message.received) { status = 'Message was read'; } else if (this.state.message.sent) { status = 'Message was delivered, but not read'; } else if (this.state.message.pending) { status = 'Message is not yet sent'; } + console.log('this.state.message', this.state.message); + let title = this.state.message ? this.state.message.user._id : null; + return ( + {title ? + {title} + : null} + Message + {this.state.message._id} + + + Date + {this.state.message.createdAt.toString()} + + + Encryption: {encryption} - - {status} + Direction + {this.state.message.direction} ); } } MessageInfoModal.propTypes = { show : PropTypes.bool, close : PropTypes.func.isRequired, message : PropTypes.object }; export default MessageInfoModal; diff --git a/app/components/ReadyBox.js b/app/components/ReadyBox.js index 9af22ac..c6abf93 100644 --- a/app/components/ReadyBox.js +++ b/app/components/ReadyBox.js @@ -1,761 +1,808 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import autoBind from 'auto-bind'; -import { FlatList, View, Platform} from 'react-native'; -import { IconButton, Title, Button } from 'react-native-paper'; +import { FlatList, View, Platform, TouchableHighlight} from 'react-native'; +import { IconButton, Title, Button, Colors } from 'react-native-paper'; import ConferenceModal from './ConferenceModal'; import ContactsListBox from './ContactsListBox'; + import FooterBox from './FooterBox'; import URIInput from './URIInput'; import config from '../config'; import utils from '../utils'; import styles from '../assets/styles/blink/_ReadyBox.scss'; import {Keyboard} from 'react-native'; class ReadyBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { targetUri: '', contacts: this.props.contacts, selectedContact: this.props.selectedContact, showConferenceModal: this.props.showConferenceModal, sticky: false, favoriteUris: this.props.favoriteUris, blockedUris: this.props.blockedUris, historyCategoryFilter: null, historyPeriodFilter: null, missedCalls: this.props.missedCalls, isLandscape: this.props.isLandscape, participants: null, myInvitedParties: this.props.myInvitedParties, messages: this.props.messages, myDisplayName: this.props.myDisplayName, chat: (this.props.selectedContact !== null) && (this.props.call !== null), call: this.props.call, inviteContacts: this.props.inviteContacts, shareToContacts: this.props.shareToContacts, selectedContacts: this.props.selectedContacts, pinned: this.props.pinned, messageZoomFactor: this.props.messageZoomFactor, isTyping: this.props.isTyping, - navigationItems: this.props.navigationItems + navigationItems: this.props.navigationItems, + fontScale: this.props.fontScale }; this.ended = false; } UNSAFE_componentWillReceiveProps(nextProps) { if (this.ended) { return; } if (this.state.selectedContact && nextProps.selectedContact === null) { this.setState({targetUri: '', chat: false}); } if (!this.state.inviteContacts && nextProps.inviteContacts) { this.handleTargetChange(''); this.setState({chat: false}); } if (this.state.selectedContact !== nextProps.selectedContact && nextProps.selectedContact) { this.setState({chat: !this.chatDisabledForUri(nextProps.selectedContact.uri)}); } if (nextProps.missedCalls.length === 0 && this.state.historyCategoryFilter === 'missed') { this.setState({'historyCategoryFilter': null}); } if (nextProps.blockedUris.length === 0 && this.state.historyCategoryFilter === 'blocked') { this.setState({'historyCategoryFilter': null}); } if (nextProps.favoriteUris.length === 0 && this.state.historyCategoryFilter === 'favorite') { this.setState({'historyCategoryFilter': null}); } this.setState({myInvitedParties: nextProps.myInvitedParties, messages: nextProps.messages, myDisplayName: nextProps.myDisplayName, call: nextProps.call, showConferenceModal: nextProps.showConferenceModal, isTyping: nextProps.isTyping, navigationItems: nextProps.navigationItems, messageZoomFactor: nextProps.messageZoomFactor, contacts: nextProps.contacts, inviteContacts: nextProps.inviteContacts, shareToContacts: nextProps.shareToContacts, selectedContacts: nextProps.selectedContacts, selectedContact: nextProps.selectedContact, pinned: nextProps.pinned, favoriteUris: nextProps.favoriteUris, blockedUris: nextProps.blockedUris, missedCalls: nextProps.missedCalls, + fontScale: nextProps.fontScale, isLandscape: nextProps.isLandscape}); } getTargetUri(uri) { return utils.normalizeUri(uri, this.props.defaultDomain); } async componentDidMount() { this.ended = false; } componentWillUnmount() { this.ended = true; } filterHistory(filter) { if (this.ended) { return; } if (!filter) { this.setState({'historyPeriodFilter': null, historyCategoryFilter: null}); } else if (filter === 'today' || filter === 'yesterday') { filter = this.state.historyPeriodFilter === filter ? null : filter; this.setState({'historyPeriodFilter': filter}); } else { this.setState({'historyCategoryFilter': filter}); } this.handleTargetChange(''); } chatDisabledForUri(uri) { if (uri.indexOf('@videoconference') > -1) { return true; } if (uri.indexOf('@guest') > -1) { return true; } if (uri.indexOf('3333@') > -1) { return true; } if (uri.indexOf('4444@') > -1) { return true; } return false; } get showSearchBar() { - if (this.props.isTablet || this.props.isLandscape) { + if (this.state.selectedContact && !this.props.isTablet) { + return false; + } + + if (this.props.isTablet || (!this.props.isLandscape && this.state.selectedContact)) { return true; } - if (this.state.call) { + if (this.state.call && !this.state.inviteContacts) { return false; } - return (this.state.selectedContact === null); + return true; } get showButtonsBar() { if (this.props.isTablet) { return true; } - if (this.state.shareToContacts) { - return true; - } - - if (this.props.isLandscape) { - return true; - } - if (this.state.call) { return true; } if (!this.state.targetUri) { return true; } if (this.state.selectedContact) { + if (this.props.isLandscape && !this.props.isTablet) { + return false; + } return true; } return true; } handleTargetChange(new_uri, contact) { //console.log('---handleTargetChange new_uri =', new_uri); //console.log('handleTargetChange contact =', contact); if ((this.state.inviteContacts || this.state.shareToContacts) && contact) { const uri = contact.uri; this.props.updateSelection(uri); return; } if (this.state.selectedContact === contact) { if (this.state.chat) { this.setState({chat: false}); } return; } else { this.setState({chat: false}); } let new_value = new_uri; if (contact) { if (this.state.targetUri === contact.uri) { new_value = ''; } } else { contact = null; } if (this.state.targetUri === new_uri) { new_value = ''; } if (new_value === '') { contact = null; } if (new_value.indexOf(' ') === -1) { new_value = new_value.trim().toLowerCase(); } //new_value = new_value.replace(' ',''); //console.log('--- Select new contact', contact? contact.uri : null); //console.log('--- Select new targetUri', new_value); this.props.selectContact(contact); this.setState({targetUri: new_value}); } handleTargetSelect() { if (this.props.connection === null) { this.props._notificationCenter.postSystemNotification("Server unreachable"); return; } let uri = this.state.targetUri.toLowerCase(); if (uri.endsWith(`@${config.defaultConferenceDomain}`)) { let participants; if (this.state.myInvitedParties && this.state.myInvitedParties.hasOwnProperty(uri)) { participants = this.state.myInvitedParties[uri]; } this.props.startConference(uri, {audio: true, video: true, participants: this.state.participants}); } else { this.props.startCall(this.getTargetUri(uri), {audio: true, video: true}); } } shareContent() { this.props.shareContent(); } showConferenceModal(event) { event.preventDefault(); this.props.showConferenceModalFunc(); } handleChat(event) { event.preventDefault(); let targetUri; if (!this.state.chat && !this.state.selectedContact) { targetUri = this.getTargetUri(this.state.targetUri); this.setState({targetUri: targetUri}); } let uri = this.state.targetUri.trim().toLowerCase(); if (!this.state.chat && !this.selectedContact && uri) { if (uri.indexOf('@') === -1) { uri = uri + '@' + this.props.defaultDomain; } let contact = this.props.newContactFunc(uri, null, {src: 'new chat'}); console.log('Create synthetic contact', contact); this.props.selectContact(contact); this.setState({targetUri: uri, chat: true}); Keyboard.dismiss(); - //this.handleTargetChange(targetUri, contact); } this.setState({chat: !this.state.chat}); } handleAudioCall(event) { event.preventDefault(); Keyboard.dismiss(); let uri = this.state.targetUri.trim().toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; uri = uri_parts[4]; if (event === 'conference') { uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain; } } if (uri.endsWith(`@${config.defaultConferenceDomain}`)) { this.props.startConference(uri, {audio: true, video: false}); } else { this.props.startCall(this.getTargetUri(uri), {audio: true, video: false}); } } handleVideoCall(event) { event.preventDefault(); Keyboard.dismiss(); let uri = this.state.targetUri.toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; uri = uri_parts[4]; if (event === 'conference') { uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain; } } if (uri.endsWith(`@${config.defaultConferenceDomain}`)) { this.props.startConference(uri, {audio: true, video: true}); } else { this.props.startCall(this.getTargetUri(uri), {audio: true, video: true}); } } handleConferenceCall(targetUri, options={audio: true, video: true, participants: []}) { Keyboard.dismiss(); this.props.startConference(targetUri, {audio: options.audio, video: options.video, participants: options.participants}); this.props.hideConferenceModalFunc(); } get chatButtonDisabled() { let uri = this.state.targetUri.trim(); + if (this.state.selectedContact) { + return true; + } + if (this.state.shareToContacts) { return true; } if (!uri || uri.indexOf(' ') > -1 || uri.indexOf('@guest.') > -1 || uri.indexOf('@videoconference') > -1) { return true; } let username = uri.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); if (isPhoneNumber) { return true; } if (uri.indexOf('@') > -1) { let email_reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/; let validEmail = email_reg.test(uri); if (!validEmail) { return true; } } if (this.chatDisabledForUri(uri)) { return true; } return false; } get callButtonDisabled() { let uri = this.state.targetUri.trim(); if (!uri || uri.indexOf(' ') > -1 || uri.indexOf('@guest.') > -1 || uri.indexOf('@videoconference') > -1) { return true; } if (this.state.shareToContacts) { return true; } if (uri.indexOf('@') > -1) { let email_reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/; let validEmail = email_reg.test(uri); if (!validEmail) { return true; } } return false; } get videoButtonDisabled() { let uri = this.state.targetUri.trim(); if (!uri || uri.indexOf(' ') > -1 || uri.indexOf('@guest.') > -1 || uri.indexOf('@videoconference') > -1) { return true; } if (uri.indexOf('4444@') > -1) { return true; } if (this.state.shareToContacts) { return true; } let username = uri.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); if (isPhoneNumber) { return true; } return this.callButtonDisabled; } get conferenceButtonDisabled() { let uri = this.state.targetUri.trim(); if (uri.indexOf(' ') > -1) { return true; } if (this.state.shareToContacts) { return true; } let username = uri.split('@')[0]; let isPhoneNumber = username.match(/^(\+|0)(\d+)$/); if (isPhoneNumber) { return true; } if (uri.indexOf('@') > -1 && uri.indexOf(config.defaultConferenceDomain) === -1) { return true; } var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; if (event === 'call') { return true; } } return false; } renderNavigationItem(object) { if (!object.item.enabled) { return (null); } let title = object.item.title; let key = object.item.key; let buttonStyle = object.item.selected ? styles.navigationButtonSelected : styles.navigationButton; return (); } render() { let uriClass = styles.portraitUriInputBox; let uriGroupClass = styles.portraitUriButtonGroup; let titleClass = styles.portraitTitle; let uri = this.state.targetUri.toLowerCase(); var uri_parts = uri.split("/"); if (uri_parts.length === 5 && uri_parts[0] === 'https:') { // https://webrtc.sipthor.net/conference/DaffodilFlyChill0 from external web link // https://webrtc.sipthor.net/call/alice@example.com from external web link let event = uri_parts[3]; uri = uri_parts[4]; if (event === 'conference') { uri = uri.split("@")[0] + '@' + config.defaultConferenceDomain; } } - const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; + /* + console.log('Render -----'); + + if (this.state.selectedContact) { + console.log('Render selectedContact', this.state.selectedContact.name); + } + + if (this.state.callContact) { + console.log('Render callContact', this.state.callContact.uri); + } + + if (this.state.targetUri) { + console.log('Render targetUri', this.state.targetUri); + } + + console.log('Render chat', this.state.chat); + */ + + let buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; + + let disabledButtonClass = styles.disabledButton; if (this.props.isTablet) { titleClass = this.props.orientation === 'landscape' ? styles.landscapeTabletTitle : styles.portraitTabletTitle; } else { titleClass = this.props.orientation === 'landscape' ? styles.landscapeTitle : styles.portraitTitle; } if (this.props.isTablet) { uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriButtonGroup : styles.portraitTabletUriButtonGroup; } else { uriGroupClass = this.props.orientation === 'landscape' ? styles.landscapeUriButtonGroup : styles.portraitUriButtonGroup; } if (this.props.isTablet) { uriClass = this.props.orientation === 'landscape' ? styles.landscapeTabletUriInputBox : styles.portraitTabletUriInputBox; } else { uriClass = this.props.orientation === 'landscape' ? styles.landscapeUriInputBox : styles.portraitUriInputBox; } const historyContainer = this.props.orientation === 'landscape' ? styles.historyLandscapeContainer : styles.historyPortraitContainer; const buttonGroupClass = this.props.orientation === 'landscape' ? styles.landscapeButtonGroup : styles.buttonGroup; const borderClass = this.state.chat ? null : styles.historyBorder; - let callType = 'Back to call'; + let backButtonTitle = 'Back to call'; + if (this.state.call && this.state.call.hasOwnProperty('_participants')) { - callType = this.state.selectedContacts.length > 0 ? 'Invite people' : 'Back to conference'; + backButtonTitle = this.state.selectedContacts.length > 0 ? 'Invite people' : 'Back to conference'; } let navigationMenuData = [ {key: null, title: 'All', enabled: true, selected: false}, {key: 'history', title: 'Calls', enabled: true, selected: this.state.historyCategoryFilter === 'history'}, {key: 'chat', title: 'Chat', enabled: true, selected: this.state.historyCategoryFilter === 'chat'}, {key: 'today', title: 'Today', enabled: this.state.navigationItems['today'], selected: this.state.historyPeriodFilter === 'today'}, {key: 'yesterday', title: 'Yesterday', enabled: this.state.navigationItems['yesterday'], selected: this.state.historyPeriodFilter === 'yesterday'}, {key: 'missed', title: 'Missed', enabled: this.state.missedCalls.length > 0, selected: this.state.historyCategoryFilter === 'missed'}, {key: 'favorite', title: 'Favorites', enabled: this.state.favoriteUris.length > 0, selected: this.state.historyCategoryFilter === 'favorite'}, {key: 'blocked', title: 'Blocked', enabled: this.state.blockedUris.length > 0, selected: this.state.historyCategoryFilter === 'blocked'}, {key: 'conference', title: 'Conference', enabled: Object.keys(this.state.myInvitedParties).length > 0 || this.state.navigationItems['conference'], selected: this.state.historyCategoryFilter === 'conference'}, {key: 'test', title: 'Test', enabled: !this.state.shareToContacts, selected: this.state.historyCategoryFilter === 'test'}, ]; return ( {this.showSearchBar && !this.props.isLandscape ? : null} {this.showButtonsBar ? {this.showSearchBar && this.props.isLandscape ? : null} {this.state.call ? - : - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - } + } - : null} + : null} { !this.state.selectedContact ? item.key} renderItem={this.renderNavigationItem} /> : null} {this.props.isTablet && 0? : null} ); } } ReadyBox.propTypes = { account : PropTypes.object, password : PropTypes.string.isRequired, config : PropTypes.object.isRequired, startCall : PropTypes.func.isRequired, startConference : PropTypes.func.isRequired, contacts : PropTypes.array, orientation : PropTypes.string, isTablet : PropTypes.bool, isLandscape : PropTypes.bool, refreshHistory : PropTypes.bool, refreshFavorites: PropTypes.bool, saveHistory : PropTypes.func, localHistory : PropTypes.array, myDisplayName : PropTypes.string, myPhoneNumber : PropTypes.string, toggleFavorite : PropTypes.func, myInvitedParties: PropTypes.object, toggleBlocked : PropTypes.func, favoriteUris : PropTypes.array, blockedUris : PropTypes.array, defaultDomain : PropTypes.string, saveContact : PropTypes.func, selectContact : PropTypes.func, lookupContacts : PropTypes.func, call : PropTypes.object, goBackFunc : PropTypes.func, messages : PropTypes.object, sendMessage : PropTypes.func, reSendMessage : PropTypes.func, confirmRead : PropTypes.func, deleteMessage : PropTypes.func, expireMessage : PropTypes.func, getMessages : PropTypes.func, deleteMessages : PropTypes.func, pinMessage : PropTypes.func, unpinMessage : PropTypes.func, sendPublicKey : PropTypes.func, inviteContacts : PropTypes.bool, shareToContacts : PropTypes.bool, selectedContacts: PropTypes.array, updateSelection : PropTypes.func, loadEarlierMessages: PropTypes.func, newContactFunc : PropTypes.func, missedCalls : PropTypes.array, messageZoomFactor: PropTypes.string, isTyping: PropTypes.bool, navigationItems: PropTypes.object, showConferenceModal: PropTypes.bool, showConferenceModalFunc: PropTypes.func, hideConferenceModalFunc: PropTypes.func, shareContent: PropTypes.func, - fetchSharedItems: PropTypes.func - + fetchSharedItems: PropTypes.func, + fontScale: PropTypes.integer }; export default ReadyBox; diff --git a/app/components/UserIcon.js b/app/components/UserIcon.js index 441846b..2ad14b1 100644 --- a/app/components/UserIcon.js +++ b/app/components/UserIcon.js @@ -1,59 +1,61 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import utils from '../utils'; import { Text, View } from 'react-native' import { Avatar} from 'react-native-paper'; const UserIcon = (props) => { if (!props.identity) { return (null) } const name = props.identity.name || props.identity.uri; const photo = props.identity.photo; let initials = ''; if (name) { initials = name.split(' ', 2).map(x => x[0]).join(''); } - //console.log('Avatar', props.identity); - const color = utils.generateMaterialColor(props.identity.uri)['300']; let avatarSize = props.large ? 130: 60; if (props.carousel === true) { avatarSize = 70; } + if (props.small) { + avatarSize = 40; + } + if (photo) { return ( ); } if (props.identity.uri && props.identity.uri.search('anonymous') !== -1) { return ( ); } if (props.identity.uri && props.identity.uri.search('videoconference') !== -1) { return ( ); } return ( ); }; UserIcon.propTypes = { identity: PropTypes.object.isRequired, large: PropTypes.bool, carousel: PropTypes.bool }; export default UserIcon; diff --git a/app/components/VideoBox.js b/app/components/VideoBox.js index bc100eb..d27424c 100644 --- a/app/components/VideoBox.js +++ b/app/components/VideoBox.js @@ -1,422 +1,399 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import dtmf from 'react-native-dtmf'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import { IconButton, ActivityIndicator, Colors } from 'react-native-paper'; import { View, Dimensions, TouchableWithoutFeedback, Platform } from 'react-native'; import { RTCView } from 'react-native-webrtc'; import CallOverlay from './CallOverlay'; import EscalateConferenceModal from './EscalateConferenceModal'; import DTMFModal from './DTMFModal'; import config from '../config'; import styles from '../assets/styles/blink/_VideoBox.scss'; //import TrafficStats from './BarChart'; import utils from '../utils'; const DEBUG = debug('blinkrtc:Video'); debug.enable('*'); class VideoBox extends Component { constructor(props) { super(props); autoBind(this); this.state = { call: this.props.call, reconnectingCall: this.props.reconnectingCall, audioMuted: this.props.muted, mirror: true, callOverlayVisible: true, videoMuted: false, localVideoShow: true, remoteVideoShow: true, remoteSharesScreen: false, showEscalateConferenceModal: false, localStream: this.props.call.getLocalStreams()[0], remoteStream: this.props.call.getRemoteStreams()[0], info: this.props.info, showDtmfModal: false, doorOpened: false, packetLossQueue : [], audioBandwidthQueue : [], latencyQueue : [] }; this.overlayTimer = null; this.localVideo = React.createRef(); this.remoteVideo = React.createRef(); this.userHangup = false; } //getDerivedStateFromProps(nextProps, state) { UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.hasOwnProperty('muted')) { this.setState({audioMuted: nextProps.muted}); } if (nextProps.hasOwnProperty('info')) { this.setState({info: nextProps.info}); } if (nextProps.hasOwnProperty('packetLossQueue')) { this.setState({packetLossQueue: nextProps.packetLossQueue}); } if (nextProps.hasOwnProperty('audioBandwidthQueue')) { this.setState({audioBandwidthQueue: nextProps.audioBandwidthQueue}); } if (nextProps.hasOwnProperty('latencyQueue')) { this.setState({latencyQueue: nextProps.latencyQueue}); } if (nextProps.call && nextProps.call !== this.state.call) { nextProps.call.on('stateChanged', this.callStateChanged); if (this.state.call !== null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } this.setState({call: nextProps.call, localStream: nextProps.call.getLocalStreams()[0], remoteStream: nextProps.call.getRemoteStreams()[0] }); } if (nextProps.reconnectingCall != this.state.reconnectingCall) { this.setState({reconnectingCall: nextProps.reconnectingCall}); } } callStateChanged(oldState, newState, data) { this.forceUpdate(); } openDoor() { const tone = this.props.intercomDtmfTone; DEBUG('DTMF tone sent to intercom: ' + tone); this.setState({doorOpened: true}); this.forceUpdate(); dtmf.stopTone(); //don't play a tone at the same time as another dtmf.playTone(dtmf['DTMF_' + tone], 1000); if (this.state.call !== null && this.state.call.state === 'established') { this.state.call.sendDtmf(tone); } } componentDidMount() { if (this.state.call) { this.state.call.on('stateChanged', this.callStateChanged); } this.armOverlayTimer(); } componentWillUnmount() { if (this.state.call != null) { this.state.call.removeListener('stateChanged', this.callStateChanged); } } showDtmfModal() { this.setState({showDtmfModal: true}); } hideDtmfModal() { this.setState({showDtmfModal: false}); } handleFullscreen(event) { event.preventDefault(); // this.toggleFullscreen(); } handleRemoteVideoPlaying() { this.setState({remoteVideoShow: true}); } handleRemoteResize(event, target) { const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180']; const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight; if (resolutions.indexOf(videoResolution) === -1) { this.setState({remoteSharesScreen: true}); } else { this.setState({remoteSharesScreen: false}); } } muteAudio(event) { event.preventDefault(); this.props.toggleMute(this.state.call.id, !this.state.audioMuted); } muteVideo(event) { event.preventDefault(); const localStream = this.state.localStream; if (localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; if(this.state.videoMuted) { DEBUG('Unmute camera'); track.enabled = true; this.setState({videoMuted: false}); } else { DEBUG('Mute camera'); track.enabled = false; this.setState({videoMuted: true}); } } } toggleCamera(event) { event.preventDefault(); const localStream = this.state.localStream; if (localStream.getVideoTracks().length > 0) { const track = localStream.getVideoTracks()[0]; track._switchCamera(); this.setState({mirror: !this.state.mirror}); } } hangupCall(event) { event.preventDefault(); this.props.hangupCall('user_hangup_call'); this.userHangup = true; } cancelCall(event) { event.preventDefault(); this.props.hangupCall('user_cancel_call'); } escalateToConference(participants) { this.props.escalateToConference(participants); } armOverlayTimer() { clearTimeout(this.overlayTimer); this.overlayTimer = setTimeout(() => { this.setState({callOverlayVisible: false}); }, 4000); } toggleCallOverlay() { this.setState({callOverlayVisible: !this.state.callOverlayVisible}); } toggleEscalateConferenceModal() { this.setState({ callOverlayVisible : false, showEscalateConferenceModal : !this.state.showEscalateConferenceModal }); } render() { if (this.state.call === null) { return null; } // 'mirror' : !this.state.call.sharingScreen && !this.props.generatedVideoTrack, // we do not want mirrored local video once the call has started, just in preview const localVideoClasses = classNames({ 'video-thumbnail' : true, 'hidden' : !this.state.localVideoShow, 'animated' : true, 'fadeIn' : this.state.localVideoShow || this.state.videoMuted, 'fadeOut' : this.state.videoMuted, 'fit' : this.state.call.sharingScreen }); const remoteVideoClasses = classNames({ 'poster' : !this.state.remoteVideoShow, 'animated' : true, 'fadeIn' : this.state.remoteVideoShow, 'large' : true, 'fit' : this.state.remoteSharesScreen }); let buttonContainerClass; let buttons; const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone'; const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video'; const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton; const buttonSize = this.props.isTablet ? 40 : 34; if (this.props.isTablet) { buttonContainerClass = this.props.orientation === 'landscape' ? styles.tabletLandscapeButtonContainer : styles.tabletPortraitButtonContainer; userIconContainerClass = styles.tabletUserIconContainer; } else { buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer; } if (this.state.callOverlayVisible) { let content = ( ); - if (this.props.intercomDtmfTone) { - content = ( - - - - ); - } buttons = ({content}); } const remoteStreamUrl = this.state.remoteStream ? this.state.remoteStream.toURL() : null const show = this.state.callOverlayVisible || this.state.reconnectingCall; return ( {this.state.remoteVideoShow && !this.state.reconnectingCall ? : null } { this.state.localVideoShow ? : null } {this.state.reconnectingCall ? : null } {buttons} ); } } VideoBox.propTypes = { call : PropTypes.object, connection : PropTypes.object, photo : PropTypes.string, accountId : PropTypes.string, remoteUri : PropTypes.string, remoteDisplayName : PropTypes.string, localMedia : PropTypes.object, hangupCall : PropTypes.func, info : PropTypes.string, shareScreen : PropTypes.func, escalateToConference : PropTypes.func, generatedVideoTrack : PropTypes.bool, callKeepSendDtmf : PropTypes.func, toggleMute : PropTypes.func, toggleSpeakerPhone : PropTypes.func, speakerPhoneEnabled : PropTypes.bool, intercomDtmfTone : PropTypes.string, orientation : PropTypes.string, isTablet : PropTypes.bool, reconnectingCall : PropTypes.bool, muted : PropTypes.bool, showLogs : PropTypes.func, goBackFunc : PropTypes.func, callState : PropTypes.object, messages : PropTypes.object, sendMessage : PropTypes.func, reSendMessage : PropTypes.func, confirmRead : PropTypes.func, deleteMessage : PropTypes.func, expireMessage : PropTypes.func, getMessages : PropTypes.func, pinMessage : PropTypes.func, unpinMessage : PropTypes.func, selectedContact : PropTypes.object }; export default VideoBox;