lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Adjusting class in chat mode based on number of divs displayed.

Browse source
This commit is contained in:
David Négrier 2020-08-11 22:40:54 +02:00
parent 7232bbaef9
commit 83fe024c45
1 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
front/src/WebRtc/LayoutManager.ts
View file

@ -43,6 +43,7 @@ export class LayoutManager {
}
this.positionDiv(div, importance);
this.adjustVideoChatClass();
}
private positionDiv(elem: HTMLDivElement, importance: DivImportance): void {
@ -68,6 +69,7 @@ export class LayoutManager {
if (div !== undefined) {
div.remove();
this.importantDivs.delete(userId);
this.adjustVideoChatClass();
return;
}
@ -75,12 +77,30 @@ export class LayoutManager {
if (div !== undefined) {
div.remove();
this.normalDivs.delete(userId);
this.adjustVideoChatClass();
return;
}
throw new Error('Could not find user ID "'+userId+'"');
}
private adjustVideoChatClass(): void {
const chatModeDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode');
chatModeDiv.classList.remove('one-col', 'two-col', 'three-col', 'four-col');
const nbUsers = this.importantDivs.size + this.normalDivs.size;
if (nbUsers <= 1) {
chatModeDiv.classList.add('one-col');
} else if (nbUsers <= 4) {
chatModeDiv.classList.add('two-col');
} else if (nbUsers <= 9) {
chatModeDiv.classList.add('three-col');
} else {
chatModeDiv.classList.add('four-col');
}
}
private switchLayoutMode(layoutMode: LayoutMode) {
this.mode = layoutMode;