Merge pull request #1583 from thecodingmachine/pretty_ci_front_fix

Fixing running of prettier check on the front

.github/workflows/continuous_integration.yml

@@ -62,18 +62,13 @@ jobs:
         working-directory: "front"
 
       - name: "Pretty"
-        run: yarn run pretty
+        run: yarn run pretty-check
         working-directory: "front"
 
       - name: "Jasmine"
         run: yarn test
         working-directory: "front"
 
- # We will enable prettier checks on front in a few month, when most PRs without prettier have been merged
- #     - name: "Prettier"
- #       run: yarn run pretty-check
- #       working-directory: "front"
-
   continuous-integration-pusher:
     name: "Continuous Integration Pusher"
 

front/src/Api/Events/CloseCoWebsiteEvent.ts

@@ -2,7 +2,7 @@ import * as tg from "generic-type-guard";
 
 export const isCloseCoWebsite = new tg.IsInterface()
     .withProperties({
-        id: tg.isOptional(tg.isString)
+        id: tg.isOptional(tg.isString),
     })
     .get();
 

front/src/Api/Events/IframeEvent.ts

@@ -24,9 +24,7 @@ import type { EmbeddedWebsite } from "../iframe/Room/EmbeddedWebsite";
 import { isCreateEmbeddedWebsiteEvent } from "./EmbeddedWebsiteEvent";
 import type { LoadTilesetEvent } from "./LoadTilesetEvent";
 import { isLoadTilesetEvent } from "./LoadTilesetEvent";
-import type {
+import type { MessageReferenceEvent } from "./ui/TriggerActionMessageEvent";
-    MessageReferenceEvent,
-} from "./ui/TriggerActionMessageEvent";
 import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
 import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
 import type { ChangeLayerEvent } from "./ChangeLayerEvent";
@@ -117,19 +115,19 @@ export const iframeQueryMapTypeGuards = {
     },
     openCoWebsite: {
         query: isOpenCoWebsiteEvent,
-        answer: isCoWebsite
+        answer: isCoWebsite,
     },
     getCoWebsites: {
         query: tg.isUndefined,
-        answer:  tg.isArray(isCoWebsite)
+        answer: tg.isArray(isCoWebsite),
     },
     closeCoWebsite: {
         query: tg.isString,
-        answer: tg.isUndefined
+        answer: tg.isUndefined,
     },
     closeCoWebsites: {
         query: tg.isUndefined,
-        answer: tg.isUndefined
+        answer: tg.isUndefined,
     },
     triggerActionMessage: {
         query: isTriggerActionMessageEvent,

front/src/Api/Events/OpenCoWebsiteEvent.ts

@@ -5,7 +5,7 @@ export const isOpenCoWebsiteEvent = new tg.IsInterface()
         url: tg.isString,
         allowApi: tg.isOptional(tg.isBoolean),
         allowPolicy: tg.isOptional(tg.isString),
-        position: tg.isOptional(tg.isNumber)
+        position: tg.isOptional(tg.isNumber),
     })
     .get();
 

front/src/Api/iframe/nav.ts

@@ -57,7 +57,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
     async getCoWebSites(): Promise<CoWebsite[]> {
         const result = await queryWorkadventure({
             type: "getCoWebsites",
-            data: undefined
+            data: undefined,
         });
         return result.map((cowebsiteEvent) => new CoWebsite(cowebsiteEvent.id, cowebsiteEvent.position));
     }

front/src/Phaser/Game/GameMap.ts

