Merge pull request #228 from Azure-Samples/fixAdmitButton

Hide lobby admit/reject when user doesn't have ability to manage lobby
Azure-Samples · Jun 5, 2024 · af41c2c · af41c2c
2 parents 225d4a1 + 44f0c5f
commit af41c2c
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 45 deletions.
diff --git a/Project/src/App.css b/Project/src/App.css
@@ -1173,10 +1173,12 @@ div.volumeVisualizer::before {
   margin-top: 2px;
 }
 
-.lobby-action a{
-  display: inline-block;
-  color: #75b6e7;
-  text-decoration: none;
+.red-link {
+  color: red;
+}
+
+.green-link {
+  color: green;
 }
 
 .participantMenu, .participantMenu:hover{

diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
@@ -1131,7 +1131,7 @@ export default class CallCard extends React.Component {
                                 }
                             </div>
                             <div>
-                                <Lobby call={this.call}/>
+                                <Lobby call={this.call} capabilitiesFeature={this.capabilitiesFeature}/>
                             </div>
                             {
                                 this.state.dominantSpeakerMode &&
@@ -1152,6 +1152,7 @@ export default class CallCard extends React.Component {
                                             call={this.call}
                                             menuOptionsHandler={this.getParticipantMenuCallBacks()}
                                             onSelectionChanged={(identifier, isChecked) => this.remoteParticipantSelectionChanged(identifier, isChecked)}
+                                            capabilitiesFeature={this.capabilitiesFeature}
                                             />
                                     )
                                 }

diff --git a/Project/src/MakeCall/Lobby.js b/Project/src/MakeCall/Lobby.js
@@ -1,24 +1,34 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { PrimaryButton } from 'office-ui-fabric-react';
+import { Features } from '@azure/communication-calling';
 
 // Lobby react function component
-const Lobby = ({ call }) => {
-    const [lobby, setLobby] = useState(call.lobby);
-    const [lobbyParticipantsCount, setLobbyParticipantsCount] = useState(lobby.participants.length);
+export default class Lobby extends React.Component {
+    constructor(props) {
+        super(props);
+        this.call = props.call;
+        this.lobby = this.call.lobby;
+
+        this.capabilitiesFeature = props.capabilitiesFeature;
+        this.capabilities = this.capabilitiesFeature.capabilities;
+        this.state = {
+            canManageLobby: this.capabilities.manageLobby?.isPresent || this.capabilities.manageLobby?.reason === 'FeatureNotSupported',
+            lobbyParticipantsCount: this.lobby.participants.length
+        };
+    }
 
-    useEffect(() => {
-        return () => {
-            lobby?.off('lobbyParticipantsUpdated', lobbyParticipantsUpdatedHandler);
-        }
-    }, []);
+    componentWillUnmount() {
+        this.lobby?.off('lobbyParticipantsUpdated', () => { });
+    }
 
-    useEffect(() => {
-        lobby?.on('lobbyParticipantsUpdated', lobbyParticipantsUpdatedHandler);
-    }, [lobby]);
+    componentDidMount() {
+        this.lobby?.on('lobbyParticipantsUpdated', this.lobbyParticipantsUpdatedHandler);
+        this.capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChangedHandler);
+    }
 
-    const lobbyParticipantsUpdatedHandler = (event) => {
+    lobbyParticipantsUpdatedHandler = (event) => {
         console.log(`lobbyParticipantsUpdated, added=${event.added}, removed=${event.removed}`);
-        setLobbyParticipantsCount(lobby.participants.length);
+        this.state.lobbyParticipantsCount = this.lobby?.participants.length;
         if(event.added.length > 0) {
             event.added.forEach(participant => {
                 console.log('lobbyParticipantAdded', participant);
@@ -31,34 +41,52 @@ const Lobby = ({ call }) => {
         }
     };
 
-    const admitAllParticipants = async () => {
+    capabilitiesChangedHandler = (capabilitiesChangeInfo) => {
+        console.log('lobby:capabilitiesChanged');
+        for (const [key, value] of Object.entries(capabilitiesChangeInfo.newValue)) {
+            if(key === 'manageLobby' && value.reason != 'FeatureNotSupported') {
+                (value.isPresent) ? this.setState({ canManageLobby: true }) : this.setState({ canManageLobby: false });
+                const admitAllButton = document.getElementById('admitAllButton');
+                if(this.state.canManageLobby === true){
+                    admitAllButton.style.display = '';
+                } else {
+                    admitAllButton.style.display = 'none';
+                }
+                continue;
+            }
+        }
+    };
+
+    async admitAllParticipants() {
         console.log('admitAllParticipants');
         try {
-            await lobby.admitAll();
+            await this.lobby?.admitAll();
         } catch (e) {
             console.error(e);
         }
     }
 
-    return (
-        <div>
-            {
-                (lobbyParticipantsCount > 0) &&
-                <div className="ms-Grid-row">
-                    <div className="ml-2 inline-block">
-                        <div>In-Lobby participants number: {lobbyParticipantsCount}</div>
-                    </div>
-                    <div className="ml-4 inline-block">
-                        <PrimaryButton className="primary-button"
-                                        iconProps={{ iconName: 'Group', style: { verticalAlign: 'middle', fontSize: 'large' } }}
-                                        text="Admit All Participants"
-                                        onClick={admitAllParticipants}>
-                        </PrimaryButton>
+    render() {
+        return (
+            <div>
+                {
+                    (this.state.lobbyParticipantsCount > 0) &&
+                    <div className="ms-Grid-row">
+                        <div className="ml-2 inline-block">
+                            <div>In-Lobby participants number: {this.state.lobbyParticipantsCount}</div>
+                        </div>
+                        <div className="ml-4 inline-block">
+                            <PrimaryButton className="primary-button"
+                                            id="admitAllButton"
+                                            style={{ display: this.state.canManageLobby ? '' : 'none' }}
+                                            iconProps={{ iconName: 'Group', style: { verticalAlign: 'middle', fontSize: 'large' } }}
+                                            text="Admit All Participants"
+                                            onClick={() => this.admitAllParticipants()}>
+                            </PrimaryButton>
+                        </div>
                     </div>
-                </div>
-            }
-        </div>
-    );
-};
-
-export default Lobby;
+                }
+            </div>
+        );
+    }
+}
diff --git a/Project/src/MakeCall/RemoteParticipantCard.js b/Project/src/MakeCall/RemoteParticipantCard.js
@@ -23,6 +23,8 @@ export default class RemoteParticipantCard extends React.Component {
 
         this.spotlightFeature = this.call.feature(Features.Spotlight);
         this.raiseHandFeature = this.call.feature(Features.RaiseHand);
+        this.capabilitiesFeature = props.capabilitiesFeature;
+        this.capabilities = this.capabilitiesFeature.capabilities;
         this.menuOptionsHandler= props.menuOptionsHandler;
         this.state = {
             isSpeaking: this.remoteParticipant.isSpeaking,
@@ -32,6 +34,7 @@ export default class RemoteParticipantCard extends React.Component {
             participantIds: this.remoteParticipant.endpointDetails.map((e) => { return e.participantId }),
             isHandRaised: utils.isParticipantHandRaised(this.remoteParticipant.identifier, this.raiseHandFeature.getRaisedHands()),
             isSpotlighted: utils.isParticipantHandRaised(this.remoteParticipant.identifier, this.spotlightFeature.getSpotlightedParticipants()),
+            canManageLobby: this.capabilities.manageLobby?.isPresent || this.capabilities.manageLobby?.reason === 'FeatureNotSupported',
         };
     }
 
@@ -81,6 +84,21 @@ export default class RemoteParticipantCard extends React.Component {
         }
         this.raiseHandFeature.on("loweredHandEvent", isRaiseHandChangedHandler);
         this.raiseHandFeature.on("raisedHandEvent", isRaiseHandChangedHandler);
+        this.capabilitiesFeature.on('capabilitiesChanged', (capabilitiesChangeInfo) => {
+            for (const [key, value] of Object.entries(capabilitiesChangeInfo.newValue)) {
+                if(key === 'manageLobby' && value.reason != 'FeatureNotSupported') {
+                    (value.isPresent) ? this.setState({ canManageLobby: true }) : this.setState({ canManageLobby: false });
+                    let lobbyActions = document.getElementById('lobbyAction');
+                    if(this.state.canManageLobby === false){
+                        lobbyActions.hidden = true;
+                    }
+                    else{
+                        lobbyActions.hidden = false;
+                    }
+                    continue;
+                }
+            }
+        });
     }
 
     handleRemoveParticipant(e, identifier) {
@@ -190,9 +208,9 @@ export default class RemoteParticipantCard extends React.Component {
                         <div className="inline-block">
                         {
                             this.state.state === "InLobby" ?
-                                <div className="text-right lobby-action">
-                                    <a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3"> Admit Participant</a>
-                                    <a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3"> Reject Participant</a>
+                                <div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
+                                    <a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
+                                    <a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
                                 </div> :
                                 <div className="in-call-button inline-block"
                                     title={`Remove participant`}