Moves native password required prompt to room lock feature.

Moves native dialogs to use dialog container. Implements native Dialog that uses react native Prompt.
This commit is contained in:
damencho 2017-03-07 10:02:52 -06:00
parent 61470c0d24
commit 309ce43e05
7 changed files with 31 additions and 217 deletions

View File

@ -6,10 +6,8 @@ import { DialogContainer } from '../../base/dialog';
import { Container } from '../../base/react'; import { Container } from '../../base/react';
import { FilmStrip } from '../../film-strip'; import { FilmStrip } from '../../film-strip';
import { LargeVideo } from '../../large-video'; import { LargeVideo } from '../../large-video';
import { RoomLockPrompt } from '../../room-lock';
import { Toolbar } from '../../toolbar'; import { Toolbar } from '../../toolbar';
import PasswordRequiredPrompt from './PasswordRequiredPrompt';
import { styles } from './styles'; import { styles } from './styles';
/** /**
@ -30,23 +28,6 @@ class Conference extends Component {
* @static * @static
*/ */
static propTypes = { static propTypes = {
/**
* The indicator which determines whether a password is required to join
* the conference and has not been provided yet.
*
* @private
* @type {JitsiConference}
*/
_passwordRequired: React.PropTypes.object,
/**
* The indicator which determines whether the user has requested to lock
* the conference/room.
*
* @private
* @type {JitsiConference}
*/
_roomLockRequested: React.PropTypes.object,
dispatch: React.PropTypes.func dispatch: React.PropTypes.func
} }
@ -128,9 +109,6 @@ class Conference extends Component {
<DialogContainer /> <DialogContainer />
{
this._renderPrompt()
}
</Container> </Container>
); );
} }
@ -164,56 +142,6 @@ class Conference extends Component {
this._setToolbarTimeout(toolbarVisible); this._setToolbarTimeout(toolbarVisible);
} }
/**
* Renders a prompt if a password is required to join the conference.
*
* @private
* @returns {ReactElement}
*/
_renderPasswordRequiredPrompt() {
const required = this.props._passwordRequired;
if (required) {
return (
<PasswordRequiredPrompt conference = { required } />
);
}
return null;
}
/**
* Renders a prompt if necessary such as when a password is required to join
* the conference or the user has requested to lock the conference/room.
*
* @private
* @returns {ReactElement}
*/
_renderPrompt() {
return (
this._renderPasswordRequiredPrompt()
|| this._renderRoomLockPrompt()
);
}
/**
* Renders a prompt if the user has requested to lock the conference/room.
*
* @private
* @returns {ReactElement}
*/
_renderRoomLockPrompt() {
const requested = this.props._roomLockRequested;
if (requested) {
return (
<RoomLockPrompt conference = { requested } />
);
}
return null;
}
/** /**
* Triggers the default toolbar timeout. * Triggers the default toolbar timeout.
* *
@ -231,35 +159,4 @@ class Conference extends Component {
} }
} }
/** export default reactReduxConnect()(Conference);
* Maps (parts of) the Redux state to the associated Conference's props.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _passwordRequired: boolean
* }}
*/
function _mapStateToProps(state) {
return {
/**
* The indicator which determines whether a password is required to join
* the conference and has not been provided yet.
*
* @private
* @type {JitsiConference}
*/
_passwordRequired: state['features/base/conference'].passwordRequired,
/**
* The indicator which determines whether the user has requested to lock
* the conference/room.
*
* @private
* @type {JitsiConference}
*/
_roomLockRequested: state['features/room-lock'].requested
};
}
export default reactReduxConnect(_mapStateToProps)(Conference);

View File

@ -1,24 +0,0 @@
import { Symbol } from '../base/react';
/**
* The type of Redux action which begins a (user) request to lock a specific
* JitsiConference.
*
* {
* type: BEGIN_ROOM_LOCK_REQUEST,
* conference: JitsiConference
* }
*/
export const BEGIN_ROOM_LOCK_REQUEST = Symbol('BEGIN_ROOM_LOCK_REQUEST');
/**
* The type of Redux action which end a (user) request to lock a specific
* JitsiConference.
*
* {
* type: END_ROOM_LOCK_REQUEST,
* conference: JitsiConference,
* password: string
* }
*/
export const END_ROOM_LOCK_REQUEST = Symbol('END_ROOM_LOCK_REQUEST');

