From bd3ab8d8cd87248fc7caeda3ef9dbfd33599a481 Mon Sep 17 00:00:00 2001
From: damencho <damencho@jitsi.org>
Date: Tue, 25 Jun 2024 09:21:41 +0300
Subject: [PATCH] squash: Implements handling of live conference and queue
 service.

---
 lang/main.json                                |   4 +-
 package.json                                  |   1 +
 react/features/base/config/configType.ts      |   1 +
 react/features/base/config/configWhitelist.ts |   1 +
 react/features/base/config/reducer.ts         |   1 +
 .../conference/components/web/Conference.tsx  |  16 +-
 .../components/native/VisitorsList.tsx        |   6 +-
 .../components/web/VisitorsList.tsx           |  12 +-
 react/features/visitors/actionTypes.ts        |  10 ++
 react/features/visitors/actions.ts            |  19 ++-
 .../components/native/VisitorsCountLabel.tsx  |  12 +-
 .../components/native/VisitorsQueue.tsx       |   8 +
 .../components/web/VisitorsCountLabel.tsx     |  15 +-
 .../visitors/components/web/VisitorsQueue.tsx |  93 ++++++++++++
 react/features/visitors/constants.ts          |   4 +
 react/features/visitors/functions.any.ts      |  11 ++
 react/features/visitors/middleware.ts         | 137 +++++++++++++++++-
 react/features/visitors/reducer.ts            |   9 ++
 react/features/visitors/websocket-client.ts   | 127 ++++++++++++++++
 .../mod_room_metadata_component.lua           |   6 +
 .../mod_visitors_component.lua                |  59 ++++++++
 resources/prosody-plugins/token/util.lib.lua  |  62 ++++++++
 22 files changed, 597 insertions(+), 17 deletions(-)
 create mode 100644 react/features/visitors/components/native/VisitorsQueue.tsx
 create mode 100644 react/features/visitors/components/web/VisitorsQueue.tsx
 create mode 100644 react/features/visitors/constants.ts
 create mode 100644 react/features/visitors/websocket-client.ts

diff --git a/lang/main.json b/lang/main.json
index 30499d0860..f09db6370c 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -1497,7 +1497,9 @@
             "noVisitorLobby": "You cannot join while there is a lobby enabled for the meeting.",
             "notAllowedPromotion": "A participant needs to allow your request first.",
             "title": "You are a visitor in the meeting"
