Add twitch support

src/App.svelte

@@ -8,9 +8,14 @@
     let fracsY = 0;
     let containerElement;
     let showButtons = false;
+    let showSettings = false;
 
     onMount(() => {
-        streams = new URLSearchParams(window.location.search).getAll("streams");
+        const urlSearchParams = new URLSearchParams(window.location.search);
+        streams = [...urlSearchParams.entries()].map(([type, streamId]) => ({
+            type,
+            streamId,
+        }));
 
         switch (streams.length) {
             case 1:
@@ -31,11 +36,31 @@
                 fracsY = 3;
         }
     });
+
+    function onKeyDown() {}
 </script>
 
+<svelte:body on:keydown={onKeyDown} />
 <main>
     {#if containerElement}
-        <Header {containerElement} />
+        <Header {containerElement} bind:showSettings />
+    {/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}
     <div
         bind:this={containerElement}
@@ -47,17 +72,32 @@
             ", 1fr)"}
     >
         {#if streams}
-            {#each streams as stream}
-                <Stream {stream} />
+            {#each streams as { type, streamId }}
+                <Stream {type} stream={streamId} />
             {/each}
         {/if}
     </div>
 </main>
 
 <style>
+    main {
+        position: relative;
+    }
+
     .streams {
         display: grid;
         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/Header.svelte

@@ -1,6 +1,7 @@
 <script>
     let showButtons = false;
-    export let containerElement = null;
+    export let showSettings;
+    export let containerElement;
 </script>
 
 <header>
@@ -10,6 +11,13 @@
         }}>[{showButtons ? "<" : ">"}]</button
     >
     {#if showButtons}
+        <button
+            on:click={() => {
+                showSettings = !showSettings;
+            }}
+        >
+            Settings</button
+        >
         <button
             on:click={() => {
                 if (containerElement) containerElement.requestFullscreen();

src/lib/Stream.svelte

@@ -1,10 +1,27 @@
 <script>
     export let stream;
+    export let type;
+    let src;
+    let data;
+
+    switch (type) {
+        case "twitch":
+            data = { channel: stream, parent: window.location.host };
+            src = "https://player.twitch.tv/?" + new URLSearchParams(data);
+            break;
+        case "vdo":
+            data = { view: stream, bitrate: 4000, proaudio: true };
+            src = "https://vdo.ninja/?" + new URLSearchParams(data);
+            break;
+        default:
+            break;
+    }
 </script>
 
 <div class="stream-container">
-    <iframe title={stream} src={"https://vdo.ninja/?vol=0&view=" + stream}
-    ></iframe>
+    {#if src && data}
+        <iframe title={stream} {src}></iframe>
+    {/if}
 </div>
 
 <style>