View File

@ -1,8 +1,6 @@
import { setPassword } from '../base/conference'; import { setPassword } from '../base/conference';
import { openDialog } from '../base/dialog'; import { hideDialog, openDialog } from '../base/dialog';
import { PasswordRequiredPrompt } from './components'; import { PasswordRequiredPrompt, RoomLockPrompt } from './components';
import { BEGIN_ROOM_LOCK_REQUEST, END_ROOM_LOCK_REQUEST } from './actionTypes';
/** /**
* Begins a (user) request to lock a specific conference/room. * Begins a (user) request to lock a specific conference/room.
@ -21,10 +19,7 @@ export function beginRoomLockRequest(conference) {
} }
if (conference) { if (conference) {
dispatch({ dispatch(openDialog(RoomLockPrompt, { conference }));
type: BEGIN_ROOM_LOCK_REQUEST,
conference
});
} }
}; };
} }
@ -45,11 +40,7 @@ export function endRoomLockRequest(conference, password) {
? dispatch(setPassword(conference, conference.lock, password)) ? dispatch(setPassword(conference, conference.lock, password))
: Promise.resolve(); : Promise.resolve();
const endRoomLockRequest_ = () => { const endRoomLockRequest_ = () => {
dispatch({ dispatch(hideDialog());
type: END_ROOM_LOCK_REQUEST,
conference,
password
});
}; };
setPassword_.then(endRoomLockRequest_, endRoomLockRequest_); setPassword_.then(endRoomLockRequest_, endRoomLockRequest_);
@ -63,7 +54,7 @@ export function endRoomLockRequest(conference, password) {
* requesting password. * requesting password.
* @protected * @protected
* @returns {{ * @returns {{
* type: BEGIN_DIALOG_REQUEST, * type: OPEN_DIALOG,
* component: Component, * component: Component,
* props: React.PropTypes * props: React.PropTypes
* }} * }}

View File

@ -1,9 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Prompt from 'react-native-prompt';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Dialog } from '../../base/dialog';
import { setPassword } from '../../base/conference'; import { setPassword } from '../../base/conference';
import { translate } from '../../base/i18n';
/** /**
* Implements a React Component which prompts the user when a password is * Implements a React Component which prompts the user when a password is
@ -22,15 +21,7 @@ class PasswordRequiredPrompt extends Component {
* @type {JitsiConference} * @type {JitsiConference}
*/ */
conference: React.PropTypes.object, conference: React.PropTypes.object,
dispatch: React.PropTypes.func, dispatch: React.PropTypes.func
/**
* The function to translate human-readable text.
*
* @public
* @type {Function}
*/
t: React.PropTypes.func
} }
/** /**
@ -54,15 +45,13 @@ class PasswordRequiredPrompt extends Component {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
render() { render() {
const { t } = this.props;
return ( return (
<Prompt <Dialog
bodyKey = 'dialog.passwordLabel'
onCancel = { this._onCancel } onCancel = { this._onCancel }
onSubmit = { this._onSubmit } onSubmit = { this._onSubmit }
placeholder = { t('dialog.passwordLabel') } titleKey = 'dialog.passwordRequired' />
title = { t('dialog.passwordRequired') }
visible = { true } />
); );
} }
@ -70,14 +59,14 @@ class PasswordRequiredPrompt extends Component {
* Notifies this prompt that it has been dismissed by cancel. * Notifies this prompt that it has been dismissed by cancel.
* *
* @private * @private
* @returns {void} * @returns {boolean} whether to hide dialog.
*/ */
_onCancel() { _onCancel() {
// XXX The user has canceled this prompt for a password so we are to // XXX The user has canceled this prompt for a password so we are to
// attempt joining the conference without a password. If the conference // attempt joining the conference without a password. If the conference
// still requires a password to join, the user will be prompted again // still requires a password to join, the user will be prompted again
// later. // later.
this._onSubmit(undefined); return this._onSubmit(undefined);
} }
/** /**
@ -86,13 +75,15 @@ class PasswordRequiredPrompt extends Component {
* *
* @param {string} value - The submitted value. * @param {string} value - The submitted value.
* @private * @private
* @returns {void} * @returns {boolean} whether to hide dialog.
*/ */
_onSubmit(value) { _onSubmit(value) {
const conference = this.props.conference; const conference = this.props.conference;
this.props.dispatch(setPassword(conference, conference.join, value)); this.props.dispatch(setPassword(conference, conference.join, value));
return true;
} }
} }
export default translate(connect()(PasswordRequiredPrompt)); export default connect()(PasswordRequiredPrompt);

