lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Re-implement set width of main cowebsite

Browse source
This commit is contained in:
Alexis Faizeau 2022-02-07 14:55:51 +01:00
parent 9571a52f1e
commit 60c17ecea2
8 changed files with 81 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
front/src/Api/Events/OpenCoWebsiteEvent.ts
View file

@ -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),

2
front/src/Api/iframe/nav.ts
View file

@ -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,

1
front/src/Phaser/Game/GameMapProperties.ts
View file

@ -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",

31
front/src/Phaser/Game/GameMapPropertiesListener.ts
View file

@ -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 = (
url: string | undefined,
allowApi: boolean | undefined,
policy: string | undefined,
position: number | undefined
) => {
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();
}
});
};

1
front/src/Phaser/Game/GameScene.ts
View file

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

73
front/src/WebRtc/CoWebsiteManager.ts
View file

@ -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");

10
front/src/WebRtc/JitsiFactory.ts
View file

@ -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);

5
maps/tests/CoWebsite/cowebsite_property_trigger.json
View file

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