gamestream-webtransport-proxy/frontend/src/routes/Cover.svelte

<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';
	import { getStreamData } from './getStreamData';
	import { type App } from './apps';
	import { Circle } from 'svelte-loading-spinners';
	import { goto } from '$app/navigation';
	import { streamStore } from './stores/streamStore.svelte';

	interface Props {
		app: App;
		server_name: string;
		tab_index: number;
	}

	let { app, server_name, tab_index }: Props = $props();

	let loading = $state(false);

	async function streamApp() {
		loading = true;

		console.log(`Getting stream data for ${app.title} on ${server_name}`);
		let streamData = await getStreamData(app.id, server_name);
		streamStore.Url = streamData.Url;
		streamStore.CertHash = streamData.CertHash;
		streamStore.Width = streamData.Width;
		streamStore.Height = streamData.Height;
		streamStore.StreamToken = streamData.StreamToken;

		console.log(`Stream data retrieved. Navigating to /stream.`);
		await goto('/stream');
	}
</script>

{#if loading}
	<div class="app-box">
		<div class="app-artwork">
			<div class="app-loading-box">
				<Circle size="60" color="#FF3E00" unit="px" duration="1s" />
			</div>
			{#if app.active}
				<div class="running-pill">Running</div>
			{/if}
		</div>
		<div class="app-title">{app.title}</div>
		<div class="app-server">{server_name}</div>
	</div>
{:else}
	<div class="app-box" onclick={streamApp} onkeydown={streamApp} role="button" tabindex={tab_index}>
		<div class="app-artwork">
			{#if app.active}
				<div class="app-control-box">
					<div class="resume-button"></div>
					<div class="stop-button"></div>
				</div>
				<div class="running-pill">Running</div>
			{:else}
				<div class="app-control-box">
					<div class="resume-button"></div>
				</div>
			{/if}
		</div>
		<div class="app-title">{app.title}</div>
		<div class="app-server">{server_name}</div>
	</div>
{/if}

<style>
	.app-box {
		position: relative;
		width: 200px;
		height: 280px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.app-box:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
	}

	.app-artwork {
		width: 200px;
		height: 280px;
		background-color: #333;
		border: 2px solid #555;
		border-radius: 8px;
		position: relative;
		overflow: hidden;
		transition: border-color 0.3s ease;
	}

	.app-box:hover .app-artwork {
		border-color: #00aaff;
	}

	.app-loading-box,
	.app-control-box {
		width: 200px;
		height: 60px;
		position: relative;
		top: 50%;
		transform: translate(0%, -50%);
		opacity: 0;

		display: flex;
		justify-content: space-evenly;
	}

	.app-loading-box {
		opacity: 1;
	}

	.app-box:hover .app-control-box {
		opacity: 1;
	}

	.stop-button,
	.resume-button {
		width: 60px;
		height: 60px;
		border-radius: 50%;

		background-color: rgba(0, 170, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	.resume-button::after {
		content: '';
		width: 0;
		height: 0;
		border-left: 20px solid white;
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		margin-left: 4px;
	}

	.stop-button::after {
		content: '';
		width: 24px;
		height: 24px;
		background-color: white;
	}

	.running-pill {
		position: absolute;
		bottom: 12px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #22c55e;
		color: white;
		padding: 6px 16px;
		border-radius: 20px;
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.app-title {
		text-align: center;
		margin: 10px 0 5px 0;
		font-size: 16px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.app-server {
		text-align: center;
		font-size: 12px;
		color: #aaa;
		margin: 0;
	}
</style>