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

front/src/WebRtc/CoWebsiteManager.ts

@@ -10,7 +10,7 @@ import { jitsiFactory } from "./JitsiFactory";
 import { gameManager } from "../Phaser/Game/GameManager";
 import { LayoutMode } from "./LayoutManager";
 
-enum iframeStates {
+export enum iframeStates {
     closed = 1,
     loading, // loading an iframe can be slow, so we show some placeholder until it is ready
     opened,
@@ -21,7 +21,7 @@ const gameOverlayDomId = "game-overlay";
 const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes.
 const cowebsiteAsideHolderDomId = "cowebsite-aside-holder";
 const cowebsiteLoaderDomId = "cowebsite-loader";
-export const cowebsiteCloseButtonId = "cowebsite-close";
+const cowebsiteCloseButtonId = "cowebsite-close";
 const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
 const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open";
 const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close";
@@ -43,9 +43,9 @@ export type CoWebsite = {
     closable: boolean;
     allowPolicy: string | undefined;
     allowApi: boolean | undefined;
+    widthPercent?: number | undefined;
     jitsi?: boolean;
     altMessage?: string;
-    widthPercent?: number;
 };
 
 class CoWebsiteManager {
@@ -75,6 +75,10 @@ class CoWebsiteManager {
         this.resizeAllIframes();
     });
 
+    public getMainState() {
+        return this.openedMain;
+    }
+
     get width(): number {
         return this.cowebsiteDom.clientWidth;
     }
@@ -83,8 +87,13 @@ class CoWebsiteManager {
         this.cowebsiteDom.style.width = width + "px";
     }
 
-    set widthPercent(width: number) {
-        this.cowebsiteDom.style.width = width + "%";
+    get maxWidth(): number {
+        let maxWidth = 75 * window.innerWidth;
+        if (maxWidth !== 0) {
+            maxWidth = Math.round(maxWidth / 100);
+        }
+
+        return maxWidth;
     }
 
     get height(): number {
@@ -95,6 +104,15 @@ class CoWebsiteManager {
         this.cowebsiteDom.style.height = height + "px";
     }
 
+    get maxHeight(): number {
+        let maxHeight = 60 * window.innerHeight;
+        if (maxHeight !== 0) {
+            maxHeight = Math.round(maxHeight / 100);
+        }
+
+        return maxHeight;
+    }
+
     get verticalMode(): boolean {
         return window.innerWidth < window.innerHeight;
     }
@@ -192,29 +210,21 @@ class CoWebsiteManager {
 
             if (this.verticalMode) {
                 const tempValue = this.height + y;
-                let maxHeight = 60 * window.innerHeight;
-                if (maxHeight !== 0) {
-                    maxHeight = Math.round(maxHeight / 100);
-                }
 
                 if (tempValue < this.cowebsiteAsideHolderDom.offsetHeight) {
                     this.height = this.cowebsiteAsideHolderDom.offsetHeight;
-                } else if (tempValue > maxHeight) {
-                    this.height = maxHeight;
+                } else if (tempValue > this.maxHeight) {
+                    this.height = this.maxHeight;
                 } else {
                     this.height = tempValue;
                 }
             } else {
                 const tempValue = this.width - x;
-                let maxWidth = 75 * window.innerWidth;
-                if (maxWidth !== 0) {
-                    maxWidth = Math.round(maxWidth / 100);
-                }
 
                 if (tempValue < this.cowebsiteAsideHolderDom.offsetWidth) {
                     this.width = this.cowebsiteAsideHolderDom.offsetWidth;
-                } else if (tempValue > maxWidth) {
-                    this.width = maxWidth;
+                } else if (tempValue > this.maxWidth) {
+                    this.width = this.maxWidth;
                 } else {
                     this.width = tempValue;
                 }
@@ -300,6 +310,27 @@ class CoWebsiteManager {
         });
     }
 
+    public displayMain() {
+        const coWebsite = this.getMainCoWebsite();
+        if (coWebsite) {
+            coWebsite.iframe.style.display = "block";
+        }
+        this.loadMain();
+        this.openMain();
+        this.fire();
+    }
+
+    public hideMain() {
+        const coWebsite = this.getMainCoWebsite();
+        if (coWebsite) {
+            coWebsite.iframe.style.display = "none";
+        }
+        this.cowebsiteDom.classList.add("closing");
+        this.cowebsiteDom.classList.remove("opened");
+        this.openedMain = iframeStates.closed;
+        this.fire();
+    }
+
     private closeMain(): void {
         this.toggleFullScreenIcon(true);
         this.cowebsiteDom.classList.add("closing");
@@ -309,7 +340,7 @@ class CoWebsiteManager {
         this.fire();
     }
 
-    private loadMain(): void {
+    private loadMain(openingWidth?: number): void {
         this.loaderAnimationInterval.interval = setInterval(() => {
             if (!this.loaderAnimationInterval.trails) {
                 this.loaderAnimationInterval.trails = [0, 1, 2];
@@ -338,6 +369,25 @@ class CoWebsiteManager {
                 trail === 3 ? 0 : trail + 1
             );
         }, 200);
+
+        if (!this.verticalMode && openingWidth) {
+            let newWidth = 50;
+
+            if (openingWidth > 100) {
+                newWidth = 100;
+            } else if (openingWidth > 1) {
+                newWidth = openingWidth;
+            }
+
+            newWidth = Math.round((newWidth * this.maxWidth) / 100);
+
+            if (newWidth < this.cowebsiteAsideHolderDom.offsetWidth) {
+                newWidth = this.cowebsiteAsideHolderDom.offsetWidth;
+            }
+
+            this.width = newWidth;
+        }
+
         this.cowebsiteDom.classList.add("opened");
         this.openedMain = iframeStates.loading;
     }
@@ -347,7 +397,6 @@ class CoWebsiteManager {
             this.resizeAllIframes();
         });
         this.openedMain = iframeStates.opened;
-        this.resetStyleMain();
     }
 
     public resetStyleMain() {
@@ -534,10 +583,10 @@ class CoWebsiteManager {
         base: string,
         allowApi?: boolean,
         allowPolicy?: string,
+        widthPercent?: number,
         position?: number,
         closable?: boolean,
-        altMessage?: string,
-        widthPercent?: number
+        altMessage?: string
     ): CoWebsite {
         const iframe = document.createElement("iframe");
         const fullUrl = new URL(url, base);
@@ -551,8 +600,8 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
-            altMessage,
             widthPercent,
+            altMessage,
         };
 
         this.initialiseCowebsite(newCoWebsite, position);
@@ -564,12 +613,13 @@ class CoWebsiteManager {
         iframe: HTMLIFrameElement,
         allowApi?: boolean,
         allowPolicy?: string,
+        widthPercent?: number,
         position?: number,
         closable?: boolean,
         jitsi?: boolean
     ): CoWebsite {
         if (get(coWebsitesNotAsleep).length < 1) {
-            this.loadMain();
+            this.loadMain(widthPercent);
         }
 
         iframe.id = this.generateUniqueId();
@@ -581,6 +631,7 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
+            widthPercent,
             jitsi,
         };
 
@@ -600,7 +651,12 @@ class CoWebsiteManager {
         if (get(coWebsitesNotAsleep).length < 1) {
             coWebsites.remove(coWebsite);
             coWebsites.add(coWebsite, 0);
-            this.loadMain();
+            this.loadMain(coWebsite.widthPercent);
+        }
+
+        // Check if the main is hide
+        if (this.getMainCoWebsite() && this.openedMain === iframeStates.closed) {
+            this.displayMain();
         }
 
         coWebsite.state.set("loading");
@@ -632,9 +688,7 @@ class CoWebsiteManager {
                 .then(() => {
                     if (mainCoWebsite && mainCoWebsite.iframe.id === coWebsite.iframe.id) {
                         this.openMain();
-                        if (coWebsite.widthPercent) {
-                            this.widthPercent = coWebsite.widthPercent;
-                        }
+
                         setTimeout(() => {
                             this.fire();
                         }, animationTime);

front/src/WebRtc/JitsiFactory.ts

@@ -182,7 +182,15 @@ class JitsiFactory {
         const doResolve = (): void => {
             const iframe = coWebsiteManager.getCoWebsiteBuffer().querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
             if (iframe && this.jitsiApi) {
-                const coWebsite = coWebsiteManager.addCoWebsiteFromIframe(iframe, false, undefined, 0, false, true);
+                const coWebsite = coWebsiteManager.addCoWebsiteFromIframe(
+                    iframe,
+                    false,
+                    undefined,
+                    undefined,
+                    0,
+                    false,
+                    true
+                );
 
                 this.jitsiApi.addListener("videoConferenceLeft", () => {
                     this.closeOrUnload(coWebsite);

front/src/WebRtc/LayoutManager.ts

@@ -14,5 +14,6 @@ export enum DivImportance {
 
 export const ON_ACTION_TRIGGER_BUTTON = "onaction";
 export const ON_ACTION_TRIGGER_DISABLE = "disable";
+export const ON_ICON_TRIGGER_BUTTON = "onicon";
 
 export type Box = { xStart: number; yStart: number; xEnd: number; yEnd: number };