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

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

Browse source
This commit is contained in:
Lurkars 2021-09-16 18:12:51 +02:00
parent 8c780f07c6 9f39cf154a
commit 7922de10ff
32 changed files with 575 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/build-and-deploy.yml vendored
View file

@ -190,6 +190,8 @@ jobs:
SECRET_JITSI_KEY: ${{ secrets.SECRET_JITSI_KEY }}
TURN_STATIC_AUTH_SECRET: ${{ secrets.TURN_STATIC_AUTH_SECRET }}
DEPLOY_REF: ${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
POSTHOG_URL: ${{ secrets.POSTHOG_URL }}
with:
namespace: workadventure-${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}

33
CHANGELOG.md
View file

@ -1,8 +1,41 @@
## Version develop
## Version 1.5.0
### Updates
- Added support for login with OpenID Connect
- New scripting library available to extend WorkAdventure: see [Scripting API Extra](https://github.com/workadventure/scripting-api-extra/)
- New menu design!
- New `openTab` property (#1419)
- Possible integration with Posthog (#1458)
### Bugfix
- Fixing layers flattened several times (#1427 @Lurkars)
- Fixing CSS of video elements
- Chat now scrolls to bottom when opened (#1450)
- Fixing silent zone not respected when exiting from Jitsi (#1456)
- Fixing "yarn install" failing because of missing rights on some Docker installs (#1457)
- Fixing audio not shut down when exiting a room (#1459)
### Misc
- Finished migrating "Build your map" documentation into the "/docs" directory of this repository (#1417 #1385)
- Refactoring documentation (dedicated page for variables) (#1414)
- Front container code is now completely linted (#1413)
## Version 1.4.15
### Updates
- New scripting API features :
- Use `WA.ui.registerMenuCommand(commandDescriptor: string, options: MenuOptions): Menu` to add a custom menu or an iframe to the menu.
- New `jitsiWidth` parameter to set the width of Jitsi and Cowebsite (#1398 @tabascoeye)
- Refactored the way videos are displayed to better cope for vertical videos (on mobile)
- Fixing reconnection issues after 5 minutes of an inactive tab on Google Chrome
- Changes performed in `WA.room.setPropertyLayer` now have a real-time impact (#1395)
### Bugfixes
- Fixing streams in bubbles sometimes improperly muted when there are more than 2 people in the bubble (#1400 #1402)
- Properly displaying carriage returns in popups (#1388)
- `WA.state` now answers correctly to "in" keyword (#1393)
- Variables can now be nested in group layers (#1406)
## Version 1.4.14

1
back/src/Enum/EnvironmentVariable.ts
View file

@ -9,7 +9,6 @@ const JITSI_ISS = process.env.JITSI_ISS || "";
const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || "";
const HTTP_PORT = parseInt(process.env.HTTP_PORT || "8080") || 8080;
const GRPC_PORT = parseInt(process.env.GRPC_PORT || "50051") || 50051;
export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 30; // maximum time (in second) without activity before a socket is closed
export const TURN_STATIC_AUTH_SECRET = process.env.TURN_STATIC_AUTH_SECRET || "";
export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || "4");
export const REDIS_HOST = process.env.REDIS_HOST || undefined;

3
deeployer.libsonnet
View file

@ -75,6 +75,9 @@
"UPLOADER_URL": "//uploader-"+url,
"ADMIN_URL": "//"+url,
"JITSI_URL": env.JITSI_URL,
#POSTHOG
"POSTHOG_API_KEY": if namespace == "master" then env.POSTHOG_API_KEY else "",
"POSTHOG_URL": if namespace == "master" then env.POSTHOG_URL else "",
"SECRET_JITSI_KEY": env.SECRET_JITSI_KEY,
"TURN_SERVER": "turn:coturn.workadventu.re:443,turns:coturn.workadventu.re:443",
"JITSI_PRIVATE_MODE": if env.SECRET_JITSI_KEY != '' then "true" else "false",

2
docs/maps/opening-a-website.md
View file

@ -12,7 +12,7 @@ In order to create a zone that opens websites:
* You must create a specific layer.
* In layer properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://")
* You may also use "`openWebsiteWidth`" property (of type "`number`" between 0 and 100) to control the width of the iframe.
* You may also use "`openWebsiteWidth`" property (of type "`int`" or "`float`" between 0 and 100) to control the width of the iframe.
* You may also use "`openTab`" property (of type "`string`") to open in a new tab instead.
{.alert.alert-warning}

2
docs/maps/wa-maps.md
View file

@ -56,6 +56,8 @@ A few things to notice:
## Building walls and "collidable" areas
[Building your map - Collides](https://www.youtube.com/watch?v=qTK50ymhMIE)
By default, the characters can traverse any tiles. If you want to prevent your character from going through a tile (like a wall or a desktop), you must make this tile "collidable". You can do this by settings the `collides` property on a given tile.
To make a tile "collidable", you should:

8
front/Dockerfile
View file

@ -1,13 +1,13 @@
FROM thecodingmachine/workadventure-back-base:latest as builder
WORKDIR /var/www/messages
COPY --chown=docker:docker messages .
FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
WORKDIR /usr/src
COPY messages .
RUN yarn install && yarn proto
# we are rebuilding on each deploy to cope with the PUSHER_URL environment URL
FROM thecodingmachine/nodejs:14-apache
COPY --chown=docker:docker front .
COPY --from=builder --chown=docker:docker /var/www/messages/generated /var/www/html/src/Messages/generated
COPY --from=builder --chown=docker:docker /usr/src/generated /var/www/html/src/Messages/generated
# Removing the iframe.html file from the final image as this adds a XSS attack.
# iframe.html is only in dev mode to circumvent a limitation

1
front/package.json
View file

@ -50,6 +50,7 @@
"phaser": "^3.54.0",
"phaser-animated-tiles": "workadventure/phaser-animated-tiles#da68bbededd605925621dd4f03bd27e69284b254",
"phaser3-rex-plugins": "^1.1.42",
"posthog-js": "^1.13.12",
"queue-typescript": "^1.0.1",
"quill": "1.3.6",
"quill-delta-to-html": "^0.12.0",

74
front/src/Administration/AnalyticsClient.ts Normal file
View file

@ -0,0 +1,74 @@
import { POSTHOG_API_KEY, POSTHOG_URL } from "../Enum/EnvironmentVariable";
class AnalyticsClient {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private posthogPromise: Promise<any>;
constructor() {
if (POSTHOG_API_KEY && POSTHOG_URL) {
this.posthogPromise = import("posthog-js").then(({ default: posthog }) => {
posthog.init(POSTHOG_API_KEY, { api_host: POSTHOG_URL, disable_cookie: true });
return posthog;
});
} else {
this.posthogPromise = Promise.reject();
}
}
identifyUser(uuid: string) {
this.posthogPromise
.then((posthog) => {
posthog.identify(uuid, { uuid, wa: true });
})
.catch();
}
loggedWithSso() {
this.posthogPromise
.then((posthog) => {
posthog.capture("wa-logged-sso");
})
.catch();
}
loggedWithToken() {
this.posthogPromise
.then((posthog) => {
posthog.capture("wa-logged-token");
})
.catch();
}
enteredRoom(roomId: string) {
this.posthogPromise
.then((posthog) => {
posthog.capture("$pageView", { roomId });
})
.catch();
}
openedMenu() {
this.posthogPromise
.then((posthog) => {
posthog.capture("wa-opened-menu");
})
.catch();
}
launchEmote(emote: string) {
this.posthogPromise
.then((posthog) => {
posthog.capture("wa-emote-launch", { emote });
})
.catch();
}
enteredJitsi(roomName: string, roomId: string) {
this.posthogPromise
.then((posthog) => {
posthog.capture("wa-entered-jitsi", { roomName, roomId });
})
.catch();
}
}
export const analyticsClient = new AnalyticsClient();

14
front/src/Api/IframeListener.ts
View file

@ -46,30 +46,18 @@ type AnswererCallback<T extends keyof IframeQueryMap> = (
* Also allows to send messages to those iframes.
*/
class IframeListener {
private readonly _readyStream: Subject<HTMLIFrameElement> = new Subject();
public readonly readyStream = this._readyStream.asObservable();
private readonly _chatStream: Subject<ChatEvent> = new Subject();
public readonly chatStream = this._chatStream.asObservable();
private readonly _openPopupStream: Subject<OpenPopupEvent> = new Subject();
public readonly openPopupStream = this._openPopupStream.asObservable();
private readonly _openTabStream: Subject<OpenTabEvent> = new Subject();
public readonly openTabStream = this._openTabStream.asObservable();
private readonly _goToPageStream: Subject<GoToPageEvent> = new Subject();
public readonly goToPageStream = this._goToPageStream.asObservable();
private readonly _loadPageStream: Subject<string> = new Subject();
public readonly loadPageStream = this._loadPageStream.asObservable();
private readonly _openCoWebSiteStream: Subject<OpenCoWebSiteEvent> = new Subject();
public readonly openCoWebSiteStream = this._openCoWebSiteStream.asObservable();
private readonly _closeCoWebSiteStream: Subject<void> = new Subject();
public readonly closeCoWebSiteStream = this._closeCoWebSiteStream.asObservable();
private readonly _disablePlayerControlStream: Subject<void> = new Subject();
public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
@ -219,7 +207,7 @@ class IframeListener {
} else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
this._setPropertyStream.next(payload.data);
} else if (payload.type === "chat" && isChatEvent(payload.data)) {
this._chatStream.next(payload.data);
scriptUtils.sendAnonymousChat(payload.data);
} else if (payload.type === "openPopup" && isOpenPopupEvent(payload.data)) {
this._openPopupStream.next(payload.data);
} else if (payload.type === "closePopup" && isClosePopupEvent(payload.data)) {

8
front/src/Api/ScriptUtils.ts
View file

@ -1,4 +1,7 @@
import { coWebsiteManager } from "../WebRtc/CoWebsiteManager";
import { playersStore } from "../Stores/PlayersStore";
import { chatMessagesStore } from "../Stores/ChatStore";
import type { ChatEvent } from "./Events/ChatEvent";
class ScriptUtils {
public openTab(url: string) {
@ -16,6 +19,11 @@ class ScriptUtils {
public closeCoWebSite() {
coWebsiteManager.closeCoWebsite();
}
public sendAnonymousChat(chatEvent: ChatEvent) {
const userId = playersStore.addFacticePlayer(chatEvent.author);
chatMessagesStore.addExternalMessage(userId, chatEvent.message);
}
}
export const scriptUtils = new ScriptUtils();

39
front/src/Components/AudioManager/AudioManager.svelte
View file

@ -5,9 +5,9 @@
audioManagerFileStore,
audioManagerVolumeStore,
} from "../../Stores/AudioManagerStore";
import {get} from "svelte/store";
import { get } from "svelte/store";
import type { Unsubscriber } from "svelte/store";
import {onDestroy, onMount} from "svelte";
import { onDestroy, onMount } from "svelte";
let HTMLAudioPlayer: HTMLAudioElement;
let audioPlayerVolumeIcon: HTMLElement;
@ -21,9 +21,9 @@
onMount(() => {
volume = localUserStore.getAudioPlayerVolume();
audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
setVolume();
changeVolume();
unsubscriberFileStore = audioManagerFileStore.subscribe(() =>{
unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
HTMLAudioPlayer.pause();
HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
@ -53,13 +53,7 @@
}
})
function onMute() {
audioManagerVolumeStore.setMuted(!get(audioManagerVolumeStore).muted);
localUserStore.setAudioPlayerMuted(get(audioManagerVolumeStore).muted);
setVolume();
}
function setVolume() {
function changeVolume() {
if (get(audioManagerVolumeStore).muted) {
audioPlayerVolumeIcon.classList.add('muted');
audioPlayerVol.value = "0";
@ -76,8 +70,22 @@
audioPlayerVolumeIcon.classList.remove('mid');
}
}
audioManagerVolumeStore.setVolume(volume)
localUserStore.setAudioPlayerVolume(get(audioManagerVolumeStore).volume);
}
function onMute() {
const muted = !get(audioManagerVolumeStore).muted;
audioManagerVolumeStore.setMuted(muted);
localUserStore.setAudioPlayerMuted(muted);
changeVolume();
}
function setVolume() {
volume = parseFloat(audioPlayerVol.value);
audioManagerVolumeStore.setVolume(volume);
localUserStore.setAudioPlayerVolume(volume);
audioManagerVolumeStore.setMuted(false);
localUserStore.setAudioPlayerMuted(false);
changeVolume();
}
function setDecrease() {
@ -108,8 +116,7 @@
</g>
</svg>
</span>
<input type="range" min="0" max="1" step="0.025" bind:value={volume} bind:this={audioPlayerVol}
on:change={setVolume}>
<input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume}>
</div>
<div class="audio-manager-reduce-conversation">
<label>
@ -135,7 +142,7 @@
margin-left: auto;
margin-right: auto;
background-color: rgb(0,0,0,0.5);
background-color: rgb(0, 0, 0, 0.5);
display: grid;
grid-template-rows: 50% 50%;
color: whitesmoke;

6
front/src/Components/Chat/Chat.svelte
View file

@ -3,7 +3,7 @@
import { chatMessagesStore, chatVisibilityStore } from "../../Stores/ChatStore";
import ChatMessageForm from './ChatMessageForm.svelte';
import ChatElement from './ChatElement.svelte';
import {afterUpdate, beforeUpdate} from "svelte";
import {afterUpdate, beforeUpdate, onMount} from "svelte";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
let listDom: HTMLElement;
@ -15,6 +15,10 @@
autoscroll = listDom && (listDom.offsetHeight + listDom.scrollTop) > (listDom.scrollHeight - 20);
});
onMount(() => {
listDom.scrollTo(0, listDom.scrollHeight);
})
afterUpdate(() => {
if (autoscroll) listDom.scrollTo(0, listDom.scrollHeight);
});

2
front/src/Components/Menu/MenuIcon.svelte
View file

@ -22,9 +22,9 @@
<style lang="scss">
.menuIcon {
pointer-events: auto;
margin: 25px;
img {
pointer-events: auto;
width: 60px;
padding-top: 0;
}

7
front/src/Components/Menu/SettingsSubMenu.svelte
View file

@ -3,6 +3,7 @@ import {localUserStore} from "../../Connexion/LocalUserStore";
import {videoConstraintStore} from "../../Stores/MediaStore";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {isMobile} from "../../Enum/EnvironmentVariable";
import {menuVisiblilityStore} from "../../Stores/MenuStore";
let fullscreen : boolean = localUserStore.getFullscreen();
let notification : boolean = localUserStore.getNotification() === 'granted';
@ -22,6 +23,8 @@ function saveSetting(){
previewValueVideo = valueVideo;
videoConstraintStore.setFrameRate(valueVideo);
}
closeMenu();
}
function changeFullscreen() {
@ -50,6 +53,10 @@ function changeNotification() {
})
}
}
function closeMenu() {
menuVisiblilityStore.set(false);
}
</script>
<div class="settings-main" on:submit|preventDefault={saveSetting}>

6
front/src/Connexion/ConnectionManager.ts
View file

@ -9,6 +9,7 @@ import { Room } from "./Room";
import { _ServiceWorker } from "../Network/ServiceWorker";
import { loginSceneVisibleIframeStore } from "../Stores/LoginSceneStore";
import { userIsConnected } from "../Stores/MenuStore";
import { analyticsClient } from "../Administration/AnalyticsClient";
class ConnectionManager {
private localUser!: LocalUser;
@ -93,6 +94,7 @@ class ConnectionManager {
this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
try {
await this.checkAuthUserConnexion();
analyticsClient.loggedWithSso();
} catch (err) {
console.error(err);
this.loadOpenIDScreen();
@ -109,6 +111,7 @@ class ConnectionManager {
this.authToken = data.authToken;
localUserStore.saveUser(this.localUser);
localUserStore.setAuthToken(this.authToken);
analyticsClient.loggedWithToken();
const roomUrl = data.roomUrl;
@ -184,6 +187,9 @@ class ConnectionManager {
if (this._currentRoom == undefined) {
return Promise.reject(new Error("Invalid URL"));
}
if (this.localUser) {
analyticsClient.identifyUser(this.localUser.uuid);
}
this.serviceWorker = new _ServiceWorker();
return Promise.resolve(this._currentRoom);

2
front/src/Enum/EnvironmentVariable.ts
View file

@ -20,6 +20,8 @@ export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == "true";
export const NODE_ENV = process.env.NODE_ENV || "development";
export const CONTACT_URL = process.env.CONTACT_URL || undefined;
export const PROFILE_URL = process.env.PROFILE_URL || undefined;
export const POSTHOG_API_KEY: string = (process.env.POSTHOG_API_KEY as string) || "";
export const POSTHOG_URL = process.env.POSTHOG_URL || undefined;
export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;

11
front/src/Phaser/Game/GameMap.ts
View file

@ -286,4 +286,15 @@ export class GameMap {
this.triggerAll();
}
/**
* Trigger all the callbacks (used when exiting a map)
*/
public triggerExitCallbacks(): void {
const emptyProps = new Map<string, string | boolean | number>();
for (const [oldPropName, oldPropValue] of this.lastProperties.entries()) {
// We found a property that disappeared
this.trigger(oldPropName, oldPropValue, undefined, emptyProps);
}
}
}

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

@ -13,9 +13,27 @@ export class GameMapPropertiesListener {
constructor(private scene: GameScene, private gameMap: GameMap) {}
register() {
this.gameMap.onPropertyChange("openTab", (newValue) => {
this.gameMap.onPropertyChange("openTab", (newValue, oldvalue, allProps) => {
if (newValue === undefined) {
layoutManagerActionStore.removeAction("openTab");
}
if (typeof newValue == "string" && newValue.length) {
scriptUtils.openTab(newValue);
const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
if (message === undefined) {
message = "Press SPACE or touch here to open web site in new tab";
}
layoutManagerActionStore.addAction({
uuid: "openTab",
type: "message",
message: message,
callback: () => scriptUtils.openTab(newValue),
userInputManager: this.scene.userInputManager,
});
} else {
scriptUtils.openTab(newValue);
}
}
});
this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {

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

@ -94,6 +94,7 @@ import { userIsAdminStore } from "../../Stores/GameStore";
import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
import { analyticsClient } from "../../Administration/AnalyticsClient";
import { get } from "svelte/store";
export interface GameSceneInitInterface {
@ -429,6 +430,7 @@ export class GameScene extends DirtyScene {
gameManager.gameSceneIsCreated(this);
urlManager.pushRoomIdToUrl(this.room);
analyticsClient.enteredRoom(this.room.id);
if (touchScreenManager.supportTouchScreen) {
this.pinchManager = new PinchManager(this);
@ -1255,6 +1257,8 @@ ${escapedMessage}
if (this.mapTransitioning) return;
this.mapTransitioning = true;
this.gameMap.triggerExitCallbacks();
let targetRoom: Room;
try {
targetRoom = await Room.createRoom(roomUrl);
@ -1463,6 +1467,7 @@ ${escapedMessage}
});
this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
this.connection?.emitEmoteEvent(emoteKey);
analyticsClient.launchEmote(emoteKey);
});
} catch (err) {
if (err instanceof TextureError) {
@ -1830,19 +1835,21 @@ ${escapedMessage}
jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl, jitsiWidth);
this.connection?.setSilent(true);
mediaManager.hideGameOverlay();
analyticsClient.enteredJitsi(roomName, this.room.id);
//permit to stop jitsi when user close iframe
mediaManager.addTriggerCloseJitsiFrameButton("close-jisi", () => {
mediaManager.addTriggerCloseJitsiFrameButton("close-jitsi", () => {
this.stopJitsi();
});
}
public stopJitsi(): void {
this.connection?.setSilent(false);
const silent = this.gameMap.getCurrentProperties().get("silent");
this.connection?.setSilent(!!silent);
jitsiFactory.stop();
mediaManager.showGameOverlay();
mediaManager.removeTriggerCloseJitsiFrameButton("close-jisi");
mediaManager.removeTriggerCloseJitsiFrameButton("close-jitsi");
}
//todo: put this into an 'orchestrator' scene (EntryScene?)

5
front/src/Stores/MenuStore.ts
View file

@ -2,11 +2,14 @@ import { get, writable } from "svelte/store";
import Timeout = NodeJS.Timeout;
import { userIsAdminStore } from "./GameStore";
import { CONTACT_URL } from "../Enum/EnvironmentVariable";
import { analyticsClient } from "../Administration/AnalyticsClient";
export const menuIconVisiblilityStore = writable(false);
export const menuVisiblilityStore = writable(false);
menuVisiblilityStore.subscribe((value) => {
if (value) analyticsClient.openedMenu();
});
export const menuInputFocusStore = writable(false);
export const loginUrlStore = writable(false);
export const userIsConnected = writable(false);
let warningContainerTimeout: Timeout | null = null;

14
front/src/WebRtc/DiscussionManager.ts
View file

@ -1,14 +0,0 @@
import { iframeListener } from "../Api/IframeListener";
import { chatMessagesStore } from "../Stores/ChatStore";
import { playersStore } from "../Stores/PlayersStore";
export class DiscussionManager {
constructor() {
iframeListener.chatStream.subscribe((chatEvent) => {
const userId = playersStore.addFacticePlayer(chatEvent.author);
chatMessagesStore.addExternalMessage(userId, chatEvent.message);
});
}
}
export const discussionManager = new DiscussionManager();

6
front/src/WebRtc/VideoPeer.ts
View file

@ -5,11 +5,7 @@ import { blackListManager } from "./BlackListManager";
import type { Subscription } from "rxjs";
import type { UserSimplePeerInterface } from "./SimplePeer";
import { readable, Readable, Unsubscriber } from "svelte/store";
import {
localStreamStore,
obtainedMediaConstraintStore,
ObtainedMediaStreamConstraints,
} from "../Stores/MediaStore";
import { localStreamStore, obtainedMediaConstraintStore, ObtainedMediaStreamConstraints } from "../Stores/MediaStore";
import { playersStore } from "../Stores/PlayersStore";
import { chatMessagesStore, newChatMessageStore } from "../Stores/ChatStore";
import { getIceServersConfig } from "../Components/Video/utils";

2
front/src/index.ts
View file

@ -23,9 +23,9 @@ import { Game } from "./Phaser/Game/Game";
import App from "./Components/App.svelte";
import { HtmlUtils } from "./WebRtc/HtmlUtils";
import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
import { analyticsClient } from "./Administration/AnalyticsClient";
const { width, height } = coWebsiteManager.getGameSize();
const valueGameQuality = localUserStore.getGameQualityValue();
const fps: Phaser.Types.Core.FPSConfig = {
/**

4
front/webpack.config.ts
View file

@ -7,7 +7,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
import sveltePreprocess from "svelte-preprocess";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
import { PROFILE_URL } from "./src/Enum/EnvironmentVariable";
import { POSTHOG_API_KEY, PROFILE_URL } from "./src/Enum/EnvironmentVariable";
const mode = process.env.NODE_ENV ?? "development";
const buildNpmTypingsForApi = !!process.env.BUILD_TYPINGS;
@ -204,6 +204,8 @@ module.exports = {
MAX_USERNAME_LENGTH: 8,
MAX_PER_GROUP: 4,
DISPLAY_TERMS_OF_USE: false,
POSTHOG_API_KEY: null,
POSTHOG_URL: null,
NODE_ENV: mode,
}),
],

23
front/yarn.lock
View file

@ -129,6 +129,10 @@
version "2.9.2"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
"@sentry/types@^6.11.0":
version "6.12.0"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.12.0.tgz#b7395688a79403c6df8d8bb8d81deb8222519853"
integrity sha512-urtgLzE4EDMAYQHYdkgC0Ei9QvLajodK1ntg71bGn0Pm84QUpaqpPDfHRU+i6jLeteyC7kWwa5O5W1m/jrjGXA==
"@tsconfig/svelte@^1.0.10":
version "1.0.10"
@ -2348,6 +2352,11 @@ faye-websocket@^0.11.3:
dependencies:
websocket-driver ">=0.5.1"
fflate@^0.4.1:
version "0.4.8"
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
file-entry-cache@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@ -4484,6 +4493,15 @@ postcss@^8.2.10:
nanoid "^3.1.23"
source-map "^0.6.1"
posthog-js@^1.13.12:
version "1.13.12"
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.13.12.tgz#b54efcb92de43724c889048135ccaae3dc4b874c"
integrity sha512-MU1I0zSVhdCcnWI8jAZLtbNJmjfg9AnhUDq5dUzNkb0qPXtNz17BekalnNwDMKs0Zlek3UCOVsIpyc85M+VRNA==
dependencies:
"@sentry/types" "^6.11.0"
fflate "^0.4.1"
rrweb-snapshot "^1.1.7"
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@ -4875,6 +4893,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^3.0.0"
inherits "^2.0.1"
rrweb-snapshot@^1.1.7:
version "1.1.8"
resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.8.tgz#57c3a8003a6ebbe4a2e2f5be29e30a47a8b1eb03"
integrity sha512-wi8T9IVobEwlns7U2m8cbPfoihsNAMpTI+UBe4KUjclU2N+vtowD2U1Rq8PleiFTDvcseHvkQDmEIZoZLXFzwg==
run-parallel@^1.1.9:
version "1.2.0"
resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"

123
maps/tests/audio.json Normal file
View file

@ -0,0 +1,123 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":10,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":5,
"name":"audio",
"opacity":1,
"properties":[
{
"name":"audioLoop",
"type":"bool",
"value":true
},
{
"name":"playAudio",
"type":"string",
"value":"Audience.mp3"
}],
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":6,
"name":"exit",
"opacity":1,
"properties":[
{
"name":"exitUrl",
"type":"string",
"value":"Properties\/jitsi_next_to_silent.json"
}],
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":308.584234177831,
"id":1,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":13,
"text":"Test:\nWalk on the carpet\n\nResult:\nA sound is played in loop.\nControls at the top of the screen allow you to control the sound.\n\nTest:\nWalk on the white spot in the carpet\n\nResult:\nThe user is redirected to another map AND sound is shut down",
"wrap":true
},
"type":"",
"visible":true,
"width":315.4375,
"x":1.74700399641053,
"y":1.43404009627554
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":7,
"nextobjectid":2,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":10
}

82
maps/tests/inactive_tabs.json Normal file
View file

@ -0,0 +1,82 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":10,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":261.73266830836,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":11,
"text":"Test:\nOpen WorkAdventure in 1 tab in Chrome and 1 tab in Firefox. Keep the Firefox tab open and open another tab in Chrome on any website (so that the WA Chrome tab is not visible). Do not enter in a bubble. Wait 6 minutes. (you can check time waited in a \"chrome:\/\/discards\" special tab.\n\nResult:\nOn the Firefox tab, the user of the Chrome tab is still visible. You can speak to the other user in a bubble.\n\nHere, we are checking that the Chrome does not \"freeze\" the non visible tab.\n\nRe-run this test with Safari, Edge and Firefox as the browsers with the hidden tabs",
"wrap":true
},
"type":"",
"visible":true,
"width":252.4375,
"x":46.5894222943362,
"y":34.2876372135732
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":10
}

40
maps/tests/index.html
View file

@ -63,6 +63,22 @@
<a href="#" class="testLink" data-testmap="EmbeddedWebsite/website_in_map.json" target="_blank">Testing websites inside a map</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-audio"> Success <input type="radio" name="test-audio"> Failure <input type="radio" name="test-audio" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="audio.json" target="_blank">Testing audio layer</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-jitsi-silent"> Success <input type="radio" name="test-jitsi-silent"> Failure <input type="radio" name="test-jitsi-silent" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="jitsi_custom_url.json" target="_blank">Testing Jitsi + silent layer</a>
</td>
</tr>
</table>
<h2>Iframe API</h2>
<table class="table">
@ -216,14 +232,6 @@
</table>
<h2>WebRTC</h2>
<table class="table">
<tr>
<td>
<input type="radio" name="test-energy"> Success <input type="radio" name="test-energy"> Failure <input type="radio" name="test-energy" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="energy.json" target="_blank">Test energy consumption</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-help-camera-setting"> Success <input type="radio" name="test-help-camera-setting"> Failure <input type="radio" name="test-help-camera-setting" checked> Pending
@ -235,6 +243,22 @@
</table>
<h2>Others</h2>
<table class="table">
<tr>
<td>
<input type="radio" name="test-reconnection"> Success <input type="radio" name="test-reconnection"> Failure <input type="radio" name="test-reconnection" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="reconnection.json" target="_blank">Test reconnection</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-inactive-tabs"> Success <input type="radio" name="test-inactive-tabs"> Failure <input type="radio" name="test-inactive-tabs" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="inactive_tabs.json" target="_blank">Test inactive tabs on Chrome</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-energy"> Success <input type="radio" name="test-energy"> Failure <input type="radio" name="test-energy" checked> Pending

17
maps/tests/jitsi_custom_url.json
View file

@ -8,6 +8,12 @@
"id":1,
"name":"floor",
"opacity":1,
"properties":[
{
"name":"silent",
"type":"bool",
"value":true
}],
"type":"tilelayer",
"visible":true,
"width":10,
@ -37,11 +43,6 @@
"name":"jitsiRoom",
"type":"string",
"value":"myRoom"
},
{
"name":"jitsiUrl",
"type":"string",
"value":"meet.jit.si"
}],
"type":"tilelayer",
"visible":true,
@ -55,7 +56,7 @@
"name":"floorLayer",
"objects":[
{
"height":94.6489098314831,
"height":163.652982988579,
"id":1,
"name":"",
"properties":[
@ -69,14 +70,14 @@
{
"fontfamily":"Sans Serif",
"pixelsize":8,
"text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens on meet.jit.si (check this in the network tab). Note: this test only makes sense if the default configured Jitsi instance is NOT meet.jit.si (check your .env file)",
"text":"Test:\nThe whole map is silent.\nConnect with 2 users\nResult:\nThe map is silent\n\nTest:\nmove on the carpet with both users\n\nResult:\nA Jitsi opens\n\nTest:\nmove out of the carpet and try to connect both users\nResult:\nThey are still silent\n",
"wrap":true
},
"type":"",
"visible":true,
"width":317.361946929159,
"x":2.32853056864467,
"y":224.602707451482
"y":2.25624950083909
}],
"opacity":1,
"type":"objectgroup",

82
maps/tests/reconnection.json Normal file
View file

@ -0,0 +1,82 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":10,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":261.73266830836,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":11,
"text":"Test:\nTest to be run on a remote site (not locally)\nOpen WorkAdventure in 2 tabs.\nClose the network connection (close Wifi, ...)\n\nResult:\nAfter a few seconds, WorkAdventure displays a \"reconnecting scene\"\n\nTest:\nResume network connection, without switching tabs (one tab on front)\n\nResult:\nWorkAdventure reconnects automatically. From the tab that resumed, you can connect to the other tab (that is not visible), therefore testing that the invisible tab has resumed too.",
"wrap":true
},
"type":"",
"visible":true,
"width":252.4375,
"x":46.5894222943362,
"y":34.2876372135732
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":10
}

2
pusher/src/Enum/EnvironmentVariable.ts
View file

@ -9,7 +9,7 @@ const JITSI_URL: string | undefined = process.env.JITSI_URL === "" ? undefined :
const JITSI_ISS = process.env.JITSI_ISS || "";
const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || "";
const PUSHER_HTTP_PORT = parseInt(process.env.PUSHER_HTTP_PORT || "8080") || 8080;
export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 30; // maximum time (in second) without activity before a socket is closed
export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 120; // maximum time (in second) without activity before a socket is closed. Should be greater than 60 seconds in order to cope for Chrome intensive throttling (https://developer.chrome.com/blog/timer-throttling-in-chrome-88/#intensive-throttling)
export const FRONT_URL = process.env.FRONT_URL || "http://localhost";
export const OPID_CLIENT_ID = process.env.OPID_CLIENT_ID || "";