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

front/src/Api/desktop/index.ts

@@ -1,5 +1,12 @@
 import { isSilentStore, requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
 import { get } from "svelte/store";
+import { WorkAdventureDesktopApi } from "@wa-preload-app";
+
+declare global {
+    interface Window {
+        WAD: WorkAdventureDesktopApi;
+    }
+}
 
 class DesktopApi {
     isSilent: boolean = false;

front/src/Components/AudioManager/AudioManager.svelte

@@ -13,20 +13,20 @@
     let unsubscriberFileStore: Unsubscriber | null = null;
     let unsubscriberVolumeStore: Unsubscriber | null = null;
 
-    let decreaseWhileTalking: boolean = true;
+    let isAudioAllowed: boolean = true;
 
     onMount(() => {
         let volume = Math.min(localUserStore.getAudioPlayerVolume(), get(audioManagerVolumeStore).volume);
         audioManagerVolumeStore.setVolume(volume);
         audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
 
-        unsubscriberFileStore = audioManagerFileStore.subscribe((src) => {
+        unsubscriberFileStore = audioManagerFileStore.subscribe((src: string) => {
             HTMLAudioPlayer.pause();
             HTMLAudioPlayer.src = src;
             HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
             HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
             HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
-            void HTMLAudioPlayer.play();
+            tryPlay();
         });
         unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
             const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
@@ -52,6 +52,16 @@
         }
     });
 
+    function tryPlay() {
+        void HTMLAudioPlayer.play()
+            .then(() => {
+                isAudioAllowed = true;
+            })
+            .catch(() => {
+                isAudioAllowed = false;
+            });
+    }
+
     function updateVolumeUI() {
         if (get(audioManagerVolumeStore).muted) {
             audioPlayerVolumeIcon.classList.add("muted");
@@ -90,73 +100,67 @@
         audioPlayerVol.blur();
         return false;
     }
-
-    function setDecrease() {
-        audioManagerVolumeStore.setDecreaseWhileTalking(decreaseWhileTalking);
-    }
 </script>
 
 <div class="main-audio-manager nes-container is-rounded">
-    <div class="audio-manager-player-volume">
-        <span
-            id="audioplayer_volume_icon_playing"
-            alt="player volume"
-            bind:this={audioPlayerVolumeIcon}
-            on:click={onMute}
-        >
-            <svg
-                width="2em"
-                height="2em"
-                viewBox="0 0 16 16"
-                class="bi bi-volume-up"
-                fill="white"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
-                />
-                <g id="audioplayer_volume_icon_playing_high">
+    <div class:hidden={!isAudioAllowed}>
+        <div class="audio-manager-player-volume">
+            <span id="audioplayer_volume_icon_playing" bind:this={audioPlayerVolumeIcon} on:click={onMute}>
+                <svg
+                    width="2em"
+                    height="2em"
+                    viewBox="0 0 16 16"
+                    class="bi bi-volume-up"
+                    fill="white"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
                     <path
-                        d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
+                        fill-rule="evenodd"
+                        d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
                     />
-                </g>
-                <g id="audioplayer_volume_icon_playing_mid">
-                    <path
-                        d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
-                    />
-                </g>
-                <g id="audioplayer_volume_icon_playing_low">
-                    <path
-                        d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
-                    />
-                </g>
-            </svg>
-        </span>
-        <input
-            type="range"
-            min="0"
-            max="1"
-            step="0.025"
-            bind:this={audioPlayerVol}
-            on:change={setVolume}
-            on:keydown={disallowKeys}
-        />
-    </div>
-    <div class="audio-manager-reduce-conversation">
-        <label>
-            {$LL.audio.manager.reduce()}
-            <input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease} />
-        </label>
+                    <g id="audioplayer_volume_icon_playing_high">
+                        <path
+                            d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
+                        />
+                    </g>
+                    <g id="audioplayer_volume_icon_playing_mid">
+                        <path
+                            d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
+                        />
+                    </g>
+                    <g id="audioplayer_volume_icon_playing_low">
+                        <path
+                            d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
+                        />
+                    </g>
+                </svg>
+            </span>
+            <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.025"
+                bind:this={audioPlayerVol}
+                on:change={setVolume}
+                on:keydown={disallowKeys}
+            />
+        </div>
         <section class="audio-manager-file">
             <!-- svelte-ignore a11y-media-has-caption -->
             <audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer} />
         </section>
     </div>
+    <div class:hidden={isAudioAllowed}>
+        <button type="button" class="nes-btn" on:click={tryPlay}>{$LL.audio.manager.allow()}</button>
+    </div>
 </div>
 
 <style lang="scss">
-    div.main-audio-manager.nes-container.is-rounded {
+    .hidden {
+        display: none;
+    }
+
+    div.main-audio-manager {
         position: absolute;
         top: 1%;
         max-height: clamp(150px, 10vh, 15vh); //replace @media for small screen

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -44,7 +44,6 @@
 
     async function logOut() {
         disableMenuStores();
-        loginSceneVisibleStore.set(true);
         return connectionManager.logout();
     }
 

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -7,11 +7,13 @@
     import type { Locales } from "../../i18n/i18n-types";
     import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
     import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
+    import { audioManagerVolumeStore } from "../../Stores/AudioManagerStore";
 
     let fullscreen: boolean = localUserStore.getFullscreen();
     let notification: boolean = localUserStore.getNotification() === "granted";
     let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
     let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
+    let decreaseAudioPlayerVolumeWhileTalking: boolean = localUserStore.getDecreaseAudioPlayerVolumeWhileTalking();
     let valueGame: number = localUserStore.getGameQualityValue();
     let valueVideo: number = localUserStore.getVideoQualityValue();
     let valueLocale: string = $locale;
@@ -38,6 +40,8 @@
             change = true;
         }
 
+        audioManagerVolumeStore.setDecreaseWhileTalking(decreaseAudioPlayerVolumeWhileTalking);
+
         if (change) {
             window.location.reload();
         }
@@ -82,6 +86,10 @@
         localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
     }
 
+    function changeDecreaseAudioPlayerVolumeWhileTalking() {
+        localUserStore.setDecreaseAudioPlayerVolumeWhileTalking(decreaseAudioPlayerVolumeWhileTalking);
+    }
+
     function closeMenu() {
         menuVisiblilityStore.set(false);
     }
@@ -197,6 +205,15 @@
             />
             <span>{$LL.menu.settings.ignoreFollowRequest()}</span>
         </label>
+        <label>
+            <input
+                type="checkbox"
+                class="nes-checkbox is-dark"
+                bind:checked={decreaseAudioPlayerVolumeWhileTalking}
+                on:change={changeDecreaseAudioPlayerVolumeWhileTalking}
+            />
+            <span>{$LL.audio.manager.reduce()}</span>
+        </label>
     </section>
 </div>
 

front/src/Connexion/ConnectionManager.ts

@@ -45,8 +45,10 @@ class ConnectionManager {
 
     /**
      * TODO fix me to be move in game manager
+     *
+     * Returns the URL that we need to redirect to to load the OpenID screen, or "null" if no redirection needs to happen.
      */
-    public loadOpenIDScreen() {
+    public loadOpenIDScreen(): URL | null {
         const state = localUserStore.generateState();
         const nonce = localUserStore.generateNonce();
         localUserStore.setAuthToken(null);
@@ -55,11 +57,10 @@ class ConnectionManager {
             loginSceneVisibleIframeStore.set(false);
             return null;
         }
-        const redirectUrl = new URL(`${this._currentRoom.iframeAuthentication}`);
+        const redirectUrl = new URL(`${this._currentRoom.iframeAuthentication}`, window.location.href);
         redirectUrl.searchParams.append("state", state);
         redirectUrl.searchParams.append("nonce", nonce);
         redirectUrl.searchParams.append("playUri", this._currentRoom.key);
-        window.location.assign(redirectUrl.toString());
         return redirectUrl;
     }
 
@@ -83,8 +84,10 @@ class ConnectionManager {
 
     /**
      * Tries to login to the node server and return the starting map url to be loaded
+     *
+     * @return returns a promise to the Room we are going to load OR a pointer to the URL we must redirect to if authentication is needed.
      */
-    public async initGameConnexion(): Promise<Room> {
+    public async initGameConnexion(): Promise<Room | URL> {
         const connexionType = urlManager.getGameConnexionType();
         this.connexionType = connexionType;
         this._currentRoom = null;
@@ -101,8 +104,9 @@ class ConnectionManager {
 
         if (connexionType === GameConnexionTypes.login) {
             this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
-            if (this.loadOpenIDScreen() !== null) {
-                return Promise.reject(new Error("You will be redirect on login page"));
+            const redirect = this.loadOpenIDScreen();
+            if (redirect !== null) {
+                return redirect;
             }
             urlManager.pushRoomIdToUrl(this._currentRoom);
         } else if (connexionType === GameConnexionTypes.jwt) {
@@ -124,8 +128,11 @@ class ConnectionManager {
                 analyticsClient.loggedWithSso();
             } catch (err) {
                 console.error(err);
-                this.loadOpenIDScreen();
-                return Promise.reject(new Error("You will be redirect on login page"));
+                const redirect = this.loadOpenIDScreen();
+                if (redirect === null) {
+                    throw new Error("Unable to redirect on login page.");
+                }
+                return redirect;
             }
             urlManager.pushRoomIdToUrl(this._currentRoom);
         } else if (connexionType === GameConnexionTypes.register) {
@@ -212,8 +219,11 @@ class ConnectionManager {
                             err.response?.data &&
                             err.response.data !== "User cannot to be connected on openid provider")
                     ) {
-                        this.loadOpenIDScreen();
-                        return Promise.reject(new Error("You will be redirect on login page"));
+                        const redirect = this.loadOpenIDScreen();
+                        if (redirect === null) {
+                            throw new Error("Unable to redirect on login page.");
+                        }
+                        return redirect;
                     }
                 }
             }

front/src/Connexion/LocalUserStore.ts

@@ -15,6 +15,7 @@ const helpCameraSettingsShown = "helpCameraSettingsShown";
 const fullscreenKey = "fullscreen";
 const forceCowebsiteTriggerKey = "forceCowebsiteTrigger";
 const ignoreFollowRequests = "ignoreFollowRequests";
+const decreaseAudioPlayerVolumeWhileTalking = "decreaseAudioPlayerVolumeWhileTalking";
 const lastRoomUrl = "lastRoomUrl";
 const authToken = "authToken";
 const state = "state";
@@ -135,6 +136,12 @@ class LocalUserStore {
     getIgnoreFollowRequests(): boolean {
         return localStorage.getItem(ignoreFollowRequests) === "true";
     }
+    setDecreaseAudioPlayerVolumeWhileTalking(value: boolean): void {
+        localStorage.setItem(decreaseAudioPlayerVolumeWhileTalking, value.toString());
+    }
+    getDecreaseAudioPlayerVolumeWhileTalking(): boolean {
+        return localStorage.getItem(decreaseAudioPlayerVolumeWhileTalking) === "true";
+    }
 
     async setLastRoomUrl(roomUrl: string): Promise<void> {
         localStorage.setItem(lastRoomUrl, roomUrl.toString());

front/src/Connexion/RoomConnection.ts

@@ -220,6 +220,7 @@ export class RoomConnection implements RoomConnection {
 
         this.socket.onmessage = (messageEvent) => {
             const arrayBuffer: ArrayBuffer = messageEvent.data;
+            const initCharacterLayers = characterLayers;
 
             const serverToClientMessage = ServerToClientMessageTsProto.decode(new Uint8Array(arrayBuffer));
             //const message = ServerToClientMessage.deserializeBinary(new Uint8Array(arrayBuffer));
@@ -342,12 +343,12 @@ export class RoomConnection implements RoomConnection {
                     this._userRoomToken = roomJoinedMessage.userRoomToken;
 
                     // If one of the URLs sent to us does not exist, let's go to the Woka selection screen.
-                    for (const characterLayer of roomJoinedMessage.characterLayer) {
-                        if (!characterLayer.url) {
-                            this.goToSelectYourWokaScene();
-                            this.closed = true;
-                            break;
-                        }
+                    if (
+                        roomJoinedMessage.characterLayer.length !== initCharacterLayers.length ||
+                        roomJoinedMessage.characterLayer.find((layer) => !layer.url)
+                    ) {
+                        this.goToSelectYourWokaScene();
+                        this.closed = true;
                     }
 
                     if (this.closed) {

front/src/Phaser/Game/GameManager.ts

@@ -9,6 +9,7 @@ import { EnableCameraSceneName } from "../Login/EnableCameraScene";
 import { LoginSceneName } from "../Login/LoginScene";
 import { SelectCharacterSceneName } from "../Login/SelectCharacterScene";
 import { GameScene } from "./GameScene";
+import { EmptySceneName } from "../Login/EmptyScene";
 
 /**
  * This class should be responsible for any scene starting/stopping
@@ -32,7 +33,14 @@ export class GameManager {
 
     public async init(scenePlugin: Phaser.Scenes.ScenePlugin): Promise<string> {
         this.scenePlugin = scenePlugin;
-        this.startRoom = await connectionManager.initGameConnexion();
+        const result = await connectionManager.initGameConnexion();
+        if (result instanceof URL) {
+            window.location.assign(result.toString());
+            // window.location.assign is not immediate and Javascript keeps running after.
+            // so we need to redirect to an empty Phaser scene, waiting for the redirection to take place
+            return EmptySceneName;
+        }
+        this.startRoom = result;
         this.loadMap(this.startRoom);
 
         //If player name was not set show login scene with player name

front/src/Phaser/Login/EmptyScene.ts

@@ -0,0 +1,17 @@
+import { Scene } from "phaser";
+
+export const EmptySceneName = "EmptyScene";
+
+export class EmptyScene extends Scene {
+    constructor() {
+        super({
+            key: EmptySceneName,
+        });
+    }
+
+    preload() {}
+
+    create() {}
+
+    update(time: number, delta: number): void {}
+}

front/src/Phaser/Login/LoginScene.ts

@@ -28,7 +28,10 @@ export class LoginScene extends ResizableScene {
             gameManager.currentStartedRoom &&
             gameManager.currentStartedRoom.authenticationMandatory
         ) {
-            connectionManager.loadOpenIDScreen();
+            const redirect = connectionManager.loadOpenIDScreen();
+            if (redirect !== null) {
+                window.location.assign(redirect.toString());
+            }
             loginSceneVisibleIframeStore.set(true);
         }
         loginSceneVisibleStore.set(true);

front/src/i18n/de-DE/audio.ts

@@ -2,7 +2,8 @@ import type { Translation } from "../i18n-types";
 
 const audio: NonNullable<Translation["audio"]> = {
     manager: {
-        reduce: "Während Unterhaltungen verringern",
+        reduce: "Verringern Sie die Lautstärke des Audioplayers während des Sprechens",
+        allow: "Ton zulassen",
     },
     message: "Sprachnachricht",
 };

front/src/i18n/en-US/audio.ts

@@ -2,7 +2,8 @@ import type { BaseTranslation } from "../i18n-types";
 
 const audio: BaseTranslation = {
     manager: {
-        reduce: "reduce in conversations",
+        reduce: "Decrease audio player volume while speaking",
+        allow: "Allow audio",
     },
     message: "Audio message",
 };

front/src/i18n/fr-FR/audio.ts

@@ -2,7 +2,8 @@ import type { Translation } from "../i18n-types";
 
 const audio: NonNullable<Translation["audio"]> = {
     manager: {
-        reduce: "réduit dans les conversations",
+        reduce: "Diminuer le volume du lecteur audio dans les conversations",
+        allow: "Autoriser l'audio",
     },
     message: "Message audio",
 };

front/src/iframe_api.ts

@@ -21,7 +21,6 @@ import type { Popup } from "./Api/iframe/Ui/Popup";
 import type { Sound } from "./Api/iframe/Sound/Sound";
 import { answerPromises, queryWorkadventure } from "./Api/iframe/IframeApiContribution";
 import camera from "./Api/iframe/camera";
-import {} from "./window";
 
 const globalState = createState("global");
 
@@ -183,6 +182,13 @@ const wa = {
 
 export type WorkAdventureApi = typeof wa;
 
+declare global {
+    interface Window {
+        WA: WorkAdventureApi;
+    }
+    let WA: WorkAdventureApi;
+}
+
 window.WA = wa;
 
 window.addEventListener(

front/src/window.d.ts

@@ -1,10 +0,0 @@
-import { WorkAdventureApi } from "./iframe_api";
-import { WorkAdventureDesktopApi } from "@wa-preload-app";
-
-declare global {
-    interface Window {
-        WA: WorkAdventureApi;
-        WAD: WorkAdventureDesktopApi;
-    }
-    let WA: WorkAdventureApi;
-}