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

docs/maps/api-player.md

@@ -1,23 +1,6 @@
 {.section-title.accent.text-primary}
 # API Player functions Reference
 
-### Getting information on the current user
-```
-WA.player.getCurrentUser(): Promise<User>
-```
-Return a promise that resolves to a `User` object with the following attributes :
-* **id (string) :** ID of the current user
-* **nickName (string) :** name displayed above the current user
-* **tags (string[]) :** list of all the tags of the current user
-
-Example :
-```javascript
-WA.player.getCurrentUser().then((user) => {
-    if (user.nickName === 'ABC') {
-        console.log(user.tags);
-    }
-})
-```
 
 ### Listen to player movement
 ```

docs/maps/api-room.md

@@ -79,26 +79,6 @@ Example :
 WA.room.setProperty('wikiLayer', 'openWebsite', 'https://www.wikipedia.org/');
 ```
 
-### Getting information on the current room
-```
-WA.room.getCurrentRoom(): Promise<Room>
-```
-Return a promise that resolves to a `Room` object with the following attributes :
-* **id (string) :** ID of the current room
-* **map (ITiledMap) :** contains the JSON map file with the properties that were set by the script if `setProperty` was called.
-* **mapUrl (string) :** Url of the JSON map file
-* **startLayer (string | null) :** Name of the layer where the current user started, only if different from `start` layer
-
-Example :
-```javascript
-WA.room.getCurrentRoom((room) => {
-    if (room.id === '42') {
-        console.log(room.map);
-        window.open(room.mapUrl, '_blank');
-    }
-})
-```
-
 ### Changing tiles 
 ```
 WA.room.setTiles(tiles: TileDescriptor[]): void

front/dist/resources/html/gameMenu.html

@@ -49,7 +49,7 @@
             <button id="toggleFullscreen" class="nes-btn">Toggle fullscreen</button>
         </section>
         <section>
-            <button id="enableNotification">Enable notifications</button>
+            <button id="enableNotification" class="nes-btn">Enable notifications</button>
         </section>
         <section id="adminConsoleSection" hidden>
             <button id="adminConsoleButton" class="nes-btn">Admin console</button>

front/package.json

@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@fontsource/press-start-2p": "^4.3.0",
-    "@types/simple-peer": "^9.6.0",
+    "@types/simple-peer": "^9.11.1",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.1",
     "cross-env": "^7.0.3",
@@ -54,7 +54,7 @@
     "quill": "1.3.6",
     "rxjs": "^6.6.3",
     "sanitize-html": "^2.4.0",
-    "simple-peer": "^9.6.2",
+    "simple-peer": "^9.11.0",
     "socket.io-client": "^2.3.0",
     "standardized-audio-context": "^25.2.4"
   },

front/src/Components/Chat/Chat.svelte

@@ -48,7 +48,7 @@
 
 <style lang="scss">
     h1 {
-      font-family: 'Whiteney';
+      font-family: Lato;
 
       span.float-right {
         font-size: 30px;

front/src/Components/Chat/ChatElement.svelte

@@ -29,7 +29,7 @@
 <div class="chatElement">
     <div class="messagePart">
         {#if message.type === ChatMessageTypes.userIncoming}
-            &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} enter <span class="date">({renderDate(message.date)})</span>
+            &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} entered <span class="date">({renderDate(message.date)})</span>
         {:else if message.type === ChatMessageTypes.userOutcoming}
             &lt;&lt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} left <span class="date">({renderDate(message.date)})</span>
         {:else if message.type === ChatMessageTypes.me}
@@ -48,7 +48,7 @@
 
 <style lang="scss">
     h4, p {
-        font-family: 'Whiteney';
+        font-family: Lato;
     }
     div.chatElement {
       display: flex;

front/src/Components/Chat/ChatMessageForm.svelte

@@ -38,20 +38,19 @@
           border-top-left-radius: 4px;
           border: none;
           font-size: 22px;
-          font-family: Whiteney;
+          font-family: Lato;
+          padding-left: 6px;
           min-width: 0; //Needed so that the input doesn't overflow the container in firefox
           outline: none;
         }
         
         button {
           background-color: #42464d;
-          color: white;
           border-bottom-right-radius: 4px;
           border-top-right-radius: 4px;
           border: none;
           border-left: solid black 1px;
           font-size: 16px;
-          font-family: Whiteney;
         }
     }
 </style>

front/src/Components/Video/VideoMediaBox.svelte

@@ -37,9 +37,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    {#if $streamStore }
     <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
-    {/if}
     <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>

front/src/Components/Video/utils.ts

@@ -1,3 +1,6 @@
+import type { UserSimplePeerInterface } from "../../WebRtc/SimplePeer";
+import { STUN_SERVER, TURN_PASSWORD, TURN_SERVER, TURN_USER } from "../../Enum/EnvironmentVariable";
+
 export function getColorByString(str: string): string | null {
     let hash = 0;
     if (str.length === 0) {
@@ -15,7 +18,7 @@ export function getColorByString(str: string): string | null {
     return color;
 }
 
-export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
+export function srcObject(node: HTMLVideoElement, stream: MediaStream | null) {
     node.srcObject = stream;
     return {
         update(newStream: MediaStream) {
@@ -25,3 +28,19 @@ export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         },
     };
 }
+
+export function getIceServersConfig(user: UserSimplePeerInterface): RTCIceServer[] {
+    const config: RTCIceServer[] = [
+        {
+            urls: STUN_SERVER.split(","),
+        },
+    ];
+    if (TURN_SERVER !== "") {
+        config.push({
+            urls: TURN_SERVER.split(","),
+            username: user.webRtcUser || TURN_USER,
+            credential: user.webRtcPassword || TURN_PASSWORD,
+        });
+    }
+    return config;
+}

front/src/WebRtc/ScreenSharingPeer.ts

@@ -1,11 +1,10 @@
 import type * as SimplePeerNamespace from "simple-peer";
-import { mediaManager } from "./MediaManager";
-import { STUN_SERVER, TURN_PASSWORD, TURN_SERVER, TURN_USER } from "../Enum/EnvironmentVariable";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { MESSAGE_TYPE_CONSTRAINT, PeerStatus } from "./VideoPeer";
 import type { UserSimplePeerInterface } from "./SimplePeer";
-import { Readable, readable, writable, Writable } from "svelte/store";
+import { Readable, readable } from "svelte/store";
 import { videoFocusStore } from "../Stores/VideoFocusStore";
+import { getIceServersConfig } from "../Components/Video/utils";
 
 const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
 
@@ -32,21 +31,9 @@ export class ScreenSharingPeer extends Peer {
         stream: MediaStream | null
     ) {
         super({
-            initiator: initiator ? initiator : false,
+            initiator,
-            //reconnectTimer: 10000,
             config: {
-                iceServers: [
+                iceServers: getIceServersConfig(user),
-                    {
-                        urls: STUN_SERVER.split(","),
-                    },
-                    TURN_SERVER !== ""
-                        ? {
-                              urls: TURN_SERVER.split(","),
-                              username: user.webRtcUser || TURN_USER,
-                              credential: user.webRtcPassword || TURN_PASSWORD,
-                          }
-                        : undefined,
-                ].filter((value) => value !== undefined),
             },
         });
 

front/src/WebRtc/VideoPeer.ts

@@ -1,15 +1,14 @@
 import type * as SimplePeerNamespace from "simple-peer";
 import { mediaManager } from "./MediaManager";
-import { STUN_SERVER, TURN_PASSWORD, TURN_SERVER, TURN_USER } from "../Enum/EnvironmentVariable";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { blackListManager } from "./BlackListManager";
 import type { Subscription } from "rxjs";
 import type { UserSimplePeerInterface } from "./SimplePeer";
 import { get, readable, Readable, Unsubscriber } from "svelte/store";
 import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
-import { discussionManager } from "./DiscussionManager";
 import { playersStore } from "../Stores/PlayersStore";
 import { chatMessagesStore, chatVisibilityStore, newChatMessageStore } from "../Stores/ChatStore";
+import { getIceServersConfig } from "../Components/Video/utils";
 
 const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
 
@@ -36,6 +35,7 @@ export class VideoPeer extends Peer {
     public readonly statusStore: Readable<PeerStatus>;
     public readonly constraintsStore: Readable<MediaStreamConstraints | null>;
     private newMessageunsubscriber: Unsubscriber | null = null;
+    private closing: Boolean = false; //this is used to prevent destroy() from being called twice
 
     constructor(
         public user: UserSimplePeerInterface,
@@ -45,21 +45,9 @@ export class VideoPeer extends Peer {
         localStream: MediaStream | null
     ) {
         super({
-            initiator: initiator ? initiator : false,
+            initiator,
-            //reconnectTimer: 10000,
             config: {
-                iceServers: [
+                iceServers: getIceServersConfig(user),
-                    {
-                        urls: STUN_SERVER.split(","),
-                    },
-                    TURN_SERVER !== ""
-                        ? {
-                              urls: TURN_SERVER.split(","),
-                              username: user.webRtcUser || TURN_USER,
-                              credential: user.webRtcPassword || TURN_PASSWORD,
-                          }
-                        : undefined,
-                ].filter((value) => value !== undefined),
             },
         });
 
@@ -262,20 +250,18 @@ export class VideoPeer extends Peer {
     /**
      * This is triggered twice. Once by the server, and once by a remote client disconnecting
      */
-    public destroy(error?: Error): void {
+    public destroy(): void {
         try {
             this._connected = false;
-            if (!this.toClose) {
+            if (!this.toClose || this.closing) {
                 return;
             }
+            this.closing = true;
             this.onBlockSubscribe.unsubscribe();
             this.onUnBlockSubscribe.unsubscribe();
             if (this.newMessageunsubscriber) this.newMessageunsubscriber();
             chatMessagesStore.addOutcomingUser(this.userId);
-            //discussionManager.removeParticipant(this.userId);
+            super.destroy();
-            // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
-            // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
-            super.destroy(error);
         } catch (err) {
             console.error("VideoPeer::destroy", err);
         }

front/yarn.lock

@@ -262,10 +262,10 @@
     "@types/mime" "^1"
     "@types/node" "*"
 
-"@types/simple-peer@^9.6.0":
+"@types/simple-peer@^9.11.1":
-  version "9.6.3"
+  version "9.11.1"
-  resolved "https://registry.yarnpkg.com/@types/simple-peer/-/simple-peer-9.6.3.tgz#aa118a57e036f4ce2059a7e25367526a4764206d"
+  resolved "https://registry.yarnpkg.com/@types/simple-peer/-/simple-peer-9.11.1.tgz#bef6ff1e75178d83438e33aa6a4df2fd98fded1d"
-  integrity sha512-zrXEBch9tF4NgkZDsGR3c1D0kq99M1bBCjzEyL0PVfEWzCIXrK64TuxRz3XKOx1B0KoEQ9kTs+AhMDuQaHy5RQ==
+  integrity sha512-Pzqbau/WlivSXdRC0He2Wz/ANj2wbi4gzJrtysZz93jvOyI2jo/ibMjUe6AvPllFl/UO6QXT/A0Rcp44bDQB5A==
   dependencies:
     "@types/node" "*"
 
@@ -5093,7 +5093,7 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-simple-peer@^9.6.2:
+simple-peer@^9.11.0:
   version "9.11.0"
   resolved "https://registry.yarnpkg.com/simple-peer/-/simple-peer-9.11.0.tgz#e8d27609c7a610c3ddd75767da868e8daab67571"
   integrity sha512-qvdNu/dGMHBm2uQ7oLhQBMhYlrOZC1ywXNCH/i8I4etxR1vrjCnU6ZSQBptndB1gcakjo2+w4OHo7Sjza1SHxg==