feat(native-participants-pane) removed button component, fixed icons inside paper button component and reverted actions.js files

react/features/lobby/actions.any.js

@@ -23,24 +23,3 @@ export function toggleLobbyMode(enabled: boolean) {
         }
     };
 }
-
-/**
- * Approves (lets in) or rejects a knocking participant.
- *
- * @param {string} id - The id of the knocking participant.
- * @param {boolean} approved - True if the participant is approved, false otherwise.
- * @returns {Function}
- */
-export function setKnockingParticipantApproval(id: string, approved: boolean) {
-    return async (dispatch: Dispatch<any>, getState: Function) => {
-        const conference = getCurrentConference(getState);
-
-        if (conference) {
-            if (approved) {
-                conference.lobbyApproveAccess(id);
-            } else {
-                conference.lobbyDenyAccess(id);
-            }
-        }
-    };
-}

react/features/lobby/actions.native.js

@@ -5,7 +5,6 @@ import { openDialog } from '../base/dialog';
 import { DisableLobbyModeDialog, EnableLobbyModeDialog } from './components/native';
 
 export * from './actions.web';
-export * from './actions.any';
 
 /**
  * Action to show the dialog to disable lobby mode.

react/features/participants-pane/actions.native.js

@@ -1,3 +0,0 @@
-// @flow
-
-export * from './actions.any';

react/features/participants-pane/actions.web.js

@@ -1,3 +0,0 @@
-// @flow
-
-export * from './actions.any';

react/features/participants-pane/components/native/Button.js

@@ -1,115 +0,0 @@
-// @flow
-
-import React from 'react';
-import { View } from 'react-native';
-import { Button as PaperButton } from 'react-native-paper';
-
-import { Icon } from '../../../base/icons';
-
-let buttonContent;
-
-/**
- * The type of the React {@code Component} props of {@link Button}
- */
-type Props = {
-
-    /**
-     * Button content.
-     */
-    content?: string,
-
-    /**
-     * Is the button icon type?
-     */
-    iconButton?: boolean,
-
-    /**
-     * Style for the icon
-     */
-    iconStyle?: Object,
-
-    /**
-     * Size of the icon.
-     */
-    iconSize?: number,
-
-    /**
-     * Icon component source.
-     */
-    iconSrc?: Object,
-
-    /**
-     * Button mode.
-     */
-    mode?: string,
-
-    /**
-     * Style of button's inner content.
-     */
-    contentStyle?: Object,
-
-    /**
-     * The action to be performed when the button is pressed.
-     */
-    onPress?: Function,
-
-    /**
-     * An external style object passed to the component.
-     */
-    style?: Object,
-
-    /**
-     * Theme to be applied.
-     */
-    theme?: Object
-};
-
-/**
- * Close button component.
- *
- * @returns {React$Element<any>}
- */
-function Button({
-    iconButton,
-    iconStyle,
-    iconSize,
-    iconSrc,
-    content,
-    contentStyle,
-    mode,
-    onPress,
-    style,
-    theme
-}: Props) {
-
-    if (iconButton) {
-        buttonContent
-            = (<View
-                /* eslint-disable-next-line react-native/no-inline-styles */
-                style = {{
-                    height: 0,
-                    width: 0
-                }}>
-                <Icon
-                    size = { iconSize }
-                    src = { iconSrc }
-                    style = { iconStyle } />
-            </View>);
-
-    } else {
-        buttonContent = content;
-    }
-
-    return (
-        <PaperButton
-            contentStyle = { contentStyle }
-            mode = { mode }
-            onPress = { onPress }
-            style = { style }
-            theme = { theme }>
-            { buttonContent }
-        </PaperButton>
-    );
-}
-
-export default Button;

react/features/participants-pane/components/native/ParticipantsPane.js

@@ -3,16 +3,14 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { View } from 'react-native';
-import { withTheme } from 'react-native-paper';
+import { Button, withTheme } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { IconClose, IconHorizontalPoints } from '../../../base/icons';
+import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import { isLocalParticipantModerator } from '../../../base/participants';
 import { close } from '../../actions.any';
 
-import Button from './Button';
-import { LobbyParticipantList } from './LobbyParticipantList';
 import styles from './styles';
 
 
@@ -47,11 +45,13 @@ function ParticipantsPane({ theme }: Props) {
             style = { styles.participantsPane }>
             <View style = { styles.header }>
                 <Button
-                    contentStyle = { styles.muteAllContent }
+                    contentStyle = { styles.closeIcon }
-                    iconButton = { true }
+                    /* eslint-disable-next-line react/jsx-no-bind */
-                    iconSize = { 16 }
+                    icon = { () =>
-                    iconSrc = { IconClose }
+                        (<Icon
-                    iconStyle = { styles.closeIcon }
+                            size = { 16 }
+                            src = { IconClose } />)
+                    }
                     mode = 'contained'
                     onPress = { closePane }
                     style = { styles.closeButton }
@@ -61,31 +61,30 @@ function ParticipantsPane({ theme }: Props) {
                         }
                     }} />
             </View>
-            <LobbyParticipantList />
+            <View style = { styles.footer }>
-            {
+                <Button
-                isLocalModerator
+                    contentStyle = { styles.muteAllContent }
-                && <View style = { styles.footer }>
+                    onPress = { closePane }
-                    <Button
+                    style = { styles.muteAllButton } >
-                        content = { t('participantsPane.actions.muteAll') }
+                    { t('participantsPane.actions.muteAll') }
-                        contentStyle = { styles.muteAllContent }
+                </Button>
-                        onPress = { closePane }
+                <Button
-                        style = { styles.muteAllButton } />
+                    contentStyle = { styles.moreIcon }
-                    <Button
+                    /* eslint-disable-next-line react/jsx-no-bind */
-                        contentStyle = { styles.muteAllContent }
+                    icon = { () =>
-                        iconButton = { true }
+                        (<Icon
-                        iconSize = { 16 }
+                            size = { 16 }
-                        iconSrc = { IconHorizontalPoints }
+                            src = { IconHorizontalPoints } />)
-                        iconStyle = { styles.moreIcon }
+                    }
-                        mode = 'contained'
+                    mode = 'contained'
-                        onPress = { closePane }
+                    onPress = { closePane }
-                        style = { styles.moreButton }
+                    style = { styles.moreButton }
-                        theme = {{
+                    theme = {{
-                            colors: {
+                        colors: {
-                                primary: palette.action02
+                            primary: palette.action02
-                            }
+                        }
-                        }} />
+                    }} />
-                </View>
+            </View>
-            }
         </JitsiModal>
     );
 }

react/features/participants-pane/components/native/styles.js

@@ -147,16 +147,6 @@ export default {
         ...buttonContent
     },
 
-    moreButtonPaper: {
-        ...smallButton,
-        height: 48
-    },
-
-    moreIconPaper: {
-        alignItems: 'center',
-        flexDirection: 'row-reverse'
-    },
-
     muteAllButton: {
         ...button,
         paddingBottom: 12,