Re-implement set width of main cowebsite

front/src/Api/Events/OpenCoWebsiteEvent.ts

@@ -5,6 +5,7 @@ export const isOpenCoWebsiteEvent = new tg.IsInterface()
         url: tg.isString,
         allowApi: tg.isOptional(tg.isBoolean),
         allowPolicy: tg.isOptional(tg.isString),
+        widthPercent: tg.isOptional(tg.isNumber),
         position: tg.isOptional(tg.isNumber),
         closable: tg.isOptional(tg.isBoolean),
         lazy: tg.isOptional(tg.isBoolean),

front/src/Api/iframe/nav.ts

@@ -45,6 +45,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
         url: string,
         allowApi?: boolean,
         allowPolicy?: string,
+        widthPercent?: number,
         position?: number,
         closable?: boolean,
         lazy?: boolean
@@ -55,6 +56,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
                 url,
                 allowApi,
                 allowPolicy,
+                widthPercent,
                 position,
                 closable,
                 lazy,

front/src/Phaser/Game/GameMapProperties.ts

@@ -20,6 +20,7 @@ export enum GameMapProperties {
     OPEN_WEBSITE = "openWebsite",
     OPEN_WEBSITE_ALLOW_API = "openWebsiteAllowApi",
     OPEN_WEBSITE_POLICY = "openWebsitePolicy",
+    OPEN_WEBSITE_WIDTH = "openWebsiteWidth",
     OPEN_WEBSITE_POSITION = "openWebsitePosition",
     OPEN_WEBSITE_TRIGGER = "openWebsiteTrigger",
     OPEN_WEBSITE_TRIGGER_MESSAGE = "openWebsiteTriggerMessage",

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -9,7 +9,6 @@ import { get } from "svelte/store";
 import { ON_ACTION_TRIGGER_BUTTON, ON_ICON_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
 import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
-import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
 
 enum OpenCoWebsiteState {
     ASLEEP,
@@ -66,6 +65,7 @@ export class GameMapPropertiesListener {
                     let openWebsiteProperty: string | undefined;
                     let allowApiProperty: boolean | undefined;
                     let websitePolicyProperty: string | undefined;
+                    let websiteWidthProperty: number | undefined;
                     let websitePositionProperty: number | undefined;
                     let websiteTriggerProperty: string | undefined;
                     let websiteTriggerMessageProperty: string | undefined;
@@ -81,6 +81,9 @@ export class GameMapPropertiesListener {
                             case GameMapProperties.OPEN_WEBSITE_POLICY:
                                 websitePolicyProperty = property.value as string | undefined;
                                 break;
+                            case GameMapProperties.OPEN_WEBSITE_WIDTH:
+                                websiteWidthProperty = property.value as number | undefined;
+                                break;
                             case GameMapProperties.OPEN_WEBSITE_POSITION:
                                 websitePositionProperty = property.value as number | undefined;
                                 break;
@@ -135,17 +138,13 @@ export class GameMapPropertiesListener {
                         layoutManagerActionStore.removeAction(actionId);
                     };
 
-                    const openCoWebsiteFunction = (
+                    const openCoWebsiteFunction = () => {
-                        url: string | undefined,
-                        allowApi: boolean | undefined,
-                        policy: string | undefined,
-                        position: number | undefined
-                    ) => {
                         const coWebsite = coWebsiteManager.addCoWebsite(
-                            url ?? "",
+                            openWebsiteProperty ?? "",
                             this.scene.MapUrlFile,
                             allowApiProperty,
                             websitePolicyProperty,
+                            websiteWidthProperty,
                             websitePositionProperty,
                             false
                         );
@@ -167,13 +166,7 @@ export class GameMapPropertiesListener {
                             uuid: actionId,
                             type: "message",
                             message: websiteTriggerMessageProperty,
-                            callback: () =>
+                            callback: () => openCoWebsiteFunction(),
-                                openCoWebsiteFunction(
-                                    openWebsiteProperty,
-                                    allowApiProperty,
-                                    websitePolicyProperty,
-                                    websitePositionProperty
-                                ),
                             userInputManager: this.scene.userInputManager,
                         });
                     } else if (!websiteTriggerProperty || websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) {
@@ -182,6 +175,7 @@ export class GameMapPropertiesListener {
                             this.scene.MapUrlFile,
                             allowApiProperty,
                             websitePolicyProperty,
+                            websiteWidthProperty,
                             websitePositionProperty,
                             false
                         );
@@ -194,12 +188,7 @@ export class GameMapPropertiesListener {
                     }
 
                     if (!websiteTriggerProperty) {
-                        openCoWebsiteFunction(
+                        openCoWebsiteFunction();
-                            openWebsiteProperty,
-                            allowApiProperty,
-                            websitePolicyProperty,
-                            websitePositionProperty
-                        );
                     }
                 });
             };

front/src/Phaser/Game/GameScene.ts

@@ -1265,6 +1265,7 @@ ${escapedMessage}
                 iframeListener.getBaseUrlFromSource(source),
                 openCoWebsite.allowApi,
                 openCoWebsite.allowPolicy,
+                openCoWebsite.widthPercent,
                 openCoWebsite.position,
                 openCoWebsite.closable ?? true
             );

front/src/WebRtc/CoWebsiteManager.ts

@@ -43,6 +43,7 @@ export type CoWebsite = {
     closable: boolean;
     allowPolicy: string | undefined;
     allowApi: boolean | undefined;
+    widthPercent?: number | undefined;
     jitsi?: boolean;
     altMessage?: string;
 };
@@ -82,8 +83,13 @@ class CoWebsiteManager {
         this.cowebsiteDom.style.width = width + "px";
     }
 
-    set widthPercent(width: number) {
+    get maxWidth(): number {
-        this.cowebsiteDom.style.width = width + "%";
+        let maxWidth = 75 * window.innerWidth;
+        if (maxWidth !== 0) {
+            maxWidth = Math.round(maxWidth / 100);
+        }
+
+        return maxWidth;
     }
 
     get height(): number {
@@ -94,6 +100,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;
     }
@@ -191,29 +206,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) {
+                } else if (tempValue > this.maxHeight) {
-                    this.height = 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) {
+                } else if (tempValue > this.maxWidth) {
-                    this.width = maxWidth;
+                    this.width = this.maxWidth;
                 } else {
                     this.width = tempValue;
                 }
@@ -308,7 +315,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];
@@ -337,6 +344,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;
     }
