frontend: improve stream UI and add fullscreen

frontend/package.json

@@ -42,6 +42,7 @@
 		]
 	},
 	"dependencies": {
+		"lucide-svelte": "^0.539.0",
 		"svelte-loading-spinners": "^0.3.6"
 	}
 }

frontend/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      lucide-svelte:
+        specifier: ^0.539.0
+        version: 0.539.0(svelte@5.36.12)
       svelte-loading-spinners:
         specifier: ^0.3.6
         version: 0.3.6
@@ -1038,6 +1041,11 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lucide-svelte@0.539.0:
+    resolution: {integrity: sha512-p4k3GOje/9Si1eIkg1W1OQUhozeja5Ka5shjVpfyP5X2ye+B7sfyMnX3d5D2et+MYJwUFGrMna5MIYgq6bLfqw==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -2287,6 +2295,10 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
+  lucide-svelte@0.539.0(svelte@5.36.12):
+    dependencies:
+      svelte: 5.36.12
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.4

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>