feat(participants-pane): Add 'admit all' knocking participants button

lang/main.json

@@ -957,6 +957,7 @@
     },
     "lobby": {
         "admit": "Admit",
+        "admitAll": "Admit all",
         "knockingParticipantList": "Knocking participant list",
         "allow": "Allow",
         "backToKnockModeButton": "No password, ask to join instead",

react/features/base/styles/functions.web.js

@@ -24,3 +24,17 @@ export function getFixedPlatformStyle(style: StyleType): StyleType {
 
     return style;
 }
+
+/**
+ * Sets the line height of a CSS Object group in pixels.
+ * By default lineHeight is unitless in CSS, but not in RN.
+ *
+ * @param {Object} base - The base object containing the `lineHeight` property.
+ * @returns {Object}
+ */
+export function withPixelLineHeight(base: Object): Object {
+    return {
+        ...base,
+        lineHeight: `${base.lineHeight}px`
+    };
+}

react/features/lobby/actions.web.js

@@ -129,6 +129,22 @@ export function setKnockingParticipantApproval(id: string, approved: boolean) {
     };
 }
 
+/**
+ * Action used to admit multiple participants in the conference.
+ *
+ * @param {Array<Object>} participants - A list of knocking participants.
+ * @returns {void}
+ */
+export function admitMultiple(participants: Array<Object>) {
+    return (dispatch: Function, getState: Function) => {
+        const conference = getCurrentConference(getState);
+
+        participants.forEach(p => {
+            conference.lobbyApproveAccess(p.id);
+        });
+    };
+}
+
 /**
  * Action to set the knocking state of the participant.
  *
@@ -198,4 +214,3 @@ export function startKnocking() {
         dispatch(setKnockingState(true));
     };
 }
-

react/features/participants-pane/components/LobbyParticipantList.js

@@ -1,13 +1,35 @@
 // @flow
 
-import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 
+import { withPixelLineHeight } from '../../base/styles/functions.web';
+import { admitMultiple } from '../../lobby/actions.web';
 import { getLobbyState } from '../../lobby/functions';
 
 import { LobbyParticipantItem } from './LobbyParticipantItem';
-import { Heading } from './styled';
+
+const useStyles = makeStyles(theme => {
+    return {
+        headingContainer: {
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between'
+        },
+        heading: {
+            ...withPixelLineHeight(theme.typography.heading7),
+            color: theme.palette.text02
+        },
+        link: {
+            ...withPixelLineHeight(theme.typography.labelBold),
+            color: theme.palette.link01,
+            cursor: 'pointer'
+        }
+    };
+});
+
 
 export const LobbyParticipantList = () => {
     const {
@@ -15,6 +37,11 @@ export const LobbyParticipantList = () => {
         knockingParticipants: participants
     } = useSelector(getLobbyState);
     const { t } = useTranslation();
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const admitAll = useCallback(() => {
+        dispatch(admitMultiple(participants));
+    }, [ dispatch, participants ]);
 
     if (!lobbyEnabled || !participants.length) {
         return null;
@@ -22,7 +49,14 @@ export const LobbyParticipantList = () => {
 
     return (
     <>
-        <Heading>{t('participantsPane.headings.lobby', { count: participants.length })}</Heading>
+        <div className = { classes.headingContainer }>
+            <div className = { classes.heading }>
+                {t('participantsPane.headings.lobby', { count: participants.length })}
+            </div>
+            <div
+                className = { classes.link }
+                onClick = { admitAll }>{t('lobby.admitAll')}</div>
+        </div>
         <div>
             {participants.map(p => (
                 <LobbyParticipantItem