Introduce interceptComponent function
This commit is contained in:
parent
2e81b8493e
commit
6a0b92638c
|
@ -2,10 +2,9 @@
|
|||
|
||||
import { isRoomValid } from '../base/conference';
|
||||
import { RouteRegistry } from '../base/navigator';
|
||||
import { Platform } from '../base/react';
|
||||
import { Conference } from '../conference';
|
||||
import { MobileBrowserPage } from '../unsupported-browser';
|
||||
import { WelcomePage } from '../welcome';
|
||||
import { interceptComponent } from '../base/util';
|
||||
|
||||
import URLProcessor from '../../../modules/config/URLProcessor';
|
||||
import KeyboardShortcut
|
||||
|
@ -27,21 +26,19 @@ export { _getRoomAndDomainFromUrlString } from './functions.native';
|
|||
* @returns {Route}
|
||||
*/
|
||||
export function _getRouteToRender(stateOrGetState) {
|
||||
const OS = Platform.OS;
|
||||
const state
|
||||
= typeof stateOrGetState === 'function'
|
||||
? stateOrGetState()
|
||||
: stateOrGetState;
|
||||
|
||||
// If mobile browser page was shown, there is no need to show it again.
|
||||
const { mobileBrowserPageIsShown } = state['features/unsupported-browser'];
|
||||
const { room } = state['features/base/conference'];
|
||||
const component = isRoomValid(room) ? Conference : WelcomePage;
|
||||
const route = RouteRegistry.getRouteByComponent(component);
|
||||
|
||||
if ((OS === 'android' || OS === 'ios') && !mobileBrowserPageIsShown) {
|
||||
route.component = MobileBrowserPage;
|
||||
}
|
||||
// Intercepts route components if any of component interceptor rules
|
||||
// is satisfied.
|
||||
route.component = interceptComponent(state, component);
|
||||
|
||||
return route;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,78 @@
|
|||
import { Platform } from '../react';
|
||||
|
||||
import {
|
||||
MobileBrowserPage,
|
||||
UnsupportedBrowserPage
|
||||
} from '../../unsupported-browser';
|
||||
|
||||
/**
|
||||
* Array of rules defining whether we should intercept component to render
|
||||
* or not.
|
||||
*
|
||||
* @type {Array<Function>}
|
||||
* @param {Object} state - Redux state object.
|
||||
* @returns {ReactElement|void}
|
||||
*/
|
||||
const RULES = [
|
||||
|
||||
/**
|
||||
* This rule describes case when user opens application using mobile
|
||||
* browser. In order to promote the app, we choose to suggest the mobile
|
||||
* app even if the browser supports the app (e.g. Google Chrome with
|
||||
* WebRTC support on Android).
|
||||
*
|
||||
* @param {Object} state - Object containing Redux state.
|
||||
* @returns {MobileBrowserPage|void} If the rule is satisfied then
|
||||
* we should intercept existing component by MobileBrowserPage.
|
||||
*/
|
||||
state => {
|
||||
const OS = Platform.OS;
|
||||
const { mobileBrowserPageIsShown }
|
||||
= state['features/unsupported-browser'];
|
||||
|
||||
if ((OS === 'android' || OS === 'ios') && !mobileBrowserPageIsShown) {
|
||||
return MobileBrowserPage;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* This rule describes case when user opens application using web browser
|
||||
* that doesn't support WebRTC or Temasys plugin should be installed.
|
||||
*
|
||||
* @returns {UnsupportedBrowserPage|void} If the rule is satisfied
|
||||
* then we should intercept existing component by UnsupportedBrowserPage.
|
||||
*/
|
||||
() => {
|
||||
if (true) {
|
||||
return UnsupportedBrowserPage;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* Utility method that responsible for intercepting of route components based on
|
||||
* the set of defined rules.
|
||||
*
|
||||
* @param {Object|Function} stateOrGetState - Either Redux state object or
|
||||
* getState() function.
|
||||
* @param {ReactElement} currentComponent - Current route component to render.
|
||||
* @returns {ReactElement} If any of rules is satisfied returns intercepted
|
||||
* component.
|
||||
*/
|
||||
export function interceptComponent(stateOrGetState, currentComponent) {
|
||||
let result;
|
||||
const state
|
||||
= typeof stateOrGetState === 'function'
|
||||
? stateOrGetState()
|
||||
: stateOrGetState;
|
||||
|
||||
for (const rule of RULES) {
|
||||
result = rule(state);
|
||||
|
||||
if (result) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result || currentComponent;
|
||||
}
|
|
@ -1,2 +1,3 @@
|
|||
export * from './loadScript';
|
||||
export * from './roomnameGenerator';
|
||||
export * from './componentInterceptor';
|
||||
|
|
|
@ -100,7 +100,7 @@ class MobileBrowserPage extends Component {
|
|||
const textClasses = `${blockPrefix}__text ${blockPrefix}__text_small`;
|
||||
let primaryButtonClasses = `${blockPrefix}__button`;
|
||||
|
||||
primaryButtonClasses += `${blockPrefix}__button_primary`;
|
||||
primaryButtonClasses += ` ${blockPrefix}__button_primary`;
|
||||
|
||||
return (
|
||||
<div className = { blockPrefix }>
|
||||
|
|
|
@ -98,7 +98,9 @@ export default class UnsupportedBrowserPage extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className = 'browser'>
|
||||
<div
|
||||
className = 'browser'
|
||||
key = { browser.name }>
|
||||
<div className = 'browser__text'>
|
||||
{ browser.title }
|
||||
{ pluginHtml }
|
||||
|
|
Loading…
Reference in New Issue