Co-website management move to Svelte

front/src/Components/Video/MediaBox.svelte

@@ -8,16 +8,23 @@
 
     export let streamable: Streamable;
     export let isHightlighted = false;
-    export let clickable = false;
+    export let isClickable = false;
+    export let mozaicFullWidth = false;
+    export let mozaicQuarter = false;
 </script>
 
-<div class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}" class:clickable>
+<div
+    class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
+    class:clickable={isClickable}
+    class:mozaic-full-width={mozaicFullWidth}
+    class:mozaic-quarter={mozaicQuarter}
+>
     {#if streamable instanceof VideoPeer}
-        <VideoMediaBox peer={streamable} {clickable} />
+        <VideoMediaBox peer={streamable} clickable={isClickable} />
     {:else if streamable instanceof ScreenSharingPeer}
-        <ScreenSharingMediaBox peer={streamable} {clickable} />
+        <ScreenSharingMediaBox peer={streamable} clickable={isClickable} />
     {:else}
-        <LocalStreamMediaBox peer={streamable} {clickable} cssClass="" />
+        <LocalStreamMediaBox peer={streamable} clickable={isClickable} cssClass="" />
     {/if}
 </div>
 
@@ -57,6 +64,32 @@
             }
         }
 
+        &.mozaic-full-width {
+            width: 95%;
+            max-width: 95%;
+            margin-left: 3%;
+            margin-right: 3%;
+            margin-top: auto;
+            margin-bottom: auto;
+
+            &:hover {
+                margin-top: auto;
+                margin-bottom: auto;
+            }
+        }
+
+        &.mozaic-quarter {
+            width: 95%;
+            max-width: 95%;
+            margin-top: auto;
+            margin-bottom: auto;
+
+            &:hover {
+                margin-top: auto;
+                margin-bottom: auto;
+            }
+        }
+
         &.clickable {
             cursor: url("../../../style/images/cursor_pointer.png"), pointer;
         }