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

merged in develop again

Browse source
This commit is contained in:
jonny 2021-09-01 14:55:29 +02:00
parent 7971daa27f ad60993b9a
commit 0272e4f691
4 changed files with 107 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
front/src/Phaser/Game/GameMapPropertyChange.ts
View file

@ -18,7 +18,6 @@ export class GameMapPropertyChange {
scriptUtils.openTab(newValue); scriptUtils.openTab(newValue);
} }
}); });
this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => { this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
if (newValue === undefined) { if (newValue === undefined) {
layoutManagerActionStore.removeAction("openWebsite"); layoutManagerActionStore.removeAction("openWebsite");
@ -29,11 +28,11 @@ export class GameMapPropertyChange {
newValue as string, newValue as string,
this.scene.MapUrlFile, this.scene.MapUrlFile,
allProps.get("openWebsiteAllowApi") as boolean | undefined, allProps.get("openWebsiteAllowApi") as boolean | undefined,
allProps.get("openWebsitePolicy") as string | undefined allProps.get("openWebsitePolicy") as string | undefined,
allProps.get("openWebsiteWidth") as number | undefined
); );
layoutManagerActionStore.removeAction("openWebsite"); layoutManagerActionStore.removeAction("openWebsite");
}; };
const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES); const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) { if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES); let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);

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

@ -1809,8 +1809,9 @@ ${escapedMessage}
"jitsiInterfaceConfig" "jitsiInterfaceConfig"
); );
const jitsiUrl = allProps.get("jitsiUrl") as string | undefined; const jitsiUrl = allProps.get("jitsiUrl") as string | undefined;
const jitsiWidth = allProps.get("jitsiWidth") as number | undefined;
jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl); jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl, jitsiWidth);
this.connection?.setSilent(true); this.connection?.setSilent(true);
mediaManager.hideGameOverlay(); mediaManager.hideGameOverlay();

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

