Merge branch 'develop' into vite

contrib/docker/.env.prod.template

@@ -13,7 +13,7 @@ DOMAIN=workadventure.localhost
 
 # Subdomains
 # MUST match the DOMAIN variable above
-FRONT_HOST=front.workadventure.localhost
+FRONT_HOST=play.workadventure.localhost
 PUSHER_HOST=pusher.workadventure.localhost
 BACK_HOST=api.workadventure.localhost
 MAPS_HOST=maps.workadventure.localhost

contrib/docker/docker-compose.prod.yaml

@@ -27,10 +27,7 @@ services:
 
 
   front:
-    build:
+    image: thecodingmachine/workadventure-front:${VERSION}
-      context: ../..
-      dockerfile: front/Dockerfile
-    #image: thecodingmachine/workadventure-front:${VERSION}
     environment:
       - DEBUG_MODE
       - JITSI_URL
@@ -60,10 +57,7 @@ services:
     restart: ${RESTART_POLICY}
 
   pusher:
-    build:
+    image: thecodingmachine/workadventure-pusher:${VERSION}
-      context: ../..
-      dockerfile: pusher/Dockerfile
-    #image: thecodingmachine/workadventure-pusher:${VERSION}
     command: yarn run runprod
     environment:
       - SECRET_JITSI_KEY
@@ -77,7 +71,7 @@ services:
       - "traefik.http.routers.pusher.rule=Host(`${PUSHER_HOST}`)"
       - "traefik.http.routers.pusher.entryPoints=web"
       - "traefik.http.services.pusher.loadbalancer.server.port=8080"
-      - "traefik.http.routers.pusher-ssl.rule=Host(${PUSHER_HOST}`)"
+      - "traefik.http.routers.pusher-ssl.rule=Host(`${PUSHER_HOST}`)"
       - "traefik.http.routers.pusher-ssl.entryPoints=websecure"
       - "traefik.http.routers.pusher-ssl.service=pusher"
       - "traefik.http.routers.pusher-ssl.tls=true"
@@ -85,10 +79,7 @@ services:
     restart: ${RESTART_POLICY}
 
   back:
-    build:
+    image: thecodingmachine/workadventure-back:${VERSION}
-      context: ../..
-      dockerfile: back/Dockerfile
-    #image: thecodingmachine/workadventure-back:${VERSION}
     command: yarn run runprod
     environment:
       - SECRET_JITSI_KEY
@@ -119,7 +110,7 @@ services:
     image: matthiasluedtke/iconserver:v3.13.0
     labels:
       - "traefik.http.routers.icon.rule=Host(`${ICON_HOST}`)"
-      - "traefik.http.routers.icon.entryPoints=web,traefik"
+      - "traefik.http.routers.icon.entryPoints=web"
       - "traefik.http.services.icon.loadbalancer.server.port=8080"
       - "traefik.http.routers.icon-ssl.rule=Host(`${ICON_HOST}`)"
       - "traefik.http.routers.icon-ssl.entryPoints=websecure"

front/src/Components/EmbedScreens/CamerasContainer.svelte

@@ -3,7 +3,7 @@
     import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
     import MediaBox from "../Video/MediaBox.svelte";
 
-    export let highlightedEmbedScreen: EmbedScreen | null;
+    export let highlightedEmbedScreen: EmbedScreen | undefined;
     export let full = false;
     $: clickable = !full;
 </script>

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -73,9 +73,9 @@
             $mainCoWebsite !== undefined &&
             $mainCoWebsite.getId() === coWebsite.getId();
         isHighlight =
-            $highlightedEmbedScreen !== null &&
+            $highlightedEmbedScreen !== undefined &&
-            $highlightedEmbedScreen.type === "cowebsite" &&
+            $highlightedEmbedScreen?.type === "cowebsite" &&
-            $highlightedEmbedScreen.embed.getId() === coWebsite.getId();
+            $highlightedEmbedScreen?.embed.getId() === coWebsite.getId();
     }
 </script>
 

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -5,6 +5,7 @@
         audioConstraintStore,
         cameraListStore,
         localStreamStore,
+        localVolumeStore,
         microphoneListStore,
         videoConstraintStore,
     } from "../../Stores/MediaStore";
@@ -38,7 +39,7 @@
 
     let stream: MediaStream | null;
 
