diff --git a/app/assets/styles/blink/_AudioCallBox.scss b/app/assets/styles/blink/_AudioCallBox.scss index f999d26..19c8e8a 100644 --- a/app/assets/styles/blink/_AudioCallBox.scss +++ b/app/assets/styles/blink/_AudioCallBox.scss @@ -1,53 +1,53 @@ .container { flex: 1; } .userIconContainer { - padding-top: 50px; + padding-top: 20px; margin: 0 auto; } .buttonContainer { justify-self: flex-end; flex-direction: row; margin: 0 auto; margin-top:auto; bottom: 20; } .button { background-color: white; margin: 10px; padding-top: 5px; padding-left: 0px; } .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, .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/components/Call.js b/app/components/Call.js index 8ac7ffa..9b13039 100644 --- a/app/components/Call.js +++ b/app/components/Call.js @@ -1,228 +1,228 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; import assert from 'assert'; import debug from 'react-native-debug'; import autoBind from 'auto-bind'; import Logger from "../../Logger"; import AudioCallBox from './AudioCallBox'; import LocalMedia from './LocalMedia'; import VideoBox from './VideoBox'; import config from '../config'; const logger = new Logger("Call"); class Call extends Component { constructor(props) { super(props); autoBind(this); if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) { logger.debug('Will send audio only'); this.state = {audioOnly: true}; } else { this.state = {audioOnly: false}; } // If current call is available on mount we must have incoming if (this.props.currentCall != null) { this.props.currentCall.on('stateChanged', this.callStateChanged); } } componentWillReceiveProps(nextProps) { // Needed for switching to incoming call while in a call if (this.props.currentCall != null && this.props.currentCall != nextProps.currentCall) { if (nextProps.currentCall != null) { nextProps.currentCall.on('stateChanged', this.callStateChanged); } else { this.props.currentCall.removeListener('stateChanged', this.callStateChanged); } } } callStateChanged(oldState, newState, data) { // console.log('Call: callStateChanged', newState, '->', newState); if (newState === 'established') { // Check the media type again, remote can choose to not accept all offered media types const currentCall = this.props.currentCall; const remoteHasStreams = currentCall.getRemoteStreams().length > 0; const remoteHasNoVideoTracks = currentCall.getRemoteStreams()[0].getVideoTracks().length === 0; const remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly'; const remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive'; if (remoteHasStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) { console.log('Media type changed to audio'); // Stop local video if (this.props.localMedia.getVideoTracks().length !== 0) { currentCall.getLocalStreams()[0].getVideoTracks()[0].stop(); } this.setState({audioOnly: true}); this.props.speakerphoneOff(); } else { this.forceUpdate(); } currentCall.removeListener('stateChanged', this.callStateChanged); // Switch to video earlier. The callOverlay has a handle on // 'established'. It starts a timer. To prevent a state updating on // unmounted component we try to switch on 'accept'. This means we get // to localMedia first. } else if (newState === 'accepted') { // Switch if we have audioOnly and local videotracks. This means // the call object switched and we are transitioning to an // incoming call. if (this.state.audioOnly && this.props.localMedia && this.props.localMedia.getVideoTracks().length !== 0) { console.log('Media type changed to video on accepted'); this.setState({audioOnly: false}); this.props.speakerphoneOn(); } } this.forceUpdate(); } findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } call() { assert(this.props.currentCall === null, 'currentCall is not null'); //console.log('Call: starting call', this.props.callUUID, 'to', this.props.targetUri); let options = {pcConfig: {iceServers: config.iceServers}, id: this.props.callUUID}; options.localStream = this.props.localMedia; let call = this.props.account.call(this.props.targetUri, options); call.on('stateChanged', this.callStateChanged); } answerCall() { console.log('Call: answer call'); assert(this.props.currentCall !== null, 'currentCall is null'); let options = {pcConfig: {iceServers: config.iceServers}}; options.localStream = this.props.localMedia; this.props.currentCall.answer(options); } hangupCall() { console.log('Call: hangup call'); let callUUID = this.props.currentCall._callkeepUUID; this.props.hangupCall(callUUID); } mediaPlaying() { if (this.props.currentCall === null) { this.call(); } else { this.answerCall(); } } render() { console.log('Call: render call to', this.props.targetUri); let box = null; let remoteUri = this.props.targetUri; let remoteDisplayName; if (this.props.currentCall !== null && this.props.currentCall.state == 'established') { remoteUri = this.props.currentCall.remoteIdentity.uri; remoteDisplayName = this.props.currentCall.remoteIdentity.displayName || this.props.currentCall.remoteIdentity.uri; } else { remoteUri = this.props.targetUri; remoteDisplayName = this.props.targetUri; } if (remoteUri.indexOf('3333@') > -1) { remoteDisplayName = 'Video Test'; } else if (remoteUri.indexOf('4444@') > -1) { remoteDisplayName = 'Echo Test'; } else { var contact_obj = this.findObjectByKey(this.props.contacts, 'uri', remoteUri); if (contact_obj) { remoteDisplayName = contact_obj.displayName; } } console.log('Call: render call to remoteUri', remoteUri); if (this.props.localMedia !== null) { - console.log('Will render audio box'); + //console.log('Will render audio box'); if (this.state.audioOnly) { box = ( ); } else { if (this.props.currentCall != null && this.props.currentCall.state === 'established') { box = ( ); } else { console.log('Will render local media'); if (this.props.currentCall && this.props.currentCall.state && this.props.currentCall.state === 'terminated') { // do not render } else { box = ( ); } } } } return box; } } Call.propTypes = { account : PropTypes.object.isRequired, hangupCall : PropTypes.func.isRequired, shareScreen : PropTypes.func, currentCall : PropTypes.object, escalateToConference : PropTypes.func, localMedia : PropTypes.object, targetUri : PropTypes.string, generatedVideoTrack : PropTypes.bool, callKeepSendDtmf : PropTypes.func, callKeepToggleMute : PropTypes.func, speakerphoneOn : PropTypes.func, speakerphoneOff : PropTypes.func, callUUID : PropTypes.string, contacts : PropTypes.object }; export default Call;