Split App into Header and Stream

src/App.svelte

@@ -1,5 +1,8 @@
 <script>
     import { onMount } from "svelte";
+    import Header from "./lib/Header.svelte";
+    import Stream from "./lib/Stream.svelte";
+
     let streams = [];
     let fracsX = 0;
     let fracsY = 0;
@@ -8,39 +11,23 @@
 
     onMount(() => {
         streams = new URLSearchParams(window.location.search).getAll("streams");
-        fracsX = Math.max(Math.ceil(streams.length / 2), 2);
-        fracsY = Math.max(Math.ceil(streams.length / 2), 2);
-
         if (streams.length === 1) {
+            fracsX = 1;
             fracsY = 1;
-            fracsX = 1;
         } else if (streams.length === 2) {
-            fracsY = Math.max(Math.ceil(streams.length / 2), 2);
             fracsX = 1;
+            fracsY = Math.max(Math.ceil(streams.length / 2), 2);
         } else {
             fracsX = Math.max(Math.ceil(streams.length / 2), 2);
+            fracsY = Math.max(Math.ceil(streams.length / 2), 2);
         }
     });
 </script>
 
 <main>
-    <div class="buttons">
+    {#if containerElement}
-        <button
+        <Header {containerElement} />
-            on:click={() => {
-                showButtons = !showButtons;
-            }}>[{showButtons ? "x" : " "}]</button
-        >
-        {#if showButtons}
-            <button
-                on:click={() => {
-                    if (containerElement) {
-                        containerElement.requestFullscreen();
-                    }
-                }}>Fullscreen</button
-            >
-            <!--<button>Placeholder</button>-->
     {/if}
-    </div>
     <div
         bind:this={containerElement}
         class="streams"
@@ -52,29 +39,16 @@
     >
         {#if streams}
             {#each streams as stream}
-                <iframe title={stream} src={"https://vdo.ninja/?view=" + stream}
+                <Stream {stream} />
-                ></iframe>
             {/each}
         {/if}
     </div>
 </main>
 
 <style>
-    .buttons {
-        display: flex;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
     .streams {
         display: grid;
         height: 100vh;
         width: 100vw;
     }
-
-    iframe {
-        width: 100%;
-        height: 100%;
-    }
 </style>

src/lib/Header.svelte

@@ -0,0 +1,30 @@
+<script>
+    let showButtons = false;
+    export let containerElement = null;
+</script>
+
+<header>
+    <button
+        on:click={() => {
+            showButtons = !showButtons;
+        }}>[{showButtons ? "<" : ">"}]</button
+    >
+    {#if showButtons}
+        <button
+            on:click={() => {
+                if (containerElement) containerElement.requestFullscreen();
+            }}>Fullscreen</button
+        >
+        <!--<button>Placeholder</button>-->
+    {/if}
+</header>
+
+<style>
+    header {
+        width: 100vw;
+        display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+</style>

src/lib/Stream.svelte

@@ -0,0 +1,20 @@
+<script>
+    export let stream;
+</script>
+
+<div class="stream-container">
+    <iframe title={stream} src={"https://vdo.ninja/?vol=0&view=" + stream}
+    ></iframe>
+</div>
+
+<style>
+    .stream-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    iframe {
+        width: 100%;
+        height: 100%;
+    }
+</style>