Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding CoWebsiteManager + first working version of flex video

Browse source
This commit is contained in:
David Négrier 2020-08-13 18:21:48 +02:00
parent 83fe024c45
commit 9f6c6e0ce1
6 changed files with 326 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@ export enum DivImportance {
* This class is in charge of the video-conference layout.
* It receives positioning requests for videos and does its best to place them on the screen depending on the active layout mode.
*/
export class LayoutManager {
class LayoutManager {
private mode: LayoutMode = LayoutMode.Presentation;
private importantDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
@ -26,7 +26,7 @@ export class LayoutManager {
public add(importance: DivImportance, userId: string, html: string): void {
const div = document.createElement('div');
div.append(html);
div.innerHTML = html;
div.id = "user-"+userId;
if (importance === DivImportance.Important) {
@ -65,6 +65,7 @@ export class LayoutManager {
* Removes the DIV matching userId.
*/
public remove(userId: string): void {
console.log('Removing video for userID '+userId+'.');
let div = this.importantDivs.get(userId);
if (div !== undefined) {
div.remove();
@ -81,7 +82,8 @@ export class LayoutManager {
return;
}
throw new Error('Could not find user ID "'+userId+'"');
console.log('Cannot remove userID '+userId+'. Already removed?');
//throw new Error('Could not find user ID "'+userId+'"');
}
private adjustVideoChatClass(): void {
@ -104,6 +106,16 @@ export class LayoutManager {
private switchLayoutMode(layoutMode: LayoutMode) {
this.mode = layoutMode;
if (layoutMode === LayoutMode.Presentation) {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').style.display = 'block';
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section').style.display = 'block';
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode').style.display = 'none';
} else {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').style.display = 'none';
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section').style.display = 'none';
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode').style.display = 'block';
}
for (let div of this.importantDivs.values()) {
this.positionDiv(div, DivImportance.Important);
}
@ -112,3 +124,7 @@ export class LayoutManager {
}
}
}
const layoutManager = new LayoutManager();
export { layoutManager };