Merge branch 'develop' into feature-options-menu

front/package.json

@@ -47,6 +47,7 @@
     "@types/simple-peer": "^9.11.1",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.2",
+    "cancelable-promise": "^4.2.1",
     "cross-env": "^7.0.3",
     "deep-copy-ts": "^0.5.0",
     "easystarjs": "^0.4.4",

front/src/Components/ActionsMenu/ActionsMenu.svelte

@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import { fly } from "svelte/transition";
     import { actionsMenuStore } from '../../Stores/ActionsMenuStore';
     import { onDestroy } from "svelte";
 

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -20,7 +20,7 @@
 
     onMount(() => {
         icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
-        icon.alt = urlObject.hostname;
+        icon.alt = coWebsite.altMessage ?? urlObject.hostname;
         icon.onload = () => {
             iconLoaded = true;
         };
@@ -204,6 +204,10 @@
             border-image-outset: 1;
         }
 
+        &:not(.vertical) {
+            animation: bounce 0.35s ease 6 alternate;
+        }
+
         &.vertical {
             margin: 7px;
 
@@ -216,6 +220,8 @@
                 width: 40px;
                 height: 40px;
             }
+
+            animation: shake 0.35s ease-in-out;
         }
 
         &.displayed {
@@ -259,6 +265,41 @@
             }
         }
 
+        @keyframes bounce {
+            from {
+                transform: translateY(0);
+            }
+            to {
+                transform: translateY(-15px);
+            }
+        }
+
+        @keyframes shake {
+            0% {
+                transform: translateX(0);
+            }
+
+            20% {
+                transform: translateX(-10px);
+            }
+
+            40% {
+                transform: translateX(10px);
+            }
+
+            60% {
+                transform: translateX(-10px);
+            }
+
+            80% {
+                transform: translateX(10px);
+            }
+
+            100% {
+                transform: translateX(0);
+            }
+        }
+
         .cowebsite-icon {
             width: 50px;
             height: 50px;

front/src/Components/Video/LocalStreamMediaBox.svelte

@@ -15,7 +15,7 @@
     if (stream) {
         embedScreen = {
             type: "streamable",
-            embed: stream as unknown as Streamable,
+            embed: peer as unknown as Streamable,
         };
     }
 </script>

front/src/Components/Video/MediaBox.svelte

@@ -44,7 +44,7 @@
         pointer-events: auto;
 
         padding: 0;
-        max-height: 85%;
+        max-height: 200px;
         max-width: 85%;
 
         &:hover {

front/src/Components/Video/ScreenSharingMediaBox.svelte

@@ -31,10 +31,10 @@
         <div class="rtc-error" />
     {/if}
     {#if $streamStore !== null}
-        <!-- svelte-ignore a11y-media-has-caption -->
         <i class="container">
             <span style="background-color: {getColorByString(name)};">{name}</span>
         </i>
+        <!-- svelte-ignore a11y-media-has-caption -->
         <video
             use:srcObject={$streamStore}
             autoplay

front/src/Components/Video/VideoMediaBox.svelte

@@ -50,7 +50,12 @@
     });
 </script>
 
-<div class="video-container" class:no-clikable={!clickable} bind:this={videoContainer}>
+<div
+    class="video-container"
+    class:no-clikable={!clickable}
+    bind:this={videoContainer}
+    on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}
+>
     {#if $statusStore === "connecting"}
         <div class="connecting-spinner" />
     {/if}

front/src/Phaser/Entity/Character.ts

@@ -16,6 +16,7 @@ import type { PictureStore } from "../../Stores/PictureStore";
 import { Unsubscriber, Writable, writable } from "svelte/store";
 import { createColorStore } from "../../Stores/OutlineColorStore";
 import type { OutlineableInterface } from '../Game/OutlineableInterface';
+import type CancelablePromise from "cancelable-promise";
 
 const playerNameY = -25;
 
@@ -45,12 +46,13 @@ export abstract class Character extends Container implements OutlineableInterfac
     private readonly _pictureStore: Writable<string | undefined>;
     private readonly outlineColorStore = createColorStore();
     private readonly outlineColorStoreUnsubscribe: Unsubscriber;
+    private texturePromise: CancelablePromise<string[] | void> | undefined;
 
     constructor(
         scene: GameScene,
         x: number,
         y: number,
-        texturesPromise: Promise<string[]>,
+        texturesPromise: CancelablePromise<string[]>,
         name: string,
         direction: PlayerAnimationDirections,
         moving: boolean,
@@ -69,7 +71,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         this._pictureStore = writable(undefined);
 
         //textures are inside a Promise in case they need to be lazyloaded before use.
-        texturesPromise
+        this.texturePromise = texturesPromise
             .then((textures) => {
                 this.addTextures(textures, frame);
                 this.invisible = false;
@@ -84,6 +86,9 @@ export abstract class Character extends Container implements OutlineableInterfac
                     this.invisible = false;
                     this.playAnimation(direction, moving);
                 });
+            })
+            .finally(() => {
+                this.texturePromise = undefined;
             });
 
         this.playerNameText = new Text(scene, 0, playerNameY, name, {
@@ -344,6 +349,7 @@ export abstract class Character extends Container implements OutlineableInterfac
                 this.scene.sys.updateList.remove(sprite);
             }
         }
