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

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

Browse Source 
feat(lobby/prejoin/native): style updates (#12615)
mobile-22.7 jitsi-meet_8111
Calinteodor 3 years ago committed by GitHub
parent 691e92b7ec
commit 48a6472b3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 194 additions and 364 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. 1
      lang/main.json
  2. 2
      react/features/conference/components/native/Conference.js
  3. 104
      react/features/lobby/components/native/KnockingParticipantList.js
  4. 96
      react/features/lobby/components/native/LobbyScreen.js
  5. 216
      react/features/lobby/components/native/styles.js
  6. 1
      react/features/old-client-notification/functions.ts
  7. 1
      react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.js
  8. 29
      react/features/participants-pane/components/native/LobbyParticipantItem.js
  9. 4
      react/features/participants-pane/components/native/LobbyParticipantList.js
  10. 5
      react/features/participants-pane/components/native/MeetingParticipantItem.js
  11. 12
      react/features/participants-pane/components/native/ParticipantItem.js
  12. 28
      react/features/participants-pane/components/native/styles.js
  13. 50
      react/features/prejoin/components/native/Prejoin.tsx
  14. 9
      react/features/prejoin/components/native/styles.js

1
lang/main.json
Unescape 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
Unescape 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
Unescape 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);
};
}

96
react/features/lobby/components/native/LobbyScreen.js
Unescape 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 }>
<Button
accessibilityLabel = 'lobby.backToKnockModeButton'
labelKey = 'lobby.backToKnockModeButton'
onClick = { this._onSwitchToKnockMode }
style = { styles.lobbyButton }
type = { BUTTON_TYPES.PRIMARY } />
<View style = { styles.passwordJoinButtons }>
<Button
accessibilityLabel = 'lobby.passwordJoinButton'
disabled = { !this.state.password }
labelKey = 'lobby.passwordJoinButton'
labelKey = { 'lobby.passwordJoinButton' }
onClick = { this._onJoinWithPassword }
style = { styles.lobbyButton }
style = { preJoinStyles.joinButton }
type = { BUTTON_TYPES.PRIMARY } />
<Button
accessibilityLabel = 'lobby.backToKnockModeButton'
labelKey = 'lobby.backToKnockModeButton'
onClick = { this._onSwitchToKnockMode }
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>

216
react/features/lobby/components/native/styles.js
Unescape 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%',
justifyContent: 'center',
left: '50%',
paddingHorizontal: BaseTheme.spacing[3],
position: 'absolute',
width: '50%'
},
toolboxContainer: {
alignItems: 'center',
backgroundColor: BaseTheme.palette.uiBackground,
bottom: 0,
display: 'flex',
flexDirection: 'row',
height: 388,
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
position: 'absolute',
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
backgroundColor: BaseTheme.palette.ui01,
flexDirection: 'row'
},
knockingParticipantListText: {
color: 'white'
},
knockingParticipantListPrimaryButton: {
backgroundColor: 'rgb(3, 118, 218)'
lobbyButtonAdmit: {
position: 'absolute',
right: 184,
top: 6
},
knockingParticipantListSecondaryButton: {
backgroundColor: 'transparent'
lobbyButtonChat: {
position: 'absolute',
right: 104,
top: 6
},
knockingParticipantListText: {
color: 'white'
lobbyButtonReject: {
position: 'absolute',
right: 16,
top: 6
},
lobbyTitle: {
...lobbyText
...BaseTheme.typography.heading5,
color: BaseTheme.palette.text01,
marginBottom: BaseTheme.spacing[3],
textAlign: 'center'
},
lobbyRoomName: {
...lobbyText,
marginBottom: BaseTheme.spacing[2]
lobbyWaitingFragmentContainer: {
height: 260
}
};

1
react/features/old-client-notification/functions.ts
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Write Preview
Loading…
Cancel
Save