fix(deep-linking): deep link first, then show unsupported

Re-structure the custom routing to split between
platforms instead of between intended route features.
This made it easier for me to understand where to
do the checks for unsupported browser after deep-linking
had been checked.
pull/4311/head
Leonard Kim 6 years ago committed by virtuacoplenny
parent 07b7f03aa7
commit e47d2d13ce
  1. 163
      react/features/app/getRouteToRender.js

@ -40,69 +40,128 @@ export type Route = {
*/ */
export function _getRouteToRender(stateful: Function | Object): Promise<Route> { export function _getRouteToRender(stateful: Function | Object): Promise<Route> {
const state = toState(stateful); const state = toState(stateful);
const { room } = state['features/base/conference'];
const isMobileApp = navigator.product === 'ReactNative';
const isMobileBrowser
= !isMobileApp && (Platform.OS === 'android' || Platform.OS === 'ios');
const route: Route = {
component: BlankPage,
href: undefined
};
return new Promise(resolve => { if (navigator.product === 'ReactNative') {
// First, check if the current endpoint supports WebRTC. We are return _getMobileRoute(state);
// intentionally not performing the check for mobile browsers because: }
// - the WelcomePage is mobile ready;
// - if the URL points to a conference, getDeepLinkingPage will take
// care of it.
if (!isMobileBrowser && !JitsiMeetJS.isWebRtcSupported()) {
route.component = UnsupportedDesktopBrowser;
resolve(route);
return; return _getWebConferenceRoute(state) || _getWebWelcomePageRoute(state);
} }
/**
* Returns the {@code Route} to display on the React Native app.
*
* @param {Object} state - The redux state.
* @returns {Promise<Route>}
*/
function _getMobileRoute(state): Promise<Route> {
const route = _getEmptyRoute();
if (isRoomValid(state['features/base/conference'].room)) {
route.component = Conference;
} else if (isWelcomePageAppEnabled(state)) {
route.component = WelcomePage;
} else {
route.component = BlankPage;
}
if (isRoomValid(room)) { return Promise.resolve(route);
if (isMobileApp) { }
/**
* Returns the {@code Route} to display when trying to access a conference if
* a valid conference is being joined.
*
* @param {Object} state - The redux state.
* @returns {Promise<Route>|undefined}
*/
function _getWebConferenceRoute(state): ?Promise<Route> {
if (!isRoomValid(state['features/base/conference'].room)) {
return;
}
const route = _getEmptyRoute();
// Update the location if it doesn't match. This happens when a room is
// joined from the welcome page. The reason for doing this instead of using
// the history API is that we want to load the config.js which takes the
// room into account.
const { locationURL } = state['features/base/connection'];
if (window.location.href !== locationURL.href) {
route.href = locationURL.href;
return Promise.resolve(route);
}
return getDeepLinkingPage(state)
.then(deepLinkComponent => {
if (deepLinkComponent) {
route.component = deepLinkComponent;
} else if (_isSupportedBrowser()) {
route.component = Conference; route.component = Conference;
resolve(route);
} else { } else {
// Update the location if it doesn't match. This happens when a route.component = UnsupportedDesktopBrowser;
// room is joined from the welcome page. The reason for doing
// this instead of using the history API is that we want to load
// the config.js which takes the room into account.
const { locationURL } = state['features/base/connection'];
// eslint-disable-next-line no-negated-condition
if (window.location.href !== locationURL.href) {
route.href = locationURL.href;
resolve(route);
} else {
// Maybe show deep-linking, otherwise go to Conference.
getDeepLinkingPage(state).then(component => {
route.component = component || Conference;
resolve(route);
});
}
} }
return; return route;
});
}
/**
* Returns the {@code Route} to display when trying to access the welcome page.
*
* @param {Object} state - The redux state.
* @returns {Promise<Route>}
*/
function _getWebWelcomePageRoute(state): Promise<Route> {
const route = _getEmptyRoute();
if (isWelcomePageUserEnabled(state)) {
if (_isSupportedBrowser()) {
route.component = WelcomePage;
} else {
route.component = UnsupportedDesktopBrowser;
} }
} else {
// Web: if the welcome page is disabled, go directly to a random room.
if (!isWelcomePageUserEnabled(state)) { let href = window.location.href;
// Web: if the welcome page is disabled, go directly to a random
// room.
let href = window.location.href; href.endsWith('/') || (href += '/');
route.href = href + generateRoomWithoutSeparator();
}
href.endsWith('/') || (href += '/'); return Promise.resolve(route);
route.href = href + generateRoomWithoutSeparator(); }
} else if (isWelcomePageAppEnabled(state)) {
// Mobile: only go to the welcome page if enabled.
route.component = WelcomePage; /**
} * Returns whether or not the current browser should allow the app to display.
*
* @returns {boolean}
*/
function _isSupportedBrowser() {
if (navigator.product === 'ReactNative') {
return false;
}
resolve(route); // We are intentionally allow mobile browsers because:
}); // - the WelcomePage is mobile ready;
// - if the URL points to a conference, getDeepLinkingPage will take
// care of it.
return Platform.OS === 'android'
|| Platform.OS === 'ios'
|| JitsiMeetJS.isWebRtcSupported();
}
/**
* Returns the default {@code Route}.
*
* @returns {Route}
*/
function _getEmptyRoute(): Route {
return {
component: BlankPage,
href: undefined
};
} }

Loading…
Cancel
Save