Merge pull request #1405 from jonnytest1/opentab2

openTabPropertyKey (create new props in own file)

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -0,0 +1,55 @@
+import type { GameScene } from "./GameScene";
+import type { GameMap } from "./GameMap";
+import { scriptUtils } from "../../Api/ScriptUtils";
+import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
+import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
+import {
+    ON_ACTION_TRIGGER_BUTTON,
+    TRIGGER_WEBSITE_PROPERTIES,
+    WEBSITE_MESSAGE_PROPERTIES,
+} from "../../WebRtc/LayoutManager";
+
+export class GameMapPropertiesListener {
+    constructor(private scene: GameScene, private gameMap: GameMap) {}
+
+    register() {
+        this.gameMap.onPropertyChange("openTab", (newValue) => {
+            if (typeof newValue == "string" && newValue.length) {
+                scriptUtils.openTab(newValue);
+            }
+        });
+        this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
+            if (newValue === undefined) {
+                layoutManagerActionStore.removeAction("openWebsite");
+                coWebsiteManager.closeCoWebsite();
+            } else {
+                const openWebsiteFunction = () => {
+                    coWebsiteManager.loadCoWebsite(
+                        newValue as string,
+                        this.scene.MapUrlFile,
+                        allProps.get("openWebsiteAllowApi") as boolean | undefined,
+                        allProps.get("openWebsitePolicy") as string | undefined,
+                        allProps.get("openWebsiteWidth") as number | undefined
+                    );
+                    layoutManagerActionStore.removeAction("openWebsite");
+                };
+                const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
+                if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
+                    let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
+                    if (message === undefined) {
+                        message = "Press SPACE or touch here to open web site";
+                    }
+                    layoutManagerActionStore.addAction({
+                        uuid: "openWebsite",
+                        type: "message",
+                        message: message,
+                        callback: () => openWebsiteFunction(),
+                        userInputManager: this.scene.userInputManager,
+                    });
+                } else {
+                    openWebsiteFunction();
+                }
+            }
+        });
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -92,6 +92,7 @@ import Tileset = Phaser.Tilemaps.Tileset;
 import { userIsAdminStore } from "../../Stores/GameStore";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
+import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -580,6 +581,7 @@ export class GameScene extends DirtyScene {
             this.updateCameraOffset(box)
         );
 
+        new GameMapPropertiesListener(this, this.gameMap).register();
         this.triggerOnMapLayerPropertyChange();
 
         if (!this.room.isDisconnected()) {
@@ -825,40 +827,7 @@ export class GameScene extends DirtyScene {
                 }, 2000);
             }
         });
