All customized logo (#2168)

* Change dynamic logo in reconnecting scene

* Add cowebsite customized logo

* Fix prettier issues

* Fix prettier issues (2)

* Fix login scene PoweredBy

* Delete all console logs

front/src/Components/Login/LoginScene.svelte

@@ -64,7 +64,7 @@
         <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{$LL.login.continue()}</button>
     </section>
     {#if logo !== logoImg && gameManager.currentStartedRoom.showPoweredBy !== false}
-        <section class="text-center powered-by">
+        <section class="text-right powered-by">
             <img src={poweredByWorkAdventureImg} alt="Powered by WorkAdventure" />
         </section>
     {/if}
@@ -144,6 +144,7 @@
             &.powered-by {
                 position: fixed;
                 bottom: 0;
+                right: 10px;
             }
         }
     }

front/src/Components/Menu/MenuIcon.svelte

@@ -11,6 +11,9 @@
     import { showShareLinkMapModalStore } from "../../Stores/ModalStore";
     import LL from "../../i18n/i18n-svelte";
     import { analyticsClient } from "../../Administration/AnalyticsClient";
+    import { gameManager } from "../../Phaser/Game/GameManager";
+
+    let miniLogo = gameManager.currentStartedRoom.miniLogo ?? logoWA;
 
     function showMenu() {
         menuVisiblilityStore.set(!get(menuVisiblilityStore));
@@ -57,7 +60,7 @@
         />
     {:else}
         <img
-            src={logoWA}
+            src={miniLogo}
             alt={$LL.menu.icon.open.menu()}
             class="nes-pointer"
             draggable="false"

front/src/Connexion/Room.ts

@@ -23,6 +23,8 @@ export class Room {
     private _group: string | null = null;
     private _expireOn: Date | undefined;
     private _canReport: boolean = false;
+    private _miniLogo: string | undefined;
+    private _loadingCowebsiteLogo: string | undefined;
     private _loadingLogo: string | undefined;
     private _loginSceneLogo: string | undefined;
     private _showPoweredBy: boolean | undefined = true;
@@ -119,6 +121,8 @@ export class Room {
                     this._expireOn = new Date(data.expireOn);
                 }
                 this._canReport = data.canReport ?? false;
+                this._miniLogo = data.miniLogo ?? undefined;
+                this._loadingCowebsiteLogo = data.loadingCowebsiteLogo ?? undefined;
                 this._loadingLogo = data.loadingLogo ?? undefined;
                 this._loginSceneLogo = data.loginSceneLogo ?? undefined;
                 this._showPoweredBy = data.showPoweredBy ?? true;
@@ -208,10 +212,18 @@ export class Room {
         return this._canReport;
     }
 
+    get loadingCowebsiteLogo(): string | undefined {
+        return this._loadingCowebsiteLogo;
+    }
+
     get loadingLogo(): string | undefined {
         return this._loadingLogo;
     }
 
+    get miniLogo(): string | undefined {
+        return this._miniLogo;
+    }
+
     get loginSceneLogo(): string | undefined {
         return this._loginSceneLogo;
     }

front/src/Phaser/Login/EntryScene.ts

@@ -24,7 +24,6 @@ export class EntryScene extends Scene {
 
     // From the very start, let's preload images used in the ReconnectingScene.
     preload() {
-        this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
         this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -2,6 +2,7 @@ import { TextField } from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import LL from "../../i18n/i18n-svelte";
 import { get } from "svelte/store";
+import { gameManager } from "../Game/GameManager";
 
 export const ReconnectingSceneName = "ReconnectingScene";
 export enum ReconnectingTextures {
@@ -20,7 +21,10 @@ export class ReconnectingScene extends Phaser.Scene {
     }
 
     preload() {
-        this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
+        this.load.image(
+            ReconnectingTextures.icon,
+            gameManager.currentStartedRoom.miniLogo ?? "static/images/favicons/favicon-32x32.png"
+        );
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
         this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });
@@ -30,9 +34,10 @@ export class ReconnectingScene extends Phaser.Scene {
         this.logo = new Image(
             this,
             this.game.renderer.width - 30,
-            this.game.renderer.height - 20,
+            this.game.renderer.height - 30,
             ReconnectingTextures.icon
         );
+        this.logo.setDisplaySize(32, 32);
         this.add.existing(this.logo);
 
         this.reconnectingField = new TextField(

front/src/Stores/MenuStore.ts

@@ -5,6 +5,7 @@ import { CONTACT_URL, IDENTITY_URL, PROFILE_URL } from "../Enum/EnvironmentVaria
 import type { Translation } from "../i18n/i18n-types";
 import axios from "axios";
 import { localUserStore } from "../Connexion/LocalUserStore";
+import { connectionManager } from "../Connexion/ConnectionManager";
 
 export const menuIconVisiblilityStore = writable(false);
 export const menuVisiblilityStore = writable(false);
@@ -183,9 +184,9 @@ export function handleMenuUnregisterEvent(menuName: string) {
 }
 
 export function getProfileUrl() {
-    return PROFILE_URL + `?token=${localUserStore.getAuthToken()}`;
+    return PROFILE_URL + `?token=${localUserStore.getAuthToken()}&playUri=${connectionManager.currentRoom?.key}`;
 }
 
 export function getMeUrl() {
-    return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}`;
+    return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}&playUri=${connectionManager.currentRoom?.key}`;
 }

front/src/WebRtc/CoWebsiteManager.ts

@@ -9,6 +9,7 @@ import { LayoutMode } from "./LayoutManager";
 import type { CoWebsite } from "./CoWebsite/CoWesbite";
 import type CancelablePromise from "cancelable-promise";
 import { analyticsClient } from "../Administration/AnalyticsClient";
+import { gameManager } from "../Phaser/Game/GameManager";
 
 export enum iframeStates {
     closed = 1,
@@ -357,6 +358,16 @@ class CoWebsiteManager {
 
     private activateMainLoaderAnimation() {
         this.desactivateMainLoaderAnimation();
+        const customLogo = gameManager.currentStartedRoom.loadingCowebsiteLogo;
+
+        if (customLogo) {
+            const logo = document.createElement("img");
+            logo.id = "custom-logo";
+            logo.src = customLogo;
+            this.cowebsiteLoaderDom.parentNode?.replaceChild(logo, this.cowebsiteLoaderDom);
+            this.cowebsiteLoaderDom.style.display = "block";
+            return;
+        }
 
         this.cowebsiteLoaderDom.style.display = "block";
         this.loaderAnimationInterval.interval = setInterval(() => {

front/style/cowebsite/_global.scss

@@ -5,6 +5,10 @@
   background-color: rgba(10, 9, 9, 0.8);
   display: none;
 
+  #cowebsite-slot-main #custom-logo{
+    max-width: 30%;
+  }
+
   main {
     iframe {
       width: 100%;

messages/JsonMessages/MapDetailsData.ts

@@ -39,6 +39,11 @@ export const isMapDetailsData = z.object({
         description: 'Whether the "report" feature is enabled or not on this room',
         example: true,
     }),
+    loadingCowebsiteLogo: extendApi(z.optional(z.nullable(z.string())), {
+        description: "The URL of the image to be used on the cowebsite loading page",
+        example: "https://example.com/logo.gif",
+    }),
+    miniLogo: z.optional(z.nullable(z.string())),
     // The URL of the logo image on the loading screen
     loadingLogo: extendApi(z.optional(z.nullable(z.string())), {
         description: "The URL of the image to be used on the loading page",

pusher/src/Controller/AuthenticateController.ts

@@ -418,7 +418,7 @@ export class AuthenticateController extends BaseHttpController {
     profileCallback() {
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         this.app.get("/profile-callback", async (req, res) => {
-            const { token } = parse(req.path_query);
+            const { token, playUri } = parse(req.path_query);
             try {
                 //verify connected by token
                 if (token != undefined) {
@@ -431,7 +431,10 @@ export class AuthenticateController extends BaseHttpController {
 
                         //get login profile
                         res.status(302);
-                        res.setHeader("Location", adminService.getProfileUrl(authTokenData.accessToken));
+                        res.setHeader(
+                            "Location",
+                            adminService.getProfileUrl(authTokenData.accessToken, playUri as string)
+                        );
                         res.send("");
                         return;
                     } catch (error) {
@@ -497,7 +500,7 @@ export class AuthenticateController extends BaseHttpController {
      * @param email
      * @param playUri
      * @param IPAddress
-     * @return 
+     * @return
      |object
      * @private
      */

pusher/src/Services/AdminApi.ts

@@ -457,11 +457,15 @@ class AdminApi implements AdminInterface {
         });
     }
 
-    getProfileUrl(accessToken: string): string {
+    getProfileUrl(accessToken: string, playUri: string): string {
         if (!OPID_PROFILE_SCREEN_PROVIDER) {
             throw new Error("No admin backoffice set!");
         }
-        return `${OPID_PROFILE_SCREEN_PROVIDER}?accessToken=${accessToken}`;
+        return `${OPID_PROFILE_SCREEN_PROVIDER}?accessToken=${accessToken}&playUri=${playUri}`;
+    }
+
+    async logoutOauth(token: string): Promise<void> {
+        await Axios.get(ADMIN_API_URL + `/oauth/logout?token=${token}`);
     }
 }
 

pusher/src/Services/AdminInterface.ts

@@ -71,7 +71,13 @@ export interface AdminInterface {
 
     /**
      * @param accessToken
+     * @param playUri
      * @return string
      */
-    getProfileUrl(accessToken: string): string;
+    getProfileUrl(accessToken: string, playUri: string): string;
+
+    /**
+     * @param token
+     */
+    logoutOauth(token: string): Promise<void>;
 }

pusher/src/Services/LocalAdmin.ts

@@ -47,9 +47,11 @@ class LocalAdmin implements AdminInterface {
             contactPage: null,
             group: null,
             iframeAuthentication: null,
+            miniLogo: null,
             loadingLogo: null,
             loginSceneLogo: null,
             showPoweredBy: true,
+            loadingCowebsiteLogo: null,
         });
     }
 
@@ -84,10 +86,14 @@ class LocalAdmin implements AdminInterface {
         return Promise.reject(new Error("No admin backoffice set!"));
     }
 
-    getProfileUrl(accessToken: string): string {
+    getProfileUrl(accessToken: string, playUri: string): string {
         new Error("No admin backoffice set!");
         return "";
     }
+
+    async logoutOauth(token: string): Promise<void> {
+        return Promise.reject(new Error("No admin backoffice set!"));
+    }
 }
 
 export const localAdmin = new LocalAdmin();