-    const unsubscribe = localStreamStore.subscribe((value) => {
+    const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
         if (value.type === "success") {
             stream = value.stream;
 
@@ -59,7 +60,9 @@
         }
     });
 
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+        unsubscribeLocalStreamStore();
+    });
 
     function normalizeDeviceName(label: string): string {
         // remove IDs (that can appear in Chrome, like: "HD Pro Webcam (4df7:4eda)"
@@ -86,7 +89,7 @@
             <img class="background-img" src={cinemaCloseImg} alt="" />
         </div>
     {/if}
-    <HorizontalSoundMeterWidget {stream} />
+    <HorizontalSoundMeterWidget volume={$localVolumeStore} />
 
     <section class="selectWebcamForm">
         {#if $cameraListStore.length > 1}

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -1,50 +1,8 @@
 <script lang="ts">
-    import { AudioContext } from "standardized-audio-context";
+    export let volume = 0;
-    import { SoundMeter } from "../../Phaser/Components/SoundMeter";
-    import { onDestroy } from "svelte";
-
-    export let stream: MediaStream | null;
-    let volume = 0;
 
     const NB_BARS = 20;
 
-    let timeout: ReturnType<typeof setTimeout>;
-    const soundMeter = new SoundMeter();
-    let display = false;
-    let error = false;
-
-    $: {
-        if (stream && stream.getAudioTracks().length > 0) {
-            display = true;
-            soundMeter.connectToSource(stream, new AudioContext());
-
-            if (timeout) {
-                clearInterval(timeout);
-                error = false;
-            }
-
-            timeout = setInterval(() => {
-                try {
-                    volume = parseInt(((soundMeter.getVolume() / 100) * NB_BARS).toFixed(0));
-                } catch (err) {
-                    if (!error) {
-                        console.error(err);
-                        error = true;
-                    }
-                }
-            }, 100);
-        } else {
-            display = false;
-        }
-    }
-
-    onDestroy(() => {
-        soundMeter.stop();
-        if (timeout) {
-            clearInterval(timeout);
-        }
-    });
-
     function color(i: number, volume: number) {
         const red = (255 * i) / NB_BARS;
         const green = 255 * (1 - i / NB_BARS);
@@ -58,7 +16,7 @@
     }
 </script>
 
-<div class="horizontal-sound-meter" class:active={display}>
+<div class="horizontal-sound-meter" class:active={volume !== undefined}>
     {#each [...Array(NB_BARS).keys()] as i (i)}
         <div style={color(i, volume)} />
     {/each}

front/src/Components/MyCamera.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
+    import { localVolumeStore, obtainedMediaConstraintStore } from "../Stores/MediaStore";
     import { localStreamStore, isSilentStore } from "../Stores/MediaStore";
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import { onDestroy, onMount } from "svelte";
@@ -8,7 +8,7 @@
 
     let stream: MediaStream | null;
 
-    const unsubscribe = localStreamStore.subscribe((value) => {
+    const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
         if (value.type === "success") {
             stream = value.stream;
         } else {
@@ -16,7 +16,9 @@
         }
     });
 
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+        unsubscribeLocalStreamStore();
+    });
 
     let isSilent: boolean;
     const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
@@ -51,7 +53,7 @@
         <div class="is-silent">{$LL.camera.my.silentZone()}</div>
     {:else if $localStreamStore.type === "success" && $localStreamStore.stream}
         <video class="my-cam-video" use:srcObject={stream} autoplay muted playsinline />
-        <SoundMeterWidget {stream} />
+        <SoundMeterWidget volume={$localVolumeStore} />
     {/if}
 </div>
 

front/src/Components/SoundMeterWidget.svelte

@@ -1,47 +1,6 @@
 <script lang="ts">
-    import { AudioContext } from "standardized-audio-context";
+    export let volume = 0;
-    import { SoundMeter } from "../Phaser/Components/SoundMeter";
+    let display = true;
-    import { onDestroy } from "svelte";
-
-    export let stream: MediaStream | null;
-    let volume = 0;
-
-    let timeout: ReturnType<typeof setTimeout>;
-    const soundMeter = new SoundMeter();
-    let display = false;
-    let error = false;
-
-    $: {
-        if (stream && stream.getAudioTracks().length > 0) {
-            display = true;
-            soundMeter.connectToSource(stream, new AudioContext());
-
-            if (timeout) {
-                clearInterval(timeout);
-                error = false;
-            }
-
-            timeout = setInterval(() => {
-                try {
-                    volume = soundMeter.getVolume();
-                } catch (err) {
-                    if (!error) {
-                        console.error(err);
-                        error = true;
-                    }
-                }
-            }, 100);
-        } else {
-            display = false;
-        }
-    }
-
-    onDestroy(() => {
-        soundMeter.stop();
-        if (timeout) {
-            clearInterval(timeout);
-        }
-    });
 </script>
 
 <div class="sound-progress" class:active={display}>

front/src/Components/Video/VideoMediaBox.svelte

@@ -18,6 +18,7 @@
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
+    let volumeStore = peer.volumeStore;
     let name = peer.userName;
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
@@ -93,7 +94,7 @@
     />
     <img src={blockSignImg} draggable="false" on:dragstart|preventDefault={noDrag} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
-        <SoundMeterWidget stream={$streamStore} />
+        <SoundMeterWidget volume={$volumeStore} />
     {/if}
 </div>
 

front/src/Phaser/Components/SoundMeter.ts

@@ -1,4 +1,4 @@
-import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
+import { AudioContext, IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
 
 /**
  * Class to measure the sound volume of a media stream
@@ -6,41 +6,15 @@ import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "
 export class SoundMeter {
     private instant: number;
     private clip: number;
-    //private script: ScriptProcessorNode;
     private analyser: IAnalyserNode<IAudioContext> | undefined;
     private dataArray: Uint8Array | undefined;
     private context: IAudioContext | undefined;
     private source: IMediaStreamAudioSourceNode<IAudioContext> | undefined;
 
-    constructor() {
+    constructor(mediaStream: MediaStream) {
         this.instant = 0.0;
         this.clip = 0.0;
-        //this.script = context.createScriptProcessor(2048, 1, 1);
+        this.connectToSource(mediaStream, new AudioContext());
-    }
-
-    private init(context: IAudioContext) {
-        this.context = context;
-        this.analyser = this.context.createAnalyser();
-
-        this.analyser.fftSize = 2048;
-        const bufferLength = this.analyser.fftSize;
-        this.dataArray = new Uint8Array(bufferLength);
-    }
-
-    public connectToSource(stream: MediaStream, context: IAudioContext): void {
-        if (this.source !== undefined) {
-            this.stop();
-        }
-
-        this.init(context);
-
-        this.source = this.context?.createMediaStreamSource(stream);
-        if (this.analyser !== undefined) {
-            this.source?.connect(this.analyser);
-        }
-        //analyser.connect(distortion);
-        //distortion.connect(this.context.destination);
-        //this.analyser.connect(this.context.destination);
     }
 
     public getVolume(): number {
@@ -78,4 +52,29 @@ export class SoundMeter {
         this.dataArray = undefined;
         this.source = undefined;
     }
+
+    private init(context: IAudioContext) {
+        this.context = context;
+        this.analyser = this.context.createAnalyser();
+
+        this.analyser.fftSize = 2048;
+        const bufferLength = this.analyser.fftSize;
+        this.dataArray = new Uint8Array(bufferLength);
+    }
+
+    private connectToSource(stream: MediaStream, context: IAudioContext): void {
+        if (this.source !== undefined) {
+            this.stop();
+        }
+
+        this.init(context);
+
+        this.source = this.context?.createMediaStreamSource(stream);
+        if (this.analyser !== undefined) {
+            this.source?.connect(this.analyser);
+        }
+        //analyser.connect(distortion);
+        //distortion.connect(this.context.destination);
+        //this.analyser.connect(this.context.destination);
+    }
 }

front/src/Phaser/Components/TalkIcon.ts

@@ -0,0 +1,58 @@
+import { Easing } from "../../types";
+
+export class TalkIcon extends Phaser.GameObjects.Image {
+    private shown: boolean;
+    private showAnimationTween?: Phaser.Tweens.Tween;
+
+    private defaultPosition: { x: number; y: number };
+    private defaultScale: number;
+
+    constructor(scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y, "iconTalk");
+
+        this.defaultPosition = { x, y };
+        this.defaultScale = 0.3;
+
+        this.shown = false;
+        this.setAlpha(0);
+        this.setScale(this.defaultScale);
+
+        this.scene.add.existing(this);
+    }
+
+    public show(show: boolean = true, forceClose: boolean = false): void {
+        if (this.shown === show && !forceClose) {
+            return;
+        }
+        this.showAnimation(show, forceClose);
+    }
+
+    private showAnimation(show: boolean = true, forceClose: boolean = false) {
+        if (forceClose && !show) {
+            this.showAnimationTween?.stop();
+        } else if (this.showAnimationTween?.isPlaying()) {
+            return;
+        }
+        this.shown = show;
+        if (show) {
+            this.y += 50;
+            this.scale = 0.05;
+            this.alpha = 0;
+        }
+        this.showAnimationTween = this.scene.tweens.add({
+            targets: [this],
+            duration: 350,
+            alpha: show ? 1 : 0,
+            y: this.defaultPosition.y,
+            scale: this.defaultScale,
+            ease: Easing.BackEaseOut,
+            onComplete: () => {
+                this.showAnimationTween = undefined;
+            },
+        });
+    }
+
+    public isShown(): boolean {
+        return this.shown;
+    }
+}

front/src/Phaser/Entity/Character.ts

@@ -17,6 +17,7 @@ import { Unsubscriber, Writable, writable } from "svelte/store";
 import { createColorStore } from "../../Stores/OutlineColorStore";
 import type { OutlineableInterface } from "../Game/OutlineableInterface";
 import type CancelablePromise from "cancelable-promise";
+import { TalkIcon } from "../Components/TalkIcon";
 
 const playerNameY = -25;
 
@@ -33,6 +34,7 @@ const interactiveRadius = 35;
 export abstract class Character extends Container implements OutlineableInterface {
     private bubble: SpeechBubble | null = null;
     private readonly playerNameText: Text;
+    private readonly talkIcon: TalkIcon;
     public playerName: string;
     public sprites: Map<string, Sprite>;
     protected lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
@@ -102,6 +104,17 @@ export abstract class Character extends Container implements OutlineableInterfac
                 fontSize: 35,
             },
         });
+
+        this.talkIcon = new TalkIcon(scene, 0, -45);
+        this.add(this.talkIcon);
+
+        if (isClickable) {
+            this.setInteractive({
+                hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius),
+                hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
+                useHandCursor: true,
+            });
+        }
         this.playerNameText.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
         this.add(this.playerNameText);
 
@@ -200,6 +213,10 @@ export abstract class Character extends Container implements OutlineableInterfac
         });
     }
 
+    public showTalkIcon(show: boolean = true, forceClose: boolean = false): void {
+        this.talkIcon.show(show, forceClose);
+    }
+
     public addCompanion(name: string, texturePromise?: CancelablePromise<string>): void {
         if (typeof texturePromise !== "undefined") {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);

front/src/Phaser/Game/GameMap.ts

@@ -133,6 +133,18 @@ export class GameMap {
         return grid;
     }
 
+    public getWalkingCostGrid(): number[][] {
+        const grid: number[][] = [];
+        for (let y = 0; y < this.map.height; y += 1) {
+            const row: number[] = [];
+            for (let x = 0; x < this.map.width; x += 1) {
+                row.push(this.getWalkingCostAt(x, y));
+            }
+            grid.push(row);
+        }
+        return grid;
+    }
+
     public getTileDimensions(): { width: number; height: number } {
         return { width: this.map.tilewidth, height: this.map.tileheight };
     }
@@ -345,6 +357,32 @@ export class GameMap {
         return false;
     }
 
+    private getWalkingCostAt(x: number, y: number): number {
+        const bigCost = 100;
+        for (const layer of this.phaserLayers) {
+            if (!layer.visible) {
+                continue;
+            }
+            const tile = layer.getTileAt(x, y);
+            if (!tile) {
+                continue;
+            }
+            if (
+                tile &&
+                (tile.properties[GameMapProperties.EXIT_URL] || tile.properties[GameMapProperties.EXIT_SCENE_URL])
+            ) {
+                return bigCost;
+            }
+            for (const property of layer.layer.properties) {
+                //@ts-ignore
+                if (property.name && property.name === "exitUrl") {
+                    return bigCost;
+                }
+            }
+        }
+        return 0;
+    }
+
     private triggerAllProperties(): void {
         const newProps = this.getProperties(this.key ?? 0);
         const oldProps = this.lastProperties;

front/src/Phaser/Game/GameScene.ts

@@ -91,6 +91,7 @@ import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
+import { localVolumeStore } from "../../Stores/MediaStore";
 import { StringUtils } from "../../Utils/StringUtils";
 import { startLayerNamesStore } from "../../Stores/StartLayerNamesStore";
 import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
@@ -172,6 +173,9 @@ export class GameScene extends DirtyScene {
     private peerStoreUnsubscribe!: Unsubscriber;
     private emoteUnsubscribe!: Unsubscriber;
     private emoteMenuUnsubscribe!: Unsubscriber;
+
+    private volumeStoreUnsubscribers: Map<number, Unsubscriber> = new Map<number, Unsubscriber>();
+    private localVolumeStoreUnsubscriber: Unsubscriber | undefined;
     private followUsersColorStoreUnsubscribe!: Unsubscriber;
 
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
@@ -247,6 +251,7 @@ export class GameScene extends DirtyScene {
                 loadCustomTexture(this.load, texture).catch((e) => console.error(e));
             }
         }
+        this.load.image("iconTalk", "/resources/icons/icon_talking.png");
 
         if (touchScreenManager.supportTouchScreen) {
             this.load.image(joystickBaseKey, joystickBaseImg);
@@ -566,6 +571,7 @@ export class GameScene extends DirtyScene {
         this.pathfindingManager = new PathfindingManager(
             this,
             this.gameMap.getCollisionGrid(),
+            this.gameMap.getWalkingCostGrid(),
             this.gameMap.getTileDimensions()
         );
 
@@ -581,12 +587,6 @@ export class GameScene extends DirtyScene {
             waScaleManager
         );
 
-        this.pathfindingManager = new PathfindingManager(
-            this,
-            this.gameMap.getCollisionGrid(),
-            this.gameMap.getTileDimensions()
-        );
-
         this.activatablesManager = new ActivatablesManager(this.CurrentPlayer);
 
         biggestAvailableAreaStore.recompute();
@@ -640,14 +640,45 @@ export class GameScene extends DirtyScene {
             this.connect();
         }
 
+        const talkIconVolumeTreshold = 10;
         let oldPeerNumber = 0;
         this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
+            this.volumeStoreUnsubscribers.forEach((unsubscribe) => unsubscribe());
+            this.volumeStoreUnsubscribers.clear();
+
+            for (const [key, videoStream] of peers) {
+                this.volumeStoreUnsubscribers.set(
+                    key,
+                    videoStream.volumeStore.subscribe((volume) => {
+                        if (volume) {
+                            this.MapPlayersByKey.get(key)?.showTalkIcon(volume > talkIconVolumeTreshold);
+                        }
+                    })
+                );
+            }
+
             const newPeerNumber = peers.size;
             if (newPeerNumber > oldPeerNumber) {
                 this.playSound("audio-webrtc-in");
             } else if (newPeerNumber < oldPeerNumber) {
                 this.playSound("audio-webrtc-out");
             }
+            if (newPeerNumber > 0) {
+                if (!this.localVolumeStoreUnsubscriber) {
+                    this.localVolumeStoreUnsubscriber = localVolumeStore.subscribe((volume) => {
+                        if (volume) {
+                            this.CurrentPlayer.showTalkIcon(volume > talkIconVolumeTreshold);
+                        }
+                    });
+                }
+            } else {
+                this.CurrentPlayer.showTalkIcon(false, true);
+                this.MapPlayersByKey.forEach((remotePlayer) => remotePlayer.showTalkIcon(false, true));
+                if (this.localVolumeStoreUnsubscriber) {
+                    this.localVolumeStoreUnsubscriber();
+                    this.localVolumeStoreUnsubscriber = undefined;
+                }
+            }
             oldPeerNumber = newPeerNumber;
         });
 
@@ -1404,7 +1435,7 @@ ${escapedMessage}
             phaserLayer.setCollisionByProperty({ collides: true }, visible);
         } else {
             const phaserLayers = this.gameMap.findPhaserLayers(layerName + "/");
-            if (phaserLayers === []) {
+            if (phaserLayers.length === 0) {
                 console.warn(
                     'Could not find layer with name that contains "' +
                         layerName +
@@ -1417,7 +1448,7 @@ ${escapedMessage}
                 phaserLayers[i].setCollisionByProperty({ collides: true }, visible);
             }
         }
-        this.pathfindingManager.setCollisionGrid(this.gameMap.getCollisionGrid());
+        this.pathfindingManager.setCollisionGrid(this.gameMap.getCollisionGrid(), this.gameMap.getWalkingCostGrid());
         this.markDirty();
     }
 

front/src/Stores/EmbedScreensStore.ts

@@ -15,7 +15,7 @@ export type EmbedScreen =
       };
 
 function createHighlightedEmbedScreenStore() {
-    const { subscribe, set, update } = writable<EmbedScreen | null>(null);
+    const { subscribe, set, update } = writable<EmbedScreen | undefined>(undefined);
 
     return {
         subscribe,
@@ -23,7 +23,7 @@ function createHighlightedEmbedScreenStore() {
             set(embedScreen);
         },
         removeHighlight: () => {
-            set(null);
+            set(undefined);
         },
         toggleHighlight: (embedScreen: EmbedScreen) => {
             update((currentEmbedScreen) =>
@@ -36,7 +36,7 @@ function createHighlightedEmbedScreenStore() {
                     currentEmbedScreen.type === "streamable" &&
                     embedScreen.embed.uniqueId !== currentEmbedScreen.embed.uniqueId)
                     ? embedScreen
-                    : null
+                    : undefined
             );
         },
     };

front/src/Stores/MediaStore.ts

@@ -10,6 +10,8 @@ import { myCameraVisibilityStore } from "./MyCameraStoreVisibility";
 import { peerStore } from "./PeerStore";
 import { privacyShutdownStore } from "./PrivacyShutdownStore";
 import { MediaStreamConstraintsError } from "./Errors/MediaStreamConstraintsError";
+import { SoundMeter } from "../Phaser/Components/SoundMeter";
+import { AudioContext } from "standardized-audio-context";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -541,6 +543,41 @@ export const obtainedMediaConstraintStore = derived<Readable<MediaStreamConstrai
     }
 );
 
+export const localVolumeStore = readable<number | undefined>(undefined, (set) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    const unsubscribe = localStreamStore.subscribe((localStreamStoreValue) => {
+        clearInterval(timeout);
+        if (localStreamStoreValue.type === "error") {
+            set(undefined);
+            return;
+        }
+        const mediaStream = localStreamStoreValue.stream;
+
+        if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) {
+            set(undefined);
+            return;
+        }
+        const soundMeter = new SoundMeter(mediaStream);
+        let error = false;
+
+        timeout = setInterval(() => {
+            try {
+                set(soundMeter.getVolume());
+            } catch (err) {
+                if (!error) {
+                    console.error(err);
+                    error = true;
+                }
+            }
+        }, 100);
+    });
+
+    return () => {
+        unsubscribe();
+        clearInterval(timeout);
+    };
+});
+
 /**
  * Device list
  */

front/src/Utils/PathfindingManager.ts

@@ -8,7 +8,12 @@ export class PathfindingManager {
     private grid: number[][];
     private tileDimensions: { width: number; height: number };
 
-    constructor(scene: Phaser.Scene, collisionsGrid: number[][], tileDimensions: { width: number; height: number }) {
+    constructor(
+        scene: Phaser.Scene,
+        collisionsGrid: number[][],
+        walkingCostGrid: number[][],
+        tileDimensions: { width: number; height: number }
+    ) {
         this.scene = scene;
 
         this.easyStar = new EasyStar.js();
@@ -17,10 +22,12 @@ export class PathfindingManager {
         this.grid = collisionsGrid;
         this.tileDimensions = tileDimensions;
         this.setEasyStarGrid(collisionsGrid);
+        this.setWalkingCostGrid(walkingCostGrid);
     }
 
-    public setCollisionGrid(collisionGrid: number[][]): void {
+    public setCollisionGrid(collisionGrid: number[][], walkingCostGrid: number[][]): void {
         this.setEasyStarGrid(collisionGrid);
+        this.setWalkingCostGrid(walkingCostGrid);
     }
 
     public async findPath(
@@ -115,6 +122,14 @@ export class PathfindingManager {
         this.easyStar.setAcceptableTiles([0]); // zeroes are walkable
     }
 
+    private setWalkingCostGrid(grid: number[][]): void {
+        for (let y = 0; y < grid.length; y += 1) {
+            for (let x = 0; x < grid[y].length; x += 1) {
+                this.easyStar.setAdditionalPointCost(x, y, grid[y][x]);
+            }
+        }
+    }
+
     private logGridToTheConsole(grid: number[][]): void {
         let rowNumber = 0;
         for (const row of grid) {

front/src/WebRtc/CoWebsiteManager.ts

@@ -159,9 +159,17 @@ class CoWebsiteManager {
         });
 
         buttonSwipe.addEventListener("click", () => {
+            const mainCoWebsite = this.getMainCoWebsite();
             const highlightedEmbed = get(highlightedEmbedScreen);
             if (highlightedEmbed?.type === "cowebsite") {
                 this.goToMain(highlightedEmbed.embed);
+
+                if (mainCoWebsite) {
+                    highlightedEmbedScreen.toggleHighlight({
+                        type: "cowebsite",
+                        embed: mainCoWebsite,
+                    });
+                }
             }
         });
     }
@@ -553,6 +561,13 @@ class CoWebsiteManager {
         coWebsites.remove(coWebsite);
         coWebsites.add(coWebsite, 0);
 
+        if (mainCoWebsite) {
+            const iframe = mainCoWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "block";
+            }
+        }
+
         if (
             isMediaBreakpointDown("lg") &&
             get(embedScreenLayout) === LayoutMode.Presentation &&
@@ -596,12 +611,20 @@ class CoWebsiteManager {
             .load()
             .then(() => {
                 const mainCoWebsite = this.getMainCoWebsite();
-                if (mainCoWebsite && mainCoWebsite.getId() === coWebsite.getId()) {
+                const highlightedEmbed = get(highlightedEmbedScreen);
-                    this.openMain();
+                if (mainCoWebsite) {
+                    if (mainCoWebsite.getId() === coWebsite.getId()) {
+                        this.openMain();
 
-                    setTimeout(() => {
+                        setTimeout(() => {
-                        this.fire();
+                            this.fire();
-                    }, animationTime);
+                        }, animationTime);
+                    } else if (!highlightedEmbed) {
+                        highlightedEmbedScreen.toggleHighlight({
+                            type: "cowebsite",
+                            embed: coWebsite,
+                        });
+                    }
                 }
                 this.resizeAllIframes();
             })

front/src/WebRtc/VideoPeer.ts

@@ -9,6 +9,9 @@ import { playersStore } from "../Stores/PlayersStore";
 import { chatMessagesStore, newChatMessageSubject } from "../Stores/ChatStore";
 import { getIceServersConfig } from "../Components/Video/utils";
 import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
+import { SoundMeter } from "../Phaser/Components/SoundMeter";
+import { AudioContext } from "standardized-audio-context";
+import { Console } from "console";
 import Peer from "simple-peer/simplepeer.min.js";
 import { Buffer } from "buffer";
 
@@ -32,6 +35,7 @@ export class VideoPeer extends Peer {
     private onBlockSubscribe: Subscription;
     private onUnBlockSubscribe: Subscription;
     public readonly streamStore: Readable<MediaStream | null>;
+    public readonly volumeStore: Readable<number | undefined>;
     public readonly statusStore: Readable<PeerStatus>;
     public readonly constraintsStore: Readable<ObtainedMediaStreamConstraints | null>;
     private newMessageSubscribtion: Subscription | undefined;
@@ -68,6 +72,34 @@ export class VideoPeer extends Peer {
             };
         });
 
+        this.volumeStore = readable<number | undefined>(undefined, (set) => {
+            let timeout: ReturnType<typeof setTimeout>;
+            const unsubscribe = this.streamStore.subscribe((mediaStream) => {
+                if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) {
+                    set(undefined);
+                    return;
+                }
+                const soundMeter = new SoundMeter(mediaStream);
+                let error = false;
+
+                timeout = setInterval(() => {
+                    try {
+                        set(soundMeter.getVolume());
+                    } catch (err) {
+                        if (!error) {
+                            console.error(err);
+                            error = true;
+                        }
+                    }
+                }, 100);
+            });
+
+            return () => {
+                unsubscribe();
+                clearInterval(timeout);
+            };
+        });
+
         this.constraintsStore = readable<ObtainedMediaStreamConstraints | null>(null, (set) => {
             const onData = (chunk: Buffer) => {
                 const message = JSON.parse(chunk.toString("utf8"));

maps/tests/PathfinderAvoidExits/map1.json

@@ -0,0 +1,177 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "height":10,
+         "id":1,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":0.9,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17],
+         "height":10,
+         "id":7,
+         "name":"walls",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":8,
+         "name":"exit",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"exitUrl",
+                 "type":"string",
+                 "value":"map2.json"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":9,
+         "name":"from_exit2",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"startLayer",
+                 "type":"bool",
+                 "value":true
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 27, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":10,
+         "name":"funritures",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":58.0929629319722,
+                 "id":2,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"DO NOT fall into the water or you will drown! Use right-click to move",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":207.776169358213,
+                 "x":78.9920090369007,
+                 "y":34.4126432934483
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":11,
+ "nextobjectid":3,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.7.2",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"..\/tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":16,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":17,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":18,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":19,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":"1.6",
+ "width":10
+}

maps/tests/PathfinderAvoidExits/map2.json

@@ -0,0 +1,184 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "height":10,
+         "id":1,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17],
+         "height":10,
+         "id":7,
+         "name":"walls",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":8,
+         "name":"exit",
+         "opacity":1,
+         "properties":[
+                {
+                 "name":"exitUrl",
+                 "type":"string",
+                 "value":"map1.json#from_exit2"
+                }],
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":19,
+                 "id":2,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"YOU ",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":33.1966362647477,
+                 "x":143.254413856581,
+                 "y":65.4728056229604
+                }, 
+                {
+                 "height":39.3497615262321,
+                 "id":3,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"MS Shell Dlg 2",
+                     "pixelsize":32,
+                     "text":"ARE",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":81.3934036147603,
+                 "x":130.134191004937,
+                 "y":102.423688394277
+                }, 
+                {
+                 "height":124.497486386076,
+                 "id":4,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "color":"#ff0000",
+                     "fontfamily":"MS Shell Dlg 2",
+                     "pixelsize":96,
+                     "text":"DEAD",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":246.869092410677,
+                 "x":41.7733861852564,
+                 "y":157.582233294285
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":9,
+ "nextobjectid":5,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.7.2",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"..\/tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":16,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":17,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":18,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":19,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":"1.6",
+ "width":10
+}

maps/tests/index.html

@@ -88,6 +88,14 @@
                         <a href="#" class="testLink" data-testmap="exit1.json" target="_blank">Test exits</a>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-pathfinder-avoid-exits"> Success <input type="radio" name="test-pathfinder-avoid-exits"> Failure <input type="radio" name="test-pathfinder-avoid-exits" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="PathfinderAvoidExits/map1.json" target="_blank">Test Pathfinder Avoid Exits</a>
+                    </td>
+                </tr>
                 <tr>
                     <td>
                         <input type="radio" name="test-exitSceneUrl"> Success <input type="radio" name="test-exitSceneUrl"> Failure <input type="radio" name="test-exitSceneUrl" checked> Pending

pusher/src/Controller/AuthenticateController.ts

@@ -79,6 +79,7 @@ export class AuthenticateController extends BaseController {
                             if (!code && !nonce) {
                                 res.writeStatus("200");
                                 this.addCorsHeaders(res);
+                                res.writeHeader("Content-Type", "application/json");
                                 return res.end(JSON.stringify({ ...resUserData, authToken: token }));
                             }
                             console.error("Token cannot to be check on OpenId provider");
@@ -91,6 +92,7 @@ export class AuthenticateController extends BaseController {
                         const resCheckTokenAuth = await openIDClient.checkTokenAuth(authTokenData.accessToken);
                         res.writeStatus("200");
                         this.addCorsHeaders(res);
+                        res.writeHeader("Content-Type", "application/json");
                         return res.end(JSON.stringify({ ...resCheckTokenAuth, ...resUserData, authToken: token }));
                     } catch (err) {
                         console.info("User was not connected", err);
@@ -121,6 +123,7 @@ export class AuthenticateController extends BaseController {
 
                 res.writeStatus("200");
                 this.addCorsHeaders(res);
+                res.writeHeader("Content-Type", "application/json");
                 return res.end(JSON.stringify({ ...data, authToken }));
             } catch (e) {
                 console.error("openIDCallback => ERROR", e);
@@ -183,6 +186,7 @@ export class AuthenticateController extends BaseController {
                     const authToken = jwtTokenManager.createAuthToken(email || userUuid);
                     res.writeStatus("200 OK");
                     this.addCorsHeaders(res);
+                    res.writeHeader("Content-Type", "application/json");
                     res.end(
                         JSON.stringify({
                             authToken,
@@ -222,6 +226,7 @@ export class AuthenticateController extends BaseController {
                 const authToken = jwtTokenManager.createAuthToken(userUuid);
                 res.writeStatus("200 OK");
                 this.addCorsHeaders(res);
+                res.writeHeader("Content-Type", "application/json");
                 res.end(
                     JSON.stringify({
                         authToken,

pusher/src/Controller/MapController.ts

@@ -47,6 +47,7 @@ export class MapController extends BaseController {
                 if (!match) {
                     res.writeStatus("404 Not Found");
                     this.addCorsHeaders(res);
+                    res.writeHeader("Content-Type", "application/json");
                     res.end(JSON.stringify({}));
                     return;
                 }
@@ -55,6 +56,7 @@ export class MapController extends BaseController {
 
                 res.writeStatus("200 OK");
                 this.addCorsHeaders(res);
+                res.writeHeader("Content-Type", "application/json");
                 res.end(
                     JSON.stringify({
                         mapUrl,
@@ -106,6 +108,7 @@ export class MapController extends BaseController {
 
                     res.writeStatus("200 OK");
                     this.addCorsHeaders(res);
+                    res.writeHeader("Content-Type", "application/json");
                     res.end(JSON.stringify(mapDetails));
                 } catch (e) {
                     this.errorToResponse(e, res);