haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove obsolete UnsupportedMobileBrowser functionality 

The desired behavior of the button 'Start a conference' / 'Join the
conversation' is to launch the mobile app if installed; otherwise, do
nothing i.e. continue to display UnsupportedMobileBrowser.

Anyway, we may change our minds about allowing the user to continue in a
supported mobile browser so preserve the source code that enables that
but give it more appropriate naming.
This commit is contained in:
Lyubomir Marinov 2017-01-27 21:29:09 -06:00
parent a70beaf7b6
commit 88eabf23f4
5 changed files with 67 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
react/features/base/util/interceptComponent.js
View File

@ -17,16 +17,13 @@ const RULES = [
* 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 {UnsupportedMobileBrowser|void} If the rule is satisfied then
* we should intercept existing component by UnsupportedMobileBrowser.
*/
state => {
() => {
const OS = Platform.OS;
const { mobileBrowserPageIsShown }
= state['features/unsupported-browser'];
if ((OS === 'android' || OS === 'ios') && !mobileBrowserPageIsShown) {
if (OS === 'android' || OS === 'ios') {
return UnsupportedMobileBrowser;
}
}

16
react/features/unsupported-browser/actionTypes.js
View File

@ -1,12 +1,18 @@
import { Symbol } from '../base/react';
/**
* The type of the Redux action which signals that a mobile browser page
* is shown.
* The type of the Redux action which signals that the React Component
* UnsupportedMobileBrowser which was rendered as a promotion of the mobile app
* on a browser was dismissed by the user. For example, the Web app may possibly
* run in Google Chrome on Android but we choose to promote the mobile app
* anyway claiming the user experience provided by the Web app is inferior to
* that of the mobile app. Eventually, the user may choose to dismiss the
* promotion of the mobile app and take their chances with the Web app instead.
* If unused, then we have chosen to force the mobile app and not allow the Web
* app in mobile browsers.
*
* {
* type: MOBILE_BROWSER_PAGE_IS_SHOWN
* type: DISMISS_MOBILE_APP_PROMO
* }
*/
// eslint-disable-next-line max-len
export const MOBILE_BROWSER_PAGE_IS_SHOWN = Symbol('MOBILE_BROWSER_PAGE_IS_SHOWN');
export const DISMISS_MOBILE_APP_PROMO = Symbol('DISMISS_MOBILE_APP_PROMO');

18
react/features/unsupported-browser/actions.js
View File

@ -1,16 +1,22 @@
import { MOBILE_BROWSER_PAGE_IS_SHOWN } from './actionTypes';
import { DISMISS_MOBILE_APP_PROMO } from './actionTypes';
import './reducer';
/**
* Returns an action that mobile browser page is shown and there is no need
* to show it on other pages.
* Returns a Redux action which signals that the UnsupportedMobileBrowser which
* was rendered as a promotion of the mobile app on a browser was dismissed by
* the user. For example, the Web app may possibly run in Google Chrome
* on Android but we choose to promote the mobile app anyway claiming the user
* experience provided by the Web app is inferior to that of the mobile app.
* Eventually, the user may choose to dismiss the promotion of the mobile app
* and take their chances with the Web app instead. If unused, then we have
* chosen to force the mobile app and not allow the Web app in mobile browsers.
*
* @returns {{
* type: MOBILE_BROWSER_PAGE_IS_SHOWN
* type: DISMISS_MOBILE_APP_PROMO
* }}
*/
export function mobileBrowserPageIsShown() {
export function dismissMobileAppPromo() {
return {
type: MOBILE_BROWSER_PAGE_IS_SHOWN
type: DISMISS_MOBILE_APP_PROMO
};
}

72
react/features/unsupported-browser/components/UnsupportedMobileBrowser.js
View File

@ -1,11 +1,8 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { appNavigate } from '../../app';
import { Platform } from '../../base/react';
import { mobileBrowserPageIsShown } from '../actions';
/**
* The map of platforms to URLs at which the mobile app for the associated
* platform is available for download.
@ -27,8 +24,14 @@ class UnsupportedMobileBrowser extends Component {
* @static
*/
static propTypes = {
dispatch: React.PropTypes.func,
room: React.PropTypes.string
/**
* The name of the conference room to be joined upon clicking the
* respective button.
*
* @private
* @type {string}
*/
_room: React.PropTypes.string
}
/**
@ -41,16 +44,7 @@ class UnsupportedMobileBrowser extends Component {
super(props);
// Bind methods
this._onClickJoin = this._onClickJoin.bind(this);
}
/**
* React lifecycle method triggered after component is mounted.
*
* @returns {void}
*/
componentDidMount() {
this.props.dispatch(mobileBrowserPageIsShown());
this._onJoinClick = this._onJoinClick.bind(this);
}
/**
@ -59,21 +53,11 @@ class UnsupportedMobileBrowser extends Component {
* @returns {void}
*/
componentWillMount() {
const { room } = this.props;
let btnText;
let link;
if (room) {
btnText = 'Join the conversation';
link = room;
} else {
btnText = 'Start a conference';
link = '';
}
const joinButtonText
= this.props._room ? 'Join the conversation' : 'Start a conference';
this.setState({
btnText,
link
joinButtonText
});
}
@ -84,8 +68,7 @@ class UnsupportedMobileBrowser extends Component {
*/
render() {
const ns = 'unsupported-mobile-browser';
const primaryButtonClasses
= `${ns}__button ${ns}__button_primary`;
const downloadButtonClassName = `${ns}__button ${ns}__button_primary`;
return (
<div className = { ns }>
@ -98,7 +81,7 @@ class UnsupportedMobileBrowser extends Component {
conversation on your mobile
</p>
<a href = { URLS[Platform.OS] }>
<button className = { primaryButtonClasses }>
<button className = { downloadButtonClassName }>
Download the App
</button>
</a>
@ -109,9 +92,9 @@ class UnsupportedMobileBrowser extends Component {
</p>
<button
className = { `${ns}__button` }
onClick = { this._onClickJoin }>
onClick = { this._onJoinClick }>
{
this.state.btnText
this.state.joinButtonText
}
</button>
</div>
@ -120,13 +103,19 @@ class UnsupportedMobileBrowser extends Component {
}
/**
* Navigates to the next state of the app.
* Handles clicks on the button that joins the local participant in a
* conference.
*
* @private
* @returns {void}
*/
_onClickJoin() {
this.props.dispatch(appNavigate(this.state.link));
_onJoinClick() {
// If the user installed the app while this Component was displayed
// (e.g. the user clicked the Download the App button), then we would
// like to open the current URL in the mobile app.
// TODO The only way to do it appears to be a link with an app-specific
// scheme, not a Universal Link.
}
}
@ -136,12 +125,19 @@ class UnsupportedMobileBrowser extends Component {
*
* @param {Object} state - Redux state.
* @returns {{
* room: string
* _room: string
* }}
*/
function mapStateToProps(state) {
return {
room: state['features/base/conference'].room
/**
* The name of the conference room to be joined upon clicking the
* respective button.
*
* @private
* @type {string}
*/
_room: state['features/base/conference'].room
};
}

12
react/features/unsupported-browser/reducer.js
View File

@ -1,21 +1,25 @@
import { ReducerRegistry } from '../base/redux';
import { MOBILE_BROWSER_PAGE_IS_SHOWN } from './actionTypes';
import { DISMISS_MOBILE_APP_PROMO } from './actionTypes';
ReducerRegistry.register(
'features/unsupported-browser',
(state = {}, action) => {
switch (action.type) {
case MOBILE_BROWSER_PAGE_IS_SHOWN:
case DISMISS_MOBILE_APP_PROMO:
return {
...state,
/**
* Flag that shows that mobile browser page is shown.
* The indicator which determines whether the React
* Component UnsupportedMobileBrowser which was rendered as
* a promotion of the mobile app on a browser was dismissed
* by the user. If unused, then we have chosen to force the
* mobile app and not allow the Web app in mobile browsers.
*
* @type {boolean}
*/
mobileBrowserPageIsShown: true
mobileAppPromoDismissed: true
};
}