diff --git a/Project/src/MakeCall/AddParticipantPopover.js b/Project/src/MakeCall/AddParticipantPopover.js
index 2698024..55b2b66 100644
--- a/Project/src/MakeCall/AddParticipantPopover.js
+++ b/Project/src/MakeCall/AddParticipantPopover.js
@@ -1,6 +1,5 @@
import React, { useState } from "react";
-import { TextField } from 'office-ui-fabric-react';
-import { Button } from 'office-ui-fabric-react'
+import { PrimaryButton, TextField } from 'office-ui-fabric-react';
import { CallKind } from "@azure/communication-calling";
import { createIdentifierFromRawId } from '@azure/communication-common';
@@ -8,7 +7,6 @@ export default function AddParticipantPopover({call}) {
const [userId, setUserId] = useState('');
const [threadId, setThreadId] = useState('');
const [alternateCallerId, setAlternateCallerId] = useState('');
- const [showAddParticipantPanel, setShowAddParticipantPanel] = useState(false);
function handleAddParticipant() {
console.log('handleAddParticipant', userId);
@@ -31,42 +29,31 @@ export default function AddParticipantPopover({call}) {
}
}
- function toggleAddParticipantPanel() {
- setShowAddParticipantPanel(!showAddParticipantPanel);
- }
-
return (
- <>
-
Participants
-
- {
- showAddParticipantPanel &&
-
-
Add a participant
-
- setUserId(e.target.value)} />
- {
- call._kind === CallKind.TeamsCall &&
- setThreadId(e.target.value)} />
- }
- {
- call._kind === CallKind.Call &&
- setAlternateCallerId(e.target.value)} />
- }
-
- {
- call._kind === CallKind.Call &&
- < Button className="mt-1" onClick={handleAddPhoneNumber}>Add Phone Number
- }
-
+
+
Add a participant
+
+
setUserId(e.target.value)} />
+ {
+ call._kind === CallKind.TeamsCall &&
+ setThreadId(e.target.value)} />
+ }
+ {
+ call._kind === CallKind.Call &&
+ setAlternateCallerId(e.target.value)} />
+ }
+ Add Participant
+ {
+ call._kind === CallKind.Call &&
+ < PrimaryButton className="secondary-button mt-1" onClick={handleAddPhoneNumber}>Add Phone Number
+ }
- }
+
- >
);
}
\ No newline at end of file
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index f726e51..d6b27e2 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -19,6 +19,7 @@ import CurrentCallInformation from "./CurrentCallInformation";
import DataChannelCard from './DataChannelCard';
import CallCaption from "./CallCaption";
import { ParticipantMenuOptions } from './ParticipantMenuOptions';
+
export default class CallCard extends React.Component {
constructor(props) {
super(props);
@@ -37,6 +38,7 @@ export default class CallCard extends React.Component {
this.spotlightFeature = this.call.feature(Features.Spotlight);
this.raiseHandFeature = this.call.feature(Features.RaiseHand);
this.capabilitiesFeature = this.call.feature(Features.Capabilities);
+ this.dominantSpeakersFeature = this.call.feature(Features.DominantSpeakers);
this.identifier = props.identityMri;
this.isTeamsUser = props.isTeamsUser;
this.dummyStreamTimeout = undefined;
@@ -78,7 +80,10 @@ export default class CallCard extends React.Component {
mediaCollector: undefined,
isSpotlighted: false,
isHandRaised: false,
- showParticipantsCard: true
+ dominantSpeakersListActive: false,
+ dominantSpeakers:[],
+ showDataChannel: false,
+ showAddParticipantPanel: false
};
this.selectedRemoteParticipants = new Set();
this.dataChannelRef = React.createRef();
@@ -102,6 +107,7 @@ export default class CallCard extends React.Component {
this.call.feature(Features.Spotlight).off('spotlightChanged', this.spotlightStateChangedHandler);
this.call.feature(Features.RaiseHand).off('raisedHandEvent', this.raiseHandChangedHandler);
this.call.feature(Features.RaiseHand).off('loweredHandEvent', this.raiseHandChangedHandler);
+ this.dominantSpeakersFeature.off('dominantSpeakersChanged', this.dominantSpeakersChanged);
}
componentDidMount() {
@@ -392,6 +398,7 @@ export default class CallCard extends React.Component {
this.raiseHandFeature.on("loweredHandEvent", this.raiseHandChangedHandler);
this.raiseHandFeature.on("raisedHandEvent", this.raiseHandChangedHandler);
this.capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChangedHandler);
+ this.dominantSpeakersFeature.on('dominantSeapkersChanged', this.dominantSpeakersChanged);
}
}
@@ -482,6 +489,16 @@ export default class CallCard extends React.Component {
}
}
+ dominantSpeakersChanged = () => {
+ const dominantSpeakersMris = this.dominantSpeakersFeature.dominantSpeakers.speakersList;
+ const remoteParticipants = dominantSpeakersMris.map(dominantSpeakerMri => {
+ const remoteParticipant = utils.getRemoteParticipantObjFromIdentifier(this.call, dominantSpeakerMri);
+ return remoteParticipant;
+ });
+
+ this.setState({dominantSpeakers: remoteParticipants});
+ }
+
async handleVideoOnOff() {
try {
if (!this.state.videoOn) {
@@ -593,17 +610,24 @@ export default class CallCard extends React.Component {
}));
}
- async handleMediaStatsLogState() {
+ async handleDominantSpeakersListActive() {
+ if (this.state.dominantSpeakersListActive) {
+ this.dominantSpeakersFeature.off('dominantSpeakersChanged', this.dominantSpeakersChanged)
+ } else {
+ this.dominantSpeakersFeature.on('dominantSpeakersChanged', this.dominantSpeakersChanged)
+ this.dominantSpeakersChanged();
+ }
+
this.setState(prevState => ({
...prevState,
- logMediaStats: !prevState.logMediaStats
+ dominantSpeakersListActive: !prevState.dominantSpeakersListActive
}));
}
- async toggleParticipantsCard() {
+ async handleMediaStatsLogState() {
this.setState(prevState => ({
...prevState,
- showParticipantsCard: !prevState.showParticipantsCard
+ logMediaStats: !prevState.logMediaStats
}));
}
@@ -918,6 +942,19 @@ export default class CallCard extends React.Component {
}
+
this.setState({showAddParticipantPanel: !this.state.showAddParticipantPanel})}>
+ {
+ this.state.showAddParticipantPanel &&
+
+ }
+ {
+ !this.state.showAddParticipantPanel &&
+
+ }
+
this.handleMediaStatsLogState()}>
+ onClick={() => { this.setState({ captionOn: !this.state.captionOn })}}>
{
- this.state.logMediaStats &&
-
+ this.state.captionOn &&
+
}
{
- !this.state.logMediaStats &&
-
+ !this.state.captionOn &&
+
+ }
+
+ { this.setState({ showDataChannel: !this.state.showDataChannel })}}>
+ {
+ this.state.showDataChannel &&
+
+ }
+ {
+ !this.state.showDataChannel &&
+
}
this.toggleParticipantsCard()}>
+ onClick={() => this.handleDominantSpeakersListActive()}>
{
- this.state.showParticipantsCard &&
-
+ this.state.dominantSpeakersListActive &&
+
}
{
- !this.state.showParticipantsCard &&
+ !this.state.dominantSpeakersListActive &&
}
+ this.toggleDominantSpeakerMode()}>
+ {
+ this.state.dominantSpeakerMode &&
+
+ }
+ {
+ !this.state.dominantSpeakerMode &&
+
+ }
+
+ this.handleMediaStatsLogState()}>
+ {
+ this.state.logMediaStats &&
+
+ }
+ {
+ !this.state.logMediaStats &&
+
+ }
+
}
- { this.state.localScreenSharingMode &&
+ {
+ this.state.localScreenSharingMode &&
Local screen sharing preview
@@ -1183,86 +1260,93 @@ export default class CallCard extends React.Component {
}
- {
- this.state.callState === 'Connected' && this.state.showParticipantsCard &&
-
-
-
- Dominant Speaker mode{' '}
-
-
-
-
- }
- styles={{
- text: { color: '#edebe9' },
- label: { color: '#edebe9' },
- }}
- inlineLabel
- onText="On"
- offText="Off"
- onChange={() => { this.toggleDominantSpeakerMode() }}
- />
- {
- this.state.dominantSpeakerMode &&
-
- Current dominant speaker: {this.state.dominantRemoteParticipant ? utils.getIdentifierText(this.state.dominantRemoteParticipant.identifier) : `None`}
-
- }
-
- {
- this.state.remoteParticipants.length === 0 &&
-
No other participants currently in the call
- }
-
- {
- this.state.remoteParticipants.map(remoteParticipant =>
- this.remoteParticipantSelectionChanged(identifier, isChecked)}
- />
- )
- }
-
+ { this.state.dominantSpeakersListActive &&
+
+
+
Dominant Speakers
-
-
+ {
+ this.state.dominantSpeakers.map((dominantSpeaker, index) =>
+
- Caption{' '}
-
-
-
+ Index {index}
- }
- styles={{
- text : { color: '#edebe9' },
- label: { color: '#edebe9' },
- }}
- inlineLabel
- onText="On"
- offText="Off"
- defaultChecked={this.state.captionOn}
- onChange={() => { this.setState({ captionOn: !this.state.captionOn })}}
- />
-
- {
- this.state.captionOn &&
-
- }
+
+ mri: {utils.getIdentifierText(dominantSpeaker.identifier)}
+
+
+ displayName: {dominantSpeaker.displayName ?? 'None'}
+
+
+ )
+ }
+
+
+ }
+ {
+ this.state.captionOn &&
+
+
+
Captions
+
+ {
+ this.state.captionOn &&
+
+ }
+
+
+ }
+ {
+ this.state.showDataChannel &&
+
+
Data Channel
+
+
{
this.state.callState === 'Connected' &&
}
+ }
+ {
+ this.state.callState === 'Connected' &&
+
+
+
Participants
+
+
+ { this.state.showAddParticipantPanel &&
+
+ }
+
+ {
+ this.state.dominantSpeakerMode &&
+
+ Current dominant speaker: {this.state.dominantRemoteParticipant ? utils.getIdentifierText(this.state.dominantRemoteParticipant.identifier) : `None`}
+
+ }
+ {
+ this.state.remoteParticipants.length === 0 &&
+
No other participants currently in the call
+ }
+
+ {
+ this.state.remoteParticipants.map(remoteParticipant =>
+ this.remoteParticipantSelectionChanged(identifier, isChecked)}
+ />
+ )
+ }
+
+
}
diff --git a/Project/src/MakeCall/DataChannelCard.js b/Project/src/MakeCall/DataChannelCard.js
index 78a6a4d..694ee7c 100644
--- a/Project/src/MakeCall/DataChannelCard.js
+++ b/Project/src/MakeCall/DataChannelCard.js
@@ -104,8 +104,7 @@ export default class DataChannelCard extends React.Component {
return (
-
DataChannel
-
when no remote participant checkbox is selected, message will broadcast in the channel
+
When no remote participant checkbox is selected, message will broadcast in the channel
this.sendMessage()}>
diff --git a/Project/src/MakeCall/Login.js b/Project/src/MakeCall/Login.js
index 02a8076..bcc1513 100644
--- a/Project/src/MakeCall/Login.js
+++ b/Project/src/MakeCall/Login.js
@@ -565,12 +565,12 @@ const isSupportedEnvironment = this.environmentInfo.isSupportedEnvironment;
User Identity Provisioning and Calling SDK Initialization
-
this.setState({showCallClientOptions: !this.state.showCallClientOptions})}>
-
this.setState({showUserProvisioningAndSdkInitializationCode: !this.state.showUserProvisioningAndSdkInitializationCode})}>
diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js
index 3ecd7c9..ca68d6e 100644
--- a/Project/src/MakeCall/MakeCall.js
+++ b/Project/src/MakeCall/MakeCall.js
@@ -792,19 +792,19 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
this.setState({ showCallSampleCode: !this.state.showCallSampleCode })}>
@@ -1035,14 +1035,14 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
Pre Call Diagnostics
this.runPreCallDiagnostics()}>
this.setState({ showPreCallDiagnosticsSampleCode: !this.state.showPreCallDiagnosticsSampleCode })}>
@@ -1173,7 +1173,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
Video, Screen sharing, and local video preview
this.setState({ showStreamingSampleCode: !this.state.showStreamingSampleCode })}>
@@ -1211,7 +1211,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
Mute / Unmute
this.setState({ showMuteUnmuteSampleCode: !this.state.showMuteUnmuteSampleCode })}>
@@ -1241,7 +1241,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
Hold / Unhold
this.setState({ showHoldUnholdSampleCode: !this.state.showHoldUnholdSampleCode })}>
@@ -1271,7 +1271,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
Device Manager
this.setState({ showDeviceManagerSampleCode: !this.state.showDeviceManagerSampleCode })}>
diff --git a/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js b/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
index f33c347..d4636d6 100644
--- a/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
+++ b/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
@@ -178,7 +178,7 @@ export default class CustomVideoEffects extends React.Component {
return
this.addEffect(e)}
disabled={this.state.buttons[obj].disabled}>
{this.state.buttons[obj].label}
diff --git a/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js b/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
index c275934..e508e7c 100644
--- a/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
+++ b/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
@@ -176,14 +176,14 @@ export default class VideoEffectsContainer extends React.Component {
styles={{ dropdown: { width: 300, color: 'black' } }}
/>
this.startEffects()}
>
{this.state.startEffectsLoading ? : 'Start Effects'}
this.stopEffects()}
>
{this.state.stopEffectsLoading ? : 'Stop Effects'}