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

contrib/docker/docker-compose.prod.yaml

@@ -66,6 +66,7 @@ services:
       API_URL: back:50051
       JITSI_URL: $JITSI_URL
       JITSI_ISS: $JITSI_ISS
+      FRONT_URL: https://play.${DOMAIN}
     labels:
       - "traefik.http.routers.pusher.rule=Host(`pusher.${DOMAIN}`)"
       - "traefik.http.routers.pusher.entryPoints=web,traefik"

deeployer.libsonnet

@@ -101,7 +101,10 @@
       "host": {
         "url": "maps-"+url
       },
-      "ports": [80]
+      "ports": [80],
+      "env": {
+          "FRONT_URL": "https://play-"+url
+      }
     },
     "redis": {
       "image": "redis:6",

docker-compose.single-domain.yaml

@@ -28,7 +28,7 @@ services:
       NODE_ENV: development
       PUSHER_URL: /pusher
       UPLOADER_URL: /uploader
-      ADMIN_URL: /admin
+      #ADMIN_URL: /admin
       MAPS_URL: /maps
       ICON_URL: /icon
       STARTUP_COMMAND_1: ./templater.sh
@@ -92,11 +92,12 @@ services:
       - "traefik.http.routers.pusher-ssl.service=pusher"
 
   maps:
-    image: thecodingmachine/nodejs:12-apache
+    image: thecodingmachine/php:8.1-v4-apache-node12
     environment:
       DEBUG_MODE: "$DEBUG_MODE"
       HOST: "0.0.0.0"
       NODE_ENV: development
+      FRONT_URL: http://play.workadventure.localhost
       #APACHE_DOCUMENT_ROOT: dist/
       #APACHE_EXTENSIONS: headers
       #APACHE_EXTENSION_HEADERS: 1

docker-compose.yaml

@@ -34,7 +34,7 @@ services:
       NODE_ENV: development
       PUSHER_URL: //pusher.workadventure.localhost
       UPLOADER_URL: //uploader.workadventure.localhost
-      ADMIN_URL: //workadventure.localhost
+      #ADMIN_URL: //workadventure.localhost
       ICON_URL: //icon.workadventure.localhost
       STARTUP_COMMAND_1: ./templater.sh
       STARTUP_COMMAND_2: yarn install
@@ -96,11 +96,12 @@ services:
       - "traefik.http.routers.pusher-ssl.service=pusher"
 
   maps:
-    image: thecodingmachine/nodejs:12-apache
+    image: thecodingmachine/php:8.1-v4-apache-node12
     environment:
       DEBUG_MODE: "$DEBUG_MODE"
       HOST: "0.0.0.0"
       NODE_ENV: development
+      FRONT_URL: http://play.workadventure.localhost
       #APACHE_DOCUMENT_ROOT: dist/
       #APACHE_EXTENSIONS: headers
       #APACHE_EXTENSION_HEADERS: 1

front/src/Connexion/ConnectionManager.ts

@@ -164,12 +164,13 @@ class ConnectionManager {
                     console.error(err);
                 }
             } else {
+                const query = urlParams.toString();
                 roomPath =
                     window.location.protocol +
                     "//" +
                     window.location.host +
                     window.location.pathname +
-                    urlParams.toString() + //use urlParams because the token param must be deleted
+                    (query ? "?" + query : "") + //use urlParams because the token param must be deleted
                     window.location.hash;
             }
 

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";
@@ -60,6 +61,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
 
@@ -105,6 +107,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();
 
@@ -194,21 +197,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];
@@ -217,7 +222,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";
@@ -642,17 +647,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;
+    }
   }
 }

front/webpack.config.ts

