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

feat(native-participants-pane) implemented review remarks pt. 3

This commit is contained in:
Calin Chitu 2021-07-02 16:43:52 +03:00 committed by Hristo Terezov
parent 7854437e31
commit 665b7730ee
10 changed files with 104 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lang/main.json
View File

@ -601,7 +601,9 @@
"blockEveryoneMicCamera": "Block everyone's mic and camera", "blockEveryoneMicCamera": "Block everyone's mic and camera",
"invite": "Invite Someone", "invite": "Invite Someone",
"askUnmute": "Ask to unmute", "askUnmute": "Ask to unmute",
"mute": "Mute",
"muteAll": "Mute all", "muteAll": "Mute all",
"muteEveryoneElse": "Mute everyone else",
"startModeration": "Unmute themselves or start video", "startModeration": "Unmute themselves or start video",
"stopEveryonesVideo": "Stop everyone's video", "stopEveryonesVideo": "Stop everyone's video",
"stopVideo": "Stop video", "stopVideo": "Stop video",

2
react/features/base/react/components/native/HeaderWithNavigation.js
View File

@ -56,7 +56,7 @@ class HeaderWithNavigation extends Component<Props> {
const { hideHeaderWithNavigation, onPressBack, onPressForward } = this.props; const { hideHeaderWithNavigation, onPressBack, onPressForward } = this.props;
return ( return (
!{ hideHeaderWithNavigation } !hideHeaderWithNavigation
&& <Header> && <Header>
{ onPressBack && <BackButton onPress = { onPressBack } /> } { onPressBack && <BackButton onPress = { onPressBack } /> }
<HeaderLabel labelKey = { this.props.headerLabelKey } /> <HeaderLabel labelKey = { this.props.headerLabelKey } />

8
react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js
View File

@ -35,12 +35,12 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
onCancel = { cancel } onCancel = { cancel }
style = { styles.contextMenuMore }> style = { styles.contextMenuMore }>
<View <View
style = { styles.contextMenuItemSection }> style = { styles.contextMenuItemSectionAvatar }>
<Avatar <Avatar
className = 'participant-avatar' className = 'participant-avatar'
participantId = { p.id } participantId = { p.id }
size = { 20 } /> size = { 30 } />
<View style = { styles.contextMenuItemText }> <View style = { styles.contextMenuItemAvatarText }>
<Text style = { styles.contextMenuItemName }> <Text style = { styles.contextMenuItemName }>
{ displayName } { displayName }
</Text> </Text>
@ -51,7 +51,7 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
onPress = { reject } onPress = { reject }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconClose } src = { IconClose }
style = { styles.contextMenuItemIcon } /> style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }>{ t('lobby.reject') }</Text> <Text style = { styles.contextMenuItemText }>{ t('lobby.reject') }</Text>

18
react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
View File

@ -74,14 +74,14 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
return ( return (
<BottomSheet <BottomSheet
onCancel = { cancel } onCancel = { cancel }
style = { styles.contextMenuMore }> style = { styles.contextMenuMeetingParticipantDetails }>
<View <View
style = { styles.contextMenuItemSection }> style = { styles.contextMenuItemSectionAvatar }>
<Avatar <Avatar
className = 'participant-avatar' className = 'participant-avatar'
participantId = { p.id } participantId = { p.id }
size = { 20 } /> size = { 30 } />
<View style = { styles.contextMenuItemText }> <View style = { styles.contextMenuItemAvatarText }>
<Text style = { styles.contextMenuItemName }> <Text style = { styles.contextMenuItemName }>
{ displayName } { displayName }
</Text> </Text>
@ -94,7 +94,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { muteAudio } onPress = { muteAudio }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconMicrophoneEmptySlash } src = { IconMicrophoneEmptySlash }
style = { styles.contextMenuItemIcon } /> style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }> <Text style = { styles.contextMenuItemText }>
@ -108,7 +108,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { muteEveryoneElse } onPress = { muteEveryoneElse }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconMuteEveryoneElse } src = { IconMuteEveryoneElse }
style = { styles.contextMenuItemIcon } /> style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }> <Text style = { styles.contextMenuItemText }>
@ -124,7 +124,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { muteVideo } onPress = { muteVideo }
style = { styles.contextMenuItemSection }> style = { styles.contextMenuItemSection }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconVideoOff } src = { IconVideoOff }
style = { styles.contextMenuItemIcon } /> style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }> <Text style = { styles.contextMenuItemText }>
@ -139,7 +139,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { kickRemoteParticipant } onPress = { kickRemoteParticipant }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconCloseCircle } src = { IconCloseCircle }
style = { styles.contextMenuItemIcon } /> style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }> <Text style = { styles.contextMenuItemText }>
@ -151,7 +151,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
onPress = { sendPrivateMessage } onPress = { sendPrivateMessage }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconMessage } src = { IconMessage }
style = { styles.contextMenuItemIcon } /> style = { styles.contextMenuItemIcon } />
<Text style = { styles.contextMenuItemText }> <Text style = { styles.contextMenuItemText }>

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

