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

feat(lobby/prejoin/native): style updates (#12615) 

feat(lobby/prejoin/native): style updates (#12615)
This commit is contained in:
Calinteodor 2022-11-25 13:59:45 +02:00 committed by GitHub
parent 691e92b7ec
commit 48a6472b3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 198 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lang/main.json
View File

@ -563,7 +563,6 @@
"lobby": {
"admit": "Admit",
"admitAll": "Admit all",
"allow": "Allow",
"backToKnockModeButton": "Ask to join",
"chat": "Chat",
"dialogTitle": "Lobby mode",

2
react/features/conference/components/native/Conference.js
View File

@ -462,7 +462,7 @@ class Conference extends AbstractConference<Props, State> {
{/* eslint-disable-next-line react/jsx-no-bind */}
<AlwaysOnLabels createOnPress = { this._createOnPress } />
</View>
{this._renderNotificationsContainer()}
{ this._renderNotificationsContainer() }
<KnockingParticipantList />
</SafeAreaView>

104
react/features/lobby/components/native/KnockingParticipantList.js
View File

@ -1,21 +1,22 @@
// @flow
import React, { PureComponent } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { View } from 'react-native';
import { Avatar } from '../../../base/avatar';
import { translate } from '../../../base/i18n';
import { isLocalParticipantModerator } from '../../../base/participants';
import { translate } from '../../../base/i18n/functions';
import { isLocalParticipantModerator } from '../../../base/participants/functions';
import { connect } from '../../../base/redux';
import { handleLobbyChatInitialized } from '../../../chat/actions.any';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
import { handleLobbyChatInitialized } from '../../../chat/actions.native';
import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
import { screen } from '../../../mobile/navigation/routes';
import { setKnockingParticipantApproval } from '../../actions';
import { HIDDEN_EMAILS } from '../../constants';
import ParticipantItem
from '../../../participants-pane/components/native/ParticipantItem';
import { setKnockingParticipantApproval } from '../../actions.native';
import { getKnockingParticipants, getLobbyEnabled, showLobbyChatButton } from '../../functions';
import styles from './styles';
/**
* Props type of the component.
*/
@ -44,12 +45,7 @@ export type Props = {
/**
* The Redux Dispatch function.
*/
dispatch: Function,
/**
* Function to be used to translate i18n labels.
*/
t: Function
dispatch: Function
};
/**
@ -74,68 +70,47 @@ class KnockingParticipantList extends PureComponent<Props> {
* @inheritdoc
*/
render() {
const { _participants, _visible, _showChatButton, t } = this.props;
const { _participants, _visible, _showChatButton } = this.props;
if (!_visible) {
return null;
}
return (
<ScrollView
style = { styles.knockingParticipantList }>
<>
{ _participants.map(p => (
<View
key = { p.id }
style = { styles.knockingParticipantListEntry }>
<Avatar
<ParticipantItem
displayName = { p.name }
size = { 48 }
url = { p.loadableAvatarUrl } />
<View style = { styles.knockingParticipantListDetails }>
<Text style = { styles.knockingParticipantListText }>
{ p.name }
</Text>
{ p.email && !HIDDEN_EMAILS.includes(p.email) && (
<Text style = { styles.knockingParticipantListText }>
{ p.email }
</Text>
) }
</View>
<TouchableOpacity
onPress = { this._onRespondToParticipant(p.id, true) }
style = { [
styles.knockingParticipantListButton,
styles.knockingParticipantListPrimaryButton
] }>
<Text style = { styles.knockingParticipantListText }>
{ t('lobby.allow') }
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = { this._onRespondToParticipant(p.id, false) }
style = { [
styles.knockingParticipantListButton,
styles.knockingParticipantListSecondaryButton
] }>
<Text style = { styles.knockingParticipantListText }>
{ t('lobby.reject') }
</Text>
</TouchableOpacity>
{_showChatButton(p) ? (
<TouchableOpacity
onPress = { this._onInitializeLobbyChat(p.id) }
style = { [
styles.knockingParticipantListButton,
styles.knockingParticipantListSecondaryButton
] }>
<Text style = { styles.knockingParticipantListText }>
{ t('lobby.chat') }
</Text>
</TouchableOpacity>
) : null}
isKnockingParticipant = { true }
key = { p.id }
participantID = { p.id }>
<Button
labelKey = { 'lobby.admit' }
onClick = { this._onRespondToParticipant(p.id, true) }
style = { styles.lobbyButtonAdmit }
type = { BUTTON_TYPES.PRIMARY } />
{
_showChatButton(p)
? (
<Button
labelKey = { 'lobby.chat' }
onClick = { this._onInitializeLobbyChat(p.id) }
style = { styles.lobbyButtonChat }
type = { BUTTON_TYPES.SECONDARY } />
) : null
}
<Button
labelKey = { 'lobby.reject' }
onClick = { this._onRespondToParticipant(p.id, false) }
style = { styles.lobbyButtonReject }
type = { BUTTON_TYPES.DESTRUCTIVE } />
</ParticipantItem>
</View>
)) }
</ScrollView>
</>
);
}
@ -168,6 +143,7 @@ class KnockingParticipantList extends PureComponent<Props> {
if (this.props._isPollsDisabled) {
return navigate(screen.conference.chat);
}
navigate(screen.conference.chatandpolls.main);
};
}

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

@ -16,6 +16,7 @@ import { LargeVideo } from '../../../large-video/components';
import { navigate }
from '../../../mobile/navigation/components/lobby/LobbyNavigationContainerRef';
import { screen } from '../../../mobile/navigation/routes';
import { preJoinStyles } from '../../../prejoin/components/native/styles';
import AudioMuteButton from '../../../toolbox/components/AudioMuteButton';
import VideoMuteButton from '../../../toolbox/components/VideoMuteButton';
import AbstractLobbyScreen, {
@ -48,32 +49,39 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
* @inheritdoc
*/
render() {
const { _aspectRatio } = this.props;
const { _aspectRatio, _roomName } = this.props;
let contentWrapperStyles;
let contentContainerStyles;
let largeVideoContainerStyles;
if (_aspectRatio === ASPECT_RATIO_NARROW) {
contentWrapperStyles = styles.contentWrapper;
largeVideoContainerStyles = styles.largeVideoContainer;
contentWrapperStyles = preJoinStyles.contentWrapper;
largeVideoContainerStyles = preJoinStyles.largeVideoContainer;
contentContainerStyles = styles.contentContainer;
} else {
contentWrapperStyles = styles.contentWrapperWide;
largeVideoContainerStyles = styles.largeVideoContainerWide;
contentContainerStyles = styles.contentContainerWide;
contentWrapperStyles = preJoinStyles.contentWrapperWide;
largeVideoContainerStyles = preJoinStyles.largeVideoContainerWide;
contentContainerStyles = preJoinStyles.contentContainerWide;
}
return (
<JitsiScreen
safeAreaInsets = { [ 'left' ] }
safeAreaInsets = { [ 'right' ] }
style = { contentWrapperStyles }>
<BrandingImageBackground />
<View style = { largeVideoContainerStyles }>
<View style = { preJoinStyles.displayRoomNameBackdrop }>
<Text
numberOfLines = { 1 }
style = { preJoinStyles.preJoinRoomName }>
{ _roomName }
</Text>
</View>
<LargeVideo />
</View>
<View style = { contentContainerStyles }>
{ this._renderContent() }
{ this._renderToolbarButtons() }
{ this._renderContent() }
</View>
</JitsiScreen>
);
@ -122,15 +130,10 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
*/
_renderJoining() {
return (
<View>
<View style = { styles.lobbyWaitingFragmentContainer }>
<Text style = { styles.lobbyTitle }>
{ this.props.t('lobby.joiningTitle') }
</Text>
<Text
numberOfLines = { 1 }
style = { styles.lobbyRoomName }>
{ this.props._roomName }
</Text>
<LoadingIndicator
color = { BaseTheme.palette.icon01 }
style = { styles.loadingIndicator } />
@ -153,7 +156,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
return (
<Input
customStyles = {{ input: styles.customInput }}
customStyles = {{ input: preJoinStyles.customInput }}
onChange = { this._onChangeDisplayName }
placeholder = { t('lobby.nameField') }
value = { displayName } />
@ -178,19 +181,15 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
const { _passwordJoinFailed, t } = this.props;
return (
<View style = { styles.formWrapper }>
<Input
autoCapitalize = 'none'
autoCompleteType = 'off'
customStyles = {{ input: styles.customInput }}
onChange = { this._onChangePassword }
placeholder = { t('lobby.passwordField') }
secureTextEntry = { true }
value = { this.state.password } />
{ _passwordJoinFailed && <Text style = { styles.fieldError }>
{ t('lobby.invalidPassword') }
</Text> }
</View>
<Input
autoCapitalize = 'none'
autoCompleteType = 'off'
customStyles = {{ input: styles.customInput }}
error = { _passwordJoinFailed }
onChange = { this._onChangePassword }
placeholder = { t('lobby.passwordField') }
secureTextEntry = { true }
value = { this.state.password } />
);
}
@ -201,20 +200,20 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
*/
_renderPasswordJoinButtons() {
return (
<View style = { styles.passwordJoinButtonsWrapper }>
<View style = { styles.passwordJoinButtons }>
<Button
accessibilityLabel = 'lobby.passwordJoinButton'
disabled = { !this.state.password }
labelKey = { 'lobby.passwordJoinButton' }
onClick = { this._onJoinWithPassword }
style = { preJoinStyles.joinButton }
type = { BUTTON_TYPES.PRIMARY } />
<Button
accessibilityLabel = 'lobby.backToKnockModeButton'
labelKey = 'lobby.backToKnockModeButton'
onClick = { this._onSwitchToKnockMode }
style = { styles.lobbyButton }
type = { BUTTON_TYPES.PRIMARY } />
<Button
accessibilityLabel = 'lobby.passwordJoinButton'
disabled = { !this.state.password }
labelKey = 'lobby.passwordJoinButton'
onClick = { this._onJoinWithPassword }
style = { styles.lobbyButton }
type = { BUTTON_TYPES.PRIMARY } />
style = { preJoinStyles.joinButton }
type = { BUTTON_TYPES.TERTIARY } />
</View>
);
}
@ -225,21 +224,12 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
* @inheritdoc
*/
_renderToolbarButtons() {
const { _aspectRatio } = this.props;
let toolboxContainerStyles;
if (_aspectRatio === ASPECT_RATIO_NARROW) {
toolboxContainerStyles = styles.toolboxContainer;
} else {
toolboxContainerStyles = styles.toolboxContainerWide;
}
return (
<View style = { toolboxContainerStyles }>
<View style = { preJoinStyles.toolboxContainer }>
<AudioMuteButton
styles = { styles.buttonStylesBorderless } />
styles = { preJoinStyles.buttonStylesBorderless } />
<VideoMuteButton
styles = { styles.buttonStylesBorderless } />
styles = { preJoinStyles.buttonStylesBorderless } />
</View>
);
}
@ -254,14 +244,14 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
const { displayName } = this.state;
return (
<View style = { styles.standardButtonWrapper }>
<View style = { styles.formWrapper }>
{
_knocking && _isLobbyChatActive
&& <Button
accessibilityLabel = 'toolbar.openChat'
labelKey = 'toolbar.openChat'
onClick = { this._onNavigateToLobbyChat }
style = { styles.openChatButton }
style = { preJoinStyles.joinButton }
type = { BUTTON_TYPES.PRIMARY } />
}
{
@ -271,7 +261,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
disabled = { !displayName }
labelKey = 'lobby.knockButton'
onClick = { this._onAskToJoin }
style = { styles.lobbyButton }
style = { preJoinStyles.joinButton }
type = { BUTTON_TYPES.PRIMARY } />
}
{
@ -280,7 +270,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
accessibilityLabel = 'lobby.enterPasswordButton'
labelKey = 'lobby.enterPasswordButton'
onClick = { this._onSwitchToPasswordMode }
style = { styles.enterPasswordButton }
style = { preJoinStyles.joinButton }
type = { BUTTON_TYPES.PRIMARY } />
}
</View>

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

@ -1,32 +1,8 @@
// @flow
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
const SECONDARY_COLOR = BaseTheme.palette.border04;
const lobbyText = {
...BaseTheme.typography.heading5,
color: BaseTheme.palette.text01,
textAlign: 'center'
};
export default {
buttonStylesBorderless: {
iconStyle: {
color: BaseTheme.palette.icon01,
fontSize: 24
},
style: {
flexDirection: 'row',
justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[3],
height: 24,
width: 24
},
underlayColor: 'transparent'
},
lobbyChatWrapper: {
backgroundColor: BaseTheme.palette.ui01,
alignItems: 'stretch',
@ -35,118 +11,32 @@ export default {
height: '100%'
},
lobbyChatHeader: {
flexDirection: 'row',
padding: 20
},
lobbyChatTitle: {
color: BaseTheme.palette.text01,
fontSize: 20,
fontWeight: 'bold',
flexShrink: 1
},
lobbyChatCloseButton: {
fontSize: 24,
marginLeft: BaseTheme.spacing[3],
marginTop: BaseTheme.spacing[1],
color: BaseTheme.palette.icon01
},
contentWrapper: {
flex: 1
},
contentWrapperWide: {
flex: 1,
flexDirection: 'row'
},
largeVideoContainer: {
minHeight: '50%'
},
largeVideoContainerWide: {
height: '100%',
marginRight: 'auto',
position: 'absolute',
width: '50%'
passwordJoinButtons: {
top: 40
},
contentContainer: {
alignSelf: 'center',
display: 'flex',
justifyContent: 'center',
minHeight: '50%',
paddingHorizontal: BaseTheme.spacing[3],
width: 400
},
contentContainerWide: {
alignItems: 'center',
height: '100%',
backgroundColor: BaseTheme.palette.uiBackground,
bottom: 0,
display: 'flex',
height: 388,
justifyContent: 'center',
left: '50%',
paddingHorizontal: BaseTheme.spacing[3],
position: 'absolute',
width: '50%'
},
toolboxContainer: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
marginTop: BaseTheme.spacing[3]
},
toolboxContainerWide: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: BaseTheme.spacing[3]
},
displayNameText: {
fontWeight: 'bold',
marginVertical: 10
},
editButton: {
alignSelf: 'flex-end',
paddingHorizontal: 10
},
editIcon: {
color: 'black',
fontSize: 16
width: '100%',
zIndex: 1
},
formWrapper: {
alignSelf: 'stretch',
justifyContent: 'center',
marginTop: 38
alignItems: 'center',
justifyContent: 'center'
},
customInput: {
marginHorizontal: BaseTheme.spacing[3],
textAlign: 'center'
},
fieldError: {
color: BaseTheme.palette.warning03,
marginLeft: BaseTheme.spacing[3],
fontSize: 16
},
fieldLabel: {
...BaseTheme.typography.heading6,
color: BaseTheme.palette.text01,
textAlign: 'center'
},
standardButtonWrapper: {
alignSelf: 'stretch'
position: 'relative',
textAlign: 'center',
top: BaseTheme.spacing[6],
width: 352
},
joiningMessage: {
@ -155,84 +45,58 @@ export default {
textAlign: 'center'
},
passwordJoinButtonsWrapper: {
alignItems: 'stretch',
alignSelf: 'stretch',
marginHorizontal: BaseTheme.spacing[3]
},
loadingIndicator: {
marginBottom: BaseTheme.spacing[3]
},
participantBox: {
alignItems: 'center',
alignSelf: 'stretch',
borderColor: SECONDARY_COLOR,
borderRadius: 4,
borderWidth: 1,
marginVertical: 18,
paddingVertical: 12
},
lobbyButton: {
marginTop: BaseTheme.spacing[3]
},
openChatButton: {
marginHorizontal: BaseTheme.spacing[3],
marginTop: BaseTheme.spacing[3]
},
enterPasswordButton: {
marginHorizontal: BaseTheme.spacing[3],
marginTop: BaseTheme.spacing[3]
},
// KnockingParticipantList
knockingParticipantList: {
alignSelf: 'stretch',
backgroundColor: 'rgba(22, 38, 55, 0.8)',
flexDirection: 'column'
backgroundColor: BaseTheme.palette.ui01
},
knockingParticipantListButton: {
borderRadius: 4,
marginHorizontal: 3,
paddingHorizontal: 10,
paddingVertical: 5
},
knockingParticipantListDetails: {
flex: 1,
marginLeft: 10
marginLeft: BaseTheme.spacing[2]
},
knockingParticipantListEntry: {
alignItems: 'center',
flexDirection: 'row',
padding: 10
},
knockingParticipantListPrimaryButton: {
backgroundColor: 'rgb(3, 118, 218)'
},
knockingParticipantListSecondaryButton: {
backgroundColor: 'transparent'
backgroundColor: BaseTheme.palette.ui01,
flexDirection: 'row'
},
knockingParticipantListText: {
color: 'white'
},
lobbyTitle: {
...lobbyText
lobbyButtonAdmit: {
position: 'absolute',
right: 184,
top: 6
},
lobbyRoomName: {
...lobbyText,
marginBottom: BaseTheme.spacing[2]
lobbyButtonChat: {
position: 'absolute',
right: 104,
top: 6
},
lobbyButtonReject: {
position: 'absolute',
right: 16,
top: 6
},
lobbyTitle: {
...BaseTheme.typography.heading5,
color: BaseTheme.palette.text01,
marginBottom: BaseTheme.spacing[3],
textAlign: 'center'
},
lobbyWaitingFragmentContainer: {
height: 260
}
};

1
react/features/old-client-notification/functions.ts
View File

@ -10,6 +10,7 @@ export function isOldJitsiMeetElectronApp() {
return false;
}
// @ts-ignore
const match = navigator.userAgent.match(/(JitsiMeet)\s*\/\s*((\d+)\.[^\s]*)/);
if (!Array.isArray(match) || match.length < 3) {

1
react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.js
View File

@ -33,7 +33,6 @@ const BreakoutRoomParticipantItem = ({ item, room }: Props) => {
return (
<ParticipantItem
displayName = { item.displayName || defaultRemoteDisplayName }
isKnockingParticipant = { false }
isModerator = { isParticipantModerator(item) }
key = { item.jid }
onPress = { onPress }

29
react/features/participants-pane/components/native/LobbyParticipantItem.js
View File

@ -1,18 +1,14 @@
// @flow
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { hasRaisedHand } from '../../../base/participants';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
import { approveKnockingParticipant } from '../../../lobby/actions.native';
import { showContextMenuReject } from '../../actions.native';
import { MEDIA_STATE } from '../../constants';
import { setKnockingParticipantApproval } from '../../../lobby/actions.native';
import ParticipantItem from './ParticipantItem';
import styles from './styles';
type Props = {
/**
@ -23,25 +19,26 @@ type Props = {
export const LobbyParticipantItem = ({ participant: p }: Props) => {
const dispatch = useDispatch();
const admit = useCallback(() => dispatch(approveKnockingParticipant(p.id), [ dispatch ]));
const openContextMenuReject = useCallback(() => dispatch(showContextMenuReject(p), [ dispatch ]));
const admit = useCallback(() => dispatch(setKnockingParticipantApproval(p.id, true), [ dispatch ]));
const reject = useCallback(() => dispatch(setKnockingParticipantApproval(p.id, false), [ dispatch ]));
return (
<ParticipantItem
audioMediaState = { MEDIA_STATE.NONE }
displayName = { p.name }
isKnockingParticipant = { true }
local = { p.local }
onPress = { openContextMenuReject }
participant = { p }
participantID = { p.id }
raisedHand = { hasRaisedHand(p) }
videoMediaState = { MEDIA_STATE.NONE }>
key = { p.id }
participantID = { p.id } >
<Button
accessibilityLabel = 'lobby.reject'
labelKey = 'lobby.reject'
onClick = { reject }
style = { styles.lobbyButtonReject }
type = { BUTTON_TYPES.DESTRUCTIVE } />
<Button
accessibilityLabel = 'lobby.admit'
labelKey = 'lobby.admit'
onClick = { admit }
style = { styles.participantActionsButtonAdmit }
style = { styles.lobbyButtonAdmit }
type = { BUTTON_TYPES.PRIMARY } />
</ParticipantItem>
);

4
react/features/participants-pane/components/native/LobbyParticipantList.js
View File

@ -32,8 +32,8 @@ const LobbyParticipantList = () => {
const title = (
<View style = { styles.lobbyListDetails } >
<Text style = { styles.lobbyListDescription }>
{t('participantsPane.headings.waitingLobby',
{ count: participants.length })}
{ t('participantsPane.headings.waitingLobby',
{ count: participants.length }) }
</Text>
{
participants.length > 1 && (

5
react/features/participants-pane/components/native/MeetingParticipantItem.js
View File

@ -1,5 +1,3 @@
// @flow
import React, { PureComponent } from 'react';
import { translate } from '../../../base/i18n';
@ -152,7 +150,6 @@ class MeetingParticipantItem extends PureComponent<Props> {
audioMediaState = { _audioMediaState }
disableModeratorIndicator = { _disableModeratorIndicator }
displayName = { _displayName }
isKnockingParticipant = { false }
isModerator = { _isModerator }
local = { _local }
onPress = { this._onPress }
@ -202,5 +199,3 @@ function mapStateToProps(state, ownProps): Object {
export default translate(connect(mapStateToProps)(MeetingParticipantItem));

12
react/features/participants-pane/components/native/ParticipantItem.js
View File

@ -77,7 +77,7 @@ function ParticipantItem({
children,
displayName,
disableModeratorIndicator,
isKnockingParticipant,
isKnockingParticipant = false,
isModerator,
local,
onPress,
@ -109,11 +109,11 @@ function ParticipantItem({
numberOfLines = { 1 }
style = { styles.participantName }>
{ displayName }
{local && ` (${t('chat.you')})` }
{ local && ` (${t('chat.you')})` }
</Text>
</View>
{isModerator && !disableModeratorIndicator
&& <Text style = { styles.moderatorLabel }>{t('videothumbnail.moderator')}</Text>
{ isModerator && !disableModeratorIndicator
&& <Text style = { styles.moderatorLabel }>{ t('videothumbnail.moderator') }</Text>
}
</View>
{
@ -121,8 +121,8 @@ function ParticipantItem({
&& <>
{ raisedHand && <RaisedHandIndicator /> }
<View style = { styles.participantStatesContainer }>
<View style = { styles.participantStateVideo }>{VideoStateIcons[videoMediaState]}</View>
<View>{AudioStateIcons[audioMediaState]}</View>
<View style = { styles.participantStateVideo }>{ VideoStateIcons[videoMediaState] }</View>
<View>{ AudioStateIcons[audioMediaState] }</View>
</View>
</>
}

28
react/features/participants-pane/components/native/styles.js
View File

@ -56,6 +56,12 @@ const contextMenuItem = {
export default {
participantActionsButtonAdmit: {
marginRight: BaseTheme.spacing[3],
position: 'absolute',
right: 88
},
participantActionsButtonReject: {
marginRight: BaseTheme.spacing[3],
position: 'absolute',
right: 0
@ -69,8 +75,6 @@ export default {
participantContainer: {
alignItems: 'center',
borderBottomColor: BaseTheme.palette.field01Hover,
borderBottomWidth: 2,
display: 'flex',
flexDirection: 'row',
height: BaseTheme.spacing[9],
@ -81,6 +85,8 @@ export default {
participantContent: {
alignItems: 'center',
borderBottomColor: BaseTheme.palette.field01Hover,
borderBottomWidth: 2.4,
display: 'flex',
flexDirection: 'row',
height: '100%',
@ -145,7 +151,17 @@ export default {
},
lobbyListContent: {
height: '16%'
height: '24%'
},
lobbyButtonAdmit: {
position: 'absolute',
right: 16
},
lobbyButtonReject: {
position: 'absolute',
right: 104
},
lobbyListDescription: {
@ -170,11 +186,11 @@ export default {
},
meetingListContainer: {
height: '58%'
height: '56%'
},
meetingListFullContainer: {
height: '82%'
height: '80%'
},
meetingListDescription: {
@ -183,7 +199,7 @@ export default {
},
collapsibleRoomContainer: {
height: '30%'
height: '32%'
},
participantsPaneContainer: {

50
react/features/prejoin/components/native/Prejoin.tsx
View File

@ -10,8 +10,7 @@ import {
StyleProp,
Text,
TextStyle,
View,
ViewStyle
View
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
@ -45,8 +44,9 @@ import AudioMuteButton from '../../../toolbox/components/AudioMuteButton';
import VideoMuteButton from '../../../toolbox/components/VideoMuteButton';
import { isDisplayNameRequired } from '../../functions';
import { IPrejoinProps } from '../../types';
// @ts-ignore
import styles from '../styles';
import { preJoinStyles as styles } from './styles';
const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
@ -166,29 +166,27 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
// @ts-ignore
styles = { styles.buttonStylesBorderless } />
</View>
<View style = { styles.formWrapper as StyleProp<ViewStyle> }>
<Input
// @ts-ignore
customStyles = {{ input: styles.customInput }}
onChange = { onChangeDisplayName }
placeholder = { t('dialog.enterDisplayName') }
value = { displayName } />
<Button
accessibilityLabel = 'prejoin.joinMeeting'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeeting'
// @ts-ignore
onClick = { !isJoining && onJoin }
style = { styles.joinButton }
type = { PRIMARY } />
<Button
accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
onClick = { onJoinLowBandwidth }
style = { styles.joinButton }
type = { TERTIARY } />
</View>
<Input
// @ts-ignore
customStyles = {{ input: styles.customInput }}
onChange = { onChangeDisplayName }
placeholder = { t('dialog.enterDisplayName') }
value = { displayName } />
<Button
accessibilityLabel = 'prejoin.joinMeeting'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeeting'
// @ts-ignore
onClick = { !isJoining && onJoin }
style = { styles.joinButton }
type = { PRIMARY } />
<Button
accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
disabled = { joinButtonDisabled }
labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
onClick = { onJoinLowBandwidth }
style = { styles.joinButton }
type = { TERTIARY } />
</View>
</JitsiScreen>
);

9
react/features/prejoin/components/styles.js → react/features/prejoin/components/native/styles.js
View File

@ -1,7 +1,7 @@
import BaseTheme from '../../base/ui/components/BaseTheme.native';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export default {
export const preJoinStyles = {
joinButton: {
marginTop: BaseTheme.spacing[3],
@ -78,11 +78,6 @@ export default {
width: 148
},
formWrapper: {
alignItems: 'center',
justifyContent: 'center'
},
customInput: {
textAlign: 'center',
width: 352