Merge pull request #409 from thecodingmachine/fix/cowebsiteConflicts

Fix/cowebsite conflicts

back/src/Enum/EnvironmentVariable.ts

@@ -10,6 +10,7 @@ const CPU_OVERHEAT_THRESHOLD = Number(process.env.CPU_OVERHEAT_THRESHOLD) || 80;
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const JITSI_ISS = process.env.JITSI_ISS || '';
 const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || '';
+const DEV_MODE = process.env.DEV_MODE || false;
 
 export {
     SECRET_KEY,
@@ -21,6 +22,7 @@ export {
     GROUP_RADIUS,
     ALLOW_ARTILLERY,
     CPU_OVERHEAT_THRESHOLD,
+    DEV_MODE,
     JITSI_URL,
     JITSI_ISS,
     SECRET_JITSI_KEY

back/src/Services/IoSocketHelpers.ts

@@ -1,5 +1,6 @@
 import {ExSocketInterface} from "_Model/Websocket/ExSocketInterface";
 import {BatchMessage, ErrorMessage, ServerToClientMessage, SubMessage} from "../Messages/generated/messages_pb";
+import {DEV_MODE} from "../Enum/EnvironmentVariable";
 
 export function emitInBatch(socket: ExSocketInterface, payload: SubMessage): void {
     socket.batchedMessages.addPayload(payload);
@@ -52,6 +53,7 @@ export function emitError(Client: ExSocketInterface, message: string): void {
 export const pongMaxInterval = 30000; // the maximum duration (in ms) between pongs before we shutdown the connexion.
 
 export function refresLogoutTimerOnPong(ws: ExSocketInterface): void {
+    if (DEV_MODE) return; //this feature is disabled in dev mode as it clashes with live reload.
     if(ws.pongTimeout) clearTimeout(ws.pongTimeout);
     ws.pongTimeout = setTimeout(() => {
         ws.close();

docker-compose.yaml

@@ -78,6 +78,7 @@ services:
       ADMIN_API_TOKEN: "$ADMIN_API_TOKEN"
       JITSI_URL: $JITSI_URL
       JITSI_ISS: $JITSI_ISS
+      DEV_MODE: "1"
     volumes:
       - ./back:/usr/src/app
     labels:

front/src/WebRtc/CoWebsiteManager.ts

@@ -16,6 +16,11 @@ class CoWebsiteManager {
     private opened: iframeStates = iframeStates.closed; 
 
     private observers = new Array<CoWebsiteStateChangedCallback>();
+    /**
+     * Quickly going in and out of an iframe trigger can create conflicts between the iframe states.
+     * So we use this promise to queue up every cowebsite state transition
+     */
+    private currentOperationPromise: Promise<void> = Promise.resolve(); 
     
     private close(): HTMLDivElement {
         const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
@@ -52,7 +57,7 @@ class CoWebsiteManager {
         const onTimeoutPromise = new Promise((resolve) => {
             setTimeout(() => resolve(), 2000);
         });
-        Promise.race([onloadPromise, onTimeoutPromise]).then(() => {
+        this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {
             this.open();
             setTimeout(() => {
                 this.fire();
@@ -65,7 +70,7 @@ class CoWebsiteManager {
      */
     public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
         const cowebsiteDiv = this.load();
-        callback(cowebsiteDiv).then(() => {
+        this.currentOperationPromise = this.currentOperationPromise.then(() => callback(cowebsiteDiv)).then(() => {
             this.open();
             setTimeout(() => {
                 this.fire();
@@ -74,14 +79,16 @@ class CoWebsiteManager {
     }
 
     public closeCoWebsite(): Promise<void> {
-        return new Promise((resolve, reject) => {
+        this.currentOperationPromise = this.currentOperationPromise.then(() => new Promise((resolve, reject) => {
+            if(this.opened === iframeStates.closed) resolve(); //this method may be called twice, in case of iframe error for example
             const cowebsiteDiv = this.close();
             this.fire();
             setTimeout(() => {
                 resolve();
                 setTimeout(() => cowebsiteDiv.innerHTML = '', 500)
             }, animationTime)
-        });
+        }));
+        return this.currentOperationPromise;
     }
 
     public getGameSize(): {width: number, height: number} {