@ -48,6 +48,10 @@ class CoWebsiteManager {
this.cowebsiteDiv.style.width = width + "px"; this.cowebsiteDiv.style.width = width + "px";
} }
set widthPercent(width: number) {
this.cowebsiteDiv.style.width = width + "%";
}
get height(): number { get height(): number {
return this.cowebsiteDiv.clientHeight; return this.cowebsiteDiv.clientHeight;
} }
@ -162,7 +166,13 @@ class CoWebsiteManager {
return iframe; return iframe;
} }
public loadCoWebsite(url: string, base: string, allowApi?: boolean, allowPolicy?: string): void { public loadCoWebsite(
url: string,
base: string,
allowApi?: boolean,
allowPolicy?: string,
widthPercent?: number
): void {
this.load(); this.load();
this.cowebsiteMainDom.innerHTML = ``; this.cowebsiteMainDom.innerHTML = ``;
@ -186,6 +196,9 @@ class CoWebsiteManager {
.then(() => Promise.race([onloadPromise, onTimeoutPromise])) .then(() => Promise.race([onloadPromise, onTimeoutPromise]))
.then(() => { .then(() => {
this.open(); this.open();
if (widthPercent) {
this.widthPercent = widthPercent;
}
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
}, animationTime); }, animationTime);
@ -199,13 +212,16 @@ class CoWebsiteManager {
/** /**
* Just like loadCoWebsite but the div can be filled by the user. * Just like loadCoWebsite but the div can be filled by the user.
*/ */
public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void { public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>, widthPercent?: number): void {
this.load(); this.load();
this.cowebsiteMainDom.innerHTML = ``; this.cowebsiteMainDom.innerHTML = ``;
this.currentOperationPromise = this.currentOperationPromise this.currentOperationPromise = this.currentOperationPromise
.then(() => callback(this.cowebsiteMainDom)) .then(() => callback(this.cowebsiteMainDom))
.then(() => { .then(() => {
this.open(); this.open();
if (widthPercent) {
this.widthPercent = widthPercent;
}
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
}, animationTime); }, animationTime);

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

@ -1,37 +1,43 @@
import {JITSI_URL} from "../Enum/EnvironmentVariable"; import { JITSI_URL } from "../Enum/EnvironmentVariable";
import {mediaManager} from "./MediaManager"; import { mediaManager } from "./MediaManager";
import {coWebsiteManager} from "./CoWebsiteManager"; import { coWebsiteManager } from "./CoWebsiteManager";
import {requestedCameraState, requestedMicrophoneState} from "../Stores/MediaStore"; import { requestedCameraState, requestedMicrophoneState } from "../Stores/MediaStore";
import {get} from "svelte/store"; import { get } from "svelte/store";
declare const window:any; // eslint-disable-line @typescript-eslint/no-explicit-any declare const window: any; // eslint-disable-line @typescript-eslint/no-explicit-any
interface jitsiConfigInterface { interface jitsiConfigInterface {
startWithAudioMuted: boolean startWithAudioMuted: boolean;
startWithVideoMuted: boolean startWithVideoMuted: boolean;
prejoinPageEnabled: boolean prejoinPageEnabled: boolean;
} }
const getDefaultConfig = () : jitsiConfigInterface => { const getDefaultConfig = (): jitsiConfigInterface => {
return { return {
startWithAudioMuted: !get(requestedMicrophoneState), startWithAudioMuted: !get(requestedMicrophoneState),
startWithVideoMuted: !get(requestedCameraState), startWithVideoMuted: !get(requestedCameraState),
prejoinPageEnabled: false prejoinPageEnabled: false,
} };
} };
const mergeConfig = (config?: object) => { const mergeConfig = (config?: object) => {
const currentDefaultConfig = getDefaultConfig(); const currentDefaultConfig = getDefaultConfig();
if(!config){ if (!config) {
return currentDefaultConfig; return currentDefaultConfig;
} }
return { return {
...currentDefaultConfig, ...currentDefaultConfig,
...config, ...config,
startWithAudioMuted: (config as jitsiConfigInterface).startWithAudioMuted ? true : currentDefaultConfig.startWithAudioMuted, startWithAudioMuted: (config as jitsiConfigInterface).startWithAudioMuted
startWithVideoMuted: (config as jitsiConfigInterface).startWithVideoMuted ? true : currentDefaultConfig.startWithVideoMuted, ? true
prejoinPageEnabled: (config as jitsiConfigInterface).prejoinPageEnabled ? true : currentDefaultConfig.prejoinPageEnabled : currentDefaultConfig.startWithAudioMuted,
} startWithVideoMuted: (config as jitsiConfigInterface).startWithVideoMuted
} ? true
: currentDefaultConfig.startWithVideoMuted,
prejoinPageEnabled: (config as jitsiConfigInterface).prejoinPageEnabled
? true
: currentDefaultConfig.prejoinPageEnabled,
};
};
const defaultInterfaceConfig = { const defaultInterfaceConfig = {
SHOW_CHROME_EXTENSION_BANNER: false, SHOW_CHROME_EXTENSION_BANNER: false,
@ -49,25 +55,45 @@ const defaultInterfaceConfig = {
SHOW_WATERMARK_FOR_GUESTS: false, SHOW_WATERMARK_FOR_GUESTS: false,
TOOLBAR_BUTTONS: [ TOOLBAR_BUTTONS: [
'microphone', 'camera', 'closedcaptions', 'desktop', /*'embedmeeting',*/ 'fullscreen', "microphone",
'fodeviceselection', 'hangup', 'profile', 'chat', 'recording', "camera",
'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand', "closedcaptions",
'videoquality', 'filmstrip', /*'invite',*/ 'feedback', 'stats', 'shortcuts', "desktop",
'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', /*'security'*/ /*'embedmeeting',*/ "fullscreen",
"fodeviceselection",
"hangup",
"profile",
"chat",
"recording",
"livestreaming",
"etherpad",
"sharedvideo",
"settings",
"raisehand",
"videoquality",
"filmstrip",
/*'invite',*/ "feedback",
"stats",
"shortcuts",
"tileview",
"videobackgroundblur",
"download",
"help",
"mute-everyone" /*'security'*/,
], ],
}; };
const slugify = (...args: (string | number)[]): string => { const slugify = (...args: (string | number)[]): string => {
const value = args.join(' ') const value = args.join(" ");
return value return value
.normalize('NFD') // split an accented letter in the base letter and the accent .normalize("NFD") // split an accented letter in the base letter and the accent
.replace(/[\u0300-\u036f]/g, '') // remove all previously split accents .replace(/[\u0300-\u036f]/g, "") // remove all previously split accents
.toLowerCase() .toLowerCase()
.trim() .trim()
.replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced) .replace(/[^a-z0-9 ]/g, "") // remove all chars not letters, numbers and spaces (to be replaced)
.replace(/\s+/g, '-') // separator .replace(/\s+/g, "-"); // separator
} };
class JitsiFactory { class JitsiFactory {
private jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any private jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any
@ -79,11 +105,19 @@ class JitsiFactory {
* Slugifies the room name and prepends the room name with the instance * Slugifies the room name and prepends the room name with the instance
*/ */
public getRoomName(roomName: string, instance: string): string { public getRoomName(roomName: string, instance: string): string {
return slugify(instance.replace('/', '-') + "-" + roomName); return slugify(instance.replace("/", "-") + "-" + roomName);
} }
public start(roomName: string, playerName:string, jwt?: string, config?: object, interfaceConfig?: object, jitsiUrl?: string): void { public start(
coWebsiteManager.insertCoWebsite((async cowebsiteDiv => { roomName: string,
playerName: string,
jwt?: string,
config?: object,
interfaceConfig?: object,
jitsiUrl?: string,
jitsiWidth?: number
): void {
coWebsiteManager.insertCoWebsite(async (cowebsiteDiv) => {
// Jitsi meet external API maintains some data in local storage // Jitsi meet external API maintains some data in local storage
// which is sent via the appData URL parameter when joining a // which is sent via the appData URL parameter when joining a
// conference. Problem is that this data grows indefinitely. Thus // conference. Problem is that this data grows indefinitely. Thus
@ -94,18 +128,19 @@ class JitsiFactory {
const domain = jitsiUrl || JITSI_URL; const domain = jitsiUrl || JITSI_URL;
if (domain === undefined) { if (domain === undefined) {
throw new Error('Missing JITSI_URL environment variable or jitsiUrl parameter in the map.') throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
} }
await this.loadJitsiScript(domain); await this.loadJitsiScript(domain);
const options: any = { // eslint-disable-line @typescript-eslint/no-explicit-any const options: any = {
// eslint-disable-line @typescript-eslint/no-explicit-any
roomName: roomName, roomName: roomName,
jwt: jwt, jwt: jwt,
width: "100%", width: "100%",
height: "100%", height: "100%",
parentNode: cowebsiteDiv, parentNode: cowebsiteDiv,
configOverwrite: mergeConfig(config), configOverwrite: mergeConfig(config),
interfaceConfigOverwrite: {...defaultInterfaceConfig, ...interfaceConfig} interfaceConfigOverwrite: { ...defaultInterfaceConfig, ...interfaceConfig },
}; };
if (!options.jwt) { if (!options.jwt) {
delete options.jwt; delete options.jwt;
@ -115,25 +150,25 @@ class JitsiFactory {
options.onload = () => resolve(); //we want for the iframe to be loaded before triggering animations. options.onload = () => resolve(); //we want for the iframe to be loaded before triggering animations.
setTimeout(() => resolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load setTimeout(() => resolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load
this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options); this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
this.jitsiApi.executeCommand('displayName', playerName); this.jitsiApi.executeCommand("displayName", playerName);
this.jitsiApi.addListener('audioMuteStatusChanged', this.audioCallback); this.jitsiApi.addListener("audioMuteStatusChanged", this.audioCallback);
this.jitsiApi.addListener('videoMuteStatusChanged', this.videoCallback); this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
}); });
})); }, jitsiWidth);
} }
public async stop(): Promise<void> { public async stop(): Promise<void> {
if(!this.jitsiApi){ if (!this.jitsiApi) {
return; return;
} }
await coWebsiteManager.closeCoWebsite(); await coWebsiteManager.closeCoWebsite();
this.jitsiApi.removeListener('audioMuteStatusChanged', this.audioCallback); this.jitsiApi.removeListener("audioMuteStatusChanged", this.audioCallback);
this.jitsiApi.removeListener('videoMuteStatusChanged', this.videoCallback); this.jitsiApi.removeListener("videoMuteStatusChanged", this.videoCallback);
this.jitsiApi?.dispose(); this.jitsiApi?.dispose();
} }
private onAudioChange({muted}: {muted: boolean}): void { private onAudioChange({ muted }: { muted: boolean }): void {
if (muted) { if (muted) {
requestedMicrophoneState.disableMicrophone(); requestedMicrophoneState.disableMicrophone();
} else { } else {
@ -141,7 +176,7 @@ class JitsiFactory {
} }
} }
private onVideoChange({muted}: {muted: boolean}): void { private onVideoChange({ muted }: { muted: boolean }): void {
if (muted) { if (muted) {
requestedCameraState.disableWebcam(); requestedCameraState.disableWebcam();
} else { } else {
@ -159,20 +194,17 @@ class JitsiFactory {
this.jitsiScriptLoaded = true; this.jitsiScriptLoaded = true;
// Load Jitsi if the environment variable is set. // Load Jitsi if the environment variable is set.
const jitsiScript = document.createElement('script'); const jitsiScript = document.createElement("script");
jitsiScript.src = 'https://' + domain + '/external_api.js'; jitsiScript.src = "https://" + domain + "/external_api.js";
jitsiScript.onload = () => { jitsiScript.onload = () => {
resolve(); resolve();
} };
jitsiScript.onerror = () => { jitsiScript.onerror = () => {
reject(); reject();
} };
document.head.appendChild(jitsiScript); document.head.appendChild(jitsiScript);
});
})
} }
} }