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

feat(rn) make status bar visible at all times

Browse Source
pull/12554/head jitsi-meet_8066
Saúl Ibarra Corretgé 2 years ago committed by Saúl Ibarra Corretgé
parent 7a9f51b01b
commit 79c4cabbad
9 changed files with 19 additions and 114 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. 2
      android/app/src/main/res/values/colors.xml
  2. 2
      android/app/src/main/res/values/styles.xml
  3. 79
      react/features/base/modal/components/JitsiStatusBar.js
  4. 9
      react/features/conference/components/native/Conference.js
  5. 6
      react/features/mobile/navigation/components/RootNavigationContainer.js
  6. 11
      react/features/settings/components/native/HelpView.tsx
  7. 11
      react/features/settings/components/native/PrivacyView.tsx
  8. 11
      react/features/settings/components/native/TermsView.tsx
  9. 2
      react/features/welcome/components/WelcomePage.native.js

2
android/app/src/main/res/values/colors.xml
Unescape View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#17A0DB</color>
<color name="colorPrimaryDark">#1081B2</color>
<color name="navigationBarColor">#161618</color>
</resources>

2
android/app/src/main/res/values/styles.xml
Unescape View File

@ -2,7 +2,7 @@
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
<item name="android:forceDarkAllowed">false</item>
<item name="android:navigationBarColor">@color/colorPrimaryDark</item>
<item name="android:navigationBarColor">@color/navigationBarColor</item>
<item name="android:windowDisablePreview">true</item>
</style>
</resources>

79
react/features/base/modal/components/JitsiStatusBar.js
Unescape View File

@ -1,79 +0,0 @@
// @flow
import React, { useCallback } from 'react';
import { StatusBar } from 'react-native';
import { ColorSchemeRegistry } from '../../color-scheme';
import { connect } from '../../redux';
import { isDarkColor } from '../../styles';
// Register style
import '../../react/components/native/headerstyles';
/**
* Constants for the (currently) supported statusbar colors.
*/
const STATUSBAR_DARK = 'dark-content';
const STATUSBAR_LIGHT = 'light-content';
type Props = {
/**
* The color schemed style of the component.
*/
_styles: Object
}
const JitsiStatusBar = ({ _styles }: Props) => {
const getStatusBarContentColor = useCallback(() => {
const { statusBarContent } = _styles;
if (statusBarContent) {
// We have the possibility to define the statusbar color in the
// color scheme feature, but since mobile devices (at the moment)
// only support two colors (light and dark) we need to normalize
// the value.
if (isDarkColor(statusBarContent)) {
return STATUSBAR_DARK;
}
return STATUSBAR_LIGHT;
}
// The statusbar color is not defined, so we need to base our choice
// on the header colors
const { statusBar, screenHeader } = _styles;
if (isDarkColor(statusBar || screenHeader.backgroundColor)) {
return STATUSBAR_LIGHT;
}
return STATUSBAR_DARK;
}, [ _styles ]);
return (
<StatusBar
backgroundColor = { _styles.statusBar }
barStyle = { getStatusBarContentColor() }
translucent = { false } />
);
};
/**
* Maps part of the Redux state to the props of the component.
*
* @param {Object} state - The Redux state.
* @returns {{
* _styles: Object
* }}
*/
function _mapStateToProps(state) {
return {
_styles: ColorSchemeRegistry.get(state, 'Header')
};
}
export default connect(_mapStateToProps)(JitsiStatusBar);

9
react/features/conference/components/native/Conference.js
Unescape View File

