make active stream work but frontend

This commit is contained in:
Micha Albert 2024-07-29 18:17:49 +00:00
parent 08f2dd096c
commit 05aace1ccf

View file

@ -9,6 +9,7 @@
}[] }[]
| null = null; | null = null;
let activeStream: string; let activeStream: string;
let oldActiveStream: string | null = null;
let newData: let newData:
| { | {
bytesSent: any; bytesSent: any;
@ -19,7 +20,6 @@
}[] }[]
| null = null; | null = null;
let activePaths: string[] = []; let activePaths: string[] = [];
onMount(() => { onMount(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
@ -27,6 +27,10 @@
"http://localhost:8000/api/v1/active_stream", "http://localhost:8000/api/v1/active_stream",
); );
activeStream = (await activeStreamResponse.text()).replaceAll('"', ""); activeStream = (await activeStreamResponse.text()).replaceAll('"', "");
if (oldActiveStream !== null && oldActiveStream !== activeStream) {
window.location.reload();
}
oldActiveStream = activeStream;
const pathListResponse = await fetch( const pathListResponse = await fetch(
"http://localhost:9997/v3/paths/list", "http://localhost:9997/v3/paths/list",
); );
@ -83,7 +87,7 @@
<div <div
class="flex w-screen h-screen justify-items-center bg-transparent absolute top-0 left-0 overflow-hidden" class="flex w-screen h-screen justify-items-center bg-transparent absolute top-0 left-0 overflow-hidden"
> >
<h2 class="text-4xl text-center w-screen absolute"> <h2 class="text-4xl text-center w-screen absolute top-4">
OnBoard Live Design Stream OnBoard Live Design Stream
</h2> </h2>
<img <img
@ -121,15 +125,15 @@
<div <div
class="flex justify-center items-center w-screen h-1/4 absolute bottom-10" class="flex justify-center items-center w-screen h-1/4 absolute bottom-10"
> >
{#each pathData as path} {#each activePaths as path}
{#if path.ready && path.name !== activeStream} {#if path !== activeStream}
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<video <video
controls controls
autoplay autoplay
muted muted
id={path.name} id={path}
bind:this={videos[path.name]} bind:this={videos[path]}
class="h-[20vh] w-auto mx-10" class="h-[20vh] w-auto mx-10"
></video> ></video>
{/if} {/if}
@ -143,7 +147,7 @@
</p> </p>
</div> </div>
{/if} {/if}
<h2 class="absolute bottom-0 text-center w-screen text-xl"> <h2 class="absolute bottom-4 text-center w-screen text-xl">
Join at <div Join at <div
style="display: inline-block; color: #338eda; text-decoration-line: underline;" style="display: inline-block; color: #338eda; text-decoration-line: underline;"
> >