Co-Wesbite

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -8,6 +8,8 @@
     import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
     import { iframeStates } from "../../WebRtc/CoWebsiteManager";
     import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
+    import { HtmlUtils } from "../../WebRtc/HtmlUtils";
+    import { i18nJson } from "../../i18n/locales";
 
     export let index: number;
     export let coWebsite: CoWebsite;
@@ -65,6 +67,17 @@
         return false;
     }
 
+    function i18n(text: string | undefined): string {
+        if (typeof text === "string") {
+            return i18nJson(text);
+        }
+        return "";
+    }
+
+    function sanitize(html : string | undefined): string {
+      return HtmlUtils.sanitize(html);
+    }
+
     let isHighlight: boolean = false;
     let isMain: boolean = false;
     $: {
@@ -188,6 +201,12 @@
             />
         </rect>
     </svg>
+
+    {#if coWebsite.getHint() && !isMain && !isHighlight }
+    <div class="cowebsite-thumbnail-hint nes-balloon from-left">
+        <p>{@html sanitize(i18n(coWebsite.getHint()))}</p>
+    </div>
+    {/if}
 </div>
 
 <style lang="scss">
@@ -320,5 +339,19 @@
                 padding: 7px;
             }
         }
+
+        .cowebsite-thumbnail-hint {
+            display: none;
+            position:absolute;
+            padding: 8px 4px;
+            text-align: center;
+            bottom: 50px;
+            width: clamp(150px, 15vw, 15vw);
+            left: -10px;
+        }
+
+        &:hover .cowebsite-thumbnail-hint {
+            display: inline-block;
+        }
     }
 </style>

front/src/Components/EmbedScreens/CoWebsitesContainer.svelte

@@ -22,8 +22,6 @@
         position: absolute;
         bottom: 5px;
         left: 2%;
-        overflow-x: auto;
-        overflow-y: hidden;
 
         &.vertical {
             height: auto !important;