workadventure/front/src/WebRtc/LayoutManager.ts

312 lines
12 KiB
TypeScript
Raw Normal View History

import {HtmlUtils} from "./HtmlUtils";
export enum LayoutMode {
// All videos are displayed on the right side of the screen. If there is a screen sharing, it is displayed in the middle.
Presentation = "Presentation",
// Videos take the whole page.
VideoChat = "VideoChat",
}
export enum DivImportance {
// For screen sharing
Important = "Important",
// For normal video
Normal = "Normal",
}
/**
* Classes implementing this interface can be notified when the center of the screen (the player position) should be
* changed.
*/
export interface CenterListener {
onCenterChange(): void;
}
/**
* 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.
*/
class LayoutManager {
private mode: LayoutMode = LayoutMode.Presentation;
private importantDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
private normalDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
private listener: CenterListener|null = null;
public setListener(centerListener: CenterListener|null) {
this.listener = centerListener;
}
public add(importance: DivImportance, userId: string, html: string): void {
const div = document.createElement('div');
div.innerHTML = html;
div.id = "user-"+userId;
2020-08-16 23:45:03 +02:00
div.className = "media-container"
div.onclick = () => {
const parentId = div.parentElement?.id;
if (parentId === 'sidebar' || parentId === 'chat-mode') {
this.focusOn(userId);
} else {
this.removeFocusOn(userId);
}
}
if (importance === DivImportance.Important) {
this.importantDivs.set(userId, div);
// If this is the first video with high importance, let's switch mode automatically.
if (this.importantDivs.size === 1 && this.mode === LayoutMode.VideoChat) {
this.switchLayoutMode(LayoutMode.Presentation);
}
} else if (importance === DivImportance.Normal) {
this.normalDivs.set(userId, div);
} else {
throw new Error('Unexpected importance');
}
this.positionDiv(div, importance);
this.adjustVideoChatClass();
this.listener?.onCenterChange();
}
private positionDiv(elem: HTMLDivElement, importance: DivImportance): void {
if (this.mode === LayoutMode.VideoChat) {
const chatModeDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('chat-mode');
chatModeDiv.appendChild(elem);
} else {
if (importance === DivImportance.Important) {
const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section');
mainSectionDiv.appendChild(elem);
} else if (importance === DivImportance.Normal) {
const sideBarDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar');
sideBarDiv.appendChild(elem);
}
}
}
/**
* Put the screen in presentation mode and move elem in presentation mode (and all other videos in normal mode)
*/
private focusOn(userId: string): void {
const focusedDiv = this.getDivByUserId(userId);
for (const [importantUserId, importantDiv] of this.importantDivs.entries()) {
//this.positionDiv(importantDiv, DivImportance.Normal);
this.importantDivs.delete(importantUserId);
this.normalDivs.set(importantUserId, importantDiv);
}
this.normalDivs.delete(userId);
this.importantDivs.set(userId, focusedDiv);
//this.positionDiv(focusedDiv, DivImportance.Important);
this.switchLayoutMode(LayoutMode.Presentation);
}
/**
* Removes userId from presentation mode
*/
private removeFocusOn(userId: string): void {
const importantDiv = this.importantDivs.get(userId);
if (importantDiv === undefined) {
throw new Error('Div with user id "'+userId+'" is not in important mode');
}
this.normalDivs.set(userId, importantDiv);
this.importantDivs.delete(userId);
this.positionDiv(importantDiv, DivImportance.Normal);
}
private getDivByUserId(userId: string): HTMLDivElement {
let div = this.importantDivs.get(userId);
if (div !== undefined) {
return div;
}
div = this.normalDivs.get(userId);
if (div !== undefined) {
return div;
}
throw new Error('Could not find media with user id '+userId);
}
/**
* 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();
this.importantDivs.delete(userId);
this.adjustVideoChatClass();
this.listener?.onCenterChange();
return;
}
div = this.normalDivs.get(userId);
if (div !== undefined) {
div.remove();
this.normalDivs.delete(userId);
this.adjustVideoChatClass();
this.listener?.onCenterChange();
return;
}
console.log('Cannot remove userID '+userId+'. Already removed?');
//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');
}
}
public switchLayoutMode(layoutMode: LayoutMode) {
this.mode = layoutMode;
if (layoutMode === LayoutMode.Presentation) {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').style.display = 'flex';
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-section').style.display = 'flex';
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 = 'flex';
}
2020-08-17 16:18:39 +02:00
for (const div of this.importantDivs.values()) {
this.positionDiv(div, DivImportance.Important);
}
2020-08-17 16:18:39 +02:00
for (const div of this.normalDivs.values()) {
this.positionDiv(div, DivImportance.Normal);
}
this.listener?.onCenterChange();
}
public getLayoutMode(): LayoutMode {
return this.mode;
}
/*public getGameCenter(): {x: number, y: number} {
}*/
/**
* Tries to find the biggest available box of remaining space (this is a space where we can center the character)
*/
public findBiggestAvailableArray(): {xStart: number, yStart: number, xEnd: number, yEnd: number} {
if (this.mode === LayoutMode.VideoChat) {
const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
const htmlChildren = Array.from(children.values());
// No chat? Let's go full center
if (htmlChildren.length === 0) {
return {
xStart: 0,
yStart: 0,
xEnd: window.innerWidth,
yEnd: window.innerHeight
}
}
const lastDiv = htmlChildren[htmlChildren.length - 1];
// Compute area between top right of the last div and bottom right of window
const area1 = (window.innerWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth))
* (window.innerHeight - lastDiv.offsetTop);
// Compute area between bottom of last div and bottom of the screen on whole width
const area2 = window.innerWidth
* (window.innerHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
if (area1 < 0 && area2 < 0) {
// If screen is full, let's not attempt something foolish and simply center character in the middle.
return {
xStart: 0,
yStart: 0,
xEnd: window.innerWidth,
yEnd: window.innerHeight
}
}
if (area1 <= area2) {
console.log('lastDiv', lastDiv.offsetTop, lastDiv.offsetHeight);
return {
xStart: 0,
yStart: lastDiv.offsetTop + lastDiv.offsetHeight,
xEnd: window.innerWidth,
yEnd: window.innerHeight
}
} else {
console.log('lastDiv', lastDiv.offsetTop);
return {
xStart: lastDiv.offsetLeft + lastDiv.offsetWidth,
yStart: lastDiv.offsetTop,
xEnd: window.innerWidth,
yEnd: window.innerHeight
}
}
} else {
// Possible destinations: at the center bottom or at the right bottom.
const mainSectionChildren = Array.from(document.querySelectorAll<HTMLDivElement>('div.main-section > div').values());
const sidebarChildren = Array.from(document.querySelectorAll<HTMLDivElement>('aside.sidebar > div').values());
// No presentation? Let's center on the screen
if (mainSectionChildren.length === 0) {
return {
xStart: 0,
yStart: 0,
xEnd: window.innerWidth,
yEnd: window.innerHeight
}
}
// At this point, we know we have at least one element in the main section.
const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length-1];
const presentationArea = (window.innerHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight))
* (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth);
let leftSideBar: number;
let bottomSideBar: number;
if (sidebarChildren.length === 0) {
leftSideBar = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').offsetLeft;
bottomSideBar = 0;
} else {
const lastSideBarChildren = sidebarChildren[sidebarChildren.length - 1];
leftSideBar = lastSideBarChildren.offsetLeft;
bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight;
}
const sideBarArea = (window.innerWidth - leftSideBar)
* (window.innerHeight - bottomSideBar);
if (presentationArea <= sideBarArea) {
return {
xStart: leftSideBar,
yStart: bottomSideBar,
xEnd: window.innerWidth,
yEnd: window.innerHeight
}
} else {
return {
xStart: 0,
yStart: lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight,
xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ window.innerWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area
yEnd: window.innerHeight
}
}
}
}
}
const layoutManager = new LayoutManager();
export { layoutManager };