feat: Visitors promotion (#14119)

* fix: Fixes wrong warning message. * fix: Detect enables/disables visitors for a room. * fix: We need customusername in all cases of auto-allow setting. * feat: Sends promotion-request to all moderators. * feat(visitors): Implements request promotion. * feat(visitors): Implements single moderator and vpass cases for moderators. * fix: Fixes clearing request instances from UI. * feat: Implements visitors approval for mobile. * squash: Drops unused and wrong report for auto allow promotion. * squash: Returns early based on count. * squash: Moves translation to common key. * squash: Adds dependencies for useCallback. * squash: comments. * squash: Refactor 1 to unify with native. * squash: Rename some styles. * squash: Fixes error dew to fewer hooks error. * squash: Renames VISITOR_PROMOTION_REQUEST_DENIED. * squash: Fix renaming component. * squash: Suggestions.
2025-12-30 03:12:29 +00:00 · 2023-12-14 08:31:58 -06:00
parent af4488d1e9
commit 9ebab2c7d0
66 changed files with 957 additions and 247 deletions
--- a/react/features/participants-pane/components/web/VisitorsList.tsx
+++ b/react/features/participants-pane/components/web/VisitorsList.tsx
@@ -0,0 +1,111 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
+import { admitMultiple } from '../../../visitors/actions';
+import { getPromotionRequests } from '../../../visitors/functions';
+
+import { VisitorsItem } from './VisitorsItem';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            margin: `${theme.spacing(3)} 0`
+        },
+        headingW: {
+            color: theme.palette.warning02
+        },
+        drawerActions: {
+            listStyleType: 'none',
+            margin: 0,
+            padding: 0
+        },
+        drawerItem: {
+            alignItems: 'center',
+            color: theme.palette.text01,
+            display: 'flex',
+            padding: '12px 16px',
+            ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
+
+            '&:first-child': {
+                marginTop: '15px'
+            },
+
+            '&:hover': {
+                cursor: 'pointer',
+                background: theme.palette.action02
+            }
+        },
+        icon: {
+            marginRight: 16
+        },
+        headingContainer: {
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between'
+        },
+        heading: {
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            color: theme.palette.text02
+        },
+        link: {
+            ...withPixelLineHeight(theme.typography.labelBold),
+            color: theme.palette.link01,
+            cursor: 'pointer'
+        }
+    };
+});
+
+/**
+ * Component used to display a list of visitors waiting for approval to join the main meeting.
+ *
+ * @returns {ReactNode}
+ */
+export default function VisitorsList() {
+    const requests = useSelector(getPromotionRequests);
+    const visitorsCount = useSelector((state: IReduxState) => state['features/visitors'].count || 0);
+
+    const { t } = useTranslation();
+    const { classes, cx } = useStyles();
+    const dispatch = useDispatch();
+
+    const admitAll = useCallback(() => {
+        dispatch(admitMultiple(requests));
+    }, [ dispatch, requests ]);
+
+    if (visitorsCount <= 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className = { classes.headingContainer }>
+                <div className = { cx(classes.heading, classes.headingW) }>
+                    { t('participantsPane.headings.visitors', { count: visitorsCount })}
+                    { requests.length > 0
+                        && t('participantsPane.headings.visitorRequests', { count: requests.length }) }
+                </div>
+                {
+                    requests.length > 1
+                    && <div
+                        className = { classes.link }
+                        onClick = { admitAll }>{t('participantsPane.actions.admitAll')}</div>
+                }
+            </div>
+            <div
+                className = { classes.container }
+                id = 'visitor-list'>
+                {
+                    requests.map(r => (
+                        <VisitorsItem
+                            key = { r.from }
+                            request = { r } />)
+                    )
+                }
+            </div>
+        </>
+    );
+}