frontend: support input + refactoring

frontend/src/routes/stream/Stream.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { streamUrl } from './stream';
+	import { startWebtransportStream } from './stream';
 	import StreamUi from './StreamUi.svelte';
 
 	interface Props {
@@ -15,8 +15,7 @@
 	let gameplayCanvas: HTMLCanvasElement;
 
 	async function startStream() {
-		console.log(`Connecting to stream at ${url} with cert_hash ${certHash}`);
-		await streamUrl(url, certHash, gameplayCanvas);
+		await startWebtransportStream(url, certHash, gameplayCanvas, gameplayCanvas, gameplayCanvas);
 	}
 
 	async function requestFullscreen() {
@@ -29,10 +28,8 @@
 			await document.exitFullscreen();
 			fullscreen = false;
 		} else {
-			if (gameplayView.requestFullscreen) {
-				await gameplayView.requestFullscreen();
-				fullscreen = true;
-			}
+			await gameplayCanvas.requestFullscreen();
+			fullscreen = true;
 		}
 	}
 
@@ -42,7 +39,8 @@
 </script>
 
 <div id="gameplay-view" class="gameplay-view" bind:this={gameplayView}>
-	<canvas id="gamestream-canvas" class="gamestream-canvas" bind:this={gameplayCanvas}></canvas>
+	<canvas id="gamestream-canvas" class="gamestream-canvas" bind:this={gameplayCanvas} tabindex="0"
+	></canvas>
 	<StreamUi fullscreenFunc={requestFullscreen}></StreamUi>
 </div>
 
@@ -56,6 +54,9 @@
 		background-color: black;
 
 		position: relative;
+
+		display: flex;
+		flex-direction: column;
 	}
 
 	.gamestream-canvas {
@@ -65,6 +66,6 @@
 		position: relative;
 		margin: auto;
 
-		z-index: 1;
+		/*z-index: 1;*/
 	}
 </style>