Improving naming

front/src/Components/CameraControls.svelte

@@ -9,7 +9,7 @@
     import microphoneCloseImg from "./images/microphone-close.svg";
     import layoutPresentationImg from "./images/layout-presentation.svg";
     import layoutChatImg from "./images/layout-chat.svg";
-    import {layoutModeStore} from "../Stores/LayoutStore";
+    import {layoutModeStore} from "../Stores/StreamableCollectionStore";
     import {LayoutMode} from "../WebRtc/LayoutManager";
     import {peerStore} from "../Stores/PeerStore";
 

front/src/Components/Video/ChatLayout.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-    import Peer from "./Peer.svelte";
+    import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
-    import {layoutStore} from "../../Stores/LayoutStore";
     import {afterUpdate, onDestroy} from "svelte";
     import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
+    import MediaBox from "./MediaBox.svelte";
 
     let cssClass = 'one-col';
 
-    const unsubscribe = layoutStore.subscribe((displayableMedias) => {
+    const unsubscribe = streamableCollectionStore.subscribe((displayableMedias) => {
         const nbUsers = displayableMedias.size;
         if (nbUsers <= 1) {
             cssClass = 'one-col';
@@ -29,7 +29,7 @@
 </script>
 
 <div class="chat-mode {cssClass}">
-    {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+    {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
-        <Peer peer={peer}></Peer>
+        <MediaBox streamable={peer}></MediaBox>
     {/each}
 </div>

front/src/Components/Video/MediaBox.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {VideoPeer} from "../../WebRtc/VideoPeer";
+    import VideoMediaBox from "./VideoMediaBox.svelte";
+    import ScreenSharingMediaBox from "./ScreenSharingMediaBox.svelte";
+    import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
+    import LocalStreamMediaBox from "./LocalStreamMediaBox.svelte";
+    import type {Streamable} from "../../Stores/StreamableCollectionStore";
+
+    export let streamable: Streamable;
+</script>
+
+<div class="media-container">
+    {#if streamable instanceof VideoPeer}
+        <VideoMediaBox peer={streamable}/>
+    {:else if streamable instanceof ScreenSharingPeer}
+        <ScreenSharingMediaBox peer={streamable}/>
+    {:else}
+        <LocalStreamMediaBox peer={streamable} cssClass=""/>
+    {/if}
+</div>

front/src/Components/Video/Peer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import {VideoPeer} from "../../WebRtc/VideoPeer";
-    import VideoMedia from "./VideoMedia.svelte";
-    import ScreenSharingMedia from "./ScreenSharingMedia.svelte";
-    import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
-    import LocalStreamMedia from "./LocalStreamMedia.svelte";
-    import type {DisplayableMedia} from "../../Stores/LayoutStore";
-
-    export let peer: DisplayableMedia;
-</script>
-
-<div class="media-container">
-    {#if peer instanceof VideoPeer}
-        <VideoMedia peer={peer}/>
-    {:else if peer instanceof ScreenSharingPeer}
-        <ScreenSharingMedia peer={peer}/>
-    {:else}
-        <LocalStreamMedia peer={peer} cssClass=""/>
-    {/if}
-</div>

front/src/Components/Video/PresentationLayout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import Peer from "./Peer.svelte";
+    import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
-    import {layoutStore} from "../../Stores/LayoutStore";
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
     import {afterUpdate} from "svelte";
     import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
+    import MediaBox from "./MediaBox.svelte";
 
     afterUpdate(() => {
         biggestAvailableAreaStore.recompute();
@@ -11,16 +11,14 @@
 </script>
 
 <div class="main-section">
-    {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+    {#if $videoFocusStore }
-        {#if $videoFocusStore && peer === $videoFocusStore }
+        <MediaBox streamable={$videoFocusStore}></MediaBox>
-            <Peer peer={peer}></Peer>
     {/if}
-    {/each}
 </div>
 <aside class="sidebar">
-    {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+    {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
         {#if peer !== $videoFocusStore }
-            <Peer peer={peer}></Peer>
+            <MediaBox streamable={peer}></MediaBox>
         {/if}
     {/each}
 </aside>

front/src/Components/Video/VideoOverlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {LayoutMode} from "../../WebRtc/LayoutManager";
-    import {layoutModeStore} from "../../Stores/LayoutStore";
+    import {layoutModeStore} from "../../Stores/StreamableCollectionStore";
     import PresentationLayout from "./PresentationLayout.svelte";
     import ChatLayout from "./ChatLayout.svelte";
 

front/src/Stores/BiggestAvailableAreaStore.ts

@@ -2,7 +2,7 @@ import {get, writable} from "svelte/store";
 import type {Box} from "../WebRtc/LayoutManager";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {LayoutMode} from "../WebRtc/LayoutManager";
-import {layoutModeStore} from "./LayoutStore";
+import {layoutModeStore} from "./StreamableCollectionStore";
 
 /**
  * Tries to find the biggest available box of remaining space (this is a space where we can center the character)

front/src/Stores/PeerStore.ts

@@ -24,14 +24,12 @@ function createPeerStore() {
                             return users;
                         });
                     }
-                    console.log('CONNECT VIDEO', peers);
                 },
                 onDisconnect(userId: number) {
                     update(users => {
                         users.delete(userId);
                         return users;
                     });
-                    console.log('DISCONNECT VIDEO', peers);
                 }
             })
         }

front/src/Stores/StreamableCollectionStore.ts

@@ -4,14 +4,14 @@ import { peerStore, screenSharingStreamStore} from "./PeerStore";
 import type {RemotePeer} from "../WebRtc/SimplePeer";
 import {LayoutMode} from "../WebRtc/LayoutManager";
 
-export type DisplayableMedia = RemotePeer | ScreenSharingLocalMedia;
+export type Streamable = RemotePeer | ScreenSharingLocalMedia;
 
 export const layoutModeStore = writable<LayoutMode>(LayoutMode.Presentation);
 
 /**
- * A store that contains the layout of the streams
+ * A store that contains everything that can produce a stream (so the peers + the local screen sharing stream)
  */
-function createLayoutStore(): Readable<Map<string, DisplayableMedia>> {
+function createStreamableCollectionStore(): Readable<Map<string, Streamable>> {
 
     return derived([
         screenSharingStreamStore,
@@ -23,9 +23,9 @@ function createLayoutStore(): Readable<Map<string, DisplayableMedia>> {
             $screenSharingLocalMedia,
         ], set) => {
 
-        const peers = new Map<string, DisplayableMedia>();
+        const peers = new Map<string, Streamable>();
 
-        const addPeer = (peer: DisplayableMedia) => {
+        const addPeer = (peer: Streamable) => {
             peers.set(peer.uniqueId, peer);
         };
 
@@ -40,4 +40,4 @@ function createLayoutStore(): Readable<Map<string, DisplayableMedia>> {
     });
 }
 
-export const layoutStore = createLayoutStore();
+export const streamableCollectionStore = createStreamableCollectionStore();

front/src/Stores/VideoFocusStore.ts

@@ -2,19 +2,19 @@ import {writable} from "svelte/store";
 import type {RemotePeer, SimplePeer} from "../WebRtc/SimplePeer";
 import {VideoPeer} from "../WebRtc/VideoPeer";
 import {ScreenSharingPeer} from "../WebRtc/ScreenSharingPeer";
-import type {DisplayableMedia} from "./LayoutStore";
+import type {Streamable} from "./StreamableCollectionStore";
 
 /**
  * A store that contains the peer / media that has currently the "importance" focus.
  */
 function createVideoFocusStore() {
-    const { subscribe, set, update } = writable<DisplayableMedia | null>(null);
+    const { subscribe, set, update } = writable<Streamable | null>(null);
 
-    let focusedMedia: DisplayableMedia | null = null;
+    let focusedMedia: Streamable | null = null;
 
     return {
         subscribe,
-        focus: (media: DisplayableMedia) => {
+        focus: (media: Streamable) => {
             focusedMedia = media;
             set(media);
         },
@@ -22,7 +22,7 @@ function createVideoFocusStore() {
             focusedMedia = null;
             set(null);
         },
-        toggleFocus: (media: DisplayableMedia) => {
+        toggleFocus: (media: Streamable) => {
             if (media !== focusedMedia) {
                 focusedMedia = media;
             } else {