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

fix(lobby/native) style updates and local video fix

This commit is contained in:
Calin Chitu 2022-06-10 15:21:00 +03:00 committed by Calinteodor
parent 9383942cb9
commit 7ea78e9845
2 changed files with 43 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
react/features/lobby/components/native/LobbyScreen.js
View File

@ -9,8 +9,6 @@ import { LoadingIndicator } from '../../../base/react';
import { connect } from '../../../base/redux'; import { connect } from '../../../base/redux';
import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui'; import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
import BaseTheme from '../../../base/ui/components/BaseTheme'; import BaseTheme from '../../../base/ui/components/BaseTheme';
import InviteButton
from '../../../invite/components/add-people-dialog/native/InviteButton';
import { LargeVideo } from '../../../large-video/components'; import { LargeVideo } from '../../../large-video/components';
import HeaderNavigationButton import HeaderNavigationButton
from '../../../mobile/navigation/components/HeaderNavigationButton'; from '../../../mobile/navigation/components/HeaderNavigationButton';
@ -64,31 +62,29 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
*/ */
render() { render() {
const { _aspectRatio } = this.props; const { _aspectRatio } = this.props;
let contentStyles; let contentWrapperStyles;
let largeVideoContainerStyles;
let contentContainerStyles; let contentContainerStyles;
let largeVideoContainerStyles;
if (_aspectRatio === ASPECT_RATIO_NARROW) { if (_aspectRatio === ASPECT_RATIO_NARROW) {
contentWrapperStyles = styles.contentWrapper;
largeVideoContainerStyles = styles.largeVideoContainer; largeVideoContainerStyles = styles.largeVideoContainer;
contentContainerStyles = styles.contentContainer; contentContainerStyles = styles.contentContainer;
} else { } else {
contentStyles = styles.contentWide; contentWrapperStyles = styles.contentWrapperWide;
largeVideoContainerStyles = styles.largeVideoContainerWide; largeVideoContainerStyles = styles.largeVideoContainerWide;
contentContainerStyles = styles.contentContainerWide; contentContainerStyles = styles.contentContainerWide;
} }
return ( return (
<JitsiScreen <JitsiScreen
safeAreaInsets = { [ 'right' ] } style = { contentWrapperStyles }>
style = { styles.contentWrapper }> <View style = { largeVideoContainerStyles }>
<View style = { contentStyles }> <LargeVideo />
<View style = { largeVideoContainerStyles }> </View>
<LargeVideo /> <View style = { contentContainerStyles }>
</View> { this._renderContent() }
<View style = { contentContainerStyles }> { this._renderToolbarButtons() }
{ this._renderContent() }
{ this._renderToolbarButtons() }
</View>
</View> </View>
</JitsiScreen> </JitsiScreen>
); );
@ -137,7 +133,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
*/ */
_renderJoining() { _renderJoining() {
return ( return (
<View style = { styles.formWrapper }> <View>
<LoadingIndicator <LoadingIndicator
color = { BaseTheme.palette.icon01 } color = { BaseTheme.palette.icon01 }
style = { styles.loadingIndicator } /> style = { styles.loadingIndicator } />
@ -159,15 +155,11 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
const { displayName } = this.state; const { displayName } = this.state;
return ( return (
<View style = { styles.formWrapper }> <TextInput
<Text style = { styles.fieldLabel }> onChangeText = { this._onChangeDisplayName }
{ t('lobby.nameField') } placeholder = { t('lobby.nameField') }
</Text> style = { styles.field }
<TextInput value = { displayName } />
onChangeText = { this._onChangeDisplayName }
style = { styles.field }
value = { displayName } />
</View>
); );
} }
@ -190,13 +182,11 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
return ( return (
<View style = { styles.formWrapper }> <View style = { styles.formWrapper }>
<Text style = { styles.fieldLabel }>
{ this.props.t('lobby.passwordField') }
</Text>
<TextInput <TextInput
autoCapitalize = 'none' autoCapitalize = 'none'
autoCompleteType = 'off' autoCompleteType = 'off'
onChangeText = { this._onChangePassword } onChangeText = { this._onChangePassword }
placeholder = { t('lobby.passwordField') }
secureTextEntry = { true } secureTextEntry = { true }
style = { styles.field } style = { styles.field }
value = { this.state.password } /> value = { this.state.password } />
@ -263,8 +253,6 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
styles = { styles.buttonStylesBorderless } /> styles = { styles.buttonStylesBorderless } />
<VideoMuteButton <VideoMuteButton
styles = { styles.buttonStylesBorderless } /> styles = { styles.buttonStylesBorderless } />
<InviteButton
styles = { styles.buttonStylesBorderless } />
</View> </View>
); );
} }

60
react/features/lobby/components/native/styles.js
View File

@ -15,12 +15,12 @@ export default {
buttonStylesBorderless: { buttonStylesBorderless: {
iconStyle: { iconStyle: {
backgroundColor: BaseTheme.palette.action02Active, backgroundColor: 'transparent',
color: BaseTheme.palette.icon01, color: BaseTheme.palette.icon01,
fontSize: 24 fontSize: 24
}, },
style: { style: {
backgroundColor: BaseTheme.palette.action02Active, backgroundColor: 'transparent',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[3], marginHorizontal: BaseTheme.spacing[3],
@ -57,24 +57,21 @@ export default {
}, },
contentWrapper: { contentWrapper: {
backgroundColor: BaseTheme.palette.ui02,
flex: 1 flex: 1
}, },
contentWide: { contentWrapperWide: {
backgroundColor: BaseTheme.palette.ui02,
flex: 1, flex: 1,
flexDirection: 'row' flexDirection: 'row'
}, },
largeVideoContainer: { largeVideoContainer: {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
minHeight: '50%' minHeight: '50%'
}, },
largeVideoContainerWide: { largeVideoContainerWide: {
position: 'absolute',
marginRight: 'auto',
height: '100%', height: '100%',
width: '50%' width: '50%'
}, },
@ -82,12 +79,17 @@ export default {
contentContainer: { contentContainer: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center',
minHeight: '50%'
}, },
contentContainerWide: { contentContainerWide: {
justifyContent: 'center', justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[2], marginHorizontal: BaseTheme.spacing[6],
marginVertical: BaseTheme.spacing[3],
height: '100%',
left: '50%',
position: 'absolute',
width: '50%' width: '50%'
}, },
@ -96,21 +98,13 @@ export default {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginTop: BaseTheme.spacing[4] marginTop: BaseTheme.spacing[3]
}, },
toolboxContainerWide: { toolboxContainerWide: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
marginTop: BaseTheme.spacing[4] marginTop: BaseTheme.spacing[3]
},
dialogTitle: {
fontSize: 18,
fontWeight: 'bold',
margin: 'auto',
marginVertical: BaseTheme.spacing[3],
textAlign: 'center'
}, },
displayNameText: { displayNameText: {
@ -128,14 +122,21 @@ export default {
fontSize: 16 fontSize: 16
}, },
formWrapper: {
alignSelf: 'stretch',
marginTop: 45
},
field: { field: {
alignSelf: 'stretch',
backgroundColor: BaseTheme.palette.field02, backgroundColor: BaseTheme.palette.field02,
borderColor: SECONDARY_COLOR, borderColor: SECONDARY_COLOR,
borderRadius: BaseTheme.shape.borderRadius, borderRadius: BaseTheme.shape.borderRadius,
borderWidth: 2, borderWidth: 2,
height: BaseTheme.spacing[7], height: BaseTheme.spacing[7],
marginHorizontal: BaseTheme.spacing[3], marginHorizontal: BaseTheme.spacing[3],
padding: BaseTheme.spacing[2] padding: BaseTheme.spacing[2],
textAlign: 'center'
}, },
fieldError: { fieldError: {
@ -147,28 +148,17 @@ export default {
fieldLabel: { fieldLabel: {
...BaseTheme.typography.heading6, ...BaseTheme.typography.heading6,
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01,
marginVertical: BaseTheme.spacing[4],
textAlign: 'center' textAlign: 'center'
}, },
formWrapper: {
alignSelf: 'stretch'
},
standardButtonWrapper: { standardButtonWrapper: {
alignSelf: 'stretch', alignSelf: 'stretch',
marginHorizontal: BaseTheme.spacing[3] marginHorizontal: 12
},
joiningContainer: {
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
}, },
joiningMessage: { joiningMessage: {
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01,
marginBottom: BaseTheme.spacing[2], marginHorizontal: BaseTheme.spacing[3],
textAlign: 'center' textAlign: 'center'
}, },
@ -179,7 +169,7 @@ export default {
}, },
loadingIndicator: { loadingIndicator: {
marginVertical: BaseTheme.spacing[4] marginBottom: BaseTheme.spacing[4]
}, },
participantBox: { participantBox: {