Add AddStreamDialog

src/App.svelte

@@ -2,13 +2,14 @@
     import { onMount } from "svelte";
     import Header from "./lib/Header.svelte";
     import Stream from "./lib/Stream.svelte";
+    import AddStreamDialog from "./lib/AddStreamDialog.svelte";
 
-    let streams = [];
-    let fracsX = 0;
-    let fracsY = 0;
-    let containerElement;
-    let showButtons = false;
-    let showSettings = false;
+    let streams = $state([]);
+    let fracsX = $state(0);
+    let fracsY = $state(0);
+    let showButtons = $state(false);
+    let currentDialog = $state(null);
+    let containerElement = $state(null);
 
     onMount(() => {
         const urlSearchParams = new URLSearchParams(window.location.search);
@@ -16,7 +17,9 @@
             type,
             streamId,
         }));
+    });
 
+    $effect(() => {
         switch (streams.length) {
             case 1:
                 fracsX = 1;
@@ -36,32 +39,37 @@
                 fracsY = 3;
         }
     });
-
-    function onKeyDown() {}
 </script>
 
-<svelte:body on:keydown={onKeyDown} />
 <main>
     {#if containerElement}
-        <Header {containerElement} bind:showSettings />
+        <Header {containerElement} bind:currentDialog />
     {/if}
-    {#if showSettings}
-        <div class="settings">
-            <h2>Settings</h2>
-            <form>
-                <label>
-                    Stream
-                    <input type="text" name="url" />
-                </label>
-                <input type="submit" />
-            </form>
-            <div>
-                {#each streams as stream}
-                    <button on:click={() => {}}>{stream.streamId}</button>
-                {/each}
-            </div>
-        </div>
+    {#if currentDialog === "add-stream"}
+        <AddStreamDialog
+            add={(newStream) => {
+                currentDialog = null;
+                streams.push(newStream);
+                const newUrl = new URL(window.location.toString());
+                newUrl.searchParams.append(newStream.type, newStream.streamId);
+                window.history.pushState({}, null, newUrl);
+            }}
+        ></AddStreamDialog>
     {/if}
+    <!--{#if currentDialog === "remove-stream"}
+        <RemoveStreamDialog
+            remove={(streamId) => {
+                const searchParams = new URLSearchParams();
+
+                for (const stream of streams) {
+                    searchParams.append(stream.type, stream.streamId);
+                }
+                const newUrl = new URL(window.location);
+
+                window.location.search = searchParams.toString();
+            }}
+        ></AddStreamDialog>
+    {/if}-->
     <div
         bind:this={containerElement}
         class="streams"
@@ -89,15 +97,4 @@
         height: 100vh;
         width: 100vw;
     }
-
-    .settings {
-        padding: 1rem;
-        background-color: #0000000a;
-        position: absolute;
-        width: 50vh;
-        height: 50vh;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
 </style>

src/lib/AddStreamDialog.svelte

@@ -0,0 +1,57 @@
+<script>
+    let { add } = $props();
+    let step = $state(0);
+
+    let type = null;
+    let streamId = $state("doggoat");
+</script>
+
+<div class="add-stream-dialog">
+    {#if step === 0}
+        <div>
+            <h2>Add stream</h2>
+            <button
+                onclick={() => {
+                    type = "vdo";
+                    step = 1;
+                }}>vdo.ninja</button
+            >
+            <button
+                onclick={() => {
+                    type = "twitch";
+                    step = 1;
+                }}>Twitch</button
+            >
+        </div>
+    {/if}
+    {#if step === 1}
+        <div>
+            <p>
+                Example:<br />
+                https://vdo.ninja/?view=<strong>doggoat</strong
+                >&bitrate=4500&proaudio<br />
+                https://www.twitch.tv/<strong>saltybet</strong>
+            </p>
+            <label>Stream ID: <input bind:value={streamId} /></label>
+            <button
+                onclick={() => {
+                    add({ type, streamId });
+                    step = 0;
+                }}>Add</button
+            >
+        </div>
+    {/if}
+</div>
+
+<style>
+    .add-stream-dialog {
+        padding: 1rem;
+        background-color: #0000000a;
+        position: absolute;
+        width: 50vh;
+        height: 50vh;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>

src/lib/Header.svelte

@@ -1,29 +1,25 @@
 <script>
-    let showButtons = false;
-    export let showSettings;
-    export let containerElement;
+    let showButtons = $state(false);
+    let {
+        currentDialog = $bindable(null),
+        containerElement = $bindable(null),
+    } = $props();
 </script>
 
 <header>
     <button
-        on:click={() => {
+        onclick={() => {
             showButtons = !showButtons;
         }}>[{showButtons ? "<" : ">"}]</button
     >
     {#if showButtons}
         <button
-            on:click={() => {
-                showSettings = !showSettings;
+            onclick={() => {
+                currentDialog = "add-stream";
             }}
         >
-            Settings</button
+            Add Stream</button
         >
-        <button
-            on:click={() => {
-                if (containerElement) containerElement.requestFullscreen();
-            }}>Fullscreen</button
-        >
-        <!--<button>Placeholder</button>-->
     {/if}
 </header>