Merge branch 'develop' of github.com:thecodingmachine/workadventure

back/src/Enum/EnvironmentVariable.ts

@@ -9,7 +9,6 @@ const JITSI_ISS = process.env.JITSI_ISS || "";
 const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || "";
 const HTTP_PORT = parseInt(process.env.HTTP_PORT || "8080") || 8080;
 const GRPC_PORT = parseInt(process.env.GRPC_PORT || "50051") || 50051;
-export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 30; // maximum time (in second) without activity before a socket is closed
 export const TURN_STATIC_AUTH_SECRET = process.env.TURN_STATIC_AUTH_SECRET || "";
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || "4");
 export const REDIS_HOST = process.env.REDIS_HOST || undefined;

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -1,6 +1,5 @@
 <script lang="typescript">
 
-  import { get } from "svelte/store";
   import type { Unsubscriber } from "svelte/store";
   import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
   import { onDestroy, onMount } from "svelte";
@@ -26,11 +25,11 @@
     });
 
     picker.on("hidden", () => {
-      emoteMenuStore.set(false);
+      emoteMenuStore.closeEmoteMenu();
     });
 
-    unsubscriber = emoteMenuStore.subscribe(() => {
+    unsubscriber = emoteMenuStore.subscribe((isEmoteMenuVisible) => {
-      if (get(emoteMenuStore)) {
+      if (isEmoteMenuVisible && !picker.isPickerVisible()) {
         picker.showPicker(emojiContainer);
       } else {
         picker.hidePicker();
@@ -42,6 +41,8 @@
     if (unsubscriber) {
       unsubscriber();
     }
+
+    picker.destroyPicker();
   })
 
 </script>

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -13,10 +13,28 @@ export class GameMapPropertiesListener {
     constructor(private scene: GameScene, private gameMap: GameMap) {}
 
     register() {
-        this.gameMap.onPropertyChange("openTab", (newValue) => {
+        this.gameMap.onPropertyChange("openTab", (newValue, oldvalue, allProps) => {
+            if (newValue === undefined) {
+                layoutManagerActionStore.removeAction("openTab");
+            }
             if (typeof newValue == "string" && newValue.length) {
+                const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
+                if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
+                    let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
+                    if (message === undefined) {
+                        message = "Press SPACE or touch here to open web site in new tab";
+                    }
+                    layoutManagerActionStore.addAction({
+                        uuid: "openTab",
+                        type: "message",
+                        message: message,
+                        callback: () => scriptUtils.openTab(newValue),
+                        userInputManager: this.scene.userInputManager,
+                    });
+                } else {
                     scriptUtils.openTab(newValue);
                 }
+            }
         });
         this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
             if (newValue === undefined) {

front/src/Phaser/Game/GameScene.ts

@@ -82,7 +82,7 @@ import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStor
 import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
-import { emoteStore } from "../../Stores/EmoteStore";
+import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
 import {
     audioManagerFileStore,
     audioManagerVisibilityStore,
@@ -617,15 +617,13 @@ export class GameScene extends DirtyScene {
             this.openChatIcon.setVisible(!v);
         });
 
-        this.emoteUnsubscribe = emoteStore.subscribe(() => {
+        this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
-            const emoteKey = get(emoteStore);
             if (emoteKey) {
-                this.CurrentPlayer?.playEmote(emoteKey)
+                this.CurrentPlayer?.playEmote(emoteKey);
                 this.connection?.emitEmoteEvent(emoteKey);
                 emoteStore.set(null);
             }
         });
-
         Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => {
             this.scene.wake();
         });
@@ -1482,7 +1480,12 @@ export class GameScene extends DirtyScene {
                     return; //we don't want the menu to open when pinching on a touch screen.
                 }
 
-                this.CurrentPlayer.openOrCloseEmoteMenu();
+                // toggle EmoteMenu
+                if (get(emoteMenuStore)) {
+                    emoteMenuStore.closeEmoteMenu();
+                } else {
+                    emoteMenuStore.openEmoteMenu();
+                }
             })
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);

front/src/Phaser/Player/Player.ts

@@ -85,16 +85,4 @@ export class Player extends Character {
         return this.wasMoving;
     }
 
-    playEmote(emote: string) {
-        super.playEmote(emote);
-        emoteMenuStore.set(false);
-    }
-
-    openOrCloseEmoteMenu() {
-        if (get(emoteMenuStore)) {
-            emoteMenuStore.set(false);
-        } else {
-            emoteMenuStore.set(true);
-        }
-    }
 }

front/src/Stores/EmoteStore.ts

@@ -1,4 +1,18 @@
 import { writable } from "svelte/store";
 
+function createEmoteMenuStore() {
+    const { subscribe, set } = writable(false);
+
+    return {
+        subscribe,
+        openEmoteMenu() {
+            set(true);
+        },
+        closeEmoteMenu() {
+            set(false);
+        },
+    };
+}
+
 export const emoteStore = writable<string | null>(null);
-export const emoteMenuStore = writable(false);
+export const emoteMenuStore = createEmoteMenuStore();

maps/tests/inactive_tabs.json

@@ -0,0 +1,82 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "height":10,
+         "id":1,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":261.73266830836,
+                 "id":3,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":11,
+                     "text":"Test:\nOpen WorkAdventure in 1 tab in Chrome and 1 tab in Firefox. Keep the Firefox tab open and open another tab in Chrome on any website (so that the WA Chrome tab is not visible). Do not enter in a bubble. Wait 6 minutes. (you can check time waited in a \"chrome:\/\/discards\" special tab.\n\nResult:\nOn the Firefox tab, the user of the Chrome tab is still visible. You can speak to the other user in a bubble.\n\nHere, we are checking that the Chrome does not \"freeze\" the non visible tab.\n\nRe-run this test with Safari, Edge and Firefox as the browsers with the hidden tabs",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":252.4375,
+                 "x":46.5894222943362,
+                 "y":34.2876372135732
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":8,
+ "nextobjectid":5,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"2021.03.23",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.5,
+ "width":10
+}

maps/tests/index.html

@@ -235,6 +235,22 @@
             </table>
             <h2>Others</h2>
             <table class="table">
+                <tr>
+                    <td>
+                        <input type="radio" name="test-reconnection"> Success <input type="radio" name="test-reconnection"> Failure <input type="radio" name="test-reconnection" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="reconnection.json" target="_blank">Test reconnection</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-inactive-tabs"> Success <input type="radio" name="test-inactive-tabs"> Failure <input type="radio" name="test-inactive-tabs" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="inactive_tabs.json" target="_blank">Test inactive tabs on Chrome</a>
+                    </td>
+                </tr>
                 <tr>
                     <td>
                         <input type="radio" name="test-energy"> Success <input type="radio" name="test-energy"> Failure <input type="radio" name="test-energy" checked> Pending

maps/tests/reconnection.json

@@ -0,0 +1,82 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "height":10,
+         "id":1,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":261.73266830836,
+                 "id":3,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":11,
+                     "text":"Test:\nTest to be run on a remote site (not locally)\nOpen WorkAdventure in 2 tabs.\nClose the network connection (close Wifi, ...)\n\nResult:\nAfter a few seconds, WorkAdventure displays a \"reconnecting scene\"\n\nTest:\nResume network connection, without switching tabs (one tab on front)\n\nResult:\nWorkAdventure reconnects automatically. From the tab that resumed, you can connect to the other tab (that is not visible), therefore testing that the invisible tab has resumed too.",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":252.4375,
+                 "x":46.5894222943362,
+                 "y":34.2876372135732
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":8,
+ "nextobjectid":5,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"2021.03.23",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.5,
+ "width":10
+}

pusher/src/Enum/EnvironmentVariable.ts

@@ -9,7 +9,7 @@ const JITSI_URL: string | undefined = process.env.JITSI_URL === "" ? undefined :
 const JITSI_ISS = process.env.JITSI_ISS || "";
 const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || "";
 const PUSHER_HTTP_PORT = parseInt(process.env.PUSHER_HTTP_PORT || "8080") || 8080;
-export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 32; // maximum time (in second) without activity before a socket is closed
+export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 120; // maximum time (in second) without activity before a socket is closed. Should be greater than 60 seconds in order to cope for Chrome intensive throttling (https://developer.chrome.com/blog/timer-throttling-in-chrome-88/#intensive-throttling)
 
 export const FRONT_URL = process.env.FRONT_URL || "http://localhost";
 export const OPID_CLIENT_ID = process.env.OPID_CLIENT_ID || "";