@ -2,7 +2,7 @@
import { useIsFocused } from '@react-navigation/native';
import React, { useEffect } from 'react';
import { BackHandler, NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
import { BackHandler, NativeModules, SafeAreaView, View } from 'react-native';
import { withSafeAreaInsets } from 'react-native-safe-area-context';
import { appNavigate } from '../../../app/actions';
@ -268,8 +268,7 @@ class Conference extends AbstractConference<Props, State> {
*/
render() {
const {
_brandingStyles,
_fullscreenEnabled
_brandingStyles
} = this.props;
return (
@ -279,10 +278,6 @@ class Conference extends AbstractConference<Props, State> {
_brandingStyles
] }>
<BrandingImageBackground />
<StatusBar
barStyle = 'light-content'
hidden = { _fullscreenEnabled }
translucent = { _fullscreenEnabled } />
{ this._renderContent() }
</Container>
);

6
react/features/mobile/navigation/components/RootNavigationContainer.js
Unescape View File

@ -1,6 +1,7 @@
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React, { useCallback } from 'react';
import { StatusBar } from 'react-native';
import { connect } from '../../../base/redux';
import { DialInSummary } from '../../../invite';
@ -56,6 +57,11 @@ const RootNavigationContainer = ({ dispatch, isWelcomePageAvailable }: Props) =>
onReady = { onReady }
ref = { rootNavigationRef }
theme = { navigationContainerTheme }>
<StatusBar
animated = { true }
backgroundColor = 'transparent'
barStyle = { 'light-content' }
translucent = { true } />
<RootStack.Navigator
initialRouteName = { initialRouteName }>
{

11
react/features/settings/components/native/HelpView.tsx
Unescape View File

@ -5,8 +5,6 @@ import React, { PureComponent } from 'react';
import { IReduxState } from '../../../app/types';
// @ts-ignore
import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
// @ts-ignore
import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
import { connect } from '../../../base/redux/functions';
// @ts-ignore
import { renderArrowBackButton }
@ -65,12 +63,9 @@ class HelpView extends PureComponent<IProps> {
*/
render() {
return (
<>
<JitsiStatusBar />
<JitsiScreenWebView
source = { this.props._url }
style = { styles.screenContainer } />
</>
<JitsiScreenWebView
source = { this.props._url }
style = { styles.screenContainer } />
);
}
}

11
react/features/settings/components/native/PrivacyView.tsx
Unescape View File

@ -5,8 +5,6 @@ import React, { useEffect } from 'react';
// @ts-ignore
import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
// @ts-ignore
import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
// @ts-ignore
import { renderArrowBackButton }
// @ts-ignore
from '../../../mobile/navigation/components/welcome/functions';
@ -41,12 +39,9 @@ const PrivacyView = ({ navigation }: IProps) => {
});
return (
<>
<JitsiStatusBar />
<JitsiScreenWebView
source = { PRIVACY_URL }
style = { styles.screenContainer } />
</>
<JitsiScreenWebView
source = { PRIVACY_URL }
style = { styles.screenContainer } />
);
};

11
react/features/settings/components/native/TermsView.tsx
Unescape View File

@ -5,8 +5,6 @@ import React, { useEffect } from 'react';
// @ts-ignore
import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
// @ts-ignore
import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
// @ts-ignore
import { renderArrowBackButton }
// @ts-ignore
from '../../../mobile/navigation/components/welcome/functions';
@ -41,12 +39,9 @@ const TermsView = ({ navigation }: IProps) => {
});
return (
<>
<JitsiStatusBar />
<JitsiScreenWebView
source = { TERMS_URL }
style = { styles.screenContainer } />
</>
<JitsiScreenWebView
source = { TERMS_URL }
style = { styles.screenContainer } />
);
};

2
react/features/welcome/components/WelcomePage.native.js
Unescape View File

@ -4,7 +4,6 @@ import { Animated, SafeAreaView, TouchableHighlight, View } from 'react-native';
import { getName } from '../../app/functions';
import { translate } from '../../base/i18n';
import { Icon, IconWarning } from '../../base/icons';
import JitsiStatusBar from '../../base/modal/components/JitsiStatusBar';
import { LoadingIndicator, Text } from '../../base/react';
import { connect } from '../../base/redux';
import BaseTheme from '../../base/ui/components/BaseTheme.native';
@ -373,7 +372,6 @@ class WelcomePage extends AbstractWelcomePage<*> {
_renderFullUI() {
return (
<>
<JitsiStatusBar />
{ this._renderRoomNameInput() }
<View style = { styles.welcomePage }>
<WelcomePageTabs

Write Preview
Loading…
Cancel
Save