ref(web): startConference and initial GUM tracks management.

conference.js

@@ -592,7 +592,7 @@ export default {
         const handleInitialTracks = (options, tracks) => {
             let localTracks = tracks;
 
-            if (options.startWithAudioMuted || room?.isStartAudioMuted()) {
+            if (options.startWithAudioMuted) {
                 // Always add the track on Safari because of a known issue where audio playout doesn't happen
                 // if the user joins audio and video muted, i.e., if there is no local media capture.
                 if (browser.isWebKitBased()) {
@@ -601,64 +601,38 @@ export default {
                     localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.AUDIO);
                 }
             }
-            if (room?.isStartVideoMuted()) {
-                localTracks = localTracks.filter(track => track.getType() !== MEDIA_TYPE.VIDEO);
-            }
 
             return localTracks;
         };
-        const { dispatch } = APP.store;
+        const { dispatch, getState } = APP.store;
+        const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
 
-        if (isPrejoinPageVisible(state)) {
-            const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
-            const localTracks = await tryCreateLocalTracks;
+        dispatch(setInitialGUMPromise(tryCreateLocalTracks.then(async tr => {
+            const tracks = handleInitialTracks(initialOptions, tr);
 
-            // Initialize device list a second time to ensure device labels get populated in case of an initial gUM
-            // acceptance; otherwise they may remain as empty strings.
             this._initDeviceList(true);
 
-            if (isPrejoinPageVisible(state)) {
+            if (isPrejoinPageVisible(getState())) {
                 dispatch(gumPending([ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ], IGUMPendingState.NONE));
+                dispatch(setInitialGUMPromise());
 
-                return dispatch(initPrejoin(localTracks, errors));
+                // Note: Not sure if initPrejoin needs to be async. But let's wait for it just to be sure the
+                // tracks are added.
+                await dispatch(initPrejoin(tracks, errors));
+            } else {
+                APP.store.dispatch(displayErrorsForCreateInitialLocalTracks(errors));
+                setGUMPendingStateOnFailedTracks(tracks, APP.store.dispatch);
             }
 
-            logger.debug('Prejoin screen no longer displayed at the time when tracks were created');
-
-            APP.store.dispatch(displayErrorsForCreateInitialLocalTracks(errors));
-
-            const tracks = handleInitialTracks(initialOptions, localTracks);
-
-            setGUMPendingStateOnFailedTracks(tracks, APP.store.dispatch);
+            return {
+                tracks,
+                errors
+            };
+        })));
 
-            return this._setLocalAudioVideoStreams(tracks);
+        if (!isPrejoinPageVisible(getState())) {
+            dispatch(connect());
         }
-
-        const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
-        const gumPromise = tryCreateLocalTracks.then(tr => {
-            APP.store.dispatch(displayErrorsForCreateInitialLocalTracks(errors));
-
-            return tr;
-        }).then(tr => {
-            this._initDeviceList(true);
-
-            const filteredTracks = handleInitialTracks(initialOptions, tr);
-
-            setGUMPendingStateOnFailedTracks(filteredTracks, APP.store.dispatch);
-
-            return filteredTracks;
-        });
-
-        return Promise.all([
-            gumPromise,
-            dispatch(connect())
-        ]).catch(e => {
-            dispatch(setInitialGUMPromise(gumPromise));
-            throw e;
-        })
-        .then(([ tracks, _ ]) => {
-            this.startConference(tracks).catch(logger.error);
-        });
     },
 
     /**

react/features/authentication/actions.web.ts

@@ -1,13 +1,10 @@
 import { maybeRedirectToWelcomePage } from '../app/actions.web';
 import { IStore } from '../app/types';
-import { connect } from '../base/connection/actions.web';
 import { openDialog } from '../base/dialog/actions';
 import { browser } from '../base/lib-jitsi-meet';
-import { setInitialGUMPromise } from '../base/media/actions';
 
 import { CANCEL_LOGIN } from './actionTypes';
 import LoginQuestionDialog from './components/web/LoginQuestionDialog';
-import logger from './logger';
 
 export * from './actions.any';
 
@@ -79,24 +76,3 @@ export function openTokenAuthUrl(tokenAuthServiceUrl: string): any {
         }
     };
 }
-
-/**
- * Executes connect with the passed credentials and then continues the flow to start a conference.
- *
- * @param {string} jid - The jid for the connection.
- * @param {string} password - The password for the connection.
- * @returns {Function}
- */
-export function sumbitConnectionCredentials(jid?: string, password?: string) {
-    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
-        const { initialGUMPromise } = getState()['features/base/media'].common;
-
-        dispatch(connect(jid, password))
-            .then(() => initialGUMPromise ?? [])
-            .then((tracks: Array<Object> = []) => {
-                // clear the initial GUM promise since we don't need it anymore.
-                dispatch(setInitialGUMPromise());
-                APP.conference.startConference(tracks).catch(logger.error);
-            });
-    };
-}

react/features/authentication/components/web/LoginDialog.tsx

@@ -5,15 +5,15 @@ import { connect as reduxConnect } from 'react-redux';
 import { IReduxState, IStore } from '../../../app/types';
 import { IJitsiConference } from '../../../base/conference/reducer';
 import { IConfig } from '../../../base/config/configType';
+import { connect } from '../../../base/connection/actions.web';
 import { toJid } from '../../../base/connection/functions';
 import { translate, translateToHTML } from '../../../base/i18n/functions';
 import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import Input from '../../../base/ui/components/web/Input';
 import {
     authenticateAndUpgradeRole,
-    cancelLogin,
-    sumbitConnectionCredentials
+    cancelLogin
 } from '../../actions.web';
 
 /**
@@ -134,7 +134,7 @@ class LoginDialog extends Component<IProps, IState> {
         if (conference) {
             dispatch(authenticateAndUpgradeRole(jid, password, conference));
         } else {
-            dispatch(sumbitConnectionCredentials(jid, password));
+            dispatch(connect(jid, password));
         }
     }
 

react/features/authentication/middleware.ts

@@ -1,3 +1,5 @@
+import { batch } from 'react-redux';
+
 import { IStore } from '../app/types';
 import { APP_WILL_NAVIGATE } from '../base/app/actionTypes';
 import {
@@ -13,8 +15,9 @@ import {
     JitsiConferenceErrors,
     JitsiConnectionErrors
 } from '../base/lib-jitsi-meet';
-import { setInitialGUMPromise } from '../base/media/actions';
+import { gumPending, setInitialGUMPromise } from '../base/media/actions';
 import { MEDIA_TYPE } from '../base/media/constants';
+import { IGUMPendingState } from '../base/media/types';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import { isLocalTrackMuted } from '../base/tracks/functions.any';
 import { parseURIString } from '../base/util/uri';
@@ -144,7 +147,8 @@ MiddlewareRegistry.register(store => next => action => {
 
     case CONNECTION_FAILED: {
         const { error } = action;
-        const state = store.getState();
+        const { dispatch, getState } = store;
+        const state = getState();
         const { jwt } = state['features/base/jwt'];
 
         if (error
@@ -155,7 +159,10 @@ MiddlewareRegistry.register(store => next => action => {
 
             _handleLogin(store);
         } else {
-            store.dispatch(setInitialGUMPromise());
+            batch(() => {
+                dispatch(gumPending([ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ], IGUMPendingState.NONE));
+                dispatch(setInitialGUMPromise());
+            });
         }
 
         break;
@@ -267,7 +274,10 @@ function _handleLogin({ dispatch, getState }: IStore) {
     const videoMuted = isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.VIDEO);
 
     if (!room) {
-        dispatch(setInitialGUMPromise());
+        batch(() => {
+            dispatch(setInitialGUMPromise());
+            dispatch(gumPending([ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ], IGUMPendingState.NONE));
+        });
 
         logger.warn('Cannot handle login, room is undefined!');
 

react/features/base/conference/actions.web.ts

@@ -21,11 +21,5 @@ export function setupVisitorStartupMedia(media: Array<MediaType>) {
         if (media && Array.isArray(media) && media.length > 0) {
             dispatch(createAndAddInitialAVTracks(media));
         }
-
-        // FIXME: The name of the function doesn't fit the startConference execution but another PR will removes
-        // this and calls startConference based on the connection status. This will stay here temporary.
-        if (typeof APP !== 'undefined') {
-            APP.conference.startConference([]);
-        }
     };
 }

react/features/base/conference/middleware.any.ts

@@ -24,7 +24,7 @@ import LocalRecordingManager from '../../recording/components/Recording/LocalRec
 import { iAmVisitor } from '../../visitors/functions';
 import { overwriteConfig } from '../config/actions';
 import { CONNECTION_ESTABLISHED, CONNECTION_FAILED } from '../connection/actionTypes';
-import { connect, connectionDisconnected, disconnect } from '../connection/actions';
+import { connectionDisconnected, disconnect } from '../connection/actions';
 import { validateJwt } from '../jwt/functions';
 import { JitsiConferenceErrors, JitsiConferenceEvents, JitsiConnectionErrors } from '../lib-jitsi-meet';
 import { PARTICIPANT_UPDATED, PIN_PARTICIPANT } from '../participants/actionTypes';
@@ -37,7 +37,6 @@ import {
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 import StateListenerRegistry from '../redux/StateListenerRegistry';
 import { TRACK_ADDED, TRACK_REMOVED } from '../tracks/actionTypes';
-import { getLocalTracks } from '../tracks/functions.any';
 
 import {
     CONFERENCE_FAILED,
@@ -208,17 +207,7 @@ function _conferenceFailed({ dispatch, getState }: IStore, next: Function, actio
             dispatch(overwriteConfig(newConfig)) // @ts-ignore
                 .then(() => dispatch(conferenceWillLeave(conference)))
                 .then(() => conference.leave())
-                .then(() => dispatch(disconnect()))
-                .then(() => dispatch(connect()))
-                .then(() => {
-                    // FIXME: Workaround for the web version. To be removed once we get rid of conference.js
-                    if (typeof APP !== 'undefined') {
-                        const localTracks = getLocalTracks(getState()['features/base/tracks']);
-                        const jitsiTracks = localTracks.map((t: any) => t.jitsiTrack);
-
-                        APP.conference.startConference(jitsiTracks).catch(logger.error);
-                    }
-                });
+                .then(() => dispatch(disconnect()));
         }
 
         break;

react/features/base/conference/middleware.web.ts

@@ -4,8 +4,14 @@ import {
     setPrejoinPageVisibility,
     setSkipPrejoinOnReload
 } from '../../prejoin/actions.web';
+import { isPrejoinPageVisible } from '../../prejoin/functions';
+import { iAmVisitor } from '../../visitors/functions';
+import { CONNECTION_DISCONNECTED, CONNECTION_ESTABLISHED } from '../connection/actionTypes';
 import { hangup } from '../connection/actions.web';
 import { JitsiConferenceErrors } from '../lib-jitsi-meet';
+import { gumPending, setInitialGUMPromise } from '../media/actions';
+import { MEDIA_TYPE } from '../media/constants';
+import { IGUMPendingState } from '../media/types';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import {
@@ -131,6 +137,39 @@ MiddlewareRegistry.register(store => next => action => {
         releaseScreenLock();
 
         break;
+    case CONNECTION_DISCONNECTED: {
+        const { initialGUMPromise } = getState()['features/base/media'].common;
+
+        if (initialGUMPromise) {
+            store.dispatch(setInitialGUMPromise());
+        }
+
+        break;
+    }
+    case CONNECTION_ESTABLISHED: {
+        const state = getState();
+
+        if (!isPrejoinPageVisible(state)) {
+            const { initialGUMPromise = Promise.resolve({ tracks: [] }) } = state['features/base/media'].common;
+
+            initialGUMPromise.then(({ tracks }) => {
+                let tracksToUse = tracks ?? [];
+
+                if (iAmVisitor(getState())) {
+                    tracksToUse = [];
+                    tracks.forEach(track => track.dispose().catch(logger.error));
+                    dispatch(gumPending([ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ], IGUMPendingState.NONE));
+                }
+
+                dispatch(setInitialGUMPromise());
+
+                return APP.conference.startConference(tracksToUse);
+            })
+            .catch(logger.error);
+        }
+
+        break;
+    }
     }
 
     return next(action);

react/features/base/media/actions.ts

@@ -103,7 +103,7 @@ export function setCameraFacingMode(cameraFacingMode: string) {
  *     promise: Promise
  * }}
  */
-export function setInitialGUMPromise(promise?: Promise<Array<Object>>) {
+export function setInitialGUMPromise(promise?: Promise<{ errors: any; tracks: Array<any>; }>) {
     return {
         type: SET_INITIAL_GUM_PROMISE,
         promise

react/features/base/media/reducer.ts

@@ -273,7 +273,10 @@ interface IAudioState {
 }
 
 interface ICommonState {
-    initialGUMPromise?: Promise<Array<Object>>;
+    initialGUMPromise?: Promise<{
+        errors: any;
+        tracks: Array<any>;
+    }>;
 }
 
 interface IScreenshareState {

react/features/prejoin/actions.web.ts

@@ -4,16 +4,13 @@ import { IStore } from '../app/types';
 import { updateConfig } from '../base/config/actions';
 import { getDialOutStatusUrl, getDialOutUrl } from '../base/config/functions';
 import { connect } from '../base/connection/actions';
-import { browser } from '../base/lib-jitsi-meet';
 import { createLocalTrack } from '../base/lib-jitsi-meet/functions';
-import { MEDIA_TYPE } from '../base/media/constants';
 import { isVideoMutedByUser } from '../base/media/functions';
 import { updateSettings } from '../base/settings/actions';
 import { replaceLocalTrack, trackAdded } from '../base/tracks/actions';
 import {
     createLocalTracksF,
     getLocalAudioTrack,
-    getLocalTracks,
     getLocalVideoTrack
 } from '../base/tracks/functions';
 import { openURLInBrowser } from '../base/util/openURLInBrowser';
@@ -230,35 +227,7 @@ export function joinConference(options?: Object, ignoreJoiningInProgress = false
 
         options && dispatch(updateConfig(options));
 
-        dispatch(connect(jid, password)).then(async () => {
-            // TODO keep this here till we move tracks and conference management from
-            // conference.js to react.
-            const state = getState();
-            let localTracks = getLocalTracks(state['features/base/tracks']);
-
-            // Do not signal audio/video tracks if the user joins muted.
-            for (const track of localTracks) {
-                // Always add the audio track on Safari because of a known issue where audio playout doesn't happen
-                // if the user joins audio and video muted.
-                if (track.muted && !(browser.isWebKitBased() && track.jitsiTrack
-                        && track.jitsiTrack.getType() === MEDIA_TYPE.AUDIO)) {
-                    try {
-                        await dispatch(replaceLocalTrack(track.jitsiTrack, null));
-                    } catch (error) {
-                        logger.error(`Failed to replace local track (${track.jitsiTrack}) with null: ${error}`);
-                    }
-                }
-            }
-
-            // Re-fetch the local tracks after muted tracks have been removed above.
-            // This is needed, because the tracks are effectively disposed by the replaceLocalTrack and should not be
-            // used anymore.
-            localTracks = getLocalTracks(getState()['features/base/tracks']);
-
-            const jitsiTracks = localTracks.map((t: any) => t.jitsiTrack);
-
-            APP.conference.startConference(jitsiTracks).catch(logger.error);
-        })
+        dispatch(connect(jid, password))
         .catch(() => {
             // There is nothing to do here. This is handled and dispatched in base/connection/actions.
         });