add appState listener to send participant left status signal if app i…

…s inactive.

react/features/base/react/components/native/WaitingMessage.js

@@ -100,9 +100,9 @@ class WaitingMessage extends Component<Props, State> {
     }
 
     render() {
-        const { conferenceHasStarted } = this.props;
+        const { conferenceHasStarted, appstate } = this.props;
 
-        if (conferenceHasStarted) {
+        if (conferenceHasStarted || appstate !== "active") {
             return null;
         }
 
@@ -115,28 +115,52 @@ class WaitingMessage extends Component<Props, State> {
         );
     }
 
+    _IsTestMode() {
+        const { jwt } = this.props;
+        const jwtPayload = jwt && jwtDecode(jwt) || null;
+        const participantId = jwtPayload && jwtPayload.context && jwtPayload.context.user && jwtPayload.context.user.participant_id;
+        const videoChatSessionId = jwtPayload && jwtPayload.context && jwtPayload.context.video_chat_session_id;
+        const participantEmail = jwtPayload && jwtPayload.context && jwtPayload.context.user && jwtPayload.context.user.email;
+
+        return jwtPayload && participantId === 0 && videoChatSessionId === 0 && participantEmail === '[email protected]';
+    }
+
     getWaitingMessage() {
         const { waitingMessageFromProps } = this.props;
         const { beforeAppointmentStart, appointmentStartAt } = this.state;
-        let header, text;
-        header = <Text
+
+        let header = <Text
             style={styles.waitingMessageHeader}>{waitingMessageFromProps ? waitingMessageFromProps.header
             : 'Waiting for the other participant to join...'}</Text>;
-        text = <Text style={styles.waitingMessageText}>{
+
+        let text = <Text style={styles.waitingMessageText}>{
             waitingMessageFromProps ? waitingMessageFromProps.text :
                 'Sit back, relax and take a moment for yourself.'
         }</Text>;
+
         if (beforeAppointmentStart && appointmentStartAt && !waitingMessageFromProps) {
             const time = moment(appointmentStartAt, 'YYYY-MM-DD HH:mm')
                 .format('YYYY-MM-DD HH:mm');
+
             header = (
                 <Text style={styles.waitingMessageHeader}>Your appointment will
                     begin
                     at {getLocalizedDateFormatter(time)
                         .format('hh:mm A')}</Text>);
         }
 
-        return <View style={{ backgroundColor: 'transparent' }}>
+        if (this._IsTestMode()) {
+            header =
+                <Text style={styles.waitingMessageHeader}>Testing your audio and
+                    video...</Text>;
+
+            text = <Text style={styles.waitingMessageText}>
+                This is just a test area. Begin your online appointment from
+                your Upcoming Appointments page.
+            </Text>;
+        }
+
+        return <View style={{ backgroundColor: 'transparent'}}>
             {
                 header
             }
@@ -147,26 +171,14 @@ class WaitingMessage extends Component<Props, State> {
     }
 
     _renderWaitingMessage() {
-        const { stopAnimation} = this.props;
-        const { beforeAppointmentStart, appointmentStartAt } = this.state;
+        const { stopAnimation } = this.props;
         const animate = stopAnimation ? null : this.animatedValue.interpolate({
             inputRange: [ 0, .5, 1 ],
             outputRange: [ .1, 1, .1 ]
         });
 
-        let header = <Text style={styles.waitingMessageHeader}>Waiting for the
-            other participant to join...</Text>;
         const image = <Image style={styles.watermark}
                              source={watermarkImg}/>;
-        if (beforeAppointmentStart && appointmentStartAt) {
-            const time = moment(appointmentStartAt, 'YYYY-MM-DD HH:mm')
-                .format('YYYY-MM-DD HH:mm');
-            header = (
-                <Text style={styles.waitingMessageHeader}>Your appointment will
-                    begin
-                    at {getLocalizedDateFormatter(time)
-                        .format('hh:mm A')}</Text>);
-        }
 
         return (<View style={[ styles.waitingMessageContainer ]}>
             <Animated.View className='waitingMessage'
@@ -188,9 +200,11 @@ function _mapStateToProps(state) {
     const { jwt } = state['features/base/jwt'];
     const participantCount = getParticipantCount(state);
     const remoteTracks = getRemoteTracks(state['features/base/tracks']);
+    const appstate = state['features/background'];
 
     return {
         jwt,
+        appstate: appstate && appstate.appState,
         conferenceHasStarted: participantCount > 1 && remoteTracks.length > 0
     };
 }

react/features/base/react/components/native/styles.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { BoxModel, ColorPalette } from '../../../styles';
+import { BoxModel, ColorPalette, JaneWeb } from '../../../styles';
 
 const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)';
 const SECONDARY_ACTION_BUTTON_SIZE = 30;
@@ -205,31 +205,30 @@ const SECTION_LIST_STYLES = {
 
 const WATING_MESSAGE_STYLES = {
     waitingMessageContainer: {
-        position: 'absolute',
-        top: 80,
-        width: '100%',
+        marginTop: 40,
         flexDirection: 'row',
-        backgroundColor: 'transparent'
     },
 
     waitingMessageImage: {
         marginRight: 5,
+        marginTop: 5,
     },
 
     waitingMessageHeader: {
         fontSize: 15,
         marginTop: 5,
-        color: ColorPalette.janeDarkColor,
+        color: ColorPalette.white,
         textAlign: 'left',
-        backgroundColor: 'transparent'
+        ...JaneWeb.regularFont,
     },
 
     waitingMessageText: {
         marginTop: 5,
         fontSize: 12,
-        color: ColorPalette.janeDarkColor,
+        color: ColorPalette.white,
         textAlign: 'left',
-        backgroundColor: 'transparent'
+        paddingRight:100,
+        ...JaneWeb.regularFont
     },
 
     watermark: {

react/features/base/styles/components/styles/JaneWeb.js

@@ -4,17 +4,17 @@ export const JaneWeb = {
         fontFamily: 'ProximaNova-Light',
         lineHeight: 26 // 1.1
     },
-    light: {
+    lightFont: {
         fontFamily: 'ProximaNova-Light'
     },
-    bold: {
+    boldFont: {
         fontFamily: 'ProximaNova-Bold'
     },
-    regular: {
+    regularFont: {
         fontFamily: 'ProximaNova-Bold',
         fontWeight: '400'
     },
-    semiBold: {
+    semiBoldFont: {
         fontFamily: 'ProximaNova-Bold',
         fontWeight: '600'
     }

react/features/conference/components/native/Conference.js

@@ -39,6 +39,8 @@ import NavigationBar from './NavigationBar';
 import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
 
 import type { AbstractProps } from '../AbstractConference';
+import { updateParticipantReadyStatus } from '../../../jane-waiting-area-native';
+import jwtDecode from 'jwt-decode';
 
 /**
  * The type of the React {@code Component} props of {@link Conference}.
@@ -153,10 +155,28 @@ class Conference extends AbstractConference<Props, *> {
      * @returns {void}
      */
     componentWillUnmount() {
+
         // Tear handling any hardware button presses for back navigation down.
         BackButtonRegistry.removeListener(this._onHardwareBackPress);
+
+    }
+
+    /**
+     * Implements {@link Component#componentDidUpdate()}. Invoked immediately
+     * after this component is updated check app background state and update
+     * the participant's ready status if app state is 'inactive' or 'background'
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentDidUpdate(prevProps) {
+        const { _participantType, _jwt, _jwtPayload, _participant } = this.props;
+        if (prevProps._appstate !== this.props._appstate && prevProps._appstate.appState === 'active') {
+            updateParticipantReadyStatus(_jwt, _jwtPayload, _participantType, _participant, 'left');
+        }
     }
 
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -333,8 +353,7 @@ class Conference extends AbstractConference<Props, *> {
                     { this._renderNotificationsContainer() }
                 </SafeAreaView>
 
-                {/*<TestConnectionInfo />*/}
-
+                <TestConnectionInfo />
                 { this._renderConferenceNotification() }
             </>
         );
@@ -439,6 +458,11 @@ function _mapStateToProps(state) {
     //   are leaving one.
     const connecting_
         = connecting || (connection && (joining || (!conference && !leaving)));
+    const { jwt } = state['features/base/jwt'];
+    const jwtPayload = jwt && jwtDecode(jwt) || null;
+    const participant = jwtPayload && jwtPayload.context && jwtPayload.context.user || null;
+    const participantType = participant && participant.participant_type || null;
+    const appstate = state['features/background'];
 
     return {
         ...abstractMapStateToProps(state),
@@ -496,7 +520,12 @@ function _mapStateToProps(state) {
          * @type {boolean}
          */
         _toolboxVisible: isToolboxVisible(state),
-        _enableJaneWaitingAreaPage: enableJaneWaitingAreaPage
+        _enableJaneWaitingAreaPage: enableJaneWaitingAreaPage,
+        _jwt: jwt,
+        _jwtPayload: jwtPayload,
+        _participantType: participantType,
+        _participant: participantType,
+        _appstate: appstate
     };
 }
 

react/features/jane-waiting-area-native/components/JaneWaitingArea.native.js

@@ -2,10 +2,8 @@
 
 import React, { Component } from 'react';
 import { connect } from '../../base/redux';
-import jwtDecode from 'jwt-decode';
 import { translate } from '../../base/i18n';
 import DialogBox from './DialogBox.native';
-import { updateParticipantReadyStatus } from '../functions';
 
 type Props = {
     appstate: any
@@ -17,32 +15,16 @@ class JaneWaitingAreaNative extends Component<Props, State> {
         super(props);
     }
 
-    componentDidUpdate(prevProps) {
-        const { participantType, jwt, jwtPayload, participant } = this.props;
-
-        if (prevProps.appstate !== this.props.appstate && this.props.appstate.appState === 'background') {
-            updateParticipantReadyStatus(jwt, jwtPayload, participantType, participant, 'left');
-        }
-    }
-
     render() {
         return (this.props.appstate.appState === 'active'
             && <DialogBox />) || null;
     }
 }
 
 function mapStateToProps(state): Object {
-    const { jwt } = state['features/base/jwt'];
     const appstate = state['features/background'];
-    const jwtPayload = jwt && jwtDecode(jwt) || null;
-    const participant = jwtPayload && jwtPayload.context && jwtPayload.context.user || null;
-    const participantType = participant && participant.participant_type || null;
 
     return {
-        jwt,
-        jwtPayload,
-        participantType,
-        participant,
         appstate
     };
 }