Adding button to change layout

front/src/Components/CameraControls.svelte

@@ -7,6 +7,9 @@
     import cinemaCloseImg from "./images/cinema-close.svg";
     import microphoneImg from "./images/microphone.svg";
     import microphoneCloseImg from "./images/microphone-close.svg";
+    import {layoutModeStore} from "../Stores/LayoutStore";
+    import {LayoutMode} from "../WebRtc/LayoutManager";
+    import {peerStore} from "../Stores/PeerStore";
 
     function screenSharingClick(): void {
         if ($requestedScreenSharingState === true) {
@@ -32,10 +35,24 @@
         }
     }
 
+    function switchLayoutMode() {
+        if ($layoutModeStore === LayoutMode.Presentation) {
+            $layoutModeStore = LayoutMode.VideoChat;
+        } else {
+            $layoutModeStore = LayoutMode.Presentation;
+        }
+    }
 </script>
 
 <div>
     <div class="btn-cam-action">
+        <div class="btn-layout" on:click={switchLayoutMode} class:hide={$peerStore.size === 0}>
+            {#if $layoutModeStore === LayoutMode.Presentation }
+                <img src={monitorImg} alt="Switch to mosaic mode">
+            {:else}
+                <img src={monitorCloseImg} alt="Switch to presentation mode">
+            {/if}
+        </div>
         <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
             {#if $requestedScreenSharingState}
                 <img src={monitorImg} alt="Start screen sharing">

front/src/Components/Video/ChatLayout.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import Peer from "./Peer.svelte";
+    import {layoutStore} from "../../Stores/LayoutStore";
+    import {onDestroy} from "svelte";
+
+    let cssClass = 'one-col';
+
+    const unsubscribe = layoutStore.subscribe((displayableMedias) => {
+        const nbUsers = displayableMedias.size;
+        if (nbUsers <= 1) {
+            cssClass = 'one-col';
+        } else if (nbUsers <= 4) {
+            cssClass = 'two-col';
+        } else if (nbUsers <= 9) {
+            cssClass = 'three-col';
+        } else {
+            cssClass = 'four-col';
+        }
+    });
+
+    onDestroy(() => {
+        unsubscribe();
+    });
+</script>
+
+<div class="chat-mode {cssClass}">
+    {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+        <Peer peer={peer}></Peer>
+    {/each}
+</div>

front/src/Components/Video/PresentationLayout.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Peer from "./Peer.svelte";
+    import {layoutStore} from "../../Stores/LayoutStore";
+    import {videoFocusStore} from "../../Stores/VideoFocusStore";
+</script>
+
+<div class="main-section">
+    {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+        {#if $videoFocusStore && peer === $videoFocusStore }
+            <Peer peer={peer}></Peer>
+        {/if}
+    {/each}
+</div>
+<aside class="sidebar">
+    {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+        {#if peer !== $videoFocusStore }
+            <Peer peer={peer}></Peer>
+        {/if}
+    {/each}
+</aside>

front/src/Components/Video/VideoOverlay.svelte

@@ -1,31 +1,17 @@
 <script lang="ts">
-    import {screenSharingStreamStore} from "../../Stores/PeerStore";
-    import {DivImportance} from "../../WebRtc/LayoutManager";
-    import Peer from "./Peer.svelte";
-    import {layoutStore} from "../../Stores/LayoutStore";
-    import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {LayoutMode} from "../../WebRtc/LayoutManager";
+    import {layoutModeStore} from "../../Stores/LayoutStore";
+    import PresentationLayout from "./PresentationLayout.svelte";
+    import ChatLayout from "./ChatLayout.svelte";
 
 </script>
 
 <div class="video-overlay">
-    <div class="main-section">
-        {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
-            {#if $videoFocusStore && peer === $videoFocusStore }
-                <Peer peer={peer}></Peer>
-            {/if}
-        {/each}
-    </div>
-    <aside class="sidebar">
-        {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
-            {#if peer !== $videoFocusStore }
-                <Peer peer={peer}></Peer>
-            {/if}
-        {/each}
-    </aside>
-    <div class="chat-mode three-col" style="display: none;">
-    </div>
-
-
+    {#if $layoutModeStore === LayoutMode.Presentation }
+        <PresentationLayout />
+    {:else }
+        <ChatLayout />
+    {/if}
 </div>
 
 <style lang="scss">