View File

@ -1,8 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Prompt from 'react-native-prompt';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { endRoomLockRequest } from '../actions'; import { endRoomLockRequest } from '../actions';
@ -23,15 +21,7 @@ class RoomLockPrompt extends Component {
* @type {JitsiConference} * @type {JitsiConference}
*/ */
conference: React.PropTypes.object, conference: React.PropTypes.object,
dispatch: React.PropTypes.func, dispatch: React.PropTypes.func
/**
* The function to translate human-readable text.
*
* @public
* @type {Function}
*/
t: React.PropTypes.func
} }
/** /**
@ -55,15 +45,13 @@ class RoomLockPrompt extends Component {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
render() { render() {
const { t } = this.props;
return ( return (
<Prompt <Dialog
bodyKey = 'dialog.passwordLabel'
onCancel = { this._onCancel } onCancel = { this._onCancel }
onSubmit = { this._onSubmit } onSubmit = { this._onSubmit }
placeholder = { t('dialog.passwordLabel') } titleKey = 'toolbar.lock' />
title = { t('toolbar.lock') }
visible = { true } />
); );
} }
@ -71,12 +59,12 @@ class RoomLockPrompt extends Component {
* Notifies this prompt that it has been dismissed by cancel. * Notifies this prompt that it has been dismissed by cancel.
* *
* @private * @private
* @returns {void} * @returns {boolean} whether to hide the dialog
*/ */
_onCancel() { _onCancel() {
// An undefined password is understood to cancel the request to lock the // An undefined password is understood to cancel the request to lock the
// conference/room. // conference/room.
this._onSubmit(undefined); return this._onSubmit(undefined);
} }
/** /**
@ -85,11 +73,16 @@ class RoomLockPrompt extends Component {
* *
* @param {string} value - The submitted value. * @param {string} value - The submitted value.
* @private * @private
* @returns {void} * @returns {boolean} returns false, we do not want to hide dialog as this
* will be handled inside endRoomLockRequest after setting password is
* resolved.
*/ */
_onSubmit(value) { _onSubmit(value) {
this.props.dispatch(endRoomLockRequest(this.props.conference, value)); this.props.dispatch(endRoomLockRequest(this.props.conference, value));
// do not hide
return false;
} }
} }
export default translate(connect()(RoomLockPrompt)); export default connect()(RoomLockPrompt);

View File

@ -2,4 +2,3 @@ export * from './actions';
export * from './components'; export * from './components';
import './middleware'; import './middleware';
import './reducer';

View File

@ -1,33 +0,0 @@
import {
CONFERENCE_FAILED,
CONFERENCE_JOINED,
CONFERENCE_LEFT
} from '../base/conference';
import { ReducerRegistry, setStateProperty } from '../base/redux';
import { BEGIN_ROOM_LOCK_REQUEST, END_ROOM_LOCK_REQUEST } from './actionTypes';
ReducerRegistry.register('features/room-lock', (state = {}, action) => {
switch (action.type) {
case BEGIN_ROOM_LOCK_REQUEST:
return setStateProperty(state, 'requested', action.conference);
case CONFERENCE_FAILED:
case CONFERENCE_LEFT:
case END_ROOM_LOCK_REQUEST: {
if (state.requested === action.conference) {
return setStateProperty(state, 'requested', undefined);
}
break;
}
case CONFERENCE_JOINED: {
if (state.requested !== action.conference) {
return setStateProperty(state, 'requested', undefined);
}
break;
}
}
return state;
});