@@ -12,8 +12,7 @@ export type PropertyChangeCallback = (
 
 export type layerChangeCallback = (
     layersChangedByAction: Array<ITiledMapLayer>,
-    allLayersOnNewPosition:  Array<ITiledMapLayer>,
+    allLayersOnNewPosition: Array<ITiledMapLayer>
-
 ) => void;
 
 /**
@@ -81,7 +80,7 @@ export class GameMap {
     }
 
     private getLayersByKey(key: number): Array<ITiledMapLayer> {
-        return this.flatLayers.filter(flatLayer => flatLayer.type === 'tilelayer' && flatLayer.data[key] !== 0);
+        return this.flatLayers.filter((flatLayer) => flatLayer.type === "tilelayer" && flatLayer.data[key] !== 0);
     }
 
     /**
@@ -134,14 +133,13 @@ export class GameMap {
         const enterLayers = new Set(layersByNewKey);
         const leaveLayers = new Set(layersByOldKey);
 
-        enterLayers.forEach(layer => {
+        enterLayers.forEach((layer) => {
             if (leaveLayers.has(layer)) {
                 leaveLayers.delete(layer);
                 enterLayers.delete(layer);
             }
         });
 
-
         if (enterLayers.size > 0) {
             const layerArray = Array.from(enterLayers);
             for (const callback of this.enterLayerCallbacks) {

front/src/Phaser/Game/GameMapProperties.ts

@@ -1,37 +1,37 @@
 export enum GameMapProperties {
-    ALLOW_API = 'allowApi',
+    ALLOW_API = "allowApi",
-    AUDIO_LOOP = 'audioLoop',
+    AUDIO_LOOP = "audioLoop",
-    AUDIO_VOLUME = 'audioVolume',
+    AUDIO_VOLUME = "audioVolume",
-    COLLIDES = 'collides',
+    COLLIDES = "collides",
-    DEFAULT = 'default',
+    DEFAULT = "default",
-    EXIT_URL = 'exitUrl',
+    EXIT_URL = "exitUrl",
-    EXIT_SCENE_URL = 'exitSceneUrl',
+    EXIT_SCENE_URL = "exitSceneUrl",
-    FONT_FAMILY = 'font-family',
+    FONT_FAMILY = "font-family",
-    JITSI_ADMIN_ROOM_TAG = 'jitsiRoomAdminTag',
+    JITSI_ADMIN_ROOM_TAG = "jitsiRoomAdminTag",
-    JITSI_CONFIG = 'jitsiConfig',
+    JITSI_CONFIG = "jitsiConfig",
-    JITSI_INTERFACE_CONFIG = 'jitsiInterfaceConfig',
+    JITSI_INTERFACE_CONFIG = "jitsiInterfaceConfig",
-    JITSI_ROOM = 'jitsiRoom',
+    JITSI_ROOM = "jitsiRoom",
-    JITSI_TRIGGER = 'jitsiTrigger',
+    JITSI_TRIGGER = "jitsiTrigger",
-    JITSI_TRIGGER_MESSAGE = 'jitsiTriggerMessage',
+    JITSI_TRIGGER_MESSAGE = "jitsiTriggerMessage",
-    JITSI_URL = 'jitsiUrl',
+    JITSI_URL = "jitsiUrl",
-    JITSI_WIDTH = 'jitsiWidth',
+    JITSI_WIDTH = "jitsiWidth",
-    NAME = 'name',
+    NAME = "name",
-    OPEN_TAB = 'openTab',
+    OPEN_TAB = "openTab",
-    OPEN_WEBSITE = 'openWebsite',
+    OPEN_WEBSITE = "openWebsite",
-    OPEN_WEBSITE_ALLOW_API = 'openWebsiteAllowApi',
+    OPEN_WEBSITE_ALLOW_API = "openWebsiteAllowApi",
-    OPEN_WEBSITE_POLICY = 'openWebsitePolicy',
+    OPEN_WEBSITE_POLICY = "openWebsitePolicy",
-    OPEN_WEBSITE_WIDTH = 'openWebsiteWidth',
+    OPEN_WEBSITE_WIDTH = "openWebsiteWidth",
-    OPEN_WEBSITE_POSITION = 'openWebsitePosition',
+    OPEN_WEBSITE_POSITION = "openWebsitePosition",
-    OPEN_WEBSITE_TRIGGER = 'openWebsiteTrigger',
+    OPEN_WEBSITE_TRIGGER = "openWebsiteTrigger",
-    OPEN_WEBSITE_TRIGGER_MESSAGE = 'openWebsiteTriggerMessage',
+    OPEN_WEBSITE_TRIGGER_MESSAGE = "openWebsiteTriggerMessage",
-    PLAY_AUDIO = 'playAudio',
+    PLAY_AUDIO = "playAudio",
-    PLAY_AUDIO_LOOP = 'playAudioLoop',
+    PLAY_AUDIO_LOOP = "playAudioLoop",
-    READABLE_BY = 'readableBy',
+    READABLE_BY = "readableBy",
-    SCRIPT = 'script',
+    SCRIPT = "script",
-    SILENT = 'silent',
+    SILENT = "silent",
-    START = 'start',
+    START = "start",
-    START_LAYER = 'startLayer',
+    START_LAYER = "startLayer",
-    URL = 'url',
+    URL = "url",
-    WRITABLE_BY = 'writableBy',
+    WRITABLE_BY = "writableBy",
-    ZONE = 'zone',
+    ZONE = "zone",
 }

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -4,10 +4,8 @@ import { scriptUtils } from "../../Api/ScriptUtils";
 import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
 import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
-import { get } from 'svelte/store';
+import { get } from "svelte/store";
-import {
+import { ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
-    ON_ACTION_TRIGGER_BUTTON,
-} from "../../WebRtc/LayoutManager";
 import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
 
@@ -18,8 +16,8 @@ enum OpenCoWebsiteState {
 }
 
 interface OpenCoWebsite {
-    coWebsite: CoWebsite | undefined,
+    coWebsite: CoWebsite | undefined;
-    state: OpenCoWebsiteState
+    state: OpenCoWebsiteState;
 }
 
 export class GameMapPropertiesListener {
@@ -53,10 +51,10 @@ export class GameMapPropertiesListener {
             }
         });
 
-         // Open a new co-website by the property.
+        // Open a new co-website by the property.
         this.gameMap.onEnterLayer((newLayers) => {
             const handler = () => {
-                newLayers.forEach(layer => {
+                newLayers.forEach((layer) => {
                     if (!layer.properties) {
                         return;
                     }
@@ -69,8 +67,8 @@ export class GameMapPropertiesListener {
                     let websiteTriggerProperty: string | undefined;
                     let websiteTriggerMessageProperty: string | undefined;
 
-                    layer.properties.forEach(property => {
+                    layer.properties.forEach((property) => {
-                        switch(property.name) {
+                        switch (property.name) {
                             case GameMapProperties.OPEN_WEBSITE:
                                 openWebsiteProperty = property.value as string | undefined;
                                 break;
@@ -111,26 +109,28 @@ export class GameMapPropertiesListener {
                     });
 
                     const openWebsiteFunction = () => {
-                        coWebsiteManager.loadCoWebsite(
+                        coWebsiteManager
-                            openWebsiteProperty as string,
+                            .loadCoWebsite(
-                            this.scene.MapUrlFile,
+                                openWebsiteProperty as string,
-                            allowApiProperty,
+                                this.scene.MapUrlFile,
-                            websitePolicyProperty,
+                                allowApiProperty,
-                            websiteWidthProperty,
+                                websitePolicyProperty,
-                            websitePositionProperty,
+                                websiteWidthProperty,
-                        ).then(coWebsite => {
+                                websitePositionProperty
-                            const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
+                            )
-                            if (coWebsiteOpen && coWebsiteOpen.state === OpenCoWebsiteState.MUST_BE_CLOSE) {
+                            .then((coWebsite) => {
-                                coWebsiteManager.closeCoWebsite(coWebsite);
+                                const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
-                                this.coWebsitesOpenByLayer.delete(layer);
+                                if (coWebsiteOpen && coWebsiteOpen.state === OpenCoWebsiteState.MUST_BE_CLOSE) {
-                                this.coWebsitesActionTriggerByLayer.delete(layer);
+                                    coWebsiteManager.closeCoWebsite(coWebsite);
-                            } else {
+                                    this.coWebsitesOpenByLayer.delete(layer);
-                                this.coWebsitesOpenByLayer.set(layer, {
+                                    this.coWebsitesActionTriggerByLayer.delete(layer);
-                                    coWebsite,
+                                } else {
-                                    state: OpenCoWebsiteState.OPENED
+                                    this.coWebsitesOpenByLayer.set(layer, {
-                                });
+                                        coWebsite,
-                            }
+                                        state: OpenCoWebsiteState.OPENED,
-                        });
+                                    });
+                                }
+                            });
 
                         layoutManagerActionStore.removeAction(actionUuid);
                     };
@@ -161,7 +161,7 @@ export class GameMapPropertiesListener {
         // Close opened co-websites on leave the layer who contain the property.
         this.gameMap.onLeaveLayer((oldLayers) => {
             const handler = () => {
-                oldLayers.forEach(layer => {
+                oldLayers.forEach((layer) => {
                     if (!layer.properties) {
                         return;
                     }
@@ -169,8 +169,8 @@ export class GameMapPropertiesListener {
                     let openWebsiteProperty: string | undefined;
                     let websiteTriggerProperty: string | undefined;
 
-                    layer.properties.forEach(property => {
+                    layer.properties.forEach((property) => {
-                        switch(property.name) {
+                        switch (property.name) {
                             case GameMapProperties.OPEN_WEBSITE:
                                 openWebsiteProperty = property.value as string | undefined;
                                 break;
@@ -216,9 +216,10 @@ export class GameMapPropertiesListener {
                         return;
                     }
 
-                    const action = actionStore && actionStore.length > 0 ?
+                    const action =
-                        actionStore.find(action => action.uuid === actionTriggerUuid) : undefined;
+                        actionStore && actionStore.length > 0
-
+                            ? actionStore.find((action) => action.uuid === actionTriggerUuid)
+                            : undefined;
 
                     if (action) {
                         layoutManagerActionStore.removeAction(actionTriggerUuid);

front/src/Stores/LayoutManagerStore.ts

@@ -9,9 +9,7 @@ export interface LayoutManagerAction {
     userInputManager: UserInputManager | undefined;
 }
 
-
 function createLayoutManagerAction() {
-
     const { subscribe, set, update } = writable<LayoutManagerAction[]>([]);
 
     return {

front/src/WebRtc/JitsiFactory.ts

@@ -141,51 +141,55 @@ class JitsiFactory {
         jitsiUrl?: string,
         jitsiWidth?: number
     ): void {
-        coWebsiteManager.addCoWebsite(async (cowebsiteDiv) => {
+        coWebsiteManager.addCoWebsite(
-            // Jitsi meet external API maintains some data in local storage
+            async (cowebsiteDiv) => {
-            // which is sent via the appData URL parameter when joining a
+                // Jitsi meet external API maintains some data in local storage
-            // conference. Problem is that this data grows indefinitely. Thus
+                // which is sent via the appData URL parameter when joining a
-            // after some time the URLs get so huge that loading the iframe
+                // conference. Problem is that this data grows indefinitely. Thus
-            // becomes slow and eventually breaks completely. Thus lets just
+                // after some time the URLs get so huge that loading the iframe
-            // clear jitsi local storage before starting a new conference.
+                // becomes slow and eventually breaks completely. Thus lets just
-            window.localStorage.removeItem("jitsiLocalStorage");
+                // clear jitsi local storage before starting a new conference.
+                window.localStorage.removeItem("jitsiLocalStorage");
 
-            const domain = jitsiUrl || JITSI_URL;
+                const domain = jitsiUrl || JITSI_URL;
-            if (domain === undefined) {
+                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: JitsiOptions = {
-                roomName: roomName,
-                jwt: jwt,
-                width: "100%",
-                height: "100%",
-                parentNode: cowebsiteDiv,
-                configOverwrite: mergeConfig(config),
-                interfaceConfigOverwrite: { ...defaultInterfaceConfig, ...interfaceConfig },
-            };
-            if (!options.jwt) {
-                delete options.jwt;
-            }
-
-            return new Promise((resolve, reject) => {
-                const doResolve = (): void => {
-                    const iframe = cowebsiteDiv.querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
-                    if (iframe === null) {
-                        throw new Error("Could not find Jitsi Iframe");
-                    }
-                    resolve(iframe);
                 }
-                options.onload = () => doResolve(); //we want for the iframe to be loaded before triggering animations.
+                await this.loadJitsiScript(domain);
-                setTimeout(() => doResolve(), 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.addListener("audioMuteStatusChanged", this.audioCallback);
+                const options: JitsiOptions = {
-                this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
+                    roomName: roomName,
-            });
+                    jwt: jwt,
-        }, jitsiWidth, 0);
+                    width: "100%",
+                    height: "100%",
+                    parentNode: cowebsiteDiv,
+                    configOverwrite: mergeConfig(config),
+                    interfaceConfigOverwrite: { ...defaultInterfaceConfig, ...interfaceConfig },
+                };
+                if (!options.jwt) {
+                    delete options.jwt;
+                }
+
+                return new Promise((resolve, reject) => {
+                    const doResolve = (): void => {
+                        const iframe = cowebsiteDiv.querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
+                        if (iframe === null) {
+                            throw new Error("Could not find Jitsi Iframe");
+                        }
+                        resolve(iframe);
+                    };
+                    options.onload = () => doResolve(); //we want for the iframe to be loaded before triggering animations.
+                    setTimeout(() => doResolve(), 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.addListener("audioMuteStatusChanged", this.audioCallback);
+                    this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
+                });
+            },
+            jitsiWidth,
+            0
+        );
     }
 
     public stop() {