diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml index 7e0e9a25f..d71054c9f 100644 --- a/android/app/src/main/res/values/styles.xml +++ b/android/app/src/main/res/values/styles.xml @@ -2,6 +2,5 @@ diff --git a/lang/main.json b/lang/main.json index 3e840984d..6870d1617 100644 --- a/lang/main.json +++ b/lang/main.json @@ -47,13 +47,15 @@ }, "welcomepage":{ "appDescription": "Go ahead, video chat with the whole team. In fact, invite everyone you know. __app__ is a fully encrypted, 100% open source video conferencing solution that you can use all day, every day, for free — with no account needed.", + "audioOnlyLabel": "Voice", "go": "GO", "join": "JOIN", "privacy": "Privacy", "roomname": "Enter room name", "sendFeedback": "Send feedback", "terms": "Terms", - "title": "More secure, more flexible, and completely free video conferencing" + "title": "More secure, more flexible, and completely free video conferencing", + "videoEnabledLabel": "Video" }, "startupoverlay": { "policyText": " ", @@ -500,7 +502,7 @@ "title": "Call info", "tooltip": "Get access info about the meeting" }, - "profileModal": { + "settingsScreen": { "alertOk": "OK", "alertTitle": "Warning", "alertURLText": "The entered server URL is invalid", diff --git a/react/features/app-settings/actionTypes.js b/react/features/app-settings/actionTypes.js index 08f2ce70c..36c7e0b12 100644 --- a/react/features/app-settings/actionTypes.js +++ b/react/features/app-settings/actionTypes.js @@ -1,6 +1,6 @@ /** * The type of (redux) action which signals the request - * to hide the app settings modal. + * to hide the app settings screen. * * { * type: HIDE_APP_SETTINGS @@ -10,7 +10,7 @@ export const HIDE_APP_SETTINGS = Symbol('HIDE_APP_SETTINGS'); /** * The type of (redux) action which signals the request - * to show the app settings modal where available. + * to show the app settings screen where available. * * { * type: SHOW_APP_SETTINGS diff --git a/react/features/app-settings/actions.js b/react/features/app-settings/actions.js index a18cc2a77..f446570ec 100644 --- a/react/features/app-settings/actions.js +++ b/react/features/app-settings/actions.js @@ -3,7 +3,7 @@ import { HIDE_APP_SETTINGS, SHOW_APP_SETTINGS } from './actionTypes'; /** - * Redux-signals the request to hide the app settings modal. + * Redux-signals the request to hide the app settings screen. * * @returns {{ * type: HIDE_APP_SETTINGS @@ -16,7 +16,7 @@ export function hideAppSettings() { } /** - * Redux-signals the request to open the app settings modal. + * Redux-signals the request to open the app settings screen. * * @returns {{ * type: SHOW_APP_SETTINGS diff --git a/react/features/app-settings/components/AbstractAppSettings.js b/react/features/app-settings/components/AbstractAppSettings.js index 38e64810d..70e0147ee 100644 --- a/react/features/app-settings/components/AbstractAppSettings.js +++ b/react/features/app-settings/components/AbstractAppSettings.js @@ -9,11 +9,6 @@ import { getProfile, updateProfile } from '../../base/profile'; */ type Props = { - /** - * The current aspect ratio of the screen. - */ - _aspectRatio: Symbol, - /** * The current profile object. */ @@ -25,7 +20,7 @@ type Props = { _serverURL: string, /** - * The visibility prop of the settings modal. + * The visibility prop of the settings screen. */ _visible: boolean, @@ -173,7 +168,6 @@ export function _mapStateToProps(state: Object) { const _profile = getProfile(state); return { - _aspectRatio: state['features/base/responsive-ui'].aspectRatio, _profile, _serverURL, _visible: state['features/app-settings'].visible diff --git a/react/features/app-settings/components/AppSettings.native.js b/react/features/app-settings/components/AppSettings.native.js index db3393871..86040846a 100644 --- a/react/features/app-settings/components/AppSettings.native.js +++ b/react/features/app-settings/components/AppSettings.native.js @@ -4,6 +4,7 @@ import React from 'react'; import { Alert, Modal, + SafeAreaView, ScrollView, Switch, Text, @@ -13,16 +14,15 @@ import { import { connect } from 'react-redux'; import { translate } from '../../base/i18n'; -import { getSafetyOffset, isIPad } from '../../base/react'; -import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui'; +import { Header } from '../../base/react'; +import { PlatformElements } from '../../base/styles'; -import { _mapStateToProps, AbstractAppSettings } from './AbstractAppSettings'; import { hideAppSettings } from '../actions'; -import BackButton from './BackButton.native'; -import FormRow from './FormRow.native'; -import FormSectionHeader from './FormSectionHeader.native'; import { normalizeUserInputURL } from '../functions'; -import styles, { HEADER_PADDING } from './styles'; + +import { BackButton, FormRow, FormSectionHeader } from './_'; +import { _mapStateToProps, AbstractAppSettings } from './AbstractAppSettings'; +import styles from './styles'; /** * The native container rendering the app settings page. @@ -40,7 +40,6 @@ class AppSettings extends AbstractAppSettings { constructor(props) { super(props); - this._getSafetyPadding = this._getSafetyPadding.bind(this); this._onBlurServerURL = this._onBlurServerURL.bind(this); this._onRequestClose = this._onRequestClose.bind(this); this._setURLFieldReference = this._setURLFieldReference.bind(this); @@ -56,110 +55,91 @@ class AppSettings extends AbstractAppSettings { render() { const { _profile, t } = this.props; - // FIXME: presentationStyle is added to workaround orientation issue on - // iOS - return ( - - - - { t('profileModal.header') } - + +
+ + + { t('settingsScreen.header') } + +
+ + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - ); } - _getSafetyPadding: () => Object; - - /** - * Calculates header safety padding for mobile devices. See comment in - * functions.js. - * - * @private - * @returns {Object} - */ - _getSafetyPadding() { - if (isIPad() || this.props._aspectRatio === ASPECT_RATIO_NARROW) { - const safeOffset = Math.max(getSafetyOffset(), HEADER_PADDING); - - return { - paddingTop: safeOffset - }; - } - - return undefined; - } - _onBlurServerURL: () => void; /** @@ -183,8 +163,6 @@ class AppSettings extends AbstractAppSettings { _onStartVideoMutedChange: (boolean) => void; - _onRequestClose: () => void; - /** * Processes the server URL. It normalizes it and an error alert is * displayed in case it's incorrect. @@ -208,6 +186,8 @@ class AppSettings extends AbstractAppSettings { } } + _onRequestClose: () => void; + /** * Handles the back button. * Also invokes normalizeUserInputURL to validate the URL entered @@ -243,12 +223,12 @@ class AppSettings extends AbstractAppSettings { const { t } = this.props; Alert.alert( - t('profileModal.alertTitle'), - t('profileModal.alertURLText'), + t('settingsScreen.alertTitle'), + t('settingsScreen.alertURLText'), [ { onPress: () => this._urlField.focus(), - text: t('profileModal.alertOk') + text: t('settingsScreen.alertOk') } ] ); diff --git a/react/features/app-settings/components/FormSectionHeader.native.js b/react/features/app-settings/components/FormSectionHeader.native.js deleted file mode 100644 index e4756f617..000000000 --- a/react/features/app-settings/components/FormSectionHeader.native.js +++ /dev/null @@ -1,117 +0,0 @@ -// @flow - -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; -import { connect } from 'react-redux'; - -import { translate } from '../../base/i18n'; -import { getSafetyOffset } from '../../base/react'; -import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui'; - -import styles, { CONTAINER_PADDING } from './styles'; - -/** - * The type of the React {@code Component} props of {@link FormSectionHeader} - */ -type Props = { - - /** - * The current aspect ratio of the screen. - */ - _aspectRatio: Symbol, - - /** - * The i18n key of the text label of the section. - */ - i18nLabel: string, - - /** - * An external style object passed to the component. - */ - style: Object, - - /** - * Invoked to obtain translated strings. - */ - t: Function -} - -/** - * Implements a React {@code Component} which renders a section header on a - * form. This calculates the available safe view as well. - */ -class FormSectionHeader extends Component { - /** - * Initializes a new {@code FormSectionHeader} instance. - * - * @param {Object} props - Component properties. - */ - constructor(props) { - super(props); - - this._getSafetyMargin = this._getSafetyMargin.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @override - * @returns {ReactElement} - */ - render() { - const { t } = this.props; - - return ( - - - { t(this.props.i18nLabel) } - - - ); - } - - _getSafetyMargin: () => Object; - - /** - * Calculates the safety margin for this header. See comment in - * functions.js. - * - * @private - * @returns {Object} - */ - _getSafetyMargin() { - if (this.props._aspectRatio === ASPECT_RATIO_WIDE) { - const safeOffset - = Math.max(getSafetyOffset() - CONTAINER_PADDING, 0); - - return { - marginLeft: safeOffset, - marginRight: safeOffset - }; - } - - return undefined; - } -} - -/** - * Maps (parts of) the redux state to the React {@code Component} props of - * {@code FormSectionHeader}. - * - * @param {Object} state - The redux state. - * @protected - * @returns {Object} - */ -export function _mapStateToProps(state: Object) { - return { - _aspectRatio: state['features/base/responsive-ui'].aspectRatio - }; -} - -export default translate(connect(_mapStateToProps)(FormSectionHeader)); diff --git a/react/features/app-settings/components/_.native.js b/react/features/app-settings/components/_.native.js new file mode 100644 index 000000000..738c4d2b8 --- /dev/null +++ b/react/features/app-settings/components/_.native.js @@ -0,0 +1 @@ +export * from './native'; diff --git a/react/features/base/react/functions.web.js b/react/features/app-settings/components/_.web.js similarity index 100% rename from react/features/base/react/functions.web.js rename to react/features/app-settings/components/_.web.js diff --git a/react/features/app-settings/components/BackButton.native.js b/react/features/app-settings/components/native/BackButton.js similarity index 84% rename from react/features/app-settings/components/BackButton.native.js rename to react/features/app-settings/components/native/BackButton.js index 717ef99cb..e1889a45a 100644 --- a/react/features/app-settings/components/BackButton.native.js +++ b/react/features/app-settings/components/native/BackButton.js @@ -3,9 +3,8 @@ import React, { Component } from 'react'; import { TouchableOpacity } from 'react-native'; -import { Icon } from '../../base/font-icons'; - -import styles from './styles'; +import { Icon } from '../../../base/font-icons'; +import { PlatformElements } from '../../../base/styles'; /** * The type of the React {@code Component} props of {@link BackButton} @@ -20,7 +19,7 @@ type Props = { /** * An external style object passed to the component. */ - style: Object + style?: Object }; /** @@ -41,7 +40,7 @@ export default class BackButton extends Component { diff --git a/react/features/app-settings/components/FormRow.native.js b/react/features/app-settings/components/native/FormRow.js similarity index 71% rename from react/features/app-settings/components/FormRow.native.js rename to react/features/app-settings/components/native/FormRow.js index ffd2f35aa..461a71647 100644 --- a/react/features/app-settings/components/FormRow.native.js +++ b/react/features/app-settings/components/native/FormRow.js @@ -2,24 +2,16 @@ import React, { Component } from 'react'; import { Text, View } from 'react-native'; -import { connect } from 'react-redux'; -import { translate } from '../../base/i18n'; -import { getSafetyOffset } from '../../base/react'; -import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui'; +import { translate } from '../../../base/i18n'; -import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles'; +import styles, { ANDROID_UNDERLINE_COLOR } from './styles'; /** * The type of the React {@code Component} props of {@link FormRow} */ type Props = { - /** - * The current aspect ratio of the screen. - */ - _aspectRatio: Symbol, - /** * */ @@ -80,7 +72,10 @@ class FormRow extends Component { - + { t(this.props.i18nLabel) } @@ -122,8 +117,7 @@ class FormRow extends Component { _getRowStyle: () => Array; /** - * Assembles the row style array based on the row's props. For padding, see - * comment in functions.js. + * Assembles the row style array based on the row's props. * * @private * @returns {Array} @@ -137,33 +131,8 @@ class FormRow extends Component { rowStyle.push(styles.fieldSeparator); } - if (this.props._aspectRatio === ASPECT_RATIO_WIDE) { - const safeOffset = Math.max( - getSafetyOffset() - CONTAINER_PADDING, 0 - ); - - rowStyle.push({ - marginLeft: safeOffset, - marginRight: safeOffset - }); - } - return rowStyle; } } -/** - * Maps (parts of) the redux state to the React {@code Component} props of - * {@code FormRow}. - * - * @param {Object} state - The redux state. - * @protected - * @returns {Object} - */ -export function _mapStateToProps(state: Object) { - return { - _aspectRatio: state['features/base/responsive-ui'].aspectRatio - }; -} - -export default translate(connect(_mapStateToProps)(FormRow)); +export default translate(FormRow); diff --git a/react/features/app-settings/components/native/FormSectionHeader.js b/react/features/app-settings/components/native/FormSectionHeader.js new file mode 100644 index 000000000..7b7897825 --- /dev/null +++ b/react/features/app-settings/components/native/FormSectionHeader.js @@ -0,0 +1,60 @@ +// @flow + +import React, { Component } from 'react'; +import { Text, View } from 'react-native'; + +import { translate } from '../../../base/i18n'; + +import styles from './styles'; + +/** + * The type of the React {@code Component} props of {@link FormSectionHeader} + */ +type Props = { + + /** + * The i18n key of the text label of the section. + */ + i18nLabel: string, + + /** + * An external style object passed to the component. + */ + style: Object, + + /** + * Invoked to obtain translated strings. + */ + t: Function +} + +/** + * Implements a React {@code Component} which renders a section header on a + * form. + */ +class FormSectionHeader extends Component { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @override + * @returns {ReactElement} + */ + render() { + const { i18nLabel, style, t } = this.props; + + return ( + + + { t(i18nLabel) } + + + ); + } +} + +export default translate(FormSectionHeader); diff --git a/react/features/app-settings/components/native/index.js b/react/features/app-settings/components/native/index.js new file mode 100644 index 000000000..4a8909939 --- /dev/null +++ b/react/features/app-settings/components/native/index.js @@ -0,0 +1,3 @@ +export { default as BackButton } from './BackButton'; +export { default as FormRow } from './FormRow'; +export { default as FormSectionHeader } from './FormSectionHeader'; diff --git a/react/features/app-settings/components/native/styles.js b/react/features/app-settings/components/native/styles.js new file mode 100644 index 000000000..f82f9b445 --- /dev/null +++ b/react/features/app-settings/components/native/styles.js @@ -0,0 +1,83 @@ +import { + ColorPalette, + createStyleSheet +} from '../../../base/styles'; + +export const ANDROID_UNDERLINE_COLOR = 'transparent'; +const TEXT_SIZE = 17; + +/** + * The styles of the native components of the feature + * {@code app-settings}. + */ +export default createStyleSheet({ + /** + * Standardized style for a field container {@code View}. + */ + fieldContainer: { + alignItems: 'center', + flexDirection: 'row', + minHeight: 65, + paddingHorizontal: 8 + }, + + /** + * Standard container for a {@code View} containing a field label. + */ + fieldLabelContainer: { + alignItems: 'center', + flexDirection: 'row', + marginRight: 5 + }, + + /** + * Text of the field labels on the form. + */ + fieldLabelText: { + fontSize: TEXT_SIZE + }, + + /** + * Field container style for all but last row {@code View}. + */ + fieldSeparator: { + borderBottomWidth: 1, + borderColor: 'rgba(0, 0, 0, 0.1)' + }, + + /** + * Style for the {@code View} containing each + * field values (the actual field). + */ + fieldValueContainer: { + alignItems: 'center', + flex: 1, + flexDirection: 'row', + justifyContent: 'flex-end' + }, + + /** + * Style fo the form section separator titles. + */ + formSectionTitle: { + backgroundColor: 'rgba(0, 0, 0, 0.1)', + marginTop: 5, + padding: 5 + }, + + /** + * Global {@code Text} color for the components. + */ + text: { + color: ColorPalette.black + }, + + /** + * Standard text input field style. + */ + textInputField: { + flex: 1, + fontSize: TEXT_SIZE, + textAlign: 'right' + } +}); diff --git a/react/features/app-settings/components/styles.js b/react/features/app-settings/components/styles.js index 13083bf28..166bf299b 100644 --- a/react/features/app-settings/components/styles.js +++ b/react/features/app-settings/components/styles.js @@ -4,90 +4,11 @@ import { createStyleSheet } from '../../base/styles'; -export const ANDROID_UNDERLINE_COLOR = 'transparent'; -export const CONTAINER_PADDING = 2 * BoxModel.padding; -export const HEADER_COLOR = ColorPalette.blue; -export const HEADER_PADDING = BoxModel.padding; -const TEXT_SIZE = 17; - /** * The styles of the React {@code Components} of the feature * {@code app-settings}. */ export default createStyleSheet({ - - /** - * The back button style. - */ - backIcon: { - alignSelf: 'center', - fontSize: 26, - padding: 8, - paddingRight: 22 - }, - - /** - * Standardized style for a field container {@code View}. - */ - fieldContainer: { - alignItems: 'center', - flexDirection: 'row', - minHeight: 65 - }, - - /** - * Standard container for a {@code View} containing a field label. - */ - fieldLabelContainer: { - alignItems: 'center', - flexDirection: 'row', - marginRight: 5 - }, - - /** - * Field container style for all but last row {@code View}. - */ - fieldSeparator: { - borderBottomWidth: 1, - borderColor: 'rgba(0, 0, 0, 0.1)' - }, - - /** - * Style for the {@code View} containing each - * field values (the actual field). - */ - fieldValueContainer: { - alignItems: 'center', - flex: 1, - flexDirection: 'row', - justifyContent: 'flex-end' - }, - - formSectionTitle: { - backgroundColor: 'rgba(0, 0, 0, 0.1)', - marginTop: 5, - padding: 5 - }, - - /** - * Page header {@code View}. - */ - headerContainer: { - alignItems: 'center', - backgroundColor: HEADER_COLOR, - flexDirection: 'row', - justifyContent: 'flex-start', - padding: HEADER_PADDING - }, - - /** - * The title {@code Text} of the header. - */ - headerTitle: { - color: ColorPalette.white, - fontSize: 22 - }, - /** * Style of the ScrollView to be able to scroll the content. */ @@ -96,38 +17,17 @@ export default createStyleSheet({ }, /** - * The back button style on the settings screen. + * Style of the settings screen content (form). */ - settingsBackButton: { - color: ColorPalette.white - }, - - /** - * The top level container {@code View}. - */ - settingsContainer: { - backgroundColor: ColorPalette.white, + settingsForm: { flex: 1, - flexDirection: 'column', - margin: 0, - padding: CONTAINER_PADDING, - paddingTop: 0 + margin: BoxModel.margin }, /** * Global {@code Text} color for the page. */ text: { - color: ColorPalette.black, - fontSize: TEXT_SIZE - }, - - /** - * Standard text input field style. - */ - textInputField: { - flex: 1, - fontSize: TEXT_SIZE, - textAlign: 'right' + color: ColorPalette.black } }); diff --git a/react/features/base/react/components/native/Header.js b/react/features/base/react/components/native/Header.js new file mode 100644 index 000000000..461e60784 --- /dev/null +++ b/react/features/base/react/components/native/Header.js @@ -0,0 +1,56 @@ +// @flow + +import React, { Component } from 'react'; +import { SafeAreaView, StatusBar, View } from 'react-native'; + +import styles, { STATUSBAR_COLOR } from './styles'; + +/** + * The type of the React {@code Component} props of {@link ScreenHeader} + */ +type Props = { + + /** + * Children component(s). + */ + children: React$Node, + + /** + * The component's external style + */ + style: Object +} + +/** + * A generic screen header component. + */ +export default class Header extends Component { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + */ + render() { + return ( + + + + + { + this.props.children + } + + + + ); + } + +} diff --git a/react/features/base/react/components/native/index.js b/react/features/base/react/components/native/index.js index b6f177d7f..ead4c80f1 100644 --- a/react/features/base/react/components/native/index.js +++ b/react/features/base/react/components/native/index.js @@ -1,5 +1,7 @@ export { default as Container } from './Container'; export { default as Link } from './Link'; export { default as LoadingIndicator } from './LoadingIndicator'; +export { default as Header } from './Header'; +export * from './styles'; export { default as TintedView } from './TintedView'; export { default as Text } from './Text'; diff --git a/react/features/base/react/components/native/styles.js b/react/features/base/react/components/native/styles.js new file mode 100644 index 000000000..fa861dadc --- /dev/null +++ b/react/features/base/react/components/native/styles.js @@ -0,0 +1,39 @@ +import { + BoxModel, + ColorPalette, + createStyleSheet +} from '../../../styles'; + +const HEADER_COLOR = ColorPalette.blue; + +// Header height is from iOS guidelines. Also, this looks good. +const HEADER_HEIGHT = 44; +const HEADER_PADDING = BoxModel.padding; + +export const STATUSBAR_COLOR = ColorPalette.blueHighlight; + +/** + * The styles of the React {@code Components} of the generic components + * in the app. + */ +export default createStyleSheet({ + + /** + * Style of the header overlay to cover the unsafe areas. + */ + headerOverlay: { + backgroundColor: HEADER_COLOR + }, + + /** + * Base style of Header + */ + screenHeader: { + alignItems: 'center', + backgroundColor: HEADER_COLOR, + flexDirection: 'row', + height: HEADER_HEIGHT, + justifyContent: 'flex-start', + padding: HEADER_PADDING + } +}); diff --git a/react/features/base/react/index.js b/react/features/base/react/index.js index b8b8c16c8..6464d31ef 100644 --- a/react/features/base/react/index.js +++ b/react/features/base/react/index.js @@ -1,4 +1,3 @@ export * from './components'; -export * from './functions'; export { default as Platform } from './Platform'; export { default as RouteRegistry } from './RouteRegistry'; diff --git a/react/features/base/styles/components/styles/ColorPalette.js b/react/features/base/styles/components/styles/ColorPalette.js index 87ea2ca62..d9f71fbfd 100644 --- a/react/features/base/styles/components/styles/ColorPalette.js +++ b/react/features/base/styles/components/styles/ColorPalette.js @@ -19,6 +19,7 @@ export const ColorPalette = { */ black: BLACK, blue: '#17A0DB', + blueHighlight: '#1081b2', buttonUnderlay: '#495258', darkGrey: '#555555', red: '#D00000', diff --git a/react/features/base/styles/components/styles/PlatformElements.native.js b/react/features/base/styles/components/styles/PlatformElements.native.js new file mode 100644 index 000000000..a879971a1 --- /dev/null +++ b/react/features/base/styles/components/styles/PlatformElements.native.js @@ -0,0 +1,42 @@ +import { ColorPalette } from './ColorPalette'; + +import { + createStyleSheet +} from '../../functions'; + +export const PlatformElements = createStyleSheet({ + + /** + * Platform specific header button (e.g. back, menu...etc). + */ + headerButton: { + alignSelf: 'center', + color: ColorPalette.white, + fontSize: 26, + paddingRight: 22, + zIndex: 9999 + }, + + /** + * Generic style for a label placed in the header. + */ + headerText: { + color: ColorPalette.white, + fontSize: 20 + }, + + /** + * The topmost level element of a page. + */ + page: { + alignItems: 'stretch', + bottom: 0, + flex: 1, + flexDirection: 'column', + left: 0, + overflow: 'hidden', + position: 'absolute', + right: 0, + top: 0 + } +}); diff --git a/react/features/base/styles/components/styles/PlatformElements.web.js b/react/features/base/styles/components/styles/PlatformElements.web.js new file mode 100644 index 000000000..e69de29bb diff --git a/react/features/base/styles/components/styles/index.js b/react/features/base/styles/components/styles/index.js index 5b08709f4..f6673b7c1 100644 --- a/react/features/base/styles/components/styles/index.js +++ b/react/features/base/styles/components/styles/index.js @@ -1,2 +1,3 @@ export * from './BoxModel'; export * from './ColorPalette'; +export * from './PlatformElements'; diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index fbca9eaef..e03938b07 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; // eslint-disable-next-line react-native/split-platform-components -import { BackAndroid, BackHandler, View } from 'react-native'; +import { BackAndroid, BackHandler, StatusBar, View } from 'react-native'; import { connect as reactReduxConnect } from 'react-redux'; import { appNavigate } from '../../app'; @@ -192,6 +192,7 @@ class Conference extends Component { onClick = { this._onClick } style = { styles.conference } touchFeedback = { false }> + {/* * The LargeVideo is the lowermost stacking layer.