From 7e9343f1b719ec1404693212be3a24f2ec966d40 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Wed, 2 Feb 2022 12:15:13 +0100
Subject: [PATCH] Fix mozaic layout

---
 .../Components/EmbedScreens/Layouts/MozaicLayout.svelte  | 3 ++-
 front/src/Components/Video/MediaBox.svelte               | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte b/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte
index 25ff16c8..846a0432 100644
--- a/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte
+++ b/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>
diff --git a/front/src/Components/Video/MediaBox.svelte b/front/src/Components/Video/MediaBox.svelte
index ff3c81f5..0a098cd1 100644
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/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;