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 {layoutStore} from "../../Stores/LayoutStore";
+    import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
     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)}
-        <Peer peer={peer}></Peer>
+    {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
+        <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 {layoutStore} from "../../Stores/LayoutStore";
+    import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
     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 && peer === $videoFocusStore }
-            <Peer peer={peer}></Peer>
-        {/if}
-    {/each}
+    {#if $videoFocusStore }
+        <MediaBox streamable={$videoFocusStore}></MediaBox>
+    {/if}
 </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";