apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ref: Settings to JitsiModal

Browse Source
pull/5743/head
Bettenbuk Zoltan 5 years ago committed by Zoltan Bettenbuk
parent 678ed605d7
commit 2f817b6633
9 changed files with 100 additions and 210 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      react/features/settings/actionTypes.js
  2. 18
      react/features/settings/actions.js
  3. 224
      react/features/settings/components/native/SettingsView.js
  4. 5
      react/features/settings/components/native/styles.js
  5. 5
      react/features/settings/constants.js
  6. 1
      react/features/settings/index.js
  7. 36
      react/features/settings/middleware.js
  8. 6
      react/features/settings/reducer.js
  9. 4
      react/features/welcome/components/WelcomePageSideBar.native.js

11
react/features/settings/actionTypes.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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));
}
}

Write Preview
Loading…
Cancel
Save