Merge pull request #1604 from thecodingmachine/develop

Deploy 2021-11-29

front/src/WebRtc/CoWebsiteManager.ts

@@ -15,6 +15,7 @@ const cowebsiteContainerDomId = "cowebsite-container"; // the id of the whole co
 const cowebsiteMainDomId = "cowebsite-slot-0"; // the id of the parent div of the iframe.
 const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes.
 const cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe.
+const cowebsiteAsideHolderDomId = "cowebsite-aside-holder";
 const cowebsiteSubIconsDomId = "cowebsite-sub-icons";
 export const cowebsiteCloseButtonId = "cowebsite-close";
 const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
@@ -54,6 +55,7 @@ class CoWebsiteManager {
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteBufferDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
+    private cowebsiteAsideHolderDom: HTMLDivElement;
     private cowebsiteSubIconsDom: HTMLDivElement;
     private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement
 
@@ -99,6 +101,7 @@ class CoWebsiteManager {
         this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
         this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteBufferDomId);
         this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
+        this.cowebsiteAsideHolderDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideHolderDomId);
         this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteSubIconsDomId);
         this.initResizeListeners();
 
@@ -188,21 +191,23 @@ class CoWebsiteManager {
             this.fire();
         };
 
-        this.cowebsiteAsideDom.addEventListener("mousedown", (event) => {
+        this.cowebsiteAsideHolderDom.addEventListener("mousedown", (event) => {
+            if (this.isFullScreen) return;
             this.cowebsiteMainDom.style.display = "none";
             this.resizing = true;
             document.addEventListener("mousemove", movecallback);
         });
 
         document.addEventListener("mouseup", (event) => {
-            if (!this.resizing) return;
+            if (!this.resizing || this.isFullScreen) return;
             document.removeEventListener("mousemove", movecallback);
             this.cowebsiteMainDom.style.display = "block";
             this.resizing = false;
             this.cowebsiteMainDom.style.display = "flex";
         });
 
-        this.cowebsiteAsideDom.addEventListener("touchstart", (event) => {
+        this.cowebsiteAsideHolderDom.addEventListener("touchstart", (event) => {
+            if (this.isFullScreen) return;
             this.cowebsiteMainDom.style.display = "none";
             this.resizing = true;
             const touchEvent = event.touches[0];
@@ -211,7 +216,7 @@ class CoWebsiteManager {
         });
 
         document.addEventListener("touchend", (event) => {
-            if (!this.resizing) return;
+            if (!this.resizing || this.isFullScreen) return;
             this.previousTouchMoveCoordinates = null;
             document.removeEventListener("touchmove", movecallback);
             this.cowebsiteMainDom.style.display = "block";
@@ -640,17 +645,22 @@ class CoWebsiteManager {
     }
 
     private fullscreen(): void {
+        const openFullscreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId);
+        const closeFullScreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId);
+
         if (this.isFullScreen) {
             this.resetStyleMain();
             this.fire();
             //we don't trigger a resize of the phaser game since it won't be visible anyway.
-            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "inline";
+            this.cowebsiteAsideHolderDom.style.visibility = "visible";
-            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none";
+            openFullscreenImage.style.display = "inline";
+            closeFullScreenImage.style.display = "none";
         } else {
             this.verticalMode ? (this.height = window.innerHeight) : (this.width = window.innerWidth);
             //we don't trigger a resize of the phaser game since it won't be visible anyway.
-            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "none";
+            this.cowebsiteAsideHolderDom.style.visibility = "hidden";
-            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline";
+            openFullscreenImage.style.display = "none";
+            closeFullScreenImage.style.display = "inline";
         }
     }
 }

front/style/cowebsite.scss

@@ -28,7 +28,7 @@
     justify-content: space-between;
 
     #cowebsite-aside-holder {
-      pointer-events: none;
+      background: gray;
       height: 20px;
       flex: 1;
       display: flex;
@@ -38,6 +38,7 @@
 
       img {
         width: 80%;
+        pointer-events: none;
       }
     }
 
@@ -206,12 +207,14 @@
 
     aside {
       width: 30px;
-      cursor: ew-resize;
 
       img {
-        cursor: ew-resize;
         transform: rotate(90deg);
       }
     }
+
+    &-aside-holder {
+      cursor: ew-resize;
+    }
   }
 }

tests/tests/test.ts

@@ -1,19 +1,17 @@
+import {assertLogMessage} from "./utils/log";
+
 const fs = require('fs')
+import { Selector } from 'testcafe';
+import {userAlice} from "./utils/roles";
 
 fixture `Variables`
     .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json`;
 
-test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async t => {
+test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async (t: TestController) => {
     // Let's start by visiting a map that DOES not have the variable.
     fs.copyFileSync('../maps/tests/Variables/Cache/variables_cache_1.json', '../maps/tests/Variables/Cache/variables_tmp.json');
 
-    await t
+    await t.useRole(userAlice);
-        .typeText('input[name="loginSceneName"]', 'foo')
-        .click('button.loginSceneFormSubmit')
-        .click('button.selectCharacterButtonRight')
-        .click('button.selectCharacterButtonRight')
-        .click('button.selectCharacterSceneFormSubmit')
-        .click('button.letsgo');
         //.takeScreenshot('before_switch.png');
 
     // Let's REPLACE the map by a map that has a new variable
@@ -23,19 +21,9 @@ test("Test that variables cache in the back don't prevent setting a variable in
 
     await t.resizeWindow(960, 800);
 
-    await t
+    await t.useRole(userAlice);
-        .typeText('input[name="loginSceneName"]', 'foo')
-        .click('button.loginSceneFormSubmit')
-        .click('button.selectCharacterButtonRight')
-        .click('button.selectCharacterButtonRight')
-        .click('button.selectCharacterSceneFormSubmit')
-        .click('button.letsgo');
         //.takeScreenshot('after_switch.png');
 
-    const messages = await t.getBrowserConsoleMessages();
-
-    const logs = messages['log'];
-
     // Let's check we successfully manage to save the variable value.
     await assertLogMessage(t, 'SUCCESS!');
 
@@ -46,22 +34,3 @@ test("Test that variables cache in the back don't prevent setting a variable in
         console.log(await t.getBrowserConsoleMessages());
     }
 });
-
-/**
- * Tries to find a given log message in the logs (for 10 seconds)
- */
-async function assertLogMessage(t, message: string): Promise<void> {
-    let i = 0;
-    let logs: string[]|undefined;
-    do {
-        const messages = await t.getBrowserConsoleMessages();
-        logs = messages['log'];
-        if (logs.find((str) => str === message)) {
-            break;
-        }
-        await t.wait(1000);
-        i++;
-    } while (i < 10);
-
-    await t.expect(logs).contains(message);
-}

tests/tests/utils/log.ts

@@ -0,0 +1,20 @@
+import { Selector } from 'testcafe';
+
+/**
+ * Tries to find a given log message in the logs (for 10 seconds)
+ */
+export async function assertLogMessage(t: TestController, message: string): Promise<void> {
+    let i = 0;
+    let logs: string[]|undefined;
+    do {
+        const messages = await t.getBrowserConsoleMessages();
+        logs = messages['log'];
+        if (logs.find((str) => str === message)) {
+            break;
+        }
+        await t.wait(1000);
+        i++;
+    } while (i < 10);
+
+    await t.expect(logs).contains(message);
+}

tests/tests/utils/roles.ts

@@ -0,0 +1,20 @@
+import { Role } from 'testcafe';
+
+export const userAlice = Role('http://play.workadventure.localhost/', async t => {
+    await t
+        .typeText('input[name="loginSceneName"]', 'Alice')
+        .click('button.loginSceneFormSubmit')
+        .click('button.selectCharacterButtonRight')
+        .click('button.selectCharacterButtonRight')
+        .click('button.selectCharacterSceneFormSubmit')
+        .click('button.letsgo');
+});
+
+export const userBob = Role('http://play.workadventure.localhost/', async t => {
+    await t
+        .typeText('input[name="loginSceneName"]', 'Bob')
+        .click('button.loginSceneFormSubmit')
+        .click('button.selectCharacterButtonRight')
+        .click('button.selectCharacterSceneFormSubmit')
+        .click('button.letsgo');
+});