Create action button

front/dist/resources/style/style.css

@@ -701,3 +701,30 @@ div.modal-report-user{
     max-width: calc(800px - 60px); /* size of modal - padding*/
 }
 
+/** Action button **/
+div.action{
+    position: absolute;
+    width: 100%;
+    height: auto;
+    text-align: center;
+    bottom: 40px;
+    transition: all .5s ease;
+    animation: mymove .5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
+div.action p.action-body{
+    padding: 10px;
+    background-color: #2d2d2dba;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    max-width: 150px;
+    margin-left: calc(50% - 75px);
+    border-radius: 15px;
+}
+@keyframes mymove {
+    0% {bottom: 40px;}
+    50% {bottom: 30px;}
+    100% {bottom: 40px;}
+}

front/src/Phaser/Game/GameScene.ts

@@ -469,15 +469,21 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue) => {
             if (newValue === undefined) {
+                layoutManager.removeActionButton('openWebsite', this.userInputManager);
                 coWebsiteManager.closeCoWebsite();
-            } else {
+            }else{
+                layoutManager.addActionButton('openWebsite', 'Clik on SPACE to open web site', () => {
                     coWebsiteManager.loadCoWebsite(newValue as string);
+                }, this.userInputManager);
             }
         });
+        
         this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
+                layoutManager.removeActionButton('jitsiRoom', this.userInputManager);
                 this.stopJitsi();
-            } else {
+            }else{
+                layoutManager.addActionButton('jitsiRoom', 'Clik on SPACE to enter in jitsi meet room', () => {
                     if (JITSI_PRIVATE_MODE) {
                         const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
 
@@ -485,8 +491,9 @@ export class GameScene extends ResizableScene implements CenterListener {
                     } else {
                         this.startJitsi(newValue as string);
                     }
+                }, this.userInputManager);
             }
-        })
+        });
 
         this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
             if (newValue === undefined || newValue === false || newValue === '') {

front/src/Phaser/UserInput/UserInputManager.ts

@@ -77,4 +77,11 @@ export class UserInputManager {
             return event;
         });
     }
+
+    addSpaceEventListner(callback : Function){
+        this.Scene.input.keyboard.addListener('keyup-SPACE', callback);
+    }
+    removeSpaceEventListner(callback : Function){
+        this.Scene.input.keyboard.removeListener('keyup-SPACE', callback);
+    }
 }

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();