Merge branch 'develop' into feature-options-menu

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}