fix(mobile/navigations) added LoadConfigOverlay to RootNavigator (#11067)
Converted LoadConfigOverlay to a JitsiScreen component that right now is part of navigation as ConnectingPage, plus I separated appNative and other actions into web and native.
This commit is contained in:
parent
f04a01ee3a
commit
5da40a5fb0
|
@ -0,0 +1,88 @@
|
|||
// @flow
|
||||
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
import { getLocationContextRoot } from '../base/util';
|
||||
|
||||
import { addTrackStateToURL } from './functions.any';
|
||||
|
||||
/**
|
||||
* Redirects to another page generated by replacing the path in the original URL
|
||||
* with the given path.
|
||||
*
|
||||
* @param {(string)} pathname - The path to navigate to.
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function redirectWithStoredParams(pathname: string) {
|
||||
return (dispatch: Dispatch<any>, getState: Function) => {
|
||||
const { locationURL } = getState()['features/base/connection'];
|
||||
const newLocationURL = new URL(locationURL.href);
|
||||
|
||||
newLocationURL.pathname = pathname;
|
||||
window.location.assign(newLocationURL.toString());
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Assigns a specific pathname to window.location.pathname taking into account
|
||||
* the context root of the Web app.
|
||||
*
|
||||
* @param {string} pathname - The pathname to assign to
|
||||
* window.location.pathname. If the specified pathname is relative, the context
|
||||
* root of the Web app will be prepended to the specified pathname before
|
||||
* assigning it to window.location.pathname.
|
||||
* @param {string} hashParam - Optional hash param to assign to
|
||||
* window.location.hash.
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function redirectToStaticPage(pathname: string, hashParam: ?string) {
|
||||
return () => {
|
||||
const windowLocation = window.location;
|
||||
let newPathname = pathname;
|
||||
|
||||
if (!newPathname.startsWith('/')) {
|
||||
// A pathname equal to ./ specifies the current directory. It will be
|
||||
// fine but pointless to include it because contextRoot is the current
|
||||
// directory.
|
||||
newPathname.startsWith('./')
|
||||
&& (newPathname = newPathname.substring(2));
|
||||
newPathname = getLocationContextRoot(windowLocation) + newPathname;
|
||||
}
|
||||
|
||||
if (hashParam) {
|
||||
windowLocation.hash = hashParam;
|
||||
}
|
||||
|
||||
windowLocation.pathname = newPathname;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page by restoring the original URL.
|
||||
*
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function reloadWithStoredParams() {
|
||||
return (dispatch: Dispatch<any>, getState: Function) => {
|
||||
const state = getState();
|
||||
const { locationURL } = state['features/base/connection'];
|
||||
|
||||
// Preserve the local tracks muted states.
|
||||
const newURL = addTrackStateToURL(locationURL, state);
|
||||
const windowLocation = window.location;
|
||||
const oldSearchString = windowLocation.search;
|
||||
|
||||
windowLocation.replace(newURL.toString());
|
||||
|
||||
if (newURL.search === oldSearchString) {
|
||||
// NOTE: Assuming that only the hash or search part of the URL will
|
||||
// be changed!
|
||||
// location.replace will not trigger redirect/reload when
|
||||
// only the hash params are changed. That's why we need to call
|
||||
// reload in addition to replace.
|
||||
windowLocation.reload();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
// @flow
|
||||
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
import { setRoom } from '../base/conference';
|
||||
import {
|
||||
configWillLoad,
|
||||
createFakeConfig,
|
||||
loadConfigError,
|
||||
restoreConfig,
|
||||
setConfig,
|
||||
storeConfig
|
||||
} from '../base/config';
|
||||
import { connect, disconnect, setLocationURL } from '../base/connection';
|
||||
import { loadConfig } from '../base/lib-jitsi-meet';
|
||||
import { createDesiredLocalTracks } from '../base/tracks';
|
||||
import {
|
||||
getBackendSafeRoomName,
|
||||
parseURIString,
|
||||
toURLString
|
||||
} from '../base/util';
|
||||
import { navigateRoot } from '../mobile/navigation/rootNavigationContainerRef';
|
||||
import { screen } from '../mobile/navigation/routes';
|
||||
import { setFatalError } from '../overlay';
|
||||
|
||||
import { getDefaultURL } from './functions';
|
||||
import { addTrackStateToURL } from './functions.native';
|
||||
import logger from './logger';
|
||||
|
||||
export * from './actions.any';
|
||||
|
||||
/**
|
||||
* Triggers an in-app navigation to a specific route. Allows navigation to be
|
||||
* abstracted between the mobile/React Native and Web/React applications.
|
||||
*
|
||||
* @param {string|undefined} uri - The URI to which to navigate. It may be a
|
||||
* full URL with an HTTP(S) scheme, a full or partial URI with the app-specific
|
||||
* scheme, or a mere room name.
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function appNavigate(uri: ?string) {
|
||||
return async (dispatch: Dispatch<any>, getState: Function) => {
|
||||
let location = parseURIString(uri);
|
||||
|
||||
// If the specified location (URI) does not identify a host, use the app's
|
||||
// default.
|
||||
if (!location || !location.host) {
|
||||
const defaultLocation = parseURIString(getDefaultURL(getState));
|
||||
|
||||
if (location) {
|
||||
location.host = defaultLocation.host;
|
||||
|
||||
// FIXME Turn location's host, hostname, and port properties into
|
||||
// setters in order to reduce the risks of inconsistent state.
|
||||
location.hostname = defaultLocation.hostname;
|
||||
location.pathname
|
||||
= defaultLocation.pathname + location.pathname.substr(1);
|
||||
location.port = defaultLocation.port;
|
||||
location.protocol = defaultLocation.protocol;
|
||||
} else {
|
||||
location = defaultLocation;
|
||||
}
|
||||
}
|
||||
|
||||
location.protocol || (location.protocol = 'https:');
|
||||
const { contextRoot, host, room } = location;
|
||||
const locationURL = new URL(location.toString());
|
||||
|
||||
if (room) {
|
||||
navigateRoot(screen.connecting);
|
||||
}
|
||||
|
||||
dispatch(disconnect());
|
||||
|
||||
dispatch(configWillLoad(locationURL, room));
|
||||
|
||||
let protocol = location.protocol.toLowerCase();
|
||||
|
||||
// The React Native app supports an app-specific scheme which is sure to not
|
||||
// be supported by fetch.
|
||||
protocol !== 'http:' && protocol !== 'https:' && (protocol = 'https:');
|
||||
|
||||
const baseURL = `${protocol}//${host}${contextRoot || '/'}`;
|
||||
let url = `${baseURL}config.js`;
|
||||
|
||||
// XXX In order to support multiple shards, tell the room to the deployment.
|
||||
room && (url += `?room=${getBackendSafeRoomName(room)}`);
|
||||
|
||||
let config;
|
||||
|
||||
// Avoid (re)loading the config when there is no room.
|
||||
if (!room) {
|
||||
config = restoreConfig(baseURL);
|
||||
}
|
||||
|
||||
if (!config) {
|
||||
try {
|
||||
config = await loadConfig(url);
|
||||
dispatch(storeConfig(baseURL, config));
|
||||
} catch (error) {
|
||||
config = restoreConfig(baseURL);
|
||||
|
||||
if (!config) {
|
||||
if (room) {
|
||||
dispatch(loadConfigError(error, locationURL));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no room (we are on the welcome page), don't fail, just create a fake one.
|
||||
logger.warn('Failed to load config but there is no room, applying a fake one');
|
||||
config = createFakeConfig(baseURL);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (getState()['features/base/config'].locationURL !== locationURL) {
|
||||
dispatch(loadConfigError(new Error('Config no longer needed!'), locationURL));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(setLocationURL(locationURL));
|
||||
dispatch(setConfig(config));
|
||||
dispatch(setRoom(room));
|
||||
|
||||
if (room) {
|
||||
dispatch(createDesiredLocalTracks());
|
||||
dispatch(connect());
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page.
|
||||
*
|
||||
* @protected
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function reloadNow() {
|
||||
return (dispatch: Dispatch<Function>, getState: Function) => {
|
||||
dispatch(setFatalError(undefined));
|
||||
|
||||
const state = getState();
|
||||
const { locationURL } = state['features/base/connection'];
|
||||
|
||||
// Preserve the local tracks muted state after the reload.
|
||||
const newURL = addTrackStateToURL(locationURL, state);
|
||||
|
||||
logger.info(`Reloading the conference using URL: ${locationURL}`);
|
||||
|
||||
dispatch(appNavigate(toURLString(newURL)));
|
||||
};
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
import { API_ID } from '../../../modules/API/constants';
|
||||
import { API_ID } from '../../../modules/API';
|
||||
import { setRoom } from '../base/conference';
|
||||
import {
|
||||
configWillLoad,
|
||||
|
@ -12,30 +12,33 @@ import {
|
|||
setConfig,
|
||||
storeConfig
|
||||
} from '../base/config';
|
||||
import { connect, disconnect, setLocationURL } from '../base/connection';
|
||||
import { setLocationURL } from '../base/connection';
|
||||
import { loadConfig } from '../base/lib-jitsi-meet';
|
||||
import { MEDIA_TYPE } from '../base/media';
|
||||
import { toState } from '../base/redux';
|
||||
import { createDesiredLocalTracks, isLocalCameraTrackMuted, isLocalTrackMuted } from '../base/tracks';
|
||||
import {
|
||||
addHashParamsToURL,
|
||||
getBackendSafeRoomName,
|
||||
getLocationContextRoot,
|
||||
parseURIString,
|
||||
toURLString
|
||||
parseURIString
|
||||
} from '../base/util';
|
||||
import { isVpaasMeeting } from '../jaas/functions';
|
||||
import { NOTIFICATION_TIMEOUT_TYPE, clearNotifications, showNotification } from '../notifications';
|
||||
import {
|
||||
clearNotifications,
|
||||
NOTIFICATION_TIMEOUT_TYPE,
|
||||
showNotification
|
||||
} from '../notifications';
|
||||
import { setFatalError } from '../overlay';
|
||||
|
||||
import {
|
||||
getDefaultURL,
|
||||
getName
|
||||
} from './functions';
|
||||
redirectToStaticPage,
|
||||
redirectWithStoredParams,
|
||||
reloadWithStoredParams
|
||||
} from './actions.any';
|
||||
import { getDefaultURL, getName } from './functions';
|
||||
import logger from './logger';
|
||||
|
||||
|
||||
declare var interfaceConfig: Object;
|
||||
|
||||
export * from './actions.any';
|
||||
|
||||
|
||||
/**
|
||||
* Triggers an in-app navigation to a specific route. Allows navigation to be
|
||||
|
@ -74,12 +77,6 @@ export function appNavigate(uri: ?string) {
|
|||
const { contextRoot, host, room } = location;
|
||||
const locationURL = new URL(location.toString());
|
||||
|
||||
// Disconnect from any current conference.
|
||||
// FIXME: unify with web.
|
||||
if (navigator.product === 'ReactNative') {
|
||||
dispatch(disconnect());
|
||||
}
|
||||
|
||||
// There are notifications now that gets displayed after we technically left
|
||||
// the conference, but we're still on the conference screen.
|
||||
dispatch(clearNotifications());
|
||||
|
@ -135,137 +132,6 @@ export function appNavigate(uri: ?string) {
|
|||
dispatch(setLocationURL(locationURL));
|
||||
dispatch(setConfig(config));
|
||||
dispatch(setRoom(room));
|
||||
|
||||
// FIXME: unify with web, currently the connection and track creation happens in conference.js.
|
||||
if (room && navigator.product === 'ReactNative') {
|
||||
dispatch(createDesiredLocalTracks());
|
||||
dispatch(connect());
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Redirects to another page generated by replacing the path in the original URL
|
||||
* with the given path.
|
||||
*
|
||||
* @param {(string)} pathname - The path to navigate to.
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function redirectWithStoredParams(pathname: string) {
|
||||
return (dispatch: Dispatch<any>, getState: Function) => {
|
||||
const { locationURL } = getState()['features/base/connection'];
|
||||
const newLocationURL = new URL(locationURL.href);
|
||||
|
||||
newLocationURL.pathname = pathname;
|
||||
window.location.assign(newLocationURL.toString());
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Assigns a specific pathname to window.location.pathname taking into account
|
||||
* the context root of the Web app.
|
||||
*
|
||||
* @param {string} pathname - The pathname to assign to
|
||||
* window.location.pathname. If the specified pathname is relative, the context
|
||||
* root of the Web app will be prepended to the specified pathname before
|
||||
* assigning it to window.location.pathname.
|
||||
* @param {string} hashParam - Optional hash param to assign to
|
||||
* window.location.hash.
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function redirectToStaticPage(pathname: string, hashParam: ?string) {
|
||||
return () => {
|
||||
const windowLocation = window.location;
|
||||
let newPathname = pathname;
|
||||
|
||||
if (!newPathname.startsWith('/')) {
|
||||
// A pathname equal to ./ specifies the current directory. It will be
|
||||
// fine but pointless to include it because contextRoot is the current
|
||||
// directory.
|
||||
newPathname.startsWith('./')
|
||||
&& (newPathname = newPathname.substring(2));
|
||||
newPathname = getLocationContextRoot(windowLocation) + newPathname;
|
||||
}
|
||||
|
||||
if (hashParam) {
|
||||
windowLocation.hash = hashParam;
|
||||
}
|
||||
|
||||
windowLocation.pathname = newPathname;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page.
|
||||
*
|
||||
* @protected
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function reloadNow() {
|
||||
return (dispatch: Dispatch<Function>, getState: Function) => {
|
||||
dispatch(setFatalError(undefined));
|
||||
|
||||
const state = getState();
|
||||
const { locationURL } = state['features/base/connection'];
|
||||
|
||||
// Preserve the local tracks muted state after the reload.
|
||||
const newURL = addTrackStateToURL(locationURL, state);
|
||||
|
||||
logger.info(`Reloading the conference using URL: ${locationURL}`);
|
||||
|
||||
if (navigator.product === 'ReactNative') {
|
||||
dispatch(appNavigate(toURLString(newURL)));
|
||||
} else {
|
||||
dispatch(reloadWithStoredParams());
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds the current track state to the passed URL.
|
||||
*
|
||||
* @param {URL} url - The URL that will be modified.
|
||||
* @param {Function|Object} stateful - The redux store or {@code getState} function.
|
||||
* @returns {URL} - Returns the modified URL.
|
||||
*/
|
||||
function addTrackStateToURL(url, stateful) {
|
||||
const state = toState(stateful);
|
||||
const tracks = state['features/base/tracks'];
|
||||
const isVideoMuted = isLocalCameraTrackMuted(tracks);
|
||||
const isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
|
||||
|
||||
return addHashParamsToURL(new URL(url), { // use new URL object in order to not pollute the passed parameter.
|
||||
'config.startWithAudioMuted': isAudioMuted,
|
||||
'config.startWithVideoMuted': isVideoMuted
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page by restoring the original URL.
|
||||
*
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function reloadWithStoredParams() {
|
||||
return (dispatch: Dispatch<any>, getState: Function) => {
|
||||
const state = getState();
|
||||
const { locationURL } = state['features/base/connection'];
|
||||
|
||||
// Preserve the local tracks muted states.
|
||||
const newURL = addTrackStateToURL(locationURL, state);
|
||||
const windowLocation = window.location;
|
||||
const oldSearchString = windowLocation.search;
|
||||
|
||||
windowLocation.replace(newURL.toString());
|
||||
|
||||
if (newURL.search === oldSearchString) {
|
||||
// NOTE: Assuming that only the hash or search part of the URL will
|
||||
// be changed!
|
||||
// location.replace will not trigger redirect/reload when
|
||||
// only the hash params are changed. That's why we need to call
|
||||
// reload in addition to replace.
|
||||
windowLocation.reload();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -341,3 +207,22 @@ export function maybeRedirectToWelcomePage(options: Object = {}) {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the page.
|
||||
*
|
||||
* @protected
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function reloadNow() {
|
||||
return (dispatch: Dispatch<Function>, getState: Function) => {
|
||||
dispatch(setFatalError(undefined));
|
||||
|
||||
const state = getState();
|
||||
const { locationURL } = state['features/base/connection'];
|
||||
|
||||
logger.info(`Reloading the conference using URL: ${locationURL}`);
|
||||
|
||||
dispatch(reloadWithStoredParams());
|
||||
};
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
import { MEDIA_TYPE } from '../base/media';
|
||||
import { toState } from '../base/redux';
|
||||
import { isLocalCameraTrackMuted, isLocalTrackMuted } from '../base/tracks';
|
||||
import { addHashParamsToURL } from '../base/util';
|
||||
|
||||
/**
|
||||
* Adds the current track state to the passed URL.
|
||||
*
|
||||
* @param {URL} url - The URL that will be modified.
|
||||
* @param {Function|Object} stateful - The redux store or {@code getState} function.
|
||||
* @returns {URL} - Returns the modified URL.
|
||||
*/
|
||||
export function addTrackStateToURL(url, stateful) {
|
||||
const state = toState(stateful);
|
||||
const tracks = state['features/base/tracks'];
|
||||
const isVideoMuted = isLocalCameraTrackMuted(tracks);
|
||||
const isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
|
||||
|
||||
return addHashParamsToURL(new URL(url), { // use new URL object in order to not pollute the passed parameter.
|
||||
'config.startWithAudioMuted': isAudioMuted,
|
||||
'config.startWithVideoMuted': isVideoMuted
|
||||
});
|
||||
|
||||
}
|
|
@ -5,6 +5,8 @@ import { NativeModules } from 'react-native';
|
|||
import { toState } from '../base/redux';
|
||||
import { getServerURL } from '../base/settings';
|
||||
|
||||
export * from './functions.any';
|
||||
|
||||
/**
|
||||
* Retrieves the default URL for the app. This can either come from a prop to
|
||||
* the root App component or be configured in the settings.
|
||||
|
|
|
@ -3,6 +3,8 @@
|
|||
import { toState } from '../base/redux';
|
||||
import { getServerURL } from '../base/settings';
|
||||
|
||||
export * from './functions.any';
|
||||
|
||||
declare var interfaceConfig: Object;
|
||||
|
||||
/**
|
||||
|
|
|
@ -137,7 +137,7 @@ function _authStatusChanged(state, { authEnabled, authLogin }) {
|
|||
*/
|
||||
function _conferenceFailed(state, { conference, error }) {
|
||||
// The current (similar to getCurrentConference in
|
||||
// base/conference/functions.js) conference which is joining or joined:
|
||||
// base/conference/functions.any.js) conference which is joining or joined:
|
||||
const conference_ = state.conference || state.joining;
|
||||
|
||||
if (conference_ && conference_ !== conference) {
|
||||
|
|
|
@ -13,7 +13,7 @@ import INTERFACE_CONFIG_WHITELIST from './interfaceConfigWhitelist';
|
|||
import logger from './logger';
|
||||
|
||||
// XXX The function getRoomName is split out of
|
||||
// functions.js because it is bundled in both app.bundle and
|
||||
// functions.any.js because it is bundled in both app.bundle and
|
||||
// do_external_connect, webpack 1 does not support tree shaking, and we don't
|
||||
// want all functions to be bundled in do_external_connect.
|
||||
export { default as getRoomName } from './getRoomName';
|
||||
|
|
|
@ -156,7 +156,7 @@ function _connectionWillConnect(
|
|||
}
|
||||
|
||||
/**
|
||||
* The current (similar to getCurrentConference in base/conference/functions.js)
|
||||
* The current (similar to getCurrentConference in base/conference/functions.any.js)
|
||||
* connection which is {@code connection} or {@code connecting}.
|
||||
*
|
||||
* @param {Object} baseConnectionState - The current state of the
|
||||
|
|
|
@ -65,6 +65,7 @@ export const colorMap = {
|
|||
uiBackground: 'surface01',
|
||||
|
||||
// Container background
|
||||
ui00: 'surface00',
|
||||
ui01: 'surface02',
|
||||
ui02: 'surface03',
|
||||
ui03: 'surface04',
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SafeAreaView, Text, View } from 'react-native';
|
||||
|
||||
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
|
||||
import { LoadingIndicator } from '../../../base/react';
|
||||
|
||||
import { navigationStyles, TEXT_COLOR } from './styles';
|
||||
|
||||
const ConnectingPage = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<JitsiScreen style = { navigationStyles.connectingScreenContainer }>
|
||||
<View style = { navigationStyles.connectingScreenContent }>
|
||||
<SafeAreaView>
|
||||
<LoadingIndicator
|
||||
color = { TEXT_COLOR }
|
||||
size = 'large'
|
||||
style = { navigationStyles.connectingScreenIndicator } />
|
||||
<Text style = { navigationStyles.connectingScreenText }>
|
||||
{ t('connectingOverlay.joiningRoom') }
|
||||
</Text>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
</JitsiScreen>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConnectingPage;
|
|
@ -7,7 +7,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|||
|
||||
import { connect } from '../../../base/redux';
|
||||
import { DialInSummary } from '../../../invite';
|
||||
import BlankPage from '../../../welcome/components/BlankPage';
|
||||
import EndMeetingPage from '../../../welcome/components/EndMeetingPage';
|
||||
import { rootNavigationRef } from '../rootNavigationContainerRef';
|
||||
import { screen } from '../routes';
|
||||
import {
|
||||
|
@ -16,6 +16,7 @@ import {
|
|||
navigationContainerTheme
|
||||
} from '../screenOptions';
|
||||
|
||||
import ConnectingPage from './ConnectingPage';
|
||||
import ConferenceNavigationContainer
|
||||
from './conference/components/ConferenceNavigationContainer';
|
||||
import WelcomePageNavigationContainer from './welcome/components/WelcomePageNavigationContainer';
|
||||
|
@ -48,9 +49,20 @@ const RootNavigationContainer = ({ isWelcomePageAvailable }: Props) => (
|
|||
name = { screen.root }
|
||||
options = { drawerNavigatorScreenOptions } />
|
||||
: <RootStack.Screen
|
||||
component = { BlankPage }
|
||||
name = { screen.root } />
|
||||
component = { ConnectingPage }
|
||||
name = { screen.connecting }
|
||||
options = {{
|
||||
gestureEnabled: false,
|
||||
headerShown: false
|
||||
}} />
|
||||
}
|
||||
<RootStack.Screen
|
||||
component = { ConnectingPage }
|
||||
name = { screen.connecting }
|
||||
options = {{
|
||||
gestureEnabled: false,
|
||||
headerShown: false
|
||||
}} />
|
||||
<RootStack.Screen
|
||||
component = { DialInSummary }
|
||||
name = { screen.dialInSummary }
|
||||
|
@ -62,6 +74,13 @@ const RootNavigationContainer = ({ isWelcomePageAvailable }: Props) => (
|
|||
gestureEnabled: false,
|
||||
headerShown: false
|
||||
}} />
|
||||
<RootStack.Screen
|
||||
component = { EndMeetingPage }
|
||||
name = { screen.endMeeting }
|
||||
options = {{
|
||||
gestureEnabled: false,
|
||||
headerShown: false
|
||||
}} />
|
||||
</RootStack.Navigator>
|
||||
</NavigationContainer>
|
||||
</SafeAreaProvider>
|
||||
|
|
|
@ -70,7 +70,6 @@ const ConferenceNavigationContainer = () => {
|
|||
ref = { conferenceNavigationRef }
|
||||
theme = { navigationContainerTheme }>
|
||||
<ConferenceStack.Navigator
|
||||
initialRouteName = { screen.conference.main }
|
||||
screenOptions = {{
|
||||
presentation: 'modal'
|
||||
}}>
|
||||
|
|
|
@ -0,0 +1,33 @@
|
|||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { BoxModel } from '../../../base/styles';
|
||||
import BaseTheme from '../../../base/ui/components/BaseTheme';
|
||||
|
||||
|
||||
export const TEXT_COLOR = BaseTheme.palette.text01;
|
||||
|
||||
/**
|
||||
* Styles of the navigation feature.
|
||||
*/
|
||||
export const navigationStyles = {
|
||||
connectingScreenContainer: {
|
||||
flex: 1
|
||||
},
|
||||
|
||||
connectingScreenContent: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
alignItems: 'center',
|
||||
backgroundColor: BaseTheme.palette.uiBackground,
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
|
||||
connectingScreenIndicator: {
|
||||
margin: BoxModel.margin
|
||||
},
|
||||
|
||||
connectingScreenText: {
|
||||
color: TEXT_COLOR
|
||||
}
|
||||
};
|
|
@ -3,6 +3,7 @@
|
|||
import { SET_ROOM } from '../../base/conference/actionTypes';
|
||||
import { MiddlewareRegistry } from '../../base/redux';
|
||||
|
||||
import { isWelcomePageAppEnabled } from './components/welcome/functions';
|
||||
import { navigateRoot } from './rootNavigationContainerRef';
|
||||
import { screen } from './routes';
|
||||
|
||||
|
@ -35,11 +36,17 @@ function _setRoom(store, next, action) {
|
|||
const { room: oldRoom } = store.getState()['features/base/conference'];
|
||||
const result = next(action);
|
||||
const { room: newRoom } = store.getState()['features/base/conference'];
|
||||
const isWelcomePageEnabled = isWelcomePageAppEnabled(store.getState());
|
||||
|
||||
if (!oldRoom && newRoom) {
|
||||
navigateRoot(screen.conference.root);
|
||||
} else if (!newRoom) {
|
||||
navigateRoot(screen.root);
|
||||
if (isWelcomePageEnabled) {
|
||||
navigateRoot(screen.root);
|
||||
} else {
|
||||
// For JitsiSDK, WelcomePage is not available
|
||||
navigateRoot(screen.endMeeting);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
|
|
|
@ -12,6 +12,7 @@ export const screen = {
|
|||
help: 'Help'
|
||||
},
|
||||
dialInSummary: 'Dial-In Info',
|
||||
connecting: 'Connecting',
|
||||
conference: {
|
||||
root: 'Conference root',
|
||||
main: 'Conference',
|
||||
|
@ -32,5 +33,6 @@ export const screen = {
|
|||
invite: 'Invite',
|
||||
sharedDocument: 'Shared document'
|
||||
},
|
||||
lobby: 'Lobby'
|
||||
lobby: 'Lobby',
|
||||
endMeeting: 'End'
|
||||
};
|
||||
|
|
|
@ -1,69 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import { SafeAreaView, Text, View } from 'react-native';
|
||||
|
||||
import { translate } from '../../../base/i18n';
|
||||
import { LoadingIndicator } from '../../../base/react';
|
||||
import { StyleType } from '../../../base/styles';
|
||||
|
||||
import OverlayFrame from './OverlayFrame';
|
||||
import styles, { TEXT_COLOR } from './styles';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The color schemed style of the component.
|
||||
*/
|
||||
_styles: StyleType,
|
||||
|
||||
/**
|
||||
* The Function to be invoked to translate i18n keys.
|
||||
*/
|
||||
t: Function
|
||||
};
|
||||
|
||||
/**
|
||||
* Implements an overlay to tell the user that there is an operation in progress in the background during connect
|
||||
* so then the app doesn't seem hung.
|
||||
*/
|
||||
class LoadConfigOverlay extends PureComponent<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 Boolean(state['features/overlay'].loadConfigOverlayVisible);
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return (
|
||||
<OverlayFrame>
|
||||
<View style = { styles.loadingOverlayWrapper }>
|
||||
<SafeAreaView>
|
||||
<LoadingIndicator
|
||||
color = { TEXT_COLOR }
|
||||
size = 'large'
|
||||
style = { styles.connectIndicator } />
|
||||
<Text style = { styles.loadingOverlayText }>
|
||||
{ this.props.t('connectingOverlay.joiningRoom') }
|
||||
</Text>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
</OverlayFrame>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default translate(LoadConfigOverlay);
|
|
@ -1,5 +1,4 @@
|
|||
// @flow
|
||||
|
||||
export { default as LoadConfigOverlay } from './LoadConfigOverlay';
|
||||
export { default as OverlayFrame } from './OverlayFrame';
|
||||
export { default as PageReloadOverlay } from './PageReloadOverlay';
|
||||
|
|
|
@ -2,39 +2,20 @@
|
|||
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { BoxModel, ColorPalette } from '../../../base/styles';
|
||||
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
||||
|
||||
export const TEXT_COLOR = BaseTheme.palette.text01;
|
||||
|
||||
/**
|
||||
* The React {@code Component} styles of the overlay feature.
|
||||
*/
|
||||
export default {
|
||||
connectIndicator: {
|
||||
margin: BoxModel.margin
|
||||
},
|
||||
|
||||
/**
|
||||
* Style for a backdrop overlay covering the screen the the overlay is
|
||||
* rendered.
|
||||
*/
|
||||
container: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: ColorPalette.black
|
||||
},
|
||||
|
||||
loadingOverlayText: {
|
||||
color: TEXT_COLOR
|
||||
},
|
||||
|
||||
loadingOverlayWrapper: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
alignItems: 'center',
|
||||
backgroundColor: BaseTheme.palette.uiBackground,
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center'
|
||||
backgroundColor: BaseTheme.palette.ui00
|
||||
},
|
||||
|
||||
safeContainer: {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
// @flow
|
||||
|
||||
import {
|
||||
LoadConfigOverlay,
|
||||
PageReloadOverlay
|
||||
} from './components/native';
|
||||
|
||||
|
@ -12,7 +11,6 @@ import {
|
|||
*/
|
||||
export function getOverlays(): Array<React$Element<*>> {
|
||||
return [
|
||||
LoadConfigOverlay,
|
||||
PageReloadOverlay
|
||||
];
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue