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 {LayoutMode} from "../../WebRtc/LayoutManager";
-    import {DivImportance} from "../../WebRtc/LayoutManager";
+    import {layoutModeStore} from "../../Stores/LayoutStore";
-    import Peer from "./Peer.svelte";
+    import PresentationLayout from "./PresentationLayout.svelte";
-    import {layoutStore} from "../../Stores/LayoutStore";
+    import ChatLayout from "./ChatLayout.svelte";
-    import {videoFocusStore} from "../../Stores/VideoFocusStore";
 
 </script>
 
 <div class="video-overlay">
-    <div class="main-section">
+    {#if $layoutModeStore === LayoutMode.Presentation }
-        {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+        <PresentationLayout />
-            {#if $videoFocusStore && peer === $videoFocusStore }
+    {:else }
-                <Peer peer={peer}></Peer>
+        <ChatLayout />
-            {/if}
+    {/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>
-
-
 </div>
 
 <style lang="scss">

front/src/Stores/LayoutStore.ts

@@ -1,16 +1,17 @@
-import {derived, get, writable} from "svelte/store";
+import {derived, get, Readable, writable} from "svelte/store";
 import {ScreenSharingLocalMedia, screenSharingLocalMedia} from "./ScreenSharingStore";
 import { peerStore, screenSharingStreamStore} from "./PeerStore";
 import type {RemotePeer} from "../WebRtc/SimplePeer";
+import {LayoutMode} from "../WebRtc/LayoutManager";
 
 export type DisplayableMedia = RemotePeer | ScreenSharingLocalMedia;
 
+export const layoutModeStore = writable<LayoutMode>(LayoutMode.Presentation);
+
 /**
  * A store that contains the layout of the streams
  */
-function createLayoutStore() {
+function createLayoutStore(): Readable<Map<string, DisplayableMedia>> {
-
-    let unsubscribes: (()=>void)[] = [];
 
     return derived([
         screenSharingStreamStore,
@@ -21,10 +22,6 @@ function createLayoutStore() {
             $peerStore,
             $screenSharingLocalMedia,
         ], set) => {
-        for (const unsubscribe of unsubscribes) {
-            unsubscribe();
-        }
-        unsubscribes = [];
 
         const peers = new Map<string, DisplayableMedia>();
 

front/style/style.scss

@@ -211,7 +211,7 @@ video.myCamVideo{
     display: inline-flex;
     bottom: 10px;
     right: 15px;
-    width: 180px;
+    width: 240px;
     height: 40px;
     text-align: center;
     align-content: center;
@@ -270,6 +270,16 @@ video.myCamVideo{
 .btn-cam-action:hover .btn-monitor.hide{
     transform: translateY(60px);
 }
+.btn-layout{
+    pointer-events: auto;
+    transition: all .15s;
+}
+.btn-layout.hide {
+    transform: translateY(60px);
+}
+.btn-cam-action:hover .btn-layout.hide{
+    transform: translateY(60px);
+}
 .btn-copy{
     pointer-events: auto;
     transition: all .3s;