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

feat(rn) make status bar visible at all times

This commit is contained in:
Saúl Ibarra Corretgé 2022-11-11 16:15:54 +01:00 committed by Saúl Ibarra Corretgé
parent 7a9f51b01b
commit 79c4cabbad
9 changed files with 19 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
android/app/src/main/res/values/colors.xml
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
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
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
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
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
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
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
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
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