Merge pull request #1446 from thecodingmachine/develop

Deploy 2021-09-13

CHANGELOG.md

@@ -3,6 +3,9 @@
 ### Updates 
 - New scripting API features : 
   - Use `WA.ui.registerMenuCommand(commandDescriptor: string, options: MenuOptions): Menu` to add a custom menu or an iframe to the menu.
+- New `jitsiWidth` parameter to set the width of Jitsi
+- Refactored the way videos are displayed to better cope for vertical videos (on mobile)
+- Fixing reconnection issues after 5 minutes of an inactive tab on Google Chrome
 
 ## Version 1.4.14
 

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;

docs/maps/meeting-rooms.md

@@ -11,6 +11,7 @@ In order to create Jitsi meet zones:
 
 *   You must create a specific layer.
 *   In layer properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with the name of the instance of the map (so that different instances of the map have different rooms)
+*   You may also use "jitsiWidth" property (of type "number" between 0 and 100) to control the width of the iframe containing the meeting room.
 
 ## Triggering of the "Jitsi meet" action
 

front/src/Components/Menu/MenuIcon.svelte

@@ -22,9 +22,9 @@
 
 <style lang="scss">
   .menuIcon {
-    pointer-events: auto;
     margin: 25px;
     img {
+      pointer-events: auto;
       width: 60px;
       padding-top: 0;
     }

front/src/Components/Video/VideoMediaBox.svelte

@@ -7,8 +7,6 @@
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
     import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
     import {getColorByString, srcObject} from "./utils";
-    import {obtainedMediaConstraintIsMobileStore} from "../../Stores/MediaStore";
-    import {onDestroy} from "svelte";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -20,12 +18,6 @@
         showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
     }
 
-    let isMobile : boolean|null;
-    const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
-        isMobile = value;
-    });
-    onDestroy(unsubscribe);
-
 </script>
 
 <div class="video-container">
@@ -45,7 +37,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    <video class:mobile="{isMobile === true}" use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
+    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
     <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>

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/WebRtc/VideoPeer.ts

@@ -7,7 +7,6 @@ import type { UserSimplePeerInterface } from "./SimplePeer";
 import { readable, Readable, Unsubscriber } from "svelte/store";
 import {
     localStreamStore,
-    obtainedMediaConstraintIsMobileStore,
     obtainedMediaConstraintStore,
     ObtainedMediaStreamConstraints,
 } from "../Stores/MediaStore";
@@ -162,9 +161,6 @@ export class VideoPeer extends Peer {
                 } else {
                     mediaManager.disabledVideoByUserId(this.userId);
                 }
