Adding Jitsi meet support

front/src/Enum/EnvironmentVariable.ts

@@ -1,5 +1,6 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
 const API_URL = (typeof(window) !== 'undefined' ? window.location.protocol : 'http:') + '//' + (process.env.API_URL || "api.workadventure.localhost");
+const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const RESOLUTION = 3;
 const ZOOM_LEVEL = 1/*3/4*/;
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
@@ -11,5 +12,6 @@ export {
     RESOLUTION,
     ZOOM_LEVEL,
     POSITION_DELAY,
-    MAX_EXTRAPOLATION_TIME
+    MAX_EXTRAPOLATION_TIME,
+    JITSI_URL
 }

front/src/Phaser/Game/GameScene.ts

@@ -9,7 +9,7 @@ import {
     PositionInterface
 } from "../../Connection";
 import {CurrentGamerInterface, hasMovedEventName, Player} from "../Player/Player";
-import {DEBUG_MODE, POSITION_DELAY, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
+import {DEBUG_MODE, JITSI_URL, POSITION_DELAY, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
 import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledTileSet} from "../Map/ITiledMap";
 import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {AddPlayerInterface} from "./AddPlayerInterface";
@@ -423,6 +423,32 @@ export class GameScene extends Phaser.Scene implements CenterListener {
                 CoWebsiteManager.loadCoWebsite(newValue as string);
             }
         });
+        let jitsiApi: any;
+        this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue) => {
+            if (newValue === undefined) {
+                jitsiApi?.dispose();
+                CoWebsiteManager.closeCoWebsite();
+            } else {
+                CoWebsiteManager.insertCoWebsite((cowebsiteDiv => {
+                    const domain = JITSI_URL;
+                    const options = {
+                        roomName: this.instance + "-" + newValue,
+                        width: "100%",
+                        height: "100%",
+                        parentNode: cowebsiteDiv,
+                        configOverwrite: {
+                            prejoinPageEnabled: false
+                        },
+                        interfaceConfigOverwrite: {
+                            SHOW_CHROME_EXTENSION_BANNER: false,
+                            MOBILE_APP_PROMO: false
+                        }
+                    };
+                    jitsiApi = new (window as any).JitsiMeetExternalAPI(domain, options);
+                    jitsiApi.executeCommand('displayName', gameManager.getPlayerName());
+                }))
+            }
+        });
     }
 
     private switchLayoutMode(): void {

front/src/WebRtc/CoWebsiteManager.ts

@@ -14,7 +14,24 @@ export class CoWebsiteManager {
         iframe.id = 'cowebsite-iframe';
         iframe.src = url;
         cowebsiteDiv.appendChild(iframe);
+        //iframe.onload = () => {
+            // onload can be long to trigger. Maybe we should display the website, whatever happens, after 1 second?
+            CoWebsiteManager.fire();
+        //}
+    }
+
+    /**
+     * Just like loadCoWebsite but the div can be filled by the user.
+     */
+    public static insertCoWebsite(callback: (cowebsite: HTMLDivElement) => void): void {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
+        cowebsiteDiv.innerHTML = '';
+
+        callback(cowebsiteDiv);
+        //iframe.onload = () => {
+        // onload can be long to trigger. Maybe we should display the website, whatever happens, after 1 second?
         CoWebsiteManager.fire();
+        //}
     }
 
     public static closeCoWebsite(): void {
@@ -24,8 +41,8 @@ export class CoWebsiteManager {
     }
 
     public static getGameSize(): {width: number, height: number} {
-        const iframe = document.getElementById('cowebsite-iframe');
-        if (iframe === null) {
+        const hasChildren = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite").children.length > 0;
+        if (hasChildren === false) {
             return {
                 width: window.innerWidth,
                 height: window.innerHeight

front/src/index.ts

@@ -1,6 +1,6 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
-import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {cypressAsserter} from "./Cypress/CypressAsserter";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
@@ -13,6 +13,13 @@ import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
 
 //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
 
+// Load Jitsi if the environment variable is set.
+if (JITSI_URL) {
+    const jitsiScript = document.createElement('script');
+    jitsiScript.src = 'https://' + JITSI_URL + '/external_api.js';
+    document.head.appendChild(jitsiScript);
+}
+
 const {width, height} = CoWebsiteManager.getGameSize();
 
 const config: GameConfig = {

front/webpack.config.js

@@ -42,7 +42,7 @@ module.exports = {
         new webpack.ProvidePlugin({
             Phaser: 'phaser'
         }),
-        new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE'])
+        new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE', 'JITSI_URL'])
     ],
 
 };