frontend: improve launch UI and refactor stream to new page
This commit is contained in:
@@ -1,43 +1,68 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
import { startStream } from './connect';
|
||||
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 }: Props = $props();
|
||||
let { app, server_name, tab_index }: Props = $props();
|
||||
|
||||
let loading = $state(false);
|
||||
|
||||
async function streamApp() {
|
||||
await startStream(app, server_name);
|
||||
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;
|
||||
|
||||
console.log(`Stream data retrieved. Navigating to /stream.`);
|
||||
await goto('/stream');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="app-box" on:click={streamApp}>
|
||||
<div class="app-artwork">
|
||||
<div class="play-button"></div>
|
||||
{#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>
|
||||
<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>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.apps-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.app-box {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
@@ -53,7 +78,7 @@
|
||||
|
||||
.app-artwork {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
height: 280px;
|
||||
background-color: #333;
|
||||
border: 2px solid #555;
|
||||
border-radius: 8px;
|
||||
@@ -66,6 +91,73 @@
|
||||
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;
|
||||
@@ -82,52 +174,4 @@
|
||||
color: #aaa;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(0, 170, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.play-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;
|
||||
}
|
||||
|
||||
.app-box:hover .play-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-box.clicked {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff4444;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user