Skip to content

Commit

Permalink
Merge pull request #157 from Azure-Samples/chwhilar/dominant-speakers…
Browse files Browse the repository at this point in the history 
…-button

clean up
  • Loading branch information
@chriswhilar
chriswhilar authored Aug 22, 2023
2 parents 2a84abc + 4a08260 commit 3017241
Show file tree
Hide file tree
Showing 9 changed files with 255 additions and 172 deletions.
83 changes: 48 additions & 35 deletions Project/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,17 @@ h3,
h4,
h5,
h6 {
font-weight: 500;
font-weight: 400;
margin-top: 0;
margin-bottom: .5rem;
}

.header {
padding-top: 2em;
padding-top: 3em;
padding-bottom: 2em;
margin-left: 1em;
margin-right: 1em;
border-bottom: 1px solid #414141;
}

.sdk-docs-header {
Expand All @@ -60,7 +62,7 @@ input:disabled {

.loader {
border: 5px solid #edebe9;
border-top: 5px solid #ca5010;
border-top: 5px solid #b9692f;
border-radius: 50%;
width: 20px;
height: 20px;
Expand All @@ -69,7 +71,7 @@ input:disabled {

.ringing-loader {
border: 5px solid #edebe9;
border-top: 5px solid #ca5010;
border-top: 5px solid #b9692f;
border-radius: 50%;
width: 30px;
height: 30px;
Expand Down Expand Up @@ -98,7 +100,7 @@ input:disabled {
}

.identity {
color: #ca5010
color: #b9692f
}

.ListGroup {
Expand All @@ -118,7 +120,7 @@ button:focus {
.card {
background-color: #201f1e;
border: 1px solid #605e5c;
border-radius: 0px;
border-radius: 1em;
padding: 3em;
margin-top: 3em;
}
Expand All @@ -131,12 +133,6 @@ ul {
list-style-type: none;
}

.participants-panel {
padding: 1em;
border: 1px solid #605e5c;
width: fit-content;
}

.pre-call-grid-container {
display: flex;
flex-wrap: wrap;
Expand All @@ -162,15 +158,11 @@ ul {
width: 8em
}

/* Dominant Speaker switch*/
.ms-Toggle-background[aria-checked="true"],
.ms-Toggle-background[aria-checked="true"]:hover {
background-color: #ca5010
}

.participants-panel-title {
margin-top: 1em;
;
.participants-panel {
max-height: 60em;
overflow-y: auto;
padding: 1em;
width: fit-content;
}

.participants-panel-list {
Expand Down Expand Up @@ -253,17 +245,18 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
}

.primary-button {
height: 2.75em;
color: #edebe9;
background-color: #ca5010;
border: 1px solid #ca5010;
background-color: #201f1e;
border: 1px solid #916546;
outline: none;
margin-right: 1em;
margin-bottom: 1em;
}

.primary-button:hover {
background-color: #8e562e;
border: 1px solid #8e562e;
background-color: #201f1e;
border: 1px solid #916546;
}

.primary-button:disabled {
Expand All @@ -273,6 +266,21 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
color: #000000;
}

.secondary-button {
height: 2.75em;
color: #edebe9;
background-color: #201f1e;
border: 1px solid #4b4a48;
outline: none;
margin-right: 1em;
margin-bottom: 1em;
}

.secondary-button:hover {
background-color: #201f1e;
border: 1px solid #4b4a48;
}

.call-input-panel {
padding: 0 2em;
}
Expand All @@ -282,7 +290,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
padding-bottom: 0.4em;
padding-right: 0.4em;
padding-left: 0.4em;
font-size: x-large;
font-size: 2em;
}

.incoming-call-button,
Expand Down Expand Up @@ -360,11 +368,11 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
}

.speaking-border-for-initials>.ms-Persona-coin>.ms-Persona-imageArea>.ms-Persona-initials {
box-shadow: 0px 0px 0px 3px #ca5010, 0px 0px 20px 5px #ca5010;
box-shadow: 0px 0px 0px 3px #b9692f, 0px 0px 20px 5px #b9692f;
}

.speaking-border-for-video {
box-shadow: 0px 0px 0px 3px #ca5010;
box-shadow: 0px 0px 0px 3px #b9692f;
}

.remote-video-container {
Expand All @@ -380,7 +388,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
.remote-video-loading-spinner {
border: 12px solid #f3f3f3;
border-radius: 50%;
border-top: 12px solid #ca5010;
border-top: 12px solid #b9692f;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
Expand Down Expand Up @@ -976,7 +984,7 @@ div.callDebugInfoJSONStringDiv {
.remote-video-loading-spinner {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #ca5010;
border-top: 8px solid #b9692f;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite;
Expand All @@ -995,7 +1003,7 @@ div.callDebugInfoJSONStringDiv {
.video-effects-loading-spinner {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #ca5010;
border-top: 8px solid #b9692f;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
Expand Down Expand Up @@ -1058,7 +1066,7 @@ div.volumeVisualizer::before {
bottom: 0;
left: 0;
width: var(--volume);
background-color: #ca5010;
background-color: #b9692f;
transition: width 100ms linear;
}

Expand Down Expand Up @@ -1118,7 +1126,7 @@ div.volumeVisualizer::before {
}

.spotlightEnabled {
border: 1px solid #ca5010;
border: 1px solid #b9692f;
}

.lobby-action{
Expand All @@ -1127,7 +1135,7 @@ div.volumeVisualizer::before {

.lobby-action a{
display: inline-block;
color: #ca5010;
color: #b9692f;
text-decoration: none;
}

Expand All @@ -1144,5 +1152,10 @@ div.volumeVisualizer::before {
}

.callFeatureEnabled, .callFeatureEnabled:hover {
color: #ca5010;
color: #b9692f;
}

.dominant-speakers-list {
max-height: 8em;
overflow-y: auto;
}
4 changes: 2 additions & 2 deletions Project/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ function App() {
<div className="header ms-Grid">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-lg6">
<h2>
<h1>
Azure Communication Services - Calling SDK for Javascript - { VWebSdkVersion() }
</h2>
</h1>
</div>
<div className="ms-Grid-col ms-lg6">
<div className="sdk-docs-header">
Expand Down
51 changes: 19 additions & 32 deletions Project/src/MakeCall/AddParticipantPopover.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
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';

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);
Expand All @@ -31,42 +29,31 @@ export default function AddParticipantPopover({call}) {
}
}

function toggleAddParticipantPanel() {
setShowAddParticipantPanel(!showAddParticipantPanel);
}

return (
<>
<span><h3>Participants</h3></span>
<span><a href="#" onClick={toggleAddParticipantPanel}><i className="add-participant-button ms-Icon ms-Icon--AddFriend" aria-hidden="true"></i></a></span>
<div className="ms-Grid">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-lg12">
{
showAddParticipantPanel &&
<div className="add-participant-panel">
<h3 className="add-participant-panel-header">Add a participant</h3>
<div className="add-participant-panel-header">
<TextField className="text-left" label="Identifier" onChange={e => setUserId(e.target.value)} />
{
call._kind === CallKind.TeamsCall &&
<TextField className="text-left" label="Thread Id (Needed if SDK is initialized for Teams User )" onChange={e => setThreadId(e.target.value)} />
}
{
call._kind === CallKind.Call &&
<TextField className="text-left" label="Alternate Caller Id (For adding phone number only)" onChange={e => setAlternateCallerId(e.target.value)} />
}
<Button className="mt-3" onClick={handleAddParticipant}>Add Participant</Button>
{
call._kind === CallKind.Call &&
< Button className="mt-1" onClick={handleAddPhoneNumber}>Add Phone Number</Button>
}
</div>
<div className="add-participant-panel">
<h3 className="add-participant-panel-header">Add a participant</h3>
<div className="add-participant-panel-header">
<TextField className="text-left" label="Identifier" onChange={e => setUserId(e.target.value)} />
{
call._kind === CallKind.TeamsCall &&
<TextField className="text-left" label="Thread Id (Needed if SDK is initialized for Teams User )" onChange={e => setThreadId(e.target.value)} />
}
{
call._kind === CallKind.Call &&
<TextField className="text-left" label="Alternate Caller Id (For adding phone number only)" onChange={e => setAlternateCallerId(e.target.value)} />
}
<PrimaryButton className="secondary-button mt-3" onClick={handleAddParticipant}>Add Participant</PrimaryButton>
{
call._kind === CallKind.Call &&
< PrimaryButton className="secondary-button mt-1" onClick={handleAddPhoneNumber}>Add Phone Number</PrimaryButton>
}
</div>
}
</div>
</div>
</div>
</div>
</>
);
}
Loading

0 comments on commit 3017241

Please sign in to comment.