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

ref: Settings to JitsiModal

This commit is contained in:
Bettenbuk Zoltan 2020-04-06 17:21:50 +02:00 committed by Zoltan Bettenbuk
parent 678ed605d7
commit 2f817b6633
9 changed files with 100 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
react/features/settings/actionTypes.js
View File

@ -3,17 +3,6 @@
*/
export const SET_AUDIO_SETTINGS_VISIBILITY = 'SET_AUDIO_SETTINGS_VISIBILITY';
/**
* The type of (redux) action which sets the visibility of the view/UI rendering
* the app's settings.
*
* {
* type: SET_SETTINGS_VIEW_VISIBLE
* visible: boolean
* }
*/
export const SET_SETTINGS_VIEW_VISIBLE = 'SET_SETTINGS_VIEW_VISIBLE';
/**
* The type of (redux) action which sets the visibility of the video settings popup.
*/

18
react/features/settings/actions.js
View File

@ -6,7 +6,6 @@ import { i18next } from '../base/i18n';
import {
SET_AUDIO_SETTINGS_VISIBILITY,
SET_SETTINGS_VIEW_VISIBLE,
SET_VIDEO_SETTINGS_VISIBILITY
} from './actionTypes';
import { SettingsDialog } from './components';
@ -14,23 +13,6 @@ import { getMoreTabProps, getProfileTabProps } from './functions';
declare var APP: Object;
/**
* Sets the visibility of the view/UI which renders the app's settings.
*
* @param {boolean} visible - If the view/UI which renders the app's settings is
* to be made visible, {@code true}; otherwise, {@code false}.
* @returns {{
* type: SET_SETTINGS_VIEW_VISIBLE,
* visible: boolean
* }}
*/
export function setSettingsViewVisible(visible: boolean) {
return {
type: SET_SETTINGS_VIEW_VISIBLE,
visible
};
}
/**
* Opens {@code SettingsDialog}.
*

224
react/features/settings/components/native/SettingsView.js
View File

@ -1,37 +1,29 @@
// @flow
import React from 'react';
import { Alert, NativeModules, SafeAreaView, ScrollView, Switch, Text, TextInput, View } from 'react-native';
import { Alert, NativeModules, ScrollView, Switch, Text, TextInput } from 'react-native';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
import { translate } from '../../../base/i18n';
import { HeaderWithNavigation, Modal } from '../../../base/react';
import { JitsiModal } from '../../../base/modal';
import { connect } from '../../../base/redux';
import { SETTINGS_VIEW_ID } from '../../constants';
import { normalizeUserInputURL } from '../../functions';
import {
AbstractSettingsView,
_mapStateToProps as _abstractMapStateToProps,
type Props as AbstractProps
type Props
} from '../AbstractSettingsView';
import { setSettingsViewVisible } from '../../actions';
import FormRow from './FormRow';
import FormSectionHeader from './FormSectionHeader';
import { normalizeUserInputURL } from '../../functions';
import styles from './styles';
/**
* Application information module.
*/
const { AppInfo } = NativeModules;
type Props = AbstractProps & {
/**
* Color schemed style of the header component.
*/
_headerStyles: Object
}
type State = {
/**
@ -113,9 +105,9 @@ class SettingsView extends AbstractSettingsView<Props, State> {
// Bind event handlers so they are only bound once per instance.
this._onBlurServerURL = this._onBlurServerURL.bind(this);
this._onClose = this._onClose.bind(this);
this._onDisableCallIntegration = this._onDisableCallIntegration.bind(this);
this._onDisableP2P = this._onDisableP2P.bind(this);
this._onRequestClose = this._onRequestClose.bind(this);
this._onShowAdvanced = this._onShowAdvanced.bind(this);
this._setURLFieldReference = this._setURLFieldReference.bind(this);
this._showURLAlert = this._showURLAlert.bind(this);
@ -128,16 +120,78 @@ class SettingsView extends AbstractSettingsView<Props, State> {
* @returns {ReactElement}
*/
render() {
const { displayName, email, serverURL, startWithAudioMuted, startWithVideoMuted } = this.state;
return (
<Modal
onRequestClose = { this._onRequestClose }
presentationStyle = 'overFullScreen'
visible = { this.props._visible }>
<View style = { this.props._headerStyles.page }>
{ this._renderHeader() }
{ this._renderBody() }
</View>
</Modal>
<JitsiModal
headerProps = {{
headerLabelKey: 'settingsView.header'
}}
modalId = { SETTINGS_VIEW_ID }
onClose = { this._onClose }>
<ScrollView>
<FormSectionHeader
label = 'settingsView.profileSection' />
<FormRow
fieldSeparator = { true }
label = 'settingsView.displayName'
layout = 'column'>
<TextInput
autoCorrect = { false }
onChangeText = { this._onChangeDisplayName }
placeholder = 'John Doe'
value = { displayName } />
</FormRow>
<FormRow
label = 'settingsView.email'
layout = 'column'>
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
keyboardType = { 'email-address' }
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
value = { email } />
</FormRow>
<FormSectionHeader
label = 'settingsView.conferenceSection' />
<FormRow
fieldSeparator = { true }
label = 'settingsView.serverURL'
layout = 'column'>
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
value = { serverURL } />
</FormRow>
<FormRow
fieldSeparator = { true }
label = 'settingsView.startWithAudioMuted'>
<Switch
onValueChange = { this._onStartAudioMutedChange }
value = { startWithAudioMuted } />
</FormRow>
<FormRow label = 'settingsView.startWithVideoMuted'>
<Switch
onValueChange = { this._onStartVideoMutedChange }
value = { startWithVideoMuted } />
</FormRow>
<FormSectionHeader
label = 'settingsView.buildInfoSection' />
<FormRow
label = 'settingsView.version'>
<Text>
{ `${AppInfo.version} build ${AppInfo.buildNumber}` }
</Text>
</FormRow>
<FormSectionHeader
label = 'settingsView.advanced' />
{ this._renderAdvancedSettings() }
</ScrollView>
</JitsiModal>
);
}
@ -231,17 +285,18 @@ class SettingsView extends AbstractSettingsView<Props, State> {
});
}
_onRequestClose: () => void;
_onClose: () => void;
/**
* Handles the back button. Also invokes normalizeUserInputURL to validate
* Callback to be invoked on closing the modal. Also invokes normalizeUserInputURL to validate
* the URL entered by the user.
*
* @returns {void}
* @returns {boolean} - True if the modal can be closed.
*/
_onRequestClose() {
_onClose() {
this.setState({ showAdvanced: false });
this._processServerURL(true /* hideOnSuccess */);
return this._processServerURL(true /* hideOnSuccess */);
}
_onShowAdvanced: () => void;
@ -296,12 +351,13 @@ class SettingsView extends AbstractSettingsView<Props, State> {
if (normalizedURL === null) {
this._showURLAlert();
} else {
this._onChangeServerURL(normalizedURL);
if (hideOnSuccess) {
this.props.dispatch(setSettingsViewVisible(false));
}
return false;
}
this._onChangeServerURL(normalizedURL);
return hideOnSuccess;
}
/**
@ -345,97 +401,6 @@ class SettingsView extends AbstractSettingsView<Props, State> {
);
}
/**
* Renders the body (under the header) of {@code SettingsView}.
*
* @private
* @returns {React$Element}
*/
_renderBody() {
const { displayName, email, serverURL, startWithAudioMuted, startWithVideoMuted } = this.state;
return (
<SafeAreaView style = { styles.settingsForm }>
<ScrollView>
<FormSectionHeader
label = 'settingsView.profileSection' />
<FormRow
fieldSeparator = { true }
label = 'settingsView.displayName'
layout = 'column'>
<TextInput
autoCorrect = { false }
onChangeText = { this._onChangeDisplayName }
placeholder = 'John Doe'
value = { displayName } />
</FormRow>
<FormRow
label = 'settingsView.email'
layout = 'column'>
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
keyboardType = { 'email-address' }
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
value = { email } />
</FormRow>
<FormSectionHeader
label = 'settingsView.conferenceSection' />
<FormRow
fieldSeparator = { true }
label = 'settingsView.serverURL'
layout = 'column'>
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
value = { serverURL } />
</FormRow>
<FormRow
fieldSeparator = { true }
label = 'settingsView.startWithAudioMuted'>
<Switch
onValueChange = { this._onStartAudioMutedChange }
value = { startWithAudioMuted } />
</FormRow>
<FormRow label = 'settingsView.startWithVideoMuted'>
<Switch
onValueChange = { this._onStartVideoMutedChange }
value = { startWithVideoMuted } />
</FormRow>
<FormSectionHeader
label = 'settingsView.buildInfoSection' />
<FormRow
label = 'settingsView.version'>
<Text>
{ `${AppInfo.version} build ${AppInfo.buildNumber}` }
</Text>
</FormRow>
<FormSectionHeader
label = 'settingsView.advanced' />
{ this._renderAdvancedSettings() }
</ScrollView>
</SafeAreaView>
);
}
/**
* Renders the header of {@code SettingsView}.
*
* @private
* @returns {React$Element}
*/
_renderHeader() {
return (
<HeaderWithNavigation
headerLabelKey = 'settingsView.header'
onPressBack = { this._onRequestClose } />
);
}
_setURLFieldReference: (React$ElementRef<*> | null) => void;
/**
@ -478,14 +443,11 @@ class SettingsView extends AbstractSettingsView<Props, State> {
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {{
* _headerStyles: Object
* }}
* @returns {Props}
*/
function _mapStateToProps(state) {
return {
..._abstractMapStateToProps(state),
_headerStyles: ColorSchemeRegistry.get(state, 'Header')
..._abstractMapStateToProps(state)
};
}

5
react/features/settings/components/native/styles.js
View File

@ -78,11 +78,6 @@ export default {
padding: 5
},
settingsForm: {
backgroundColor: ColorPalette.white,
flex: 1
},
/**
* Global {@code Text} color for the components.
*/

5
react/features/settings/constants.js
View File

@ -4,3 +4,8 @@ export const SETTINGS_TABS = {
MORE: 'more_tab',
PROFILE: 'profile_tab'
};
/**
* View ID for the Settings modal.
*/
export const SETTINGS_VIEW_ID = 'SETTINGS_VIEW_ID';

1
react/features/settings/index.js
View File

@ -4,5 +4,4 @@ export * from './components';
export * from './constants';
export * from './functions';
import './middleware';
import './reducer';

36
react/features/settings/middleware.js
View File

@ -1,36 +0,0 @@
// @flow
import { SET_ROOM } from '../base/conference';
import { MiddlewareRegistry } from '../base/redux';
import { setSettingsViewVisible } from './actions';
/**
* The redux middleware to set the visibility of {@link SettingsView}.
*
* @param {Store} store - The redux store.
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case SET_ROOM:
return _hideSettingsView(store, next, action);
}
return next(action);
});
/**
* Hides {@link SettingsView}.
*
* @param {Store} store - The redux store.
* @param {Dispatch} next - The redux {@code dispatch} function.
* @param {Action} action - The redux action.
* @private
* @returns {Object} The new state.
*/
function _hideSettingsView({ dispatch }, next, action) {
dispatch(setSettingsViewVisible(false));
return next(action);
}

6
react/features/settings/reducer.js
View File

@ -4,17 +4,11 @@ import { ReducerRegistry } from '../base/redux';
import {
SET_AUDIO_SETTINGS_VISIBILITY,
SET_SETTINGS_VIEW_VISIBLE,
SET_VIDEO_SETTINGS_VISIBILITY
} from './actionTypes';
ReducerRegistry.register('features/settings', (state = {}, action) => {
switch (action.type) {
case SET_SETTINGS_VIEW_VISIBLE:
return {
...state,
visible: action.visible
};
case SET_AUDIO_SETTINGS_VISIBILITY:
return {
...state,

4
react/features/welcome/components/WelcomePageSideBar.native.js
View File

@ -16,7 +16,7 @@ import {
} from '../../base/react';
import { connect } from '../../base/redux';
import { HELP_VIEW_MODAL_ID } from '../../help';
import { setSettingsViewVisible } from '../../settings';
import { SETTINGS_VIEW_ID } from '../../settings';
import { setSideBarVisible } from '../actions';
import SideBarItem from './SideBarItem';
@ -157,7 +157,7 @@ class WelcomePageSideBar extends Component<Props> {
const { dispatch } = this.props;
dispatch(setSideBarVisible(false));
dispatch(setSettingsViewVisible(true));
dispatch(setActiveModalId(SETTINGS_VIEW_ID));
}
}