merged develop

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -19,7 +19,9 @@
     const urlObject = new URL(coWebsiteUrl);
 
     onMount(() => {
-        icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
+        icon.src = coWebsite.jitsi
+            ? "/resources/logos/meet.svg"
+            : `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
         icon.alt = coWebsite.altMessage ?? urlObject.hostname;
         icon.onload = () => {
             iconLoaded = true;
@@ -34,7 +36,7 @@
                 const coWebsites = $coWebsitesNotAsleep;
                 const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
                 if (newMain) {
-                    coWebsiteManager.goToMain(coWebsite);
+                    coWebsiteManager.goToMain(newMain);
                 }
             } else {
                 highlightedEmbedScreen.toggleHighlight({
@@ -79,6 +81,7 @@
     <img
         class="cowebsite-icon noselect nes-pointer"
         class:hide={!iconLoaded}
+        class:jitsi={coWebsite.jitsi}
         bind:this={icon}
         on:dragstart|preventDefault={noDrag}
         alt=""
@@ -308,6 +311,12 @@
             &.hide {
                 display: none;
             }
+
+            &.jitsi {
+                filter: invert(100%);
+                -webkit-filter: invert(100%);
+                padding: 7px;
+            }
         }
     }
 </style>

front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte

@@ -23,8 +23,9 @@
         {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
             <MediaBox
                 streamable={peer}
+                mozaicSolo={$streamableCollectionStore.size === 1}
                 mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
-                mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4}
+                mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
             />
         {/each}
     </div>

front/src/Components/Video/MediaBox.svelte

@@ -9,6 +9,7 @@
     export let streamable: Streamable;
     export let isHightlighted = false;
     export let isClickable = false;
+    export let mozaicSolo = false;
     export let mozaicFullWidth = false;
     export let mozaicQuarter = false;
 </script>
@@ -16,6 +17,7 @@
 <div
     class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
     class:clickable={isClickable}
+    class:mozaic-solo={mozaicSolo}
     class:mozaic-full-width={mozaicFullWidth}
     class:mozaic-quarter={mozaicQuarter}
 >
@@ -66,6 +68,11 @@
             }
         }
 
+        &.mozaic-solo {
+            max-height: inherit !important;
+            width: 90% !important;
+        }
+
         &.mozaic-full-width {
             width: 95%;
             max-width: 95%;
@@ -73,6 +80,7 @@
             margin-right: 3%;
             margin-top: auto;
             margin-bottom: auto;
+            max-height: 95%;
 
             &:hover {
                 margin-top: auto;
@@ -85,6 +93,7 @@
             max-width: 95%;
             margin-top: auto;
             margin-bottom: auto;
+            max-height: 95%;
 
             &:hover {
                 margin-top: auto;

front/src/Components/WarningContainer/WarningContainer.svelte

@@ -38,7 +38,6 @@
         right: 0;
         margin-left: auto;
         margin-right: auto;
-        transform: translate(-50%, 0);
         font-family: Lato;
         min-width: 300px;
         opacity: 0.9;