Merge branch 'develop' into feature-options-menu

2022-02-02 09:31:10 +01:00 · 2022-02-02 09:31:10 +01:00 · 0eaeaf7cfb
commit 0eaeaf7cfb
parent a448015196 8bd0d648d4
20 changed files with 104 additions and 26 deletions
--- a/front/package.json
+++ b/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",
--- a/front/src/Components/ActionsMenu/ActionsMenu.svelte
+++ b/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";

--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/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;
--- a/front/src/Components/Video/LocalStreamMediaBox.svelte
+++ b/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>
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/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 {
--- a/front/src/Components/Video/ScreenSharingMediaBox.svelte
+++ b/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
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/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}
--- a/front/src/Phaser/Entity/Character.ts
+++ b/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();
--- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
+++ b/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[]> => {
-    const promisesList: Promise<unknown>[] = [];
+): CancelablePromise<string[]> => {
+    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;
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/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,
--- a/front/src/Phaser/Game/GameMapPropertiesListener.ts
+++ b/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;
                        }
                    });

--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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);
            }

--- a/front/src/Phaser/Login/AbstractCharacterScene.ts
+++ b/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) {
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/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);
    }
--- a/front/src/Phaser/Player/Player.ts
+++ b/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,
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/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;
--- a/front/src/Stores/StreamableCollectionStore.ts
+++ b/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);
        }
    );
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/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);
--- a/front/style/style.scss
+++ b/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%;
--- a/front/yarn.lock
+++ b/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"