From 60c17ecea271732deb78d56d145c4aa8300b49d0 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 14:55:51 +0100 Subject: [PATCH] Re-implement set width of main cowebsite --- front/src/Api/Events/OpenCoWebsiteEvent.ts | 1 + front/src/Api/iframe/nav.ts | 2 + front/src/Phaser/Game/GameMapProperties.ts | 1 + .../Phaser/Game/GameMapPropertiesListener.ts | 31 +++----- front/src/Phaser/Game/GameScene.ts | 1 + front/src/WebRtc/CoWebsiteManager.ts | 73 +++++++++++++------ front/src/WebRtc/JitsiFactory.ts | 10 ++- .../CoWebsite/cowebsite_property_trigger.json | 5 ++ 8 files changed, 81 insertions(+), 43 deletions(-) diff --git a/front/src/Api/Events/OpenCoWebsiteEvent.ts b/front/src/Api/Events/OpenCoWebsiteEvent.ts index 51a17763..b991d3f7 100644 --- a/front/src/Api/Events/OpenCoWebsiteEvent.ts +++ b/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), diff --git a/front/src/Api/iframe/nav.ts b/front/src/Api/iframe/nav.ts index d5362b4b..b57f2456 100644 --- a/front/src/Api/iframe/nav.ts +++ b/front/src/Api/iframe/nav.ts @@ -45,6 +45,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution { + const openCoWebsiteFunction = () => { 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: () => - openCoWebsiteFunction( - openWebsiteProperty, - allowApiProperty, - websitePolicyProperty, - websitePositionProperty - ), + callback: () => openCoWebsiteFunction(), 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( - openWebsiteProperty, - allowApiProperty, - websitePolicyProperty, - websitePositionProperty - ); + openCoWebsiteFunction(); } }); }; diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 242d97c8..8b62a435 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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 ); diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 9f4f0c36..7b7147b3 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/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) { - 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 { @@ -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) { - 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; } @@ -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"); diff --git a/front/src/WebRtc/JitsiFactory.ts b/front/src/WebRtc/JitsiFactory.ts index b273a64c..8f7ed952 100644 --- a/front/src/WebRtc/JitsiFactory.ts +++ b/front/src/WebRtc/JitsiFactory.ts @@ -179,7 +179,15 @@ class JitsiFactory { const doResolve = (): void => { const iframe = coWebsiteManager.getCoWebsiteBuffer().querySelector('[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); diff --git a/maps/tests/CoWebsite/cowebsite_property_trigger.json b/maps/tests/CoWebsite/cowebsite_property_trigger.json index 183fad3a..116f399c 100644 --- a/maps/tests/CoWebsite/cowebsite_property_trigger.json +++ b/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,