frontend: improve stream UI and add fullscreen

frontend/src/routes/+layout.svelte

@@ -27,12 +27,12 @@
 	}
 
 	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
+		/*flex: 1;*/
+		/*display: flex;*/
+		/*flex-direction: column;*/
+		/*padding: 1rem;*/
 		width: 100%;
-		max-width: 64rem;
+		/*max-width: 64rem;*/
 		margin: 0 auto;
 		box-sizing: border-box;
 	}

frontend/src/routes/stream/+page.svelte

@@ -11,16 +11,20 @@
 	<meta name="description" content="Streaming game" />
 </svelte:head>
 
-<section>
-	<Stream {url} {certHash} />
-</section>
+<!--<section>
+</section>-->
+<Stream {url} {certHash} />
 
 <style>
 	section {
+		min-height: 100vh;
+		min-width: 100vw;
+	}
+	/*section {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		flex: 0.6;
-	}
+	}*/
 </style>

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>

frontend/src/routes/stream/StreamUi.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Maximize, Settings } from 'lucide-svelte';
+
+	interface Props {
+		fullscreenFunc: () => void;
+	}
+
+	let { fullscreenFunc }: Props = $props();
+</script>
+
+<div class="stream-controls">
+	<div style="flex-grow: 1"></div>
+	<div class="bar-button" role="button" tabindex="0">
+		<Settings size="100%" />
+	</div>
+	<div style="width: 0.5%"></div>
+	<div class="bar-button" onclick={fullscreenFunc} role="button" tabindex="0">
+		<Maximize size="100%" />
+	</div>
+	<div style="width: 0.5%"></div>
+</div>
+
+<style>
+	.bar-button {
+		height: 85%;
+		aspect-ratio: 1 / 1;
+		color: oklch(0.454 0 360);
+
+		transition:
+			transform 0.3s ease,
+			filter 0.3s ease;
+		/* Set transform origin to center so it grows from the middle */
+		transform-origin: center;
+	}
+	.bar-button:hover {
+		transform: scale(1.05);
+		filter: brightness(1.2);
+	}
+
+	.stream-controls {
+		height: 5%;
+		width: 100%;
+
+		position: absolute;
+
+		bottom: 0;
+		left: 0;
+
+		z-index: 2;
+
+		border-top-color: oklch(0.454 0 360);
+		border-top-width: 2px;
+
+		display: flex;
+		align-items: center;
+	}
+</style>