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

2021-07-02 16:43:52 +03:00 · 2021-07-02 16:43:52 +03:00 · 665b7730ee
parent 7854437e31
commit 665b7730ee
10 changed files with 104 additions and 58 deletions
--- a/lang/main.json
+++ b/lang/main.json
@ -601,7 +601,9 @@
            "blockEveryoneMicCamera": "Block everyone's mic and camera",
            "invite": "Invite Someone",
            "askUnmute": "Ask to unmute",
+            "mute": "Mute",
            "muteAll": "Mute all",
+            "muteEveryoneElse": "Mute everyone else",
            "startModeration": "Unmute themselves or start video",
            "stopEveryonesVideo": "Stop everyone's video",
            "stopVideo": "Stop video",
--- a/react/features/base/react/components/native/HeaderWithNavigation.js
+++ b/react/features/base/react/components/native/HeaderWithNavigation.js
@ -56,7 +56,7 @@ class HeaderWithNavigation extends Component<Props> {
        const { hideHeaderWithNavigation, onPressBack, onPressForward } = this.props;

        return (
-            !{ hideHeaderWithNavigation }
+            !hideHeaderWithNavigation
                    && <Header>
                        { onPressBack && <BackButton onPress = { onPressBack } /> }
                        <HeaderLabel labelKey = { this.props.headerLabelKey } />
--- a/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js
+++ b/react/features/participants-pane/components/native/ContextMenuLobbyParticipantReject.js
@ -35,12 +35,12 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
            onCancel = { cancel }
            style = { styles.contextMenuMore }>
            <View
-                style = { styles.contextMenuItemSection }>
+                style = { styles.contextMenuItemSectionAvatar }>
                <Avatar
                    className = 'participant-avatar'
                    participantId = { p.id }
-                    size = { 20 } />
-                <View style = { styles.contextMenuItemText }>
+                    size = { 30 } />
+                <View style = { styles.contextMenuItemAvatarText }>
                    <Text style = { styles.contextMenuItemName }>
                        { displayName }
                    </Text>
@ -51,7 +51,7 @@ export const ContextMenuLobbyParticipantReject = ({ participant: p }: Props) =>
                onPress = { reject }
                style = { styles.contextMenuItem }>
                <Icon
-                    size = { 20 }
+                    size = { 24 }
                    src = { IconClose }
                    style = { styles.contextMenuItemIcon } />
                <Text style = { styles.contextMenuItemText }>{ t('lobby.reject') }</Text>
--- a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
+++ b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
@ -74,14 +74,14 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
    return (
        <BottomSheet
            onCancel = { cancel }
-            style = { styles.contextMenuMore }>
+            style = { styles.contextMenuMeetingParticipantDetails }>
            <View
-                style = { styles.contextMenuItemSection }>
+                style = { styles.contextMenuItemSectionAvatar }>
                <Avatar
                    className = 'participant-avatar'
                    participantId = { p.id }
-                    size = { 20 } />
-                <View style = { styles.contextMenuItemText }>
+                    size = { 30 } />
+                <View style = { styles.contextMenuItemAvatarText }>
                    <Text style = { styles.contextMenuItemName }>
                        { displayName }
                    </Text>
@ -94,7 +94,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                    onPress = { muteAudio }
                    style = { styles.contextMenuItem }>
                    <Icon
-                        size = { 20 }
+                        size = { 24 }
                        src = { IconMicrophoneEmptySlash }
                        style = { styles.contextMenuItemIcon } />
                    <Text style = { styles.contextMenuItemText }>
@ -108,7 +108,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                    onPress = { muteEveryoneElse }
                    style = { styles.contextMenuItem }>
                    <Icon
-                        size = { 20 }
+                        size = { 24 }
                        src = { IconMuteEveryoneElse }
                        style = { styles.contextMenuItemIcon } />
                    <Text style = { styles.contextMenuItemText }>
@ -124,7 +124,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                        onPress = { muteVideo }
                        style = { styles.contextMenuItemSection }>
                        <Icon
-                            size = { 20 }
+                            size = { 24 }
                            src = { IconVideoOff }
                            style = { styles.contextMenuItemIcon } />
                        <Text style = { styles.contextMenuItemText }>
@ -139,7 +139,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                    onPress = { kickRemoteParticipant }
                    style = { styles.contextMenuItem }>
                    <Icon
-                        size = { 20 }
+                        size = { 24 }
                        src = { IconCloseCircle }
                        style = { styles.contextMenuItemIcon } />
                    <Text style = { styles.contextMenuItemText }>
@ -151,7 +151,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                onPress = { sendPrivateMessage }
                style = { styles.contextMenuItem }>
                <Icon
-                    size = { 20 }
+                    size = { 24 }
                    src = { IconMessage }
                    style = { styles.contextMenuItemIcon } />
                <Text style = { styles.contextMenuItemText }>
--- a/react/features/participants-pane/components/native/ContextMenuMore.js
+++ b/react/features/participants-pane/components/native/ContextMenuMore.js
@ -38,7 +38,7 @@ export const ContextMenuMore = () => {
                onPress = { muteAllVideo }
                style = { styles.contextMenuItem }>
                <Icon
-                    size = { 20 }
+                    size = { 24 }
                    src = { IconVideoOff } />
                <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
            </TouchableOpacity>
@ -46,7 +46,7 @@ export const ContextMenuMore = () => {
                onPress = { blockAudioVideo }
                style = { styles.contextMenuItem }>
                <Icon
-                    size = { 20 }
+                    size = { 24 }
                    src = { IconMicDisabledHollow }
                    style = { styles.contextMenuIcon } />
                <Text style = { styles.contextMenuItemText }>
--- a/react/features/participants-pane/components/native/ParticipantsPane.js
+++ b/react/features/participants-pane/components/native/ParticipantsPane.js
@ -10,7 +10,8 @@ import { openDialog } from '../../../base/dialog';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import {
-    getParticipantCount, isEveryoneModerator,
+    getParticipantCount,
+    isEveryoneModerator,
    isLocalParticipantModerator
 } from '../../../base/participants';
 import MuteEveryoneDialog
@ -20,7 +21,7 @@ import { close } from '../../actions.native';
 import { ContextMenuMore } from './ContextMenuMore';
 import { LobbyParticipantList } from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
-import styles, { button } from './styles';
+import styles from './styles';

 /**
 * Participant pane.
@ -34,7 +35,7 @@ const ParticipantsPane = () => {
    const isLocalModerator = useSelector(isLocalParticipantModerator);
    const participantsCount = useSelector(getParticipantCount);
    const everyoneModerator = useSelector(isEveryoneModerator);
-    const showContextMenu = !everyoneModerator && participantsCount > 2;
+    const showContextMenu = true;
    const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
        [ dispatch ]);
    const { t } = useTranslation();
@ -45,13 +46,13 @@ const ParticipantsPane = () => {
            style = { styles.participantsPane }>
            <View style = { styles.header }>
                <Button
-                    contentStyle = { styles.closeIcon }
                    /* eslint-disable-next-line react/jsx-no-bind */
                    icon = { () =>
                        (<Icon
                            size = { 24 }
                            src = { IconClose } />)
                    }
+                    labelStyle = { styles.closeIcon }
                    mode = 'contained'
                    onPress = { closePane }
                    style = { styles.closeButton } />
@ -65,21 +66,20 @@ const ParticipantsPane = () => {
                && <View style = { styles.footer }>
                    <Button
                        children = { t('participantsPane.actions.muteAll') }
-                        contentStyle = { styles.muteAllContent }
                        labelStyle = { styles.muteAllLabel }
                        mode = 'contained'
                        onPress = { muteAll }
-                        style = { showContextMenu ? styles.muteAllButton : button } />
+                        style = { showContextMenu ? styles.muteAllMoreButton : styles.muteAllButton } />
                    {
                        showContextMenu
                        && <Button
-                            contentStyle = { styles.moreIcon }
                            /* eslint-disable-next-line react/jsx-no-bind */
                            icon = { () =>
                                (<Icon
                                    size = { 24 }
                                    src = { IconHorizontalPoints } />)
                            }
+                            labelStyle = { styles.moreIcon }
                            mode = 'contained'
                            onPress = { openMoreMenu }
                            style = { styles.moreButton } />
--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@ -22,23 +22,39 @@ const flexContent = {
    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.
 */
 export const button = {
-    alignItems: 'center',
    backgroundColor: BaseTheme.palette.action02,
    borderRadius: BaseTheme.shape.borderRadius,
    display: 'flex',
-    justifyContent: 'center',
-    marginLeft: 'auto'
+    minWidth: 0
 };

 /**
 * Small buttons.
 */
 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 = {
    ...BaseTheme.typography.labelButton,
+    alignSelf: 'center',
    color: BaseTheme.palette.text01,
    justifyContent: 'center'
 };
@ -213,6 +230,7 @@ export default {
        display: 'flex',
        flexDirection: 'row',
        height: BaseTheme.spacing[10],
+        justifyContent: 'space-between',
        paddingRight: BaseTheme.spacing[3],
        position: 'relative',
        right: BaseTheme.spacing[0],
@ -221,13 +239,17 @@ export default {

    closeButton: {
        ...smallButton,
-        width: BaseTheme.spacing[8]
+        marginLeft: 'auto'
    },

    closeIcon: {
        ...buttonContent,
-        height: BaseTheme.spacing[8],
-        left: BaseTheme.spacing[2]
+        height: BaseTheme.spacing[5],
+        marginLeft: 'auto',
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingRight: BaseTheme.spacing[3],
+        paddingLeft: BaseTheme.spacing[3]
    },

    inviteButton: {
@ -243,14 +265,17 @@ export default {
    },

    moreButton: {
-        ...smallButton,
-        width: BaseTheme.spacing[8]
+        ...smallButton
    },

    moreIcon: {
        ...buttonContent,
-        height: BaseTheme.spacing[8],
-        left: BaseTheme.spacing[2]
+        height: BaseTheme.spacing[5],
+        marginLeft: 'auto',
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingRight: BaseTheme.spacing[3],
+        paddingLeft: BaseTheme.spacing[3]
    },

    contextMenuMore: {
@ -258,20 +283,33 @@ export default {
        borderRadius: BaseTheme.shape.borderRadius
    },

-    muteAllButton: {
-        ...button,
-        left: BaseTheme.spacing[10] + BaseTheme.spacing[2]
+    contextMenuMeetingParticipantDetails: {
+        backgroundColor: BaseTheme.palette.action02,
+        borderRadius: BaseTheme.shape.borderRadius
    },

-    muteAllContent: {
-        ...buttonContent,
-        height: BaseTheme.spacing[8]
+    muteAllButton: {
+        ...muteAllButton
+    },
+
+    muteAllMoreButton: {
+        ...muteAllButton,
+        right: BaseTheme.spacing[3]
    },

    muteAllLabel: {
        ...BaseTheme.typography.labelButtonLarge,
        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: {
@ -282,9 +320,18 @@ export default {
        ...contextMenuItem
    },

+    contextMenuItemSectionAvatar: {
+        ...contextMenuItem,
+        marginLeft: BaseTheme.spacing[1]
+    },
+
+    contextMenuItemAvatarText: {
+        ...contextMenuItemText,
+        marginLeft: BaseTheme.spacing[2]
+    },
+
    contextMenuItemText: {
-        ...BaseTheme.typography.bodyShortRegularLarge,
-        color: BaseTheme.palette.text01,
+        ...contextMenuItemText,
        marginLeft: BaseTheme.spacing[3]
    },

--- a/react/features/participants-pane/constants.js
+++ b/react/features/participants-pane/constants.js
@ -3,7 +3,9 @@
 import React from 'react';

 import {
-    Icon, IconCameraEmpty, IconCameraEmptyDisabled,
+    Icon,
+    IconCameraEmpty,
+    IconCameraEmptyDisabled,
    IconMicrophoneEmpty,
    IconMicrophoneEmptySlash
 } from '../base/icons';
--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/react/features/video-menu/components/native/VolumeSlider.js
@ -2,15 +2,11 @@

 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import { View, Slider } from 'react-native';
+import { Slider, View } from 'react-native';
 import { withTheme } from 'react-native-paper';

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

    return {
        _startSilent: Boolean(startSilent),
-        _volume: participant.local ? undefined : participantsVolume[id]
+        _volume: local ? undefined : participantsVolume[id]
    };
 }

--- a/react/features/video-menu/components/native/styles.js
+++ b/react/features/video-menu/components/native/styles.js
@ -59,11 +59,12 @@ export default createStyleSheet({
    },

    volumeIcon: {
-        marginLeft: BaseTheme.spacing[1]
+        marginLeft: BaseTheme.spacing[1],
+        minWidth: '5%'
    },

    sliderContainer: {
-        marginLeft: BaseTheme.spacing[2],
-        minWidth: '92%'
+        marginLeft: BaseTheme.spacing[3],
+        minWidth: '90%'
    }
 });