Merge branch 'master' into develop

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com> # Conflicts: # front/public/resources/logos/meet.svg
2022-02-22 23:40:48 +01:00 · 2022-02-22 23:40:48 +01:00 · 658781e02e
commit 658781e02e
parent dfb2fca417 437f35817a
17 changed files with 96 additions and 83 deletions
--- a/front/public/resources/logos/jitsi.png
+++ b/front/public/resources/logos/jitsi.png
--- a/front/public/resources/logos/meet.svg
+++ b/front/public/resources/logos/meet.svg
@ -1,49 +0,0 @@
-<?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>
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@ -21,7 +21,7 @@

    onMount(() => {
        icon.src = isJitsi
-            ? "/resources/logos/meet.svg"
+            ? "/resources/logos/jitsi.png"
            : `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
        icon.alt = coWebsite.getUrl().hostname;
        icon.onload = () => {
@ -188,10 +188,16 @@
            />
        </rect>
    </svg>
+
+    <!-- TODO use trigger message property -->
+    <div class="cowebsite-hover" class:hide={!isJitsi} style="width: max-content;">
+        <p>Open / Close Jitsi meeting!</p>
+    </div>
 </div>

 <style lang="scss">
    .cowebsite-thumbnail {
+        cursor: url("../../../style/images/cursor_pointer.png"), pointer;
        position: relative;
        padding: 0;
        background-color: rgba(#000000, 0.6);
@ -236,6 +242,11 @@
                height: 40px;
            }

+            .cowebsite-hover {
+                top: -4px;
+                left: 55px;
+            }
+
            animation: shake 0.35s ease-in-out;
        }

@ -315,10 +326,33 @@
            }

            &.jitsi {
-                filter: invert(100%);
-                -webkit-filter: invert(100%);
                padding: 7px;
            }
        }
+
+        &:hover {
+            .cowebsite-hover {
+                display: block;
+                width: max-content !important;
+            }
+        }
+
+        .cowebsite-hover {
+            display: none;
+            position: absolute;
+            background-color: rgba(0, 0, 0, 0.6);
+            top: -40px;
+            left: -4px;
+            width: 0 !important;
+            min-height: 20px;
+            transition: all 0.2s ease;
+            overflow: hidden;
+            color: white;
+            padding: 4px;
+            border-radius: 4px;
+            p {
+                margin-bottom: 0;
+            }
+        }
    }
 </style>
--- a/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte
@ -24,6 +24,7 @@
        left: 2%;
        overflow-x: auto;
        overflow-y: hidden;
+        overflow: visible;

        &.vertical {
            height: auto !important;
@ -31,8 +32,6 @@
            bottom: auto !important;
            left: auto !important;
            position: relative;
-            overflow-x: hidden;
-            overflow-y: auto;
            flex-direction: column;
            align-items: center;
            padding-top: 4px;
--- a/front/src/Components/Menu/MenuIcon.svelte
+++ b/front/src/Components/Menu/MenuIcon.svelte
@ -61,15 +61,15 @@
            on:dragstart|preventDefault={noDrag}
            on:click|preventDefault={showMenu}
        />
-        <img
-            src={logoTalk}
-            alt={$LL.menu.icon.open.chat()}
-            class="nes-pointer"
-            draggable="false"
-            on:dragstart|preventDefault={noDrag}
-            on:click|preventDefault={showChat}
-        />
    {/if}
+    <img
+        src={logoTalk}
+        alt={$LL.menu.icon.open.chat()}
+        class="nes-pointer"
+        draggable="false"
+        on:dragstart|preventDefault={noDrag}
+        on:click|preventDefault={showChat}
+    />
 </main>

 <style lang="scss">
--- a/front/src/Components/Video/ScreenSharingMediaBox.svelte
+++ b/front/src/Components/Video/ScreenSharingMediaBox.svelte
@ -4,13 +4,15 @@
    import type { Streamable } from "../../Stores/StreamableCollectionStore";

    import type { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
-    import { getColorByString, srcObject } from "./utils";
+    import { getColorByString, srcObject, getTextColorByBackgroundColor } from "./utils";

    export let clickable = false;

    export let peer: ScreenSharingPeer;
    let streamStore = peer.streamStore;
    let name = peer.userName;
+    let backGroundColor = getColorByString(peer.userName);
+    let textColor = getTextColorByBackgroundColor(backGroundColor);
    let statusStore = peer.statusStore;

    let embedScreen: EmbedScreen;
@ -32,7 +34,7 @@
    {/if}
    {#if $streamStore !== null}
        <i class="container">
-            <span style="background-color: {getColorByString(name)};">{name}</span>
+            <span style="background-color: {backGroundColor}; color: {textColor};">{name}</span>
        </i>
        <!-- svelte-ignore a11y-media-has-caption -->
        <video
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@ -5,7 +5,7 @@
    import reportImg from "./images/report.svg";
    import blockSignImg from "./images/blockSign.svg";
    import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
-    import { getColorByString, srcObject } from "./utils";
+    import { getColorByString, getTextColorByBackgroundColor, srcObject } from "./utils";
    import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
    import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
    import type { Streamable } from "../../Stores/StreamableCollectionStore";
@ -20,6 +20,8 @@
    let streamStore = peer.streamStore;
    let volumeStore = peer.volumeStore;
    let name = peer.userName;
+    let backGroundColor = getColorByString(peer.userName);
+    let textColor = getTextColorByBackgroundColor(backGroundColor);
    let statusStore = peer.statusStore;
    let constraintStore = peer.constraintsStore;

@ -65,7 +67,7 @@
    {/if}
    <!-- {#if !$constraintStore || $constraintStore.video === false} -->
    <i class="container">
-        <span style="background-color: {getColorByString(name)};">{name}</span>
+        <span style="background-color: {backGroundColor}; color: {textColor};">{name}</span>
    </i>
    <div class="woka-icon {($constraintStore && $constraintStore.video !== false) || minimized ? '' : 'no-video'}">
        <Woka userId={peer.userId} placeholderSrc={""} />
--- a/front/src/Components/Video/utils.ts
+++ b/front/src/Components/Video/utils.ts
@ -18,6 +18,24 @@ export function getColorByString(str: string): string | null {
    return color;
 }

+/**
+ * @param color: string
+ * @return string
+ */
+export function getTextColorByBackgroundColor(color: string | null): string {
+    if (!color) {
+        return "white";
+    }
+    const rgb = color.slice(1);
+    const brightness = Math.round(
+        (parseInt(rgb[0] + rgb[1], 16) * 299 +
+            parseInt(rgb[2] + rgb[3], 16) * 587 +
+            parseInt(rgb[4] + rgb[5], 16) * 114) /
+            1000
+    );
+    return brightness > 125 ? "black" : "white";
+}
+
 export function srcObject(node: HTMLVideoElement, stream: MediaStream | null) {
    node.srcObject = stream;
    return {
--- a/front/src/Components/WarningContainer/WarningContainer.svelte
+++ b/front/src/Components/WarningContainer/WarningContainer.svelte
@ -4,36 +4,33 @@
    import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
    import LL from "../../i18n/i18n-svelte";

-    const upgradeLink = ADMIN_URL + "/pricing";
    const registerLink = ADMIN_URL + "/second-step-register";
 </script>

 <main class="warningMain" transition:fly={{ y: -200, duration: 500 }}>
    {#if $userIsAdminStore}
        <h2>{$LL.warning.title()}</h2>
-        <p>
-            {$LL.warning.content({ upgradeLink })}
-        </p>
+        <p>{@html $LL.warning.content()}</p>
    {:else if $limitMapStore}
        <p>
            This map is available for 2 days. You can register your domain <a href={registerLink}>here</a>!
        </p>
    {:else}
        <h2>{$LL.warning.title()}</h2>
-        <p>{$LL.warning.limit()}</p>
+        <p>{@html $LL.warning.content()}</p>
    {/if}
 </main>

 <style lang="scss">
    main.warningMain {
        pointer-events: auto;
-        width: 80%;
+        width: 100%;
        background-color: #f9e81e;
        color: #14304c;
        text-align: center;
        position: absolute;

-        top: 4%;
+        top: 0;
        left: 0;
        right: 0;
        margin-left: auto;
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@ -97,7 +97,7 @@ export abstract class Character extends Container implements OutlineableInterfac
            fontFamily: '"Press Start 2P"',
            fontSize: "8px",
            strokeThickness: 2,
-            stroke: "gray",
+            stroke: "#14304C",
            metrics: {
                ascent: 20,
                descent: 10,
--- a/front/src/Phaser/Game/ActivatablesManager.ts
+++ b/front/src/Phaser/Game/ActivatablesManager.ts
@ -13,7 +13,7 @@ export class ActivatablesManager {

    private canSelectByDistance: boolean = true;

-    private readonly outlineColor = 0xffff00;
+    private readonly outlineColor = 0xf9e81e;
    private readonly directionalActivationPositionShift = 50;

    constructor(currentPlayer: Player) {
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@ -1220,6 +1220,8 @@ ${escapedMessage}
                openCoWebsite.closable ?? true
            );

+            coWebsiteManager.addCoWebsiteToStore(coWebsite, openCoWebsite.position);
+
            if (openCoWebsite.lazy === undefined || !openCoWebsite.lazy) {
                await coWebsiteManager.loadCoWebsite(coWebsite);
            }
@ -1715,7 +1717,7 @@ ${escapedMessage}
                }
            });
            this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => {
-                this.CurrentPlayer.pointerOverOutline(0x00ffff);
+                this.CurrentPlayer.pointerOverOutline(0x365dff);
            });
            this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => {
                this.CurrentPlayer.pointerOutOutline();
--- a/front/src/Phaser/Items/ActionableItem.ts
+++ b/front/src/Phaser/Items/ActionableItem.ts
@ -56,7 +56,7 @@ export class ActionableItem implements ActivatableInterface {

        this.getOutlinePlugin()?.add(this.sprite, {
            thickness: 2,
-            outlineColor: 0xffff00,
+            outlineColor: 0xf9e81e,
        });
    }

--- a/front/src/i18n/de-DE/warning.ts
+++ b/front/src/i18n/de-DE/warning.ts
@ -1,9 +1,11 @@
 import type { Translation } from "../i18n-types";
+import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
+
+const upgradeLink = ADMIN_URL + "/pricing";

 const warning: NonNullable<Translation["warning"]> = {
    title: "Warnung!",
-    content:
-        'Diese Welt erreicht bald die maximale Kapazität. Du kannst die Kapazität <a href={upgradeLink} target="_blank">hier</a> erhöhen',
+    content: `Diese Welt erreicht bald die maximale Kapazität. Du kannst die Kapazität <a href="${upgradeLink}" target="_blank">hier</a> erhöhen`,
    limit: "Diese Welt erreicht bald die maximale Kapazität!",
    accessDenied: {
        camera: "Zugriff auf die Kamera verweigert. Hier klicken um deine Browser Berechtigungen zu prüfen.",
--- a/front/src/i18n/en-US/warning.ts
+++ b/front/src/i18n/en-US/warning.ts
@ -1,9 +1,11 @@
 import type { BaseTranslation } from "../i18n-types";
+import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
+
+const upgradeLink = ADMIN_URL + "/pricing";

 const warning: BaseTranslation = {
    title: "Warning!",
-    content:
-        'This world is close to its limit!. You can upgrade its capacity <a href={upgradeLink} target="_blank">here</a>',
+    content: `This world is close to its limit!. You can upgrade its capacity <a href="${upgradeLink}" target="_blank">here</a>`,
    limit: "This world is close to its limit!",
    accessDenied: {
        camera: "Camera access denied. Click here and check your browser permissions.",
--- a/front/src/i18n/fr-FR/warning.ts
+++ b/front/src/i18n/fr-FR/warning.ts
@ -1,9 +1,11 @@
 import type { Translation } from "../i18n-types";
+import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
+
+const upgradeLink = ADMIN_URL + "/pricing";

 const warning: NonNullable<Translation["warning"]> = {
    title: "Attention!",
-    content:
-        'Ce monde est proche de sa limite ! Vous pouvez améliorer sa capacité <a href={upgradeLink} target="_blank">içi</a>',
+    content: `Ce monde est proche de sa limite ! Vous pouvez améliorer sa capacité <a href="${upgradeLink}" target="_blank">içi</a>`,
    limit: "Ce monde est proche de ses limites!",
    accessDenied: {
        camera: "Accès à la caméra refusé. Cliquez ici et vérifiez les autorisations de votre navigateur.",
--- a/pusher/src/Controller/AdminController.ts
+++ b/pusher/src/Controller/AdminController.ts
@ -84,11 +84,13 @@ export class AdminController extends BaseController {

            if (ADMIN_API_TOKEN === "") {
                res.writeStatus("401 Unauthorized").end("No token configured!");
+                res.end();
                return;
            }
            if (token !== ADMIN_API_TOKEN) {
                console.error("Admin access refused for token: " + token);
                res.writeStatus("401 Unauthorized").end("Incorrect token");
+                res.end();
                return;
            }