-        this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
-            if (newValue === undefined) {
-                layoutManagerActionStore.removeAction("openWebsite");
-                coWebsiteManager.closeCoWebsite();
-            } else {
-                const openWebsiteFunction = () => {
-                    coWebsiteManager.loadCoWebsite(
-                        newValue as string,
-                        this.MapUrlFile,
-                        allProps.get("openWebsiteAllowApi") as boolean | undefined,
-                        allProps.get("openWebsitePolicy") as string | undefined,
-                        allProps.get("openWebsiteWidth") as number | undefined
-                    );
-                    layoutManagerActionStore.removeAction("openWebsite");
-                };
 
-                const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
-                if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
-                    let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
-                    if (message === undefined) {
-                        message = "Press SPACE or touch here to open web site";
-                    }
-                    layoutManagerActionStore.addAction({
-                        uuid: "openWebsite",
-                        type: "message",
-                        message: message,
-                        callback: () => openWebsiteFunction(),
-                        userInputManager: this.userInputManager,
-                    });
-                } else {
-                    openWebsiteFunction();
-                }
-            }
-        });
         this.gameMap.onPropertyChange("jitsiRoom", (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
                 layoutManagerActionStore.removeAction("jitsi");

front/src/WebRtc/CoWebsiteManager.ts

@@ -166,7 +166,13 @@ class CoWebsiteManager {
         return iframe;
     }
 
-    public loadCoWebsite(url: string, base: string, allowApi?: boolean, allowPolicy?: string, widthPercent?: number): void {
+    public loadCoWebsite(
+        url: string,
+        base: string,
+        allowApi?: boolean,
+        allowPolicy?: string,
+        widthPercent?: number
+    ): void {
         this.load();
         this.cowebsiteMainDom.innerHTML = ``;
 

front/src/WebRtc/JitsiFactory.ts

@@ -1,37 +1,67 @@
-import {JITSI_URL} from "../Enum/EnvironmentVariable";
+import { JITSI_URL } from "../Enum/EnvironmentVariable";
-import {mediaManager} from "./MediaManager";
+import { coWebsiteManager } from "./CoWebsiteManager";
-import {coWebsiteManager} from "./CoWebsiteManager";
+import { requestedCameraState, requestedMicrophoneState } from "../Stores/MediaStore";
-import {requestedCameraState, requestedMicrophoneState} from "../Stores/MediaStore";
+import { get } from "svelte/store";
-import {get} from "svelte/store";
-declare const window:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 interface jitsiConfigInterface {
-    startWithAudioMuted: boolean
+    startWithAudioMuted: boolean;
-    startWithVideoMuted: boolean
+    startWithVideoMuted: boolean;
-    prejoinPageEnabled: boolean
+    prejoinPageEnabled: boolean;
 }
 
-const getDefaultConfig = () : jitsiConfigInterface => {
+interface JitsiOptions {
-    return {
+    jwt?: string;
-        startWithAudioMuted: !get(requestedMicrophoneState),
+    roomName: string;
-        startWithVideoMuted: !get(requestedCameraState),
+    width: string;
-        prejoinPageEnabled: false
+    height: string;
+    parentNode: HTMLElement;
+    configOverwrite: jitsiConfigInterface;
+    interfaceConfigOverwrite: typeof defaultInterfaceConfig;
+    onload?: Function;
+}
+
+interface JitsiApi {
+    executeCommand: (command: string, ...args: Array<unknown>) => void;
+
+    addListener: (type: string, callback: Function) => void;
+    removeListener: (type: string, callback: Function) => void;
+
+    dispose: () => void;
+}
+
+declare global {
+    interface Window {
+        JitsiMeetExternalAPI: new (domain: string, options: JitsiOptions) => JitsiApi;
     }
 }
 
+const getDefaultConfig = (): jitsiConfigInterface => {
+    return {
+        startWithAudioMuted: !get(requestedMicrophoneState),
+        startWithVideoMuted: !get(requestedCameraState),
+        prejoinPageEnabled: false,
+    };
+};
+
 const mergeConfig = (config?: object) => {
     const currentDefaultConfig = getDefaultConfig();
-    if(!config){
+    if (!config) {
         return currentDefaultConfig;
     }
     return {
         ...currentDefaultConfig,
         ...config,
-        startWithAudioMuted: (config as jitsiConfigInterface).startWithAudioMuted ? true : currentDefaultConfig.startWithAudioMuted,
+        startWithAudioMuted: (config as jitsiConfigInterface).startWithAudioMuted
-        startWithVideoMuted: (config as jitsiConfigInterface).startWithVideoMuted ? true : currentDefaultConfig.startWithVideoMuted,
+            ? true
-        prejoinPageEnabled: (config as jitsiConfigInterface).prejoinPageEnabled ? true : currentDefaultConfig.prejoinPageEnabled
+            : currentDefaultConfig.startWithAudioMuted,
-    }
+        startWithVideoMuted: (config as jitsiConfigInterface).startWithVideoMuted
-}
+            ? true
+            : currentDefaultConfig.startWithVideoMuted,
+        prejoinPageEnabled: (config as jitsiConfigInterface).prejoinPageEnabled
+            ? true
+            : currentDefaultConfig.prejoinPageEnabled,
+    };
+};
 
 const defaultInterfaceConfig = {
     SHOW_CHROME_EXTENSION_BANNER: false,
@@ -49,28 +79,48 @@ const defaultInterfaceConfig = {
     SHOW_WATERMARK_FOR_GUESTS: false,
 
     TOOLBAR_BUTTONS: [
-        'microphone', 'camera', 'closedcaptions', 'desktop', /*'embedmeeting',*/ 'fullscreen',
+        "microphone",
-        'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
+        "camera",
-        'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
+        "closedcaptions",
-        'videoquality', 'filmstrip', /*'invite',*/ 'feedback', 'stats', 'shortcuts',
+        "desktop",
-        'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', /*'security'*/
+        /*'embedmeeting',*/ "fullscreen",
+        "fodeviceselection",
+        "hangup",
+        "profile",
+        "chat",
+        "recording",
+        "livestreaming",
+        "etherpad",
+        "sharedvideo",
+        "settings",
+        "raisehand",
+        "videoquality",
+        "filmstrip",
+        /*'invite',*/ "feedback",
+        "stats",
+        "shortcuts",
+        "tileview",
+        "videobackgroundblur",
+        "download",
+        "help",
+        "mute-everyone" /*'security'*/,
     ],
 };
 
 const slugify = (...args: (string | number)[]): string => {
-    const value = args.join(' ')
+    const value = args.join(" ");
 
     return value
-        .normalize('NFD') // split an accented letter in the base letter and the accent
+        .normalize("NFD") // split an accented letter in the base letter and the accent
-        .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
+        .replace(/[\u0300-\u036f]/g, "") // remove all previously split accents
         .toLowerCase()
         .trim()
-        .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
+        .replace(/[^a-z0-9 ]/g, "") // remove all chars not letters, numbers and spaces (to be replaced)
-        .replace(/\s+/g, '-') // separator
+        .replace(/\s+/g, "-"); // separator
-}
+};
 
 class JitsiFactory {
-    private jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+    private jitsiApi?: JitsiApi;
     private audioCallback = this.onAudioChange.bind(this);
     private videoCallback = this.onVideoChange.bind(this);
     private jitsiScriptLoaded: boolean = false;
@@ -79,11 +129,19 @@ class JitsiFactory {
      * Slugifies the room name and prepends the room name with the instance
      */
     public getRoomName(roomName: string, instance: string): string {
-        return slugify(instance.replace('/', '-') + "-" + roomName);
+        return slugify(instance.replace("/", "-") + "-" + roomName);
     }
 
-    public start(roomName: string, playerName:string, jwt?: string, config?: object, interfaceConfig?: object, jitsiUrl?: string, jitsiWidth?: number): void {
+    public start(
-        coWebsiteManager.insertCoWebsite((async cowebsiteDiv => {
+        roomName: string,
+        playerName: string,
+        jwt?: string,
+        config?: object,
+        interfaceConfig?: object,
+        jitsiUrl?: string,
+        jitsiWidth?: number
+    ): void {
+        coWebsiteManager.insertCoWebsite(async (cowebsiteDiv) => {
             // Jitsi meet external API maintains some data in local storage
             // which is sent via the appData URL parameter when joining a
             // conference. Problem is that this data grows indefinitely. Thus
@@ -94,18 +152,18 @@ class JitsiFactory {
 
             const domain = jitsiUrl || JITSI_URL;
             if (domain === undefined) {
-                throw new Error('Missing JITSI_URL environment variable or jitsiUrl parameter in the map.')
+                throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
             }
             await this.loadJitsiScript(domain);
 
-            const options: any = { // eslint-disable-line @typescript-eslint/no-explicit-any
+            const options: JitsiOptions = {
                 roomName: roomName,
                 jwt: jwt,
                 width: "100%",
                 height: "100%",
                 parentNode: cowebsiteDiv,
                 configOverwrite: mergeConfig(config),
-                interfaceConfigOverwrite: {...defaultInterfaceConfig, ...interfaceConfig}
+                interfaceConfigOverwrite: { ...defaultInterfaceConfig, ...interfaceConfig },
             };
             if (!options.jwt) {
                 delete options.jwt;
@@ -115,25 +173,25 @@ class JitsiFactory {
                 options.onload = () => resolve(); //we want for the iframe to be loaded before triggering animations.
                 setTimeout(() => resolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load
                 this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
-                this.jitsiApi.executeCommand('displayName', playerName);
+                this.jitsiApi.executeCommand("displayName", playerName);
 
-                this.jitsiApi.addListener('audioMuteStatusChanged', this.audioCallback);
+                this.jitsiApi.addListener("audioMuteStatusChanged", this.audioCallback);
-                this.jitsiApi.addListener('videoMuteStatusChanged', this.videoCallback);
+                this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
             });
-        }), jitsiWidth);
+        }, jitsiWidth);
     }
 
     public async stop(): Promise<void> {
-        if(!this.jitsiApi){
+        if (!this.jitsiApi) {
             return;
         }
         await coWebsiteManager.closeCoWebsite();
-        this.jitsiApi.removeListener('audioMuteStatusChanged', this.audioCallback);
+        this.jitsiApi.removeListener("audioMuteStatusChanged", this.audioCallback);
-        this.jitsiApi.removeListener('videoMuteStatusChanged', this.videoCallback);
+        this.jitsiApi.removeListener("videoMuteStatusChanged", this.videoCallback);
         this.jitsiApi?.dispose();
     }
 
-    private onAudioChange({muted}: {muted: boolean}): void {
+    private onAudioChange({ muted }: { muted: boolean }): void {
         if (muted) {
             requestedMicrophoneState.disableMicrophone();
         } else {
@@ -141,7 +199,7 @@ class JitsiFactory {
         }
     }
 
-    private onVideoChange({muted}: {muted: boolean}): void {
+    private onVideoChange({ muted }: { muted: boolean }): void {
         if (muted) {
             requestedCameraState.disableWebcam();
         } else {
@@ -159,20 +217,17 @@ class JitsiFactory {
             this.jitsiScriptLoaded = true;
 
             // Load Jitsi if the environment variable is set.
-            const jitsiScript = document.createElement('script');
+            const jitsiScript = document.createElement("script");
-            jitsiScript.src = 'https://' + domain + '/external_api.js';
+            jitsiScript.src = "https://" + domain + "/external_api.js";
             jitsiScript.onload = () => {
                 resolve();
-            }
+            };
             jitsiScript.onerror = () => {
                 reject();
-            }
+            };
 
             document.head.appendChild(jitsiScript);
-
+        });
-        })
-
-
     }
 }