feat(prejoin): fix join meeting from external/calendar link while in …

…other meeting

react/features/app/middlewares.native.ts

@@ -1,5 +1,6 @@
 import '../dynamic-branding/middleware';
 import '../gifs/middleware';
+import '../prejoin/middleware';
 import '../mobile/audio-mode/middleware';
 import '../mobile/background/middleware';
 import '../mobile/call-integration/middleware';

react/features/prejoin/actionTypes.ts

@@ -39,16 +39,6 @@ export const SET_DIALOUT_STATUS = 'SET_DIALOUT_STATUS';
  */
 export const SET_JOIN_BY_PHONE_DIALOG_VISIBLITY = 'SET_JOIN_BY_PHONE_DIALOG_VISIBLITY';
 
-/**
- * Action type to disable the audio while on prejoin page.
- */
-export const SET_PREJOIN_AUDIO_DISABLED = 'SET_PREJOIN_AUDIO_DISABLED';
-
-/**
- * Action type to mute/unmute the audio while on prejoin page.
- */
-export const SET_PREJOIN_AUDIO_MUTED = 'SET_PREJOIN_AUDIO_MUTED';
-
 /**
  * Action type to set the errors while creating the prejoin streams.
  */
@@ -58,3 +48,8 @@ export const SET_PREJOIN_DEVICE_ERRORS = 'SET_PREJOIN_DEVICE_ERRORS';
  * Action type to set the visibility of the prejoin page.
  */
 export const SET_PREJOIN_PAGE_VISIBILITY = 'SET_PREJOIN_PAGE_VISIBILITY';
+
+/**
+ * Action type to track if a participant finished joining or not.
+ */
+export const SET_IS_JOINING = 'SET_IS_JOINING';

react/features/prejoin/actions.native.ts

@@ -4,6 +4,8 @@ import { navigateRoot } from '../mobile/navigation/rootNavigationContainerRef';
 import { screen } from '../mobile/navigation/routes';
 import { showVisitorsQueue } from '../visitors/functions';
 
+import { SET_IS_JOINING } from './actionTypes';
+
 /**
  * Action used to start the conference.
  *
@@ -21,3 +23,16 @@ export function joinConference(options?: Object, _ignoreJoiningInProgress = fals
         }
     };
 }
+
+/**
+ * Action used to track is a participant is joining.
+ *
+ * @param {boolean} isJoining - Check if they are joining or not.
+ * @returns {boolean}
+ */
+export function setIsJoining(isJoining: boolean) {
+    return {
+        type: SET_IS_JOINING,
+        isJoining
+    };
+}

react/features/prejoin/components/native/Prejoin.tsx

@@ -38,7 +38,8 @@ import { navigateRoot } from '../../../mobile/navigation/rootNavigationContainer
 import { screen } from '../../../mobile/navigation/routes';
 import AudioMuteButton from '../../../toolbox/components/native/AudioMuteButton';
 import VideoMuteButton from '../../../toolbox/components/native/VideoMuteButton';
-import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions';
+import { setIsJoining } from '../../actions.native';
+import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions.native';
 import { IPrejoinProps } from '../../types';
 import { hasDisplayName } from '../../utils';
 
@@ -52,6 +53,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     const aspectRatio = useSelector(
         (state: IReduxState) => state['features/base/responsive-ui']?.aspectRatio
     );
+    const isParticipantJoining = useSelector((state: IReduxState) => state['features/prejoin']?.isJoining)
     const localParticipant = useSelector((state: IReduxState) => getLocalParticipant(state));
     const isDisplayNameMandatory = useSelector((state: IReduxState) => isDisplayNameRequired(state));
     const isDisplayNameVisible
@@ -70,8 +72,6 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     const showDisplayNameInput = useMemo(
         () => isDisplayNameVisible && (displayName || !isDisplayNameReadonly),
         [ displayName, isDisplayNameReadonly, isDisplayNameVisible ]);
