diff --git a/android/sdk/src/main/java/org/jitsi/meet/sdk/IncomingCallExternalAPIModule.java b/android/sdk/src/main/java/org/jitsi/meet/sdk/IncomingCallExternalAPIModule.java index a56f83acb..e3c384456 100644 --- a/android/sdk/src/main/java/org/jitsi/meet/sdk/IncomingCallExternalAPIModule.java +++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/IncomingCallExternalAPIModule.java @@ -1,6 +1,8 @@ package org.jitsi.meet.sdk; import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.bridge.ReactMethod; +import com.facebook.react.bridge.ReadableMap; class IncomingCallExternalAPIModule extends AbstractExternalAPIModule { @@ -31,4 +33,10 @@ class IncomingCallExternalAPIModule extends AbstractExternalAPIModule { * @returns {ReactElement} */ render() { - const { t } = this.props; + const { t, _callerName } = this.props; - return ( // TODO: layout and styles - - { this.props._callerName } - - { t('incomingCall.answer') } + return ( + + + { t('incomingCall.title') } - - { t('incomingCall.decline') } + + { _callerName } + { this._renderCallerAvatar() } + { this._renderButtons() } + + ); + } + + /** + * Renders caller avatar. + * + * @private + * @returns {React$Node} + */ + _renderCallerAvatar() { + return ( + + + + ); + } + + /** + * Renders buttons. + * + * @private + * @returns {React$Node} + */ + _renderButtons() { + const { t, _onAnswered, _onDeclined } = this.props; + + return ( + + + + + { t('incomingCall.decline') } + + + + + + { t('incomingCall.answer') } + + ); } diff --git a/react/features/mobile/incoming-call/components/styles.js b/react/features/mobile/incoming-call/components/styles.js index 5e50f9dda..30f193b9e 100644 --- a/react/features/mobile/incoming-call/components/styles.js +++ b/react/features/mobile/incoming-call/components/styles.js @@ -4,11 +4,78 @@ import { createStyleSheet } from '../../../base/styles'; -const TEXT_COLOR = ColorPalette.white; +export const CALLER_AVATAR_SIZE = 135; + +const _text = { + color: ColorPalette.white, + margin: BoxModel.margin, + fontSize: 16 +}; + +const _button = { + alignSelf: 'center' +}; + +const _responseButton = { + ..._button, + justifyContent: 'center', + borderRadius: 30, + borderWidth: 0, + height: 60, + width: 60 +}; export default createStyleSheet({ - button: { - color: TEXT_COLOR, - margin: BoxModel.margin + + pageContainer: { + padding: 50, + flex: 1, + alignItems: 'center', + backgroundColor: ColorPalette.blue + }, + + title: { + ..._text + }, + + callerName: { + ..._text, + fontSize: 36 + }, + + avatar: { + marginVertical: 50 + }, + + buttonContainer: { + flex: 1, + alignSelf: 'stretch', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-end' + }, + + buttonText: { + ..._button, + ..._text + }, + + buttonIcon: { + ..._button, + color: ColorPalette.white, + fontSize: 24 + }, + + declineButton: { + ..._responseButton, + backgroundColor: '#FC4D36' + }, + + answerButton: { + ..._responseButton, + backgroundColor: '#36A874', + transform: [ + { rotateZ: '130deg' } + ] } });