瀏覽代碼

Fix settings screen layout on iOS and add soft back button

master
Lyubo Marinov 7 年之前
父節點
當前提交
112c856850

+ 3
- 3
css/_font.scss 查看文件

27
 .icon-arrow_back:before {
27
 .icon-arrow_back:before {
28
   content: "\e5c4";
28
   content: "\e5c4";
29
 }
29
 }
30
-.icon-navigate_before:before {
31
-  content: "\e408";
32
-}
33
 .icon-event_note:before {
30
 .icon-event_note:before {
34
     content: "\e616";
31
     content: "\e616";
35
 }
32
 }
33
+.icon-navigate_before:before {
34
+  content: "\e408";
35
+}
36
 .icon-public:before {
36
 .icon-public:before {
37
     content: "\e80b";
37
     content: "\e80b";
38
 }
38
 }

+ 17
- 17
react/features/app-settings/actions.js 查看文件

1
-/* @flow */
1
+// @flow
2
 
2
 
3
 import { HIDE_APP_SETTINGS, SHOW_APP_SETTINGS } from './actionTypes';
3
 import { HIDE_APP_SETTINGS, SHOW_APP_SETTINGS } from './actionTypes';
4
 
4
 
5
 /**
5
 /**
6
-* Redux-signals the request to open the app settings modal.
7
-*
8
-* @returns {{
9
-*     type: SHOW_APP_SETTINGS
10
-* }}
11
-*/
12
-export function showAppSettings() {
6
+ * Redux-signals the request to hide the app settings modal.
7
+ *
8
+ * @returns {{
9
+ *     type: HIDE_APP_SETTINGS
10
+ * }}
11
+ */
12
+export function hideAppSettings() {
13
     return {
13
     return {
14
-        type: SHOW_APP_SETTINGS
14
+        type: HIDE_APP_SETTINGS
15
     };
15
     };
16
 }
16
 }
17
 
17
 
18
 /**
18
 /**
19
-* Redux-signals the request to hide the app settings modal.
20
-*
21
-* @returns {{
22
-*     type: HIDE_APP_SETTINGS
23
-* }}
24
-*/
25
-export function hideAppSettings() {
19
+ * Redux-signals the request to open the app settings modal.
20
+ *
21
+ * @returns {{
22
+ *     type: SHOW_APP_SETTINGS
23
+ * }}
24
+ */
25
+export function showAppSettings() {
26
     return {
26
     return {
27
-        type: HIDE_APP_SETTINGS
27
+        type: SHOW_APP_SETTINGS
28
     };
28
     };
29
 }
29
 }

+ 61
- 60
react/features/app-settings/components/AbstractAppSettings.js 查看文件

2
 
2
 
3
 import { Component } from 'react';
3
 import { Component } from 'react';
4
 
4
 
5
-import { hideAppSettings } from '../actions';
6
 import { getProfile, updateProfile } from '../../base/profile';
5
 import { getProfile, updateProfile } from '../../base/profile';
7
 
6
 
7
+import { hideAppSettings } from '../actions';
8
+
8
 /**
9
 /**
9
-* The type of the React {@code Component} props of {@link AbstractAppSettings}
10
-*/
10
+ * The type of the React {@code Component} props of {@link AbstractAppSettings}
11
+ */
11
 type Props = {
12
 type Props = {
12
 
13
 
13
     /**
14
     /**
14
-    * The current aspect ratio of the screen.
15
-    */
15
+     * The current aspect ratio of the screen.
16
+     */
16
     _aspectRatio: Symbol,
17
     _aspectRatio: Symbol,
17
 
18
 
18
     /**
19
     /**
19
-    * The default URL for when there is no custom URL set in the profile.
20
-    */
21
-    _serverURL: string,
20
+     * The current profile object.
21
+     */
22
+    _profile: Object,
22
 
23
 
23
     /**
24
     /**
24
-    * The current profile object.
25
-    */
26
-    _profile: Object,
25
+     * The default URL for when there is no custom URL set in the profile.
26
+     */
27
+    _serverURL: string,
27
 
28
 
28
     /**
29
     /**
29
-    * The visibility prop of the settings modal.
30
-    */
30
+     * The visibility prop of the settings modal.
31
+     */
31
     _visible: boolean,
32
     _visible: boolean,
32
 
33
 
33
     /**
34
     /**
34
-    * Redux store dispatch function.
35
-    */
35
+     * Redux store dispatch function.
36
+     */
36
     dispatch: Dispatch<*>
37
     dispatch: Dispatch<*>
37
 };
38
 };
38
 
39
 
39
 /**
40
 /**
40
- * Base (abstract) class for container component rendering
41
- * the app settings page.
41
+ * Base (abstract) class for container component rendering the app settings
42
+ * page.
42
  *
43
  *
43
  * @abstract
44
  * @abstract
44
  */
45
  */
65
     _onChangeDisplayName: (string) => void;
66
     _onChangeDisplayName: (string) => void;
66
 
67
 
