From d888b694ccd700e5a0009a53e663c0d65e770c9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 15 Jun 2021 17:30:28 +0200
Subject: [PATCH] Adding button to change layout

---
 front/src/Components/CameraControls.svelte    | 17 ++++++++++
 front/src/Components/Video/ChatLayout.svelte  | 30 +++++++++++++++++
 .../Video/PresentationLayout.svelte           | 20 ++++++++++++
 .../src/Components/Video/VideoOverlay.svelte  | 32 ++++++-------------
 front/src/Stores/LayoutStore.ts               | 13 +++-----
 front/style/style.scss                        | 12 ++++++-
 6 files changed, 92 insertions(+), 32 deletions(-)
 create mode 100644 front/src/Components/Video/ChatLayout.svelte
 create mode 100644 front/src/Components/Video/PresentationLayout.svelte

diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index 5c17a9fe..17440a65 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/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">
diff --git a/front/src/Components/Video/ChatLayout.svelte b/front/src/Components/Video/ChatLayout.svelte
new file mode 100644
index 00000000..bab13d66
--- /dev/null
+++ b/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>
diff --git a/front/src/Components/Video/PresentationLayout.svelte b/front/src/Components/Video/PresentationLayout.svelte
new file mode 100644
index 00000000..f7ac5802
--- /dev/null
+++ b/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>
diff --git a/front/src/Components/Video/VideoOverlay.svelte b/front/src/Components/Video/VideoOverlay.svelte
index 88c1cd42..0190fd49 100644
--- a/front/src/Components/Video/VideoOverlay.svelte
+++ b/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">
diff --git a/front/src/Stores/LayoutStore.ts b/front/src/Stores/LayoutStore.ts
index d94eea48..c1f12516 100644
--- a/front/src/Stores/LayoutStore.ts
+++ b/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() {
-
-    let unsubscribes: (()=>void)[] = [];
+function createLayoutStore(): Readable<Map<string, DisplayableMedia>> {
 
     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>();
 
diff --git a/front/style/style.scss b/front/style/style.scss
index 264f7aae..df5f951f 100644
--- a/front/style/style.scss
+++ b/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;