-        }
+        },
+        "waiting": "*waiting",
+        "waitingMessage": "You'll join the meeting as soon as it is live!"
     },
     "volumeSlider": "Volume slider",
     "welcomepage": {
diff --git a/package.json b/package.json
index abe5f5bc25..8ab2f2d233 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@react-navigation/material-top-tabs": "6.6.3",
     "@react-navigation/native": "6.1.7",
     "@react-navigation/stack": "6.3.17",
+    "@stomp/stompjs": "7.0.0",
     "@svgr/webpack": "6.3.1",
     "@tensorflow/tfjs-backend-wasm": "3.13.0",
     "@tensorflow/tfjs-core": "3.13.0",
diff --git a/react/features/base/config/configType.ts b/react/features/base/config/configType.ts
index 5c2bb58515..79761ef137 100644
--- a/react/features/base/config/configType.ts
+++ b/react/features/base/config/configType.ts
@@ -478,6 +478,7 @@ export interface IConfig {
     peopleSearchQueryTypes?: string[];
     peopleSearchUrl?: string;
     preferBosh?: boolean;
+    preferVisitor?: boolean;
     preferredTranscribeLanguage?: string;
     prejoinConfig?: {
         enabled?: boolean;
diff --git a/react/features/base/config/configWhitelist.ts b/react/features/base/config/configWhitelist.ts
index e57f467301..631e7ebfe4 100644
--- a/react/features/base/config/configWhitelist.ts
+++ b/react/features/base/config/configWhitelist.ts
@@ -197,6 +197,7 @@ export default [
     'participantsPane',
     'pcStatsInterval',
     'preferBosh',
+    'preferVisitor',
     'prejoinConfig',
     'prejoinPageEnabled',
     'recordingService',
diff --git a/react/features/base/config/reducer.ts b/react/features/base/config/reducer.ts
index 55fd34f61a..00812289cd 100644
--- a/react/features/base/config/reducer.ts
+++ b/react/features/base/config/reducer.ts
@@ -80,6 +80,7 @@ export interface IConfigState extends IConfig {
             audio?: boolean;
             video?: boolean;
         };
+        queueService: string;
     };
 }
 
diff --git a/react/features/conference/components/web/Conference.tsx b/react/features/conference/components/web/Conference.tsx
index c357e61183..a443d3990d 100644
--- a/react/features/conference/components/web/Conference.tsx
+++ b/react/features/conference/components/web/Conference.tsx
@@ -30,6 +30,8 @@ import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
 import Toolbox from '../../../toolbox/components/web/Toolbox';
 import { LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
 import { getCurrentLayout } from '../../../video-layout/functions.any';
+import VisitorsQueue from '../../../visitors/components/web/VisitorsQueue';
+import { showVisitorsQueue } from '../../../visitors/functions.any';
 import { init } from '../../actions.web';
 import { maybeShowSuboptimalExperienceNotification } from '../../functions.web';
 import {
@@ -100,6 +102,11 @@ interface IProps extends AbstractProps, WithTranslation {
      */
     _showPrejoin: boolean;
 
+    /**
+     * If visitors queue page is visible or not.
+     */
+    _showVisitorsQueue: boolean;
+
     dispatch: IStore['dispatch'];
 }
 
@@ -206,6 +213,7 @@ class Conference extends AbstractConference<IProps, any> {
             _overflowDrawer,
             _showLobby,
             _showPrejoin,
+            _showVisitorsQueue,
             t
         } = this.props;
 
@@ -257,8 +265,9 @@ class Conference extends AbstractConference<IProps, any> {
 
                     <CalleeInfoContainer />
 
-                    { _showPrejoin && <Prejoin />}
-                    { _showLobby && <LobbyScreen />}
+                    { (_showPrejoin && !_showVisitorsQueue) && <Prejoin />}
+                    { (_showLobby && !_showVisitorsQueue) && <LobbyScreen />}
+                    { _showVisitorsQueue && <VisitorsQueue />}
                 </div>
                 <ParticipantsPane />
                 <ReactionAnimations />
@@ -402,7 +411,8 @@ function _mapStateToProps(state: IReduxState) {
         _overflowDrawer: overflowDrawer,
         _roomName: getConferenceNameForTitle(state),
         _showLobby: getIsLobbyVisible(state),
-        _showPrejoin: isPrejoinPageVisible(state)
+        _showPrejoin: isPrejoinPageVisible(state),
+        _showVisitorsQueue: showVisitorsQueue(state)
     };
 }
 
diff --git a/react/features/participants-pane/components/native/VisitorsList.tsx b/react/features/participants-pane/components/native/VisitorsList.tsx
index 9c9a8c6265..c2f5d9fed2 100644
--- a/react/features/participants-pane/components/native/VisitorsList.tsx
+++ b/react/features/participants-pane/components/native/VisitorsList.tsx
@@ -14,6 +14,8 @@ import styles from './styles';
 
 const VisitorsList = () => {
     const visitorsCount = useSelector((state: IReduxState) => state['features/visitors'].count || 0);
+    const isLive = useSelector(
+        (state: IReduxState) => state['features/base/conference'].metadata?.visitorsLive);
 
     const dispatch = useDispatch();
 
@@ -30,7 +32,9 @@ const VisitorsList = () => {
 
     let title = t('participantsPane.headings.visitors', { count: visitorsCount });
 
-    if (requests.length > 0) {
+    if (isLive === false) {
+        title = `${title} ${t('visitors.waiting')}`;
+    } else if (requests.length > 0) {
         title += t('participantsPane.headings.visitorRequests', { count: requests.length });
     }
 
diff --git a/react/features/participants-pane/components/web/VisitorsList.tsx b/react/features/participants-pane/components/web/VisitorsList.tsx
index 16a3857d86..70ac758482 100644
--- a/react/features/participants-pane/components/web/VisitorsList.tsx
+++ b/react/features/participants-pane/components/web/VisitorsList.tsx
@@ -67,8 +67,18 @@ const useStyles = makeStyles()(theme => {
 export default function VisitorsList() {
     const requests = useSelector(getPromotionRequests);
     const visitorsCount = useSelector((state: IReduxState) => state['features/visitors'].count || 0);
+    const isLive = useSelector(
+        (state: IReduxState) => state['features/base/conference'].metadata?.visitorsLive);
 
     const { t } = useTranslation();
+    let visititorsHeading = t('participantsPane.headings.visitors', { count: visitorsCount });
+
+    if (isLive === false) {
+        let visitorsWaiting = t('visitors.waiting');
+
+        visititorsHeading = `${visititorsHeading} ${visitorsWaiting}`;
+    }
+
     const { classes, cx } = useStyles();
     const dispatch = useDispatch();
 
@@ -84,7 +94,7 @@ export default function VisitorsList() {
         <>
             <div className = { classes.headingContainer }>
                 <div className = { cx(classes.heading, classes.headingW) }>
-                    { t('participantsPane.headings.visitors', { count: visitorsCount })}
+                    { visititorsHeading }
                     { requests.length > 0
                         && t('participantsPane.headings.visitorRequests', { count: requests.length }) }
                 </div>
diff --git a/react/features/visitors/actionTypes.ts b/react/features/visitors/actionTypes.ts
index 4dfdbc6e31..59bca2ba0e 100644
--- a/react/features/visitors/actionTypes.ts
+++ b/react/features/visitors/actionTypes.ts
@@ -39,6 +39,16 @@ export const VISITOR_PROMOTION_REQUEST = 'VISITOR_PROMOTION_REQUEST';
  */
 export const CLEAR_VISITOR_PROMOTION_REQUEST = 'CLEAR_VISITOR_PROMOTION_REQUEST';
 
+/**
+ * The type of (redux) action which sets in visitor's queue.
+ *
+ * {
+ *     type: SET_IN_VISITORS_QUEUE,
+ *     value: boolean
+ * }
+ */
+export const SET_IN_VISITORS_QUEUE = 'SET_IN_VISITORS_QUEUE';
+
 /**
  * The type of (redux) action which sets visitor demote actor.
  *
diff --git a/react/features/visitors/actions.ts b/react/features/visitors/actions.ts
index 59052ac25b..425257f446 100644
--- a/react/features/visitors/actions.ts
+++ b/react/features/visitors/actions.ts
@@ -8,11 +8,13 @@ import { getLocalParticipant } from '../base/participants/functions';
 import {
     CLEAR_VISITOR_PROMOTION_REQUEST,
     I_AM_VISITOR_MODE,
+    SET_IN_VISITORS_QUEUE,
     SET_VISITORS_SUPPORTED,
     SET_VISITOR_DEMOTE_ACTOR,
     UPDATE_VISITORS_COUNT,
     VISITOR_PROMOTION_REQUEST
 } from './actionTypes';
+import { VISITORS_LIVE_ID } from './constants';
 import { IPromotionRequest } from './types';
 
 /**
@@ -150,6 +152,21 @@ export function setIAmVisitor(enabled: boolean) {
     };
 }
 
+/**
+ * Sets in visitor's queue.
+ *
+ * @param {boolean} value - The new value.
+ * @returns {{
+ *     type: SET_IN_VISITORS_QUEUE,
+ * }}
+ */
+export function setInVisitorsQueue(value: boolean) {
+    return {
+        type: SET_IN_VISITORS_QUEUE,
+        value
+    };
+}
+
 /**
  * Sets visitor demote actor.
  *
@@ -205,6 +222,6 @@ export function goLive() {
     return (_: IStore['dispatch'], getState: IStore['getState']) => {
         const { conference } = getState()['features/base/conference'];
 
-        conference?.getMetadataHandler().setMetadata('visitorsLive', true);
+        conference?.getMetadataHandler().setMetadata(VISITORS_LIVE_ID, true);
     };
 }
diff --git a/react/features/visitors/components/native/VisitorsCountLabel.tsx b/react/features/visitors/components/native/VisitorsCountLabel.tsx
index 9477522356..104bf7871e 100644
--- a/react/features/visitors/components/native/VisitorsCountLabel.tsx
+++ b/react/features/visitors/components/native/VisitorsCountLabel.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 import { IconUsers } from '../../../base/icons/svg';
 import Label from '../../../base/label/components/native/Label';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
-import { getVisitorsShortText, iAmVisitor } from '../../functions';
+import { getVisitorsShortText, iAmVisitor, isVisitorsLive } from '../../functions';
 
 const styles = {
     raisedHandsCountLabel: {
@@ -27,13 +28,20 @@ const VisitorsCountLabel = () => {
     const visitorsMode = useSelector((state: IReduxState) => iAmVisitor(state));
     const visitorsCount = useSelector((state: IReduxState) =>
         state['features/visitors'].count || 0);
+    const { t } = useTranslation();
+    const isLive = useSelector(isVisitorsLive);
+    let visitorsWaiting = '';
+
+    if (isLive === false) {
+        visitorsWaiting = t('visitors.waiting');
+    }
 
     return !visitorsMode && visitorsCount > 0 ? (
         <Label
             icon = { IconUsers }
             iconColor = { BaseTheme.palette.uiBackground }
             style = { styles.raisedHandsCountLabel }
-            text = { `${getVisitorsShortText(visitorsCount)}` }
+            text = { `${getVisitorsShortText(visitorsCount)} ${visitorsWaiting}` }
             textStyle = { styles.raisedHandsCountLabelText } />
     ) : null;
 };
diff --git a/react/features/visitors/components/native/VisitorsQueue.tsx b/react/features/visitors/components/native/VisitorsQueue.tsx
new file mode 100644
index 0000000000..f264d5b48f
--- /dev/null
+++ b/react/features/visitors/components/native/VisitorsQueue.tsx
@@ -0,0 +1,8 @@
+/**
+ * The component that renders visitors queue UI.
+ *
+ * @returns {ReactElement}
+ */
+export default function VisitorsQueue() {
+    return undefined;
+}
diff --git a/react/features/visitors/components/web/VisitorsCountLabel.tsx b/react/features/visitors/components/web/VisitorsCountLabel.tsx
index f78876ffe4..3f141d60da 100644
--- a/react/features/visitors/components/web/VisitorsCountLabel.tsx
+++ b/react/features/visitors/components/web/VisitorsCountLabel.tsx
@@ -7,7 +7,7 @@ import { IReduxState } from '../../../app/types';
 import { IconUsers } from '../../../base/icons/svg';
 import Label from '../../../base/label/components/web/Label';
 import Tooltip from '../../../base/tooltip/components/Tooltip';
-import { getVisitorsShortText, iAmVisitor } from '../../functions';
+import { getVisitorsShortText, iAmVisitor, isVisitorsLive } from '../../functions';
 
 const useStyles = makeStyles()(theme => {
     return {
@@ -24,16 +24,25 @@ const VisitorsCountLabel = () => {
     const visitorsCount = useSelector((state: IReduxState) =>
         state['features/visitors'].count || 0);
     const { t } = useTranslation();
+    const isLive = useSelector(isVisitorsLive);
+    let visitorsWaiting = '';
+    let labelTooltip = t('visitors.labelTooltip', { count: visitorsCount });
+
+    if (isLive === false) {
+        visitorsWaiting = t('visitors.waiting');
+        labelTooltip = `${labelTooltip} ${visitorsWaiting}`;
+        visitorsWaiting = '*';
+    }
 
     return !visitorsMode && visitorsCount > 0 ? (<Tooltip
-        content = { t('visitors.labelTooltip', { count: visitorsCount }) }
+        content = { labelTooltip }
         position = { 'bottom' }>
         <Label
             className = { styles.label }
             icon = { IconUsers }
             iconColor = { theme.palette.icon04 }
             id = 'visitorsCountLabel'
-            text = { `${getVisitorsShortText(visitorsCount)}` } />
+            text = { `${getVisitorsShortText(visitorsCount)} ${visitorsWaiting}` } />
     </Tooltip>) : null;
 };
 
diff --git a/react/features/visitors/components/web/VisitorsQueue.tsx b/react/features/visitors/components/web/VisitorsQueue.tsx
new file mode 100644
index 0000000000..57dcfde9d5
--- /dev/null
+++ b/react/features/visitors/components/web/VisitorsQueue.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { withPixelLineHeight } from '../../../base/styles/functions';
+import LoadingIndicator from '../../../base/ui/components/web/Spinner';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            height: '100%',
+            position: 'absolute',
+            inset: '0 0 0 0',
+            display: 'flex',
+            backgroundColor: theme.palette.ui01,
+            zIndex: 252,
+
+            '@media (max-width: 720px)': {
+                flexDirection: 'column-reverse'
+            }
+        },
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flexShrink: 0,
+            boxSizing: 'border-box',
+            position: 'relative',
+
+            width: '100%',
+            height: '100%',
+            zIndex: 252,
+
+            '@media (max-width: 720px)': {
+                height: 'auto',
+                margin: '0 auto'
+            },
+
+            // mobile phone landscape
+            '@media (max-width: 420px)': {
+                padding: '16px 16px 0 16px',
+                width: '100%'
+            },
+
+            '@media (max-width: 400px)': {
+                padding: '16px'
+            }
+        },
+        contentControls: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            margin: 'auto',
+            width: '100%'
+        },
+        roomName: {
+            ...withPixelLineHeight(theme.typography.heading5),
+            color: theme.palette.text01,
+            marginBottom: theme.spacing(4),
+            overflow: 'hidden',
+            textAlign: 'center',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '100%'
+        },
+        spinner: {
+            margin: '8px'
+        }
+    };
+});
+
+/**
+ * The component that renders visitors queue UI.
+ *
+ * @returns {ReactElement}
+ */
+export default function VisitorsQueue() {
+    const { classes } = useStyles();
+    const { t } = useTranslation();
+
+    return (<div className = { classes.container }>
+        <div className = { classes.content }>
+            <div className = { classes.contentControls }>
+                <span className = { classes.roomName }>
+                    { t('visitors.waitingMessage') }
+                </span>
+                <div className = { classes.spinner }>
+                    <LoadingIndicator size = 'large' />
+                </div>
+            </div>
+        </div>
+    </div>);
+}
diff --git a/react/features/visitors/constants.ts b/react/features/visitors/constants.ts
new file mode 100644
index 0000000000..feb3549965
--- /dev/null
+++ b/react/features/visitors/constants.ts
@@ -0,0 +1,4 @@
+/**
+ * The metadata field ID for visitors live event.
+ */
+export const VISITORS_LIVE_ID = 'visitorsLive';
diff --git a/react/features/visitors/functions.any.ts b/react/features/visitors/functions.any.ts
index fb8c59ac54..4d6043a07d 100644
--- a/react/features/visitors/functions.any.ts
+++ b/react/features/visitors/functions.any.ts
@@ -67,3 +67,14 @@ export function isVisitorsSupported(stateful: IStateful) {
 export function isVisitorsLive(stateful: IStateful) {
     return toState(stateful)['features/base/conference'].metadata?.visitorsLive;
 }
+
+/**
+ * Whether to show visitor queue screen.
+ *
+ * @param {Function|Object} stateful - The redux store or {@code getState}
+ * function.
+ * @returns {boolean} Whether current participant is visitor and is in queue.
+ */
+export function showVisitorsQueue(stateful: IStateful) {
+    return toState(stateful)['features/visitors'].inVisitorsQueue;
+}
diff --git a/react/features/visitors/middleware.ts b/react/features/visitors/middleware.ts
index 309f58b3ca..ff2d3c3ffc 100644
--- a/react/features/visitors/middleware.ts
+++ b/react/features/visitors/middleware.ts
@@ -2,17 +2,28 @@ import i18n from 'i18next';
 import { batch } from 'react-redux';
 
 import { IStore } from '../app/types';
+import { IStateful } from '../base/app/types';
 import {
     CONFERENCE_JOINED,
     CONFERENCE_JOIN_IN_PROGRESS,
-    ENDPOINT_MESSAGE_RECEIVED
+    ENDPOINT_MESSAGE_RECEIVED,
+    UPDATE_CONFERENCE_METADATA
 } from '../base/conference/actionTypes';
+import { SET_CONFIG } from '../base/config/actionTypes';
+import { CONNECTION_FAILED } from '../base/connection/actionTypes';
 import { connect, setPreferVisitor } from '../base/connection/actions';
 import { disconnect } from '../base/connection/actions.any';
-import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import { JitsiConferenceEvents, JitsiConnectionErrors } from '../base/lib-jitsi-meet';
+import { PARTICIPANT_UPDATED } from '../base/participants/actionTypes';
 import { raiseHand } from '../base/participants/actions';
-import { getLocalParticipant, getParticipantById } from '../base/participants/functions';
+import {
+    getLocalParticipant,
+    getParticipantById,
+    isLocalParticipantModerator,
+    isParticipantModerator
+} from '../base/participants/functions';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { toState } from '../base/redux/functions';
 import { BUTTON_TYPES } from '../base/ui/constants.any';
 import { hideNotification, showNotification } from '../notifications/actions';
 import {
@@ -22,18 +33,21 @@ import {
 } from '../notifications/constants';
 import { INotificationProps } from '../notifications/types';
 import { open as openParticipantsPane } from '../participants-pane/actions';
+import { joinConference } from '../prejoin/actions';
 
 import {
     approveRequest,
     clearPromotionRequest,
     denyRequest,
-    promotionRequestReceived,
+    promotionRequestReceived, setInVisitorsQueue,
     setVisitorDemoteActor,
     setVisitorsSupported,
     updateVisitorsCount
 } from './actions';
+import { VISITORS_LIVE_ID } from './constants';
 import { getPromotionRequests } from './functions';
 import logger from './logger';
+import { WebsocketClient } from './websocket-client';
 
 MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
     switch (action.type) {
@@ -130,17 +144,130 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
 
         if (data?.action === 'promotion-response' && data.approved) {
             const request = getPromotionRequests(getState())
-                .find(r => r.from === data.id);
+                .find((r: any) => r.from === data.id);
 
             request && dispatch(clearPromotionRequest(request));
         }
         break;
     }
+    case CONNECTION_FAILED: {
+        const { error } = action;
+
+        if (error?.name !== JitsiConnectionErrors.NOT_READY_ERROR) {
+            break;
+        }
+
+        const { hosts, preferVisitor, visitors: visitorsConfig } = getState()['features/base/config'];
+        const { locationURL } = getState()['features/base/connection'];
+
+        if (!visitorsConfig?.queueService || !locationURL || !preferVisitor) {
+            break;
+        }
+
+        // let's subscribe for visitor waiting queue
+        const { room } = getState()['features/base/conference'];
+        const conferenceJid = `${room}@${hosts?.muc}`;
+
+        WebsocketClient.getInstance()
+            .connect(`wss://${visitorsConfig?.queueService}/visitor/websocket`,
+                `/secured/conference/visitor/topic.${conferenceJid}`,
+                msg => {
+                    if ('status' in msg && msg.status === 'live') {
+                        WebsocketClient.getInstance().disconnect();
+                        dispatch(setInVisitorsQueue(false));
+
+                        let delay = 0;
+
+                        // now let's connect to meeting
+                        if ('randomDelayMs' in msg) {
+                            delay = msg.randomDelayMs;
+                        }
+
+                        setTimeout(() => {
+                            dispatch(joinConference());
+                        }, delay);
+                    }
+                },
+                getState()['features/base/jwt'].jwt,
+                () => {
+                    dispatch(setInVisitorsQueue(true));
+                });
+
+        break;
+    }
+    case PARTICIPANT_UPDATED: {
+        const { participant } = action;
+        const { local } = participant;
+
+        if (local && isParticipantModerator(participant)) {
+
+            const { metadata } = getState()['features/base/conference'];
+
+            if (metadata?.visitorsLive === false) {
+                // when go live is available and false, we should subscribe
+                // to the service if available to listen for waiting visitors
+                _subscribeQueueStats(getState(), dispatch);
+            }
+        }
+
+        break;
+    }
+    case SET_CONFIG: {
+        const result = next(action);
+        const { preferVisitor } = action.config;
+
+        if (preferVisitor !== undefined) {
+            setPreferVisitor(preferVisitor);
+        }
+
+        return result;
+    }
+    case UPDATE_CONFERENCE_METADATA: {
+        const { metadata } = action;
+
+        if (isLocalParticipantModerator(getState)) {
+            if (metadata?.[VISITORS_LIVE_ID] === false) {
+                // if metadata go live changes to goLive false and local is moderator
+                // we should subscribe to the service if available to listen for waiting visitors
+                _subscribeQueueStats(getState(), dispatch);
+            } else if (metadata?.[VISITORS_LIVE_ID]) {
+                WebsocketClient.getInstance().disconnect();
+            }
+        }
+
+        break;
+    }
     }
 
     return next(action);
 });
 
+/**
+ * Subscribe for moderator stats.
+ *
+ * @param {Function|Object} stateful - The redux store or {@code getState}
+ * function.
+ * @param {Dispatch} dispatch - The Redux dispatch function.
+ * @returns {void}
+ */
+function _subscribeQueueStats(stateful: IStateful, dispatch: IStore['dispatch']) {
+    const { hosts } = toState(stateful)['features/base/config'];
+    const { room } = toState(stateful)['features/base/conference'];
+    const conferenceJid = `${room}@${hosts?.muc}`;
+
+    const { visitors: visitorsConfig } = toState(stateful)['features/base/config'];
+
+    WebsocketClient.getInstance()
+        .connect(`wss://${visitorsConfig?.queueService}/visitor/websocket`,
+            `/secured/conference/state/topic.${conferenceJid}`,
+            msg => {
+                if ('visitorsWaiting' in msg) {
+                    dispatch(updateVisitorsCount(msg.visitorsWaiting));
+                }
+            },
+            toState(stateful)['features/base/jwt'].jwt);
+}
+
 /**
  * Function to handle the promotion notification.
  *
diff --git a/react/features/visitors/reducer.ts b/react/features/visitors/reducer.ts
index 58fbf9e0c7..95679218bd 100644
--- a/react/features/visitors/reducer.ts
+++ b/react/features/visitors/reducer.ts
@@ -4,6 +4,7 @@ import ReducerRegistry from '../base/redux/ReducerRegistry';
 import {
     CLEAR_VISITOR_PROMOTION_REQUEST,
     I_AM_VISITOR_MODE,
+    SET_IN_VISITORS_QUEUE,
     SET_VISITORS_SUPPORTED,
     SET_VISITOR_DEMOTE_ACTOR,
     UPDATE_VISITORS_COUNT,
@@ -14,6 +15,7 @@ import { IPromotionRequest } from './types';
 const DEFAULT_STATE = {
     count: -1,
     iAmVisitor: false,
+    inVisitorsQueue: false,
     showNotification: false,
     supported: false,
     promotionRequests: []
@@ -23,6 +25,7 @@ export interface IVisitorsState {
     count?: number;
     demoteActorDisplayName?: string;
     iAmVisitor: boolean;
+    inVisitorsQueue: boolean;
     promotionRequests: IPromotionRequest[];
     supported: boolean;
 }
@@ -55,6 +58,12 @@ ReducerRegistry.register<IVisitorsState>('features/visitors', (state = DEFAULT_S
             iAmVisitor: action.enabled
         };
     }
+    case SET_IN_VISITORS_QUEUE: {
+        return {
+            ...state,
+            inVisitorsQueue: action.value
+        };
+    }
     case SET_VISITOR_DEMOTE_ACTOR: {
         return {
             ...state,
diff --git a/react/features/visitors/websocket-client.ts b/react/features/visitors/websocket-client.ts
new file mode 100644
index 0000000000..02d30243ea
--- /dev/null
+++ b/react/features/visitors/websocket-client.ts
@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Client } from '@stomp/stompjs';
+
+import logger from './logger';
+
+interface QueueServiceResponse {
+    conference: string;
+}
+export interface StateResponse extends QueueServiceResponse {
+    randomDelayMs: number;
+    status: string;
+}
+
+export interface VisitorResponse extends QueueServiceResponse {
+    visitorsWaiting: number;
+}
+
+/**
+ * Websocket client impl, used for visitors queue.
+ * Uses STOMP for authenticating (https://stomp.github.io/).
+ */
+export class WebsocketClient {
+    private stompClient: Client | undefined;
+
+    private static instance: WebsocketClient;
+
+    private retriesCount = 0;
+
+    /**
+     *  WebsocketClient getInstance.
+     *
+     * @static
+     * @returns {WebsocketClient}  - WebsocketClient instance.
+     */
+    static getInstance(): WebsocketClient {
+        if (!this.instance) {
+            this.instance = new WebsocketClient();
+        }
+
+        return this.instance;
+    }
+
+    /**
+     * Connect to endpoint.
+     *
+     * @param {string} queueServiceURL - The service URL to use.
+     * @param {string} endpoint - The endpoint to subscribe to.
+     * @param {Function} callback - The callback to execute when we receive a message from the endpoint.
+     * @param {string} token - The token, if any, to be used for authorization.
+     * @param {Function?} connectCallback - The callback to execute when successfully connected.
+     *
+     * @returns {void}
+     */
+    connect(queueServiceURL: string, // eslint-disable-line max-params
+            endpoint: string,
+            callback: (response: StateResponse | VisitorResponse) => void,
+            token: string | undefined,
+            connectCallback?: () => void): void {
+        this.stompClient = new Client({
+            brokerURL: queueServiceURL
+        });
+
+        const errorConnecting = (error: any) => {
+            if (this.retriesCount > 3) {
+                this.stompClient?.deactivate();
+                this.stompClient = undefined;
+
+                return;
+            }
+
+            this.retriesCount++;
+
+            logger.error(`Error connecting to ${queueServiceURL} ${error || ''}`);
+        };
+
+        this.stompClient.onWebSocketError = errorConnecting;
+
+        this.stompClient.onStompError = frame => {
+            errorConnecting(frame.headers.message);
+        };
+
+        if (token) {
+            this.stompClient.connectHeaders = {
+                Authorization: `Bearer ${token}`
+            };
+        }
+
+        this.stompClient.onConnect = () => {
+            if (!this.stompClient) {
+                return;
+            }
+
+            this.retriesCount = 0;
+
+            logger.info(`Connected to:${endpoint}`);
+            connectCallback?.();
+
+            this.stompClient.subscribe(endpoint, message => {
+                try {
+                    callback(JSON.parse(message.body));
+                } catch (e) {
+                    logger.error(`Error parsing response: ${message}`, e);
+                }
+            });
+        };
+
+        this.stompClient.activate();
+    }
+
+    /**
+     * Disconnects the current stomp  client instance and clears it.
+     *
+     * @returns {void}
+     */
+    disconnect(): void {
+        if (!this.stompClient) {
+            return;
+        }
+
+        const url = this.stompClient.brokerURL;
+
+        this.stompClient.deactivate().then(() => {
+            logger.info(`disconnected from: ${url}`);
+            this.stompClient = undefined;
+        });
+    }
+}
diff --git a/resources/prosody-plugins/mod_room_metadata_component.lua b/resources/prosody-plugins/mod_room_metadata_component.lua
index ac2b9b3804..95fe1fe978 100644
--- a/resources/prosody-plugins/mod_room_metadata_component.lua
+++ b/resources/prosody-plugins/mod_room_metadata_component.lua
@@ -36,6 +36,7 @@ local breakout_rooms_component_host = module:get_option_string('breakout_rooms_c
 
 module:log("info", "Starting room metadata for %s", muc_component_host);
 
+local main_muc_module;
 
 -- Utility functions
 
@@ -149,6 +150,9 @@ function on_message(event)
 
     broadcastMetadata(room);
 
+    -- fire and event for the change
+    main_muc_module:fire_event('jitsi-metadata-updated', { room = room; actor = occupant; key = jsonData.key; });
+
     return true;
 end
 
@@ -159,6 +163,8 @@ module:hook("message/host", on_message);
 
 -- operates on already loaded main muc module
 function process_main_muc_loaded(main_muc, host_module)
+    main_muc_module = host_module;
+
     module:log('debug', 'Main muc loaded');
     module:log("info", "Hook to muc events on %s", muc_component_host);
 
diff --git a/resources/prosody-plugins/mod_visitors_component.lua b/resources/prosody-plugins/mod_visitors_component.lua
index 5c8115fea0..4d0b224ecc 100644
--- a/resources/prosody-plugins/mod_visitors_component.lua
+++ b/resources/prosody-plugins/mod_visitors_component.lua
@@ -1,5 +1,6 @@
 module:log('info', 'Starting visitors_component at %s', module.host);
 
+local http = require 'net.http';
 local jid = require 'util.jid';
 local st = require 'util.stanza';
 local util = module:require 'util';
@@ -18,6 +19,8 @@ local um_is_admin = require 'core.usermanager'.is_admin;
 local json = require 'cjson.safe';
 local inspect = require 'inspect';
 
+local token_util = module:require 'token/util'.new(module);
+
 local MUC_NS = 'http://jabber.org/protocol/muc';
 
 local muc_domain_prefix = module:get_option_string('muc_mapper_domain_prefix', 'conference');
@@ -36,6 +39,13 @@ local auto_allow_promotion = module:get_option_boolean('auto_allow_visitor_promo
 -- can be set to off and being controlled by another module, turning it on and off for rooms
 local always_visitors_enabled = module:get_option_boolean('always_visitors_enabled', true);
 
+local visitors_queue_service = module:get_option_string('visitors_queue_service');
+local http_headers = {
+    ["User-Agent"] = "Prosody (" .. prosody.version .. "; " .. prosody.platform .. ")",
+    ["Content-Type"] = "application/json",
+    ["Accept"] = "application/json"
+};
+
 local function is_admin(jid)
     return um_is_admin(jid, module.host);
 end
@@ -306,6 +316,39 @@ local function process_promotion_response(room, id, approved)
             allow = approved }):up());
 end
 
+local function go_live(room)
+    -- let's inform the queue service
+    local function cb(content_, code_, response_, request_)
+        local room = room;
+        if code_ == 200 then
+            -- meeting went live ???
+            module:log('info', 'live')
+        else
+            module:log('warn', 'External call to visitors_queue_service/golive failed. Code %s, Content %s',
+                code_, content_)
+        end
+    end
+
+    local headers = http_headers or {};
+    headers['Authorization'] = token_util:generateAsapToken();
+
+--     local ev = {
+--         conference = internal_room_jid_match_rewrite(room.jid)
+--     };
+--     local ev = {
+--         conference = 'lksdjfkjsdfh1@conference.vpaas-magic-cookie-eee8959313084417a035ca3409e52105.stage.8x8.vc'
+--     };
+    local ev = {
+        conference = 'lksdjfkjsdfh1@conference.vpaas-magic-cookie-43865235d9064762bf500eb65286ea6a.stage.8x8.vc'
+    };
+
+    http.request(visitors_queue_service..'/golive', {
+        headers = headers,
+        method = 'POST',
+        body = json.encode(ev);
+    }, cb);
+end
+
 module:hook('iq/host', stanza_handler, 10);
 
 process_host_module(muc_domain_prefix..'.'..muc_domain_base, function(host_module, host)
@@ -463,6 +506,22 @@ process_host_module(muc_domain_prefix..'.'..muc_domain_base, function(host_modul
 
         return true; -- halt processing, but return true that we handled it
     end);
+    if visitors_queue_service then
+        host_module:hook('muc-room-created', function (event)
+            local room = event.room;
+            if room.jitsiMetadata.visitorsLive then
+                go_live(room);
+            end
+        end, -2); -- metadata hook on -1
+        host_module:hook('jitsi-metadata-updated', function (event)
+            if event.key == 'visitorsLive' then
+                local room = event.room;
+                if room.jitsiMetadata.visitorsLive then
+                    go_live(room);
+                end
+            end
+        end);
+    end
 
     if always_visitors_enabled then
         local visitorsEnabledField = {
diff --git a/resources/prosody-plugins/token/util.lib.lua b/resources/prosody-plugins/token/util.lib.lua
index 498827a884..89e35e37d6 100644
--- a/resources/prosody-plugins/token/util.lib.lua
+++ b/resources/prosody-plugins/token/util.lib.lua
@@ -26,6 +26,24 @@ local ssl = require "ssl";
 -- TODO: Figure out a less arbitrary default cache size.
 local cacheSize = module:get_option_number("jwt_pubkey_cache_size", 128);
 
+-- the cache for generated asap jwt tokens
+local jwtKeyCache = require 'util.cache'.new(cacheSize);
+
+local ASAPTTL_THRESHOLD = module:get_option_number('asap_ttl_threshold', 600);
+local ASAPTTL = module:get_option_number('asap_ttl', 3600);
+local ASAPIssuer = module:get_option_string('asap_issuer', 'jitsi');
+local ASAPAudience = module:get_option_string('asap_audience', 'jitsi');
+local ASAPKeyId = module:get_option_string('asap_key_id', 'jitsi');
+local ASAPKeyPath = module:get_option_string('asap_key_path', '/etc/prosody/certs/asap.key');
+
+local ASAPKey;
+local f = io.open(ASAPKeyPath, 'r');
+module:log()
+if f then
+    ASAPKey = f:read('*all');
+    f:close();
+end
+
 local Util = {}
 Util.__index = Util
 
@@ -479,4 +497,48 @@ function Util:verify_room(session, room_address)
     end
 end
 
+function Util:generateAsapToken(audience)
+    if not ASAPKey then
+        module:log('warn', 'No ASAP Key read, asap key generation is disabled');
+        return ''
+    end
+
+    audience = audience or ASAPAudience
+    local t = os.time()
+    local err
+    local exp_key = 'asap_exp.'..audience
+    local token_key = 'asap_token.'..audience
+    local exp = jwtKeyCache:get(exp_key)
+    local token = jwtKeyCache:get(token_key)
+
+    --if we find a token and it isn't too far from expiry, then use it
+    if token ~= nil and exp ~= nil then
+        exp = tonumber(exp)
+        if (exp - t) > ASAPTTL_THRESHOLD then
+            return token
+        end
+    end
+
+    --expiry is the current time plus TTL
+    exp = t + ASAPTTL
+    local payload = {
+        iss = ASAPIssuer,
+        aud = audience,
+        nbf = t,
+        exp = exp,
+    }
+
+    -- encode
+    local alg = 'RS256'
+    token, err = jwt.encode(payload, ASAPKey, alg, { kid = ASAPKeyId })
+    if not err then
+        token = 'Bearer '..token
+        jwtKeyCache:set(exp_key, exp)
+        jwtKeyCache:set(token_key, token)
+        return token
+    else
+        return ''
+    end
+end
+
 return Util;