2021-05-12 09:13:25 +02:00
|
|
|
import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
|
2021-06-25 18:14:40 +02:00
|
|
|
import { HtmlUtils } from "./HtmlUtils";
|
2020-08-11 22:32:55 +02:00
|
|
|
|
|
|
|
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",
|
|
|
|
}
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
export const ON_ACTION_TRIGGER_BUTTON = "onaction";
|
2020-08-24 14:19:36 +02:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
export const TRIGGER_WEBSITE_PROPERTIES = "openWebsiteTrigger";
|
|
|
|
export const TRIGGER_JITSI_PROPERTIES = "jitsiTrigger";
|
2021-01-25 13:18:57 +01:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
export const WEBSITE_MESSAGE_PROPERTIES = "openWebsiteTriggerMessage";
|
|
|
|
export const JITSI_MESSAGE_PROPERTIES = "jitsiTriggerMessage";
|
2021-01-25 12:21:40 +01:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
export const AUDIO_VOLUME_PROPERTY = "audioVolume";
|
|
|
|
export const AUDIO_LOOP_PROPERTY = "audioLoop";
|
2020-11-23 20:34:05 +01:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
export type Box = { xStart: number; yStart: number; xEnd: number; yEnd: number };
|
2021-03-11 22:34:49 +01:00
|
|
|
|
2020-08-13 18:21:48 +02:00
|
|
|
class LayoutManager {
|
2020-10-31 14:04:55 +01:00
|
|
|
private actionButtonTrigger: Map<string, Function> = new Map<string, Function>();
|
|
|
|
private actionButtonInformation: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
public addActionButton(id: string, text: string, callBack: Function, userInputManager: UserInputManager) {
|
2020-10-31 14:04:55 +01:00
|
|
|
//delete previous element
|
|
|
|
this.removeActionButton(id, userInputManager);
|
2021-05-12 09:13:25 +02:00
|
|
|
|
2020-10-31 14:04:55 +01:00
|
|
|
//create div and text html component
|
2021-06-25 18:14:40 +02:00
|
|
|
const p = document.createElement("p");
|
|
|
|
p.classList.add("action-body");
|
2020-10-31 14:04:55 +01:00
|
|
|
p.innerText = text;
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
const div = document.createElement("div");
|
|
|
|
div.classList.add("action");
|
2020-10-31 14:04:55 +01:00
|
|
|
div.id = id;
|
|
|
|
div.appendChild(p);
|
|
|
|
|
|
|
|
this.actionButtonInformation.set(id, div);
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("main-container");
|
2020-10-31 14:04:55 +01:00
|
|
|
mainContainer.appendChild(div);
|
|
|
|
|
|
|
|
//add trigger action
|
2021-03-09 20:01:48 +01:00
|
|
|
div.onpointerdown = () => callBack();
|
|
|
|
this.actionButtonTrigger.set(id, callBack);
|
|
|
|
userInputManager.addSpaceEventListner(callBack);
|
2020-10-31 14:04:55 +01:00
|
|
|
}
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
public removeActionButton(id: string, userInputManager?: UserInputManager) {
|
2020-10-31 14:04:55 +01:00
|
|
|
//delete previous element
|
|
|
|
const previousDiv = this.actionButtonInformation.get(id);
|
2021-06-25 18:14:40 +02:00
|
|
|
if (previousDiv) {
|
2020-10-31 14:04:55 +01:00
|
|
|
previousDiv.remove();
|
|
|
|
this.actionButtonInformation.delete(id);
|
|
|
|
}
|
|
|
|
const previousEventCallback = this.actionButtonTrigger.get(id);
|
2021-06-25 18:14:40 +02:00
|
|
|
if (previousEventCallback && userInputManager) {
|
2020-10-31 14:04:55 +01:00
|
|
|
userInputManager.removeSpaceEventListner(previousEventCallback);
|
|
|
|
}
|
|
|
|
}
|
2021-05-05 01:49:04 +02:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
public addInformation(id: string, text: string, callBack?: Function, userInputManager?: UserInputManager) {
|
2021-05-05 01:49:04 +02:00
|
|
|
//delete previous element
|
2021-06-25 18:14:40 +02:00
|
|
|
for (const [key, value] of this.actionButtonInformation) {
|
2021-05-05 01:49:04 +02:00
|
|
|
this.removeActionButton(key, userInputManager);
|
|
|
|
}
|
|
|
|
|
|
|
|
//create div and text html component
|
2021-06-25 18:14:40 +02:00
|
|
|
const p = document.createElement("p");
|
|
|
|
p.classList.add("action-body");
|
2021-05-05 01:49:04 +02:00
|
|
|
p.innerText = text;
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
const div = document.createElement("div");
|
|
|
|
div.classList.add("action");
|
2021-05-05 01:49:04 +02:00
|
|
|
div.classList.add(id);
|
|
|
|
div.id = id;
|
|
|
|
div.appendChild(p);
|
|
|
|
|
|
|
|
this.actionButtonInformation.set(id, div);
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("main-container");
|
2021-05-05 01:49:04 +02:00
|
|
|
mainContainer.appendChild(div);
|
|
|
|
//add trigger action
|
2021-06-25 18:14:40 +02:00
|
|
|
if (callBack) {
|
2021-05-05 01:49:04 +02:00
|
|
|
div.onpointerdown = () => {
|
|
|
|
callBack();
|
|
|
|
this.removeActionButton(id, userInputManager);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
//remove it after 10 sec
|
|
|
|
setTimeout(() => {
|
|
|
|
this.removeActionButton(id, userInputManager);
|
2021-06-25 18:14:40 +02:00
|
|
|
}, 10000);
|
2021-05-05 01:49:04 +02:00
|
|
|
}
|
2020-08-11 22:32:55 +02:00
|
|
|
}
|
2020-08-13 18:21:48 +02:00
|
|
|
|
|
|
|
const layoutManager = new LayoutManager();
|
|
|
|
|
|
|
|
export { layoutManager };
|