@@ -189,7 +189,7 @@ module.exports = {
             DISABLE_NOTIFICATIONS: false,
             PUSHER_URL: undefined,
             UPLOADER_URL: null,
-            ADMIN_URL: undefined,
+            ADMIN_URL: null,
             CONTACT_URL: null,
             PROFILE_URL: null,
             ICON_URL: null,

maps/Dockerfile

@@ -1,4 +1,4 @@
-FROM thecodingmachine/nodejs:12-apache
+FROM thecodingmachine/php:8.1-v4-apache-node12
 
 COPY --chown=docker:docker . .
 #RUN yarn install
@@ -6,4 +6,5 @@ COPY --chown=docker:docker . .
 #ENV NODE_ENV=production
 #ENV STARTUP_COMMAND_1="yarn run build"
 #ENV APACHE_DOCUMENT_ROOT=dist/
-RUN sudo a2enmod headers
+#RUN sudo a2enmod headers
+ENV APACHE_EXTENSION_HEADERS=1

maps/tests/EmbeddedWebsite/website_in_map_script.json

@@ -12,7 +12,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"website_in_map_script.html"
+                 "value":"website_in_map_script.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

maps/tests/EmbeddedWebsite/website_in_map_script.php

@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
     <script>
-        var script = document.createElement('script');
-        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-        script.setAttribute('src', document.referrer + 'iframe_api.js');
-        document.head.appendChild(script);
         window.addEventListener('load', () => {
             console.log('On load');
             WA.onInit().then(() => {

maps/tests/Metadata/cowebsiteAllowApi.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-            window.addEventListener('load', () => {
-                WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
-            })
-        </script>
-    </head>
-    <body>
-        <p>Website opened by script.</p>
-    </body>
-</html>

maps/tests/Metadata/cowebsiteAllowApi.js

@@ -1 +1 @@
-WA.nav.openCoWebSite("cowebsiteAllowApi.html", true, "");
+WA.nav.openCoWebSite("cowebsiteAllowApi.php", true, "");

maps/tests/Metadata/cowebsiteAllowApi.php

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+        <script>
+            window.addEventListener('load', () => {
+                WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+            })
+        </script>
+    </head>
+    <body>
+        <p>Website opened by script.</p>
+    </body>
+</html>

maps/tests/Metadata/customIframeMenuApi.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>API in iframe menu</title>
-  <script>
-    var script = document.createElement('script');
-    // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-    // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-    script.setAttribute('src', document.referrer + 'iframe_api.js');
-    document.head.appendChild(script);
-    window.addEventListener('load', () => {
-      WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
-    })
-  </script>
-</head>
-<body style="text-align: center">
-    <p style="color: whitesmoke">This is an iframe in a custom menu.</p>
-</body>
-</html>

maps/tests/Metadata/customIframeMenuApi.php

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>API in iframe menu</title>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+    <script>
+    window.addEventListener('load', () => {
+      WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+    })
+    </script>
+</head>
+<body style="text-align: center">
+    <p style="color: whitesmoke">This is an iframe in a custom menu.</p>
+</body>
+</html>

maps/tests/Metadata/customMenu.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <script>
-        var script = document.createElement('script');
-        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-        script.setAttribute('src', document.referrer + 'iframe_api.js');
-        document.head.appendChild(script);
-        window.addEventListener('load', () => {
-            WA.ui.registerMenuCommand('test', 'customIframeMenu.html', {autoClose: true});
-        })
-    </script>
-</head>
-<body>
-    <p>Add a custom menu</p>
-</body>
-</html>

maps/tests/Metadata/customMenu.js

@@ -7,7 +7,7 @@ WA.ui.registerMenuCommand('custom callback menu', () => {
 WA.ui.registerMenuCommand('custom iframe menu', {iframe: 'customIframeMenu.html'});
 
 WA.room.onEnterZone('iframeMenu', () => {
-    menuIframeApi = WA.ui.registerMenuCommand('IFRAME USE API', {iframe: 'customIframeMenuApi.html', allowApi: true});
+    menuIframeApi = WA.ui.registerMenuCommand('IFRAME USE API', {iframe: 'customIframeMenuApi.php', allowApi: true});
 })
 
 WA.room.onLeaveZone('iframeMenu', () => {

maps/tests/Metadata/customMenu.json

@@ -54,7 +54,7 @@
         {
           "name":"openWebsite",
           "type":"string",
-          "value":"customMenu.html"
+          "value":"customMenu.php"
         },
         {
           "name":"openWebsiteAllowApi",

maps/tests/Metadata/customMenu.php

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+    <script>
+        window.addEventListener('load', () => {
+            WA.ui.registerMenuCommand('test', 'customIframeMenu.html', {autoClose: true});
+        })
+    </script>
+</head>
+<body>
+    <p>Add a custom menu</p>
+</body>
+</html>

maps/tests/Metadata/playerMove.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-            window.addEventListener('load', () => {
-                WA.player.onPlayerMove(console.log);
-            })
-        </script>
-    </head>
-    <body>
-        <p>Log in the console the movement of the current player in the zone of the iframe</p>
-    </body>
-</html>

maps/tests/Metadata/playerMove.json

@@ -36,7 +36,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"playerMove.html"
+                 "value":"playerMove.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

maps/tests/Metadata/playerMove.php

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+        <script>
+            window.addEventListener('load', () => {
+                WA.player.onPlayerMove(console.log);
+            })
+        </script>
+    </head>
+    <body>
+        <p>Log in the console the movement of the current player in the zone of the iframe</p>
+    </body>
+</html>

maps/tests/Metadata/setProperty.json

@@ -36,7 +36,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"setProperty.html"
+                 "value":"setProperty.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

maps/tests/Metadata/setProperty.php

@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
         <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
             window.addEventListener('load', () => {
                 WA.room.setProperty('iframeTest', 'openWebsite', 'https://www.wikipedia.org/');
                 WA.room.setProperty('metadata', 'openWebsite', 'https://www.wikipedia.org/');

maps/tests/Metadata/setTiles.html

@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
         <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
 
             window.addEventListener('load', () => {
                 WA.room.setTiles([

maps/tests/Metadata/setTiles.json

@@ -43,7 +43,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"setTiles.html"
+                 "value":"setTiles.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

maps/tests/Metadata/showHideLayer.html

@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
         <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
             window.addEventListener('load', () => {
                 document.getElementById('show/hideLayer').onclick = () => {
                     if (document.getElementById('show/hideLayer').checked) {

maps/tests/Metadata/showHideLayer.json

@@ -48,7 +48,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"showHideLayer.html"
+                 "value":"showHideLayer.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

maps/tests/Variables/shared_variables.json

@@ -12,7 +12,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"shared_variables.html"
+                 "value":"shared_variables.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

maps/tests/Variables/shared_variables.php

@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
     <script>
-        var script = document.createElement('script');
-        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-        script.setAttribute('src', document.referrer + 'iframe_api.js');
-        document.head.appendChild(script);
         window.addEventListener('load', () => {
             console.log('On load');
             WA.onInit().then(() => {

maps/tests/iframe.php

@@ -1,13 +1,7 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <script>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-        </script>
     </head>
     <body>
         <button id="sendchat">Send chat message</button>

maps/tests/iframe_api.json

@@ -43,7 +43,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"iframe.html"
+                 "value":"iframe.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",

tests/tests/test.ts

@@ -4,8 +4,9 @@ const fs = require('fs')
 import { Selector } from 'testcafe';
 import {userAlice} from "./utils/roles";
 
+// Note: we are also testing that we can connect if the URL contains a random query string
 fixture `Variables`
-    .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json`;
+    .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json?somerandomparam=1`;
 
 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.