@@ -346,7 +372,6 @@ class CoWebsiteManager {
             this.resizeAllIframes();
         });
         this.openedMain = iframeStates.opened;
-        this.resetStyleMain();
     }
 
     public resetStyleMain() {
@@ -533,6 +558,7 @@ class CoWebsiteManager {
         base: string,
         allowApi?: boolean,
         allowPolicy?: string,
+        widthPercent?: number,
         position?: number,
         closable?: boolean,
         altMessage?: string
@@ -549,6 +575,7 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
+            widthPercent,
             altMessage,
         };
 
@@ -561,14 +588,11 @@ class CoWebsiteManager {
         iframe: HTMLIFrameElement,
         allowApi?: boolean,
         allowPolicy?: string,
+        widthPercent?: number,
         position?: number,
         closable?: boolean,
         jitsi?: boolean
     ): CoWebsite {
-        if (get(coWebsitesNotAsleep).length < 1) {
-            this.loadMain();
-        }
-
         iframe.id = this.generateUniqueId();
 
         const newCoWebsite: CoWebsite = {
@@ -578,9 +602,16 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
+            widthPercent,
             jitsi,
         };
 
+        if (get(coWebsitesNotAsleep).length < 1) {
+            coWebsites.remove(newCoWebsite);
+            coWebsites.add(newCoWebsite, 0);
+            this.loadMain(widthPercent);
+        }
+
         if (position === 0) {
             this.openMain();
             setTimeout(() => {
@@ -597,7 +628,7 @@ class CoWebsiteManager {
         if (get(coWebsitesNotAsleep).length < 1) {
             coWebsites.remove(coWebsite);
             coWebsites.add(coWebsite, 0);
-            this.loadMain();
+            this.loadMain(coWebsite.widthPercent);
         }
 
         coWebsite.state.set("loading");

front/src/WebRtc/JitsiFactory.ts

@@ -179,7 +179,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);

maps/tests/CoWebsite/cowebsite_property_trigger.json

@@ -47,6 +47,11 @@
                  "name":"openWebsiteTrigger",
                  "type":"string",
                  "value":"onaction"
+                }, 
+                {
+                 "name":"openWebsiteWidth",
+                 "type":"int",
+                 "value":100
                 }],
          "type":"tilelayer",
          "visible":true,