Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revert "Allow updating of attendee capabilities in the demo (#2732)" … #2736

Merged
merged 1 commit into from
Aug 19, 2023
Merged

Revert "Allow updating of attendee capabilities in the demo (#2732)" … #2736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 10 additions & 88 deletions demos/browser/app/meetingV2/component/Roster.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,17 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

import {
DefaultModality
} from 'amazon-chime-sdk-js';

class Attendee {
name: string;
id: string;
name : string;
id : string;
muted: boolean;
signalStrength: number;
speaking: boolean;
isContentAttendee: boolean;

constructor(id: string, name: string) {
this.id = id;
constructor(name: string, id: string) {
this.name = name;
this.id = name;
this.signalStrength = 1;
this.isContentAttendee = new DefaultModality(id).hasModality(
DefaultModality.MODALITY_CONTENT
);
}
}

Expand All @@ -32,8 +24,6 @@ export default class Roster {
static readonly CONTAINER_ID = 'roster';

attendeeInfoMap: Map<string, Attendee> = new Map<string, Attendee>();

selectedAttendeeSet = new Set<Attendee>();

/**
* Returns a boolean indicating if the attendeeId is part of the roster or not.
Expand All @@ -59,7 +49,7 @@ export default class Roster {
* @param attendeeId - the id to be associated with the attendee
* @param attendeeName - the name of the attendee
*/
addAttendee(attendeeId: string, attendeeName: string, allowAttendeeCapabilities: boolean): void {
addAttendee(attendeeId: string, attendeeName: string): void {
if (this.hasAttendee(attendeeId)) {
return;
}
Expand All @@ -70,32 +60,14 @@ export default class Roster {
const attendeeElement : HTMLLIElement = document.createElement('li') as HTMLLIElement;
const attendeeNameElement: HTMLSpanElement = document.createElement('span') as HTMLSpanElement;
const attendeeStatusElement: HTMLSpanElement = document.createElement('span') as HTMLSpanElement;
const attendeeCheckbox: HTMLInputElement = document.createElement('input') as HTMLInputElement;

// For the content attendee, set it to invisible to maintain the layout.
attendeeCheckbox.className = 'roster-checkbox form-check-input m-0 flex-shrink-0 ' + (attendee.isContentAttendee ? ' invisible' : '');
attendeeCheckbox.type = 'checkbox';
attendeeCheckbox.value = '';
attendeeCheckbox.addEventListener('change', () => {
if (attendeeCheckbox.checked) {
this.selectedAttendeeSet.add(attendee);
} else {
this.selectedAttendeeSet.delete(attendee);
}
this.updateRosterMenu();
});

attendeeNameElement.className = 'name flex-grow-1 text-truncate';

attendeeNameElement.className = 'name';
attendeeNameElement.innerText = attendeeName;

attendeeStatusElement.className = 'status';
attendeeElement.className = 'list-group-item d-flex align-items-center gap-2';

attendeeElement.className = 'list-group-item d-flex justify-content-between align-items-center';
attendeeElement.id = Roster.ATTENDEE_ELEMENT_PREFIX + attendeeId;
if (allowAttendeeCapabilities) {
attendeeElement.classList.add('ps-2');
attendeeElement.appendChild(attendeeCheckbox);
}
attendeeElement.appendChild(attendeeNameElement);
attendeeElement.appendChild(attendeeStatusElement);

Expand All @@ -120,9 +92,6 @@ export default class Roster {
const childToDelete = document.getElementById(Roster.ATTENDEE_ELEMENT_PREFIX + attendeeId) as HTMLLIElement;
containerElement.removeChild(childToDelete);

this.selectedAttendeeSet.delete(this.attendeeInfoMap.get(attendeeId));
this.updateRosterMenu();

this.attendeeInfoMap.delete(attendeeId);
return true;
}
Expand Down Expand Up @@ -176,16 +145,6 @@ export default class Roster {
const container: HTMLUListElement = this.getContainerElement();
container.innerHTML = "";
this.attendeeInfoMap.clear();

this.unselectAll();
}

unselectAll() {
this.selectedAttendeeSet.clear();
this.updateRosterMenu();
for (const checkboxElement of (Array.from(document.getElementsByClassName('roster-checkbox')) as HTMLInputElement[])) {
checkboxElement.checked = false;
}
}

private getContainerElement(): HTMLUListElement {
Expand Down Expand Up @@ -214,41 +173,4 @@ export default class Roster {
attendeeStatusElement.className = statusClass;
attendeeStatusElement.innerText = statusText;
}

private updateRosterMenu(): void {
const instruction = document.getElementById('roster-menu-instruction');
const rosterMenuOneAttendee = document.getElementById('roster-menu-one-attendee');
const rosterMenuNoneSelected = document.getElementById('roster-menu-none-seleced');
const rosterMenuAllAttendeesExcept = document.getElementById('roster-menu-all-attendees-except');
const rosterMenuAllAttendeesExceptLabel = document.getElementById('roster-menu-all-attendees-except-label');

const size = this.selectedAttendeeSet.size;
if (size > 0) {
instruction.innerText = `${size} selected`;
rosterMenuNoneSelected.classList.add('hidden');
rosterMenuAllAttendeesExceptLabel.innerText = `Update all attendees, except ${size} selected`;

if (size === 1) {
// If one attendee is selected, provide two options:
// - Update one attendee only, using the update-attendee-capabilities API
// - Update all attendees, except the selected one, using the batch-update-attendee-capabilities-except API
rosterMenuOneAttendee.classList.remove('hidden');
rosterMenuAllAttendeesExcept.classList.remove('hidden');
} else if (size > 1) {
// If multiple attendees are selected, provide the following option:
// - Update all attendees, except the selected one, using the batch-update-attendee-capabilities-except API
rosterMenuOneAttendee.classList.add('hidden');
rosterMenuAllAttendeesExcept.classList.remove('hidden');
}
} else {
instruction.innerText = '';
rosterMenuAllAttendeesExceptLabel.innerText = `Update all attendees`;

// If none are selected, show the instruction.
rosterMenuNoneSelected.classList.remove('hidden');
rosterMenuOneAttendee.classList.add('hidden');
rosterMenuAllAttendeesExcept.classList.add('hidden');
}

}
}
120 changes: 0 additions & 120 deletions demos/browser/app/meetingV2/meetingV2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,33 +116,6 @@ <h5 class="modal-title" id="additional-options-modal-label">Additional Options</
</select>
<label for="videoCodec" style="text-align: left;">Preferred Video Send Codec:</label>
</div>
<div class="form-floating mb-3">
<select name="audioCapability" class="form-select" id="audioCapabilitySelect">
<option value="SendReceive">SendReceive</option>
<option value="Send">Send</option>
<option value="Receive">Receive</option>
<option value="None">None</option>
</select>
<label for="audioCapability" style="text-align: left;">Audio capability:</label>
</div>
<div class="form-floating mb-3">
<select name="videoCapability" class="form-select" id="videoCapabilitySelect">
<option value="SendReceive">SendReceive</option>
<option value="Send">Send</option>
<option value="Receive">Receive</option>
<option value="None">None</option>
</select>
<label for="videoCapability" style="text-align: left;">Video capability:</label>
</div>
<div class="form-floating mb-3">
<select name="contentCapability" class="form-select" id="contentCapabilitySelect">
<option value="SendReceive">SendReceive</option>
<option value="Send">Send</option>
<option value="Receive">Receive</option>
<option value="None">None</option>
</select>
<label for="contentCapability" style="text-align: left;">Content capability:</label>
</div>
<div class="form-check" style="text-align: left;">
<input type="checkbox" id="join-muted" class="form-check-input"></input>
<label for="join-muted-setting" class="form-check-label">Join Muted</label>
Expand Down Expand Up @@ -226,10 +199,6 @@ <h5 class="modal-title" id="additional-options-modal-label">Additional Options</
<input type="checkbox" id="disable-content-keyframe" class="form-check-input">
<label for="disable-content-keyframe" class="form-check-label">Disable periodic keyframe request to content senders</label>
</div>
<div class="form-check" style="text-align: left;">
<input type="checkbox" id="allow-attendee-capabilities" class="form-check-input">
<label for="allow-attendee-capabilities" class="form-check-label">Allow updating of attendee capabilities after start</label>
</div>
<div class="form-check" style="text-align: left;">
<input type="checkbox" id="die" class="form-check-input" checked=true>
<label for="die" class="form-check-label">Abort on fatal errors</label>
Expand Down Expand Up @@ -780,47 +749,6 @@ <h1 class="h3 mb-3 font-weight-normal text-center">Select devices</h1>
</div>
<div id="roster-tile-container" class="row flex-sm-grow-1 overflow-hidden h-100" style="flex: unset;">
<div id="roster-message-container" class="d-flex flex-column col-12 col-sm-5 col-md-4 col-lg-3 h-100">
<div id="roster-menu-container" class="justify-content-end py-2 gap-3" style="flex: 0 0 auto; border-color: transparent !important;">
<div id="roster-menu-instruction" class="d-flex align-items-center"></div>
<div class="btn-group">
<button class="btn btn-sm dropdown-toggle btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<%= require('../../node_modules/open-iconic/svg/ellipses.svg') %>
</button>
<ul class="dropdown-menu dropdown-menu-start">
<li class="px-3 text-nowrap user-select-none">Attendee capabilities</li>
<li><hr class="dropdown-divider"></li>
<li id="roster-menu-none-seleced">
<div class="px-3 text-nowrap text-muted">Select one or more attendees to update.</div>
</li>
<li id="roster-menu-one-attendee" class="hidden">
<button
class="dropdown-item"
type="button"
data-bs-target="#attendee-capabilities-modal"
data-bs-toggle="modal"
data-bs-type="one-attendee">
<div class="me-2 d-inline-block" style="transform: scale(0.75);">
<%= require('../../node_modules/open-iconic/svg/person.svg') %>
</div>
<span>Update the selected attendee</span>
</button>
</li>
<li id="roster-menu-all-attendees-except" class="hidden">
<button
class="dropdown-item"
type="button"
data-bs-target="#attendee-capabilities-modal"
data-bs-toggle="modal"
data-bs-type="all-attendees-except">
<div class="me-2 d-inline-block" style="transform: scale(0.75);">
<%= require('../../node_modules/open-iconic/svg/people.svg') %>
</div>
<span id="roster-menu-all-attendees-except-label"></span>
</button>
</li>
</ul>
</div>
</div>
<div class="bs-component" style="flex: 1 1 auto; overflow-y: auto; height: 50%;">
<ul id="roster" class="list-group"></ul>
</div>
Expand Down Expand Up @@ -943,53 +871,5 @@ <h4 class="card-title">Unable to join meeting</h4>
</form>
</div>
</div>

<!-- Attendee capabilities modal -->

<div class="modal fade" id="attendee-capabilities-modal" tabindex="-1"
aria-labelledby="attendee-capabilities-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="attendee-capabilities-modal-label">Attendee capabilities</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating mb-3">
<div id="attendee-capabilities-modal-description" class="text-wrap text-break"></div>
</div>
<div class="form-floating mb-3">
<select name="audioCapability" class="form-select" id="attendee-capabilities-modal-audio-select">
<option value="SendReceive">SendReceive</option>
<option value="Send">Send</option>
<option value="Receive">Receive</option>
<option value="None">None</option>
</select>
<label for="audioCapability" style="text-align: left;">Audio capability:</label>
</div>
<div class="form-floating mb-3">
<select name="videoCapability" class="form-select" id="attendee-capabilities-modal-video-select">
<option value="SendReceive">SendReceive</option>
<option value="Send">Send</option>
<option value="Receive">Receive</option>
<option value="None">None</option>
</select>
<label for="videoCapability" style="text-align: left;">Video capability:</label>
</div>
<div class="form-floating mb-3">
<select name="contentCapability" class="form-select" id="attendee-capabilities-modal-content-select">
<option value="SendReceive">SendReceive</option>
<option value="Send">Send</option>
<option value="Receive">Receive</option>
<option value="None">None</option>
</select>
<label for="contentCapability" style="text-align: left;">Content capability:</label>
</div>
</div>
<button type="button" class="btn btn-primary" id="attendee-capabilities-save-button">Save</button>
</div>
</div>
</div>

</body>
</html>
Loading
Loading