Changing the way we focus a video element.

Now, only one video element can be important.

front/src/Components/Video/VideoOverlay.svelte

@@ -3,18 +3,23 @@
     import {DivImportance} from "../../WebRtc/LayoutManager";
     import Peer from "./Peer.svelte";
     import {layoutStore} from "../../Stores/LayoutStore";
+    import {videoFocusStore} from "../../Stores/VideoFocusStore";
 
 </script>
 
 <div class="video-overlay">
     <div class="main-section">
-        {#each [...$layoutStore.get(DivImportance.Important).values()] as peer (peer.uniqueId)}
-            <Peer peer={peer}></Peer>
+        {#each [...$layoutStore.values()] as peer (peer.uniqueId)}
+            {#if $videoFocusStore && peer === $videoFocusStore }
+                <Peer peer={peer}></Peer>
+            {/if}
         {/each}
     </div>
     <aside class="sidebar">
-        {#each [...$layoutStore.get(DivImportance.Normal).values()] as peer (peer.uniqueId)}
-            <Peer peer={peer}></Peer>
+        {#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;">