ref(join) remove overlay shown for a slow gUM flow (#12268)

conference.js

@@ -144,7 +144,7 @@ import {
     isModerationNotificationDisplayed,
     showNotification
 } from './react/features/notifications';
-import { mediaPermissionPromptVisibilityChanged, toggleSlowGUMOverlay } from './react/features/overlay';
+import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
 import { suspendDetected } from './react/features/power-monitor';
 import {
     initPrejoin,
@@ -519,11 +519,6 @@ export default {
             );
         }
 
-        JitsiMeetJS.mediaDevices.addEventListener(
-            JitsiMediaDevicesEvents.SLOW_GET_USER_MEDIA,
-            () => APP.store.dispatch(toggleSlowGUMOverlay(true))
-        );
-
         let tryCreateLocalTracks;
 
         // On Electron there is no permission prompt for granting permissions. That's why we don't need to
@@ -533,8 +528,7 @@ export default {
         const audioOptions = {
             devices: [ MEDIA_TYPE.AUDIO ],
             timeout,
-            firePermissionPromptIsShownEvent: true,
+            firePermissionPromptIsShownEvent: true
-            fireSlowPromiseEvent: true
         };
 
         // FIXME is there any simpler way to rewrite this spaghetti below ?
@@ -585,8 +579,7 @@ export default {
             tryCreateLocalTracks = createLocalTracksF({
                 devices: initialDevices,
                 timeout,
-                firePermissionPromptIsShownEvent: true,
+                firePermissionPromptIsShownEvent: true
-                fireSlowPromiseEvent: true
             })
                 .catch(err => {
                     if (requestedAudio && requestedVideo) {
@@ -629,8 +622,7 @@ export default {
                     return requestedVideo
                         ? createLocalTracksF({
                             devices: [ MEDIA_TYPE.VIDEO ],
-                            firePermissionPromptIsShownEvent: true,
+                            firePermissionPromptIsShownEvent: true
-                            fireSlowPromiseEvent: true
                         })
                         : [];
                 })
@@ -651,7 +643,6 @@ export default {
         // the user inputs their credentials, but the dialog would be
         // overshadowed by the overlay.
         tryCreateLocalTracks.then(tracks => {
-            APP.store.dispatch(toggleSlowGUMOverlay(false));
             APP.store.dispatch(mediaPermissionPromptVisibilityChanged(false));
 
             return tracks;

react/features/base/tracks/functions.ts

@@ -132,9 +132,6 @@ export async function createLocalPresenterTrack(options: TrackOptions, desktopHe
  * @param {boolean} [options.firePermissionPromptIsShownEvent] - Whether lib-jitsi-meet
  * should check for a {@code getUserMedia} permission prompt and fire a
  * corresponding event.
- * @param {boolean} [options.fireSlowPromiseEvent] - Whether lib-jitsi-meet
- * should check for a slow {@code getUserMedia} request and fire a
- * corresponding event.
  * @param {IStore} store - The redux store in the context of which the function
  * is to execute and from which state such as {@code config} is to be retrieved.
  * @returns {Promise<JitsiLocalTrack[]>}
@@ -145,7 +142,6 @@ export function createLocalTracksF(options: TrackOptions = {}, store?: IStore) {
         desktopSharingSourceDevice,
         desktopSharingSources,
         firePermissionPromptIsShownEvent,
-        fireSlowPromiseEvent,
         timeout
     } = options;
 
@@ -193,7 +189,6 @@ export function createLocalTracksF(options: TrackOptions = {}, store?: IStore) {
                     effects,
                     firefox_fake_device, // eslint-disable-line camelcase
                     firePermissionPromptIsShownEvent,
-                    fireSlowPromiseEvent,
                     micDeviceId,
                     resolution,
                     timeout

react/features/base/tracks/types.ts

@@ -14,7 +14,6 @@ export interface TrackOptions {
     devices?: string[];
     facingMode?: string;
     firePermissionPromptIsShownEvent?: boolean;
-    fireSlowPromiseEvent?: boolean;
     micDeviceId?: string | null;
     timeout?: number;
 }

react/features/overlay/actionTypes.ts

@@ -14,17 +14,6 @@
 export const MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED
     = 'MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED';
 
-/**
- * The type of the Redux action which signals that the overlay for slow gUM is visible or not.
- *
- * {
- *     type: TOGGLE_SLOW_GUM_OVERLAY,
- *     isVisible: {boolean},
- * }
- * @public
- */
-export const TOGGLE_SLOW_GUM_OVERLAY = 'TOGGLE_SLOW_GUM_OVERLAY';
-
 /**
  * Adjust the state of the fatal error which shows/hides the reload screen. See
  * action methods's description for more info about each of the fields.

react/features/overlay/actions.js

@@ -3,8 +3,7 @@
 import {
     MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED,
     SET_FATAL_ERROR,
-    SET_PAGE_RELOAD_OVERLAY_CANCELED,
+    SET_PAGE_RELOAD_OVERLAY_CANCELED
-    TOGGLE_SLOW_GUM_OVERLAY
 } from './actionTypes';
 
 /**
@@ -28,24 +27,6 @@ export function mediaPermissionPromptVisibilityChanged(isVisible: boolean, brows
     };
 }
 
-/**
- * Signals that the prompt for media permission is visible or not.
- *
- * @param {boolean} isVisible - If the value is true - the prompt for media
- * permission is visible otherwise the value is false/undefined.
- * @public
- * @returns {{
-*     type: SLOW_GET_USER_MEDIA_OVERLAY,
-*     isVisible: {boolean}
-* }}
-*/
-export function toggleSlowGUMOverlay(isVisible: boolean) {
-    return {
-        type: TOGGLE_SLOW_GUM_OVERLAY,
-        isVisible
-    };
-}
-
 /**
  * The action indicates that an unrecoverable error has occurred and the reload
  * screen will be displayed or hidden.

react/features/overlay/components/web/AbstractSlowGUMOverlay.js

@@ -1,33 +0,0 @@
-// @flow
-
-import { Component } from 'react';
-
-/**
- * The type of the React {@code Component} props of
- * {@link AbstractSlowGUMOverlay}.
- */
-type Props = {
-
-    /**
-     * The function to translate human-readable text.
-     */
-    t: Function
-};
-
-/**
- * Implements a React {@link Component} for slow gUM overlay. Shown when
- * a slow gUM promise resolution is detected.
- */
-export default class AbstractSlowGUMOverlay extends Component<Props> {
-    /**
-     * Determines whether this overlay needs to be rendered (according to a
-     * specific redux state). Called by {@link OverlayContainer}.
-     *
-     * @param {Object} state - The redux state.
-     * @returns {boolean} - If this overlay needs to be rendered, {@code true};
-     * {@code false}, otherwise.
-     */
-    static needsRender(state: Object) {
-        return state['features/overlay'].isSlowGUMOverlayVisible;
-    }
-}

react/features/overlay/components/web/SlowGUMOverlay.js

@@ -1,36 +0,0 @@
-// @flow
-import Spinner from '@atlaskit/spinner';
-import React from 'react';
-
-import { translate } from '../../../base/i18n';
-
-import AbstractSlowGUMOverlay from './AbstractSlowGUMOverlay';
-import OverlayFrame from './OverlayFrame';
-
-/**
- * Implements a React {@link Component} for slow gUM overlay. Shown when
- * a slow gUM promise resolution is detected.
- */
-class SlowGUMOverlay extends AbstractSlowGUMOverlay {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        // const { t } = this.props;
-
-        return (
-            <OverlayFrame>
-                <div className = { 'overlay__spinner-container' }>
-                    <Spinner
-                        invertColor = { true }
-                        size = { 'large' } />
-                </div>
-            </OverlayFrame>
-        );
-    }
-}
-
-export default translate(SlowGUMOverlay);

react/features/overlay/components/web/index.js

@@ -5,4 +5,3 @@ export { default as OverlayFrame } from './OverlayFrame';
 export { default as PageReloadOverlay } from './PageReloadOverlay';
 export { default as SuspendedOverlay } from './SuspendedOverlay';
 export { default as UserMediaPermissionsOverlay } from './UserMediaPermissionsOverlay';
-export { default as SlowGUMOverlay } from './SlowGUMOverlay';

react/features/overlay/overlays.web.js

@@ -2,7 +2,6 @@
 
 import {
     PageReloadOverlay,
-    SlowGUMOverlay,
     SuspendedOverlay,
     UserMediaPermissionsOverlay
 } from './components/web';
@@ -16,7 +15,6 @@ export function getOverlays(): Array<Object> {
     return [
         PageReloadOverlay,
         SuspendedOverlay,
-        UserMediaPermissionsOverlay,
+        UserMediaPermissionsOverlay
-        SlowGUMOverlay
     ];
 }

react/features/overlay/reducer.ts

@@ -4,15 +4,13 @@ import { assign, set } from '../base/redux/functions';
 
 import {
     MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED,
-    SET_FATAL_ERROR,
+    SET_FATAL_ERROR
-    TOGGLE_SLOW_GUM_OVERLAY
 } from './actionTypes';
 
 export interface IOverlayState {
     browser?: string;
     fatalError?: Error;
     isMediaPermissionPromptVisible?: boolean;
-    isSlowGUMOverlayVisible?: boolean;
     loadConfigOverlayVisible?: boolean;
 }
 
@@ -35,9 +33,6 @@ ReducerRegistry.register<IOverlayState>('features/overlay', (state = {}, action)
 
     case SET_FATAL_ERROR:
         return _setFatalError(state, action);
-
-    case TOGGLE_SLOW_GUM_OVERLAY:
-        return _toggleSlowGUMOverlay(state, action);
     }
 
     return state;
@@ -62,24 +57,6 @@ function _mediaPermissionPromptVisibilityChanged(
     });
 }
 
-/**
- * Reduces a specific redux action TOGGLE_SLOW_GUM_OVERLAY of
- * the feature overlay.
- *
- * @param {Object} state - The redux state of the feature overlay.
- * @param {Action} action - The redux action to reduce.
- * @private
- * @returns {Object} The new state of the feature overlay after the reduction of
- * the specified action.
- */
-function _toggleSlowGUMOverlay(
-        state: IOverlayState,
-        { isVisible }: { isVisible?: boolean; }) {
-    return assign(state, {
-        isSlowGUMOverlayVisible: isVisible
-    });
-}
-
 /**
  * Sets the {@code LoadConfigOverlay} overlay visible or not.
  *