63 lines
1.4 KiB
Svelte
63 lines
1.4 KiB
Svelte
<script>
|
|
import { onMount } from "svelte";
|
|
import Header from "./lib/Header.svelte";
|
|
import Stream from "./lib/Stream.svelte";
|
|
|
|
let streams = [];
|
|
let fracsX = 0;
|
|
let fracsY = 0;
|
|
let containerElement;
|
|
let showButtons = false;
|
|
|
|
onMount(() => {
|
|
streams = new URLSearchParams(window.location.search).getAll("streams");
|
|
|
|
switch (streams.length) {
|
|
case 1:
|
|
fracsX = 1;
|
|
fracsY = 1;
|
|
break;
|
|
case 2:
|
|
fracsX = 1;
|
|
fracsY = 2;
|
|
break;
|
|
case 3:
|
|
case 4:
|
|
fracsX = 2;
|
|
fracsY = 2;
|
|
break;
|
|
default:
|
|
fracsX = Math.round(streams.length / 3);
|
|
fracsY = 3;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<main>
|
|
{#if containerElement}
|
|
<Header {containerElement} />
|
|
{/if}
|
|
<div
|
|
bind:this={containerElement}
|
|
class="streams"
|
|
style={"grid-template-columns: repeat(" +
|
|
fracsY +
|
|
", 1fr); grid-template-rows: repeat(" +
|
|
fracsX +
|
|
", 1fr)"}
|
|
>
|
|
{#if streams}
|
|
{#each streams as stream}
|
|
<Stream {stream} />
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.streams {
|
|
display: grid;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
</style>
|