From 87e4367455026a49877892a9f5533280420ef2e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 5 Aug 2021 11:19:28 +0200
Subject: [PATCH] Refactoring layoutManagerActionStore. It now supports an uuid
 field. layoutManagerVisibilityStore is now a derived field from
 layoutManagerActionStore.

---
 .../LayoutManager/LayoutManager.svelte        | 23 +-----------
 front/src/Phaser/Game/GameScene.ts            | 35 ++++++++++---------
 front/src/Stores/LayoutManagerStore.ts        | 23 ++++++------
 front/src/WebRtc/MediaManager.ts              | 14 +++++---
 4 files changed, 42 insertions(+), 53 deletions(-)

diff --git a/front/src/Components/LayoutManager/LayoutManager.svelte b/front/src/Components/LayoutManager/LayoutManager.svelte
index ef90a4e3..5bc6e097 100644
--- a/front/src/Components/LayoutManager/LayoutManager.svelte
+++ b/front/src/Components/LayoutManager/LayoutManager.svelte
@@ -1,26 +1,5 @@
 <script lang="ts">
     import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
-    import { onDestroy, onMount } from "svelte";
-    import { get } from "svelte/store";
-
-    onMount(() => {
-        for (const action of get(layoutManagerActionStore)) {
-            action.userInputManager?.addSpaceEventListner(action.callback);
-            if ( action.type === 'warning') {
-                //remove it after 10 sec
-                setTimeout(() => {
-                    layoutManagerActionStore.removeAction(action);
-                }, 10000)
-            }
-        }
-    })
-
-    onDestroy(() => {
-        for (const action of get(layoutManagerActionStore)) {
-            action.userInputManager?.removeSpaceEventListner(action.callback);
-        }
-        layoutManagerActionStore.clearActions();
-    })
 
     function onClick(callback: () => void) {
         callback();
@@ -75,4 +54,4 @@
   50% {bottom: 30px;}
   100% {bottom: 40px;}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 3c521a3c..b47d1e48 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -86,7 +86,7 @@ import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
 import Tileset = Phaser.Tilemaps.Tileset;
 import { userIsAdminStore } from "../../Stores/GameStore";
-import { layoutManagerActionStore, layoutManagerVisibilityStore } from "../../Stores/LayoutManagerStore";
+import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { get } from "svelte/store";
 
 export interface GameSceneInitInterface {
@@ -792,7 +792,7 @@ export class GameScene extends DirtyScene {
         });
         this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
-                layoutManagerVisibilityStore.set(false);
+                layoutManagerActionStore.removeAction("openWebsite");
                 coWebsiteManager.closeCoWebsite();
             } else {
                 const openWebsiteFunction = () => {
@@ -802,7 +802,7 @@ export class GameScene extends DirtyScene {
                         allProps.get("openWebsiteAllowApi") as boolean | undefined,
                         allProps.get("openWebsitePolicy") as string | undefined
                     );
-                    layoutManagerVisibilityStore.set(false);
+                    layoutManagerActionStore.removeAction("openWebsite");
                 };
 
                 const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
@@ -812,12 +812,12 @@ export class GameScene extends DirtyScene {
                         message = "Press SPACE or touch here to open web site";
                     }
                     layoutManagerActionStore.addAction({
-                        type: "openWebsite",
+                        uuid: "openWebSite",
+                        type: "message",
                         message: message,
                         callback: () => openWebsiteFunction(),
                         userInputManager: this.userInputManager,
                     });
-                    layoutManagerVisibilityStore.set(true);
                 } else {
                     openWebsiteFunction();
                 }
@@ -825,7 +825,7 @@ export class GameScene extends DirtyScene {
         });
         this.gameMap.onPropertyChange("jitsiRoom", (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
-                layoutManagerVisibilityStore.set(false);
+                layoutManagerActionStore.removeAction("jitsi");
                 this.stopJitsi();
             } else {
                 const openJitsiRoomFunction = () => {
@@ -838,7 +838,7 @@ export class GameScene extends DirtyScene {
                     } else {
                         this.startJitsi(roomName, undefined);
                     }
-                    layoutManagerVisibilityStore.set(false);
+                    layoutManagerActionStore.removeAction("jitsi");
                 };
 
                 const jitsiTriggerValue = allProps.get(TRIGGER_JITSI_PROPERTIES);
@@ -848,12 +848,12 @@ export class GameScene extends DirtyScene {
                         message = "Press SPACE or touch here to enter Jitsi Meet room";
                     }
                     layoutManagerActionStore.addAction({
-                        type: "jitsiRoom",
+                        uuid: "jitsi",
+                        type: "message",
                         message: message,
                         callback: () => openJitsiRoomFunction(),
                         userInputManager: this.userInputManager,
                     });
-                    layoutManagerVisibilityStore.set(true);
                 } else {
                     openJitsiRoomFunction();
                 }
@@ -1154,20 +1154,21 @@ ${escapedMessage}
             "triggerActionMessage",
             (message) =>
                 new Promise((resolver) => {
-                    layoutManager.addActionButton(
-                        message.uuid,
-                        message.message,
-                        () => {
-                            layoutManager.removeActionButton(message.uuid, this.userInputManager);
+                    layoutManagerActionStore.addAction({
+                        uuid: message.uuid,
+                        type: "message",
+                        message: message.message,
+                        callback: () => {
+                            layoutManagerActionStore.removeAction(message.uuid);
                             resolver();
                         },
-                        this.userInputManager
-                    );
+                        userInputManager: this.userInputManager,
+                    });
                 })
         );
 
         iframeListener.registerAnswerer("removeActionMessage", (message) => {
-            layoutManager.removeActionButton(message.uuid, this.userInputManager);
+            layoutManagerActionStore.removeAction(message.uuid);
         });
     }
 
