frontend: improve stream UI and add fullscreen

frontend/src/routes/stream/Stream.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { streamUrl } from './stream';
+	import StreamUi from './StreamUi.svelte';
 
 	interface Props {
 		url: string;
@@ -9,18 +10,55 @@
 
 	let { url, certHash }: Props = $props();
 	let loading = $state(true);
+	let fullscreen = $state(false);
+	let gameplayView: HTMLDivElement;
 
 	async function startStream() {
 		console.log(`Connecting to stream at ${url} with cert_hash ${certHash}`);
 		await streamUrl(url, certHash);
 	}
 
+	async function requestFullscreen() {
+		if (fullscreen) {
+			await document.exitFullscreen();
+			fullscreen = false;
+		} else {
+			if (gameplayView.requestFullscreen) {
+				await gameplayView.requestFullscreen();
+				fullscreen = true;
+			}
+		}
+	}
+
 	onMount(async () => {
 		await startStream();
 	});
 </script>
 
-<canvas id="gamestream-canvas" width="1280" height="720"></canvas>
+<div id="gameplay-view" class="gameplay-view" bind:this={gameplayView}>
+	<canvas id="gamestream-canvas" class="gamestream-canvas"></canvas>
+	<StreamUi fullscreenFunc={requestFullscreen}></StreamUi>
+</div>
 
 <style>
+	.gameplay-view {
+		height: 100vh;
+		aspect-ratio: 16 / 9;
+
+		margin-left: auto;
+		margin-right: auto;
+		background-color: black;
+
+		position: relative;
+	}
+
+	.gamestream-canvas {
+		height: 100%;
+		aspect-ratio: 16 / 9;
+
+		position: relative;
+		margin: auto;
+
+		z-index: 1;
+	}
 </style>