diff --git a/Project/src/App.css b/Project/src/App.css index a71958a..2dcbd3f 100644 --- 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 index c6fd1a9..2d69921 100644 --- a/Project/src/MakeCall/CallCard.js +++ b/Project/src/MakeCall/CallCard.js @@ -1131,7 +1131,7 @@ export default class CallCard extends React.Component { }
- +
{ 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 index 1a2de8d..535898b 100644 --- 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 ( -
- { - (lobbyParticipantsCount > 0) && -
-
-
In-Lobby participants number: {lobbyParticipantsCount}
-
-
- - + render() { + return ( +
+ { + (this.state.lobbyParticipantsCount > 0) && +
+
+
In-Lobby participants number: {this.state.lobbyParticipantsCount}
+
+
+ this.admitAllParticipants()}> + +
-
- } -
- ); -}; - -export default Lobby; + } +
+ ); + } +} diff --git a/Project/src/MakeCall/RemoteParticipantCard.js b/Project/src/MakeCall/RemoteParticipantCard.js index a31b723..a76a8d1 100644 --- 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 {
{ this.state.state === "InLobby" ? -
- this.admitParticipant(e)} className="float-right ml-3"> Admit Participant - this.rejectParticipant(e)} className="float-right ml-3"> Reject Participant + :