Create action button

front/src/WebRtc/JitsiFactory.ts

@@ -62,6 +62,9 @@ class JitsiFactory {
     }
 
     public async stop(): Promise<void> {
+        if(!this.jitsiApi){
+            return;
+        }
         await coWebsiteManager.closeCoWebsite();
         this.jitsiApi.removeListener('audioMuteStatusChanged', this.audioCallback);
         this.jitsiApi.removeListener('videoMuteStatusChanged', this.videoCallback);

front/src/WebRtc/LayoutManager.ts

@@ -1,3 +1,4 @@
+import { UserInputManager } from "../Phaser/UserInput/UserInputManager";
 import {HtmlUtils} from "./HtmlUtils";
 
 export enum LayoutMode {
@@ -33,6 +34,9 @@ class LayoutManager {
     private normalDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
     private listener: CenterListener|null = null;
 
+    private actionButtonTrigger: Map<string, Function> = new Map<string, Function>();
+    private actionButtonInformation: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
+
     public setListener(centerListener: CenterListener|null) {
         this.listener = centerListener;
     }
@@ -305,6 +309,48 @@ class LayoutManager {
             }
         }
     }
+
+    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);
+
+        const callBackFunctionTrigger = (() => {
+            console.log('user click on space => ', id);
+            callBack();
+        });
+
+        //add trigger action
+        this.actionButtonTrigger.set(id, callBackFunctionTrigger);
+        userInputManager.addSpaceEventListner(callBackFunctionTrigger);
+    }
+
+    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.removeSpaceEventListner(previousEventCallback);
+        }
+    }
 }
 
 const layoutManager = new LayoutManager();