-                if (message.isMobile != undefined) {
-                    obtainedMediaConstraintIsMobileStore.set(message.isMobile);
-                }
             } else if (message.type === MESSAGE_TYPE_MESSAGE) {
                 if (!blackListManager.isBlackListed(this.userUuid)) {
                     chatMessagesStore.addExternalMessage(this.userId, message.message);

front/style/mobile-style.scss

@@ -40,7 +40,6 @@
   .main-section {
     position: absolute;
     width: 100%;
-    min-width: 400px;
 
     & > div {
       z-index: 2;

front/style/style.scss

@@ -44,7 +44,7 @@ body .message-info.warning{
     video {
         width: 100%;
         height: 100%;
-        max-height: 90vh;
+        object-fit: cover;
         cursor: url('./images/cursor_pointer.png'), pointer;
 
         &.mobile{
@@ -76,7 +76,6 @@ body .message-info.warning{
         left: 5px;
         bottom: 5px;
         padding: 10px;
-        z-index: 2;
 
         &.active {
             display: block !important;
@@ -547,6 +546,10 @@ input[type=range]:focus::-ms-fill-upper {
     cursor: url('./images/cursor_pointer.png'), pointer;
     border-radius: 15px 15px 15px 15px;
     pointer-events: auto;
+
+    video {
+        max-height: 21vh;
+    }
 }
 
 .sidebar > div:hover {

maps/tests/audio.json

@@ -0,0 +1,105 @@
+{ "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
+        }, 
+        {
+         "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, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 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":5,
+         "name":"audio",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"audioLoop",
+                 "type":"bool",
+                 "value":true
+                }, 
+                {
+                 "name":"playAudio",
+                 "type":"string",
+                 "value":"Audience.mp3"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":119.194025905366,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":13,
+                     "text":"Test:\nWalk on the carpet\nResult:\nA sound is played in loop.\nControls at the top of the screen allow you to control the sound.",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":315.4375,
+                 "x":2.28125,
+                 "y":198.837938422583
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":6,
+ "nextobjectid":2,
+ "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/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

@@ -1,11 +1,16 @@
 <!doctype html>
 <html>
     <head>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
     </head>
     <body>
+        <div class="container">
+            <h1>WorkAdventure test cases</h1>
             <label>Base test URL:</label>
             <input id="baseurl" type="text" value="" />
-        <table>
+            <h2>Map features / properties</h2>
+            <table class="table">
                 <tr>
                     <th>Result</th>
                     <th>Test</th>
@@ -26,6 +31,49 @@
                         <a href="#" class="testLink" data-testmap="jitsi_custom_url.json" target="_blank">Testing jitsiUrl property</a>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-animated-tiles"> Success <input type="radio" name="test-animated-tiles"> Failure <input type="radio" name="test-animated-tiles" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="animated_tiles.json" target="_blank">Test animated tiles</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-start-tile-S1"> Success <input type="radio" name="test-start-tile-S1"> Failure <input type="radio" name="test-start-tile-S1" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="start-tile.json#S1" target="_blank">Test start tile (S1)</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-start-tile-S2"> Success <input type="radio" name="test-start-tile-S2"> Failure <input type="radio" name="test-start-tile-S2" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="start-tile.json#S2" target="_blank">Test start tile (S2)</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-website-objects"> Success <input type="radio" name="test-website-objects"> Failure <input type="radio" name="test-website-objects" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="EmbeddedWebsite/website_in_map.json" target="_blank">Testing websites inside a map</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-audio"> Success <input type="radio" name="test-audio"> Failure <input type="radio" name="test-audio" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="audio.json" target="_blank">Testing audio layer</a>
+                    </td>
+                </tr>
+            </table>
+            <h2>Iframe API</h2>
+            <table class="table">
                 <tr>
                     <td>
                         <input type="radio" name="test-iframe-api"> Success <input type="radio" name="test-iframe-api"> Failure <input type="radio" name="test-iframe-api" checked> Pending
@@ -58,62 +106,6 @@
                         <a href="#" class="testLink" data-testmap="SoundTest.json" target="_blank">Testing scripting API loadSound() function</a>
                     </td>
                 </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-scripting-deprecated"> Success <input type="radio" name="test-scripting-deprecated"> Failure <input type="radio" name="test-scripting-deprecated" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="deprecated_functions.json" target="_blank">Testing scripting API deprecated function</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-autoresize"> Success <input type="radio" name="test-autoresize"> Failure <input type="radio" name="test-autoresize" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="autoresize.json" target="_blank">Testing auto-zoom of viewport</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-mouse-wheel"> Success <input type="radio" name="test-mouse-wheel"> Failure <input type="radio" name="test-mouse-wheel" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="mousewheel.json" target="_blank">Testing zoom via mouse wheel</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-mobile"> Success <input type="radio" name="test-mobile"> Failure <input type="radio" name="test-mobile" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="mobile.json" target="_blank">Testing movement on mobile</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-mobile-video"> Success <input type="radio" name="test-mobile-video"> Failure <input type="radio" name="test-mobile-video" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="mobile_video.json" target="_blank">Testing video on mobile</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
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="energy.json" target="_blank">Test energy consumption</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-help-camera-setting"> Success <input type="radio" name="test-help-camera-setting"> Failure <input type="radio" name="test-help-camera-setting" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="help_camera_setting.json" target="_blank">Test the HelpCameraSettingScene</a>
-                </td>
-            </tr>
                 <tr>
                     <td>
                         <input type="radio" name="test-cowebsite-allowAPI"> Success <input type="radio" name="test-cowebsite-allowAPI"> Failure <input type="radio" name="test-cowebsite-allowAPI" checked> Pending
@@ -162,30 +154,6 @@
                         <a href="#" class="testLink" data-testmap="Metadata/showHideLayer.json" target="_blank">Testing show or hide a layer by Scripting API</a>
                     </td>
                 </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-animated-tiles"> Success <input type="radio" name="test-animated-tiles"> Failure <input type="radio" name="test-animated-tiles" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="animated_tiles.json" target="_blank">Test animated tiles</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-start-tile-S1"> Success <input type="radio" name="test-start-tile-S1"> Failure <input type="radio" name="test-start-tile-S1" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="start-tile.json#S1" target="_blank">Test start tile (S1)</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="radio" name="test-start-tile-S2"> Success <input type="radio" name="test-start-tile-S2"> Failure <input type="radio" name="test-start-tile-S2" checked> Pending
-                </td>
-                <td>
-                    <a href="#" class="testLink" data-testmap="start-tile.json#S2" target="_blank">Test start tile (S2)</a>
-                </td>
-            </tr>
                 <tr>
                     <td>
                         <input type="radio" name="test-set-tiles"> Success <input type="radio" name="test-set-tiles"> Failure <input type="radio" name="test-set-tiles" checked> Pending
@@ -220,10 +188,10 @@
                 </tr>
                 <tr>
                     <td>
-                    <input type="radio" name="test-website-objects"> Success <input type="radio" name="test-website-objects"> Failure <input type="radio" name="test-website-objects" checked> Pending
+                        <input type="radio" name="test-scripting-deprecated"> Success <input type="radio" name="test-scripting-deprecated"> Failure <input type="radio" name="test-scripting-deprecated" checked> Pending
                     </td>
                     <td>
-                    <a href="#" class="testLink" data-testmap="EmbeddedWebsite/website_in_map.json" target="_blank">Testing websites inside a map</a>
+                        <a href="#" class="testLink" data-testmap="deprecated_functions.json" target="_blank">Testing scripting API deprecated function</a>
                     </td>
                 </tr>
                 <tr>
@@ -235,7 +203,88 @@
                     </td>
                 </tr>
             </table>
-
+            <h2>Mobile</h2>
+            <table class="table">
+                <tr>
+                    <td>
+                        <input type="radio" name="test-mobile"> Success <input type="radio" name="test-mobile"> Failure <input type="radio" name="test-mobile" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="mobile.json" target="_blank">Testing movement on mobile</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-mobile-video"> Success <input type="radio" name="test-mobile-video"> Failure <input type="radio" name="test-mobile-video" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="mobile_video.json" target="_blank">Testing video on mobile</a>
+                    </td>
+                </tr>
+            </table>
+            <h2>WebRTC</h2>
+            <table class="table">
+                <tr>
+                    <td>
+                        <input type="radio" name="test-energy"> Success <input type="radio" name="test-energy"> Failure <input type="radio" name="test-energy" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="energy.json" target="_blank">Test energy consumption</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-help-camera-setting"> Success <input type="radio" name="test-help-camera-setting"> Failure <input type="radio" name="test-help-camera-setting" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="help_camera_setting.json" target="_blank">Test the HelpCameraSettingScene</a>
+                    </td>
+                </tr>
+            </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
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="energy.json" target="_blank">Test energy consumption</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-autoresize"> Success <input type="radio" name="test-autoresize"> Failure <input type="radio" name="test-autoresize" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="autoresize.json" target="_blank">Testing auto-zoom of viewport</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-mouse-wheel"> Success <input type="radio" name="test-mouse-wheel"> Failure <input type="radio" name="test-mouse-wheel" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="mousewheel.json" target="_blank">Testing zoom via mouse wheel</a>
+                    </td>
+                </tr>
+            </table>
+        </div>
         <script>
             const baseInput = document.getElementById('baseurl');
 
@@ -265,6 +314,5 @@
 
             init();
         </script>
-
     </body>
 </html>

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) || 30; // 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 || "";