diff --git a/front/src/Stores/LayoutManagerStore.ts b/front/src/Stores/LayoutManagerStore.ts
index 41fd283d..e92cd3c4 100644
--- a/front/src/Stores/LayoutManagerStore.ts
+++ b/front/src/Stores/LayoutManagerStore.ts
@@ -1,15 +1,14 @@
-import { writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
 
 export interface LayoutManagerAction {
-    type: string;
+    uuid: string;
+    type: "warning" | "message";
     message: string | number | boolean | undefined;
     callback: () => void;
     userInputManager: UserInputManager | undefined;
 }
 
-export const layoutManagerVisibilityStore = writable(false);
-
 function createLayoutManagerAction() {
     const { subscribe, set, update } = writable<LayoutManagerAction[]>([]);
 
@@ -18,26 +17,26 @@ function createLayoutManagerAction() {
         addAction: (newAction: LayoutManagerAction): void => {
             update((list: LayoutManagerAction[]) => {
                 let found = false;
-                for (const actions of list) {
-                    if (actions.type === newAction.type && actions.message === newAction.message) {
+                for (const action of list) {
+                    if (action.uuid === newAction.uuid) {
                         found = true;
                     }
                 }
 
                 if (!found) {
                     list.push(newAction);
+                    newAction.userInputManager?.addSpaceEventListner(newAction.callback);
                 }
 
                 return list;
             });
         },
-        removeAction: (oldAction: LayoutManagerAction): void => {
+        removeAction: (uuid: string): void => {
             update((list: LayoutManagerAction[]) => {
-                const index = list.findIndex(
-                    (actions) => actions.type === oldAction.type && actions.message === oldAction.message
-                );
+                const index = list.findIndex((action) => action.uuid === uuid);
 
                 if (index !== -1) {
+                    list[index].userInputManager?.removeSpaceEventListner(list[index].callback);
                     list.splice(index, 1);
                 }
 
@@ -51,3 +50,7 @@ function createLayoutManagerAction() {
 }
 
 export const layoutManagerActionStore = createLayoutManagerAction();
+
+export const layoutManagerVisibilityStore = derived(layoutManagerActionStore, ($layoutManagerActionStore) => {
+    return !!$layoutManagerActionStore.length;
+});
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 2f8c637a..a7a73ecb 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -25,15 +25,18 @@ export class MediaManager {
             if (result.type === "error") {
                 console.error(result.error);
                 layoutManagerActionStore.addAction({
+                    uuid: "cameraAccessDenied",
                     type: "warning",
                     message: "Camera access denied. Click here and check your browser permissions.",
                     callback: () => {
                         helpCameraSettingsVisibleStore.set(true);
-                        layoutManagerVisibilityStore.set(false);
                     },
                     userInputManager: this.userInputManager,
                 });
-                layoutManagerVisibilityStore.set(true);
+                //remove it after 10 sec
+                setTimeout(() => {
+                    layoutManagerActionStore.removeAction("cameraAccessDenied");
+                }, 10000);
                 return;
             }
         });
@@ -42,15 +45,18 @@ export class MediaManager {
             if (result.type === "error") {
                 console.error(result.error);
                 layoutManagerActionStore.addAction({
+                    uuid: "screenSharingAccessDenied",
                     type: "warning",
                     message: "Screen sharing denied. Click here and check your browser permissions.",
                     callback: () => {
                         helpCameraSettingsVisibleStore.set(true);
-                        layoutManagerVisibilityStore.set(false);
                     },
                     userInputManager: this.userInputManager,
                 });
-                layoutManagerVisibilityStore.set(true);
+                //remove it after 10 sec
+                setTimeout(() => {
+                    layoutManagerActionStore.removeAction("screenSharingAccessDenied");
+                }, 10000);
                 return;
             }
         });