67
     /**
68
     /**
68
-    * Handles the display name field value change.
69
-    *
70
-    * @protected
71
-    * @param {string} text - The value typed in the name field.
72
-    * @returns {void}
73
-    */
69
+     * Handles the display name field value change.
70
+     *
71
+     * @protected
72
+     * @param {string} text - The value typed in the name field.
73
+     * @returns {void}
74
+     */
74
     _onChangeDisplayName(text) {
75
     _onChangeDisplayName(text) {
75
         this._updateProfile({
76
         this._updateProfile({
76
             displayName: text
77
             displayName: text
80
     _onChangeEmail: (string) => void;
81
     _onChangeEmail: (string) => void;
81
 
82
 
82
     /**
83
     /**
83
-    * Handles the email field value change.
84
-    *
85
-    * @protected
86
-    * @param {string} text - The value typed in the email field.
87
-    * @returns {void}
88
-    */
84
+     * Handles the email field value change.
85
+     *
86
+     * @protected
87
+     * @param {string} text - The value typed in the email field.
88
+     * @returns {void}
89
+     */
89
     _onChangeEmail(text) {
90
     _onChangeEmail(text) {
90
         this._updateProfile({
91
         this._updateProfile({
91
             email: text
92
             email: text
95
     _onChangeServerURL: (string) => void;
96
     _onChangeServerURL: (string) => void;
96
 
97
 
97
     /**
98
     /**
98
-    * Handles the server name field value change.
99
-    *
100
-    * @protected
101
-    * @param {string} text - The server URL typed in the server field.
102
-    * @returns {void}
103
-    */
99
+     * Handles the server name field value change.
100
+     *
101
+     * @protected
102
+     * @param {string} text - The server URL typed in the server field.
103
+     * @returns {void}
104
+     */
104
     _onChangeServerURL(text) {
105
     _onChangeServerURL(text) {
105
         this._updateProfile({
106
         this._updateProfile({
106
             serverURL: text
107
             serverURL: text
110
     _onRequestClose: () => void;
111
     _onRequestClose: () => void;
111
 
112
 
112
     /**
113
     /**
113
-    * Handles the back button.
114
-    *
115
-    * @returns {void}
116
-    */
114
+     * Handles the back button.
115
+     *
116
+     * @returns {void}
117
+     */
117
     _onRequestClose() {
118
     _onRequestClose() {
118
         this.props.dispatch(hideAppSettings());
119
         this.props.dispatch(hideAppSettings());
119
     }
120
     }
121
     _onStartAudioMutedChange: (boolean) => void;
122
     _onStartAudioMutedChange: (boolean) => void;
122
 
123
 
123
     /**
124
     /**
124
-    * Handles the start audio muted change event.
125
-    *
126
-    * @protected
127
-    * @param {boolean} newValue - The new value for the
128
-    * start audio muted option.
129
-    * @returns {void}
130
-    */
125
+     * Handles the start audio muted change event.
126
+     *
127
+     * @protected
128
+     * @param {boolean} newValue - The new value for the
129
+     * start audio muted option.
130
+     * @returns {void}
131
+     */
131
     _onStartAudioMutedChange(newValue) {
132
     _onStartAudioMutedChange(newValue) {
132
         this._updateProfile({
133
         this._updateProfile({
133
             startWithAudioMuted: newValue
134
             startWithAudioMuted: newValue
137
     _onStartVideoMutedChange: (boolean) => void;
138
     _onStartVideoMutedChange: (boolean) => void;
138
 
139
 
139
     /**
140
     /**
140
-    * Handles the start video muted change event.
141
-    *
142
-    * @protected
143
-    * @param {boolean} newValue - The new value for the
144
-    * start video muted option.
145
-    * @returns {void}
146
-    */
141
+     * Handles the start video muted change event.
142
+     *
143
+     * @protected
144
+     * @param {boolean} newValue - The new value for the
145
+     * start video muted option.
146
+     * @returns {void}
147
+     */
147
     _onStartVideoMutedChange(newValue) {
148
     _onStartVideoMutedChange(newValue) {
148
         this._updateProfile({
149
         this._updateProfile({
149
             startWithVideoMuted: newValue
150
             startWithVideoMuted: newValue
153
     _updateProfile: (Object) => void;
154
     _updateProfile: (Object) => void;
154
 
155
 
155
     /**
156
     /**
156
-    * Updates the persisted profile on any change.
157
-    *
158
-    * @private
159
-    * @param {Object} updateObject - The partial update object for the profile.
160
-    * @returns {void}
161
-    */
157
+     * Updates the persisted profile on any change.
158
+     *
159
+     * @private
160
+     * @param {Object} updateObject - The partial update object for the profile.
161
+     * @returns {void}
162
+     */
162
     _updateProfile(updateObject: Object) {
163
     _updateProfile(updateObject: Object) {
163
         this.props.dispatch(updateProfile({
164
         this.props.dispatch(updateProfile({
164
             ...this.props._profile,
165
             ...this.props._profile,
181
 
182
 
182
     return {
183
     return {
183
         _aspectRatio: state['features/base/aspect-ratio'].aspectRatio,
184
         _aspectRatio: state['features/base/aspect-ratio'].aspectRatio,
184
-        _serverURL,
185
         _profile,
185
         _profile,
186
+        _serverURL,
186
         _visible: state['features/app-settings'].visible
187
         _visible: state['features/app-settings'].visible
187
     };
188
     };
188
 }
189
 }

+ 20
- 23
react/features/app-settings/components/AppSettings.native.js 查看文件

5
     Switch,
5
     Switch,
6
     Text,
6
     Text,
7
     TextInput,
7
     TextInput,
8
-    View } from 'react-native';
8
+    View
9
+} from 'react-native';
9
 import { connect } from 'react-redux';
10
 import { connect } from 'react-redux';
10
 
11
 
11
-import {
12
-    _mapStateToProps,
13
-    AbstractAppSettings
14
-} from './AbstractAppSettings';
12
+import { ASPECT_RATIO_NARROW } from '../../base/aspect-ratio';
13
+import { translate } from '../../base/i18n';
14
+import { isIPad } from '../../base/react';
15
+
16
+import { _mapStateToProps, AbstractAppSettings } from './AbstractAppSettings';
15
 import BackButton from './BackButton';
17
 import BackButton from './BackButton';
16
 import FormRow from './FormRow';
18
 import FormRow from './FormRow';
17
 import FormSectionHeader from './FormSectionHeader';
19
 import FormSectionHeader from './FormSectionHeader';
20
+import { getSafetyOffset } from '../functions';
18
 import styles, { HEADER_PADDING } from './styles';
21
 import styles, { HEADER_PADDING } from './styles';
19
 
22
 
20
-import { getSafetyOffset } from '../functions.native';
21
-
22
-import { ASPECT_RATIO_NARROW } from '../../base/aspect-ratio';
23
-import { translate } from '../../base/i18n';
24
-import { isIPad } from '../../base/react';
25
-
26
 /**
23
 /**
27
  * The native container rendering the app settings page.
24
  * The native container rendering the app settings page.
28
  *
25
  *
30
  */
27
  */
31
 class AppSettings extends AbstractAppSettings {
28
 class AppSettings extends AbstractAppSettings {
32
     /**
29
     /**
33
-    * Instantiates a new {@code AppSettings} instance.
34
-    *
35
-    * @inheritdoc
36
-    */
30
+     * Instantiates a new {@code AppSettings} instance.
31
+     *
32
+     * @inheritdoc
33
+     */
37
     constructor(props) {
34
     constructor(props) {
38
         super(props);
35
         super(props);
39
 
36
 
49
     render() {
46
     render() {
50
         const { _profile, t } = this.props;
47
         const { _profile, t } = this.props;
51
 
48
 
52
-        // FIXME: presentationStyle is added to workaround
53
-        // orientation issue on iOS
49
+        // FIXME: presentationStyle is added to workaround orientation issue on
50
+        // iOS
54
 
51
 
55
         return (
52
         return (
56
             <Modal
53
             <Modal
131
     }
128
     }
132
 
129
 
133
     /**
130
     /**
134
-    * Calculates header safety padding for mobile devices.
135
-    * See comment in functions.js.
136
-    *
137
-    * @private
138
-    * @returns {Object}
139
-    */
131
+     * Calculates header safety padding for mobile devices. See comment in
132
+     * functions.js.
133
+     *
134
+     * @private
135
+     * @returns {Object}
136
+     */
140
     _getSafetyPadding() {
137
     _getSafetyPadding() {
141
         if (isIPad() || this.props._aspectRatio === ASPECT_RATIO_NARROW) {
138
         if (isIPad() || this.props._aspectRatio === ASPECT_RATIO_NARROW) {
142
             const safeOffset = Math.max(getSafetyOffset(), HEADER_PADDING);
139
             const safeOffset = Math.max(getSafetyOffset(), HEADER_PADDING);

+ 10
- 10
react/features/app-settings/components/BackButton.native.js 查看文件

3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
 import { TouchableOpacity } from 'react-native';
4
 import { TouchableOpacity } from 'react-native';
5
 
5
 
6
-import styles from './styles';
7
-
8
 import { Icon } from '../../base/font-icons';
6
 import { Icon } from '../../base/font-icons';
9
 import { Platform } from '../../base/react';
7
 import { Platform } from '../../base/react';
10
 
8
 
9
+import styles from './styles';
10
+
11
 /**
11
 /**
12
-* The icon glyph to be used on a specific platform.
13
-*/
12
+ * The icon glyph to be used on a specific platform.
13
+ */
14
 const BACK_ICON = Platform.OS === 'android' ? 'arrow_back' : 'navigate_before';
14
 const BACK_ICON = Platform.OS === 'android' ? 'arrow_back' : 'navigate_before';
15
 
15
 
16
 /**
16
 /**
17
-* The type of the React {@code Component} props of {@link BackButton}
18
-*/
17
+ * The type of the React {@code Component} props of {@link BackButton}
18
+ */
19
 type Props = {
19
 type Props = {
20
 
20
 
21
     /**
21
     /**
22
-    * The action to be performed when the button is pressed.
23
-    */
22
+     * The action to be performed when the button is pressed.
23
+     */
24
     onPress: Function,
24
     onPress: Function,
25
 
25
 
26
     /**
26
     /**
27
-    * An external style object passed to the component.
28
-    */
27
+     * An external style object passed to the component.
28
+     */
29
     style: Object
29
     style: Object
30
 };
30
 };
31
 
31
 

+ 34
- 36
react/features/app-settings/components/FormRow.native.js 查看文件

1
-/* @flow */
1
+// @flow
2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
-import {
5
-    Text,
6
-    View } from 'react-native';
4
+import { Text, View } from 'react-native';
7
 import { connect } from 'react-redux';
5
 import { connect } from 'react-redux';
8
 
6
 
9
-import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles';
10
-
11
-import { getSafetyOffset } from '../functions';
12
-
13
 import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
7
 import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
14
 import { translate } from '../../base/i18n';
8
 import { translate } from '../../base/i18n';
15
 
9
 
10
+import { getSafetyOffset } from '../functions';
11
+import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles';
12
+
16
 /**
13
 /**
17
-* The type of the React {@code Component} props of {@link FormRow}
18
-*/
14
+ * The type of the React {@code Component} props of {@link FormRow}
15
+ */
19
 type Props = {
16
 type Props = {
20
 
17
 
21
     /**
18
     /**
22
-    * The current aspect ratio of the screen.
23
-    */
19
+     * The current aspect ratio of the screen.
20
+     */
24
     _aspectRatio: Symbol,
21
     _aspectRatio: Symbol,
25
 
22
 
26
     /**
23
     /**
27
-    */
24
+     *
25
+     */
28
     children: Object,
26
     children: Object,
29
 
27
 
30
     /**
28
     /**
31
-    * Prop to decide if a row separator is to be rendered.
32
-    */
29
+     * Prop to decide if a row separator is to be rendered.
30
+     */
33
     fieldSeparator: boolean,
31
     fieldSeparator: boolean,
34
 
32
 
35
     /**
33
     /**
36
-    * The i18n key of the text label of the form field.
37
-    */
34
+     * The i18n key of the text label of the form field.
35
+     */
38
     i18nLabel: string,
36
     i18nLabel: string,
39
 
37
 
40
     /**
38
     /**
44
 }
42
 }
45
 
43
 
46
 /**
44
 /**
47
- * Implements a React {@code Component} which renders a standardized row
48
- * on a form. The component should have exactly one child component.
45
+ * Implements a React {@code Component} which renders a standardized row on a
46
+ * form. The component should have exactly one child component.
49
  */
47
  */
50
 class FormRow extends Component<Props> {
48
 class FormRow extends Component<Props> {
51
     /**
49
     /**
96
     _getDefaultFieldProps: (field: Component<*, *>) => Object;
94
     _getDefaultFieldProps: (field: Component<*, *>) => Object;
97
 
95
 
98
     /**
96
     /**
99
-    * Assembles the default props to the field child component of
100
-    * this form row.
101
-    *
102
-    * Currently tested/supported field types:
103
-    *       - TextInput
104
-    *       - Switch (needs no addition props ATM).
105
-    *
106
-    * @private
107
-    * @param {Object} field - The field (child) component.
108
-    * @returns {Object}
109
-    */
97
+     * Assembles the default props to the field child component of this form
98
+     * row.
99
+     *
100
+     * Currently tested/supported field types:
101
+     *     - TextInput
102
+     *     - Switch (needs no addition props ATM).
103
+     *
104
+     * @private
105
+     * @param {Object} field - The field (child) component.
106
+     * @returns {Object}
107
+     */
110
     _getDefaultFieldProps(field: Object) {
108
     _getDefaultFieldProps(field: Object) {
111
         if (field && field.type) {
109
         if (field && field.type) {
112
             switch (field.type.displayName) {
110
             switch (field.type.displayName) {
124
     _getRowStyle: () => Array<Object>;
122
     _getRowStyle: () => Array<Object>;
125
 
123
 
126
     /**
124
     /**
127
-    * Assembles the row style array based on the row's props.
128
-    * For padding, see comment in functions.js.
129
-    *
130
-    * @private
131
-    * @returns {Array<Object>}
132
-    */
125
+     * Assembles the row style array based on the row's props. For padding, see
126
+     * comment in functions.js.
127
+     *
128
+     * @private
129
+     * @returns {Array<Object>}
130
+     */
133
     _getRowStyle() {
131
     _getRowStyle() {
134
         const rowStyle = [
132
         const rowStyle = [
135
             styles.fieldContainer
133
             styles.fieldContainer

+ 22
- 24
react/features/app-settings/components/FormSectionHeader.native.js 查看文件

1
-/* @flow */
1
+// @flow
2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
 import { Text, View } from 'react-native';
4
 import { Text, View } from 'react-native';
5
 import { connect } from 'react-redux';
5
 import { connect } from 'react-redux';
6
 
6
 
7
-import styles, { CONTAINER_PADDING } from './styles';
8
-
9
-import { getSafetyOffset } from '../functions';
10
-
11
 import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
7
 import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
12
 import { translate } from '../../base/i18n';
8
 import { translate } from '../../base/i18n';
13
 
9
 
10
+import { getSafetyOffset } from '../functions';
11
+import styles, { CONTAINER_PADDING } from './styles';
12
+
14
 /**
13
 /**
15
-* The type of the React {@code Component} props of {@link FormSectionHeader}
16
-*/
14
+ * The type of the React {@code Component} props of {@link FormSectionHeader}
15
+ */
17
 type Props = {
16
 type Props = {
18
 
17
 
19
     /**
18
     /**
20
-    * The current aspect ratio of the screen.
21
-    */
19
+     * The current aspect ratio of the screen.
20
+     */
22
     _aspectRatio: Symbol,
21
     _aspectRatio: Symbol,
23
 
22
 
24
     /**
23
     /**
25
-    * The i18n key of the text label of the section.
26
-    */
24
+     * The i18n key of the text label of the section.
25
+     */
27
     i18nLabel: string,
26
     i18nLabel: string,
28
 
27
 
29
     /**
28
     /**
30
-    * An external style object passed to the component.
31
-    */
29
+     * An external style object passed to the component.
30
+     */
32
     style: Object,
31
     style: Object,
33
 
32
 
34
     /**
33
     /**
38
 }
37
 }
39
 
38
 
40
 /**
39
 /**
41
- * Implements a React {@code Component} which renders
42
- * a section header on a form. This calculates the available safe view as well.
40
+ * Implements a React {@code Component} which renders a section header on a
41
+ * form. This calculates the available safe view as well.
43
  */
42
  */
44
 class FormSectionHeader extends Component<Props> {
43
 class FormSectionHeader extends Component<Props> {
45
     /**
44
     /**
80
     _getSafetyMargin: () => Object;
79
     _getSafetyMargin: () => Object;
81
 
80
 
82
     /**
81
     /**
83
-    * Calculates the safety margin for this header.
84
-    * See comment in functions.js.
85
-    *
86
-    * @private
87
-    * @returns {Object}
88
-    */
82
+     * Calculates the safety margin for this header. See comment in
83
+     * functions.js.
84
+     *
85
+     * @private
86
+     * @returns {Object}
87
+     */
89
     _getSafetyMargin() {
88
     _getSafetyMargin() {
90
         if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
89
         if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
91
-            const safeOffset = Math.max(
92
-                getSafetyOffset() - CONTAINER_PADDING, 0
93
-            );
90
+            const safeOffset
91
+                = Math.max(getSafetyOffset() - CONTAINER_PADDING, 0);
94
 
92
 
95
             return {
93
             return {
96
                 marginLeft: safeOffset,
94
                 marginLeft: safeOffset,

+ 30
- 30
react/features/app-settings/components/styles.js 查看文件

1
 import { Platform } from 'react-native';
1
 import { Platform } from 'react-native';
2
+
2
 import {
3
 import {
3
     BoxModel,
4
     BoxModel,
4
     ColorPalette,
5
     ColorPalette,
13
 
14
 
14
 /**
15
 /**
15
  * The styles of the React {@code Components} of the feature
16
  * The styles of the React {@code Components} of the feature
16
- * {@code AppSettings}.
17
+ * {@code app-settings}.
17
  */
18
  */
18
 export default createStyleSheet({
19
 export default createStyleSheet({
19
 
20
 
20
     /**
21
     /**
21
-    *The platform specific back button style.
22
-    */
22
+     * The platform specific back button style.
23
+     */
23
     backIcon: {
24
     backIcon: {
24
         alignSelf: 'center',
25
         alignSelf: 'center',
25
         ...Platform.select({
26
         ...Platform.select({
26
-            ios: {
27
-                alignSelf: 'center',
28
-                fontSize: 30
29
-            },
30
             android: {
27
             android: {
31
                 fontSize: 24,
28
                 fontSize: 24,
32
                 padding: 8
29
                 padding: 8
30
+            },
31
+            ios: {
32
+                fontSize: 30
33
             }
33
             }
34
         })
34
         })
35
     },
35
     },
36
 
36
 
37
     /**
37
     /**
38
-    * Standardized style for a field container {@code View}.
39
-    */
38
+     * Standardized style for a field container {@code View}.
39
+     */
40
     fieldContainer: {
40
     fieldContainer: {
41
         alignItems: 'center',
41
         alignItems: 'center',
42
         flexDirection: 'row',
42
         flexDirection: 'row',
44
     },
44
     },
45
 
45
 
46
     /**
46
     /**
47
-    * Standard container for a {@code View} containing a field label.
48
-    */
47
+     * Standard container for a {@code View} containing a field label.
48
+     */
49
     fieldLabelContainer: {
49
     fieldLabelContainer: {
50
         alignItems: 'center',
50
         alignItems: 'center',
51
         flexDirection: 'row'
51
         flexDirection: 'row'
52
     },
52
     },
53
 
53
 
54
     /**
54
     /**
55
-    * Field container style for all but last row {@code View}.
56
-    */
55
+     * Field container style for all but last row {@code View}.
56
+     */
57
     fieldSeparator: {
57
     fieldSeparator: {
58
         borderBottomWidth: 1,
58
         borderBottomWidth: 1,
59
         borderColor: 'rgba(0, 0, 0, 0.1)'
59
         borderColor: 'rgba(0, 0, 0, 0.1)'
60
     },
60
     },
61
 
61
 
62
     /**
62
     /**
63
-    * Style for the {@code View} containing each
64
-    * field values (the actual field).
65
-    */
63
+     * Style for the {@code View} containing each
64
+     * field values (the actual field).
65
+     */
66
     fieldValueContainer: {
66
     fieldValueContainer: {
67
         alignItems: 'center',
67
         alignItems: 'center',
68
         flex: 1,
68
         flex: 1,
77
     },
77
     },
78
 
78
 
79
     /**
79
     /**
80
-    * Page header {@code View}.
81
-    */
80
+     * Page header {@code View}.
81
+     */
82
     headerContainer: {
82
     headerContainer: {
83
         alignItems: 'center',
83
         alignItems: 'center',
84
         backgroundColor: HEADER_COLOR,
84
         backgroundColor: HEADER_COLOR,
88
     },
88
     },
89
 
89
 
90
     /**
90
     /**
91
-    * The title {@code Text} of the header.
92
-    */
91
+     * The title {@code Text} of the header.
92
+     */
93
     headerTitle: {
93
     headerTitle: {
94
         color: ColorPalette.white,
94
         color: ColorPalette.white,
95
         fontSize: 24
95
         fontSize: 24
96
     },
96
     },
97
 
97
 
98
     /**
98
     /**
99
-    * Style of the scrollview to be able to scroll the content.
100
-    */
99
+     * Style of the ScrollView to be able to scroll the content.
100
+     */
101
     scrollView: {
101
     scrollView: {
102
         flex: 1
102
         flex: 1
103
     },
103
     },
104
 
104
 
105
     /**
105
     /**
106
-    * The back button style on the settings screen.
107
-    */
106
+     * The back button style on the settings screen.
107
+     */
108
     settingsBackButton: {
108
     settingsBackButton: {
109
         color: ColorPalette.white,
109
         color: ColorPalette.white,
110
         fontSize: 25
110
         fontSize: 25
111
     },
111
     },
112
 
112
 
113
     /**
113
     /**
114
-    * The top level container {@code View}.
115
-    */
114
+     * The top level container {@code View}.
115
+     */
116
     settingsContainer: {
116
     settingsContainer: {
117
         backgroundColor: ColorPalette.white,
117
         backgroundColor: ColorPalette.white,
118
         flex: 1,
118
         flex: 1,
123
     },
123
     },
124
 
124
 
125
     /**
125
     /**
126
-    * Global {@code Text} color for the page.
127
-    */
126
+     * Global {@code Text} color for the page.
127
+     */
128
     text: {
128
     text: {
129
         color: ColorPalette.black,
129
         color: ColorPalette.black,
130
         fontSize: TEXT_SIZE
130
         fontSize: TEXT_SIZE
131
     },
131
     },
132
 
132
 
133
     /**
133
     /**
134
-    * Standard text input field style.
135
-    */
134
+     * Standard text input field style.
135
+     */
136
     textInputField: {
136
     textInputField: {
137
         flex: 1,
137
         flex: 1,
138
         fontSize: TEXT_SIZE,
138
         fontSize: TEXT_SIZE,

+ 8
- 14
react/features/app-settings/functions.native.js 查看文件

6
 const IPHONEX_OFFSET = 44;
6
 const IPHONEX_OFFSET = 44;
7
 
7
 
8
 /**
8
 /**
9
-* Determines the offset to be used for the device.
10
-* This uses a custom implementation to minimize empty area around screen,
11
-* especially on iPhone X.
12
-*
13
-* @returns {number}
14
-*/
9
+ * Determines the offset to be used for the device. This uses a custom
10
+ * implementation to minimize empty area around screen, especially on iPhone X.
11
+ *
12
+ * @returns {number}
13
+ */
15
 export function getSafetyOffset() {
14
 export function getSafetyOffset() {
16
     if (Platform.OS === 'android') {
15
     if (Platform.OS === 'android') {
17
-        /* Android doesn't need offset, except the Essential phone. Should be
18
-        * addressed later with a generic solution.
19
-        */
16
+        // Android doesn't need offset, except the Essential phone. Should be
17
+        // addressed later with a generic solution.
20
         return 0;
18
         return 0;
21
     }
19
     }
22
 
20
 
23
-    if (isIPhoneX()) {
24
-        return IPHONEX_OFFSET;
25
-    }
26
-
27
-    return IPHONE_OFFSET;
21
+    return isIPhoneX() ? IPHONEX_OFFSET : IPHONE_OFFSET;
28
 }
22
 }

+ 5
- 5
react/features/app-settings/middleware.js 查看文件

1
-/* @flow */
2
-
3
-import { hideAppSettings } from './actions';
1
+// @flow
4
 
2
 
5
 import { SET_ROOM } from '../base/conference';
3
 import { SET_ROOM } from '../base/conference';
6
 import { MiddlewareRegistry } from '../base/redux';
4
 import { MiddlewareRegistry } from '../base/redux';
7
 
5
 
6
+import { hideAppSettings } from './actions';
7
+
8
 /**
8
 /**
9
  * The Redux middleware to trigger settings screen show or hide
9
  * The Redux middleware to trigger settings screen show or hide
10
  * when necessary.
10
  * when necessary.
30
  * @private
30
  * @private
31
  * @returns {Object} The new state.
31
  * @returns {Object} The new state.
32
  */
32
  */
33
-function _closeAppSettings(store, next, action) {
34
-    store.dispatch(hideAppSettings());
33
+function _closeAppSettings({ dispatch }, next, action) {
34
+    dispatch(hideAppSettings());
35
 
35
 
36
     return next(action);
36
     return next(action);
37
 }
37
 }

+ 8
- 9
react/features/app/components/AbstractApp.js 查看文件

179
      * @returns {void}
179
      * @returns {void}
180
      */
180
      */
181
     componentWillReceiveProps(nextProps) {
181
     componentWillReceiveProps(nextProps) {
182
-        const currentProps = this.props;
182
+        const { props } = this;
183
 
183
 
184
         this.init.then(() => {
184
         this.init.then(() => {
185
             // The consumer of this AbstractApp did not provide a redux store.
185
             // The consumer of this AbstractApp did not provide a redux store.
191
                     // its own internal redux store. If the consumer did not
191
                     // its own internal redux store. If the consumer did not
192
                     // provide a redux store before, then this instance is
192
                     // provide a redux store before, then this instance is
193
                     // using its own internal redux store already.
193
                     // using its own internal redux store already.
194
-                    && typeof currentProps.store !== 'undefined') {
194
+                    && typeof props.store !== 'undefined') {
195
                 this.setState({
195
                 this.setState({
196
                     store: this._maybeCreateStore(nextProps)
196
                     store: this._maybeCreateStore(nextProps)
197
                 });
197
                 });
201
             let { url } = nextProps;
201
             let { url } = nextProps;
202
 
202
 
203
             url = toURLString(url);
203
             url = toURLString(url);
204
-            if (toURLString(currentProps.url) !== url
204
+            if (toURLString(props.url) !== url
205
 
205
 
206
                     // XXX Refer to the implementation of loadURLObject: in
206
                     // XXX Refer to the implementation of loadURLObject: in
207
                     // ios/sdk/src/JitsiMeetView.m for further information.
207
                     // ios/sdk/src/JitsiMeetView.m for further information.
208
-                    || currentProps.timestamp !== nextProps.timestamp) {
208
+                    || props.timestamp !== nextProps.timestamp) {
209
                 this._openURL(url || this._getDefaultURL());
209
                 this._openURL(url || this._getDefaultURL());
210
             }
210
             }
211
         });
211
         });
375
             }
375
             }
376
         }
376
         }
377
 
377
 
378
-        const profileServerURL = getProfile(
379
-            this._getStore().getState()
380
-        ).serverURL;
381
-
382
-        return this.props.defaultURL || profileServerURL || DEFAULT_URL;
378
+        return (
379
+            this.props.defaultURL
380
+                || getProfile(this._getStore().getState()).serverURL
381
+                || DEFAULT_URL);
383
     }
382
     }
384
 
383
 
385
     /**
384
     /**

+ 1
- 0
react/features/base/lib-jitsi-meet/native/polyfills-browser.js 查看文件

214
             if (console) {
214
             if (console) {
215
                 const loggerLevels = require('jitsi-meet-logger').levels;
215
                 const loggerLevels = require('jitsi-meet-logger').levels;
216
 
216
 
217
+                console.disableYellowBox = true;
217
                 Object.keys(loggerLevels).forEach(key => {
218
                 Object.keys(loggerLevels).forEach(key => {
218
                     const level = loggerLevels[key];
219
                     const level = loggerLevels[key];
219
                     const consoleLog = console[level];
220
                     const consoleLog = console[level];

+ 17
- 15
react/features/base/profile/middleware.js 查看文件

1
-/* @flow */
2
-import { PROFILE_UPDATED } from './actionTypes';
3
-import MiddlewareRegistry from '../redux/MiddlewareRegistry';
1
+// @flow
4
 
2
 
5
-import {
6
-    getLocalParticipant,
7
-    participantUpdated
8
-} from '../participants';
3
+import { getLocalParticipant, participantUpdated } from '../participants';
9
 import { getProfile } from '../profile';
4
 import { getProfile } from '../profile';
10
-import { toState } from '../redux';
5
+import { MiddlewareRegistry, toState } from '../redux';
6
+
7
+import { PROFILE_UPDATED } from './actionTypes';
11
 
8
 
12
 /**
9
 /**
13
- * A MiddleWare to update the local participant when the profile
14
- * is updated.
10
+ * A middleWare to update the local participant when the profile is updated.
15
  *
11
  *
16
  * @param {Store} store - The redux store.
12
  * @param {Store} store - The redux store.
17
  * @returns {Function}
13
  * @returns {Function}
34
  * @returns {void}
30
  * @returns {void}
35
  */
31
  */
36
 function _updateLocalParticipant(store) {
32
 function _updateLocalParticipant(store) {
37
-    const localParticipant = getLocalParticipant(toState(store));
38
-    const profile = getProfile(toState(store));
33
+    const state = toState(store);
34
+    const localParticipant = getLocalParticipant(state);
35
+    const profile = getProfile(state);
39
 
36
 
40
-    localParticipant.email = profile.email;
41
-    localParticipant.name = profile.displayName;
37
+    store.dispatch(participantUpdated({
38
+        // Identify that the participant to update i.e. the local participant:
39
+        id: localParticipant && localParticipant.id,
40
+        local: true,
42
 
41
 
43
-    store.dispatch(participantUpdated(localParticipant));
42
+        // Specify the updates to be applied to the identified participant:
43
+        email: profile.email,
44
+        name: profile.displayName
45
+    }));
44
 }
46
 }

+ 14
- 16
react/features/base/react/functions.native.js 查看文件

1
 // @flow
1
 // @flow
2
 
2
 
3
 import { Dimensions } from 'react-native';
3
 import { Dimensions } from 'react-native';
4
+
4
 import Platform from './Platform';
5
 import Platform from './Platform';
5
 
6
 
6
 const IPHONEX_HEIGHT = 812;
7
 const IPHONEX_HEIGHT = 812;
7
 const IPHONEX_WIDTH = 375;
8
 const IPHONEX_WIDTH = 375;
8
 
9
 
9
 /**
10
 /**
10
-* Determines if the device is an iPad or not.
11
-*
12
-* @returns {boolean}
13
-*/
11
+ * Determines if the device is an iPad or not.
12
+ *
13
+ * @returns {boolean}
14
+ */
14
 export function isIPad() {
15
 export function isIPad() {
15
     const { height, width } = Dimensions.get('window');
16
     const { height, width } = Dimensions.get('window');
16
 
17
 
17
-    return Platform.OS === 'ios' && (
18
-        Math.max(height, width)
19
-            / Math.min(height, width)) < 1.6;
18
+    return (
19
+        Platform.OS === 'ios'
20
+            && (Math.max(height, width) / Math.min(height, width)) < 1.6);
20
 }
21
 }
21
 
22
 
22
 /**
23
 /**
23
-* Determines if it's an iPhone X or not.
24
-*
25
-* @returns {boolean}
26
-*/
24
+ * Determines if it's an iPhone X or not.
25
+ *
26
+ * @returns {boolean}
27
+ */
27
 export function isIPhoneX() {
28
 export function isIPhoneX() {
28
     const { height, width } = Dimensions.get('window');
29
     const { height, width } = Dimensions.get('window');
29
 
30
 
30
     return (
31
     return (
31
         Platform.OS === 'ios'
32
         Platform.OS === 'ios'
32
-            && ((height === IPHONEX_HEIGHT
33
-                && width === IPHONEX_WIDTH)
34
-            || (height === IPHONEX_WIDTH
35
-                && width === IPHONEX_HEIGHT))
36
-    );
33
+            && ((height === IPHONEX_HEIGHT && width === IPHONEX_WIDTH)
34
+                || (height === IPHONEX_WIDTH && width === IPHONEX_HEIGHT)));
37
 }
35
 }

+ 24
- 24
react/features/recent-list/middleware.js 查看文件

26
 });
26
 });
27
 
27
 
28
 /**
28
 /**
29
-* Stores the recently joined room into {@code window.localStorage}.
30
-*
31
-* @param {Store} store - The redux store in which the specified action is being
32
-* dispatched.
33
-* @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
34
-* specified action to the specified store.
35
-* @param {Action} action - The redux action {@code SET_ROOM} which is being
36
-* dispatched in the specified store.
37
-* @private
38
-* @returns {Object} The new state that is the result of the reduction of the
39
-* specified action.
40
-*/
29
+ * Stores the recently joined room into {@code window.localStorage}.
30
+ *
31
+ * @param {Store} store - The redux store in which the specified action is being
32
+ * dispatched.
33
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
34
+ * specified action to the specified store.
35
+ * @param {Action} action - The redux action {@code SET_ROOM} which is being
36
+ * dispatched in the specified store.
37
+ * @private
38
+ * @returns {Object} The new state that is the result of the reduction of the
39
+ * specified action.
40
+ */
41
 function _storeJoinedRoom(store, next, action) {
41
 function _storeJoinedRoom(store, next, action) {
42
     const result = next(action);
42
     const result = next(action);
43
 
43
 
70
 }
70
 }
71
 
71
 
72
 /**
72
 /**
73
-* Updates the conference length when left.
74
-*
75
-* @param {Store} store - The redux store in which the specified action is being
76
-* dispatched.
77
-* @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
78
-* specified action to the specified store.
79
-* @param {Action} action - The redux action {@code CONFERENCE_WILL_LEAVE} which
80
-* is being dispatched in the specified store.
81
-* @private
82
-* @returns {Object} The new state that is the result of the reduction of the
83
-* specified action.
84
-*/
73
+ * Updates the conference length when left.
74
+ *
75
+ * @param {Store} store - The redux store in which the specified action is being
76
+ * dispatched.
77
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
78
+ * specified action to the specified store.
79
+ * @param {Action} action - The redux action {@code CONFERENCE_WILL_LEAVE} which
80
+ * is being dispatched in the specified store.
81
+ * @private
82
+ * @returns {Object} The new state that is the result of the reduction of the
83
+ * specified action.
84
+ */
85
 function _updateConferenceDuration({ getState }, next, action) {
85
 function _updateConferenceDuration({ getState }, next, action) {
86
     const result = next(action);
86
     const result = next(action);
87
 
87
 

+ 5
- 5
react/features/welcome/components/AbstractWelcomePage.js 查看文件

201
     _onSettingsOpen: () => void;
201
     _onSettingsOpen: () => void;
202
 
202
 
203
     /**
203
     /**
204
-    * Sets the app settings modal visible.
205
-    *
206
-    * @protected
207
-    * @returns {void}
208
-    */
204
+     * Sets the app settings modal visible.
205
+     *
206
+     * @protected
207
+     * @returns {void}
208
+     */
209
     _onSettingsOpen() {
209
     _onSettingsOpen() {
210
         this.props.dispatch(showAppSettings());
210
         this.props.dispatch(showAppSettings());
211
     }
211
     }

+ 8
- 8
react/features/welcome/components/styles.js 查看文件

38
     },
38
     },
39
 
39
 
40
     /**
40
     /**
41
-    * Layout of the button container.
42
-    */
41
+     * Layout of the button container.
42
+     */
43
     buttonRow: {
43
     buttonRow: {
44
         flexDirection: 'row'
44
         flexDirection: 'row'
45
     },
45
     },
54
     },
54
     },
55
 
55
 
56
     /**
56
     /**
57
-    * Style of the join button.
58
-    */
57
+     * Style of the join button.
58
+     */
59
     joinButton: {
59
     joinButton: {
60
         flex: 1
60
         flex: 1
61
     },
61
     },
126
     },
126
     },
127
 
127
 
128
     /**
128
     /**
129
-    * Style of the settings button.
130
-    */
129
+     * Style of the settings button.
130
+     */
131
     settingsButton: {
131
     settingsButton: {
132
         width: 65,
132
         width: 65,
133
         marginRight: BoxModel.margin
133
         marginRight: BoxModel.margin
134
     },
134
     },
135
 
135
 
136
     /**
136
     /**
137
-    * Style of the settings icon on the settings button.
138
-    */
137
+     * Style of the settings icon on the settings button.
138
+     */
139
     settingsIcon: {
139
     settingsIcon: {
140
         fontSize: 24,
140
         fontSize: 24,
141
         alignSelf: 'center'
141
         alignSelf: 'center'

Loading…
取消
儲存