+        this.texturePromise?.cancel();
         this.list.forEach((objectContaining) => objectContaining.destroy());
         this.outlineColorStoreUnsubscribe();
         super.destroy();

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -1,6 +1,7 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import type { CharacterTexture } from "../../Connexion/LocalUser";
 import { BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES } from "./PlayerTextures";
+import CancelablePromise from "cancelable-promise";
 
 export interface FrameConfig {
     frameWidth: number;
@@ -30,7 +31,7 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio
 export const loadCustomTexture = (
     loaderPlugin: LoaderPlugin,
     texture: CharacterTexture
-): Promise<BodyResourceDescriptionInterface> => {
+): CancelablePromise<BodyResourceDescriptionInterface> => {
     const name = "customCharacterTexture" + texture.id;
     const playerResourceDescriptor: BodyResourceDescriptionInterface = { name, img: texture.url, level: texture.level };
     return createLoadingPromise(loaderPlugin, playerResourceDescriptor, {
@@ -42,8 +43,8 @@ export const loadCustomTexture = (
 export const lazyLoadPlayerCharacterTextures = (
     loadPlugin: LoaderPlugin,
     texturekeys: Array<string | BodyResourceDescriptionInterface>
-): Promise<string[]> => {
+): CancelablePromise<string[]> => {
-    const promisesList: Promise<unknown>[] = [];
+    const promisesList: CancelablePromise<unknown>[] = [];
     texturekeys.forEach((textureKey: string | BodyResourceDescriptionInterface) => {
         try {
             //TODO refactor
@@ -60,12 +61,12 @@ export const lazyLoadPlayerCharacterTextures = (
             console.error(err);
         }
     });
-    let returnPromise: Promise<Array<string | BodyResourceDescriptionInterface>>;
+    let returnPromise: CancelablePromise<Array<string | BodyResourceDescriptionInterface>>;
     if (promisesList.length > 0) {
         loadPlugin.start();
-        returnPromise = Promise.all(promisesList).then(() => texturekeys);
+        returnPromise = CancelablePromise.all(promisesList).then(() => texturekeys);
     } else {
-        returnPromise = Promise.resolve(texturekeys);
+        returnPromise = CancelablePromise.resolve(texturekeys);
     }
 
     //If the loading fail, we render the default model instead.
@@ -98,10 +99,17 @@ export const createLoadingPromise = (
     playerResourceDescriptor: BodyResourceDescriptionInterface,
     frameConfig: FrameConfig
 ) => {
-    return new Promise<BodyResourceDescriptionInterface>((res, rej) => {
+    return new CancelablePromise<BodyResourceDescriptionInterface>((res, rej, cancel) => {
         if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
             return res(playerResourceDescriptor);
         }
+
+        cancel(() => {
+            loadPlugin.off("loaderror");
+            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.name);
+            return;
+        });
+
         loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, frameConfig);
         const errorCallback = (file: { src: string }) => {
             if (file.src !== playerResourceDescriptor.img) return;

front/src/Phaser/Entity/RemotePlayer.ts

@@ -7,6 +7,7 @@ import type { PointInterface } from "../../Connexion/ConnexionModels";
 import type { PlayerAnimationDirections } from "../Player/Animation";
 import type { Unsubscriber } from 'svelte/store';
 import type { ActivatableInterface } from '../Game/ActivatableInterface';
+import type CancelablePromise from "cancelable-promise";
 
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
@@ -27,7 +28,7 @@ export class RemotePlayer extends Character implements ActivatableInterface {
         x: number,
         y: number,
         name: string,
-        texturesPromise: Promise<string[]>,
+        texturesPromise: CancelablePromise<string[]>,
         direction: PlayerAnimationDirections,
         moving: boolean,
         visitCardUrl: string | null,

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -66,6 +66,7 @@ export class GameMapPropertiesListener {
                     let websitePolicyProperty: string | undefined;
                     let websitePositionProperty: number | undefined;
                     let websiteTriggerProperty: string | undefined;
+                    let websiteTriggerMessageProperty: string | undefined;
 
                     layer.properties.forEach((property) => {
                         switch (property.name) {
@@ -84,6 +85,9 @@ export class GameMapPropertiesListener {
                             case GameMapProperties.OPEN_WEBSITE_TRIGGER:
                                 websiteTriggerProperty = property.value as string | undefined;
                                 break;
+                            case GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE:
+                                websiteTriggerMessageProperty = property.value as string | undefined;
+                                break;
                         }
                     });
 

front/src/Phaser/Game/GameScene.ts

@@ -1270,7 +1270,7 @@ ${escapedMessage}
                 openCoWebsite.closable ?? true
             );
 
-            if (openCoWebsite.lazy !== undefined && !openCoWebsite.lazy) {
+            if (openCoWebsite.lazy === undefined || !openCoWebsite.lazy) {
                 await coWebsiteManager.loadCoWebsite(coWebsite);
             }
 

front/src/Phaser/Login/AbstractCharacterScene.ts

@@ -3,11 +3,12 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
 import { loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
 import type { CharacterTexture } from "../../Connexion/LocalUser";
+import type CancelablePromise from "cancelable-promise";
 
 export abstract class AbstractCharacterScene extends ResizableScene {
     loadCustomSceneSelectCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const textures = this.getTextures();
-        const promises: Promise<BodyResourceDescriptionInterface>[] = [];
+        const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
             for (const texture of textures) {
                 if (texture.level === -1) {
@@ -21,7 +22,7 @@ export abstract class AbstractCharacterScene extends ResizableScene {
 
     loadSelectSceneCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const textures = this.getTextures();
-        const promises: Promise<BodyResourceDescriptionInterface>[] = [];
+        const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
             for (const texture of textures) {
                 if (texture.level !== -1) {

front/src/Phaser/Login/CustomizeScene.ts

@@ -289,7 +289,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         gameManager.setCharacterLayers(layers);
         this.scene.sleep(CustomizeSceneName);
         waScaleManager.restoreZoom();
-        this.events.removeListener("wake");
         gameManager.tryResumingGame(EnableCameraSceneName);
         customCharacterSceneVisibleStore.set(false);
     }

front/src/Phaser/Player/Player.ts

@@ -6,6 +6,7 @@ import { Character } from "../Entity/Character";
 import { get } from "svelte/store";
 import { userMovingStore } from "../../Stores/GameStore";
 import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
+import type CancelablePromise from "cancelable-promise";
 
 export const hasMovedEventName = "hasMoved";
 export const requestEmoteEventName = "requestEmote";
@@ -20,7 +21,7 @@ export class Player extends Character {
         x: number,
         y: number,
         name: string,
-        texturesPromise: Promise<string[]>,
+        texturesPromise: CancelablePromise<string[]>,
         direction: PlayerAnimationDirections,
         moving: boolean,
         companion: string | null,

front/src/Phaser/Services/WaScaleManager.ts

@@ -41,8 +41,8 @@ export class WaScaleManager {
             this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;
         }
 
-        this.scaleManager.setZoom(this.actualZoom);
         this.scaleManager.resize(gameSize.width, gameSize.height);
+        this.scaleManager.setZoom(this.actualZoom);
 
         // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
         const style = this.scaleManager.canvas.style;

front/src/Stores/StreamableCollectionStore.ts

@@ -2,6 +2,7 @@ import { derived, get, Readable } from "svelte/store";
 import { ScreenSharingLocalMedia, screenSharingLocalMedia } from "./ScreenSharingStore";
 import { peerStore, screenSharingStreamStore } from "./PeerStore";
 import type { RemotePeer } from "../WebRtc/SimplePeer";
+import { highlightedEmbedScreen } from "./EmbedScreensStore";
 
 export type Streamable = RemotePeer | ScreenSharingLocalMedia;
 
@@ -25,6 +26,12 @@ function createStreamableCollectionStore(): Readable<Map<string, Streamable>> {
                 addPeer($screenSharingLocalMedia);
             }
 
+            const $highlightedEmbedScreen = get(highlightedEmbedScreen);
+
+            if ($highlightedEmbedScreen?.type === "streamable" && !peers.has($highlightedEmbedScreen.embed.uniqueId)) {
+                highlightedEmbedScreen.removeHighlight();
+            }
+
             set(peers);
         }
     );

front/src/WebRtc/CoWebsiteManager.ts

@@ -44,6 +44,7 @@ export type CoWebsite = {
     allowPolicy: string | undefined;
     allowApi: boolean | undefined;
     jitsi?: boolean;
+    altMessage?: string;
 };
 
 class CoWebsiteManager {
@@ -533,7 +534,8 @@ class CoWebsiteManager {
         allowApi?: boolean,
         allowPolicy?: string,
         position?: number,
-        closable?: boolean
+        closable?: boolean,
+        altMessage?: string
     ): CoWebsite {
         const iframe = document.createElement("iframe");
         const fullUrl = new URL(url, base);
@@ -547,6 +549,7 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
+            altMessage,
         };
 
         this.initialiseCowebsite(newCoWebsite, position);

front/style/style.scss

@@ -38,8 +38,6 @@ body .message-info.warning{
 .video-container {
     display: flex;
     transition: all 0.2s ease;
-    background-color: #00000099;
-    border-radius: 15px;
     cursor: url('./images/cursor_pointer.png'), pointer;
     width: 100%;
 
@@ -55,7 +53,6 @@ body .message-info.warning{
         max-width: 100%;
         width: 100%;
         cursor: url('./images/cursor_pointer.png'), pointer;
-        border-radius: 15px;
 
         &.mobile{
             width: 100%;

front/yarn.lock

@@ -1352,6 +1352,11 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
+cancelable-promise@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/cancelable-promise/-/cancelable-promise-4.2.1.tgz#b02f79c5dde2704acfff1bc1ac2b4090f55541fe"
+  integrity sha512-PJZ/000ocWhPZQBAuNewAOMA2WEkJ8RhXI6AxeGLiGdW8EYDmumzo9wKyNgjDgxc1q/HbXuTdlcI+wXrOe/jMw==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"