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.
This commit is contained in:
Leonard Kim 2019-06-05 15:16:36 -07:00 committed by virtuacoplenny
parent 07b7f03aa7
commit e47d2d13ce
1 changed files with 121 additions and 62 deletions

View File

@ -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 _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;
}
return Promise.resolve(route);
}
/**
* 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; return;
} }
if (isRoomValid(room)) { const route = _getEmptyRoute();
if (isMobileApp) {
route.component = Conference; // Update the location if it doesn't match. This happens when a room is
resolve(route); // joined from the welcome page. The reason for doing this instead of using
} else { // the history API is that we want to load the config.js which takes the
// Update the location if it doesn't match. This happens when a // room into account.
// 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']; const { locationURL } = state['features/base/connection'];
// eslint-disable-next-line no-negated-condition
if (window.location.href !== locationURL.href) { if (window.location.href !== locationURL.href) {
route.href = locationURL.href; route.href = locationURL.href;
resolve(route);
return Promise.resolve(route);
}
return getDeepLinkingPage(state)
.then(deepLinkComponent => {
if (deepLinkComponent) {
route.component = deepLinkComponent;
} else if (_isSupportedBrowser()) {
route.component = Conference;
} else { } else {
// Maybe show deep-linking, otherwise go to Conference. route.component = UnsupportedDesktopBrowser;
getDeepLinkingPage(state).then(component => { }
route.component = component || Conference;
resolve(route); return route;
}); });
} }
}
return; /**
} * 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 (isWelcomePageUserEnabled(state)) {
// Web: if the welcome page is disabled, go directly to a random if (_isSupportedBrowser()) {
// room. route.component = WelcomePage;
} else {
route.component = UnsupportedDesktopBrowser;
}
} else {
// Web: if the welcome page is disabled, go directly to a random room.
let href = window.location.href; let href = window.location.href;
href.endsWith('/') || (href += '/'); href.endsWith('/') || (href += '/');
route.href = href + generateRoomWithoutSeparator(); route.href = href + generateRoomWithoutSeparator();
} else if (isWelcomePageAppEnabled(state)) {
// Mobile: only go to the welcome page if enabled.
route.component = WelcomePage;
} }
resolve(route); return Promise.resolve(route);
}); }
/**
* Returns whether or not the current browser should allow the app to display.
*
* @returns {boolean}
*/
function _isSupportedBrowser() {
if (navigator.product === 'ReactNative') {
return false;
}
// 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
};
} }