120 lines
3.9 KiB
TypeScript
120 lines
3.9 KiB
TypeScript
import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
|
|
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;
|
|
}
|
|
|
|
export const ON_ACTION_TRIGGER_BUTTON = 'onaction';
|
|
|
|
export const TRIGGER_WEBSITE_PROPERTIES = 'openWebsiteTrigger';
|
|
export const TRIGGER_JITSI_PROPERTIES = 'jitsiTrigger';
|
|
|
|
export const WEBSITE_MESSAGE_PROPERTIES = 'openWebsiteTriggerMessage';
|
|
export const JITSI_MESSAGE_PROPERTIES = 'jitsiTriggerMessage';
|
|
|
|
export const AUDIO_VOLUME_PROPERTY = 'audioVolume';
|
|
export const AUDIO_LOOP_PROPERTY = 'audioLoop';
|
|
|
|
export type Box = {xStart: number, yStart: number, xEnd: number, yEnd: number};
|
|
|
|
class LayoutManager {
|
|
private actionButtonTrigger: Map<string, Function> = new Map<string, Function>();
|
|
private actionButtonInformation: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
|
|
|
|
public addActionButton(id: string, text: string, callBack: Function, userInputManager: UserInputManager){
|
|
//delete previous element
|
|
this.removeActionButton(id, userInputManager);
|
|
|
|
//create div and text html component
|
|
const p = document.createElement('p');
|
|
p.classList.add('action-body');
|
|
p.innerText = text;
|
|
|
|
const div = document.createElement('div');
|
|
div.classList.add('action');
|
|
div.id = id;
|
|
div.appendChild(p);
|
|
|
|
this.actionButtonInformation.set(id, div);
|
|
|
|
const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
|
|
mainContainer.appendChild(div);
|
|
|
|
//add trigger action
|
|
div.onpointerdown = () => callBack();
|
|
this.actionButtonTrigger.set(id, callBack);
|
|
userInputManager.addSpaceEventListner(callBack);
|
|
}
|
|
|
|
public removeActionButton(id: string, userInputManager?: UserInputManager){
|
|
//delete previous element
|
|
const previousDiv = this.actionButtonInformation.get(id);
|
|
if(previousDiv){
|
|
previousDiv.remove();
|
|
this.actionButtonInformation.delete(id);
|
|
}
|
|
const previousEventCallback = this.actionButtonTrigger.get(id);
|
|
if(previousEventCallback && userInputManager){
|
|
userInputManager.removeSpaceEventListner(previousEventCallback);
|
|
}
|
|
}
|
|
|
|
public addInformation(id: string, text: string, callBack?: Function, userInputManager?: UserInputManager){
|
|
//delete previous element
|
|
for ( const [key, value] of this.actionButtonInformation ) {
|
|
this.removeActionButton(key, userInputManager);
|
|
}
|
|
|
|
//create div and text html component
|
|
const p = document.createElement('p');
|
|
p.classList.add('action-body');
|
|
p.innerText = text;
|
|
|
|
const div = document.createElement('div');
|
|
div.classList.add('action');
|
|
div.classList.add(id);
|
|
div.id = id;
|
|
div.appendChild(p);
|
|
|
|
this.actionButtonInformation.set(id, div);
|
|
|
|
const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
|
|
mainContainer.appendChild(div);
|
|
//add trigger action
|
|
if(callBack){
|
|
div.onpointerdown = () => {
|
|
callBack();
|
|
this.removeActionButton(id, userInputManager);
|
|
};
|
|
}
|
|
|
|
//remove it after 10 sec
|
|
setTimeout(() => {
|
|
this.removeActionButton(id, userInputManager);
|
|
}, 10000)
|
|
}
|
|
}
|
|
|
|
const layoutManager = new LayoutManager();
|
|
|
|
export { layoutManager };
|