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

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -23,7 +23,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 = () => {
@@ -211,6 +211,7 @@
 
 <style lang="scss">
     .cowebsite-thumbnail {
+        cursor: url("../../../style/images/cursor_pointer.png"), pointer;
         position: relative;
         padding: 0;
         background-color: rgba(#000000, 0.6);
@@ -334,8 +335,6 @@
             }
 
             &.jitsi {
-                filter: invert(100%);
-                -webkit-filter: invert(100%);
                 padding: 7px;
             }
         }
@@ -350,8 +349,11 @@
             left: -10px;
         }
 
-        &:hover .cowebsite-thumbnail-hint {
-            display: inline-block;
+
+        &:hover {
+            .cowebsite-thumbnail-hint {
+                display: inline-block;
+            }
         }
     }
 </style>

front/src/Components/EmbedScreens/CoWebsitesContainer.svelte

@@ -22,6 +22,9 @@
         position: absolute;
         bottom: 5px;
         left: 2%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        overflow: visible;
 
         &.vertical {
             height: auto !important;
@@ -29,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;

front/src/Components/Menu/MenuIcon.svelte

@@ -67,6 +67,8 @@
             on:click|preventDefault={showMenu}
         />
     </span>
+    {/if}
+
     <span class="nes-btn is-dark">
         <img
             src={logoTalk}
@@ -77,7 +79,6 @@
             on:click|preventDefault={showChat}
         />
     </span>
-    {/if}
 </main>
 
 <style lang="scss">

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

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={""} />

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 {

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;