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

.github/workflows/build-and-deploy.yml

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

CHANGELOG.md

@@ -1,11 +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
+- 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
 

deeployer.libsonnet

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

docs/maps/opening-a-website.md

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

docs/maps/wa-maps.md

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

front/package.json

@@ -52,6 +52,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",

front/src/Administration/AnalyticsClient.ts

@@ -0,0 +1,61 @@
+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();

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -4,6 +4,7 @@
   import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
   import { onDestroy, onMount } from "svelte";
   import { EmojiButton } from '@joeattardi/emoji-button';
+  import { isMobile } from "../../Enum/EnvironmentVariable";
 
   let emojiContainer: HTMLElement;
   let picker: EmojiButton;
@@ -16,7 +17,9 @@
       styleProperties: {
         '--font': 'Press Start 2P'
       },
-      autoFocusSearch : false
+      theme: 'dark',
+      emojisPerRow: isMobile() ? 6 : 8,
+      autoFocusSearch: false
     });
 
     picker.on("emoji", (selection) => {
@@ -36,6 +39,12 @@
     })
   })
 
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      emoteMenuStore.closeEmoteMenu();
+    }
+  }
+
   onDestroy(() => {
     if (unsubscriber) {
       unsubscriber();
@@ -46,6 +55,8 @@
 
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <div class="emote-menu-container">
   <div class="emote-menu" bind:this={emojiContainer}></div>
 </div>
@@ -62,5 +73,4 @@
       pointer-events: all;
     }
   }
-
 </style>

front/src/Connexion/ConnectionManager.ts

@@ -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;
@@ -105,6 +106,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();
@@ -121,6 +123,7 @@ class ConnectionManager {
             this.authToken = data.authToken;
             localUserStore.saveUser(this.localUser);
             localUserStore.setAuthToken(this.authToken);
+            analyticsClient.loggedWithToken();
 
             const roomUrl = data.roomUrl;
 
@@ -196,6 +199,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);

front/src/Enum/EnvironmentVariable.ts

@@ -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 DEBUG_IGNORE_SSL = process.env.DEBUG_IGNORE_SSL ? process.env.DEBUG_IGNORE_SSL == "true" : false;
 
 export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;

front/src/Phaser/Game/GameScene.ts

@@ -94,7 +94,7 @@ import { userIsAdminStore } from "../../Stores/GameStore";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
 import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
-import type { RadialMenuItem } from "../Components/RadialMenu";
+import {analyticsClient} from "../../Administration/AnalyticsClient";
 import { get } from "svelte/store";
 
 export interface GameSceneInitInterface {
@@ -430,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);
@@ -1502,6 +1503,7 @@ export class GameScene extends DirtyScene {
             })
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);
+                analyticsClient.launchEmote(emoteKey);
             });
         } catch (err) {
             if (err instanceof TextureError) {
@@ -1869,6 +1871,7 @@ export class GameScene extends DirtyScene {
         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-jitsi", () => {

front/src/Stores/MenuStore.ts

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

front/src/index.ts

@@ -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 = {
     /**

front/webpack.config.ts

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

front/yarn.lock

@@ -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"
@@ -2378,6 +2382,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"
@@ -4556,6 +4565,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"
@@ -4947,6 +4965,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"