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

front/dist/resources/logos/meet.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="452.388px" height="452.388px" viewBox="0 0 452.388 452.388" style="enable-background:new 0 0 452.388 452.388;"
+	 xml:space="preserve">
+<g>
+	<g id="Layer_8_38_">
+		<path d="M441.677,43.643H10.687C4.785,43.643,0,48.427,0,54.329v297.425c0,5.898,4.785,10.676,10.687,10.676h162.069v25.631
+			c0,0.38,0.074,0.722,0.112,1.089h-23.257c-5.407,0-9.796,4.389-9.796,9.795c0,5.408,4.389,9.801,9.796,9.801h158.506
+			c5.406,0,9.795-4.389,9.795-9.801c0-5.406-4.389-9.795-9.795-9.795h-23.256c0.032-0.355,0.115-0.709,0.115-1.089V362.43H441.7
+			c5.898,0,10.688-4.782,10.688-10.676V54.329C452.37,48.427,447.589,43.643,441.677,43.643z M422.089,305.133
+			c0,5.903-4.784,10.687-10.683,10.687H40.96c-5.898,0-10.684-4.783-10.684-10.687V79.615c0-5.898,4.786-10.684,10.684-10.684
+			h370.446c5.898,0,10.683,4.785,10.683,10.684V305.133z M303.942,290.648H154.025c0-29.872,17.472-55.661,42.753-67.706
+			c-15.987-10.501-26.546-28.571-26.546-49.13c0-32.449,26.306-58.755,58.755-58.755c32.448,0,58.753,26.307,58.753,58.755
+			c0,20.553-10.562,38.629-26.545,49.13C286.475,234.987,303.942,260.781,303.942,290.648z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -19,7 +19,9 @@
     const urlObject = new URL(coWebsiteUrl);
 
     onMount(() => {
-        icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
+        icon.src = coWebsite.jitsi
+            ? "/resources/logos/meet.svg"
+            : `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
         icon.alt = coWebsite.altMessage ?? urlObject.hostname;
         icon.onload = () => {
             iconLoaded = true;
@@ -34,7 +36,7 @@
                 const coWebsites = $coWebsitesNotAsleep;
                 const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
                 if (newMain) {
-                    coWebsiteManager.goToMain(coWebsite);
+                    coWebsiteManager.goToMain(newMain);
                 }
             } else {
                 highlightedEmbedScreen.toggleHighlight({
@@ -79,6 +81,7 @@
     <img
         class="cowebsite-icon noselect nes-pointer"
         class:hide={!iconLoaded}
+        class:jitsi={coWebsite.jitsi}
         bind:this={icon}
         on:dragstart|preventDefault={noDrag}
         alt=""
@@ -308,6 +311,12 @@
             &.hide {
                 display: none;
             }
+
+            &.jitsi {
+                filter: invert(100%);
+                -webkit-filter: invert(100%);
+                padding: 7px;
+            }
         }
     }
 </style>

front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte

@@ -23,8 +23,9 @@
         {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
             <MediaBox
                 streamable={peer}
+                mozaicSolo={$streamableCollectionStore.size === 1}
                 mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
-                mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4}
+                mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
             />
         {/each}
     </div>

front/src/Components/Video/MediaBox.svelte

@@ -9,6 +9,7 @@
     export let streamable: Streamable;
     export let isHightlighted = false;
     export let isClickable = false;
+    export let mozaicSolo = false;
     export let mozaicFullWidth = false;
     export let mozaicQuarter = false;
 </script>
@@ -16,6 +17,7 @@
 <div
     class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
     class:clickable={isClickable}
+    class:mozaic-solo={mozaicSolo}
     class:mozaic-full-width={mozaicFullWidth}
     class:mozaic-quarter={mozaicQuarter}
 >
@@ -66,6 +68,11 @@
             }
         }
 
+        &.mozaic-solo {
+            max-height: inherit !important;
+            width: 90% !important;
+        }
+
         &.mozaic-full-width {
             width: 95%;
             max-width: 95%;
@@ -73,6 +80,7 @@
             margin-right: 3%;
             margin-top: auto;
             margin-bottom: auto;
+            max-height: 95%;
 
             &:hover {
                 margin-top: auto;
@@ -85,6 +93,7 @@
             max-width: 95%;
             margin-top: auto;
             margin-bottom: auto;
+            max-height: 95%;
 
             &:hover {
                 margin-top: auto;

front/src/Components/WarningContainer/WarningContainer.svelte

@@ -38,7 +38,6 @@
         right: 0;
         margin-left: auto;
         margin-right: auto;
-        transform: translate(-50%, 0);
         font-family: Lato;
         min-width: 300px;
         opacity: 0.9;

front/src/Phaser/Companion/Companion.ts

@@ -4,6 +4,7 @@ import { PlayerAnimationDirections, PlayerAnimationTypes } from "../Player/Anima
 import { TexturesHelper } from "../Helpers/TexturesHelper";
 import { Writable, writable } from "svelte/store";
 import type { PictureStore } from "../../Stores/PictureStore";
+import type CancelablePromise from "cancelable-promise";
 
 export interface CompanionStatus {
     x: number;
@@ -25,8 +26,9 @@ export class Companion extends Container {
     private direction: PlayerAnimationDirections;
     private animationType: PlayerAnimationTypes;
     private readonly _pictureStore: Writable<string | undefined>;
+    private texturePromise: CancelablePromise<string | void> | undefined;
 
-    constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: Promise<string>) {
+    constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: CancelablePromise<string>) {
         super(scene, x + 14, y + 4);
 
         this.sprites = new Map<string, Sprite>();
@@ -41,7 +43,7 @@ export class Companion extends Container {
         this.companionName = name;
         this._pictureStore = writable(undefined);
 
-        texturePromise
+        this.texturePromise = texturePromise
             .then((resource) => {
                 this.addResource(resource);
                 this.invisible = false;
@@ -234,6 +236,7 @@ export class Companion extends Container {
     }
 
     public destroy(): void {
+        this.texturePromise?.cancel();
         for (const sprite of this.sprites.values()) {
             if (this.scene) {
                 this.scene.sys.updateList.remove(sprite);

front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts

@@ -1,5 +1,6 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import { COMPANION_RESOURCES, CompanionResourceDescriptionInterface } from "./CompanionTextures";
+import CancelablePromise from "cancelable-promise";
 
 export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourceDescriptionInterface[] => {
     COMPANION_RESOURCES.forEach((resource: CompanionResourceDescriptionInterface) => {
@@ -9,8 +10,12 @@ export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourc
     return COMPANION_RESOURCES;
 };
 
-export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise<string> => {
+export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): CancelablePromise<string> => {
-    return new Promise((resolve, reject) => {
+    return new CancelablePromise((resolve, reject, cancel) => {
+        cancel(() => {
+            return;
+        });
+
         const resource = COMPANION_RESOURCES.find((item) => item.name === name);
 
         if (typeof resource === "undefined") {

front/src/Phaser/Entity/Character.ts

@@ -59,7 +59,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         frame: string | number,
         isClickable: boolean,
         companion: string | null,
-        companionTexturePromise?: Promise<string>
+        companionTexturePromise?: CancelablePromise<string>
     ) {
         super(scene, x, y /*, texture, frame*/);
         this.scene = scene;
@@ -142,7 +142,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         this.clickable = clickable;
         if (clickable) {
             this.setInteractive({
-                hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius),
+                hitArea: new Phaser.Geom.Circle(8, 8, interactiveRadius),
                 hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
                 useHandCursor: true,
             });
@@ -179,7 +179,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         });
     }
 
-    public addCompanion(name: string, texturePromise?: Promise<string>): void {
+    public addCompanion(name: string, texturePromise?: CancelablePromise<string>): void {
         if (typeof texturePromise !== "undefined") {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
         }

front/src/Phaser/Entity/RemotePlayer.ts

@@ -31,18 +31,18 @@ export class RemotePlayer extends Character implements ActivatableInterface {
         moving: boolean,
         visitCardUrl: string | null,
         companion: string | null,
-        companionTexturePromise?: Promise<string>,
+        companionTexturePromise?: CancelablePromise<string>,
         activationRadius?: number
     ) {
         super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);
 
         //set data
         this.userId = userId;
+        this.visitCardUrl = visitCardUrl;
         this.registeredActions = [];
         this.registerDefaultActionsMenuActions();
         this.setClickable(this.registeredActions.length > 0);
         this.activationRadius = activationRadius ?? 96;
-        this.visitCardUrl = visitCardUrl;
         this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => {
             this.isActionsMenuInitialized = value ? true : false;
         });
@@ -118,7 +118,7 @@ export class RemotePlayer extends Character implements ActivatableInterface {
 
     private bindEventHandlers(): void {
         this.on(Phaser.Input.Events.POINTER_DOWN, (event: Phaser.Input.Pointer) => {
-            if (event.downElement.nodeName === "CANVAS") {
+            if (event.downElement.nodeName === "CANVAS" && event.leftButtonDown()) {
                 this.toggleActionsMenu();
             }
         });

front/src/Phaser/Player/Player.ts

@@ -25,7 +25,7 @@ export class Player extends Character {
         direction: PlayerAnimationDirections,
         moving: boolean,
         companion: string | null,
-        companionTexturePromise?: Promise<string>
+        companionTexturePromise?: CancelablePromise<string>
     ) {
         super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);