-    const [ isJoining, setIsJoining ]
-        = useState(false);
     const onChangeDisplayName = useCallback(event => {
         const fieldValue = getFieldValue(event);
 
@@ -82,8 +82,8 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     }, [ displayName ]);
 
     const onJoin = useCallback(() => {
-        setIsJoining(true);
         dispatch(connect());
+        dispatch(setIsJoining(true));
         navigateRoot(screen.conference.root);
     }, [ dispatch ]);
 
@@ -210,16 +210,16 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                 }
                 <Button
                     accessibilityLabel = 'prejoin.joinMeeting'
-                    disabled = { showDisplayNameError }
+                    disabled = { showDisplayNameError || isParticipantJoining }
                     labelKey = 'prejoin.joinMeeting'
-                    onClick = { isJoining ? undefined : maybeJoin }
+                    onClick = { maybeJoin }
                     style = { styles.joinButton }
                     type = { PRIMARY } />
                 <Button
                     accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
-                    disabled = { showDisplayNameError }
+                    disabled = { showDisplayNameError || isParticipantJoining }
                     labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
-                    onClick = { isJoining ? undefined : onJoinLowBandwidth }
+                    onClick = { onJoinLowBandwidth }
                     style = { styles.joinButton }
                     type = { TERTIARY } />
             </View>

react/features/prejoin/middleware.native.ts

@@ -0,0 +1,40 @@
+import { AnyAction } from 'redux';
+
+import { IStore } from '../app/types';
+import { CONFERENCE_FAILED, CONFERENCE_JOINED } from '../base/conference/actionTypes';
+import { CONNECTION_FAILED } from '../base/connection/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { setIsJoining } from './actions.native';
+
+/**
+ * The redux middleware for {@link Prejoin}.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case CONFERENCE_FAILED:
+    case CONNECTION_FAILED:
+        store.dispatch(setIsJoining(false));
+        break;
+    case CONFERENCE_JOINED:
+        return _conferenceJoined(store, next, action);
+    }
+
+    return next(action);
+});
+
+/**
+ * Handles cleanup of prejoin state when a conference is joined.
+ *
+ * @param {Object} store - The Redux store.
+ * @param {Function} next - The Redux next function.
+ * @param {Object} action - The Redux action.
+ * @returns {Object}
+ */
+function _conferenceJoined({ dispatch }: IStore, next: Function, action: AnyAction) {
+    dispatch(setIsJoining(false));
+
+    return next(action);
+}

react/features/prejoin/middleware.web.ts

@@ -15,8 +15,8 @@ import {
     setDeviceStatusOk,
     setDeviceStatusWarning,
     setJoiningInProgress
-} from './actions';
-import { isPrejoinPageVisible } from './functions.any';
+} from './actions.web';
+import { isPrejoinPageVisible } from './functions.web';
 
 /**
  * The redux middleware for {@link PrejoinPage}.

react/features/prejoin/reducer.ts

@@ -7,6 +7,7 @@ import {
     SET_DIALOUT_COUNTRY,
     SET_DIALOUT_NUMBER,
     SET_DIALOUT_STATUS,
+    SET_IS_JOINING,
     SET_JOIN_BY_PHONE_DIALOG_VISIBLITY,
     SET_PREJOIN_DEVICE_ERRORS,
     SET_PREJOIN_PAGE_VISIBILITY,
@@ -28,7 +29,8 @@ const DEFAULT_STATE = {
     rawError: '',
     showPrejoin: true,
     skipPrejoinOnReload: false,
-    showJoinByPhoneDialog: false
+    showJoinByPhoneDialog: false,
+    isJoining: false
 };
 
 export interface IPrejoinState {
@@ -48,6 +50,7 @@ export interface IPrejoinState {
     showJoinByPhoneDialog: boolean;
     showPrejoin: boolean;
     skipPrejoinOnReload: boolean;
+    isJoining: boolean;
 }
 
 /**
@@ -128,6 +131,13 @@ ReducerRegistry.register<IPrejoinState>(
             };
         }
 
+        case SET_IS_JOINING: {
+            return {
+                ...state,
+                isJoining: action.isJoining
+            };
+        }
+
         default:
             return state;
         }