@ -38,7 +38,7 @@ export const ContextMenuMore = () => {
onPress = { muteAllVideo } onPress = { muteAllVideo }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconVideoOff } /> src = { IconVideoOff } />
<Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text> <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
</TouchableOpacity> </TouchableOpacity>
@ -46,7 +46,7 @@ export const ContextMenuMore = () => {
onPress = { blockAudioVideo } onPress = { blockAudioVideo }
style = { styles.contextMenuItem }> style = { styles.contextMenuItem }>
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconMicDisabledHollow } src = { IconMicDisabledHollow }
style = { styles.contextMenuIcon } /> style = { styles.contextMenuIcon } />
<Text style = { styles.contextMenuItemText }> <Text style = { styles.contextMenuItemText }>

14
react/features/participants-pane/components/native/ParticipantsPane.js
View File

@ -10,7 +10,8 @@ import { openDialog } from '../../../base/dialog';
import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons'; import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
import { JitsiModal } from '../../../base/modal'; import { JitsiModal } from '../../../base/modal';
import { import {
getParticipantCount, isEveryoneModerator, getParticipantCount,
isEveryoneModerator,
isLocalParticipantModerator isLocalParticipantModerator
} from '../../../base/participants'; } from '../../../base/participants';
import MuteEveryoneDialog import MuteEveryoneDialog
@ -20,7 +21,7 @@ import { close } from '../../actions.native';
import { ContextMenuMore } from './ContextMenuMore'; import { ContextMenuMore } from './ContextMenuMore';
import { LobbyParticipantList } from './LobbyParticipantList'; import { LobbyParticipantList } from './LobbyParticipantList';
import { MeetingParticipantList } from './MeetingParticipantList'; import { MeetingParticipantList } from './MeetingParticipantList';
import styles, { button } from './styles'; import styles from './styles';
/** /**
* Participant pane. * Participant pane.
@ -34,7 +35,7 @@ const ParticipantsPane = () => {
const isLocalModerator = useSelector(isLocalParticipantModerator); const isLocalModerator = useSelector(isLocalParticipantModerator);
const participantsCount = useSelector(getParticipantCount); const participantsCount = useSelector(getParticipantCount);
const everyoneModerator = useSelector(isEveryoneModerator); const everyoneModerator = useSelector(isEveryoneModerator);
const showContextMenu = !everyoneModerator && participantsCount > 2; const showContextMenu = true;
const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)), const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
[ dispatch ]); [ dispatch ]);
const { t } = useTranslation(); const { t } = useTranslation();
@ -45,13 +46,13 @@ const ParticipantsPane = () => {
style = { styles.participantsPane }> style = { styles.participantsPane }>
<View style = { styles.header }> <View style = { styles.header }>
<Button <Button
contentStyle = { styles.closeIcon }
/* eslint-disable-next-line react/jsx-no-bind */ /* eslint-disable-next-line react/jsx-no-bind */
icon = { () => icon = { () =>
(<Icon (<Icon
size = { 24 } size = { 24 }
src = { IconClose } />) src = { IconClose } />)
} }
labelStyle = { styles.closeIcon }
mode = 'contained' mode = 'contained'
onPress = { closePane } onPress = { closePane }
style = { styles.closeButton } /> style = { styles.closeButton } />
@ -65,21 +66,20 @@ const ParticipantsPane = () => {
&& <View style = { styles.footer }> && <View style = { styles.footer }>
<Button <Button
children = { t('participantsPane.actions.muteAll') } children = { t('participantsPane.actions.muteAll') }
contentStyle = { styles.muteAllContent }
labelStyle = { styles.muteAllLabel } labelStyle = { styles.muteAllLabel }
mode = 'contained' mode = 'contained'
onPress = { muteAll } onPress = { muteAll }
style = { showContextMenu ? styles.muteAllButton : button } /> style = { showContextMenu ? styles.muteAllMoreButton : styles.muteAllButton } />
{ {
showContextMenu showContextMenu
&& <Button && <Button
contentStyle = { styles.moreIcon }
/* eslint-disable-next-line react/jsx-no-bind */ /* eslint-disable-next-line react/jsx-no-bind */
icon = { () => icon = { () =>
(<Icon (<Icon
size = { 24 } size = { 24 }
src = { IconHorizontalPoints } />) src = { IconHorizontalPoints } />)
} }
labelStyle = { styles.moreIcon }
mode = 'contained' mode = 'contained'
onPress = { openMoreMenu } onPress = { openMoreMenu }
style = { styles.moreButton } /> style = { styles.moreButton } />

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

@ -22,23 +22,39 @@ const flexContent = {
flex: 1 flex: 1
}; };
/**
* The style for the context menu items text.
*/
const contextMenuItemText = {
...BaseTheme.typography.bodyShortRegularLarge,
color: BaseTheme.palette.text01
};
/** /**
* The style of the participants pane buttons. * The style of the participants pane buttons.
*/ */
export const button = { export const button = {
alignItems: 'center',
backgroundColor: BaseTheme.palette.action02, backgroundColor: BaseTheme.palette.action02,
borderRadius: BaseTheme.shape.borderRadius, borderRadius: BaseTheme.shape.borderRadius,
display: 'flex', display: 'flex',
justifyContent: 'center', minWidth: 0
marginLeft: 'auto'
}; };
/** /**
* Small buttons. * Small buttons.
*/ */
const smallButton = { const smallButton = {
...button ...button,
height: BaseTheme.spacing[7],
width: BaseTheme.spacing[7]
};
/**
* Mute all button.
*/
const muteAllButton = {
...button,
marginLeft: 'auto'
}; };
/** /**
@ -46,6 +62,7 @@ const smallButton = {
*/ */
const buttonContent = { const buttonContent = {
...BaseTheme.typography.labelButton, ...BaseTheme.typography.labelButton,
alignSelf: 'center',
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01,
justifyContent: 'center' justifyContent: 'center'
}; };
@ -213,6 +230,7 @@ export default {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
height: BaseTheme.spacing[10], height: BaseTheme.spacing[10],
justifyContent: 'space-between',
paddingRight: BaseTheme.spacing[3], paddingRight: BaseTheme.spacing[3],
position: 'relative', position: 'relative',
right: BaseTheme.spacing[0], right: BaseTheme.spacing[0],
@ -221,13 +239,17 @@ export default {
closeButton: { closeButton: {
...smallButton, ...smallButton,
width: BaseTheme.spacing[8] marginLeft: 'auto'
}, },
closeIcon: { closeIcon: {
...buttonContent, ...buttonContent,
height: BaseTheme.spacing[8], height: BaseTheme.spacing[5],
left: BaseTheme.spacing[2] marginLeft: 'auto',
paddingTop: 12,
paddingBottom: 12,
paddingRight: BaseTheme.spacing[3],
paddingLeft: BaseTheme.spacing[3]
}, },
inviteButton: { inviteButton: {
@ -243,14 +265,17 @@ export default {
}, },
moreButton: { moreButton: {
...smallButton, ...smallButton
width: BaseTheme.spacing[8]
}, },
moreIcon: { moreIcon: {
...buttonContent, ...buttonContent,
height: BaseTheme.spacing[8], height: BaseTheme.spacing[5],
left: BaseTheme.spacing[2] marginLeft: 'auto',
paddingTop: 12,
paddingBottom: 12,
paddingRight: BaseTheme.spacing[3],
paddingLeft: BaseTheme.spacing[3]
}, },
contextMenuMore: { contextMenuMore: {
@ -258,20 +283,33 @@ export default {
borderRadius: BaseTheme.shape.borderRadius borderRadius: BaseTheme.shape.borderRadius
}, },
muteAllButton: { contextMenuMeetingParticipantDetails: {
...button, backgroundColor: BaseTheme.palette.action02,
left: BaseTheme.spacing[10] + BaseTheme.spacing[2] borderRadius: BaseTheme.shape.borderRadius
}, },
muteAllContent: { muteAllButton: {
...buttonContent, ...muteAllButton
height: BaseTheme.spacing[8] },
muteAllMoreButton: {
...muteAllButton,
right: BaseTheme.spacing[3]
}, },
muteAllLabel: { muteAllLabel: {
...BaseTheme.typography.labelButtonLarge, ...BaseTheme.typography.labelButtonLarge,
color: BaseTheme.palette.text01, color: BaseTheme.palette.text01,
textTransform: 'capitalize' flexDirection: 'column',
height: BaseTheme.spacing[7],
marginVertical: BaseTheme.spacing[0],
marginHorizontal: BaseTheme.spacing[0],
paddingTop: 12,
paddingBottom: 12,
paddingRight: BaseTheme.spacing[3],
paddingLeft: BaseTheme.spacing[3],
textTransform: 'capitalize',
width: 94
}, },
contextMenuItem: { contextMenuItem: {
@ -282,9 +320,18 @@ export default {
...contextMenuItem ...contextMenuItem
}, },
contextMenuItemSectionAvatar: {
...contextMenuItem,
marginLeft: BaseTheme.spacing[1]
},
contextMenuItemAvatarText: {
...contextMenuItemText,
marginLeft: BaseTheme.spacing[2]
},
contextMenuItemText: { contextMenuItemText: {
...BaseTheme.typography.bodyShortRegularLarge, ...contextMenuItemText,
color: BaseTheme.palette.text01,
marginLeft: BaseTheme.spacing[3] marginLeft: BaseTheme.spacing[3]
}, },

4
react/features/participants-pane/constants.js
View File

@ -3,7 +3,9 @@
import React from 'react'; import React from 'react';
import { import {
Icon, IconCameraEmpty, IconCameraEmptyDisabled, Icon,
IconCameraEmpty,
IconCameraEmptyDisabled,
IconMicrophoneEmpty, IconMicrophoneEmpty,
IconMicrophoneEmptySlash IconMicrophoneEmptySlash
} from '../base/icons'; } from '../base/icons';

16
react/features/video-menu/components/native/VolumeSlider.js
View File

@ -2,15 +2,11 @@
import _ from 'lodash'; import _ from 'lodash';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { View, Slider } from 'react-native'; import { Slider, View } from 'react-native';
import { withTheme } from 'react-native-paper'; import { withTheme } from 'react-native-paper';
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
import { Icon, IconVolumeEmpty } from '../../../base/icons'; import { Icon, IconVolumeEmpty } from '../../../base/icons';
import {
getLocalParticipant,
getParticipantById
} from '../../../base/participants';
import { connect } from '../../../base/redux'; import { connect } from '../../../base/redux';
import { setVolume } from '../../../participants-pane/actions.native'; import { setVolume } from '../../../participants-pane/actions.native';
import { VOLUME_SLIDER_SCALE } from '../../constants'; import { VOLUME_SLIDER_SCALE } from '../../constants';
@ -105,7 +101,7 @@ class VolumeSlider extends PureComponent<Props, State> {
return ( return (
<View style = { styles.volumeSliderContainer } > <View style = { styles.volumeSliderContainer } >
<Icon <Icon
size = { 20 } size = { 24 }
src = { IconVolumeEmpty } src = { IconVolumeEmpty }
style = { styles.volumeIcon } /> style = { styles.volumeIcon } />
<Slider <Slider
@ -148,15 +144,13 @@ class VolumeSlider extends PureComponent<Props, State> {
*/ */
function mapStateToProps(state, ownProps): Object { function mapStateToProps(state, ownProps): Object {
const { participant } = ownProps; const { participant } = ownProps;
const { startSilent } = state['features/base/config']; const { id, local } = participant;
const { participantsVolume } = state['features/participants-pane']; const { participantsVolume } = state['features/participants-pane'];
const getParticipant = participant.id const { startSilent } = state['features/base/config'];
? getParticipantById(state, participant.id) : getLocalParticipant(state);
const { id } = getParticipant;
return { return {
_startSilent: Boolean(startSilent), _startSilent: Boolean(startSilent),
_volume: participant.local ? undefined : participantsVolume[id] _volume: local ? undefined : participantsVolume[id]
}; };
} }

7
react/features/video-menu/components/native/styles.js
View File

@ -59,11 +59,12 @@ export default createStyleSheet({
}, },
volumeIcon: { volumeIcon: {
marginLeft: BaseTheme.spacing[1] marginLeft: BaseTheme.spacing[1],
minWidth: '5%'
}, },
sliderContainer: { sliderContainer: {
marginLeft: BaseTheme.spacing[2], marginLeft: BaseTheme.spacing[3],
minWidth: '92%' minWidth: '90%'
} }
}); });